Fixes Ember keyword shadowing

This commit consistently fixes the interaction between keywords and
lexical variables (JS or Handlebars) to match the specified behavior:
keywords are **always** superseded by in-scope lexical variables.

Ember keywords are implemented as AST transformations, and there were
two sources of bugs that made implementation of these keywords
inconsistent with the specified behavior:

1. In some cases, AST transforms applied to situations where the keyword
   in question was shadowed by a Handlebars block param. This means that
   the variable would be silently overridden by the AST transform.
2. In all cases, AST transforms applied when the keyword was shadowed by
   a lexical variable (i.e. in-scope JS variable) of the same name. This
   isn't supposed to happen, as lexical JS variables are supposed to
   have the same rules as variables bound via JS block params.

This commit has tests for many of these cases. Some additional tests are
forthcoming, mostly in cases where the transform in question wasn't
tested at all before this change.

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) {

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(

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));
         }

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,36 +27,41 @@ 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);
         }
       },
     },
   };
 }
 
-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(

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);
 

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 {

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 (

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,
+    },
   };
 }

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

@@ -23,6 +23,7 @@ export interface EmberPrecompileOptions extends PrecompileOptions {
   isProduction?: boolean;
   moduleName?: string;
   plugins?: Plugins;
+  lexicalScope?: (name: string) => boolean;
 }
 
 export type EmberASTPluginEnvironment = ASTPluginEnvironment & EmberPrecompileOptions;

packages/ember-template-compiler/tests/plugins/assert-against-attrs-test.js

@@ -1,5 +1,5 @@
 import TransformTestCase from '../utils/transform-test-case';
-import { moduleFor, RenderingTestCase } from 'internal-test-helpers';
+import { defineComponent, moduleFor, RenderingTestCase } from 'internal-test-helpers';
 
 moduleFor(
   'ember-template-compiler: assert against attrs',
@@ -64,6 +64,14 @@ moduleFor(
       this.assertComponentElement(this.firstChild, { content: 'foo' });
     }
 
+    ["@test it doesn't assert lexical scope values"]() {
+      let component = defineComponent({ attrs: 'just a string' }, `It's {{attrs}}`);
+      this.registerComponent('root', { ComponentClass: component });
+      this.render('<Root />');
+      this.assertHTML("It's just a string");
+      this.assertStableRerender();
+    }
+
     ["@test it doesn't assert component block params"]() {
       this.registerComponent('foo', {
         template: '{{yield "foo"}}',

packages/ember-template-compiler/tests/plugins/assert-array-test.js

@@ -0,0 +1,42 @@
+import { defineComponent, moduleFor, RenderingTestCase } from 'internal-test-helpers';
+
+moduleFor(
+  'ember-template-compiler: assert-array-test',
+  class extends RenderingTestCase {
+    ['@test block param `array` is not transformed']() {
+      // Intentionally double all of the values to verify that this
+      // version of the `array` function is used.
+      function customArray(...values) {
+        return values.map((value) => value * 2);
+      }
+
+      let Root = defineComponent(
+        { customArray },
+        `{{#let customArray as |array|}}<ul>{{#each (array 1 2 3) as |item|}}<li>{{item}}</li>{{/each}}</ul>{{/let}}`
+      );
+      this.registerComponent('root', { ComponentClass: Root });
+
+      this.render('<Root />');
+      this.assertHTML('<ul><li>2</li><li>4</li><li>6</li></ul>');
+      this.assertStableRerender();
+    }
+
+    ['@test lexical scope `array` is not transformed']() {
+      // Intentionally double all of the values to verify that this
+      // version of the `array` function is used.
+      function array(...values) {
+        return values.map((value) => value * 2);
+      }
+
+      let Root = defineComponent(
+        { array },
+        `<ul>{{#each (array 1 2 3) as |item|}}<li>{{item}}</li>{{/each}}</ul>`
+      );
+      this.registerComponent('root', { ComponentClass: Root });
+
+      this.render('<Root />');
+      this.assertHTML('<ul><li>2</li><li>4</li><li>6</li></ul>');
+      this.assertStableRerender();
+    }
+  }
+);

packages/ember-template-compiler/tests/plugins/assert-input-helper-without-block-test.js

@@ -1,9 +1,9 @@
+import { defineComponent, moduleFor, RenderingTestCase } from 'internal-test-helpers';
 import { compile } from '../../index';
-import { moduleFor, AbstractTestCase } from 'internal-test-helpers';
 
 moduleFor(
   'ember-template-compiler: assert-input-helper-without-block',
-  class extends AbstractTestCase {
+  class extends RenderingTestCase {
     ['@test Using {{#input}}{{/input}} is not valid']() {
       let expectedMessage = `The {{input}} helper cannot be used in block form. ('baz/foo-bar' @ L1:C0) `;
 
@@ -13,5 +13,30 @@ moduleFor(
         });
       }, expectedMessage);
     }
+
+    ['@test Block params are not asserted']() {
+      let shadowInput = defineComponent({}, `It's just {{yield}}`);
+
+      let Root = defineComponent(
+        { shadowInput },
+        `{{#let shadowInput as |input|}}{{#input}}an input{{/input}}{{/let}}`
+      );
+      this.registerComponent('root', { ComponentClass: Root });
+
+      this.render('<Root />');
+      this.assertHTML("It's just an input");
+      this.assertStableRerender();
+    }
+
+    ['@test Lexical scope values are not asserted']() {
+      let input = defineComponent({}, `It's just {{yield}}`);
+
+      let Root = defineComponent({ input }, `{{#input}}an input{{/input}}`);
+      this.registerComponent('root', { ComponentClass: Root });
+
+      this.render('<Root />');
+      this.assertHTML("It's just an input");
+      this.assertStableRerender();
+    }
   }
 );