Theme component order of precedence

Dev
5

Every time you create / install a theme or component, Discourse assigns an id to it. If you visit that component’s page, you should see that id in the URL (the number at the end)

component id in the URL

When that component is added to your theme, its execution order seems to be based on its id - on a very basic level (doing a console log without any deferring) . So, 233 will run before 234 and so on.

This works for the most part because subsequent changes are usually added in new components so it just works.

Long term we can have the order respect that of the list of components you have added to the theme

active components setting
active components setting985×141 13.8 KB

but that’s not on any roadmap for now.

What you really need is initializer order. I don’t think you can do that unless you move your code to the new way of creating theme JS. This method allows you to give the initializer a name and execution order. For example, let’s say I have this file

/javascripts/discourse/initializers/initialize-for-foo.js

and it looks like this

import { withPluginApi } from "discourse/lib/plugin-api";

export default {
  name: "foo",
  initialize() {
    withPluginApi("0.8.7", api => {
      console.log("foo")
    });
  }
}

and I have another initializer that looks like this

/javascripts/discourse/initializers/initialize-for-bar.js

import { withPluginApi } from "discourse/lib/plugin-api";

export default {
  name: "bar",
  initialize() {
    withPluginApi("0.8.7", api => {
      console.log("bar")
    });
  }
}

If I want to ensure that bar runs after foo, I can add an after: argument to it and that will ensure that it runs after the initializer name I pass there. So, to make bar run after foo I would do this in

/javascripts/discourse/initializers/initialize-for-bar.js

import { withPluginApi } from "discourse/lib/plugin-api";

export default {
  name: "bar",
+ after: "foo",
  initialize() {
    withPluginApi("0.8.7", api => {
      console.log("bar");
    });
  }
};
6 Likes