From 8b909eb5756f410d2b4644b5c0c3b9be6efe4a50 Mon Sep 17 00:00:00 2001
From: Yehuda Katz <wycats@gmail.com>
Date: Mon, 21 Oct 2024 17:56:50 -0700
Subject: [PATCH 1/2] Initial implementation of renderComponent

There's more in this commit than there should be, largely because this
commit bundles a change to the plugins that fixes lexical scope bugs.

I intend to separate those changes out into their own PR before
attempting to merge this one. This PR also needs a flag for the new API.

Finally this commit adds some new testing infrastructure to generalize
the base render tests so it can be used with templates that are not
registered into a container. This is useful more generally, and could
be used in other places in the test suite in the future.
---
 .../-internals/glimmer/lib/environment.ts     |   9 +-
 .../@ember/-internals/glimmer/lib/renderer.ts | 695 ++++++++++++------
 .../glimmer/lib/renderer/strict-resolver.ts   |  40 +
 .../@ember/-internals/glimmer/lib/resolver.ts |   4 +-
 .../components/render-component-test.ts       | 284 +++++++
 .../views/lib/mixins/view_support.ts          |   3 +-
 .../lib/plugins/assert-against-attrs.ts       |  47 +-
 .../plugins/assert-against-named-outlets.ts   |   6 +-
 .../assert-input-helper-without-block.ts      |   6 +-
 .../lib/plugins/transform-action-syntax.ts    |  21 +-
 .../lib/plugins/transform-each-track-array.ts |   6 +-
 .../lib/plugins/transform-resolutions.ts      |   2 +-
 .../transform-wrap-mount-and-outlet.ts        |   6 +-
 .../lib/plugins/utils.ts                      |  14 +-
 packages/ember-template-compiler/lib/types.ts |   4 +
 packages/internal-test-helpers/index.ts       |  12 +-
 .../lib/assert-helpers.ts                     |  16 +
 .../lib/component-helper.ts                   |  35 +
 .../lib/define-template-values.ts             |  26 +-
 .../lib/element-helpers.ts                    | 106 +++
 .../lib/ember-dev/namespaces.ts               |   2 +-
 .../lib/event-helpers.ts                      |  15 +
 .../internal-test-helpers/lib/module-for.ts   |  22 +-
 .../lib/test-cases/abstract.ts                |  51 +-
 24 files changed, 1114 insertions(+), 318 deletions(-)
 create mode 100644 packages/@ember/-internals/glimmer/lib/renderer/strict-resolver.ts
 create mode 100644 packages/@ember/-internals/glimmer/tests/integration/components/render-component-test.ts
 create mode 100644 packages/internal-test-helpers/lib/assert-helpers.ts
 create mode 100644 packages/internal-test-helpers/lib/component-helper.ts
 create mode 100644 packages/internal-test-helpers/lib/event-helpers.ts

diff --git a/packages/@ember/-internals/glimmer/lib/environment.ts b/packages/@ember/-internals/glimmer/lib/environment.ts
index ffa77980ad5..a2a21f849ad 100644
--- a/packages/@ember/-internals/glimmer/lib/environment.ts
+++ b/packages/@ember/-internals/glimmer/lib/environment.ts
@@ -1,11 +1,10 @@
 import { ENV } from '@ember/-internals/environment';
-import { get, set, _getProp, _setProp } from '@ember/-internals/metal';
-import type { InternalOwner } from '@ember/-internals/owner';
+import { _getProp, _setProp, get, set } from '@ember/-internals/metal';
 import { getDebugName } from '@ember/-internals/utils';
 import { constructStyleDeprecationMessage } from '@ember/-internals/views';
-import { assert, deprecate, warn } from '@ember/debug';
 import type { DeprecationOptions } from '@ember/debug';
-import { schedule, _backburner } from '@ember/runloop';
+import { assert, deprecate, warn } from '@ember/debug';
+import { _backburner, schedule } from '@ember/runloop';
 import { DEBUG } from '@glimmer/env';
 import setGlobalContext from '@glimmer/global-context';
 import type { EnvironmentDelegate } from '@glimmer/runtime';
@@ -131,7 +130,7 @@ const VM_ASSERTION_OVERRIDES: { id: string; message: string }[] = [];
 export class EmberEnvironmentDelegate implements EnvironmentDelegate {
   public enableDebugTooling: boolean = ENV._DEBUG_RENDER_TREE;
 
-  constructor(public owner: InternalOwner, public isInteractive: boolean) {}
+  constructor(public owner: object, public isInteractive: boolean) {}
 
   onTransactionCommit(): void {}
 }
diff --git a/packages/@ember/-internals/glimmer/lib/renderer.ts b/packages/@ember/-internals/glimmer/lib/renderer.ts
index 1c9c0e44469..be0816ad02c 100644
--- a/packages/@ember/-internals/glimmer/lib/renderer.ts
+++ b/packages/@ember/-internals/glimmer/lib/renderer.ts
@@ -6,23 +6,24 @@ import { guidFor } from '@ember/-internals/utils';
 import { getViewElement, getViewId } from '@ember/-internals/views';
 import { assert } from '@ember/debug';
 import { _backburner, _getCurrentRunLoop } from '@ember/runloop';
-import { destroy } from '@glimmer/destroyable';
+import { associateDestroyableChild, destroy, isDestroyed } from '@glimmer/destroyable';
 import { DEBUG } from '@glimmer/env';
 import type {
   Bounds,
   CompileTimeCompilationContext,
+  CompileTimeResolver,
   Cursor,
   DebugRenderTree,
-  DynamicScope as GlimmerDynamicScope,
   ElementBuilder,
   Environment,
+  DynamicScope as GlimmerDynamicScope,
   RenderResult,
   RuntimeContext,
+  RuntimeResolver,
   Template,
   TemplateFactory,
 } from '@glimmer/interfaces';
 
-import { CurriedType } from '@glimmer/vm';
 import type { Nullable } from '@ember/-internals/utility-types';
 import { programCompilationContext } from '@glimmer/opcode-compiler';
 import { artifacts, RuntimeOpImpl } from '@glimmer/program';
@@ -35,22 +36,27 @@ import {
   DOMChanges,
   DOMTreeConstruction,
   inTransaction,
+  renderComponent as glimmerRenderComponent,
   renderMain,
   runtimeContext,
 } from '@glimmer/runtime';
 import { unwrapTemplate } from '@glimmer/util';
 import { CURRENT_TAG, validateTag, valueForTag } from '@glimmer/validator';
+import { CurriedType } from '@glimmer/vm';
 import type { SimpleDocument, SimpleElement, SimpleNode } from '@simple-dom/interface';
 import RSVP from 'rsvp';
-import type Component from './component';
+import { hasDOM } from '../../browser-environment';
+import type ClassicComponent from './component';
 import { BOUNDS } from './component-managers/curly';
 import { createRootOutlet } from './component-managers/outlet';
 import { RootComponentDefinition } from './component-managers/root';
 import { NodeDOMTreeConstruction } from './dom';
 import { EmberEnvironmentDelegate } from './environment';
+import { StrictResolver } from './renderer/strict-resolver';
 import ResolverImpl from './resolver';
 import type { OutletState } from './utils/outlet';
 import OutletView from './views/outlet';
+import { registerDestructor } from '@ember/destroyable';
 
 export type IBuilder = (env: Environment, cursor: Cursor) => ElementBuilder;
 
@@ -120,17 +126,71 @@ function errorLoopTransaction(fn: () => void) {
   }
 }
 
