Add support for store access type infomation (#192)

* Add support for store access type infomation

* update

* update

* add test case

Author: ota-meshi

.github/workflows/NodeCI.yml

@@ -44,7 +44,7 @@ jobs:
         node-version: ${{ matrix.node-version }}
     - name: Install @typescript-eslint v4
       run: |+
-        yarn add -D @typescript-eslint/parser@4 @typescript-eslint/eslint-plugin@4 --ignore-engines
+        yarn add -D @typescript-eslint/parser@4 @typescript-eslint/eslint-plugin@4 eslint@7 --ignore-engines
         rm -rf node_modules
     - name: Install Packages
       run: yarn install --ignore-engines

src/context/script-let.ts

@@ -528,6 +528,26 @@ export class ScriptLetContext {
     this.closeScopeCallbacks.pop()!();
   }
 
+  public appendDeclareMaybeStores(maybeStores: Set<string>): void {
+    const reservedNames = new Set<string>([
+      "$$props",
+      "$$restProps",
+      "$$slots",
+    ]);
+    for (const nm of maybeStores) {
+      if (reservedNames.has(nm)) continue;
+
+      this.appendScriptWithoutOffset(
+        `declare let $${nm}: Parameters<Parameters<(typeof ${nm})["subscribe"]>[0]>[0];`,
+        (node, tokens, comments, result) => {
+          tokens.length = 0;
+          comments.length = 0;
+          removeAllScope(node, result);
+        }
+      );
+    }
+  }
+
   private appendScript(
     text: string,
     offset: number,
@@ -912,7 +932,7 @@ function removeAllScope(target: ESTree.Node, result: ScriptLetCallbackOption) {
         return;
       }
       if (node.type === "Identifier") {
-        let scope = result.getScope(node);
+        let scope = result.getInnermostScope(node);
         if (
           (scope.block as any).type === "TSTypeAliasDeclaration" &&
           (scope.block as any).id === node
@@ -939,16 +959,37 @@ function removeAllScope(target: ESTree.Node, result: ScriptLetCallbackOption) {
 
 /** Remove variable */
 function removeIdentifierVariable(node: ESTree.Identifier, scope: Scope): void {
-  const varIndex = scope.variables.findIndex((v) =>
-    v.defs.some((def) => def.name === node)
-  );
-  if (varIndex >= 0) {
+  for (let varIndex = 0; varIndex < scope.variables.length; varIndex++) {
     const variable = scope.variables[varIndex];
-    scope.variables.splice(varIndex, 1);
-    const name = node.name;
-    if (variable === scope.set.get(name)) {
-      scope.set.delete(name);
+    const defIndex = variable.defs.findIndex((def) => def.name === node);
+    if (defIndex < 0) {
+      continue;
     }
+    variable.defs.splice(defIndex, 1);
+    if (variable.defs.length === 0) {
+      // Remove variable
+      referencesToThrough(variable.references, scope);
+      scope.variables.splice(varIndex, 1);
+      const name = node.name;
+      if (variable === scope.set.get(name)) {
+        scope.set.delete(name);
+      }
+    } else {
+      const idIndex = variable.identifiers.indexOf(node);
+      if (idIndex >= 0) {
+        variable.identifiers.splice(idIndex, 1);
+      }
+    }
+    return;
+  }
+}
+
+/** Move reference to through */
+function referencesToThrough(references: Reference[], baseScope: Scope) {
+  let scope: Scope | null = baseScope;
+  while (scope) {
+    scope.through.push(...references);
+    scope = scope.upper;
   }
 }
 

src/parser/analyze-type/index.ts

@@ -0,0 +1,21 @@
+import type { Context } from "../../context";
+
+/**
+ * Append store type declarations.
+ * Append TypeScript code like
+ * `declare let $foo: Parameters<Parameters<(typeof foo)["subscribe"]>[0]>[0];`
+ * to define the type information for like $foo variable.
+ */
+export function appendDeclareStoreTypes(ctx: Context): void {
+  const vcode = ctx.sourceCode.scripts.vcode;
+  const extractStoreRe = /\$[\p{ID_Start}$_][\p{ID_Continue}$\u200c\u200d]*/giu;
+  let m;
+  const maybeStores = new Set<string>();
+  while ((m = extractStoreRe.exec(vcode))) {
+    const storeName = m[0];
+    const originalName = storeName.slice(1);
+    maybeStores.add(originalName);
+  }
+
+  ctx.scriptLet.appendDeclareMaybeStores(maybeStores);
+}

src/parser/index.ts

@@ -19,6 +19,7 @@ import {
   analyzeStoreScope,
 } from "./analyze-scope";
 import { ParseError } from "../errors";
+import { appendDeclareStoreTypes } from "./analyze-type";
 
 export interface ESLintProgram extends Program {
   comments: Comment[];
@@ -76,6 +77,8 @@ export function parseForESLint(
     parserOptions
   );
 
+  if (ctx.isTypeScript()) appendDeclareStoreTypes(ctx);
+
   const resultScript = parseScript(ctx.sourceCode.scripts, parserOptions);
   ctx.scriptLet.restore(resultScript);
   ctx.tokens.push(...resultScript.ast.tokens);

tests/fixtures/integrations/type-info-tests/i18n-input.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+    import { _ } from './svelte-i18n';
+</script>
+
+<main>
+    <input name={$_('test')}>
+</main>

tests/fixtures/integrations/type-info-tests/i18n-output.json

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

tests/fixtures/integrations/type-info-tests/i18n-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 { BASIC_PARSER_OPTIONS } from "../../../src/parser/test-utils";
+import { rules } from "@typescript-eslint/eslint-plugin";
+export function setupLinter(linter: Linter) {
+  linter.defineRule(
+    "@typescript-eslint/no-unsafe-call",
+    rules["no-unsafe-call"] as never
+  );
+}
+
+export function getConfig() {
+  return {
+    parser: "svelte-eslint-parser",
+    parserOptions: BASIC_PARSER_OPTIONS,
+    rules: {
+      "@typescript-eslint/no-unsafe-call": "error",
+    },
+    env: {
+      browser: true,
+      es2021: true,
+    },
+  };
+}

tests/fixtures/integrations/type-info-tests/svelte-i18n.d.ts

@@ -0,0 +1,6 @@
+import type { Readable } from "svelte/store";
+
+declare type MessageFormatter = (id: string) => string;
+declare const $format: Readable<MessageFormatter>;
+
+export { $format as _ };

tests/fixtures/parser/ast/i18n-test-input.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+    import { _ } from './i18n-test-svelte-i18n';
+</script>
+
+<main>
+    <input name={$_('test')}>
+</main>