fix: wrong scope for ts in bind: (#337)

* Fix wrong scope for ts in `bind:`

* Create strong-plants-suffer.md

Author: ota-meshi

.changeset/strong-plants-suffer.md

@@ -0,0 +1,5 @@
+---
+"svelte-eslint-parser": patch
+---
+
+fix: wrong scope for ts in `bind:`

package.json

@@ -88,7 +88,7 @@
     "eslint-plugin-node-dependencies": "^0.11.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-regexp": "^1.5.0",
-    "eslint-plugin-svelte": "^2.0.0",
+    "eslint-plugin-svelte": "^2.28.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "eslint-plugin-yml": "^1.0.0",
     "estree-walker": "^3.0.0",
@@ -102,7 +102,6 @@
     "prettier-plugin-svelte": "^2.10.0",
     "rimraf": "^5.0.0",
     "semver": "^7.3.5",
-    "string-replace-loader": "^3.0.3",
     "svelte": "^3.57.0",
     "svelte2tsx": "^0.6.11",
     "typescript": "~5.0.0",

src/context/script-let.ts

@@ -15,7 +15,6 @@ import type {
 import type { ESLintExtendedProgram } from "../parser";
 import { getWithLoc } from "../parser/converts/common";
 import {
-  getInnermostScopeFromNode,
   getScopeFromNode,
   removeAllScopeAndVariableAndReference,
   removeReference,
@@ -43,7 +42,6 @@ export type ScriptLetCallback<E extends ESTree.Node> = (
 
 export type ScriptLetCallbackOption = {
   getScope: (node: ESTree.Node) => Scope;
-  getInnermostScope: (node: ESTree.Node) => Scope;
   registerNodeToScope: (node: any, scope: Scope) => void;
   scopeManager: ScopeManager;
   visitorKeys?: { [type: string]: string[] };
@@ -56,7 +54,6 @@ export type ScriptLetRestoreCallback = (
 ) => void;
 type ScriptLetRestoreCallbackOption = {
   getScope: (node: ESTree.Node) => Scope;
-  getInnermostScope: (node: ESTree.Node) => Scope;
   registerNodeToScope: (node: any, scope: Scope) => void;
   scopeManager: ScopeManager;
   visitorKeys?: { [type: string]: string[] };
@@ -643,7 +640,6 @@ export class ScriptLetContext {
 
     const callbackOption: ScriptLetRestoreCallbackOption = {
       getScope,
-      getInnermostScope,
       registerNodeToScope,
       scopeManager: result.scopeManager!,
       visitorKeys: result.visitorKeys,
@@ -660,11 +656,6 @@ export class ScriptLetContext {
       return getScopeFromNode(result.scopeManager!, node);
     }
 
-    /** Get innermost scope */
-    function getInnermostScope(node: ESTree.Node) {
-      return getInnermostScopeFromNode(result.scopeManager!, node);
-    }
-
     /** Register node to scope */
     function registerNodeToScope(node: any, scope: Scope): void {
       // If we replace the `scope.block` at this time,

src/parser/converts/attr.ts

@@ -293,9 +293,9 @@ function convertBindingDirective(
         expression,
         directive,
         null,
-        (es, { getInnermostScope }) => {
+        (es, { getScope }) => {
           directive.expression = es;
-          const scope = getInnermostScope(es);
+          const scope = getScope(es);
           const reference = scope.references.find(
             (ref) => ref.identifier === es
           );

src/scope/index.ts

@@ -26,7 +26,7 @@ export function removeAllScopeAndVariableAndReference(
         return;
       }
       if (node.type === "Identifier") {
-        let scope = getInnermostScopeFromNode(info.scopeManager, node);
+        let scope = getScopeFromNode(info.scopeManager, node);
         while (
           scope &&
           scope.block.type !== "Program" &&
@@ -90,49 +90,6 @@ export function getProgramScope(scopeManager: ScopeManager): Scope {
   );
 }
 
-/**
- * Get the innermost scope which contains a given node.
- * @returns The innermost scope.
- */
-export function getInnermostScopeFromNode(
-  scopeManager: ScopeManager,
-  currentNode: ESTree.Node
-): Scope {
-  return getInnermostScope(
-    getScopeFromNode(scopeManager, currentNode),
-    currentNode
-  );
-}
-
-/**
- * Get the innermost scope which contains a given location.
- * @param initialScope The initial scope to search.
- * @param node The location to search.
- * @returns The innermost scope.
- */
-export function getInnermostScope(
-  initialScope: Scope,
-  node: ESTree.Node
-): Scope {
-  const location = node.range![0];
-  const isInRange =
-    node.range![0] === node.range![1]
-      ? (range: [number, number]) =>
-          range[0] <= location && location <= range[1]
-      : (range: [number, number]) =>
-          range[0] <= location && location < range[1];
-
-  for (const childScope of initialScope.childScopes) {
-    const range = childScope.block.range!;
-
-    if (isInRange(range)) {
-      return getInnermostScope(childScope, node);
-    }
-  }
-
-  return initialScope;
-}
-
 /* eslint-disable complexity -- ignore X( */
 /** Remove variable */
 export function removeIdentifierVariable(

tests/fixtures/integrations/scope-tests/ts-scope01-input.svelte

@@ -0,0 +1,14 @@
+<!-- from https://github.com/sveltejs/eslint-plugin-svelte/issues/484 -->
+<script lang="ts">
+import Pagination from "../components/Pagination.svelte";
+
+let page = 1;
+const perPage = 15;
+$: pageStart = perPage * (page - 1);
+</script>
+
+{#each array as _}
+  <div on:click={() => {}} />
+{/each}
+
+<Pagination bind:current={page} />

tests/fixtures/integrations/scope-tests/ts-scope01-output.json

@@ -0,0 +1 @@
+[]

tests/fixtures/integrations/scope-tests/ts-scope01-setup.ts

@@ -0,0 +1,24 @@
+/* eslint eslint-comments/require-description: 0, @typescript-eslint/explicit-module-boundary-types: 0 */
+import type { Linter } from "eslint";
+import { generateParserOptions } from "../../../src/parser/test-utils";
+import { rules } from "eslint-plugin-svelte";
+export function setupLinter(linter: Linter) {
+  linter.defineRule(
+    "svelte/no-immutable-reactive-statements",
+    rules["no-immutable-reactive-statements"] as never
+  );
+}
+
+export function getConfig() {
+  return {
+    parser: "svelte-eslint-parser",
+    parserOptions: generateParserOptions(),
+    rules: {
+      "svelte/no-immutable-reactive-statements": "error",
+    },
+    env: {
+      browser: true,
+      es2021: true,
+    },
+  };
+}

tests/fixtures/parser/ast/ts-scope-issue01-input.svelte

@@ -0,0 +1,14 @@
+<!-- from https://github.com/sveltejs/eslint-plugin-svelte/issues/484 -->
+<script lang="ts">
+import Pagination from "../components/Pagination.svelte";
+
+let page = 1;
+const perPage = 15;
+$: pageStart = perPage * (page - 1);
+</script>
+
+{#each array as _}
+  <div on:click={() => {}} />
+{/each}
+
+<Pagination bind:current={page} />

tests/fixtures/parser/ast/ts-scope-issue01-no-undef-result.json

@@ -0,0 +1,8 @@
+[
+  {
+    "ruleId": "no-undef",
+    "code": "array",
+    "line": 10,
+    "column": 8
+  }
+]

tests/fixtures/parser/ast/ts-scope-issue01-no-unused-vars-result.json

@@ -0,0 +1,14 @@
+[
+  {
+    "ruleId": "no-unused-vars",
+    "code": "pageStart",
+    "line": 7,
+    "column": 4
+  },
+  {
+    "ruleId": "no-unused-vars",
+    "code": "_",
+    "line": 10,
+    "column": 17
+  }
+]