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

Author: baseballyama

.changeset/silly-lions-build.md

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

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/snippet-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/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'));