# Ensuring treeForApp from Addon1 runs before Addon2

**URL:** <https://discuss.emberjs.com/t/ensuring-treeforapp-from-addon1-runs-before-addon2/14662>\
**Category:** Build Issues\
**Created:** [April 29, 2018, 3:58am UTC](https://discuss.emberjs.com/t/ensuring-treeforapp-from-addon1-runs-before-addon2/14662 "2018-04-29T03:58:55Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![samselikoff](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/samselikoff/32/16581_2.png) [@samselikoff](https://discuss.emberjs.com/u/samselikoff)\
**Post date:** [April 29, 2018, 3:58am UTC](https://discuss.emberjs.com/t/ensuring-treeforapp-from-addon1-runs-before-addon2/14662/1 "2018-04-29T03:58:55Z")

</div>

I’m working on AddonDocs, and it depends on Mirage. I want the `treeForApp` hook from AddonDocs to run before the `treeForApp` hook from Mirage (so that AddonDocs can create a file that Mirage expects, in case the host app doesn’t provide it).

In AddonDocs’ `package.json` I made sure to specify that it should run before Mirage:

```nohighlight
"ember-addon": {
  "configPath": "tests/dummy/config",
  "before": [
    "ember-cli-mirage",
    "ember-cli-htmlbars",
    "ember-svg-jar"
  ],
  "after": [
    "ember-modal-dialog"
  ]
}

```

and defined `treeForApp`

```auto
treeForApp(app) {
  console.log('here in addon docs..');

  // snip
}

```

I also cracked open `node_modules/ember-cli-mirage/index.js` and added a log to Mirage’s hook:

```auto
treeForApp(appTree) {
  console.log('here in mirage');
  
  // snip
}

```

Here’s the output from terminal:

```nohighlight
➜ ember-cli-addon-docs git:(fix-mirage) ✗ ember s
here in mirage
here in addon docs..
here in mirage

```

Any ideas what’s going on?

---

<div class="post-metadata">

**Author:** ![rwjblue](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/rwjblue/32/9411_2.png) [@rwjblue](https://discuss.emberjs.com/u/rwjblue)\
**Post date:** [April 29, 2018, 12:03pm UTC](https://discuss.emberjs.com/t/ensuring-treeforapp-from-addon1-runs-before-addon2/14662/2 "2018-04-29T12:03:18Z")

</div>

The `treeForApp` methods of addons cannot “see” the results of other addons `treeForApp`. Each is called independently, and expected to return its own content, then later in the build pipeline all of the addons’ app trees are merged together with the one from the actual app.

---

<div class="post-metadata">

**Author:** ![samselikoff](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/samselikoff/32/16581_2.png) [@samselikoff](https://discuss.emberjs.com/u/samselikoff)\
**Post date:** [April 29, 2018, 12:48pm UTC](https://discuss.emberjs.com/t/ensuring-treeforapp-from-addon1-runs-before-addon2/14662/3 "2018-04-29T12:48:18Z")

</div>

That should be okay for my use case… AddonDocs can look at the `tests/dummy` directory of the “host addon” and determine on its own if it wants to augment the `appTree`. I just need to run that augmentation code before Mirage has a chance to run.

Is this possible?

---

<div class="post-metadata">

**Author:** ![ef4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ef4/32/13470_2.png) [@ef4](https://discuss.emberjs.com/u/ef4)\
**Post date:** [April 30, 2018, 12:32am UTC](https://discuss.emberjs.com/t/ensuring-treeforapp-from-addon1-runs-before-addon2/14662/4 "2018-04-30T00:32:40Z")

</div>

I can imagine how to make that work down in the broccoli layer, but I wonder if there isn’t an alternative design.

It sounds like you want AddonDocs to be able to create additional input to Mirage, and it’s doing so by augmenting the host application’s tree. But you could also establish an API directly between AddonDocs and Mirage that would convey the same information. A general API for an addon to augment the mirage config.

Also, one of the goals of module unification is to stop allowing addons to mess around with the app tree.

---

<div class="post-metadata">

**Author:** ![samselikoff](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/samselikoff/32/16581_2.png) [@samselikoff](https://discuss.emberjs.com/u/samselikoff)\
**Post date:** [April 30, 2018, 12:54am UTC](https://discuss.emberjs.com/t/ensuring-treeforapp-from-addon1-runs-before-addon2/14662/5 "2018-04-30T00:54:34Z")

</div>

> [@ef4](#):
>
> A general API for an addon to augment the mirage config.

👍 this is definitely the long-term solution and has been requested by others.

However in the short-term, and in the interest of shoring up my Ember CLI knowledge, I’d still like to understand why Mirage’s `treeFor*` hooks are getting run in the build before AddonDocs’.

---

<div class="post-metadata">

**Author:** ![ef4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ef4/32/13470_2.png) [@ef4](https://discuss.emberjs.com/u/ef4)\
**Post date:** [April 30, 2018, 4:05am UTC](https://discuss.emberjs.com/t/ensuring-treeforapp-from-addon1-runs-before-addon2/14662/6 "2018-04-30T04:05:51Z")

</div>

Now that I notice this:

> [@samselikoff](#):
>
> so that AddonDocs can create a file that Mirage expects, in case the host app doesn’t provide it)

I think you may have an easy out, which is that the application takes precedence over all addons, so it’s safe to always provide your default file in AddonDocs’s `treeForApp`.

But if you want to go deeper…

One thing about broccoli is that nearly everything is pull based. The whole graph is constructed first, and then actual work happens as each tree is read. And the work can be asynchronous. The `treeFor` methods _are_ [called in plugin order](https://github.com/ember-cli/ember-cli/blob/8f974d262bea0d0571a945961b649da6620d21fb/lib/broccoli/ember-app.js#L659), but that is just the graph construction phase.

You can’t really guarantee order between two broccoli transforms unless there is some dependency between them. This is a feature, not a bug, because it leaves the build system free to determine when/if to run any particular transform stage. Once you start to consider arbitrary incremental rebuilds, one can see that it needs to be this way.

So if you really find yourself caring about the relative order of two transforms, you should be looking to refactor so that one actually depends on the other explicitly.

But here is where your question gets murky. When an addon processes `treeForApp`, all the inputs to that function are things from the addon itself. It doesn’t get to see anything from the app anyway. The default behavior of `treeForApp` is just to return everything that was in the addon’s `app` folder (which is typically just re-exports as written by the component blueprint, etc).

To put it another way, I think you were imagining that each addon’s treeForApp composes something like:

```auto
treeForApp(treeForApp(treeForApp(originalApp)))

```

But in reality it is more like

```auto
mergeTrees([treeForApp(), treeForApp(), treeforApp(), originalApp])

```

So even if you manipulate the relative order of the addons, you are only changing the order of the merge, you’re not establishing any data dependency between the addons.

---

<div class="post-metadata">

**Author:** ![samselikoff](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/samselikoff/32/16581_2.png) [@samselikoff](https://discuss.emberjs.com/u/samselikoff)\
**Post date:** [April 30, 2018, 2:28pm UTC](https://discuss.emberjs.com/t/ensuring-treeforapp-from-addon1-runs-before-addon2/14662/7 "2018-04-30T14:28:30Z")

</div>

Thanks so much for the explanation 👍

I do understand your point about each `treeForApp` not having access to others. That makes sense.

Ultimately I think my problem is that currently, Mirage is hardcoded to read from disk instead of checking the build. I haven’t had time to circle back yet but that would obviously cause an issue.

I would love to keep learning how Ember CLI works its magic. Is there any particular part of the codebase that would be a good place to start reading, to better understand it?

---

<div class="post-metadata">

**Author:** ![ef4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ef4/32/13470_2.png) [@ef4](https://discuss.emberjs.com/u/ef4)\
**Post date:** [April 30, 2018, 3:05pm UTC](https://discuss.emberjs.com/t/ensuring-treeforapp-from-addon1-runs-before-addon2/14662/8 "2018-04-30T15:05:39Z")

</div>

One idea is to take a [relatively small but comprehensive test case](https://github.com/broccolijs/broccoli-funnel/blob/bfea8d4c79e624b02a248efdfa345e5055fbc0ea/tests/index.js#L60-L82), drop a breakpoint in the start of the test, and step through the whole process in the debugger to see what calls what.