feat: modernize usage of Stencil components

- Remove the ability to wrap a Stencil component in an Ember component
- Remove configuration of custom events through Ember, thanks to the new `{{on}}` modifier

BREAKING CHANGE: If you were previously leveraging the custom Ember component wrappers, you should instead just invoke the custom elements like you normally would. Rather than using the `{{action}}` helper to listen to events, you should install `ember-on-modifiers` and leverage that to listen to events from your custom elements. If you were extending your `Application` instance with the `CustomEvents` mixin, that should be removed, as it is no longer necessary thanks to the `{{on}}` modifier.

README.md

@@ -1,5 +1,4 @@
-ember-cli-stencil
-================================================================================
+# ember-cli-stencil
 
 [![Build Status](https://travis-ci.org/alexlafroscia/ember-cli-stencil.svg?branch=master)](https://travis-ci.org/alexlafroscia/ember-cli-stencil)
 [![NPM Version](https://badgen.net/npm/v/ember-cli-stencil)](https://www.npmjs.com/package/ember-cli-stencil)
@@ -11,8 +10,7 @@ Stencil provides a great, opinionated process for defining Web Components (custo
 
 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".
 
-Installation
---------------------------------------------------------------------------------
+## Installation
 
 Start by installing your Stencil components as `npm` modules, as described in the [distribution instructions][distribution] instructions in the guide. Then, install this addon:
 
@@ -22,14 +20,17 @@ ember install ember-cli-stencil
 
 That's it! Your Stencil components will automatically be detected by the addon and pulled into your application.
 
-Features
---------------------------------------------------------------------------------
+## Usage
 
-- [Generating Ember component wrappers](https://github.com/alexlafroscia/ember-cli-stencil/wiki/Ember-component-wrappers)
-- [Custom Events support](https://github.com/alexlafroscia/ember-cli-stencil/wiki/Custom-Events)
+Since Stencil components are detected automatically, you can just start using any Stencil components discovered in your dependencies without any further configuration required. Props can be passed to them, just like other elements, and events listened to through the [`{{on}}` modifier][on-modifier].
 
-Debugging
---------------------------------------------------------------------------------
+```hbs
+<my-custom-component props={{value}} {{on 'someEvent' this.handleEvent}}>
+  Rendering into the slot
+</my-custom-component>
+```
+
+## Debugging
 
 If the build seems slow, or you think there are packages missing, you can log some debugging information like so:
 
@@ -39,12 +40,13 @@ DEBUG=ember-cli-stencil:* ember serve
 
 This will report:
 
-* Which packages were discovered to be Stencil collections
-* Which files were imported into your `vendor.js` file
-* Which files were added to the `public` folder of the build
+- Which packages were discovered to be Stencil collections
+- Which files were imported into your `vendor.js` file
+- Which files were added to the `public` folder 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][issues].
 
 [stencil]: https://stenciljs.com/
 [distribution]: https://stenciljs.com/docs/distribution
 [issues]: https://github.com/alexlafroscia/ember-cli-stencil/issues
+[on-modifier]: https://github.com/buschtoens/ember-on-modifier#readme

packages/ember-cli-stencil/ember-cli-build.js

@@ -3,12 +3,7 @@
 const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 
 module.exports = function(defaults) {
-  let app = new EmberAddon(defaults, {
-    'ember-cli-stencil': {
-      generateWrapperComponents: true,
-      generateCustomEventsMixin: true
-    }
-  });
+  let app = new EmberAddon(defaults, {});
 
   /*
     This build file specifies the options for the dummy test app of this

packages/ember-cli-stencil/index.js

@@ -7,7 +7,6 @@ const writeFile = require('broccoli-file-creator');
 const debug = require('debug');
 
 const StencilCollection = require('./lib/stencil-collection');
-const customEventsMixin = require('./lib/broccoli/dynamically-create-mixin');
 const generateInitializer = require('./lib/generate-import-initializer');
 
 module.exports = {
@@ -24,9 +23,7 @@ module.exports = {
 
     return Object.assign(
       {
-        autoImportCollections: true,
-        generateWrapperComponents: true,
-        generateCustomEventsMixin: true
+        autoImportCollections: true
       },
       config['ember-cli-stencil']
     );
@@ -88,21 +85,6 @@ module.exports = {
     );
   },
 
-  treeForAddon(tree) {
-    const config = this.addonOptions();
-
-    if (config.generateCustomEventsMixin) {
-      const merged = new MergeTree([
-        tree,
-        customEventsMixin(this.stencilCollections)
-      ]);
-
-      return this._super.treeForAddon.call(this, merged);
-    }
-
-    return tree;
-  },
-
   treeForApp(tree) {
     const log = debug(`${this.name}:app`);
     const config = this.addonOptions();
@@ -119,40 +101,15 @@ module.exports = {
         )
       );
 
-      tree = MergeTree([tree, importedCollectionsTree]);
-    } else {
-      log('configuration disabled auto-importing stencil collections');
-    }
+      const trees = [importedCollectionsTree];
+
+      if (tree) {
+        trees.push(tree);
+      }
 
-    if (config.generateWrapperComponents) {
-      log('configuration enabled generating wrapper components');
-
-      const generatedComponents = this.stencilCollections.reduce((acc, dep) => {
-        return [
-          ...acc,
-          ...dep.collection.components.map(component => {
-            log('generating component %o from %o', component.tag, dep.name);
-
-            const props = component.props;
-            const events = component.events;
-
-            return writeFile(
-              `components/${component.tag}.js`,
-              `
-              import generateComponent from 'ember-cli-stencil/-private/generate-component';
-
-              export default generateComponent('${
-                component.tag
-              }', ${JSON.stringify(props)}, ${JSON.stringify(events)});
-            `
-            );
-          })
-        ];
-      }, []);
-
-      tree = MergeTree([tree, ...generatedComponents]);
+      tree = MergeTree(trees);
     } else {
-      log('configuration disabled generating wrapper components');
+      log('configuration disabled auto-importing stencil collections');
     }
 
     return tree;

packages/ember-cli-stencil/package.json

@@ -48,6 +48,7 @@
     "ember-export-application-global": "^2.0.0",
     "ember-load-initializers": "^2.0.0",
     "ember-maybe-import-regenerator": "^0.1.6",
+    "ember-on-modifier": "^1.0.0",
     "ember-qunit": "^4.4.1",
     "ember-resolver": "^5.0.1",
     "ember-source": "~3.10.0",

packages/ember-cli-stencil/tests/dummy/app/app.js

@@ -2,9 +2,8 @@ import Application from '@ember/application';
 import Resolver from './resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from './config/environment';
-import CustomEvents from 'ember-cli-stencil/mixins/custom-events';
 
-const App = Application.extend(CustomEvents, {
+const App = Application.extend({
   modulePrefix: config.modulePrefix,
   podModulePrefix: config.podModulePrefix,
   Resolver

packages/ember-cli-stencil/tests/dummy/app/templates/application.hbs

@@ -7,6 +7,6 @@
 
 <h2>Binding to an Event</h2>
 
-<demo-event-emitter {{action 'sayHello' on='demoEvent'}}>
+<demo-event-emitter {{on 'demoEvent' this.sayHello}}>
   Action bound to an event
 </demo-event-emitter>

packages/ember-cli-stencil/tests/integration/custom-events-test.js

@@ -13,7 +13,7 @@ module('custom events', function(hooks) {
     this.set('customEventHandler', customEventHandler);
 
     await render(hbs`
-      <demo-event-emitter {{action (action customEventHandler) on='demoEvent'}}>
+      <demo-event-emitter {{on 'demoEvent' this.customEventHandler}}>
         Send Event
       </demo-event-emitter>
     `);
@@ -23,6 +23,6 @@ module('custom events', function(hooks) {
 
     await click(button);
 
-    assert.verify(customEventHandler());
+    assert.verify(customEventHandler(td.matchers.isA(Event)));
   });
 });