Remove globalThis for keyword resolution in runtime template() (#21254)

* Remove globalThis usage for keyword resolution in runtime template()

Instead of storing keywords on globalThis (which collides when multiple
ember-source instances exist on a page), provide keyword values through
the template evaluator:

- For the eval form: wrap the compiled source in a function that receives
  keyword values as parameters while preserving access to the caller's
  lexical scope via direct eval
- For the scope form: merge keywords into the resolved scope (already
  worked, just needed the globalThis removal)
- For neither: inject keywords via new Function parameters

The auto-import-builtins AST plugin no longer rewrites keyword references
at runtime since lexicalScope now returns true for keywords, causing
hasLocal() to return true and skip the rewrite.

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

* Use WeakMap for compile state, fix lint issues

Replace module-level _compileState mutable with a WeakMap keyed on the
options object. This prevents state leaking between template() calls and
ensures entries are GC'd when the options object is no longer referenced.

Also removes unused EmberPrecompileOptions import and fixes prettier
formatting.

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

* Simplify: use auto-import-builtins rewrite with __keywords__ container

Instead of making lexicalScope return true for each keyword and tracking
which ones need injection, let auto-import-builtins rewrite keyword
references to __keywords__.on (pointing at our keywords object) and
inject a single __keywords__ container variable into the evaluation scope.

This eliminates the WeakMap side channel entirely and restores the
original buildEvaluator-before-compilation ordering. The only evaluator
change is injecting one extra scope variable (__keywords__) that holds
the keywords object.

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

* Rename __keywords__ to __ember_keywords__

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

* Rename KEYWORDS_VAR to RUNTIME_KEYWORDS_NAME

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

* Fix prettier formatting

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

---------

Co-authored-by: NullVoxPopuli <[email protected]>
Co-authored-by: Claude Opus 4.6 (1M context) <[email protected]>

Author: 3 people

package.json

@@ -293,6 +293,7 @@
       "@ember/template-compiler/lib/plugins/assert-against-named-outlets.js": "ember-source/@ember/template-compiler/lib/plugins/assert-against-named-outlets.js",
       "@ember/template-compiler/lib/plugins/assert-input-helper-without-block.js": "ember-source/@ember/template-compiler/lib/plugins/assert-input-helper-without-block.js",
       "@ember/template-compiler/lib/plugins/assert-reserved-named-arguments.js": "ember-source/@ember/template-compiler/lib/plugins/assert-reserved-named-arguments.js",
+      "@ember/template-compiler/lib/plugins/auto-import-builtins.js": "ember-source/@ember/template-compiler/lib/plugins/auto-import-builtins.js",
       "@ember/template-compiler/lib/plugins/index.js": "ember-source/@ember/template-compiler/lib/plugins/index.js",
       "@ember/template-compiler/lib/plugins/transform-action-syntax.js": "ember-source/@ember/template-compiler/lib/plugins/transform-action-syntax.js",
       "@ember/template-compiler/lib/plugins/transform-each-in-into-each.js": "ember-source/@ember/template-compiler/lib/plugins/transform-each-in-into-each.js",
@@ -384,4 +385,4 @@
     }
   },
   "packageManager": "[email protected]"
-}
+}

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

@@ -15,14 +15,18 @@ function malformedComponentLookup(string: string) {
   return string.indexOf('::') === -1 && string.indexOf(':') > -1;
 }
 
