From 55377c5b6c32f5b2d789bfd08f69b9b874f2f18d Mon Sep 17 00:00:00 2001
From: Alexey Kulakov <uni_que@me.com>
Date: Fri, 9 Oct 2026 02:11:07 -0700
Subject: [PATCH] Give each template a function scope

ESLint's no-use-before-define reports a component that renders itself:

    const Foo = <template><Foo /></template>;
    class Bar extends Component { <template><Bar /></template> }

It does so even with `{ functions: false, classes: false, variables:
false }` (eslint-config-standard), because it only exempts references from
a separate execution context, and a template's block scope shares its
upper scope's. A template compiles to a closure (`scope: () => ({ Foo })`),
so give it a function scope instead.

On the TypeScript path, FunctionScope declares an implicit `arguments` and
scans the body for a "use strict" directive, which throws on a template's
body when the upper scope isn't strict (a script). A TemplateScope
subclass removes `arguments` and passes `isMethodDefinition` to skip the
scan; the eslint-scope path uses the base Scope, which declares nothing.
---
 src/parser/transforms.js                    | 33 ++++++-
 test-projects/gts/.eslintrc.cjs             |  5 +-
 test-projects/gts/src/use-before-define.gts | 15 ++++
 tests/parser.test.js                        | 95 +++++++++++++++++++++
 4 files changed, 141 insertions(+), 7 deletions(-)

diff --git a/src/parser/transforms.js b/src/parser/transforms.js
index 3f9ad82..e6815f2 100644
--- a/src/parser/transforms.js
+++ b/src/parser/transforms.js
@@ -15,6 +15,7 @@ const mathMLTagsSet = new Set(mathmlTagNames);
 const require = createRequire(import.meta.url);
 
 let TypescriptScope = null;
+let TypescriptTemplateScope = null;
 try {
   const parserPath = require.resolve('@typescript-eslint/parser');
   // eslint-disable-next-line n/no-unpublished-require
@@ -22,6 +23,26 @@ try {
     paths: [parserPath],
   });
   TypescriptScope = require(scopeManagerPath);
+  TypescriptTemplateScope = class TemplateScope extends TypescriptScope.FunctionScope {
+    constructor(scopeManager, upperScope, block) {
+      // `isMethodDefinition` makes it strict without scanning the body for a
+      // "use strict" directive, which throws on a template's body.
+      super(scopeManager, upperScope, block, true);
+      // A template has no `arguments`, unlike the function FunctionScope models.
+      const args = this.set.get('arguments');
+      if (args) {
+        this.set.delete('arguments');
+        this.variables.splice(this.variables.indexOf(args), 1);
+      }
+    }
+
+    // Never called for a template scope: only closing a scope during analysis
+    // calls it, and templates get their scopes after that. The base would
+    // throw on a template's `body`, so guard it anyway.
+    isValidResolution() {
+      return true;
+    }
+  };
 } catch {
   // not available
 }
@@ -92,11 +113,15 @@ function createBlockScope(node, path, scopeManager, isTypescript) {
     : new Scope(scopeManager, 'block', upperScope, node);
 }
 
-// Give each template a scope of its own. Otherwise typescript-eslint's
-// no-use-before-define treats a reference in `const Foo = <template>` as
-// running in Foo's initializer, though a template reads its scope lazily.
+// A template compiles to a closure (`scope: () => ({ Foo })`), so give it a
+// function scope: its references run in an execution context of their own,
+// and no-use-before-define accepts `<Foo />` in `const Foo = <template>`.
 function registerTemplateScope(node, path, scopeManager, isTypescript) {
-  createBlockScope(node, path, scopeManager, isTypescript);
+  const upperScope = findParentScope(scopeManager, path);
+  if (isTypescript) return new TypescriptTemplateScope(scopeManager, upperScope, node);
+  // `isMethodDefinition` as in TemplateScope. eslint-scope's base Scope
+  // declares no `arguments`.
+  return new Scope(scopeManager, 'function', upperScope, node, true);
 }
 
 function registerBlockParams(node, path, scopeManager, isTypescript) {
diff --git a/test-projects/gts/.eslintrc.cjs b/test-projects/gts/.eslintrc.cjs
index 4081596..c557591 100644
--- a/test-projects/gts/.eslintrc.cjs
+++ b/test-projects/gts/.eslintrc.cjs
@@ -40,11 +40,10 @@ module.exports = {
       extends: ['eslint:recommended', 'plugin:ember/recommended', 'plugin:ember/recommended-gjs'],
     },
     {
-      // ember-tooling/ember-eslint-parser#255. Core no-use-before-define still
-      // reports `<Tree />` inside Tree's own template, which is not fixed yet.
+      // ember-tooling/ember-eslint-parser#255. Core no-use-before-define is on
+      // for every file, so this checks both rules.
       files: ['src/use-before-define.gts'],
       rules: {
-        'no-use-before-define': 'off',
         '@typescript-eslint/no-use-before-define': 'error',
       },
     },
diff --git a/test-projects/gts/src/use-before-define.gts b/test-projects/gts/src/use-before-define.gts
index 530495e..c18455f 100644
--- a/test-projects/gts/src/use-before-define.gts
+++ b/test-projects/gts/src/use-before-define.gts
@@ -1,3 +1,5 @@
+import Component from '@glimmer/component';
+
 import type { TOC } from '@ember/component/template-only';
 
 interface TreeNode {
@@ -14,4 +16,17 @@ const Tree: TOC<{ Args: { node: TreeNode } }> = <template>
   {{/if}}
 </template>;
 
+export class Branch extends Component<{ Args: { node: TreeNode } }> {
+  get label() {
+    return this.args.node.label;
+  }
+
+  <template>
+    <span>{{this.label}}</span>
+    {{#if @node.child}}
+      <Branch @node={{@node.child}} />
+    {{/if}}
+  </template>
+}
+
 export default Tree;
diff --git a/tests/parser.test.js b/tests/parser.test.js
index 26d2b9a..76db81e 100644
--- a/tests/parser.test.js
+++ b/tests/parser.test.js
@@ -2641,6 +2641,101 @@ export const NotFound = <template>
       ]);
     }
   );
