Initial - Export Ember app as a custom Element

Author: xcambar

addon/create-web-components.js

@@ -0,0 +1,60 @@
+import config from 'ember-get-config'
+
+let name = config.modulePrefix;
+
+// fake private method
+function _appendStyles(dest, styles) {
+  let files = Object.values(styles)
+  files.forEach((f)=> {
+    let style = document.createElement('link')
+    style.setAttribute('href', f)
+    style.setAttribute('rel', 'stylesheet')
+    dest.appendChild(style)
+  })
+}
+
+class ApplicationContainer extends HTMLElement {
+  #styles = (config.webComponentsAssets || {}).styles
+  #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')
+    _appendStyles(rootParent, this.#styles)
+    let rootElement = document.createElement('div')
+    this.#shadowRoot.appendChild(rootParent)
+    rootParent.appendChild(rootElement)
+
+    // Actually start the app
+    let app = require(`${name}/app`).default.create({
+      rootElement
+    })
+    this.#application = app
+  }
+
+  // That makes the application accessible via:
+  // document.querySelector('application-name').__EMBER_APPLICATION
+  get __EMBER_APPLICATION() {
+    return this.#application
+  }
+}
+
+let componentName = name
+if (-1 === config.modulePrefix.indexOf('-')) {
+  componentName += '-app'
+}
+
+customElements.define(componentName, ApplicationContainer)
+
+
+/**
+ * TODO
+ *    RECOMMEND to remove export-application-global
+ *    Allow for multiple instances (clean exportApplicationGlobal)
+ *    Destruction of comonent <=> Destruction of the app
+ *    Attributes and slots
+ *    More isolation
+ */

index.js

@@ -1,5 +1,29 @@
 'use strict';
 
 module.exports = {
-  name: require('./package').name
+  name: require('./package').name,
+  config(env, config) {
+    if (!this.app) {
+      return;
+    }
+    this.app.options.storeConfigInMeta = false;
+    this.app.options.autoRun = false;
+    return {
+      webComponentsAssets : {
+        styles: this._styles
+      }
+    }
+  },
+  included(addon) {
+    let { options } = addon
+    let styles = {
+      // Why tho?? The structure of options.outputPaths is weird and inconsistent
+      ...options.outputPaths.app.css,
+      vendor: options.outputPaths.vendor.css
+    }
+
+    this._styles = styles
+
+    this.app.import('vendor/register-components.js')
+  }
 };

package.json

@@ -36,7 +36,7 @@
     "ember-cli-template-lint": "^1.0.0-beta.1",
     "ember-cli-uglify": "^2.1.0",
     "ember-disable-prototype-extensions": "^1.1.3",
-    "ember-export-application-global": "^2.0.0",
+    "ember-get-config": "^0.2.4",
     "ember-load-initializers": "^2.0.0",
     "ember-maybe-import-regenerator": "^0.1.6",
     "ember-qunit": "^4.4.1",

tests/dummy/app/index.html

@@ -9,8 +9,21 @@
 
     {{content-for "head"}}
 
-    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
-    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/dummy.css">
+    <style>
+      h2 {
+        font-style: italic;
+      }
+
+      dummy-app {
+        overflow: auto;
+      }
+
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-gap: 10px;
+      }
+    </style>
 
     {{content-for "head-footer"}}
   </head>
@@ -20,6 +33,10 @@
     <script src="{{rootURL}}assets/vendor.js"></script>
     <script src="{{rootURL}}assets/dummy.js"></script>
 
+    <div class="grid">
+      <dummy-app></dummy-app>
+      <h2>Hello outside of the app</h2>
+    </div>
     {{content-for "body-footer"}}
   </body>
 </html>

tests/dummy/app/styles/app.css

@@ -0,0 +1,3 @@
+h2 {
+  text-decoration: underline
+}

tests/dummy/app/templates/application.hbs

@@ -1,3 +1,3 @@
-<h2 id="title">Welcome to Ember</h2>
+<h2>Hello from within the app</h2>
 
 {{outlet}}

vendor/register-components.js

@@ -0,0 +1,3 @@
+window.addEventListener("DOMContentLoaded", function() {
+  require("ember-web-component-container/create-web-components");
+});