-const RUNTIME_KEYWORDS_NAME = '__ember_keywords__';
-export const keywords = {
+/**
+ * The variable name used to inject the keywords object into the
+ * template's evaluation scope. auto-import-builtins rewrites bare
+ * keyword references (e.g. `on`) to property accesses on this
+ * variable (e.g. `__ember_keywords__.on`).
+ */
+export const RUNTIME_KEYWORDS_NAME = '__ember_keywords__';
+
+export const keywords: Record<string, unknown> = {
   on,
 };
 
-// Not worth adding a type
-(globalThis as any)[RUNTIME_KEYWORDS_NAME] = keywords;
-
 function buildCompileOptions(_options: EmberPrecompileOptions): EmberPrecompileOptions {
   let moduleName = _options.moduleName;
 
@@ -45,18 +49,13 @@ function buildCompileOptions(_options: EmberPrecompileOptions): EmberPrecompileO
 
   options.meta ||= {};
   options.meta.emberRuntime ||= {
-    /**
-     * NOTE: when stepping through lexicalScope, or other callbacks here,
-     *       we first detect the keywords as "not in scope",
-     *       and that is what we want, so that we can import them.
-     */
     lookupKeyword(name: string): string {
       assert(
         `${name} is not a known keyword. Available keywords: ${Object.keys(keywords).join(', ')}`,
         name in keywords
       );
 
-      return `globalThis.${RUNTIME_KEYWORDS_NAME}.${name}`;
+      return `${RUNTIME_KEYWORDS_NAME}.${name}`;
     },
   };
 
@@ -65,6 +64,12 @@ function buildCompileOptions(_options: EmberPrecompileOptions): EmberPrecompileO
     const globalScopeEvaluator = (value: string) => new Function(`return ${value};`)();
 
     options.lexicalScope = (variable: string) => {
+      // The keywords container variable is always "in scope" —
+      // we inject it via the evaluator in template.ts.
+      if (variable === RUNTIME_KEYWORDS_NAME) {
+        return true;
+      }
+
       if (ALLOWED_GLOBALS.has(variable)) {
         return variable in globalThis;
       }
@@ -82,11 +87,18 @@ function buildCompileOptions(_options: EmberPrecompileOptions): EmberPrecompileO
   if ('scope' in options) {
     const scope = (options.scope as () => Record<string, unknown>)();
 
-    options.lexicalScope = (variable: string) => variable in scope || variable in keywords;
+    options.lexicalScope = (variable: string) =>
+      variable in scope || variable === RUNTIME_KEYWORDS_NAME;
 
     delete options.scope;
   }
 
+  // When neither eval nor scope is provided, the keywords container
+  // still needs to be visible to the compiler.
+  if (!options.lexicalScope && Object.keys(keywords).length > 0) {
+    options.lexicalScope = (variable: string) => variable === RUNTIME_KEYWORDS_NAME;
+  }
+
   if ('locals' in options && !options.locals) {
     // Glimmer's precompile options declare `locals` like:
     //    locals?: string[]

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

@@ -3,7 +3,7 @@ import { precompile as glimmerPrecompile } from '@glimmer/compiler';
 import type { SerializedTemplateWithLazyBlock } from '@glimmer/interfaces';
 import { setComponentTemplate } from '@glimmer/manager';
 import { templateFactory } from '@glimmer/opcode-compiler';
-import compileOptions, { keywords } from './compile-options';
+import compileOptions, { keywords, RUNTIME_KEYWORDS_NAME } from './compile-options';
 import type { EmberPrecompileOptions } from './types';
 
 type ComponentClass = abstract new (...args: any[]) => object;
@@ -265,19 +265,32 @@ const evaluator = (source: string) => {
  */
 function buildEvaluator(options: Partial<EmberPrecompileOptions>) {
   if (options.eval) {
-    return options.eval;
+    const userEval = options.eval;
+
+    // Wrap the compiled source in a function that receives the keywords
+    // container as a parameter. The user's eval evaluates this in the
+    // caller's scope, so local variables (like `handleClick`) are captured
+    // via closure, while `__keywords__` comes from the function parameter.
+    return (source: string) => {
+      let wrapperFn = userEval(`(function(${RUNTIME_KEYWORDS_NAME}){ return (${source}); })`) as (
+        ...args: unknown[]
+      ) => unknown;
+
+      return wrapperFn(keywords);
+    };
   } else {
-    /**
-     * This is ran before the template is compiled,
-     * so we cannot use any information gathered during template compilation.
-     */
     let scope = options.scope?.();
 
     if (!scope) {
+      if (Object.keys(keywords).length > 0) {
+        return (source: string) => {
+          return new Function(RUNTIME_KEYWORDS_NAME, `return (${source})`)(keywords);
+        };
+      }
       return evaluator;
     }
 
-    scope = Object.assign({}, keywords, scope);
+    scope = Object.assign({ [RUNTIME_KEYWORDS_NAME]: keywords }, scope);
 
     return (source: string) => {
       let hasThis = Object.prototype.hasOwnProperty.call(scope, 'this');