-class RootState {
+type RootState = ClassicRootState | ComponentRootState;
+
+class ComponentRootState {
+  readonly type = 'component';
+
+  #result: RenderResult | undefined;
+  #render: () => void;
+
+  constructor(
+    state: RendererState,
+    definition: object,
+    options: { into: Cursor; args?: Record<string, unknown> }
+  ) {
+    this.#render = errorLoopTransaction(() => {
+      let iterator = glimmerRenderComponent(
+        state.runtime,
+        state.builder(state.env, options.into),
+        state.compilation,
+        state.owner,
+        definition,
+        options?.args
+      );
+
+      let result = (this.#result = iterator.sync());
+
+      associateDestroyableChild(this, this.#result);
+
+      // override .render function after initial render
+      this.#render = errorLoopTransaction(() => result.rerender({ alwaysRevalidate: false }));
+    });
+  }
+
+  isFor(_component: ClassicComponent): boolean {
+    return false;
+  }
+
+  render(): void {
+    this.#render();
+  }
+
+  destroy(): void {
+    destroy(this);
+  }
+
+  get destroyed(): boolean {
+    return isDestroyed(this);
+  }
+
+  get result(): RenderResult | undefined {
+    return this.#result;
+  }
+}
+
+class ClassicRootState {
+  readonly type = 'classic';
   public id: string;
   public result: RenderResult | undefined;
   public destroyed: boolean;
   public render: () => void;
 
   constructor(
-    public root: Component | OutletView,
+    public root: ClassicComponent | OutletView,
     public runtime: RuntimeContext,
     context: CompileTimeCompilationContext,
-    owner: InternalOwner,
+    owner: object,
     template: Template,
     self: Reference<unknown>,
     parentElement: SimpleElement,
@@ -200,18 +260,18 @@ class RootState {
   }
 }
 
-const renderers: Renderer[] = [];
+const renderers: BaseRenderer[] = [];
 
 export function _resetRenderers() {
   renderers.length = 0;
 }
 
-function register(renderer: Renderer): void {
+function register(renderer: BaseRenderer): void {
   assert('Cannot register the same renderer twice', renderers.indexOf(renderer) === -1);
   renderers.push(renderer);
 }
 
-function deregister(renderer: Renderer): void {
+function deregister(renderer: BaseRenderer): void {
   let index = renderers.indexOf(renderer);
   assert('Cannot deregister unknown unregistered renderer', index !== -1);
   renderers.splice(index, 1);
@@ -219,7 +279,7 @@ function deregister(renderer: Renderer): void {
 
 function loopBegin(): void {
   for (let renderer of renderers) {
-    renderer._scheduleRevalidate();
+    renderer.rerender();
   }
 }
 
@@ -259,7 +319,7 @@ function resolveRenderPromise() {
 let loops = 0;
 function loopEnd() {
   for (let renderer of renderers) {
-    if (!renderer._isValid()) {
+    if (!renderer.isValid()) {
       if (loops > ENV._RERENDER_LOOP_LIMIT) {
         loops = 0;
         // TODO: do something better
@@ -281,69 +341,265 @@ interface ViewRegistry {
   [viewId: string]: unknown;
 }
 
-export class Renderer {
-  private _rootTemplate: Template;
-  private _viewRegistry: ViewRegistry;
-  private _roots: RootState[];
-  private _removedRoots: RootState[];
-  private _builder: IBuilder;
-  private _inRenderTransaction = false;
+type Resolver = RuntimeResolver & CompileTimeResolver;
+
+interface RendererData {
+  owner: object;
+  runtime: RuntimeContext;
+  compilation: CompileTimeCompilationContext;
+  builder: (env: Environment, cursor: Cursor) => ElementBuilder;
+  resolver: Resolver;
+  env: {
+    isInteractive: boolean;
+    hasDOM: boolean;
+    document: SimpleDocument;
+  };
+}
 
-  private _owner: InternalOwner;
-  private _context: CompileTimeCompilationContext;
-  private _runtime: RuntimeContext;
+export class RendererState {
+  static create(owner: RendererData, renderer: BaseRenderer): RendererState {
+    const state = new RendererState(owner, renderer);
+    associateDestroyableChild(renderer, state);
+    return state;
+  }
 
-  private _lastRevision = -1;
-  private _destroyed = false;
+  readonly #data: RendererData;
+  #lastRevision = -1;
+  #inRenderTransaction = false;
+  #destroyed = false;
+  #roots: RootState[] = [];
+  #removedRoots: RootState[] = [];
 
-  /** @internal */
-  _isInteractive: boolean;
+  private constructor(data: RendererData, renderer: BaseRenderer) {
+    this.#data = data;
 
-  readonly _runtimeResolver: ResolverImpl;
+    registerDestructor(this, () => {
+      this.clearAllRoots(renderer);
+    });
+  }
 
-  static create(props: { _viewRegistry: any }): Renderer {
-    let { _viewRegistry } = props;
-    let owner = getOwner(props);
-    assert('Renderer is unexpectedly missing an owner', owner);
-    let document = owner.lookup('service:-document') as SimpleDocument;
-    let env = owner.lookup('-environment:main') as {
-      isInteractive: boolean;
-      hasDOM: boolean;
+  get debug() {
+    return {
+      roots: this.#roots,
+      inRenderTransaction: this.#inRenderTransaction,
+      isInteractive: this.#data.env.isInteractive,
     };
-    let rootTemplate = owner.lookup(P`template:-root`) as TemplateFactory;
-    let builder = owner.lookup('service:-dom-builder') as IBuilder;
-    return new this(owner, document, env, rootTemplate, _viewRegistry, builder);
   }
 
-  constructor(
-    owner: InternalOwner,
-    document: SimpleDocument,
-    env: { isInteractive: boolean; hasDOM: boolean },
-    rootTemplate: TemplateFactory,
-    viewRegistry: ViewRegistry,
-    builder = clientBuilder
-  ) {
-    this._owner = owner;
-    this._rootTemplate = rootTemplate(owner);
-    this._viewRegistry = viewRegistry || owner.lookup('-view-registry:main');
-    this._roots = [];
-    this._removedRoots = [];
-    this._builder = builder;
-    this._isInteractive = env.isInteractive;
+  get roots() {
+    return this.#roots;
+  }
 
-    // resolver is exposed for tests
-    let resolver = (this._runtimeResolver = new ResolverImpl());
+  get owner(): object {
+    return this.#data.owner;
+  }
 
-    let sharedArtifacts = artifacts();
+  get runtime(): RuntimeContext {
+    return this.#data.runtime;
+  }
 
-    this._context = programCompilationContext(
-      sharedArtifacts,
-      resolver,
-      (heap) => new RuntimeOpImpl(heap)
+  get builder(): (env: Environment, cursor: Cursor) => ElementBuilder {
+    return this.#data.builder;
+  }
+
+  get compilation(): CompileTimeCompilationContext {
+    return this.#data.compilation;
+  }
+
+  get env(): Environment {
+    return this.runtime.env;
+  }
+
+  get isInteractive(): boolean {
+    return this.#data.env.isInteractive;
+  }
+
+  renderRoot(root: RootState, renderer: BaseRenderer): RootState {
+    let roots = this.#roots;
+
+    roots.push(root);
+    associateDestroyableChild(this, root);
+
+    if (roots.length === 1) {
+      register(renderer);
+    }
+
+    this.#renderRootsTransaction(renderer);
+
+    return root;
+  }
+
+  #renderRootsTransaction(renderer: BaseRenderer): void {
+    if (this.#inRenderTransaction) {
+      // currently rendering roots, a new root was added and will
+      // be processed by the existing _renderRoots invocation
+      return;
+    }
+
+    // used to prevent calling _renderRoots again (see above)
+    // while we are actively rendering roots
+    this.#inRenderTransaction = true;
+
+    let completedWithoutError = false;
+    try {
+      this.renderRoots(renderer);
+      completedWithoutError = true;
+    } finally {
+      if (!completedWithoutError) {
+        this.#lastRevision = valueForTag(CURRENT_TAG);
+      }
+      this.#inRenderTransaction = false;
+    }
+  }
+
+  renderRoots(renderer: BaseRenderer): void {
+    let roots = this.#roots;
+    let removedRoots = this.#removedRoots;
+    let initialRootsLength: number;
+    let runtime = this.runtime;
+
+    do {
+      initialRootsLength = roots.length;
+
+      inTransaction(runtime.env, () => {
+        // ensure that for the first iteration of the loop
+        // each root is processed
+        for (let i = 0; i < roots.length; i++) {
+          let root = roots[i];
+          assert('has root', root);
+
+          if (root.destroyed) {
+            // add to the list of roots to be removed
+            // they will be removed from `this._roots` later
+            removedRoots.push(root);
+
+            // skip over roots that have been marked as destroyed
+            continue;
+          }
+
+          // when processing non-initial reflush loops,
+          // do not process more roots than needed
+          if (i >= initialRootsLength) {
+            continue;
+          }
+
+          root.render();
+        }
+
+        this.#lastRevision = valueForTag(CURRENT_TAG);
+      });
+    } while (roots.length > initialRootsLength);
+
+    // remove any roots that were destroyed during this transaction
+    while (removedRoots.length) {
+      let root = removedRoots.pop();
+
+      let rootIndex = roots.indexOf(root!);
+      roots.splice(rootIndex, 1);
+    }
+
+    if (this.#roots.length === 0) {
+      deregister(renderer);
+    }
+  }
+
+  scheduleRevalidate(renderer: BaseRenderer): void {
+    _backburner.scheduleOnce('render', this, this.revalidate, renderer);
+  }
+
+  isValid(): boolean {
+    return (
+      this.#destroyed || this.#roots.length === 0 || validateTag(CURRENT_TAG, this.#lastRevision)
+    );
+  }
+
+  revalidate(renderer: BaseRenderer): void {
+    if (this.isValid()) {
+      return;
+    }
+    this.#renderRootsTransaction(renderer);
+  }
+
+  clearAllRoots(renderer: BaseRenderer): void {
+    let roots = this.#roots;
+    for (let root of roots) {
+      destroy(root);
+    }
+
+    this.#removedRoots.length = 0;
+    this.#roots = [];
+
+    // if roots were present before destroying
+    // deregister this renderer instance
+    if (roots.length) {
+      deregister(renderer);
+    }
+  }
+}
+
+type IntoTarget = Cursor | Element | SimpleElement;
+
+function intoTarget(into: IntoTarget): Cursor {
+  if ('element' in into) {
+    return into;
+  } else {
+    return { element: into as SimpleElement, nextSibling: null };
+  }
+}
+
+/**
+ * This function returns `undefined` if there was an error rendering the
+ * component.
+ *
+ * @fixme restructure this to return a result containing the error rather than
+ * undefined.
+ */
+export function renderComponent(
+  component: object,
+  {
+    owner,
+    env,
+    into,
+    args,
+  }: {
+    owner: object;
+    env: { document: SimpleDocument | Document; isInteractive: boolean; hasDOM?: boolean };
+    into: IntoTarget;
+    args?: Record<string, unknown>;
+  }
+): RenderResult | undefined {
+  let renderer = BaseRenderer.strict(owner, env.document, env);
+
+  return renderer.render(component, { into, args }).result;
+}
+
+export class BaseRenderer {
+  static strict(
+    owner: object,
+    document: SimpleDocument | Document,
+    options: { isInteractive: boolean; hasDOM?: boolean }
+  ) {
+    return new BaseRenderer(
+      owner,
+      { hasDOM: hasDOM, ...options },
+      document as SimpleDocument,
+      new StrictResolver(),
+      clientBuilder
     );
+  }
+
+  readonly state: RendererState;
 
+  constructor(
+    owner: object,
+    env: { isInteractive: boolean; hasDOM: boolean },
+    document: SimpleDocument,
+    resolver: Resolver,
+    builder: (env: Environment, cursor: Cursor) => ElementBuilder
+  ) {
     let runtimeEnvironmentDelegate = new EmberEnvironmentDelegate(owner, env.isInteractive);
-    this._runtime = runtimeContext(
+    let sharedArtifacts = artifacts();
+    let runtime = runtimeContext(
       {
         appendOperations: env.hasDOM
           ? new DOMTreeConstruction(document)
@@ -354,10 +610,26 @@ export class Renderer {
       sharedArtifacts,
       resolver
     );
+
+    this.state = RendererState.create(
+      {
+        owner,
+        runtime,
+        builder,
+        resolver,
+        compilation: programCompilationContext(
+          sharedArtifacts,
+          resolver,
+          (heap) => new RuntimeOpImpl(heap)
+        ),
+        env: { ...env, document: document },
+      },
+      this
+    );
   }
 
   get debugRenderTree(): DebugRenderTree {
-    let { debugRenderTree } = this._runtime.env;
+    let { debugRenderTree } = this.state.env;
 
     assert(
       'Attempted to access the DebugRenderTree, but it did not exist. Is the Ember Inspector open?',
@@ -367,6 +639,80 @@ export class Renderer {
     return debugRenderTree;
   }
 
+  isValid(): boolean {
+    return this.state.isValid();
+  }
+
+  destroy() {
+    destroy(this);
+  }
+
+  render(
+    component: object,
+    options: { into: IntoTarget; args?: Record<string, unknown> }
+  ): RootState {
+    const root = new ComponentRootState(this.state, component, {
+      args: options.args,
+      into: intoTarget(options.into),
+    });
+    return this.state.renderRoot(root, this);
+  }
+
+  rerender(): void {
+    this.state.scheduleRevalidate(this);
+  }
+
+  // render(component: Component, options: { into: Cursor; args?: Record<string, unknown> }): void {
+  //   this.state.renderRoot(component);
+  // }
+}
+
+export class Renderer extends BaseRenderer {
+  static strict(
+    owner: object,
+    document: SimpleDocument | Document,
+    options: { isInteractive: boolean; hasDOM?: boolean }
+  ): BaseRenderer {
+    return new BaseRenderer(
+      owner,
+      { hasDOM: hasDOM, ...options },
+      document as SimpleDocument,
+      new StrictResolver(),
+      clientBuilder
+    );
+  }
+
+  private _rootTemplate: Template;
+  private _viewRegistry: ViewRegistry;
+
+  static create(props: { _viewRegistry: any }): Renderer {
+    let { _viewRegistry } = props;
+    let owner = getOwner(props);
+    assert('Renderer is unexpectedly missing an owner', owner);
+    let document = owner.lookup('service:-document') as SimpleDocument;
+    let env = owner.lookup('-environment:main') as {
+      isInteractive: boolean;
+      hasDOM: boolean;
+    };
+    let rootTemplate = owner.lookup(P`template:-root`) as TemplateFactory;
+    let builder = owner.lookup('service:-dom-builder') as IBuilder;
+    return new this(owner, document, env, rootTemplate, _viewRegistry, builder);
+  }
+
+  constructor(
+    owner: InternalOwner,
+    document: SimpleDocument,
+    env: { isInteractive: boolean; hasDOM: boolean },
+    rootTemplate: TemplateFactory,
+    viewRegistry: ViewRegistry,
+    builder = clientBuilder,
+    resolver = new ResolverImpl()
+  ) {
+    super(owner, env, document, resolver, builder);
+    this._rootTemplate = rootTemplate(owner);
+    this._viewRegistry = viewRegistry || owner.lookup('-view-registry:main');
+  }
+
   // renderer HOOKS
 
   appendOutletView(view: OutletView, target: SimpleElement): void {
@@ -378,95 +724,99 @@ export class Renderer {
     );
   }
 
-  appendTo(view: Component, target: SimpleElement): void {
+  appendTo(view: ClassicComponent, target: SimpleElement): void {
     let definition = new RootComponentDefinition(view);
     this._appendDefinition(
       view,
-      curry(CurriedType.Component, definition, this._owner, null, true),
+      curry(CurriedType.Component, definition, this.state.owner, null, true),
       target
     );
   }
 
   _appendDefinition(
-    root: OutletView | Component,
+    root: OutletView | ClassicComponent,
     definition: CurriedValue,
     target: SimpleElement
   ): void {
     let self = createConstRef(definition, 'this');
     let dynamicScope = new DynamicScope(null, UNDEFINED_REFERENCE);
-    let rootState = new RootState(
+    let rootState = new ClassicRootState(
       root,
-      this._runtime,
-      this._context,
-      this._owner,
+      this.state.runtime,
+      this.state.compilation,
+      this.state.owner,
       this._rootTemplate,
       self,
       target,
       dynamicScope,
-      this._builder
-    );
-    this._renderRoot(rootState);
-  }
-
-  rerender(): void {
-    this._scheduleRevalidate();
-  }
-
-  register(view: any): void {
-    let id = getViewId(view);
-    assert(
-      'Attempted to register a view with an id already in use: ' + id,
-      !this._viewRegistry[id]
+      this.state.builder
     );
-    this._viewRegistry[id] = view;
+    this.state.renderRoot(rootState, this);
   }
 
-  unregister(view: any): void {
-    delete this._viewRegistry[getViewId(view)];
-  }
-
-  remove(view: Component): void {
-    view._transitionTo('destroying');
-
-    this.cleanupRootFor(view);
-
-    if (this._isInteractive) {
-      view.trigger('didDestroyElement');
-    }
-  }
-
-  cleanupRootFor(view: unknown): void {
+  cleanupRootFor(component: ClassicComponent): void {
     // no need to cleanup roots if we have already been destroyed
-    if (this._destroyed) {
+    if (isDestroyed(this)) {
       return;
     }
 
-    let roots = this._roots;
+    let roots = this.state.roots;
 
     // traverse in reverse so we can remove items
     // without mucking up the index
-    let i = this._roots.length;
+    let i = roots.length;
     while (i--) {
       let root = roots[i];
       assert('has root', root);
-      if (root.isFor(view)) {
+      if (root.type === 'classic' && root.isFor(component)) {
         root.destroy();
         roots.splice(i, 1);
       }
     }
   }
 
-  destroy() {
-    if (this._destroyed) {
-      return;
+  remove(view: ClassicComponent): void {
+    view._transitionTo('destroying');
+
+    this.cleanupRootFor(view);
+
+    if (this.state.isInteractive) {
+      view.trigger('didDestroyElement');
     }
-    this._destroyed = true;
-    this._clearAllRoots();
   }
 
-  getElement(view: View): Nullable<Element> {
+  get _roots() {
+    return this.state.debug.roots;
+  }
+
+  get _inRenderTransaction() {
+    return this.state.debug.inRenderTransaction;
+  }
+
+  get _isInteractive() {
+    return this.state.debug.isInteractive;
+  }
+
+  get _context() {
+    return this.state.compilation;
+  }
+
+  register(view: any): void {
+    let id = getViewId(view);
+    assert(
+      'Attempted to register a view with an id already in use: ' + id,
+      !this._viewRegistry[id]
+    );
+    this._viewRegistry[id] = view;
+  }
+
+  unregister(view: any): void {
+    delete this._viewRegistry[getViewId(view)];
+  }
+
+  getElement(component: View): Nullable<Element> {
     if (this._isInteractive) {
-      return getViewElement(view);
+      return getViewElement(component);
     } else {
       throw new Error(
         'Accessing `this.element` is not allowed in non-interactive environments (such as FastBoot).'
@@ -474,12 +824,12 @@ export class Renderer {
     }
   }
 
-  getBounds(view: View): {
+  getBounds(component: View): {
     parentElement: SimpleElement;
     firstNode: SimpleNode;
     lastNode: SimpleNode;
   } {
-    let bounds: Bounds | null = view[BOUNDS];
+    let bounds: Bounds | null = component[BOUNDS];
 
     assert('object passed to getBounds must have the BOUNDS symbol as a property', bounds);
 
@@ -489,125 +839,4 @@ export class Renderer {
 
     return { parentElement, firstNode, lastNode };
   }
-
-  createElement(tagName: string): SimpleElement {
-    return this._runtime.env.getAppendOperations().createElement(tagName);
-  }
-
-  _renderRoot(root: RootState): void {
-    let { _roots: roots } = this;
-
-    roots.push(root);
-
-    if (roots.length === 1) {
-      register(this);
-    }
-
-    this._renderRootsTransaction();
-  }
-
-  _renderRoots(): void {
-    let { _roots: roots, _runtime: runtime, _removedRoots: removedRoots } = this;
-    let initialRootsLength: number;
-
-    do {
-      initialRootsLength = roots.length;
-
-      inTransaction(runtime.env, () => {
-        // ensure that for the first iteration of the loop
-        // each root is processed
-        for (let i = 0; i < roots.length; i++) {
-          let root = roots[i];
-          assert('has root', root);
-
-          if (root.destroyed) {
-            // add to the list of roots to be removed
-            // they will be removed from `this._roots` later
-            removedRoots.push(root);
-
-            // skip over roots that have been marked as destroyed
-            continue;
-          }
-
-          // when processing non-initial reflush loops,
-          // do not process more roots than needed
-          if (i >= initialRootsLength) {
-            continue;
-          }
-
-          root.render();
-        }
-
-        this._lastRevision = valueForTag(CURRENT_TAG);
-      });
-    } while (roots.length > initialRootsLength);
-
-    // remove any roots that were destroyed during this transaction
-    while (removedRoots.length) {
-      let root = removedRoots.pop();
-
-      let rootIndex = roots.indexOf(root!);
-      roots.splice(rootIndex, 1);
-    }
-
-    if (this._roots.length === 0) {
-      deregister(this);
-    }
-  }
-
-  _renderRootsTransaction(): void {
-    if (this._inRenderTransaction) {
-      // currently rendering roots, a new root was added and will
-      // be processed by the existing _renderRoots invocation
-      return;
-    }
-
-    // used to prevent calling _renderRoots again (see above)
-    // while we are actively rendering roots
-    this._inRenderTransaction = true;
-
-    let completedWithoutError = false;
-    try {
-      this._renderRoots();
-      completedWithoutError = true;
-    } finally {
-      if (!completedWithoutError) {
-        this._lastRevision = valueForTag(CURRENT_TAG);
-      }
-      this._inRenderTransaction = false;
-    }
-  }
-
-  _clearAllRoots(): void {
-    let roots = this._roots;
-    for (let root of roots) {
-      root.destroy();
-    }
-
-    this._removedRoots.length = 0;
-    this._roots = [];
-
-    // if roots were present before destroying
-    // deregister this renderer instance
-    if (roots.length) {
-      deregister(this);
-    }
-  }
-
-  _scheduleRevalidate(): void {
-    _backburner.scheduleOnce('render', this, this._revalidate);
-  }
-
-  _isValid(): boolean {
-    return (
-      this._destroyed || this._roots.length === 0 || validateTag(CURRENT_TAG, this._lastRevision)
-    );
-  }
-
-  _revalidate(): void {
-    if (this._isValid()) {
-      return;
-    }
-    this._renderRootsTransaction();
-  }
 }
diff --git a/packages/@ember/-internals/glimmer/lib/renderer/strict-resolver.ts b/packages/@ember/-internals/glimmer/lib/renderer/strict-resolver.ts
new file mode 100644
index 00000000000..69dc88483f3
--- /dev/null
+++ b/packages/@ember/-internals/glimmer/lib/renderer/strict-resolver.ts
@@ -0,0 +1,40 @@
+import type {
+  CompileTimeResolver as VMCompileTimeResolver,
+  InternalComponentManager,
+  Nullable,
+  ResolvedComponentDefinition,
+  RuntimeResolver as VMRuntimeResolver,
+} from '@glimmer/interfaces';
+import { BUILTIN_HELPERS, BUILTIN_KEYWORD_HELPERS } from '../resolver';
+
+///////////
+
+/**
+ * Resolution for non built ins is now handled by the vm as we are using strict mode
+ */
+export class StrictResolver implements VMRuntimeResolver, VMCompileTimeResolver {
+  lookupHelper(name: string, _owner: object): Nullable<object> {
+    return BUILTIN_HELPERS[name] ?? null;
+  }
+
+  lookupBuiltInHelper(name: string): Nullable<object> {
+    return BUILTIN_KEYWORD_HELPERS[name] ?? null;
+  }
+
+  lookupModifier(_name: string, _owner: object): Nullable<object> {
+    return null;
+  }
+
+  lookupComponent(
+    _name: string,
+    _owner: object
+  ): Nullable<
+    ResolvedComponentDefinition<object, unknown, InternalComponentManager<unknown, object>>
+  > {
+    return null;
+  }
+
+  lookupBuiltInModifier(_name: string): Nullable<object> {
+    return null;
+  }
+}
diff --git a/packages/@ember/-internals/glimmer/lib/resolver.ts b/packages/@ember/-internals/glimmer/lib/resolver.ts
index 3df207331b0..3017b89f9cc 100644
--- a/packages/@ember/-internals/glimmer/lib/resolver.ts
+++ b/packages/@ember/-internals/glimmer/lib/resolver.ts
@@ -120,7 +120,7 @@ function lookupComponentPair(
   }
 }
 
-const BUILTIN_KEYWORD_HELPERS: Record<string, object> = {
+export const BUILTIN_KEYWORD_HELPERS: Record<string, object> = {
   action,
   mut,
   readonly,
@@ -135,7 +135,7 @@ const BUILTIN_KEYWORD_HELPERS: Record<string, object> = {
   '-in-el-null': inElementNullCheckHelper,
 };
 
-const BUILTIN_HELPERS: Record<string, object> = {
+export const BUILTIN_HELPERS: Record<string, object> = {
   ...BUILTIN_KEYWORD_HELPERS,
   array,
   concat,
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/render-component-test.ts b/packages/@ember/-internals/glimmer/tests/integration/components/render-component-test.ts
new file mode 100644
index 00000000000..73c8b3d7f90
--- /dev/null
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/render-component-test.ts
@@ -0,0 +1,284 @@
+import {
+  AbstractStrictTestCase,
+  assertClassicComponentElement,
+  assertHTML,
+  buildOwner,
+  clickElement,
+  defComponent,
+  defineComponent,
+  defineSimpleHelper,
+  defineSimpleModifier,
+  moduleFor,
+  type ClassicComponentShape,
+} from 'internal-test-helpers';
+
+import { Input, Textarea } from '@ember/component';
+import { array, concat, fn, get, hash, on } from '@glimmer/runtime';
+import GlimmerishComponent from '../../utils/glimmerish-component';
+
+import { run } from '@ember/runloop';
+import { associateDestroyableChild } from '@glimmer/destroyable';
+import type { RenderResult } from '@glimmer/interfaces';
+import { renderComponent } from '../../../lib/renderer';
+
+class RenderComponentTestCase extends AbstractStrictTestCase {
+  component: RenderResult | undefined;
+  owner: object;
+
+  constructor(assert: QUnit['assert']) {
+    super(assert);
+
+    this.owner = buildOwner({});
+    associateDestroyableChild(this, this.owner);
+  }
+
+  get element() {
+    return document.querySelector('#qunit-fixture')!;
+  }
+
+  renderComponent(
+    component: object,
+    options: { expect: string } | { classic: ClassicComponentShape }
+  ) {
+    let { owner } = this;
+
+    run(() => {
+      this.component = renderComponent(component, {
+        owner,
+        env: { document: document, isInteractive: true, hasDOM: true },
+        into: this.element,
+      });
+      if (this.component) {
+        associateDestroyableChild(this, this.component);
+      }
+    });
+
+    if ('expect' in options) {
+      assertHTML(options.expect);
+    } else {
+      assertClassicComponentElement(options.classic);
+    }
+
+    this.assertStableRerender();
+  }
+}
+
+moduleFor(
+  'Strict Mode - renderComponent',
+  class extends RenderComponentTestCase {
+    '@test Can use a component in scope'() {
+      let Foo = defComponent('Hello, world!');
+      let Root = defComponent('<Foo/>', { scope: { Foo } });
+
+      this.renderComponent(Root, { expect: 'Hello, world!' });
+    }
+
+    '@test Can use a custom helper in scope (in append position)'() {
+      let foo = defineSimpleHelper(() => 'Hello, world!');
+      let Root = defComponent('{{foo}}', { scope: { foo } });
+
+      this.renderComponent(Root, { expect: 'Hello, world!' });
+    }
+
+    '@test Can use a custom modifier in scope'() {
+      let foo = defineSimpleModifier((element) => (element.innerHTML = 'Hello, world!'));
+      let Root = defComponent('<div {{foo}}></div>', { scope: { foo } });
+
+      this.renderComponent(Root, { expect: '<div>Hello, world!</div>' });
+    }
+
+    '@test Can shadow keywords'() {
+      let ifComponent = defineComponent({}, 'Hello, world!');
+      let Bar = defComponent('{{#if}}{{/if}}', { scope: { if: ifComponent } });
+
+      this.renderComponent(Bar, { expect: 'Hello, world!' });
+    }
+
+    '@test Can use constant values in ambiguous helper/component position'() {
+      let value = 'Hello, world!';
+
+      let Root = defComponent('{{value}}', { scope: { value } });
+
+      this.renderComponent(Root, { expect: 'Hello, world!' });
+    }
+
+    '@test Can use inline if and unless in strict mode templates'() {
+      let Root = defComponent('{{if true "foo" "bar"}}{{unless true "foo" "bar"}}');
+
+      this.renderComponent(Root, { expect: 'foobar' });
+    }
+
+    '@test Can use a dynamic component definition'() {
+      let Foo = defComponent('Hello, world!');
+      let Root = defComponent('<this.Foo/>', {
+        component: class extends GlimmerishComponent {
+          Foo = Foo;
+        },
+      });
+
+      this.renderComponent(Root, { expect: 'Hello, world!' });
+    }
+
+    '@test Can use a dynamic component definition (curly)'() {
+      let Foo = defComponent('Hello, world!');
+      let Root = defComponent('{{this.Foo}}', {
+        component: class extends GlimmerishComponent {
+          Foo = Foo;
+        },
+      });
+
+      this.renderComponent(Root, { expect: 'Hello, world!' });
+    }
+
+    '@test Can use a dynamic helper definition'() {
+      let foo = defineSimpleHelper(() => 'Hello, world!');
+      let Root = defComponent('{{this.foo}}', {
+        component: class extends GlimmerishComponent {
+          foo = foo;
+        },
+      });
+
+      this.renderComponent(Root, { expect: 'Hello, world!' });
+    }
+
+    '@test Can use a curried dynamic helper'() {
+      let foo = defineSimpleHelper((value) => value);
+      let Foo = defComponent('{{@value}}');
+      let Root = defComponent('<Foo @value={{helper foo "Hello, world!"}}/>', {
+        scope: { Foo, foo },
+      });
+
+      this.renderComponent(Root, { expect: 'Hello, world!' });
+    }
+
+    '@test Can use a curried dynamic modifier'() {
+      let foo = defineSimpleModifier((element, [text]) => (element.innerHTML = text));
+      let Foo = defComponent('<div {{@value}}></div>');
+      let Root = defComponent('<Foo @value={{modifier foo "Hello, world!"}}/>', {
+        scope: { Foo, foo },
+      });
+
+      this.renderComponent(Root, { expect: '<div>Hello, world!</div>' });
+    }
+  }
+);
+
+moduleFor(
+  'Strict Mode - renderComponent - built ins',
+  class extends RenderComponentTestCase {
+    '@test Can use Input'() {
+      let Root = defComponent('<Input/>', { scope: { Input } });
+
+      this.renderComponent(Root, {
+        classic: {
+          tagName: 'input',
+          attrs: {
+            type: 'text',
+            class: 'ember-text-field ember-view',
+          },
+        },
+      });
+    }
+
+    '@test Can use Textarea'() {
+      let Root = defComponent('<Textarea/>', { scope: { Textarea } });
+
+      this.renderComponent(Root, {
+        classic: {
+          tagName: 'textarea',
+          attrs: {
+            class: 'ember-text-area ember-view',
+          },
+        },
+      });
+    }
+
+    '@test Can use hash'() {
+      let Root = defComponent(
+        '{{#let (hash value="Hello, world!") as |hash|}}{{hash.value}}{{/let}}',
+        { scope: { hash } }
+      );
+
+      this.renderComponent(Root, { expect: 'Hello, world!' });
+    }
+
+    '@test Can use array'() {
+      let Root = defComponent('{{#each (array "Hello, world!") as |value|}}{{value}}{{/each}}', {
+        scope: { array },
+      });
+
+      this.renderComponent(Root, { expect: 'Hello, world!' });
+    }
+
+    '@test Can use concat'() {
+      let Root = defComponent('{{(concat "Hello" ", " "world!")}}', { scope: { concat } });
+
+      this.renderComponent(Root, { expect: 'Hello, world!' });
+    }
+
+    '@test Can use get'() {
+      let Root = defComponent(
+        '{{#let (hash value="Hello, world!") as |hash|}}{{(get hash "value")}}{{/let}}',
+        { scope: { hash, get } }
+      );
+
+      this.renderComponent(Root, { expect: 'Hello, world!' });
+    }
+
+    '@test Can use on and fn'(assert: Assert) {
+      let handleClick = (value: unknown) => {
+        assert.step('handleClick');
+        assert.equal(value, 123);
+      };
+
+      let Root = defComponent('<button {{on "click" (fn handleClick 123)}}>Click</button>', {
+        scope: { on, fn, handleClick },
+      });
+
+      this.renderComponent(Root, { expect: '<button>Click</button>' });
+
+      clickElement('button');
+
+      assert.verifySteps(['handleClick']);
+    }
+
+    // Ember currently uses AST plugins to implement certain features that
+    // glimmer-vm does not natively provide, such as {{#each-in}}, {{outlet}}
+    // {{mount}} and some features in {{#in-element}}. These rewrites the AST
+    // and insert private keywords e.g. `{{#each (-each-in)}}`. These tests
+    // ensures we have _some_ basic coverage for those features in strict mode.
+    //
+    // Ultimately, our test coverage for strict mode is quite inadequate. This
+    // is particularly important as we expect more apps to start adopting the
+    // feature. Ideally we would run our entire/most of our test suite against
+    // both strict and resolution modes, and these things would be implicitly
+    // covered elsewhere, but until then, these coverage are essential.
+
+    '@test Can use each-in'() {
+      let obj = {
+        foo: 'FOO',
+        bar: 'BAR',
+      };
+
+      let Root = defComponent('{{#each-in obj as |k v|}}[{{k}}:{{v}}]{{/each-in}}', {
+        scope: { obj },
+      });
+
+      this.renderComponent(Root, { expect: '[foo:FOO][bar:BAR]' });
+    }
+
+    '@test Can use in-element'() {
+      let getElement = (id: string) => document.getElementById(id);
+
+      let Foo = defComponent(
+        '{{#in-element (getElement "in-element-test")}}before{{/in-element}}after',
+        { scope: { getElement } }
+      );
+      let Root = defComponent('[<div id="in-element-test" />][<Foo/>]', { scope: { Foo } });
+
+      this.renderComponent(Root, {
+        expect: '[<div id="in-element-test">before</div>][<!---->after]',
+      });
+    }
+  }
+);
diff --git a/packages/@ember/-internals/views/lib/mixins/view_support.ts b/packages/@ember/-internals/views/lib/mixins/view_support.ts
index 077ee789070..58b36a66ac3 100644
--- a/packages/@ember/-internals/views/lib/mixins/view_support.ts
+++ b/packages/@ember/-internals/views/lib/mixins/view_support.ts
@@ -7,6 +7,7 @@ import { matches } from '../system/utils';
 import type { View } from '@ember/-internals/glimmer/lib/renderer';
 import type { SimpleElement } from '@simple-dom/interface';
 import type CoreView from '../views/core_view';
+import type Component from '@ember/component';
 
 function K(this: unknown) {
   return this;
@@ -195,7 +196,7 @@ const ViewMixin = Mixin.create({
    @return {Ember.View} receiver
    @private
    */
-  appendTo(selector: string | Element | SimpleElement) {
+  appendTo(this: Component, selector: string | Element | SimpleElement) {
     let target;
 
     if (hasDOM) {
diff --git a/packages/ember-template-compiler/lib/plugins/assert-against-attrs.ts b/packages/ember-template-compiler/lib/plugins/assert-against-attrs.ts
index f2984a8c3ae..481e1a6839f 100644
--- a/packages/ember-template-compiler/lib/plugins/assert-against-attrs.ts
+++ b/packages/ember-template-compiler/lib/plugins/assert-against-attrs.ts
@@ -2,6 +2,7 @@ import { assert, deprecate } from '@ember/debug';
 import type { AST, ASTPlugin } from '@glimmer/syntax';
 import calculateLocationDisplay from '../system/calculate-location-display';
 import type { EmberASTPluginEnvironment } from '../types';
+import { trackLocals } from './utils';
 
 /**
  @module ember
@@ -23,48 +24,16 @@ import type { EmberASTPluginEnvironment } from '../types';
 export default function assertAgainstAttrs(env: EmberASTPluginEnvironment): ASTPlugin {
   let { builders: b } = env.syntax;
   let moduleName = env.meta?.moduleName;
-
-  let stack: string[][] = [[]];
-
-  function updateBlockParamsStack(blockParams: string[]) {
-    let parent = stack[stack.length - 1];
-    assert('has parent', parent);
-    stack.push(parent.concat(blockParams));
-  }
+  let { hasLocal, visitor } = trackLocals(env);
 
   return {
     name: 'assert-against-attrs',
 
     visitor: {
-      Template: {
-        enter(node: AST.Template) {
-          updateBlockParamsStack(node.blockParams);
-        },
-        exit() {
-          stack.pop();
-        },
-      },
-
-      Block: {
-        enter(node: AST.Block) {
-          updateBlockParamsStack(node.blockParams);
-        },
-        exit() {
-          stack.pop();
-        },
-      },
-
-      ElementNode: {
-        enter(node: AST.ElementNode) {
-          updateBlockParamsStack(node.blockParams);
-        },
-        exit() {
-          stack.pop();
-        },
-      },
+      ...visitor,
 
       PathExpression(node: AST.PathExpression): AST.Node | void {
-        if (isAttrs(node, stack[stack.length - 1]!)) {
+        if (isAttrs(node, hasLocal)) {
           assert(
             `Using {{attrs}} to reference named arguments is not supported. {{${
               node.original
@@ -106,12 +75,8 @@ export default function assertAgainstAttrs(env: EmberASTPluginEnvironment): ASTP
   };
 }
 
-function isAttrs(node: AST.PathExpression, symbols: string[]) {
-  return (
-    node.head.type === 'VarHead' &&
-    node.head.name === 'attrs' &&
-    symbols.indexOf(node.head.name) === -1
-  );
+function isAttrs(node: AST.PathExpression, hasLocal: (k: string) => boolean) {
+  return node.head.type === 'VarHead' && node.head.name === 'attrs' && !hasLocal(node.head.name);
 }
 
 function isThisDotAttrs(node: AST.PathExpression) {
diff --git a/packages/ember-template-compiler/lib/plugins/assert-against-named-outlets.ts b/packages/ember-template-compiler/lib/plugins/assert-against-named-outlets.ts
index c680f3b7259..da7931acfca 100644
--- a/packages/ember-template-compiler/lib/plugins/assert-against-named-outlets.ts
+++ b/packages/ember-template-compiler/lib/plugins/assert-against-named-outlets.ts
@@ -2,6 +2,7 @@ import { assert } from '@ember/debug';
 import type { AST, ASTPlugin } from '@glimmer/syntax';
 import calculateLocationDisplay from '../system/calculate-location-display';
 import type { EmberASTPluginEnvironment } from '../types';
+import { trackLocals } from './utils';
 
 /**
  @module ember
@@ -15,16 +16,19 @@ import type { EmberASTPluginEnvironment } from '../types';
 */
 export default function assertAgainstNamedOutlets(env: EmberASTPluginEnvironment): ASTPlugin {
   let moduleName = env.meta?.moduleName;
+  let { hasLocal, visitor } = trackLocals(env);
 
   return {
     name: 'assert-against-named-outlets',
 
     visitor: {
+      ...visitor,
       MustacheStatement(node: AST.MustacheStatement) {
         if (
           node.path.type === 'PathExpression' &&
           node.path.original === 'outlet' &&
-          node.params[0]
+          node.params[0] &&
+          !hasLocal('outlet')
         ) {
           let sourceInformation = calculateLocationDisplay(moduleName, node.loc);
           assert(
diff --git a/packages/ember-template-compiler/lib/plugins/assert-input-helper-without-block.ts b/packages/ember-template-compiler/lib/plugins/assert-input-helper-without-block.ts
index f16e76056c4..9164bd92286 100644
--- a/packages/ember-template-compiler/lib/plugins/assert-input-helper-without-block.ts
+++ b/packages/ember-template-compiler/lib/plugins/assert-input-helper-without-block.ts
@@ -2,16 +2,20 @@ import { assert } from '@ember/debug';
 import type { AST, ASTPlugin } from '@glimmer/syntax';
 import calculateLocationDisplay from '../system/calculate-location-display';
 import type { EmberASTPluginEnvironment } from '../types';
-import { isPath } from './utils';
+import { isPath, trackLocals } from './utils';
 
 export default function errorOnInputWithContent(env: EmberASTPluginEnvironment): ASTPlugin {
   let moduleName = env.meta?.moduleName;
+  let { hasLocal, visitor } = trackLocals(env);
 
   return {
     name: 'assert-input-helper-without-block',
 
     visitor: {
+      ...visitor,
       BlockStatement(node: AST.BlockStatement) {
+        if (hasLocal('input')) return;
+
         if (isPath(node.path) && node.path.original === 'input') {
           assert(assertMessage(moduleName, node));
         }
diff --git a/packages/ember-template-compiler/lib/plugins/transform-action-syntax.ts b/packages/ember-template-compiler/lib/plugins/transform-action-syntax.ts
index 2ee6fdd4bc4..d606378f2ec 100644
--- a/packages/ember-template-compiler/lib/plugins/transform-action-syntax.ts
+++ b/packages/ember-template-compiler/lib/plugins/transform-action-syntax.ts
@@ -1,6 +1,6 @@
 import type { AST, ASTPlugin } from '@glimmer/syntax';
 import type { Builders, EmberASTPluginEnvironment } from '../types';
-import { isPath } from './utils';
+import { isPath, trackLocals } from './utils';
 
 /**
  @module ember
@@ -27,27 +27,29 @@ import { isPath } from './utils';
   @class TransformActionSyntax
 */
 
-export default function transformActionSyntax({ syntax }: EmberASTPluginEnvironment): ASTPlugin {
-  let { builders: b } = syntax;
+export default function transformActionSyntax(env: EmberASTPluginEnvironment): ASTPlugin {
+  let { builders: b } = env.syntax;
+  let { hasLocal, visitor } = trackLocals(env);
 
   return {
     name: 'transform-action-syntax',
 
     visitor: {
+      ...visitor,
       ElementModifierStatement(node: AST.ElementModifierStatement) {
-        if (isAction(node)) {
+        if (isAction(node, hasLocal)) {
           insertThisAsFirstParam(node, b);
         }
       },
 
       MustacheStatement(node: AST.MustacheStatement) {
-        if (isAction(node)) {
+        if (isAction(node, hasLocal)) {
           insertThisAsFirstParam(node, b);
         }
       },
 
       SubExpression(node: AST.SubExpression) {
-        if (isAction(node)) {
+        if (isAction(node, hasLocal)) {
           insertThisAsFirstParam(node, b);
         }
       },
@@ -55,8 +57,11 @@ export default function transformActionSyntax({ syntax }: EmberASTPluginEnvironm
   };
 }
 
-function isAction(node: AST.ElementModifierStatement | AST.MustacheStatement | AST.SubExpression) {
-  return isPath(node.path) && node.path.original === 'action';
+function isAction(
+  node: AST.ElementModifierStatement | AST.MustacheStatement | AST.SubExpression,
+  hasLocal: (k: string) => boolean
+) {
+  return isPath(node.path) && node.path.original === 'action' && !hasLocal('action');
 }
 
 function insertThisAsFirstParam(
diff --git a/packages/ember-template-compiler/lib/plugins/transform-each-track-array.ts b/packages/ember-template-compiler/lib/plugins/transform-each-track-array.ts
index 269937a098c..6465a1c33c8 100644
--- a/packages/ember-template-compiler/lib/plugins/transform-each-track-array.ts
+++ b/packages/ember-template-compiler/lib/plugins/transform-each-track-array.ts
@@ -1,7 +1,7 @@
 import type { AST, ASTPlugin } from '@glimmer/syntax';
 import { assert } from '@ember/debug';
 import type { EmberASTPluginEnvironment } from '../types';
-import { isPath } from './utils';
+import { isPath, trackLocals } from './utils';
 
 /**
  @module ember
@@ -25,13 +25,15 @@ import { isPath } from './utils';
 */
 export default function transformEachTrackArray(env: EmberASTPluginEnvironment): ASTPlugin {
   let { builders: b } = env.syntax;
+  let { hasLocal, visitor } = trackLocals(env);
 
   return {
     name: 'transform-each-track-array',
 
     visitor: {
+      ...visitor,
       BlockStatement(node: AST.BlockStatement): AST.Node | void {
-        if (isPath(node.path) && node.path.original === 'each') {
+        if (isPath(node.path) && node.path.original === 'each' && !hasLocal('each')) {
           let firstParam = node.params[0];
           assert('has firstParam', firstParam);
 
diff --git a/packages/ember-template-compiler/lib/plugins/transform-resolutions.ts b/packages/ember-template-compiler/lib/plugins/transform-resolutions.ts
index ef4fce732bc..311a485d0e0 100644
--- a/packages/ember-template-compiler/lib/plugins/transform-resolutions.ts
+++ b/packages/ember-template-compiler/lib/plugins/transform-resolutions.ts
@@ -67,7 +67,7 @@ const TARGETS = Object.freeze(['helper', 'modifier']);
 export default function transformResolutions(env: EmberASTPluginEnvironment): ASTPlugin {
   let { builders: b } = env.syntax;
   let moduleName = env.meta?.moduleName;
-  let { hasLocal, node: tracker } = trackLocals();
+  let { hasLocal, node: tracker } = trackLocals(env);
   let seen: Set<AST.Node> | undefined;
 
   return {
diff --git a/packages/ember-template-compiler/lib/plugins/transform-wrap-mount-and-outlet.ts b/packages/ember-template-compiler/lib/plugins/transform-wrap-mount-and-outlet.ts
index 32482c8f404..9a9f45b4a47 100644
--- a/packages/ember-template-compiler/lib/plugins/transform-wrap-mount-and-outlet.ts
+++ b/packages/ember-template-compiler/lib/plugins/transform-wrap-mount-and-outlet.ts
@@ -37,15 +37,13 @@ import { isPath, trackLocals } from './utils';
 export default function transformWrapMountAndOutlet(env: EmberASTPluginEnvironment): ASTPlugin {
   let { builders: b } = env.syntax;
 
-  let { hasLocal, node } = trackLocals();
+  let { hasLocal, visitor } = trackLocals(env);
 
   return {
     name: 'transform-wrap-mount-and-outlet',
 
     visitor: {
-      Template: node,
-      ElementNode: node,
-      Block: node,
+      ...visitor,
 
       MustacheStatement(node: AST.MustacheStatement): AST.Node | void {
         if (
diff --git a/packages/ember-template-compiler/lib/plugins/utils.ts b/packages/ember-template-compiler/lib/plugins/utils.ts
index 112ed51df4b..99278ad7b8f 100644
--- a/packages/ember-template-compiler/lib/plugins/utils.ts
+++ b/packages/ember-template-compiler/lib/plugins/utils.ts
@@ -1,4 +1,5 @@
 import type { AST } from '@glimmer/syntax';
+import type { EmberASTPluginEnvironment } from '../types';
 
 export function isPath(node: AST.Node): node is AST.PathExpression {
   return node.type === 'PathExpression';
@@ -20,7 +21,11 @@ function getLocalName(node: string | AST.VarHead): string {
   }
 }
 
-export function trackLocals() {
+export function inScope(env: EmberASTPluginEnvironment, name: string): boolean {
+  return Boolean(env.lexicalScope?.(name));
+}
+
+export function trackLocals(env: EmberASTPluginEnvironment) {
   let locals = new Map();
 
   let node = {
@@ -49,7 +54,12 @@ export function trackLocals() {
   };
 
   return {
-    hasLocal: (key: string) => locals.has(key),
+    hasLocal: (key: string) => locals.has(key) || inScope(env, key),
     node,
+    visitor: {
+      Template: node,
+      ElementNode: node,
+      Block: node,
+    },
   };
 }
diff --git a/packages/ember-template-compiler/lib/types.ts b/packages/ember-template-compiler/lib/types.ts
index 6c068cb74c3..9844f780e72 100644
--- a/packages/ember-template-compiler/lib/types.ts
+++ b/packages/ember-template-compiler/lib/types.ts
@@ -3,6 +3,7 @@ import type {
   ASTPluginEnvironment,
   builders,
   PrecompileOptions,
+  PrecompileOptionsWithLexicalScope,
 } from '@glimmer/syntax';
 
 export type Builders = typeof builders;
@@ -19,10 +20,13 @@ interface Plugins {
   ast: PluginFunc[];
 }
 
+export type LexicalScope = NonNullable<PrecompileOptionsWithLexicalScope['lexicalScope']>;
+
 export interface EmberPrecompileOptions extends PrecompileOptions {
   isProduction?: boolean;
   moduleName?: string;
   plugins?: Plugins;
+  lexicalScope?: LexicalScope;
 }
 
 export type EmberASTPluginEnvironment = ASTPluginEnvironment & EmberPrecompileOptions;
diff --git a/packages/internal-test-helpers/index.ts b/packages/internal-test-helpers/index.ts
index 53966bcceb7..5ca23b4c0c9 100644
--- a/packages/internal-test-helpers/index.ts
+++ b/packages/internal-test-helpers/index.ts
@@ -14,6 +14,7 @@ export {
   ignoreDeprecation,
 } from './lib/ember-dev/deprecation';
 export {
+  defComponent,
   defineComponent,
   defineSimpleHelper,
   defineSimpleModifier,
@@ -24,7 +25,7 @@ export { equalsElement, classes, styles, regex } from './lib/matchers';
 export { runAppend, runDestroy, runTask, runTaskNext, runLoopSettled } from './lib/run';
 export { getContext, setContext, unsetContext } from './lib/test-context';
 
-export { default as AbstractTestCase } from './lib/test-cases/abstract';
+export { default as AbstractTestCase, AbstractStrictTestCase } from './lib/test-cases/abstract';
 export { default as AbstractApplicationTestCase } from './lib/test-cases/abstract-application';
 export { default as ApplicationTestCase } from './lib/test-cases/application';
 export { default as QueryParamTestCase } from './lib/test-cases/query-param';
@@ -32,6 +33,15 @@ export { default as RenderingTestCase } from './lib/test-cases/rendering';
 export { default as RouterNonApplicationTestCase } from './lib/test-cases/router-non-application';
 export { default as RouterTestCase } from './lib/test-cases/router';
 export { default as AutobootApplicationTestCase } from './lib/test-cases/autoboot-application';
+export { getAssert } from './lib/assert-helpers';
+export {
+  getElement,
+  assertElement,
+  assertHTML,
+  assertClassicComponentElement,
+  type ClassicComponentShape,
+} from './lib/element-helpers';
+export { clickElement } from './lib/event-helpers';
 
 export {
   default as TestResolver,
diff --git a/packages/internal-test-helpers/lib/assert-helpers.ts b/packages/internal-test-helpers/lib/assert-helpers.ts
new file mode 100644
index 00000000000..e86e6b9d20d
--- /dev/null
+++ b/packages/internal-test-helpers/lib/assert-helpers.ts
@@ -0,0 +1,16 @@
+import { getContext } from './test-context';
+
+export function getAssert(): QUnit['assert'] {
+  let context = getContext();
+
+  if (!context) {
+    throw new Error('Test context is not set up.');
+  }
+
+  let assert = context['assert'];
+  if (!assert) {
+    throw new Error('`assert` property on test context is not set up.');
+  }
+
+  return assert;
+}
diff --git a/packages/internal-test-helpers/lib/component-helper.ts b/packages/internal-test-helpers/lib/component-helper.ts
new file mode 100644
index 00000000000..e0313da0bed
--- /dev/null
+++ b/packages/internal-test-helpers/lib/component-helper.ts
@@ -0,0 +1,35 @@
+import { getContext } from './test-context';
+
+export function getComponent(): Record<string, unknown> {
+  let context = getContext();
+  if (!context) {
+    throw new Error('Test context is not set up.');
+  }
+
+  let component = context['component'];
+  if (component && typeof component === 'object') {
+    return component;
+  }
+
+  throw new Error('`component` property on test context is not set up.');
+}
+
+export function getOwner() {
+  let context = getContext();
+
+  if (!context) {
+    throw new Error('Test context is not set up.');
+  }
+
+  return context['owner'];
+}
+
+export function rerenderComponent() {
+  let component = getComponent();
+
+  if (typeof component['rerender'] !== 'function') {
+    throw new Error('Component does not support `rerender`.');
+  }
+
+  component['rerender']();
+}
diff --git a/packages/internal-test-helpers/lib/define-template-values.ts b/packages/internal-test-helpers/lib/define-template-values.ts
index a4a93af4c71..aff8f09d4b8 100644
--- a/packages/internal-test-helpers/lib/define-template-values.ts
+++ b/packages/internal-test-helpers/lib/define-template-values.ts
@@ -87,6 +87,26 @@ class FunctionalModifierManager implements ModifierManager<SimpleModifierState>
 const FUNCTIONAL_MODIFIER_MANAGER = new FunctionalModifierManager();
 const FUNCTIONAL_MODIFIER_MANAGER_FACTORY = () => FUNCTIONAL_MODIFIER_MANAGER;
 
+/**
+ * The signature of this test helper is closer to the signature of the
+ * `template()` function in `@ember/template-compiler`. It can express the same
+ * functionality as {@linkcode defineComponent}, but most tests still use
+ * `defineComponent`. Migrating tests from {@linkcode defineComponent} is
+ * straightforward, and there's no *semantic* reason not to do so.
+ */
+export function defComponent(
+  templateSource: string,
+  options?: {
+    component?: object | undefined;
+    scope?: Record<string, unknown> | undefined;
+  }
+) {
+  let definition = options?.component ?? templateOnlyComponent();
+  let scopeValues = options?.scope ?? null;
+
+  return defineComponent(scopeValues, templateSource, definition);
+}
+
 export function defineComponent(
   scopeValues: Record<string, unknown> | null,
   templateSource: string,
@@ -103,10 +123,12 @@ export function defineComponent(
   return definition;
 }
 
-export function defineSimpleHelper<T extends Function>(helperFn: T): T {
+export function defineSimpleHelper<T extends (...args: unknown[]) => unknown>(helperFn: T): T {
   return setHelperManager(FUNCTIONAL_HELPER_MANAGER_FACTORY, helperFn);
 }
 
-export function defineSimpleModifier<T extends Function>(modifierFn: T): T {
+export function defineSimpleModifier<T extends (element: Element, ...args: any[]) => any>(
+  modifierFn: T
+): T {
   return setModifierManager(FUNCTIONAL_MODIFIER_MANAGER_FACTORY, modifierFn);
 }
diff --git a/packages/internal-test-helpers/lib/element-helpers.ts b/packages/internal-test-helpers/lib/element-helpers.ts
index 5915f757043..280bafb4927 100644
--- a/packages/internal-test-helpers/lib/element-helpers.ts
+++ b/packages/internal-test-helpers/lib/element-helpers.ts
@@ -1,5 +1,12 @@
+import { getAssert } from './assert-helpers';
+import equalTokens from './equal-tokens';
+import { classes, equalsElement, regex } from './matchers';
 import { getContext } from './test-context';
 
+export const TextNode = window.Text;
+export const HTMLElement = window.HTMLElement;
+export const Comment = window.Comment;
+
 export function getElement(): HTMLElement {
   let context = getContext();
   if (!context) {
@@ -13,3 +20,102 @@ export function getElement(): HTMLElement {
 
   return element;
 }
+
+export function isMarker(node: unknown): node is Comment | typeof TextNode {
+  if (node instanceof Comment && node.textContent === '') {
+    return true;
+  }
+
+  if (node instanceof TextNode && node.textContent === '') {
+    return true;
+  }
+
+  return false;
+}
+
+export function assertHTML(html: string): void {
+  equalTokens(getElement(), html, `#qunit-fixture content should be: \`${html}\``);
+}
+
+export function assertElement(
+  node: ChildNode | null,
+  {
+    ElementType = HTMLElement,
+    tagName,
+    attrs = null,
+    content = null,
+  }: {
+    ElementType?: typeof HTMLElement;
+    tagName: string;
+    attrs?: Record<string, unknown> | null;
+    content?: unknown;
+  }
+) {
+  if (!node || !(node instanceof ElementType)) {
+    throw new Error(`Expecting a ${ElementType.name}, but got ${String(node)}`);
+  }
+
+  equalsElement(getAssert(), node, tagName, attrs, content);
+}
+
+export interface ClassicComponentShape {
+  ElementType?: typeof HTMLElement;
+  tagName: string;
+  attrs?: Record<string, unknown>;
+  content?: unknown;
+}
+
+export function assertClassicComponentElement(
+  node: ChildNode | null,
+  shape: ClassicComponentShape
+): void;
+export function assertClassicComponentElement(shape: ClassicComponentShape): void;
+export function assertClassicComponentElement(
+  ...args: [node: ChildNode | null, shape: ClassicComponentShape] | [shape: ClassicComponentShape]
+): void {
+  let node = args.length === 2 ? args[0] : getElement().firstChild;
+  let shape = args.length === 2 ? args[1] : args[0];
+
+  let attrs = Object.assign({
+    id: regex(/^ember\d*$/),
+    class: classes('ember-view'),
+    ...shape.attrs,
+  });
+
+  assertElement(node, {
+    ElementType: shape.ElementType ?? HTMLElement,
+    tagName: shape.tagName,
+    attrs,
+    content: shape.content,
+  });
+}
+
+export function assertSameNode(actual: ChildNode | undefined, expected: ChildNode | undefined) {
+  getAssert().strictEqual(actual, expected, 'DOM node stability');
+}
+
+export function assertInvariants(oldSnapshot: ChildNode[], newSnapshot?: ChildNode[]): void {
+  newSnapshot = newSnapshot || takeSnapshot();
+
+  getAssert().strictEqual(newSnapshot.length, oldSnapshot.length, 'Same number of nodes');
+
+  for (let i = 0; i < oldSnapshot.length; i++) {
+    assertSameNode(newSnapshot[i], oldSnapshot[i]);
+  }
+}
+
+export function takeSnapshot() {
+  let snapshot: ChildNode[] = [];
+
+  let node = getElement().firstChild;
+
+  while (node) {
+    if (!isMarker(node)) {
+      snapshot.push(node);
+    }
+
+    node = node.nextSibling;
+  }
+
+  return snapshot;
+}
diff --git a/packages/internal-test-helpers/lib/ember-dev/namespaces.ts b/packages/internal-test-helpers/lib/ember-dev/namespaces.ts
index 32d6c5d709e..f9e35979266 100644
--- a/packages/internal-test-helpers/lib/ember-dev/namespaces.ts
+++ b/packages/internal-test-helpers/lib/ember-dev/namespaces.ts
@@ -6,7 +6,7 @@ export function setupNamespacesCheck(hooks: NestedHooks): void {
     let { assert } = QUnit.config.current;
 
     if (NAMESPACES.length > 0) {
-      assert.ok(false, 'Should not have any NAMESPACES after tests');
+      assert.ok(false, `Should not have any NAMESPACES after tests (had: ${NAMESPACES.join(',')})`);
       run(() => {
         let namespaces = NAMESPACES.slice();
         for (let namespace of namespaces) {
diff --git a/packages/internal-test-helpers/lib/event-helpers.ts b/packages/internal-test-helpers/lib/event-helpers.ts
new file mode 100644
index 00000000000..765494c376f
--- /dev/null
+++ b/packages/internal-test-helpers/lib/event-helpers.ts
@@ -0,0 +1,15 @@
+import { getElement } from './element-helpers';
+import { runLoopSettled } from './run';
+
+export function clickElement(selector: HTMLElement | string) {
+  let element;
+  if (typeof selector === 'string') {
+    element = getElement().querySelector(selector) as HTMLElement | null;
+  } else {
+    element = selector;
+  }
+
+  let event = element!.click();
+
+  return runLoopSettled(event);
+}
diff --git a/packages/internal-test-helpers/lib/module-for.ts b/packages/internal-test-helpers/lib/module-for.ts
index e842bf28c0b..753847f61fa 100644
--- a/packages/internal-test-helpers/lib/module-for.ts
+++ b/packages/internal-test-helpers/lib/module-for.ts
@@ -1,19 +1,19 @@
 /* globals URLSearchParams */
-import { DEBUG } from '@glimmer/env';
 import { isEnabled } from '@ember/canary-features';
-import type { Mixin, Generator } from './apply-mixins';
+import { assertDestroyablesDestroyed, enableDestroyableTracking } from '@glimmer/destroyable';
+import { DEBUG } from '@glimmer/env';
+import { all } from 'rsvp';
+import type { Generator, Mixin } from './apply-mixins';
 import applyMixins from './apply-mixins';
 import getAllPropertyNames from './get-all-property-names';
+import type { AbstractStrictTestCase } from './test-cases/abstract';
 import { setContext, unsetContext } from './test-context';
-import { all } from 'rsvp';
-import { enableDestroyableTracking, assertDestroyablesDestroyed } from '@glimmer/destroyable';
-import type AbstractTestCase from './test-cases/abstract';
 
-interface TestClass<T extends AbstractTestCase> {
+interface TestClass<T extends AbstractStrictTestCase> {
   new (assert: QUnit['assert']): T;
 }
 
-interface TestContext<T extends AbstractTestCase> {
+interface TestContext<T extends AbstractStrictTestCase> {
   instance: T | null | undefined;
 }
 
@@ -28,7 +28,7 @@ const ASSERT_DESTROYABLES = (() => {
   return assertDestroyables !== null;
 })();
 
-export function moduleForDevelopment<T extends AbstractTestCase, M extends Generator>(
+export function moduleForDevelopment<T extends AbstractStrictTestCase, M extends Generator>(
   description: string,
   TestClass: TestClass<T>,
   ...mixins: Mixin<M>[]
@@ -39,7 +39,7 @@ export function moduleForDevelopment<T extends AbstractTestCase, M extends Gener
   }
 }
 
-export default function moduleFor<T extends AbstractTestCase, M extends Generator>(
+export default function moduleFor<T extends AbstractStrictTestCase, M extends Generator>(
   description: string,
   TestClass: TestClass<T>,
   ...mixins: Mixin<M>[]
@@ -57,7 +57,7 @@ function afterEachFinally() {
   }
 }
 
-export function setupTestClass<T extends AbstractTestCase, G extends Generator>(
+export function setupTestClass<T extends AbstractStrictTestCase, G extends Generator>(
   hooks: NestedHooks,
   TestClass: TestClass<T>,
   ...mixins: Mixin<G>[]
@@ -123,7 +123,7 @@ export function setupTestClass<T extends AbstractTestCase, G extends Generator>(
     });
   }
 
-  function generateTest<T extends AbstractTestCase>(name: keyof T & string) {
+  function generateTest<T extends AbstractStrictTestCase>(name: keyof T & string) {
     if (name.indexOf('@test ') === 0) {
       QUnit.test(name.slice(5), function (this: TestContext<T>, assert) {
         return (this.instance![name] as any)(assert);
diff --git a/packages/internal-test-helpers/lib/test-cases/abstract.ts b/packages/internal-test-helpers/lib/test-cases/abstract.ts
index b8babd323a9..dc4a6841375 100644
--- a/packages/internal-test-helpers/lib/test-cases/abstract.ts
+++ b/packages/internal-test-helpers/lib/test-cases/abstract.ts
@@ -3,10 +3,12 @@
 import NodeQuery from '../node-query';
 import equalInnerHTML from '../equal-inner-html';
 import equalTokens from '../equal-tokens';
-import { getElement } from '../element-helpers';
+import { assertInvariants, getElement, takeSnapshot } from '../element-helpers';
 import { equalsElement, regex, classes } from '../matchers';
-import { runLoopSettled } from '../run';
+import { runDestroy, runLoopSettled, runTask } from '../run';
 import { assert } from '@ember/debug';
+import { rerenderComponent } from '../component-helper';
+import { _resetRenderers } from '@ember/-internals/glimmer';
 
 const TextNode = window.Text;
 const HTMLElement = window.HTMLElement;
@@ -24,6 +26,51 @@ function isMarker(node: unknown): node is Comment | typeof TextNode {
   return false;
 }
 
+export abstract class AbstractStrictTestCase {
+  snapshot: ChildNode[] | null = null;
+  component: unknown;
+  readonly assert: QUnit['assert'];
+
+  rerender(): void {
+    rerenderComponent();
+  }
+
+  beforeEach?(_assert: QUnit['assert']) {}
+  teardown?(): unknown;
+
+  constructor(assert: QUnit['assert']) {
+    this.assert = assert;
+  }
+
+  afterEach() {
+    try {
+      runDestroy(this);
+    } finally {
+      _resetRenderers();
+    }
+  }
+
+  takeSnapshot() {
+    this.snapshot = takeSnapshot();
+  }
+
+  assertStableRerender() {
+    this.takeSnapshot();
+    runTask(() => rerenderComponent());
+    this.assertInvariants();
+  }
+
+  assertInvariants(): void;
+  assertInvariants(oldSnapshot: ChildNode[], newSnapshot: ChildNode[]): void;
+  assertInvariants(oldSnapshot?: ChildNode[], newSnapshot?: ChildNode[]): void {
+    if (!oldSnapshot) {
+      assert('expected an existing snapshot', this.snapshot);
+      oldSnapshot = this.snapshot;
+    }
+    assertInvariants(oldSnapshot, newSnapshot);
+  }
+}
+
 export default abstract class AbstractTestCase {
   snapshot: ChildNode[] | null;
   assert: QUnit['assert'];

From 3a6e06b775271f0bbae8c125cfcf0a8b8bfe0562 Mon Sep 17 00:00:00 2001
From: Yehuda Katz <wycats@gmail.com>
Date: Tue, 22 Oct 2024 07:42:40 -0700
Subject: [PATCH 2/2] Fix test types

---
 packages/internal-test-helpers/index.ts            |  6 +++++-
 packages/internal-test-helpers/lib/module-for.ts   | 14 +++++++-------
 .../lib/test-cases/abstract.ts                     |  2 ++
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/internal-test-helpers/index.ts b/packages/internal-test-helpers/index.ts
index 5ca23b4c0c9..82596370324 100644
--- a/packages/internal-test-helpers/index.ts
+++ b/packages/internal-test-helpers/index.ts
@@ -25,7 +25,11 @@ export { equalsElement, classes, styles, regex } from './lib/matchers';
 export { runAppend, runDestroy, runTask, runTaskNext, runLoopSettled } from './lib/run';
 export { getContext, setContext, unsetContext } from './lib/test-context';
 
-export { default as AbstractTestCase, AbstractStrictTestCase } from './lib/test-cases/abstract';
+export {
+  default as AbstractTestCase,
+  type TestCase,
+  AbstractStrictTestCase,
+} from './lib/test-cases/abstract';
 export { default as AbstractApplicationTestCase } from './lib/test-cases/abstract-application';
 export { default as ApplicationTestCase } from './lib/test-cases/application';
 export { default as QueryParamTestCase } from './lib/test-cases/query-param';
diff --git a/packages/internal-test-helpers/lib/module-for.ts b/packages/internal-test-helpers/lib/module-for.ts
index 753847f61fa..09ae55be41a 100644
--- a/packages/internal-test-helpers/lib/module-for.ts
+++ b/packages/internal-test-helpers/lib/module-for.ts
@@ -6,14 +6,14 @@ import { all } from 'rsvp';
 import type { Generator, Mixin } from './apply-mixins';
 import applyMixins from './apply-mixins';
 import getAllPropertyNames from './get-all-property-names';
-import type { AbstractStrictTestCase } from './test-cases/abstract';
+import type { TestCase } from './test-cases/abstract';
 import { setContext, unsetContext } from './test-context';
 
-interface TestClass<T extends AbstractStrictTestCase> {
+interface TestClass<T extends TestCase> {
   new (assert: QUnit['assert']): T;
 }
 
-interface TestContext<T extends AbstractStrictTestCase> {
+interface TestContext<T extends TestCase> {
   instance: T | null | undefined;
 }
 
@@ -28,7 +28,7 @@ const ASSERT_DESTROYABLES = (() => {
   return assertDestroyables !== null;
 })();
 
-export function moduleForDevelopment<T extends AbstractStrictTestCase, M extends Generator>(
+export function moduleForDevelopment<T extends TestCase, M extends Generator>(
   description: string,
   TestClass: TestClass<T>,
   ...mixins: Mixin<M>[]
@@ -39,7 +39,7 @@ export function moduleForDevelopment<T extends AbstractStrictTestCase, M extends
   }
 }
 
-export default function moduleFor<T extends AbstractStrictTestCase, M extends Generator>(
+export default function moduleFor<T extends TestCase, M extends Generator>(
   description: string,
   TestClass: TestClass<T>,
   ...mixins: Mixin<M>[]
@@ -57,7 +57,7 @@ function afterEachFinally() {
   }
 }
 
-export function setupTestClass<T extends AbstractStrictTestCase, G extends Generator>(
+export function setupTestClass<T extends TestCase, G extends Generator>(
   hooks: NestedHooks,
   TestClass: TestClass<T>,
   ...mixins: Mixin<G>[]
@@ -123,7 +123,7 @@ export function setupTestClass<T extends AbstractStrictTestCase, G extends Gener
     });
   }
 
-  function generateTest<T extends AbstractStrictTestCase>(name: keyof T & string) {
+  function generateTest<T extends TestCase>(name: keyof T & string) {
     if (name.indexOf('@test ') === 0) {
       QUnit.test(name.slice(5), function (this: TestContext<T>, assert) {
         return (this.instance![name] as any)(assert);
diff --git a/packages/internal-test-helpers/lib/test-cases/abstract.ts b/packages/internal-test-helpers/lib/test-cases/abstract.ts
index dc4a6841375..56b7959bea0 100644
--- a/packages/internal-test-helpers/lib/test-cases/abstract.ts
+++ b/packages/internal-test-helpers/lib/test-cases/abstract.ts
@@ -26,6 +26,8 @@ function isMarker(node: unknown): node is Comment | typeof TextNode {
   return false;
 }
 
+export type TestCase = AbstractStrictTestCase | AbstractTestCase;
+
 export abstract class AbstractStrictTestCase {
   snapshot: ChildNode[] | null = null;
   component: unknown;