Support lexical scope in loose mode

packages/@glimmer/integration-tests/lib/test-helpers/define.ts

@@ -91,19 +91,29 @@ class FunctionalModifierManager implements ModifierManager<SimpleModifierState>
 const FUNCTIONAL_MODIFIER_MANAGER = new FunctionalModifierManager();
 const FUNCTIONAL_MODIFIER_MANAGER_FACTORY = () => FUNCTIONAL_MODIFIER_MANAGER;
 
+export interface DefineComponentOptions {
+  // defaults to templateOnlyComponent
+  definition?: object;
+
+  // defaults to true when some scopeValues are passed and false otherwise
+  strictMode?: boolean;
+}
+
 export function defineComponent(
   scopeValues: Record<string, unknown> | null,
   templateSource: string,
-  definition: object = templateOnlyComponent()
+  options: DefineComponentOptions = {}
 ) {
-  let templateFactory = createTemplate(
-    templateSource,
-    { strictMode: scopeValues !== null },
-    scopeValues ?? {}
-  );
+  let strictMode: boolean;
+  if (typeof options.strictMode === 'boolean') {
+    strictMode = options.strictMode;
+  } else {
+    strictMode = scopeValues !== null;
+  }
 
+  let definition = options.definition ?? templateOnlyComponent();
+  let templateFactory = createTemplate(templateSource, { strictMode }, scopeValues ?? {});
   setComponentTemplate(templateFactory, definition);
-
   return definition;
 }
 

packages/@glimmer/integration-tests/test/helpers/dynamic-helpers-test.ts

@@ -24,13 +24,11 @@ class DynamicHelpersResolutionModeTest extends RenderTest {
   'Can use a dynamic helper with nested helpers'() {
     const foo = defineSimpleHelper(() => 'world!');
     const bar = defineSimpleHelper((value: string) => 'Hello, ' + value);
-    const Bar = defineComponent(
-      { foo },
-      '{{this.bar (foo)}}',
-      class extends GlimmerishComponent {
+    const Bar = defineComponent({ foo }, '{{this.bar (foo)}}', {
+      definition: class extends GlimmerishComponent {
         bar = bar;
-      }
-    );
+      },
+    });
 
     this.renderComponent(Bar);
     this.assertHTML('Hello, world!');
@@ -41,14 +39,12 @@ class DynamicHelpersResolutionModeTest extends RenderTest {
   'Can use a dynamic helper with nested dynamic helpers'() {
     const foo = defineSimpleHelper(() => 'world!');
     const bar = defineSimpleHelper((value: string) => 'Hello, ' + value);
-    const Bar = defineComponent(
-      {},
-      '{{this.bar (this.foo)}}',
-      class extends GlimmerishComponent {
+    const Bar = defineComponent({}, '{{this.bar (this.foo)}}', {
+      definition: class extends GlimmerishComponent {
         foo = foo;
         bar = bar;
-      }
-    );
+      },
+    });
 
     this.renderComponent(Bar);
     this.assertHTML('Hello, world!');

packages/@glimmer/integration-tests/test/lexical-scope-test.ts

@@ -0,0 +1,17 @@
+import { RenderTest, test, jitSuite, defineComponent } from '..';
+
+class LexicalScopeTest extends RenderTest {
+  static suiteName = 'loose mode: lexical scope';
+
+  @test
+  'Can use a component in scope'() {
+    const Foo = defineComponent({}, 'Hello, world!', { strictMode: false });
+    const Bar = defineComponent({ Foo }, '<Foo/>', { strictMode: false });
+
+    this.renderComponent(Bar);
+    this.assertHTML('Hello, world!');
+    this.assertStableRerender();
+  }
+}
+
+jitSuite(LexicalScopeTest);

packages/@glimmer/integration-tests/test/modifiers/dynamic-modifiers-test.ts

@@ -140,13 +140,11 @@ class DynamicModifiersResolutionModeTest extends RenderTest {
     const bar = defineSimpleModifier(
       (element: Element, value: string) => (element.innerHTML = value)
     );
-    const Bar = defineComponent(
-      { foo },
-      '<div {{this.bar (foo)}}></div>',
-      class extends GlimmerishComponent {
+    const Bar = defineComponent({ foo }, '<div {{this.bar (foo)}}></div>', {
+      definition: class extends GlimmerishComponent {
         bar = bar;
-      }
-    );
+      },
+    });
 
     this.renderComponent(Bar);
     this.assertHTML('<div>Hello, world!</div>');
@@ -159,14 +157,12 @@ class DynamicModifiersResolutionModeTest extends RenderTest {
     const bar = defineSimpleModifier(
       (element: Element, value: string) => (element.innerHTML = value)
     );
-    const Bar = defineComponent(
-      {},
-      '<div {{this.bar (this.foo)}}></div>',
-      class extends GlimmerishComponent {
+    const Bar = defineComponent({}, '<div {{this.bar (this.foo)}}></div>', {
+      definition: class extends GlimmerishComponent {
         foo = foo;
         bar = bar;
-      }
-    );
+      },
+    });
 
     this.renderComponent(Bar);
     this.assertHTML('<div>Hello, world!</div>');

packages/@glimmer/integration-tests/test/owner-test.ts

@@ -86,27 +86,23 @@ class MountManager implements WithCreateInstance<object>, WithSubOwner<object> {
 setInternalComponentManager(new MountManager(), MountComponent);
 
 function defineMountComponent(owner: object, scope: Record<string, unknown>, template: string) {
-  return defineComponent(
-    scope,
-    template,
-    class extends MountComponent {
+  return defineComponent(scope, template, {
+    definition: class extends MountComponent {
       static owner = owner;
-    }
-  );
+    },
+  });
 }
 
 function defineCheckOwnerComponent(ownerToCheck: object | undefined, assert: Assert) {
-  return defineComponent(
-    {},
-    '{{yield}}',
-    class extends GlimmerishComponent {
+  return defineComponent({}, '{{yield}}', {
+    definition: class extends GlimmerishComponent {
       constructor(owner: object, args: Record<string, unknown>) {
         super(owner, args);
 
         assert.equal(owner, ownerToCheck, 'owner is correct');
       }
-    }
-  );
+    },
+  });
 }
 
 class OwnerTest extends RenderTest {