glhf

Author: NullVoxPopuli

packages/@glimmer-workspace/integration-tests/lib/compile.ts

@@ -24,7 +24,10 @@ export function createTemplate(
 ): TemplateFactory {
   options.locals = options.locals ?? Object.keys(scopeValues ?? {});
   let [block, usedLocals] = precompileJSON(templateSource, options);
-  let reifiedScopeValues = usedLocals.map((key) => scopeValues[key]);
+  let reifiedScope: Record<string, unknown> = {};
+  for (let key of usedLocals) {
+    reifiedScope[key] = scopeValues[key];
+  }
 
   if ('emit' in options && options.emit?.debugSymbols) {
     block.push(usedLocals);
@@ -34,7 +37,7 @@ export function createTemplate(
     id: String(templateId++),
     block: JSON.stringify(block),
     moduleName: options.meta?.moduleName ?? '(unknown template module)',
-    scope: reifiedScopeValues.length > 0 ? () => reifiedScopeValues : null,
+    scope: usedLocals.length > 0 ? () => reifiedScope : null,
     isStrictMode: options.strictMode ?? false,
   };
 

packages/@glimmer-workspace/integration-tests/test/compiler/compile-options-test.ts

@@ -57,7 +57,7 @@ module('[glimmer-compiler] precompile', ({ test }) => {
       ...WireFormat.Statement[],
     ];
 
-    assert.deepEqual(wire.scope?.(), [hello]);
+    assert.deepEqual(wire.scope?.(), { hello });
 
     assert.deepEqual(
       componentNameExpr,
@@ -84,7 +84,7 @@ module('[glimmer-compiler] precompile', ({ test }) => {
       ...WireFormat.Statement[],
     ];
 
-    assert.deepEqual(wire.scope?.(), [f]);
+    assert.deepEqual(wire.scope?.(), { f });
     assert.deepEqual(
       componentNameExpr,
       [SexpOpcodes.GetLexicalSymbol, 0, ['hello']],
@@ -218,7 +218,7 @@ module('[glimmer-compiler] precompile', ({ test }) => {
       _wire = compile(`{{this.message}}`, ['this'], (source) => eval(source));
     }).call(target);
     let wire = _wire!;
-    assert.deepEqual(wire.scope?.(), [target]);
+    assert.deepEqual(wire.scope?.(), { this: target });
     assert.deepEqual(wire.block[0], [
       [SexpOpcodes.Append, [SexpOpcodes.GetLexicalSymbol, 0, ['message']]],
     ]);

packages/@glimmer-workspace/integration-tests/test/debug-render-tree-test.ts

@@ -111,12 +111,10 @@ class DebugRenderTreeTest extends RenderTest {
   }
 
   @test 'strict-mode components without debug symbols preserve names from scope'() {
-    const state = trackedObj({ showSecond: false });
-
     const HelloWorld = defComponent('{{@arg}}');
     const Root = defComponent(
-      `<HelloWorld @arg="first"/>{{#if state.showSecond}}<HelloWorld @arg="second"/>{{/if}}`,
-      { scope: { HelloWorld, state }, emit: { moduleName: 'root.hbs', debugSymbols: false } }
+      `<HelloWorld @arg="first"/>`,
+      { scope: { HelloWorld }, emit: { moduleName: 'root.hbs', debugSymbols: false } }
     );
 
     this.renderComponent(Root);
@@ -142,39 +140,6 @@ class DebugRenderTreeTest extends RenderTest {
         ],
       },
     ]);
-
-    state['showSecond'] = true;
-
-    this.assertRenderTree([
-      {
-        type: 'component',
-        name: '{ROOT}',
-        args: { positional: [], named: {} },
-        instance: null,
-        template: 'root.hbs',
-        bounds: this.elementBounds(this.delegate.getInitialElement()),
-        children: [
-          {
-            type: 'component',
-            name: 'HelloWorld',
-            args: { positional: [], named: { arg: 'first' } },
-            instance: null,
-            template: '(unknown template module)',
-            bounds: this.nodeBounds(this.delegate.getInitialElement().firstChild),
-            children: [],
-          },
-          {
-            type: 'component',
-            name: 'HelloWorld',
-            args: { positional: [], named: { arg: 'second' } },
-            instance: null,
-            template: '(unknown template module)',
-            bounds: this.nodeBounds(this.delegate.getInitialElement().lastChild),
-            children: [],
-          },
-        ],
-      },
-    ]);
   }
 
   @test 'strict-mode modifiers'() {

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

@@ -148,7 +148,14 @@ export function precompile(
   let stringified = JSON.stringify(templateJSONObject);
 
   if (usedLocals.length > 0) {
-    const scopeFn = `()=>[${usedLocals.join(',')}]`;
+    const scopeEntries = usedLocals.map((name) => {
+      // Reserved words like "this" can't use shorthand property syntax
+      if (name === 'this') {
+        return `"this":this`;
+      }
+      return name;
+    });
+    const scopeFn = `()=>({${scopeEntries.join(',')}})`;
 
     stringified = stringified.replace(`"${SCOPE_PLACEHOLDER}"`, scopeFn);
   }

packages/@glimmer/interfaces/lib/compile/wire-format/api.d.ts

@@ -397,7 +397,7 @@ export interface SerializedTemplateWithLazyBlock {
   id?: Nullable<string>;
   block: SerializedTemplateBlockJSON;
   moduleName: string;
-  scope?: (() => unknown[]) | undefined | null;
+  scope?: (() => Record<string, unknown>) | undefined | null;
   isStrictMode: boolean;
 }
 

packages/@glimmer/interfaces/lib/template.d.ts

@@ -18,7 +18,7 @@ export interface LayoutWithContext {
   readonly block: SerializedTemplateBlock;
   readonly moduleName: string;
   readonly owner: Owner | null;
-  readonly scope: (() => unknown[]) | undefined | null;
+  readonly scope: (() => Record<string, unknown>) | undefined | null;
   readonly isStrictMode: boolean;
 }
 

packages/@glimmer/opcode-compiler/lib/opcode-builder/helpers/shared.ts

@@ -107,14 +107,15 @@ export function CompilePositional(
 
 export function meta(layout: LayoutWithContext): BlockMetadata {
   let [, locals, upvars, lexicalSymbols] = layout.block;
+  let scopeRecord = layout.scope?.() ?? null;
 
   return {
     symbols: {
       locals,
       upvars,
-      lexical: lexicalSymbols,
+      lexical: scopeRecord ? Object.keys(scopeRecord) : lexicalSymbols,
     },
-    scopeValues: layout.scope?.() ?? null,
+    scopeValues: scopeRecord ? Object.values(scopeRecord) : null,
     isStrictMode: layout.isStrictMode,
     moduleName: layout.moduleName,
     owner: layout.owner,

packages/internal-test-helpers/lib/compile.ts

@@ -24,12 +24,15 @@ export default function compile(
 ): TemplateFactory {
   options.locals = options.locals ?? Object.keys(scopeValues ?? {});
   let [block, usedLocals] = precompileJSON(templateSource, compileOptions(options));
-  let reifiedScopeValues = usedLocals.map((key) => scopeValues[key]);
+  let reifiedScope: Record<string, unknown> = {};
+  for (let key of usedLocals) {
+    reifiedScope[key] = scopeValues[key];
+  }
 
   let templateBlock: SerializedTemplateWithLazyBlock = {
     block: JSON.stringify(block),
     moduleName: options.moduleName ?? options.meta?.moduleName ?? '(unknown template module)',
-    scope: reifiedScopeValues.length > 0 ? () => reifiedScopeValues : null,
+    scope: usedLocals.length > 0 ? () => reifiedScope : null,
     isStrictMode: options.strictMode ?? false,
   };