yarn.lock

@@ -1992,6 +1992,14 @@ broccoli-debug@^0.6.4, broccoli-debug@^0.6.5:
     symlink-or-copy "^1.1.8"
     tree-sync "^1.2.2"
 
+broccoli-file-creator@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/broccoli-file-creator/-/broccoli-file-creator-1.2.0.tgz#27f1b25b1b00e7bb7bf3d5d7abed5f4d5388df4d"
+  integrity sha512-l9zthHg6bAtnOfRr/ieZ1srRQEsufMZID7xGYRW3aBDv3u/3Eux+Iawl10tAGYE5pL9YB4n5X4vxkp6iNOoZ9g==
+  dependencies:
+    broccoli-plugin "^1.1.0"
+    mkdirp "^0.5.1"
+
 broccoli-filter@^1.2.2, broccoli-filter@^1.2.3:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/broccoli-filter/-/broccoli-filter-1.3.0.tgz#71e3a8e32a17f309e12261919c5b1006d6766de6"
@@ -2198,7 +2206,7 @@ broccoli-plugin@1.1.0:
     rimraf "^2.3.4"
     symlink-or-copy "^1.0.1"
 
-broccoli-plugin@^1.0.0, broccoli-plugin@^1.2.0, broccoli-plugin@^1.2.1, broccoli-plugin@^1.3.0, broccoli-plugin@^1.3.1:
+broccoli-plugin@^1.0.0, broccoli-plugin@^1.1.0, broccoli-plugin@^1.2.0, broccoli-plugin@^1.2.1, broccoli-plugin@^1.3.0, broccoli-plugin@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/broccoli-plugin/-/broccoli-plugin-1.3.1.tgz#a26315732fb99ed2d9fb58f12a1e14e986b4fabd"
   integrity sha512-DW8XASZkmorp+q7J4EeDEZz+LoyKLAd2XZULXyD9l4m9/hAKV3vjHmB1kiUshcWAYMgTP1m2i4NnqCE/23h6AQ==
@@ -3011,7 +3019,7 @@ ember-cli-babel-plugin-helpers@^1.0.0, ember-cli-babel-plugin-helpers@^1.1.0:
   resolved "https://registry.yarnpkg.com/ember-cli-babel-plugin-helpers/-/ember-cli-babel-plugin-helpers-1.1.0.tgz#de3baedd093163b6c2461f95964888c1676325ac"
   integrity sha512-Zr4my8Xn+CzO0gIuFNXji0eTRml5AxZUTDQz/wsNJ5AJAtyFWCY4QtKdoELNNbiCVGt1lq5yLiwTm4scGKu6xA==
 
-ember-cli-babel@^6.0.0-beta.4, ember-cli-babel@^6.0.0-beta.7, ember-cli-babel@^6.16.0, ember-cli-babel@^6.8.1:
+ember-cli-babel@^6.0.0-beta.4, ember-cli-babel@^6.0.0-beta.7, ember-cli-babel@^6.16.0, ember-cli-babel@^6.3.0, ember-cli-babel@^6.8.1:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-6.18.0.tgz#3f6435fd275172edeff2b634ee7b29ce74318957"
   integrity sha512-7ceC8joNYxY2wES16iIBlbPSxwKDBhYwC8drU3ZEvuPDMwVv1KzxCNu1fvxyFEBWhwaRNTUxSCsEVoTd9nosGA==
@@ -3343,6 +3351,14 @@ ember-export-application-global@^2.0.0:
   dependencies:
     ember-cli-babel "^6.0.0-beta.7"
 
+ember-get-config@^0.2.4:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/ember-get-config/-/ember-get-config-0.2.4.tgz#118492a2a03d73e46004ed777928942021fe1ecd"
+  integrity sha1-EYSSoqA9c+RgBO13eSiUICH+Hs0=
+  dependencies:
+    broccoli-file-creator "^1.1.1"
+    ember-cli-babel "^6.3.0"
+
 ember-load-initializers@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/ember-load-initializers/-/ember-load-initializers-2.1.0.tgz#b402815ab9c823ff48a1369b52633721987e72d4"