feat: support latest runes ($props.id and $inspect.trace)

Author: baseballyama

.changeset/stale-birds-win.md

@@ -0,0 +1,5 @@
+---
+"svelte-eslint-parser": minor
+---
+
+feat: support latest runes (`$props.id` and `$inspect.trace`)

src/parser/typescript/analyze/index.ts

@@ -43,10 +43,10 @@ export function analyzeTypeScriptInSvelte(
   code: { script: string; rootScope: string; render: string },
   attrs: Record<string, string | undefined>,
   parserOptions: NormalizedParserOptions,
-  context: AnalyzeTypeScriptContext,
+  context: AnalyzeTypeScriptContext
 ): VirtualTypeScriptContext {
   const ctx = new VirtualTypeScriptContext(
-    code.script + code.render + code.rootScope,
+    code.script + code.render + code.rootScope
   );
   ctx.appendOriginal(/^\s*/u.exec(code.script)![0].length);
 
@@ -57,7 +57,7 @@ export function analyzeTypeScriptInSvelte(
       ...parserOptions,
       // Without typings
       project: null,
-    },
+    }
   ) as unknown as TSESParseForESLintResult;
 
   ctx._beforeResult = result;
@@ -68,7 +68,7 @@ export function analyzeTypeScriptInSvelte(
     result,
     ctx,
     context.svelteParseContext,
-    context.slots,
+    context.slots
   );
 
   analyzeRuneVariables(result, ctx, context.svelteParseContext);
@@ -78,7 +78,7 @@ export function analyzeTypeScriptInSvelte(
       ...analyzeReactiveScopes(result),
       ...analyzeDollarDerivedScopes(result, context.svelteParseContext),
     ],
-    ctx,
+    ctx
   );
 
   analyzeRenderScopes(code, ctx);
