feat: improve scoping of snippet declarations acting as slot properties (#645)

Author: ota-meshi

.changeset/blue-eggs-work.md

@@ -0,0 +1,5 @@
+---
+"svelte-eslint-parser": minor
+---
+
+feat: improve scoping of snippet declarations acting as slot properties

src/parser/analyze-scope.ts

@@ -7,7 +7,12 @@ import type {
   SvelteScriptElement,
   SvelteSnippetBlock,
 } from "../ast/index.js";
-import { addReference, addVariable, getScopeFromNode } from "../scope/index.js";
+import {
+  addReference,
+  addVariable,
+  getScopeFromNode,
+  removeIdentifierVariable,
+} from "../scope/index.js";
 import { addElementToSortedArray } from "../utils/index.js";
 import type { NormalizedParserOptions } from "./parser-options.js";
 import type { SvelteParseContext } from "./svelte-parse-context.js";
@@ -304,11 +309,27 @@ export function analyzeSnippetsScope(
       if (!upperScope) continue;
       const variable = upperScope.set.get(snippet.id.name);
       if (!variable) continue;
-      // Add the virtual reference for reading.
-      const reference = addVirtualReference(snippet.id, variable, upperScope, {
-        read: true,
-      });
-      (reference as any).svelteSnippetReference = true;
+      const defIds = variable.defs.map((d) => d.name);
+      const refs = variable.references.filter(
+        (id) => !defIds.includes(id.identifier),
+      );
+
+      if (refs.length <= 0) {
+        // If the snippet is not referenced,
+        // remove the a variable from the upperScope.
+        removeIdentifierVariable(snippet.id, upperScope);
+      } else {
+        // Add the virtual reference for reading.
+        const reference = addVirtualReference(
+          snippet.id,
+          variable,
+          upperScope,
+          {
+            read: true,
+          },
+        );
+        (reference as any).svelteSnippetReference = true;
+      }
     }
   }
 }

tests/fixtures/integrations/snippet-scope/snippet-shadow-scope-input.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import Foo from './Foo.svelte';
+</script>
+
+<div>
+	<!-- The snippet is not used. -->
+	{#snippet children()}
+		<th>fruit</th>
+		<th>qty</th>
+		<th>price</th>
+		<th>total</th>
+	{/snippet}
+</div>
+
+<Foo>
+	<!-- The snippet is used and does not add any variables. -->
+	{#snippet children(arg)}
+		<p>{arg}</p>
+	{/snippet}
+	{#snippet c()}
+		<Foo>
+			<!-- The snippet is used and does not add any variables. -->
+			{#snippet children(arg)}
+				<p>{arg}</p>
+			{/snippet}
+		</Foo>
+	{/snippet}
+</Foo>
+
+<!-- The snippet is used and add a variable. -->
+{#snippet bar(arg)}
+	<p>{arg}</p>
+{/snippet}
+<Foo children={bar}>
+	{#snippet c()}
+		<!-- The snippet is used and add a variable. -->
+		{#snippet bar(arg)}
+			<p>{arg}</p>
+		{/snippet}
+		<Foo children={bar}>
+		</Foo>
+	{/snippet}
+</Foo>

tests/fixtures/integrations/snippet-scope/snippet-shadow-scope-output.json

@@ -0,0 +1,23 @@
+[
+  {
+    "ruleId": "no-unused-vars",
+    "code": "children",
+    "line": 7,
+    "column": 12,
+    "message": "'children' is defined but never used."
+  },
+  {
+    "ruleId": "no-shadow",
+    "code": "bar",
+    "line": 37,
+    "column": 13,
+    "message": "'bar' is already declared in the upper scope on line 31 column 11."
+  },
+  {
+    "ruleId": "@typescript-eslint/no-shadow",
+    "code": "bar",
+    "line": 37,
+    "column": 13,
+    "message": "'bar' is already declared in the upper scope on line 31 column 11."
+  }
+]

tests/fixtures/integrations/snippet-scope/snippet-shadow-scope-requirements.json

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

tests/fixtures/integrations/snippet-scope/snippet-shadow-scope-setup.ts

@@ -0,0 +1,32 @@
+import type { Linter } from "eslint";
+import { generateParserOptions } from "../../../src/parser/test-utils.js";
+import { rules } from "@typescript-eslint/eslint-plugin";
+import * as parser from "../../../../src/index.js";
+import globals from "globals";
+
+export function getConfig(): Linter.Config {
+  return {
+    plugins: {
+      "@typescript-eslint": {
+        rules: rules as any,
+      },
+    },
+    languageOptions: {
+      parser,
+      parserOptions: {
+        ...generateParserOptions(),
+        svelteFeatures: { runes: true },
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.es2021,
+      },
+    },
+    rules: {
+      "no-shadow": "error",
+      "@typescript-eslint/no-shadow": "error",
+      "no-undef": "error",
+      "no-unused-vars": "error",
+    },
+  };
+}

tests/fixtures/integrations/snippet-scope/ts-snippet-hoist-scope-setup.ts

@@ -1,7 +1,7 @@
 import type { Linter } from "eslint";
-import { generateParserOptions } from "../../../src/parser/test-utils";
+import { generateParserOptions } from "../../../src/parser/test-utils.js";
 import { rules } from "@typescript-eslint/eslint-plugin";
-import * as parser from "../../../../src";
+import * as parser from "../../../../src/index.js";
 import globals from "globals";
 
 export function getConfig(): Linter.Config {