fix(no-shadow): ignore {#snippet} if it uses under component.

Author: baseballyama

.changeset/silly-lions-build.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-svelte': patch
+---
+
+fix(no-shadow): ignore `{#snippet}` if it uses under component.

packages/eslint-plugin-svelte/src/rule-types.ts

@@ -215,6 +215,11 @@ export interface RuleOptions {
    * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-restricted-html-elements/
    */
   'svelte/no-restricted-html-elements'?: Linter.RuleEntry<SvelteNoRestrictedHtmlElements>
+  /**
+   * Disallow variable declarations from shadowing variables declared in the outer scope
+   * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-shadow/
+   */
+  'svelte/no-shadow'?: Linter.RuleEntry<SvelteNoShadow>
   /**
    * disallow shorthand style properties that override related longhand properties
    * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-shorthand-style-property-overrides/
@@ -479,6 +484,13 @@ type SvelteNoRestrictedHtmlElements = [(string | {
   elements?: [string, ...(string)[]]
   message?: string
 }))[]]
+// ----- svelte/no-shadow -----
+type SvelteNoShadow = []|[{
+  builtinGlobals?: boolean
+  hoist?: ("all" | "functions" | "never")
+  allow?: string[]
+  ignoreOnInitialization?: boolean
+}]
 // ----- svelte/no-target-blank -----
 type SvelteNoTargetBlank = []|[{
   allowReferrer?: boolean

packages/eslint-plugin-svelte/src/rules/indent-helpers/index.ts

@@ -1,5 +1,4 @@
 import type { AST } from 'svelte-eslint-parser';
-import type { TSESTree } from '@typescript-eslint/types';
 import type { ASTNode, RuleContext, RuleListener } from '../../types.js';
 import * as SV from './svelte.js';
 import * as ES from './es.js';
@@ -244,7 +243,7 @@ export function defineVisitor(
 				offsets.ignore(node);
 			}
 		},
-		'Program:exit'(node: TSESTree.Program) {
+		'Program:exit'(node: AST.SvelteProgram) {
 			const calculator = offsets.getOffsetCalculator();
 
 			let prevToken: AnyToken | null = null;

packages/eslint-plugin-svelte/src/rules/no-shadow.ts

@@ -0,0 +1,83 @@
+import { createRule } from '../utils/index.js';
+import { defineWrapperListener, getProxyContent, getCoreRule } from '../utils/eslint-core.js';
+import type { TSESTree } from '@typescript-eslint/types';
+import type { Scope } from '@typescript-eslint/scope-manager';
+import type { Range } from 'svelte-eslint-parser/lib/ast/common.js';
+import { getScope as getScopeUtil } from '../utils/ast-utils.js';
+import { getSourceCode as getSourceCodeCompat } from '../utils/compat.js';
+
+const coreRule = getCoreRule('no-shadow');
+
+function removeSnippetIdentifiers(snippetIdentifierNodeLocations: Range[], scope: Scope): Scope {
+	return {
+		...scope,
+		variables: scope.variables.filter((variable) => {
+			return !snippetIdentifierNodeLocations.some(([start, end]) => {
+				return variable.identifiers.every((identifier) => {
+					const { range } = identifier;
+					return range[0] === start && range[1] === end;
+				});
+			});
+		}),
+		childScopes: scope.childScopes.map((scope) => {
+			return removeSnippetIdentifiers(snippetIdentifierNodeLocations, scope);
+		})
+	} as Scope;
+}
+
+export default createRule('no-shadow', {
+	meta: {
+		...coreRule.meta,
+		docs: {
+			description: coreRule.meta.docs.description,
+			category: 'Best Practices',
+			recommended: false,
+			extensionRule: 'no-shadow'
+		}
+	},
+	create(context) {
+		const snippetIdentifierNodeLocations: Range[] = [];
+
+		function getScope(node: TSESTree.Node) {
+			const scope = getScopeUtil(context, node);
+			return removeSnippetIdentifiers(snippetIdentifierNodeLocations, scope);
+		}
+
+		function getSourceCode() {
+			const sourceCode = getSourceCodeCompat(context);
+			return new Proxy(sourceCode, {
+				get(target, key) {
+					if (key === 'getScope') {
+						return getScope;
+					}
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any -- ignore
+					return (target as any)[key];
+				}
+			});
+		}
+
+		return defineWrapperListener(
+			coreRule,
+			getProxyContent(context, {
+				sourceCode: getSourceCode()
+			}),
+			{
+				createListenerProxy(coreListener) {
+					return {
+						...coreListener,
+						SvelteSnippetBlock(node) {
+							const parent = node.parent;
+							if (parent.type === 'SvelteElement' && parent.kind === 'component') {
+								snippetIdentifierNodeLocations.push(node.id.range);
+							}
+							coreListener.SvelteSnippetBlock?.(node);
+						},
+						'Program:exit'(node) {
+							coreListener['Program:exit']?.(node);
+						}
+					};
+				}
+			}
+		);
+	}
+});

packages/eslint-plugin-svelte/src/types-for-node.ts

@@ -211,6 +211,7 @@ export type ASTNodeListener = {
 	TSUnknownKeyword?: (node: TSESTree.TSUnknownKeyword & ASTNodeWithParent) => void;
 	TSVoidKeyword?: (node: TSESTree.TSVoidKeyword & ASTNodeWithParent) => void;
 	Program?: (node: AST.SvelteProgram & ASTNodeWithParent) => void;
+	'Program:exit'?: (node: AST.SvelteProgram & ASTNodeWithParent) => void;
 	SvelteScriptElement?: (node: AST.SvelteScriptElement & ASTNodeWithParent) => void;
 	SvelteStyleElement?: (node: AST.SvelteStyleElement & ASTNodeWithParent) => void;
 	SvelteElement?: (node: AST.SvelteElement & ASTNodeWithParent) => void;

packages/eslint-plugin-svelte/src/utils/eslint-core.ts

@@ -6,6 +6,22 @@ import { Linter } from 'eslint';
 import Module from 'module';
 
 const require = Module.createRequire(import.meta.url);
+
+export function getProxyContent(context: RuleContext, overrides: any): RuleContext {
+	const cache: any = {};
+	return new Proxy(context, {
+		get(_t, key) {
+			if (key in cache) {
+				return cache[key];
+			}
+			if (key in overrides) {
+				return (cache[key] = overrides[key]);
+			}
+			return (context as any)[key];
+		}
+	});
+}
+
 /**
  * Define the wrapped core rule.
  */
@@ -17,10 +33,7 @@ export function defineWrapperListener(
 	}
 ): RuleListener {
 	const listener = coreRule.create(context as any);
-
-	const svelteListener = proxyOptions.createListenerProxy?.(listener) ?? listener;
-
-	return svelteListener;
+	return proxyOptions.createListenerProxy?.(listener) ?? listener;
 }
 
 /**

packages/eslint-plugin-svelte/src/utils/rules.ts

@@ -42,6 +42,7 @@ import noReactiveFunctions from '../rules/no-reactive-functions.js';
 import noReactiveLiterals from '../rules/no-reactive-literals.js';
 import noReactiveReassign from '../rules/no-reactive-reassign.js';
 import noRestrictedHtmlElements from '../rules/no-restricted-html-elements.js';
+import noShadow from '../rules/no-shadow.js';
 import noShorthandStylePropertyOverrides from '../rules/no-shorthand-style-property-overrides.js';
 import noSpacesAroundEqualSignsInAttribute from '../rules/no-spaces-around-equal-signs-in-attribute.js';
 import noStoreAsync from '../rules/no-store-async.js';
@@ -113,6 +114,7 @@ export const rules = [
 	noReactiveLiterals,
 	noReactiveReassign,
 	noRestrictedHtmlElements,
+	noShadow,
 	noShorthandStylePropertyOverrides,
 	noSpacesAroundEqualSignsInAttribute,
 	noStoreAsync,

packages/eslint-plugin-svelte/tests/fixtures/rules/no-shadow/invalid/basic-errors.yaml

@@ -0,0 +1,4 @@
+- message: "'x' is already declared in the upper scope on line 2 column 13."
+  line: 4
+  column: 8
+  suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/no-shadow/invalid/basic-input.svelte

@@ -0,0 +1,7 @@
+<script>
+	function a(x) {
+		var b = function c() {
+			var x = 'foo';
+		};
+	}
+</script>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-shadow/invalid/const-errors.yaml

@@ -0,0 +1,4 @@
+- message: "'foo' is already declared in the upper scope on line 6 column 10."
+  line: 8
+  column: 11
+  suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/no-shadow/invalid/const-input.svelte

@@ -0,0 +1,10 @@
+<script>
+	import ComponentWithSnippet from './ComponentWithSnippet.svelte';
+</script>
+
+<ComponentWithSnippet>
+	{@const foo = 1}
+	<ComponentWithSnippet>
+		{@const foo = 2}
+	</ComponentWithSnippet>
+</ComponentWithSnippet>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-shadow/valid/basic-input.svelte

@@ -0,0 +1,10 @@
+<script>
+	var a = 3;
+	var b = (x) => {
+		a++;
+		return x + a;
+	};
+	setTimeout(() => {
+		b(a);
+	}, 0);
+</script>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-shadow/valid/snippet1-input.svelte

@@ -0,0 +1,13 @@
+<script>
+	import ComponentWithSnippet from './ComponentWithSnippet.svelte';
+</script>
+
+<ComponentWithSnippet>
+	{#snippet children()}
+		<AnotherComponentWithSnippet>
+			{#snippet children()}
+				Hello!
+			{/snippet}
+		</AnotherComponentWithSnippet>
+	{/snippet}
+</ComponentWithSnippet>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-shadow/valid/snippet1-requirements.json

@@ -0,0 +1,3 @@
+{
+	"svelte": ">=5.0.0-0"
+}

packages/eslint-plugin-svelte/tests/fixtures/rules/no-shadow/valid/snippet2-input.svelte

@@ -0,0 +1,10 @@
+<script>
+	import ComponentWithSnippet from './ComponentWithSnippet.svelte';
+	const children = 1;
+</script>
+
+<ComponentWithSnippet>
+	{#snippet children()}
+		Hello!
+	{/snippet}
+</ComponentWithSnippet>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-shadow/valid/snippet2-requirements.json

@@ -0,0 +1,3 @@
+{
+	"svelte": ">=5.0.0-0"
+}

packages/eslint-plugin-svelte/tests/src/rules/no-shadow.ts

@@ -0,0 +1,12 @@
+import { RuleTester } from '../../utils/eslint-compat.js';
+import rule from '../../../src/rules/no-shadow.js';
+import { loadTestCases } from '../../utils/utils.js';
+
+const tester = new RuleTester({
+	languageOptions: {
+		ecmaVersion: 2020,
+		sourceType: 'module'
+	}
+});
+
+tester.run('no-shadow', rule as any, loadTestCases('no-shadow'));