@@ -102,7 +102,7 @@ export function analyzeTypeScript(
   code: string,
   attrs: Record<string, string | undefined>,
   parserOptions: NormalizedParserOptions,
-  svelteParseContext: SvelteParseContext,
+  svelteParseContext: SvelteParseContext
 ): VirtualTypeScriptContext {
   const ctx = new VirtualTypeScriptContext(code);
   ctx.appendOriginal(/^\s*/u.exec(code)![0].length);
@@ -119,7 +119,7 @@ export function analyzeTypeScript(
 
   applyTransforms(
     [...analyzeDollarDerivedScopes(result, svelteParseContext)],
-    ctx,
+    ctx
   );
 
   ctx.appendOriginalToEnd();
@@ -146,7 +146,7 @@ function hasExportDeclaration(ast: TSESParseForESLintResult["ast"]): boolean {
 function analyzeStoreReferenceNames(
   result: TSESParseForESLintResult,
   svelteParseContext: SvelteParseContext,
-  ctx: VirtualTypeScriptContext,
+  ctx: VirtualTypeScriptContext
 ) {
   const globals = getGlobalsForSvelte(svelteParseContext);
   const scopeManager = result.scopeManager;
@@ -175,7 +175,7 @@ function analyzeStoreReferenceNames(
 ? F extends (value: infer V, ...args: any) => any
 ? V
 : never
-: T;`,
+: T;`
     );
     ctx.restoreContext.addRestoreStatementProcess((node, result) => {
       if (
@@ -199,7 +199,7 @@ function analyzeStoreReferenceNames(
     for (const nm of maybeStoreRefNames) {
       const realName = nm.slice(1);
       ctx.appendVirtualScript(
-        `declare let ${nm}: ${storeValueTypeName}<typeof ${realName}>;`,
+        `declare let ${nm}: ${storeValueTypeName}<typeof ${realName}>;`
       );
       ctx.restoreContext.addRestoreStatementProcess((node, result) => {
         if (
@@ -236,14 +236,14 @@ function analyzeDollarDollarVariables(
   result: TSESParseForESLintResult,
   ctx: VirtualTypeScriptContext,
   svelteParseContext: SvelteParseContext,
-  slots: Set<SvelteHTMLElement>,
+  slots: Set<SvelteHTMLElement>
 ) {
   const globals = getGlobalsForSvelte(svelteParseContext);
   const scopeManager = result.scopeManager;
   for (const globalName of globals) {
     if (
       !scopeManager.globalScope!.through.some(
-        (reference) => reference.identifier.name === globalName,
+        (reference) => reference.identifier.name === globalName
       )
     ) {
       continue;
@@ -260,7 +260,7 @@ function analyzeDollarDollarVariables(
         for (const slot of slots) {
           const nameAttr = slot.startTag.attributes.find(
             (attr): attr is SvelteAttribute =>
-              attr.type === "SvelteAttribute" && attr.key.name === "name",
+              attr.type === "SvelteAttribute" && attr.key.name === "name"
           );
           if (!nameAttr || nameAttr.value.length === 0) {
             nameTypes.add('"default"');
@@ -281,17 +281,17 @@ function analyzeDollarDollarVariables(
               .map((value) =>
                 value.type === "SvelteLiteral"
                   ? value.value.replace(/([$`])/gu, "\\$1")
-                  : "${string}",
+                  : "${string}"
               )
-              .join("")}\``,
+              .join("")}\``
           );
         }
 
         appendDeclareVirtualScript(
           globalName,
           `Record<${
             nameTypes.size > 0 ? [...nameTypes].join(" | ") : "any"
-          }, boolean>`,
+          }, boolean>`
         );
         break;
       }
@@ -375,7 +375,7 @@ function appendDummyExport(ctx: VirtualTypeScriptContext) {
 function analyzeRuneVariables(
   result: TSESParseForESLintResult,
   ctx: VirtualTypeScriptContext,
-  svelteParseContext: SvelteParseContext,
+  svelteParseContext: SvelteParseContext
 ) {
   // No processing is needed if the user is determined not to be in Runes mode.
   if (svelteParseContext.runes === false) {
@@ -385,13 +385,13 @@ function analyzeRuneVariables(
   for (const globalName of globalsForRunes) {
     if (
       !scopeManager.globalScope!.through.some(
-        (reference) => reference.identifier.name === globalName,
+        (reference) => reference.identifier.name === globalName
       )
     ) {
       continue;
     }
     switch (globalName) {
-      // See https://github.com/sveltejs/svelte/blob/41b5cd6f5daae3970a9927e062f42b6b62440d16/packages/svelte/types/index.d.ts#L2299
+      // See https://github.com/sveltejs/svelte/blob/3c4a8d425b8192dc11ea2af256d531c51c37ba5d/packages/svelte/types/index.d.ts#L2679
       case "$state": {
         appendDeclareFunctionVirtualScripts(globalName, [
           "<T>(initial: T): T",
@@ -407,7 +407,7 @@ function analyzeRuneVariables(
 
         break;
       }
-      // See https://github.com/sveltejs/svelte/blob/41b5cd6f5daae3970a9927e062f42b6b62440d16/packages/svelte/types/index.d.ts#L2453
+      // See https://github.com/sveltejs/svelte/blob/3c4a8d425b8192dc11ea2af256d531c51c37ba5d/packages/svelte/types/index.d.ts#L2833
       case "$derived": {
         appendDeclareFunctionVirtualScripts(globalName, [
           "<T>(expression: T): T",
@@ -417,7 +417,7 @@ function analyzeRuneVariables(
         ]);
         break;
       }
-      // See https://github.com/sveltejs/svelte/blob/41b5cd6f5daae3970a9927e062f42b6b62440d16/packages/svelte/types/index.d.ts#L2513
+      // See https://github.com/sveltejs/svelte/blob/3c4a8d425b8192dc11ea2af256d531c51c37ba5d/packages/svelte/types/index.d.ts#L2893
       case "$effect": {
         appendDeclareFunctionVirtualScripts(globalName, [
           "(fn: () => void | (() => void)): void",
@@ -429,27 +429,33 @@ function analyzeRuneVariables(
         ]);
         break;
       }
-      // See https://github.com/sveltejs/svelte/blob/41b5cd6f5daae3970a9927e062f42b6b62440d16/packages/svelte/types/index.d.ts#L2615
+      // See https://github.com/sveltejs/svelte/blob/3c4a8d425b8192dc11ea2af256d531c51c37ba5d/packages/svelte/types/index.d.ts#L2997
       case "$props": {
         // Use type parameters to avoid `@typescript-eslint/no-unsafe-assignment` errors.
         appendDeclareFunctionVirtualScripts(globalName, ["<T>(): T"]);
+        appendDeclareNamespaceVirtualScripts(globalName, [
+          "export function id(): string;",
+        ]);
         break;
       }
-      // See https://github.com/sveltejs/svelte/blob/41b5cd6f5daae3970a9927e062f42b6b62440d16/packages/svelte/types/index.d.ts#L2626
+      // See https://github.com/sveltejs/svelte/blob/3c4a8d425b8192dc11ea2af256d531c51c37ba5d/packages/svelte/types/index.d.ts#L3038
       case "$bindable": {
         appendDeclareFunctionVirtualScripts(globalName, [
           "<T>(fallback?: T): T",
         ]);
         break;
       }
-      // See https://github.com/sveltejs/svelte/blob/41b5cd6f5daae3970a9927e062f42b6b62440d16/packages/svelte/types/index.d.ts#L2646
+      // See https://github.com/sveltejs/svelte/blob/3c4a8d425b8192dc11ea2af256d531c51c37ba5d/packages/svelte/types/index.d.ts#L3081
       case "$inspect": {
         appendDeclareFunctionVirtualScripts(globalName, [
           `<T extends any[]>(...values: T): { with: (fn: (type: 'init' | 'update', ...values: T) => void) => void }`,
         ]);
+        appendDeclareNamespaceVirtualScripts(globalName, [
+          "export function trace(name?: string): void;",
+        ]);
         break;
       }
-      // See https://github.com/sveltejs/svelte/blob/41b5cd6f5daae3970a9927e062f42b6b62440d16/packages/svelte/types/index.d.ts#L2669
+      // See https://github.com/sveltejs/svelte/blob/3c4a8d425b8192dc11ea2af256d531c51c37ba5d/packages/svelte/types/index.d.ts#L3144
       case "$host": {
         appendDeclareFunctionVirtualScripts(globalName, [
           `<El extends HTMLElement = HTMLElement>(): El`,
@@ -494,7 +500,7 @@ function analyzeRuneVariables(
 
   function appendDeclareNamespaceVirtualScripts(
     name: string,
-    scripts: string[],
+    scripts: string[]
   ) {
     for (const script of scripts) {
       ctx.appendVirtualScript(`declare namespace ${name} { ${script} }`);
@@ -529,11 +535,11 @@ function analyzeRuneVariables(
  * Transform source code to provide the correct type information in the `$:` statements.
  */
 function* analyzeReactiveScopes(
-  result: TSESParseForESLintResult,
+  result: TSESParseForESLintResult
 ): Iterable<TransformInfo> {
   const scopeManager = result.scopeManager;
   const throughIds = scopeManager.globalScope!.through.map(
-    (reference) => reference.identifier,
+    (reference) => reference.identifier
   );
   for (const statement of result.ast.body) {
     if (statement.type === "LabeledStatement" && statement.label.name === "$") {
@@ -550,8 +556,7 @@ function* analyzeReactiveScopes(
         const left = statement.body.expression.left;
         if (
           throughIds.some(
-            (id) =>
-              left.range[0] <= id.range[0] && id.range[1] <= left.range[1],
+            (id) => left.range[0] <= id.range[0] && id.range[1] <= left.range[1]
           )
         ) {
           const node = statement;
@@ -564,7 +569,7 @@ function* analyzeReactiveScopes(
                 left,
                 expression,
                 result.ast.tokens,
-                ctx,
+                ctx
               ),
           };
           continue;
@@ -584,13 +589,13 @@ function* analyzeReactiveScopes(
  */
 function* analyzeDollarDerivedScopes(
   result: TSESParseForESLintResult,
-  svelteParseContext: SvelteParseContext,
+  svelteParseContext: SvelteParseContext
 ): Iterable<TransformInfo> {
   // No processing is needed if the user is determined not to be in Runes mode.
   if (svelteParseContext.runes === false) return;
   const scopeManager = result.scopeManager;
   const derivedReferences = scopeManager.globalScope!.through.filter(
-    (reference) => reference.identifier.name === "$derived",
+    (reference) => reference.identifier.name === "$derived"
   );
   if (!derivedReferences.length) {
     return;
@@ -618,7 +623,7 @@ function* analyzeDollarDerivedScopes(
  */
 function analyzeRenderScopes(
   code: { script: string; render: string; rootScope: string },
-  ctx: VirtualTypeScriptContext,
+  ctx: VirtualTypeScriptContext
 ) {
   ctx.appendOriginal(code.script.length);
   const renderFunctionName = ctx.generateUniqueId("render");
@@ -637,7 +642,7 @@ function analyzeRenderScopes(
     program.body.splice(
       program.body.indexOf(node),
       1,
-      ...node.declaration.body.body,
+      ...node.declaration.body.body
     );
     for (const body of node.declaration.body.body) {
       body.parent = program;
@@ -655,7 +660,7 @@ function analyzeRenderScopes(
  */
 function applyTransforms(
   transforms: TransformInfo[],
-  ctx: VirtualTypeScriptContext,
+  ctx: VirtualTypeScriptContext
 ) {
   transforms.sort((a, b) => a.node.range[0] - b.node.range[0]);
 
@@ -677,7 +682,7 @@ function transformForDeclareReactiveVar(
   id: TSESTree.Identifier | TSESTree.ArrayPattern | TSESTree.ObjectPattern,
   expression: TSESTree.AssignmentExpression,
   tokens: TSESTree.Token[],
-  ctx: VirtualTypeScriptContext,
+  ctx: VirtualTypeScriptContext
 ): void {
   // e.g.
   //  From:
@@ -721,7 +726,7 @@ function transformForDeclareReactiveVar(
   let expressionCloseParen: TSESTree.Token | null = null;
   const startIndex = sortedLastIndex(
     tokens,
-    (target) => target.range[0] - statement.range[0],
+    (target) => target.range[0] - statement.range[0]
   );
   for (let index = startIndex; index < tokens.length; index++) {
     const token = tokens[index];
@@ -761,7 +766,7 @@ function transformForDeclareReactiveVar(
   ctx.appendVirtualScript("let ");
   ctx.appendOriginal(eq ? eq.range[1] : expression.right.range[0]);
   ctx.appendVirtualScript(
-    `${functionId}();\nfunction ${functionId}(){let ${tmpVarId};return (${tmpVarId} = `,
+    `${functionId}();\nfunction ${functionId}(){let ${tmpVarId};return (${tmpVarId} = `
   );
   ctx.appendOriginal(expression.right.range[1]);
   ctx.appendVirtualScript(`)`);
@@ -867,7 +872,7 @@ function transformForDeclareReactiveVar(
     addElementsToSortedArray(
       program.tokens,
       [...openParens, ...closeParens],
-      (a, b) => a.range[0] - b.range[0],
+      (a, b) => a.range[0] - b.range[0]
     );
 
     const scopeManager = result.scopeManager as ScopeManager;
@@ -896,7 +901,7 @@ function transformForDeclareReactiveVar(
  */
 function transformForReactiveStatement(
   statement: TSESTree.LabeledStatement,
-  ctx: VirtualTypeScriptContext,
+  ctx: VirtualTypeScriptContext
 ) {
   const functionId = ctx.generateUniqueId("reactiveStatementScopeFunction");
   const originalBody = statement.body;
@@ -933,13 +938,13 @@ function transformForReactiveStatement(
  */
 function transformForDollarDerived(
   derivedCall: TSESTree.CallExpression,
-  ctx: VirtualTypeScriptContext,
+  ctx: VirtualTypeScriptContext
 ) {
   const functionId = ctx.generateUniqueId("$derivedArgument");
   const expression = derivedCall.arguments[0];
   ctx.appendOriginal(expression.range[0]);
   ctx.appendVirtualScript(
-    `(()=>{return ${functionId}();function ${functionId}(){return `,
+    `(()=>{return ${functionId}();function ${functionId}(){return `
   );
   ctx.appendOriginal(expression.range[1]);
   ctx.appendVirtualScript(`}})()`);
@@ -988,7 +993,7 @@ function transformForDollarDerived(
       removeFunctionScope(arg.callee.body.body[1], scopeManager);
       removeIdentifierReference(
         arg.callee.body.body[0].argument.callee,
-        scopeManager.acquire(arg.callee)!,
+        scopeManager.acquire(arg.callee)!
       );
       removeFunctionScope(arg.callee, scopeManager);
       return true;
@@ -1002,7 +1007,7 @@ function removeFunctionScope(
     | TSESTree.FunctionDeclaration
     | TSESTree.FunctionExpression
     | TSESTree.ArrowFunctionExpression,
-  scopeManager: ScopeManager,
+  scopeManager: ScopeManager
 ) {
   const scope = scopeManager.acquire(node)!;
   const upper = scope.upper!;
@@ -1024,12 +1029,12 @@ function removeFunctionScope(
       addElementsToSortedArray(
         upperVariable.identifiers,
         variable.identifiers,
-        (a, b) => a.range![0] - b.range![0],
+        (a, b) => a.range![0] - b.range![0]
       );
       addElementsToSortedArray(
         upperVariable.defs,
         variable.defs,
-        (a, b) => a.node.range![0] - b.node.range![0],
+        (a, b) => a.node.range![0] - b.node.range![0]
       );
       addAllReferences(upperVariable.references, variable.references);
     } else {