Ensure nested custom elements fallback properly.

lerna.json

@@ -1,5 +1,5 @@
 {
-  "lerna": "2.0.0-beta.31",
+  "lerna": "2.0.0-beta.32",
   "version": "0.22.0",
   "packages": [
     "packages/@glimmer/*"

package.json

@@ -50,7 +50,7 @@
     "ember-cli-release": "^1.0.0-beta.1",
     "ember-cli-sauce": "^1.3.0",
     "glob": "^7.0.5",
-    "lerna": "2.0.0-beta.31",
+    "lerna": "2.0.0-beta.32",
     "loader.js": "^4.0.10",
     "qunit-tap": "^1.5.1",
     "qunitjs": "^2.0.1",

packages/@glimmer/runtime/lib/syntax/functions.ts

@@ -196,6 +196,29 @@ STATEMENTS.add(Ops.ScannedBlock, (sexp: BaselineSyntax.ScannedBlock, builder) =>
   blocks.compile([Ops.NestedBlock, path, params, hash, templateBlock, inverseBlock], builder);
 });
 
+// this fixes an issue with Ember versions using [email protected] when attempting
+// to use nested web components.  This is obviously not correct for angle bracket components
+// but since no consumers are currently using them with [email protected] we are hard coding
+// support to just use the fallback case.
+STATEMENTS.add(Ops.Component, (sexp: WireFormat.Statements.Component, builder) => {
+  let [, tag, component ] = sexp;
+  let { attrs, statements } = component;
+
+  builder.openPrimitiveElement(tag);
+
+  for (let i = 0; i < attrs.length; i++) {
+    STATEMENTS.compile(attrs[i], builder);
+  }
+
+  builder.flushElement();
+
+  for (let i = 0; i < statements.length; i++) {
+    STATEMENTS.compile(statements[i], builder);
+  }
+
+  builder.closeElement();
+});
+
 STATEMENTS.add(Ops.ScannedComponent, (sexp: BaselineSyntax.ScannedComponent, builder) => {
   let [, tag, attrs, rawArgs, rawBlock] = sexp;
   let block = rawBlock && rawBlock.scan();

packages/@glimmer/runtime/tests/rendering/content-test.ts

@@ -29,6 +29,19 @@ class StaticContentTests extends RenderingTest {
     this.assertStableRerender();
   }
 
+  @template(`<use-the-platform><seriously-please data-foo="1">Stuff <div>Here</div></seriously-please></use-the-platform>`)
+  ['renders nested custom elements']() {
+    this.render({});
+    this.assertContent(`<use-the-platform><seriously-please data-foo="1">Stuff <div>Here</div></seriously-please></use-the-platform>`);
+    this.assertStableRerender();
+  }
+  @template(`<use-the-platform><seriously-please data-foo="1"><wheres-the-platform>Here</wheres-the-platform></seriously-please></use-the-platform>`)
+  ['renders MOAR NESTED custom elements']() {
+    this.render({});
+    this.assertContent(`<use-the-platform><seriously-please data-foo="1"><wheres-the-platform>Here</wheres-the-platform></seriously-please></use-the-platform>`);
+    this.assertStableRerender();
+  }
+
   @template(strip`
     <div class="world">
       <h1>Hello World!</h1>

packages/@glimmer/test-helpers/lib/helpers.ts

@@ -102,7 +102,7 @@ function generateTokens(divOrHTML) {
     div = divOrHTML;
   }
 
-  return { tokens: tokenize(div.innerHTML), html: div.innerHTML };
+  return { tokens: tokenize(div.innerHTML, {}), html: div.innerHTML };
 }
 
 declare const QUnit: QUnit & {

packages/simple-html-tokenizer/index.d.ts

@@ -8,7 +8,7 @@ export class EventedTokenizer {
   constructor(object: Object, parser: EntityParser)
 }
 
-export function tokenize(html: string): any;
+export function tokenize(html: string, options: any): any;
 
 export interface CharRef {
   [namedRef: string]: string;