Automatic discovery of Stencil.js components for your Ember application
Stencil provides a great, opinionated process for defining Web Components (custom elements) using TypeScript and JSX. The problem is that Ember has to be told about what these custom elements are and what events they can emit for you to integrate the two libraries together.
Because of the conventions of Stencil and the Ember CLI respectively, we can wrap up all of that boilerplate so that your custom elements "just work".
Start by installing your Stencil components as
npm modules, as described in the distribution instructions instructions in the guide. Then, install this addon:
ember install ember-cli-stencil
That's it! Your Stencil components will automatically be detected by the addon and pulled into your application.
If the build seems slow, or you think there are packages missing, you can log some debugging information like so:
DEBUG=ember-cli-stencil:* ember serve
This will report:
- Which packages were discovered to be Stencil collections
- Which files were imported into your
- Which files were added to the
publicfolder of the build
If there are any issues around judging a file to be a Stencil collection incorrectly or importing the wrong files, please file an issue.