Fix problems for current Ember versions

.gitignore

@@ -8,6 +8,7 @@
 /bower_components/
 /node_modules/
 /template-compiler/
+/tests/dummy-add-on/node_modules/
 
 # misc
 /.env*

.travis.yml

@@ -51,11 +51,17 @@ jobs:
     - env: EMBER_TRY_SCENARIO=ember-lts-3.8
     - env: EMBER_TRY_SCENARIO=ember-lts-3.12
     - env: EMBER_TRY_SCENARIO=ember-lts-3.16
+    - env: EMBER_TRY_SCENARIO=ember-lts-3.20
     - env: EMBER_TRY_SCENARIO=ember-release
     - env: EMBER_TRY_SCENARIO=ember-beta
     - env: EMBER_TRY_SCENARIO=ember-canary
-    - env: EMBER_TRY_SCENARIO=ember-default-with-jquery
     - env: EMBER_TRY_SCENARIO=ember-classic
 
 script:
   - node_modules/.bin/ember try:one $EMBER_TRY_SCENARIO
+
+before_install:
+  - rm -rf /home/travis/build/Ravenstine/ember-custom-elements/node_modules/dummy-add-on
+
+install:
+  - npm ci

CHANGELOG.md

@@ -1,6 +1,10 @@
 Ember Web Components Changelog
 ==============================
 
+## v2.0.4
+
+- Fix rendering failure for Ember >= 3.20.0
+
 ## v2.0.3
 
 - Fix support for use of the decorator within add-ons

addon/lib/custom-element.js

@@ -130,12 +130,12 @@ function updateComponentArgs() {
     const view = COMPONENT_VIEWS.get(this);
     if (!view) return;
     const options = getOptions(this);
-    const attrs = { ...view.attrs };
-    set(view, 'attrs', attrs);
+    const attrs = { ...view._attrs };
+    set(view, '_attrs', attrs);
     for (const attr of changes) {
       const attrName = options.camelizeArgs ? camelize(attr) : attr;
       attrs[attrName] = this.getAttribute(attr);
-      notifyPropertyChange(view, `attrs.${attrName}`);
+      notifyPropertyChange(view, `_attrs.${attrName}`);
     }
   } finally {
     set(this, '_attributeObserverEnabled', true);
@@ -194,7 +194,7 @@ async function connectComponent() {
   const owner = getOwner(this);
   const view = owner.factoryFor('component:-ember-web-component-view').create({
     layout: compileTemplate(this.parsedName.name, Object.keys(attrs)),
-    attrs,
+    _attrs: attrs,
     blockContent: null
   });
   COMPONENT_VIEWS.set(this, view);

addon/lib/outlet-element.js

@@ -72,7 +72,14 @@ export default class EmberWebOutlet extends HTMLElement {
     } else {
       routeName = this.route;
     }
-    const outletState = lookupOutlet(router._toplevelView.ref.outletState, routeName, this.outlet) || {};
+    const stateObj = (() => {
+      if (typeof router._toplevelView.ref.compute === 'function') {
+        return router._toplevelView.ref.compute();
+      } else {
+        return router._toplevelView.ref.outletState
+      }
+    })();
+    const outletState = lookupOutlet(stateObj, routeName, this.outlet) || {};
     const view = OUTLET_VIEWS.get(this);
     view.setOutletState(outletState);
   }

addon/lib/template-compiler.js

@@ -34,9 +34,10 @@ const BREAK = Symbol('break');
  * @param {Array<String>} attributeNames - A list of element attribute names.
  */
 export function compileTemplate(componentName, attributeNames=[]) {
-  const template = JSON.parse(JSON.stringify(BASE_TEMPLATE));
+  const template = clone(BASE_TEMPLATE);
   const block = JSON.parse(template.block);
-  const statement = block.statements[0];
+  const statement = block.statements ? block.statements[0] : block;
+  if (Array.isArray(block.symbols)) block.symbols = [];
   // Replace the placeholder component name with the actual one.
   crawl(statement, ({ object }) => {
     if (object === 'component-name') return componentName;
@@ -45,8 +46,7 @@ export function compileTemplate(componentName, attributeNames=[]) {
   let argumentIdentifiers;
   // Identify the argument names array
   crawl(statement, ({ object, next }) => {
-    if (!object || object[0] !== '@attributeName') return;
-    object.pop();
+    if (!object || object[0] !== '@argName') return;
     argumentNames = object;
     argumentIdentifiers = next;
     return BREAK;
@@ -57,25 +57,33 @@ export function compileTemplate(componentName, attributeNames=[]) {
   const baseValue = argumentIdentifiers[0];
   argumentIdentifiers.length = 0;
   // https://github.com/glimmerjs/glimmer-vm/blob/319f3e391c547544129e4dab0746b059b665880e/packages/%40glimmer/compiler/lib/allocate-symbols.ts#L113
-  function pushArg(name, identifier) {
+  function pushArg(name) {
     argumentNames.push(`@${name}`);
     // https://github.com/glimmerjs/glimmer-vm/blob/319f3e391c547544129e4dab0746b059b665880e/packages/%40glimmer/compiler/lib/allocate-symbols.ts#L130
-    const value = JSON.parse(JSON.stringify(baseValue));
+    const value = clone(baseValue);
     crawl(value, ({ object }) => {
-      if (object === 'valueName') return identifier;
+      if (object !== 'valueName') return;
+      return name;
     });
     argumentIdentifiers.push(value);
   }
   // Set args
-  for (const name of attributeNames)
-    pushArg(name, `attrs.${name}`);
+  for (const name of attributeNames) pushArg(name);
   // Return a template factory
   template.id = componentName;
   template.block = JSON.stringify(block);
   return createTemplateFactory(template);
 }
 
-
+/**
+ * "clones" an object.
+ * Obviously only supports JSON-compatible types
+ * but that's fine for the purposes of this lib.
+ * @param {*} obj 
+ */
+function clone(obj) {
+  return JSON.parse(JSON.stringify(obj));
+}
 
 /**
  * Given an object and a callback, will crawl the object

config/ember-try.js

@@ -37,6 +37,14 @@ module.exports = async function() {
           }
         }
       },
+      {
+        name: 'ember-lts-3.20',
+        npm: {
+          devDependencies: {
+            'ember-source': '~3.20.0'
+          }
+        }
+      },
       {
         name: 'ember-release',
         npm: {
@@ -71,19 +79,6 @@ module.exports = async function() {
           devDependencies: {}
         }
       },
-      {
-        name: 'ember-default-with-jquery',
-        env: {
-          EMBER_OPTIONAL_FEATURES: JSON.stringify({
-            'jquery-integration': true
-          })
-        },
-        npm: {
-          devDependencies: {
-            '@ember/jquery': '^0.5.1'
-          }
-        }
-      },
       {
         name: 'ember-classic',
         env: {

index.js

@@ -4,7 +4,7 @@ const replace = require('broccoli-string-replace');
 
 'use strict';
 
-const BASE_TEMPLATE_STRING = '<ComponentName @attributeName={{this.valueName}}>{{this.blockContent}}</ComponentName>';
+const BASE_TEMPLATE_STRING = '<ComponentName @argName={{this._attrs.valueName}}>{{this.blockContent}}</ComponentName>';
 
 module.exports = {
   name: require('./package').name,