How to override default functionality in Ember-addons

Question

In the ember-cli documentation it describes bridging the addon within your host application by overriding the app/component/[addon-name.js] yourself. However, the documentation doesn't explicitly state how to do this.

With trial and error I've noticed that by creating a component file in your [host app]/app/component/[name of addon.js] and simply copy/paste the addon code into there provides a venue to customize the addon. However, this is a terrible approach, I would imagine that I could simply override the functions in question...and in some cases call this.super().functionName in order to keep the over-rides simple and trim.

However, I can't get this to work. Any ideas?

Answer 1

Extensibility is why addons have both the addon/ and app/ trees. In the app tree for a component, the component should just be an import and export, for example:

import XSelect from 'emberx-select/components/x-select';
export default XSelect;

Source: https://github.com/thefrontside/emberx-select/blob/master/app/components/x-select.js

In this kind of case you want to create the component in [host app]/app/component/[name-of-addons-component.js] then in that component do:

import XSelect from 'emberx-select/components/x-select';

export default XSelect.extend({
  //any overrides
});