@ethlete/eslint-plugin 1.0.0-next.15 → 1.0.0-next.17

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## 1.0.0-next.17
+
+### Minor Changes
+
+- [#3041](https://github.com/ethlete-io/ethdk/pull/3041) [`ae18442`](https://github.com/ethlete-io/ethdk/commit/ae18442bcbeaf0bc1b023812f4e507169db56c88) Thanks [@github-actions](https://github.com/apps/github-actions)! - New rule `no-impure-top-level-provider`: bans destructuring a factory call at module scope, and - with
+  `{ requirePureAnnotation: true }`, for publishable library source - requires `/* @__PURE__ */` on
+  module-scope calls. Both shapes are undroppable, so one of them puts everything the call touches into
+  every consumer's bundle. Fixable.
+
+## 1.0.0-next.16
+
+### Minor Changes
+
+- [#3037](https://github.com/ethlete-io/ethdk/pull/3037) [`19469c2`](https://github.com/ethlete-io/ethdk/commit/19469c21903217e05b974ac69773f222e63ae4e1) Thanks [@github-actions](https://github.com/apps/github-actions)! - Add `no-effect-cleanup-return`: flags a cleanup function returned from `effect()` /
+  `afterRenderEffect()`, which Angular ignores - so the teardown silently never runs. Auto-fixes the
+  mechanical case to the `onCleanup` parameter; otherwise points at `inject(DestroyRef).onDestroy()`.
+
+- [#3037](https://github.com/ethlete-io/ethdk/pull/3037) [`3151b7a`](https://github.com/ethlete-io/ethdk/commit/3151b7a253d14e38e22e20d67bf0191f141c144e) Thanks [@github-actions](https://github.com/apps/github-actions)! - Add `ethlete/no-template-literal-before-inline-template`, and restructure the files it flagged.
+
+  The Angular VS Code extension decides **client-side** whether the cursor sits inside an inline `template:` before it forwards completion, hover, go-to-definition or signature-help to the language server. That check (`isNotTypescriptOrSupportedDecoratorField`) walks the file with a bare `ts.createScanner()` loop, which cannot re-scan `}` as `TemplateMiddle`/`TemplateTail` - that needs the parser's `reScanTemplateToken()`. So the first template literal containing a `${…}` substitution desynchronises both the token stream and the brace counter, the scanner never recognises `template` `:` again, and every template request below it is dropped. The language server answers those requests correctly; the editor just never asks, so the template silently has no IntelliSense at all.
+
+  The new rule reproduces that scanner verbatim, so it reports exactly the templates the extension would abandon - no heuristic. Twenty inline templates across `components`, `cdk` and the playground were affected, all of them behind a fixture or helper that happened to use an interpolated template literal. Story fixtures moved into sibling `*-storybook.data.ts` files; spec fixtures and in-class helpers that must stay above their component (because a later `@Component` references the class in `imports`) were rewritten without the interpolation.
+
+  No public API changed - the `components` and `cdk` bumps are story/spec restructuring plus moving `signalVisibilityChangeClasses` below `RichFilterHostComponent` in the same module.
+
 ## 1.0.0-next.15
 
 ### Minor Changes
@@ -12,13 +37,13 @@
 
 - [`423b30b`](https://github.com/ethlete-io/ethdk/commit/423b30ba4f368d7cee8c464ebd89b5df20d3934c) Thanks [@TomTomB](https://github.com/TomTomB)! - The `static` class member ban now excepts `ngTemplateContextGuard`, which Angular's template type checker requires to be static.
 
-- [`7ca77d4`](https://github.com/ethlete-io/ethdk/commit/7ca77d4a9e1dd3abad7237227c62643159719b74) Thanks [@TomTomB](https://github.com/TomTomB)! - `no-trivial-return-type`: self-referencing (recursive) functions keep their return type annotation — TypeScript cannot infer a return type that depends on itself (TS7023), so the fixer no longer strips it there.
+- [`7ca77d4`](https://github.com/ethlete-io/ethdk/commit/7ca77d4a9e1dd3abad7237227c62643159719b74) Thanks [@TomTomB](https://github.com/TomTomB)! - `no-trivial-return-type`: self-referencing (recursive) functions keep their return type annotation - TypeScript cannot infer a return type that depends on itself (TS7023), so the fixer no longer strips it there.
 
 ## 1.0.0-next.13
 
 ### Minor Changes
 
-- [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`5a43c83`](https://github.com/ethlete-io/ethdk/commit/5a43c8347a98a815562d1bb0f59bc0db1d765262) Thanks [@github-actions](https://github.com/apps/github-actions)! - Recommended config: the `@Injectable` ban now also flags Angular 22's `@Service` decorator — use `createProvider` / `createRootProvider` from `@ethlete/core` instead.
+- [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`5a43c83`](https://github.com/ethlete-io/ethdk/commit/5a43c8347a98a815562d1bb0f59bc0db1d765262) Thanks [@github-actions](https://github.com/apps/github-actions)! - Recommended config: the `@Injectable` ban now also flags Angular 22's `@Service` decorator - use `createProvider` / `createRootProvider` from `@ethlete/core` instead.
 
 - [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`9be3738`](https://github.com/ethlete-io/ethdk/commit/9be3738e18ef1837841c79131127fa42406a3e92) Thanks [@github-actions](https://github.com/apps/github-actions)! - New template rule `ethlete/prefer-static-boolean-properties` (in `recommendedTemplate` as `warn`): flags property bindings of static booleans like `[isReadonly]="true"` and suggests the static-attribute form (`isReadonly` / `isReadonly="false"`). Suggestion-only, since the rewrite is only safe for inputs with a `booleanAttribute` transform.
 
@@ -27,8 +52,8 @@
 ### Minor Changes
 
 - [`44adcac`](https://github.com/ethlete-io/ethdk/commit/44adcac94d7e0f56742e02901221c6e04da7df47) Thanks [@TomTomB](https://github.com/TomTomB)! - Add two component I/O naming rules:
-  - `no-native-html-input-name` (error) — flags an `input()`/`model()` named after a global HTML attribute (`title`, `id`, `hidden`, `role`, `tabindex`, …), which collides with the attribute the host element carries natively.
-  - `prefer-present-tense-output` (warn) — nudges `output()` names toward the present tense like native DOM events (`playerSelect`, not `playerSelected`).
+  - `no-native-html-input-name` (error) - flags an `input()`/`model()` named after a global HTML attribute (`title`, `id`, `hidden`, `role`, `tabindex`, …), which collides with the attribute the host element carries natively.
+  - `prefer-present-tense-output` (warn) - nudges `output()` names toward the present tense like native DOM events (`playerSelect`, not `playerSelected`).
 
   The `on`-prefix case is already covered by `@angular-eslint/no-output-on-prefix`, so no rule is added for it.
 
@@ -36,7 +61,7 @@
 
 ### Major Changes
 
-- [#3016](https://github.com/ethlete-io/ethdk/pull/3016) [`396bdfb`](https://github.com/ethlete-io/ethdk/commit/396bdfb50dc51d2de0156dd7b7cc0ae3b21dfe9b) Thanks [@github-actions](https://github.com/apps/github-actions)! - Remove the `no-public-property` rule. It contradicted `template-member-accessibility`, which requires an explicit `public` modifier on surface members — the explicit-public style is the intended one. The rule was never part of the `recommended` config; if you enabled `ethlete/no-public-property` manually, drop it from your ESLint config.
+- [#3016](https://github.com/ethlete-io/ethdk/pull/3016) [`396bdfb`](https://github.com/ethlete-io/ethdk/commit/396bdfb50dc51d2de0156dd7b7cc0ae3b21dfe9b) Thanks [@github-actions](https://github.com/apps/github-actions)! - Remove the `no-public-property` rule. It contradicted `template-member-accessibility`, which requires an explicit `public` modifier on surface members - the explicit-public style is the intended one. The rule was never part of the `recommended` config; if you enabled `ethlete/no-public-property` manually, drop it from your ESLint config.
 
 ## 0.1.0-next.10
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@ethlete/eslint-plugin",
-  "version": "1.0.0-next.15",
+  "version": "1.0.0-next.17",
   "license": "MIT",
   "type": "commonjs",
   "main": "./src/index.js",
   "peerDependencies": {
     "@angular-eslint/eslint-plugin-template": ">=21.0.0",
-    "@angular/core": "22.0.5",
+    "@angular/core": "22.0.7",
     "@typescript-eslint/eslint-plugin": ">=8.0.0",
     "eslint": ">=9.0.0",
     "tslib": "2.8.1",

package/src/configs/recommended.js

@@ -170,12 +170,12 @@ const recommendedTs = {
         message:
           'No legacy Angular lifecycle hooks. Use afterNextRender, inject(DestroyRef).onDestroy, or constructor-based effects instead.',
       },
-      // No @Injectable / @Service — use createRootProvider / createProvider from @ethlete/core
+      // No @Injectable / @Service — use defineRootProvider / defineProvider from @ethlete/core
       {
         selector:
           'Decorator[expression.callee.name=/^(Injectable|Service)$/], Decorator[expression.name=/^(Injectable|Service)$/]',
         message:
-          'No @Injectable / @Service services. Use createRootProvider / createProvider from @ethlete/core instead.',
+          'No @Injectable / @Service services. Use defineRootProvider / defineProvider from @ethlete/core instead.',
       },
       // No route guards — handle access control inside the component itself
       {
@@ -253,6 +253,9 @@ const recommendedTs = {
     // No .subscribe() inside effect() or computed()
     'ethlete/no-rxjs-in-effect': 'error',
 
+    // No cleanup function returned from effect() — Angular ignores it, so it never runs
+    'ethlete/no-effect-cleanup-return': 'error',
+
     // No readonly on reactive class properties (signals, inputs, computed, inject, etc.)
     'ethlete/no-readonly-signal': 'error',
 
@@ -292,6 +295,8 @@ const recommendedTs = {
     // No empty blank lines between import declarations
     'ethlete/no-empty-newlines-between-imports': 'error',
 
+    'ethlete/no-impure-top-level-provider': 'error',
+
     // No legacy Angular decorators — use signal-based APIs (input, output, viewChild, etc.)
     // and host: {} bindings (instead of @HostBinding / @HostListener)
     'ethlete/no-legacy-angular-decorators': 'error',
@@ -343,6 +348,10 @@ const recommendedTs = {
     // Remove standalone metadata — standalone is implicit and should not be declared
     'ethlete/no-standalone-flag': 'error',
 
+    // No interpolated template literal above an inline template — it silently kills
+    // Angular language service completions for the rest of the file
+    'ethlete/no-template-literal-before-inline-template': 'error',
+
     // ── Angular outputs ─────────────────────────────────────────────────────
 
     // No on-prefixed outputs (onSelectDate → selectDate)

package/src/index.js

@@ -5,6 +5,7 @@ const noInjectChain = require('./rules/no-inject-chain');
 const noTrivialReturnType = require('./rules/no-trivial-return-type');
 const noSubscribeInPipe = require('./rules/no-subscribe-in-pipe');
 const noRxjsInEffect = require('./rules/no-rxjs-in-effect');
+const noEffectCleanupReturn = require('./rules/no-effect-cleanup-return');
 const noReadonlySignal = require('./rules/no-readonly-signal');
 const noScreamingCaseLocal = require('./rules/no-screaming-case-local');
 const preferRxjsTimer = require('./rules/prefer-rxjs-timer');
@@ -40,6 +41,7 @@ const noUnusedClassMember = require('./rules/no-unused-class-member');
 const noDomQuery = require('./rules/no-dom-query');
 const noLeadingUnderscoreClassMember = require('./rules/no-leading-underscore-class-member');
 const noEmptyAngularMetadataArrays = require('./rules/no-empty-angular-metadata-arrays');
+const noTemplateLiteralBeforeInlineTemplate = require('./rules/no-template-literal-before-inline-template');
 const noStandaloneFlag = require('./rules/no-standalone-flag');
 const noEmptyNewlinesBetweenImports = require('./rules/no-empty-newlines-between-imports');
 const angularDecoratorPropertyOrder = require('./rules/angular-decorator-property-order');
@@ -51,6 +53,7 @@ const noTypedInjectedElementRef = require('./rules/no-typed-injected-element-ref
 const noNativeHtmlInputName = require('./rules/no-native-html-input-name');
 const preferPresentTenseOutput = require('./rules/prefer-present-tense-output');
 const preferStaticBooleanProperties = require('./rules/prefer-static-boolean-properties');
+const noImpureTopLevelProvider = require('./rules/no-impure-top-level-provider');
 const { recommendedTs, recommendedTemplate, recommendedSpec } = require('./configs/recommended');
 
 /** @type {import('eslint').ESLint.Plugin} */
@@ -64,6 +67,7 @@ const plugin = {
     'no-trivial-return-type': noTrivialReturnType,
     'no-subscribe-in-pipe': noSubscribeInPipe,
     'no-rxjs-in-effect': noRxjsInEffect,
+    'no-effect-cleanup-return': noEffectCleanupReturn,
     'no-readonly-signal': noReadonlySignal,
     'no-screaming-case-local': noScreamingCaseLocal,
     'prefer-rxjs-timer': preferRxjsTimer,
@@ -99,6 +103,7 @@ const plugin = {
     'no-dom-query': noDomQuery,
     'no-leading-underscore-class-member': noLeadingUnderscoreClassMember,
     'no-empty-angular-metadata-arrays': noEmptyAngularMetadataArrays,
+    'no-template-literal-before-inline-template': noTemplateLiteralBeforeInlineTemplate,
     'no-standalone-flag': noStandaloneFlag,
     'no-empty-newlines-between-imports': noEmptyNewlinesBetweenImports,
     'angular-decorator-property-order': angularDecoratorPropertyOrder,
@@ -110,6 +115,7 @@ const plugin = {
     'no-native-html-input-name': noNativeHtmlInputName,
     'prefer-present-tense-output': preferPresentTenseOutput,
     'prefer-static-boolean-properties': preferStaticBooleanProperties,
+    'no-impure-top-level-provider': noImpureTopLevelProvider,
   },
 };
 

package/src/rules/no-effect-cleanup-return.js

@@ -0,0 +1,179 @@
+// @ts-check
+'use strict';
+
+/**
+ * Disallows returning a cleanup function from an `effect()` callback.
+ *
+ * Angular's `effect()` ignores whatever the callback returns — the React/Svelte idiom of returning a
+ * teardown function silently does nothing, so the "cleanup" never runs. The bug is invisible: the code
+ * reads as if it unregisters, and only the leak shows up later.
+ *
+ * BAD:
+ *   effect(() => {
+ *     this.group?.registerItem(this);
+ *
+ *     return () => this.group?.unregisterItem(this); // ❌ never called
+ *   });
+ *
+ * GOOD — teardown tied to each re-run (the registered key is reactive):
+ *   effect((onCleanup) => {
+ *     const id = this.ref().id;
+ *     this.stack?.registerItem(id);
+ *
+ *     onCleanup(() => this.stack?.unregisterItem(id));
+ *   });
+ *
+ * GOOD — teardown tied to the lifetime, for a registration that never changes:
+ *   this.group?.registerItem(this);
+ *   inject(DestroyRef).onDestroy(() => this.group?.unregisterItem(this));
+ */
+
+/** Calls whose first argument is a body that ignores its return value. */
+const EFFECT_CALLEES = new Set(['effect', 'afterRenderEffect']);
+
+/**
+ * @param {any} node
+ * @returns {boolean}
+ */
+const isFunctionExpression = (node) =>
+  !!node && (node.type === 'ArrowFunctionExpression' || node.type === 'FunctionExpression');
+
+/**
+ * @param {any} node
+ * @returns {boolean}
+ */
+const isFunction = (node) => isFunctionExpression(node) || node?.type === 'FunctionDeclaration';
+
+/**
+ * Every `return` the given function owns — returns inside nested functions belong to those, so the walk
+ * stops at each function boundary.
+ * @param {any} fn
+ * @returns {any[]}
+ */
+const ownReturnStatements = (fn) => {
+  /** @type {any[]} */
+  const returns = [];
+
+  /** @param {any} node */
+  const visit = (node) => {
+    if (!node || typeof node.type !== 'string') {
+      return;
+    }
+
+    if (node.type === 'ReturnStatement') {
+      returns.push(node);
+
+      return;
+    }
+
+    if (isFunction(node)) {
+      return;
+    }
+
+    for (const key of Object.keys(node)) {
+      if (key === 'parent') {
+        continue;
+      }
+
+      const value = node[key];
+
+      if (Array.isArray(value)) {
+        value.forEach(visit);
+      } else if (value && typeof value.type === 'string') {
+        visit(value);
+      }
+    }
+  };
+
+  fn.body.body.forEach(visit);
+
+  return returns;
+};
+
+/** @type {import('eslint').Rule.RuleModule} */
+const noEffectCleanupReturn = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow returning a cleanup function from an effect() callback — Angular ignores it.',
+      recommended: true,
+    },
+    messages: {
+      returnedCleanup:
+        '{{callee}}() ignores the value its callback returns, so this cleanup function never runs. ' +
+        'Register it via the onCleanup parameter — {{callee}}((onCleanup) => { …; onCleanup(() => …) }) — or, ' +
+        'when the teardown belongs to the lifetime rather than to each re-run, drop the effect and use ' +
+        'inject(DestroyRef).onDestroy(() => …).',
+    },
+    schema: [],
+    fixable: 'code',
+  },
+  create(context) {
+    const sourceCode = context.sourceCode;
+
+    return {
+      CallExpression(node) {
+        const { callee } = node;
+
+        if (callee.type !== 'Identifier' || !EFFECT_CALLEES.has(callee.name)) {
+          return;
+        }
+
+        const callback = /** @type {any} */ (node.arguments[0]);
+
+        if (!isFunctionExpression(callback)) {
+          return;
+        }
+
+        // effect(() => () => cleanup()) — the whole body *is* the ignored cleanup
+        if (isFunctionExpression(callback.body)) {
+          context.report({
+            node: callback.body,
+            messageId: 'returnedCleanup',
+            data: { callee: callee.name },
+          });
+
+          return;
+        }
+
+        if (callback.body.type !== 'BlockStatement') {
+          return;
+        }
+
+        const returns = ownReturnStatements(callback);
+        const cleanupReturns = returns.filter((statement) => isFunctionExpression(statement.argument));
+
+        if (cleanupReturns.length === 0) {
+          return;
+        }
+
+        // Only the mechanical shape is auto-fixed: a zero-parameter callback whose single `return` hands
+        // back a function literal. With an existing parameter, an early `return`, or a returned reference,
+        // the intent needs a human.
+        // The parameter list's `(` — the first one before the body, so this works for `() => {}` and
+        // `function () {}` alike (their first token differs).
+        const openParen = sourceCode
+          .getTokens(callback)
+          .find((token) => token.value === '(' && token.range[1] <= callback.body.range[0]);
+        const fixable = callback.params.length === 0 && returns.length === 1 && cleanupReturns.length === 1;
+
+        for (const statement of cleanupReturns) {
+          context.report({
+            node: statement.argument,
+            messageId: 'returnedCleanup',
+            data: { callee: callee.name },
+            fix:
+              fixable && openParen
+                ? (fixer) => [
+                    fixer.insertTextAfter(openParen, 'onCleanup'),
+                    fixer.replaceText(statement, `onCleanup(${sourceCode.getText(statement.argument)});`),
+                  ]
+                : null,
+          });
+        }
+      },
+    };
+  },
+};
+
+module.exports = noEffectCleanupReturn;

package/src/rules/no-impure-top-level-provider.js

@@ -0,0 +1,129 @@
+// @ts-check
+'use strict';
+
+const PURE_ANNOTATION = /^\s*[#@]__PURE__\s*$/;
+
+/**
+ * Angular's own app build already pure-annotates these at module scope
+ * (`pure-toplevel-functions`'s `sideEffectFreeConstructors`), so requiring it in source is noise.
+ */
+const AUTO_ANNOTATED_CONSTRUCTORS = new Set(['InjectionToken']);
+
+/** Nothing inside a function body runs on import, so it needs no annotation. */
+const NOT_EVALUATED_ON_IMPORT = new Set(['ArrowFunctionExpression', 'FunctionExpression', 'ClassExpression']);
+
+const isModuleScope = (declarator) => {
+  const declaration = declarator.parent;
+  const container = declaration?.parent;
+
+  if (container?.type === 'Program') return true;
+
+  return container?.type === 'ExportNamedDeclaration' && container.parent?.type === 'Program';
+};
+
+const hasPureAnnotation = (sourceCode, node) =>
+  sourceCode.getCommentsBefore(node).some((comment) => comment.type === 'Block' && PURE_ANNOTATION.test(comment.value));
+
+/** `f()`, `ns.f()` and `new X()` are nameable; an IIFE is not, and is left alone. */
+const calleeName = (node) => {
+  const callee = node.callee;
+
+  if (callee.type === 'Identifier') return callee.name;
+  if (callee.type === 'MemberExpression' && callee.property.type === 'Identifier') return callee.property.name;
+
+  return null;
+};
+
+/** Every call/`new` in an initializer that really is evaluated when the module is imported. */
+const collectImportTimeCalls = (root) => {
+  const found = [];
+
+  const visit = (node) => {
+    if (!node || typeof node.type !== 'string' || NOT_EVALUATED_ON_IMPORT.has(node.type)) return;
+
+    if (node.type === 'CallExpression' || node.type === 'NewExpression') found.push(node);
+
+    for (const key of Object.keys(node)) {
+      if (key === 'parent') continue;
+
+      const child = node[key];
+
+      if (Array.isArray(child)) child.forEach(visit);
+      else if (child && typeof child === 'object') visit(child);
+    }
+  };
+
+  visit(root);
+
+  return found;
+};
+
+/** @type {import('eslint').Rule.RuleModule} */
+const noImpureTopLevelProvider = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Disallow module-scope destructuring of a factory call, and require a pure annotation on module-scope calls in library source.',
+    },
+    fixable: 'code',
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          requirePureAnnotation: {
+            type: 'boolean',
+            description:
+              'Also require `@__PURE__` on every call evaluated at module scope. Turn this on in publishable library source; it is pointless in application code, where every statement is retained anyway.',
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      noDestructuring:
+        'Do not destructure a factory call at module scope. Destructuring invokes the iterator protocol, so no bundler can drop the statement — everything the factory closes over ships to every consumer. Assign the result to one `const` and name each binding with its own annotated extractor (`toProvideFn` / `toInjectFn` / `toToken`).',
+      missingPure:
+        'This module-scope call to `{{name}}` needs a `/* @__PURE__ */` annotation, or the whole declaration is retained in every consumer bundle — one unannotated call anywhere in an initializer (including inside an argument or an object literal) is enough. If the call is genuinely not side-effect free at import time, move it inside a function instead of annotating it: library code must not do work on import.',
+    },
+  },
+  create(context) {
+    const sourceCode = context.sourceCode;
+    const requirePureAnnotation = context.options[0]?.requirePureAnnotation === true;
+
+    return {
+      VariableDeclarator(node) {
+        if (!isModuleScope(node) || !node.init) return;
+
+        const initializer = node.init.type === 'TSAsExpression' ? node.init.expression : node.init;
+
+        if (
+          initializer.type === 'CallExpression' &&
+          (node.id.type === 'ArrayPattern' || node.id.type === 'ObjectPattern')
+        ) {
+          context.report({ node, messageId: 'noDestructuring' });
+
+          return;
+        }
+
+        if (!requirePureAnnotation || node.id.type !== 'Identifier') return;
+
+        for (const call of collectImportTimeCalls(initializer)) {
+          const name = calleeName(call);
+
+          if (name === null || hasPureAnnotation(sourceCode, call)) continue;
+          if (call.type === 'NewExpression' && AUTO_ANNOTATED_CONSTRUCTORS.has(name)) continue;
+
+          context.report({
+            node: call,
+            messageId: 'missingPure',
+            data: { name },
+            fix: (fixer) => fixer.insertTextBefore(call, '/* @__PURE__ */ '),
+          });
+        }
+      },
+    };
+  },
+};
+
+module.exports = noImpureTopLevelProvider;

package/src/rules/no-template-literal-before-inline-template.js

@@ -0,0 +1,190 @@
+// @ts-check
+'use strict';
+
+const ts = require('typescript');
+
+/**
+ * The Angular VS Code extension decides client-side whether a cursor in a `.ts` file sits inside an
+ * inline `template:` before it forwards completion / hover / definition / signature-help to the
+ * language server. That check (`isNotTypescriptOrSupportedDecoratorField` in
+ * `client/src/embedded_support.js`) walks the file with a bare `ts.createScanner()` loop.
+ *
+ * A bare scanner cannot re-scan `}` as `TemplateMiddle` / `TemplateTail` — that needs the parser's
+ * `reScanTemplateToken()`. So the first template literal containing a substitution desynchronises
+ * both the token stream and the brace counter, the scanner never recognises `template` `:` again,
+ * and every template request in the rest of the file is silently dropped. The language server
+ * answers those requests correctly; the editor just never asks.
+ *
+ * This rule reproduces that scanner verbatim, so it reports exactly the templates the extension
+ * would abandon — no heuristic, no false positives.
+ */
+const ANGULAR_PROPERTY_ASSIGNMENTS = new Set(['template', 'templateUrl', 'styleUrls', 'styleUrl', 'host']);
+
+/**
+ * @param {import('typescript').SyntaxKind} token
+ */
+const isPropertyAssignmentTerminator = (token) =>
+  token === ts.SyntaxKind.EndOfFileToken ||
+  token === ts.SyntaxKind.CommaToken ||
+  token === ts.SyntaxKind.SemicolonToken ||
+  token === ts.SyntaxKind.CloseBraceToken;
+
+/**
+ * Mirrors the extension's `isPropertyAssignmentToStringOrStringInArray`. Returns whether the editor
+ * would recognise `offset` as sitting inside a supported decorator field.
+ *
+ * @param {string} text
+ * @param {number} offset
+ */
+const editorSeesDecoratorField = (text, offset) => {
+  const scanner = ts.createScanner(ts.ScriptTarget.ESNext, true);
+  scanner.setText(text);
+
+  let token = scanner.scan();
+  let lastToken;
+  let lastTokenText;
+  let unclosedBraces = 0;
+  let unclosedBrackets = 0;
+  let propertyAssignmentContext = false;
+
+  while (token !== ts.SyntaxKind.EndOfFileToken && scanner.getTokenFullStart() < offset) {
+    if (
+      lastToken === ts.SyntaxKind.Identifier &&
+      lastTokenText !== undefined &&
+      token === ts.SyntaxKind.ColonToken &&
+      ANGULAR_PROPERTY_ASSIGNMENTS.has(lastTokenText)
+    ) {
+      propertyAssignmentContext = true;
+      token = scanner.scan();
+      continue;
+    }
+
+    if (unclosedBraces === 0 && unclosedBrackets === 0 && isPropertyAssignmentTerminator(token)) {
+      propertyAssignmentContext = false;
+    }
+
+    if (token === ts.SyntaxKind.OpenBracketToken) unclosedBrackets++;
+    else if (token === ts.SyntaxKind.OpenBraceToken) unclosedBraces++;
+    else if (token === ts.SyntaxKind.CloseBracketToken) unclosedBrackets--;
+    else if (token === ts.SyntaxKind.CloseBraceToken) unclosedBraces--;
+
+    const isStringToken =
+      token === ts.SyntaxKind.StringLiteral || token === ts.SyntaxKind.NoSubstitutionTemplateLiteral;
+    const isCursorInToken =
+      scanner.getTokenFullStart() <= offset && scanner.getTokenFullStart() + scanner.getTokenText().length >= offset;
+
+    if (propertyAssignmentContext && isCursorInToken && isStringToken) return true;
+
+    lastTokenText = scanner.getTokenText();
+    lastToken = token;
+    token = scanner.scan();
+  }
+
+  return false;
+};
+
+/**
+ * @param {import('estree').Property['key']} key
+ */
+const getPropertyName = (key) => {
+  if (key.type === 'Identifier') return key.name;
+  if (key.type === 'Literal' && typeof key.value === 'string') return key.value;
+  return null;
+};
+
+/**
+ * @param {any} node
+ */
+const getDecoratorName = (node) => {
+  const expression = node.expression;
+  if (!expression) return null;
+  if (expression.type === 'CallExpression') {
+    return expression.callee.type === 'Identifier' ? expression.callee.name : null;
+  }
+
+  return expression.type === 'Identifier' ? expression.name : null;
+};
+
+/**
+ * The inline template text, or null when the property is not a plain non-empty string literal.
+ *
+ * @param {any} value
+ */
+const getInlineTemplateText = (value) => {
+  if (value.type === 'Literal') return typeof value.value === 'string' ? value.value : null;
+  if (value.type === 'TemplateLiteral' && value.expressions.length === 0) return value.quasis[0]?.value.raw ?? '';
+  return null;
+};
+
+/** @type {import('eslint').Rule.RuleModule} */
+const noTemplateLiteralBeforeInlineTemplate = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Disallow a substituted template literal above an inline component template, which silently disables Angular language service completions for the rest of the file.',
+    },
+    schema: [],
+    messages: {
+      breaksLanguageService:
+        'The Angular language service gives no completions, hover or go-to-definition inside this template. Its editor-side scanner desynchronises on the interpolated template literal at line {{line}}, so every template request below it is dropped. Move that code below the component, extract it to a sibling file, or write it without an interpolation.',
+    },
+  },
+  create(context) {
+    const sourceCode = context.sourceCode;
+    const text = sourceCode.getText();
+
+    /** @type {number[]} */
+    const interpolatedLiteralStarts = [];
+    /** @type {any[]} */
+    const inlineTemplates = [];
+
+    return {
+      /** @param {any} node */
+      TemplateLiteral(node) {
+        if (node.expressions.length > 0) interpolatedLiteralStarts.push(node.range[0]);
+      },
+
+      /** @param {import('eslint').Rule.Node} node */
+      Decorator(node) {
+        const decoratorName = getDecoratorName(node);
+        if (decoratorName !== 'Component' && decoratorName !== 'Directive') return;
+
+        const expression = /** @type {any} */ (node).expression;
+        if (expression.type !== 'CallExpression') return;
+
+        const metadata = expression.arguments[0];
+        if (!metadata || metadata.type !== 'ObjectExpression') return;
+
+        for (const property of metadata.properties) {
+          if (property.type !== 'Property') continue;
+          if (getPropertyName(property.key) !== 'template') continue;
+
+          const templateText = getInlineTemplateText(property.value);
+          if (templateText === null || templateText.trim().length === 0) continue;
+
+          inlineTemplates.push(property);
+        }
+      },
+
+      'Program:exit'() {
+        for (const property of inlineTemplates) {
+          // Where the editor would put the cursor: just inside the opening quote or backtick.
+          const cursor = property.value.range[0] + 2;
+          if (editorSeesDecoratorField(text, cursor)) continue;
+
+          const culprit = interpolatedLiteralStarts.find((start) => start < property.value.range[0]);
+          if (culprit === undefined) continue;
+
+          context.report({
+            node: property.key,
+            messageId: 'breaksLanguageService',
+            data: { line: String(sourceCode.getLocFromIndex(culprit).line) },
+          });
+        }
+      },
+    };
+  },
+};
+
+module.exports = noTemplateLiteralBeforeInlineTemplate;