feat: improve $$ vars type (#338)

* feat: improve $$ vars type

* Create flat-shrimps-type.md

Author: ota-meshi

.changeset/flat-shrimps-type.md

@@ -0,0 +1,5 @@
+---
+"svelte-eslint-parser": minor
+---
+
+feat: improve $$ vars type

src/context/index.ts

@@ -5,6 +5,7 @@ import type {
   Locations,
   Position,
   SvelteElement,
+  SvelteHTMLElement,
   SvelteName,
   SvelteScriptElement,
   SvelteStyleElement,
@@ -116,6 +117,7 @@ export class Context {
 
   public readonly parserOptions: any;
 
+  // ----- Source Code ------
   public readonly sourceCode: ContextSourceCode;
 
   public readonly tokens: Token[] = [];
@@ -126,10 +128,14 @@ export class Context {
 
   private readonly locsMap = new Map<number, Position>();
 
+  // ----- Context Data ------
   public readonly scriptLet: ScriptLetContext;
 
   public readonly letDirCollections = new LetDirectiveCollections();
 
+  public readonly slots = new Set<SvelteHTMLElement>();
+
+  // ----- States ------
   private readonly state: { isTypeScript?: boolean } = {};
 
   private readonly blocks: Block[] = [];

src/parser/converts/element.ts

@@ -707,7 +707,9 @@ function convertSlotElement(
   ctx: Context
 ): SvelteHTMLElement {
   // Slot translates to SvelteHTMLElement.
-  return convertHTMLElement(node, parent, ctx);
+  const element = convertHTMLElement(node, parent, ctx);
+  ctx.slots.add(element);
+  return element;
 }
 
 /** Convert for window element. e.g. <svelte:window> */

src/parser/index.ts

@@ -83,7 +83,8 @@ export function parseForESLint(
     ? parseTypeScript(
         scripts.getCurrentVirtualCodeInfo(),
         scripts.attrs,
-        parserOptions
+        parserOptions,
+        { slots: ctx.slots }
       )
     : parseScript(
         scripts.getCurrentVirtualCode(),

src/parser/typescript/analyze/index.ts

@@ -15,6 +15,11 @@ import { parseScriptWithoutAnalyzeScope } from "../../script";
 import { VirtualTypeScriptContext } from "../context";
 import type { TSESParseForESLintResult } from "../types";
 import type ESTree from "estree";
+import type { SvelteAttribute, SvelteHTMLElement } from "../../../ast";
+
+export type AnalyzeTypeScriptContext = {
+  slots: Set<SvelteHTMLElement>;
+};
 
 const RESERVED_NAMES = new Set<string>(["$$props", "$$restProps", "$$slots"]);
 /**
@@ -25,7 +30,8 @@ const RESERVED_NAMES = new Set<string>(["$$props", "$$restProps", "$$slots"]);
 export function analyzeTypeScript(
   code: { script: string; render: string },
   attrs: Record<string, string | undefined>,
-  parserOptions: any
+  parserOptions: any,
+  context: AnalyzeTypeScriptContext
 ): VirtualTypeScriptContext {
   const ctx = new VirtualTypeScriptContext(code.script + code.render);
   ctx.appendOriginal(/^\s*/u.exec(code.script)![0].length);
@@ -44,6 +50,8 @@ export function analyzeTypeScript(
 
   analyzeStoreReferenceNames(result, ctx);
 
+  analyzeDollarDollarVariables(result, ctx, context.slots);
+
   analyzeReactiveScopes(result, ctx);
 
   analyzeRenderScopes(code, ctx);
@@ -138,6 +146,104 @@ function analyzeStoreReferenceNames(
   }
 }
 
+/**
+ * Analyze `$$slots`, `$$props`, and `$$restProps` .
+ * Insert type definitions code to provide correct type information for `$$slots`, `$$props`, and `$$restProps`.
+ */
+function analyzeDollarDollarVariables(
+  result: TSESParseForESLintResult,
+  ctx: VirtualTypeScriptContext,
+  slots: Set<SvelteHTMLElement>
+) {
+  const scopeManager = result.scopeManager;
+
+  if (
+    scopeManager.globalScope!.through.some(
+      (reference) => reference.identifier.name === "$$props"
+    )
+  ) {
+    appendDeclareVirtualScript("$$props", `{ [index: string]: any }`);
+  }
+  if (
+    scopeManager.globalScope!.through.some(
+      (reference) => reference.identifier.name === "$$restProps"
+    )
+  ) {
+    appendDeclareVirtualScript("$$restProps", `{ [index: string]: any }`);
+  }
+  if (
+    scopeManager.globalScope!.through.some(
+      (reference) => reference.identifier.name === "$$slots"
+    )
+  ) {
+    const nameTypes = new Set<string>();
+    for (const slot of slots) {
+      const nameAttr = slot.startTag.attributes.find(
+        (attr): attr is SvelteAttribute =>
+          attr.type === "SvelteAttribute" && attr.key.name === "name"
+      );
+      if (!nameAttr || nameAttr.value.length === 0) {
+        nameTypes.add('"default"');
+        continue;
+      }
+
+      if (nameAttr.value.length === 1) {
+        const value = nameAttr.value[0];
+        if (value.type === "SvelteLiteral") {
+          nameTypes.add(JSON.stringify(value.value));
+        } else {
+          nameTypes.add("string");
+        }
+        continue;
+      }
+      nameTypes.add(
+        `\`${nameAttr.value
+          .map((value) =>
+            value.type === "SvelteLiteral"
+              ? value.value.replace(/([$`])/gu, "\\$1")
+              : "${string}"
+          )
+          .join("")}\``
+      );
+    }
+
+    appendDeclareVirtualScript(
+      "$$slots",
+      `Record<${
+        nameTypes.size > 0 ? [...nameTypes].join(" | ") : "any"
+      }, boolean>`
+    );
+  }
+
+  /** Append declare virtual script */
+  function appendDeclareVirtualScript(name: string, type: string) {
+    ctx.appendVirtualScript(`declare let ${name}: ${type};`);
+    ctx.restoreContext.addRestoreStatementProcess((node, result) => {
+      if (
+        node.type !== "VariableDeclaration" ||
+        !node.declare ||
+        node.declarations.length !== 1 ||
+        node.declarations[0].id.type !== "Identifier" ||
+        node.declarations[0].id.name !== name
+      ) {
+        return false;
+      }
+      const program = result.ast;
+      program.body.splice(program.body.indexOf(node), 1);
+
+      const scopeManager = result.scopeManager as ScopeManager;
+
+      // Remove `declare` variable
+      removeAllScopeAndVariableAndReference(node, {
+        visitorKeys: result.visitorKeys,
+        scopeManager,
+      });
+
+      return true;
+    });
+  }
+}
+
 /**
  * Analyze the reactive scopes.
  * Transform source code to provide the correct type information in the `$:` statements.

src/parser/typescript/index.ts

@@ -1,5 +1,6 @@
 import type { ESLintExtendedProgram } from "..";
 import { parseScript } from "../script";
+import type { AnalyzeTypeScriptContext } from "./analyze";
 import { analyzeTypeScript } from "./analyze";
 import type { TSESParseForESLintResult } from "./types";
 
@@ -9,9 +10,10 @@ import type { TSESParseForESLintResult } from "./types";
 export function parseTypeScript(
   code: { script: string; render: string },
   attrs: Record<string, string | undefined>,
-  parserOptions: any = {}
+  parserOptions: unknown,
+  context: AnalyzeTypeScriptContext
 ): ESLintExtendedProgram {
-  const tsCtx = analyzeTypeScript(code, attrs, parserOptions);
+  const tsCtx = analyzeTypeScript(code, attrs, parserOptions, context);
 
   const result = parseScript(tsCtx.script, attrs, parserOptions);
 

tests/fixtures/parser/ast/ts-$$props01-input.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    $$props
+    $$restProps
+</script>
+

tests/fixtures/parser/ast/ts-$$props01-no-unused-expressions-result.json

@@ -0,0 +1,14 @@
+[
+  {
+    "ruleId": "no-unused-expressions",
+    "code": "$$props",
+    "line": 2,
+    "column": 5
+  },
+  {
+    "ruleId": "no-unused-expressions",
+    "code": "$$restProps",
+    "line": 3,
+    "column": 5
+  }
+]