How to include only a subset of the files from an addon

Ember CLI
1

My company has many Ember apps and many elements are shared between them, like components, services, mixins, etc. To make our lives easier, we’ve built an addon that contains all the shared elements that can be installed in each app.

This works great except for the fact that all the elements get included whether they are used or not, and we are very concerned with file size.

We want to be able to specifiy which elements from the addon should be included when the app is built. Ideally the syntax would look something like this:

# ember-cli-build.js

var app = new EmberApp(defaults, {
    mySharedAddon: {
      include: [
         'components/modal-dialog',
         'components/date-picker',
         'components/country-selector',
         'services/authentication',
         'services/current-user'
      ]
    }
});

I think the solution is to modify the treeForAddon hook in the index.js file for the addon, but I don’t know enough about broccoli to know what I need to return. And there doesn’t seem to be any documentation on it.

Can anyone point me in the right direction?

2

You can take a look at my addon as an example: https://github.com/ming-codes/ember-cli-d3/blob/master/index.js#L57-L75

Don’t worry about broccoli too much. You can just pick out the files with app.import

3

app.import doesn’t prevent all the other files from being included with the addon.

Also I thought app.import was really only for js and css you needed to add globally outside of ember, like bootstrap, etc. The elements I am trying to add are ember components, services, etc.

4

This is what I finally came up with, seems to work ok.

  treeForAddon: function(tree){
    var includes = options.mySharedAddon.include.reduce(function(items, curr) {
      items.push(curr + ".*", curr + "/**/*");
      return items;
    }, []);
    var addonTree = funnel(tree, {include: includes});
    return this._super.treeForAddon.call(this, addonTree);
  }