[BUGFIX] Process in-element in compiler not parser

This fixes the issue described in
DockYard/ember-maybe-in-element#25 (comment)

tl;dr If an AST transform introduces the element, it doesn't go through
the parser, so it's missing the required `guid` and `insertBefore`
normalization. This commit moves the processing to a later stage to
avoid this issue.

Author: gitKrystan

packages/@glimmer/compiler/lib/template-compiler.ts

@@ -18,8 +18,6 @@ function isTrustedValue(value: any) {
   return value.escaped !== undefined && !value.escaped;
 }
 
-export const THIS = 0;
-
 export default class TemplateCompiler implements Processor<InputOps> {
   static compile(ast: AST.Template, source: string, options?: CompileOptions): Template {
     let templateVisitor = new TemplateVisitor();
@@ -49,6 +47,12 @@ export default class TemplateCompiler implements Processor<InputOps> {
   private locations: Option<SourceLocation>[] = [];
   private includeMeta = true;
 
+  private cursorCount = 0;
+
+  cursor() {
+    return `%cursor:${this.cursorCount++}%`;
+  }
+
   process(
     actions: Action[]
   ): { opcodes: readonly Ops<AllocateSymbolsOps>[]; locations: readonly Option<SourceLocation>[] } {
@@ -62,6 +66,7 @@ export default class TemplateCompiler implements Processor<InputOps> {
   }
 
   startProgram([program]: [AST.Template]) {
+    this.cursorCount = 0;
     this.opcode(['startProgram', program], program);
   }
 
@@ -242,7 +247,12 @@ export default class TemplateCompiler implements Processor<InputOps> {
   }
 
   block([action /*, index, count*/]: [AST.BlockStatement]) {
-    this.prepareHelper(action, 'block');
+    if (isInElement(action)) {
+      this.prepareHelper(action, 'in-element');
+    } else {
+      this.prepareHelper(action, 'block');
+    }
+
     let templateId = this.templateIds.pop()!;
     let inverseId = action.inverse === null ? null : this.templateIds.pop()!;
     this.expression(action.path, ExpressionContext.BlockHead, action);
@@ -403,12 +413,12 @@ export default class TemplateCompiler implements Processor<InputOps> {
     this.opcode(['helper'], call);
   }
 
-  prepareHelper(expr: AST.Call, context: string) {
+  prepareHelper(expr: AST.Call, context: 'helper' | 'modifier' | 'block' | 'in-element') {
     assertIsSimplePath(expr.path, expr.loc, context);
 
     let { params, hash } = expr;
 
-    this.prepareHash(hash);
+    this.prepareHash(hash, context);
     this.prepareParams(params);
   }
 
@@ -428,23 +438,51 @@ export default class TemplateCompiler implements Processor<InputOps> {
     this.opcode(['prepareArray', params.length], null);
   }
 
-  prepareHash(hash: AST.Hash) {
+  prepareHash(hash: AST.Hash, context: 'helper' | 'modifier' | 'block' | 'in-element') {
     let pairs = hash.pairs;
+    let length = pairs.length;
 
-    if (!pairs.length) {
-      this.opcode(['literal', null], null);
-      return;
-    }
+    let isInElement = context === 'in-element';
+    let hasInsertBefore = false;
 
-    for (let i = pairs.length - 1; i >= 0; i--) {
+    for (let i = length - 1; i >= 0; i--) {
       let { key, value } = pairs[i];
 
+      if (isInElement) {
+        if (key === 'guid') {
+          throw new SyntaxError(
+            `Cannot pass \`guid\` to \`{{#in-element}}\` on line ${value.loc.start.line}.`,
+            value.loc
+          );
+        }
+
+        if (key === 'insertBefore') {
+          hasInsertBefore = true;
+        }
+      }
+
       assert(this[value.type], `Unimplemented ${value.type} on TemplateCompiler`);
       this[value.type](value as any);
-      this.opcode(['literal', key], null);
+      this.opcode(['literal', key]);
     }
 
-    this.opcode(['prepareObject', pairs.length], null);
+    if (isInElement) {
+      if (!hasInsertBefore) {
+        this.opcode(['literal', undefined]);
+        this.opcode(['literal', 'insertBefore']);
+        length++;
+      }
+
+      this.opcode(['literal', this.cursor()]);
+      this.opcode(['literal', 'guid']);
+      length++;
+    }
+
+    if (length === 0) {
+      this.opcode(['literal', null]);
+    } else {
+      this.opcode(['prepareObject', length]);
+    }
   }
 
   prepareAttributeValue(value: AST.AttrNode['value']): value is AST.TextNode {
@@ -575,6 +613,12 @@ function isPath(node: AST.Node | AST.PathExpression): node is AST.PathExpression
   return node.type === 'PathExpression';
 }
 
+function isInElement(
+  node: AST.BlockStatement
+): node is AST.BlockStatement & { path: AST.PathExpression } {
+  return isPath(node.path) && node.path.original === 'in-element';
+}
+
 function destructureDynamicComponent(element: AST.ElementNode): Option<AST.PathExpression> {
   let open = element.tag.charAt(0);
 

packages/@glimmer/integration-tests/lib/suites/in-element.ts

@@ -1,3 +1,5 @@
+import { AST } from '@glimmer/syntax';
+import { assign } from '@glimmer/util';
 import { RenderTest } from '../render-test';
 import { test } from '../test-decorator';
 import { equalsElement } from '../dom/assertions';
@@ -8,6 +10,41 @@ import { EmberishCurlyComponent } from '../components/emberish-curly';
 export class InElementSuite extends RenderTest {
   static suiteName = '#in-element';
 
+  @test
+  'It works with AST transforms'() {
+    this.registerPlugin(env => ({
+      name: 'maybe-in-element',
+      visitor: {
+        BlockStatement(node: AST.BlockStatement) {
+          let b = env.syntax.builders;
+          let { path, ...rest } = node;
+          if (path.type !== 'SubExpression' && path.original === 'maybe-in-element') {
+            return assign({ path: b.path('in-element', path.loc) }, rest);
+          } else {
+            return node;
+          }
+        },
+      },
+    }));
+
+    let externalElement = this.delegate.createElement('div');
+    this.render('{{#maybe-in-element externalElement}}[{{foo}}]{{/maybe-in-element}}', {
+      externalElement,
+      foo: 'Yippie!',
+    });
+
+    equalsElement(externalElement, 'div', {}, '[Yippie!]');
+    this.assertStableRerender();
+
+    this.rerender({ foo: 'Double Yups!' });
+    equalsElement(externalElement, 'div', {}, '[Double Yups!]');
+    this.assertStableNodes();
+
+    this.rerender({ foo: 'Yippie!' });
+    equalsElement(externalElement, 'div', {}, '[Yippie!]');
+    this.assertStableNodes();
+  }
+
   @test
   'Renders curlies into external element'() {
     let externalElement = this.delegate.createElement('div');

packages/@glimmer/opcode-compiler/lib/syntax/builtins.ts

@@ -167,6 +167,8 @@ export function populateBuiltins(
 
     return ReplayableIf({
       args() {
+        assert(hash !== null, '[BUG] `{{#in-element}}` should have non-empty hash');
+
         let [keys, values] = hash!;
 
         let actions: StatementCompileActions = [];

packages/@glimmer/syntax/lib/parser/handlebars-node-visitors.ts

@@ -13,12 +13,6 @@ export abstract class HandlebarsNodeVisitors extends Parser {
   abstract beginAttributeValue(quoted: boolean): void;
   abstract finishAttributeValue(): void;
 
-  cursorCount = 0;
-
-  cursor() {
-    return `%cursor:${this.cursorCount++}%`;
-  }
-
   private get isTopLevel() {
     return this.elementStack.length === 0;
   }
@@ -28,8 +22,6 @@ export abstract class HandlebarsNodeVisitors extends Parser {
   Program(program: HBS.Program): AST.Template | AST.Block;
   Program(program: HBS.Program): AST.Block | AST.Template {
     let body: AST.Statement[] = [];
-    this.cursorCount = 0;
-
     let node;
 
     if (this.isTopLevel) {
@@ -86,10 +78,6 @@ export abstract class HandlebarsNodeVisitors extends Parser {
     let program = this.Program(block.program);
     let inverse = block.inverse ? this.Program(block.inverse) : null;
 
-    if (path.original === 'in-element') {
-      hash = addInElementHash(this.cursor(), hash, block.loc);
-    }
-
     let node = b.block(
       path,
       params,
@@ -444,31 +432,6 @@ function addElementModifier(element: Tag<'StartTag'>, mustache: AST.MustacheStat
   element.modifiers.push(modifier);
 }
 
-function addInElementHash(cursor: string, hash: AST.Hash, loc: AST.SourceLocation) {
-  let hasInsertBefore = false;
-  hash.pairs.forEach(pair => {
-    if (pair.key === 'guid') {
-      throw new SyntaxError('Cannot pass `guid` from user space', loc);
-    }
-
-    if (pair.key === 'insertBefore') {
-      hasInsertBefore = true;
-    }
-  });
-
-  let guid = b.literal('StringLiteral', cursor);
-  let guidPair = b.pair('guid', guid);
-  hash.pairs.unshift(guidPair);
-
-  if (!hasInsertBefore) {
-    let undefinedLiteral = b.literal('UndefinedLiteral', undefined);
-    let beforeSibling = b.pair('insertBefore', undefinedLiteral);
-    hash.pairs.push(beforeSibling);
-  }
-
-  return hash;
-}
-
 function appendDynamicAttributeValuePart(attribute: Attribute, part: AST.MustacheStatement) {
   attribute.isDynamic = true;
   attribute.parts.push(part);