Ember-cli-build, exclude components ember addon

522 views Asked by At

I'm using a "core" ember addon in a boilerplate, with

npm link core-addon

This addon contains generic components, helpers, routes...

Is there a way to exclude some of these components in the boilerplate's ember-cli-build file?

I already tried the following in the ember-build-cli in my boilerplate project, which is probably wrong:

const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const environment = EmberApp.env();
module.exports = function (defaults) {
    let app = new EmberApp(defaults, {
        funnel: {
                enabled:true,
                exclude:['core-addon/pods/components/pages/**/*']
            },
    });
return app.toTree();
};

Ember version: 3.5.0 Ember cli version 3.5.0 node version 8.11.3

1

There are 1 answers

2
mistahenry On BEST ANSWER

Addons generally take the reverse approach of this: The addon manages what gets merged into the consuming app via configuration in the consuming app.

At the highest level, each addon has an entry point that is the index.js file sitting in the root directory of the addon. The addon provides certain configuration options that it reads from config/environment.js of the consuming app when installing.

I think a really good case study for you would be ember-bootstrap. Look at their configuration options and more specifically the blacklist option. They allow the consuming application to only install a subset of the bootstrap components. Furthermore, the project supports bootstrap 3 or bootstrap 4, but the consuming app isn't getting both! The work is done in index.js

Let's look just at how they blacklist (ie exclude) certain components from being added to the consuming app:

treeForApp(tree) {
  tree = this.filterComponents(tree);
  return this._super.treeForApp.call(this, tree);
},
filterComponents(tree) {
  let whitelist = this.generateWhitelist(this.bootstrapOptions.whitelist);
  let blacklist = this.bootstrapOptions.blacklist || [];

  // exit early if no opts defined
  if (whitelist.length === 0 && blacklist.length === 0) {
    return tree;
  }

  return new Funnel(tree, {
    exclude: [(name) => this.excludeComponent(name, whitelist, blacklist)]
  });
}

where this.excludeComponent at it's core is a boolean returning filter function that returns true if the blacklist contains it in the blacklist case (there for excluding it). The treeForApp function returns the tree for all app files, ie what will be merged from the addon's app dir into the consuming app:

The consuming app's ember-cli-build would look something like this:

//your-bootstrap-app/ember-cli-build.js

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    'ember-bootstrap': {
      blacklist: ['bs-popover', 'bs-accordion']
    }
  });

  return app.toTree();
};

and the result would be no bs-popover and no bs-accordion available in the consuming apps app tree. These options are obtained in the index.js file like so:

let options =Object.assign({}, defaultOptions, app.options['ember-bootstrap']);
this.bootstrapOptions = options;

Check this general guide to building addons and the more advanced api for more info.