+
+  describe('template scope', () => {
+    const parserVariants = [
+      { filename: 'example.gjs', useBabel: false },
+      { filename: 'example.gts', useBabel: false },
+      { filename: 'example.gjs', useBabel: true },
+    ];
+
+    function lint({ filename, useBabel }, code, rules) {
+      const linter = new Linter();
+      linter.defineParser('ember-eslint-parser', {
+        parseForESLint: (source, options) => parseForESLint(source, { ...options, useBabel }),
+      });
+      return linter
+        .verify(
+          code,
+          {
+            parser: 'ember-eslint-parser',
+            parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+            rules,
+          },
+          { filename }
+        )
+        .map(({ line, message }) => ({ line, message }));
+    }
+
+    // A template compiles to a closure, so ESLint's no-use-before-define
+    // treats its references as running in an execution context of their own.
+    it.each(parserVariants)(
+      'lets a template reference its own component ($filename, useBabel: $useBabel)',
+      (variant) => {
+        const code = [
+          "import Component from '@glimmer/component';",
+          'const Foo = <template><Foo /></template>;',
+          'class Bar extends Component { <template><Bar /></template> }',
+          'class Baz { static T = <template><Baz /></template>; }',
+          'export const render = () => <template>{{later}}</template>;',
+          'export default <template>{{later}}</template>;',
+          'let later = 1;',
+          'export { Foo, Bar, Baz };',
+        ].join('\n');
+        const usedBeforeDefined = { message: "'later' was used before it was defined." };
+
+        expect(lint(variant, code, { 'no-use-before-define': 'error' })).toEqual([
+          { line: 5, ...usedBeforeDefined },
+          { line: 6, ...usedBeforeDefined },
+        ]);
+        // eslint-config-standard's options
+        const standard = { functions: false, classes: false, variables: false };
+        expect(lint(variant, code, { 'no-use-before-define': ['error', standard] })).toEqual([]);
+      }
+    );
+
+    it.each(parserVariants)(
+      'does not declare `arguments` ($filename, useBabel: $useBabel)',
+      (variant) => {
+        expect(
+          lint(variant, 'export default <template>{{arguments}}</template>;', {
+            'no-undef': 'error',
+          })
+        ).toEqual([{ line: 1, message: "'arguments' is not defined." }]);
+      }
+    );
+
+    it.each(parserVariants)(
+      'is a strict function scope in modules and scripts ($filename, useBabel: $useBabel)',
+      ({ filename, useBabel }) => {
+        for (const sourceType of ['module', 'script']) {
+          const result = parseForESLint(
+            'const Foo = <template>{{#let 1 as |x|}}{{x}}{{/let}}</template>;',
+            {
+              filePath: filename,
+              useBabel,
+              sourceType,
+              comment: true,
+              loc: true,
+              range: true,
+              tokens: true,
+            }
+          );
+          const template = result.ast.body[0].declarations[0].init;
+          const scope = result.scopeManager.acquire(template, true);
+
+          expect(scope.type).toBe('function');
+          expect(scope.variableScope).toBe(scope);
+          expect(scope.isStrict).toBe(true);
+          expect(scope.variables.map((v) => v.name)).toEqual([]);
+          expect(scope.set.has('arguments')).toBe(false);
+          expect(scope.childScopes.map((s) => [s.type, s.variableScope === scope])).toEqual([
+            ['block', true],
+          ]);
+        }
+      }
+    );
+  });
 });
 
 describe('replaceExtensions', () => {