Override trigger template in v4

First of all, thank you for the great effort spent on this addon.

In EPS v3 I was able to override the trigger template by having a template file templates/power-select/trigger.hbs. Now with v4 the addon switched to co-located templates, so the template is now at components/power-select/trigger.hbs. If I introduce a file at that location, Ember throws the following error:

Uncaught (in promise) TypeError: can’t redefine non-configurable property “default”

My guess is that having a file named components/power-select/trigger.hbs, I’m not actually overriding a template, but introducing a new component (shadowing the addon). How would I go about replacing the actual trigger template with v4?

[Bouke]

Cross-post from discuss.emberjs.com:

So I suppose the answer to my question is answered here: Build-time transformations:

One caveat here is that each component JavaScript file should export a value that is unique to that file. For example, this should be avoided :

// app/components/foo-bar.js

import MyParentComponent from "./my-parent";

// BAD: don't do this!
export default MyParentComponent;

This is problematic because setComponentTemplate will be called on MyParentComponent directly, affecting the parent component and all of its descendants. This can be avoided by subclassing, even when no customization is required:

// app/components/foo-bar.js

import MyParentComponent from "./my-parent";

// GOOD: do this instead!
export default class extends MyParentComponent {}

With that in mind, I’ve changed my code to read like this:

import Trigger from 'ember-power-select/components/power-select/trigger';
export default class extends Trigger { }

And now my custom template is being used!

As a separate issue I cannot seem to find the magical incantation to get TypeScript to allow the import. TypeScript insists on adding /addon/, which fails run time. This might be due to the following caveat listed in ember-cli-typescript:

• Similarly, apps must use .js to override addon defaults in app , since the different file extension means apps no long consistently “win” over addon versions (a limitation of how Babel + app merging interact).

[bmaehr]

With that in mind, I’ve changed my code to read like this:

import Trigger from 'ember-power-select/components/power-select/trigger';
export default class extends Trigger { }

And now my custom template is being used!

As a separate issue I cannot seem to find the magical incantation to get TypeScript to allow the import. TypeScript insists on adding /addon/, which fails run time. This might be due to the following caveat listed in ember-cli-typescript:

• Similarly, apps must use .js to override addon defaults in app , since the different file extension means apps no long consistently “win” over addon versions (a limitation of how Babel + app merging interact).

Could you please explain more precisely (names of the files, what you did else) because I’m also not able to get it working…