Uses a loader as the single point of entry

Author: xcambar

addon/create-web-components.js

@@ -22,6 +22,7 @@ class ApplicationContainer extends HTMLElement {
   constructor() {
     super()
     this.#shadowRoot = this.attachShadow({mode: 'closed'})
+
     // The 2 divs are a trick in how Ember finds their parent
     let rootParent = document.createElement('div')
     _appendStyles(rootParent, this.#styles)
@@ -30,8 +31,18 @@ class ApplicationContainer extends HTMLElement {
     this.#shadowRoot.appendChild(rootParent)
     rootParent.appendChild(rootElement)
 
+    // Handle inner config
+    let configSource = this.querySelector('[data-json-config]').textContent
+    let appConfig = JSON.parse(configSource)
+
+    // Handle attribute-based config
+    let attributes = [...this.attributes].reduce((acc, a)=> {
+      return {...acc, [a.nodeName]: a.nodeValue }
+    }, {})
+    config.appConfig = { ...appConfig, ...attributes }
   }
 
+  // Starts the app when an element is connected
   connectedCallback() {
     if (this.#application || !this.isConnected) {
       return
@@ -43,6 +54,7 @@ class ApplicationContainer extends HTMLElement {
     this.#application = app
   }
 
+  // Destroy the app on disconnection of the node
   disconnectedCallback() {
     if (!this.#application.isDestroyed && !this.#application.isDestroying) {
       this.#application.destroy()

index.js

@@ -1,5 +1,14 @@
 'use strict';
 
+const writeFile = require('broccoli-file-creator');
+const funnel = require('broccoli-funnel')
+const merge = require('broccoli-merge-trees')
+const path = require('path')
+const rollup = require('broccoli-rollup')
+const json = require('rollup-plugin-json')
+const babel = require('rollup-plugin-babel')
+const resolve = require('rollup-plugin-node-resolve')
+
 module.exports = {
   name: require('./package').name,
   config(env, config) {
@@ -13,7 +22,6 @@ module.exports = {
     let assets = this._findAssets(app.options.outputPaths)
     return {
       webComponentsAssets : assets
-
     }
   },
   included(addon) {
@@ -31,9 +39,42 @@ module.exports = {
       }
     } = paths
     return {
-      css: { ...appCss, vendor: vendorCss },
-      js: { app: appJs, vendor: vendorJs }
+      css: [ vendorCss, appCss.app ],
+      js: [ vendorJs, appJs ]
     }
 
+  },
+  treeForPublic() {
+    let componentConfig = {
+      name: this.app.name,
+      assets: this.config().webComponentsAssets
+    }
+    let loader = funnel(path.resolve(__dirname, './loader'))
+    const data = writeFile('/loader/component.json', JSON.stringify(componentConfig))
+    const tree = merge([data, loader])
+    const loaderRollup = rollup(tree, {
+      rollup: {
+        input: 'index.js',
+        output: {
+          format: 'umd',
+          file: 'loader.js'
+        },
+        plugins: [
+          resolve(),
+          json(),
+          babel({
+            plugins: [
+              '@babel/plugin-proposal-class-properties'
+            ],
+            presets: [['@babel/env', {
+              targets: 'last 2 version, ie 11',
+              useBuiltIns: "entry",
+              corejs: 3
+            }]]
+          })
+        ]
+      }
+    });
+    return loaderRollup
   }
 };

loader/index.js

@@ -0,0 +1,103 @@
+import "regenerator-runtime/runtime";
+import data from './loader/component.json'
+
+let name = data.name;
+
+// fake private method
+function _appendCss(dest, css) {
+  let files = Object.values(css)
+  files.forEach((f)=> {
+    let style = document.createElement('link')
+    style.setAttribute('href', f)
+    style.setAttribute('rel', 'stylesheet')
+    dest.appendChild(style)
+  })
+}
+
+// fake private method
+async function _appendJs(dest, js) {
+  let files = Object.values(js)
+  return files.reduce(async (p, f)=> {
+    await p
+    return new Promise(function(resolve) {
+      let js = document.createElement('script')
+      js.defer = true
+      js.setAttribute('src', f)
+      dest.appendChild(js)
+      js.onload = ()=> resolve()
+    })
+  }, Promise.resolve())
+}
+
+let css = (data.assets || {}).css
+let js = (data.assets || {}).js
+
+class ApplicationContainer extends HTMLElement {
+  #css = css
+  #js = js
+  #shadowRoot
+  #application
+
+  constructor() {
+    super()
+    this.#shadowRoot = this.attachShadow({mode: 'closed'})
+
+    // The 2 divs are a trick in how Ember finds their parent
+    let rootParent = document.createElement('div')
+    _appendCss(rootParent, this.#css)
+    this._loading = _appendJs(rootParent, this.#js)
+    let rootElement = document.createElement('div')
+    rootElement.setAttribute('data-ember-root-element', '')
+    this.#shadowRoot.appendChild(rootParent)
+    rootParent.appendChild(rootElement)
+  }
+
+  // Starts the app when an element is connected
+  async connectedCallback() {
+    if (this._application || !this.isConnected) {
+      return
+    }
+
+    await this._loading
+
+    // Handle inner config
+    let configSource = this.querySelector('[data-json-config]').textContent
+    let appConfig = JSON.parse(configSource)
+
+    // Handle attribute-based config
+    let attributes = [...this.attributes].reduce((acc, a)=> {
+      return {...acc, [a.nodeName]: a.nodeValue }
+    }, {})
+    let config = { ...appConfig, ...attributes }
+
+    // Create the app
+    let app = require(`${name}/app`).default.create({
+      rootElement: this.#shadowRoot.querySelector(`[data-ember-root-element]`),
+      config
+    })
+    this._application = app
+
+    // Register the attributes
+    app.register('service:context', config, { instantiate: false })
+  }
+
+  // Destroy the app on disconnection of the node
+  disconnectedCallback() {
+    if (!this._application.isDestroyed && !this._application.isDestroying) {
+      this._application.destroy()
+    }
+  }
+
+  // That makes the application accessible via:
+  // document.querySelector('application-name').__EMBER_APPLICATION
+  get __EMBER_APPLICATION() {
+    return this._application
+  }
+}
+
+let componentName = name
+if (-1 === name.indexOf('-')) {
+  componentName += '-app'
+}
+
+customElements.define(componentName, ApplicationContainer)

package.json

@@ -21,12 +21,17 @@
     "test:all": "ember try:each"
   },
   "dependencies": {
+    "broccoli-rollup": "^4.1.1",
     "ember-cli-babel": "^7.7.3",
-    "ember-get-config": "^0.2.4"
+    "ember-get-config": "^0.2.4",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-json": "^4.0.0"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.5.5",
     "@ember/optional-features": "^0.7.0",
     "broccoli-asset-rev": "^3.0.0",
+    "core-js": "3",
     "ember-cli": "~3.12.0",
     "ember-cli-dependency-checker": "^3.1.0",
     "ember-cli-eslint": "^5.1.0",
@@ -47,7 +52,8 @@
     "eslint-plugin-ember": "^6.2.0",
     "eslint-plugin-node": "^9.0.1",
     "loader.js": "^4.7.0",
-    "qunit-dom": "^0.8.4"
+    "qunit-dom": "^0.8.4",
+    "rollup-plugin-node-resolve": "^5.2.0"
   },
   "engines": {
     "node": "8.* || >= 10.*"