Failing test

Author: NullVoxPopuli

packages/@ember/-internals/glimmer/tests/integration/components/runtime-template-compiler-implicit-test.ts

@@ -1,12 +1,65 @@
+import { tracked } from '@ember/-internals/metal';
 import { template } from '@ember/template-compiler/runtime';
-import { RenderingTestCase, defineSimpleModifier, moduleFor } from 'internal-test-helpers';
+import { RenderingTestCase, defineSimpleModifier, moduleFor, runTask } from 'internal-test-helpers';
 import GlimmerishComponent from '../../utils/glimmerish-component';
 import { on } from '@ember/modifier/on';
 import { fn } from '@ember/helper';
 
 moduleFor(
   'Strict Mode - Runtime Template Compiler (implicit)',
   class extends RenderingTestCase {
+    async '@test can have in-scope tracked data'(assert: Assert) {
+      class State {
+        @tracked str = `hello there`;
+
+        get component() {
+          assert.step('get component');
+
+          let getStr = () => {
+            assert.step('getStr()');
+            return this.str;
+          };
+
+          hide(getStr);
+
+          return template(`{{ (getStr) }}`, {
+            eval() {
+              return eval(arguments[0]);
+            },
+          });
+        }
+      }
+
+      let state = new State();
+
+      await this.renderComponentModule(() => {
+        return template('<state.component />', {
+          eval() {
+            assert.step('eval');
+            return eval(arguments[0]);
+          },
+        });
+      });
+
+      this.assertHTML('hello there');
+      this.assertStableRerender();
+      assert.verifySteps([
+        // for every value in the component, for eevry node traversed in the compiler
+        'eval', // precompileJSON -> ... ElementNode ->  ... -> lexicalScope -> isScope('state', ...)
+        'eval', // "..."
+        'eval', // "..."
+        'eval', // creating the templateFactory
+        'get component',
+        'getStr()',
+      ]);
+
+      runTask(() => (state.str += '!'));
+
+      this.assertHTML('hello there!');
+      this.assertStableRerender();
+      assert.verifySteps(['getStr()']);
+    }
+
     async '@test Can use a component in scope'() {
       await this.renderComponentModule(() => {
         let Foo = template('Hello, world!', {

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

@@ -242,10 +242,12 @@ export function template(
   const normalizedOptions = compileOptions(options);
   const component = normalizedOptions.component ?? templateOnly();
 
-  const source = glimmerPrecompile(templateString, normalizedOptions);
-  const template = templateFactory(evaluate(`(${source})`) as SerializedTemplateWithLazyBlock);
+  queueMicrotask(() => {
+    const source = glimmerPrecompile(templateString, normalizedOptions);
+    const template = templateFactory(evaluate(`(${source})`) as SerializedTemplateWithLazyBlock);
 
-  setComponentTemplate(template, component);
+    setComponentTemplate(template, component);
+  });
 
   return component;
 }