feat: add svelteFeatures.runes option and add rune symbols to global scope

Author: ota-meshi

README.md

@@ -169,7 +169,22 @@ module.exports = {
 }
 ```
 
-### parserOptions.runes
+### parserOptions.svelteFeatures
+
+You can use `parserOptions.svelteFeatures` property to specify how to parse related to Svelte features. For example:
+
+```json
+{
+    "parser": "svelte-eslint-parser",
+    "parserOptions": {
+        "svelteFeatures": {
+            "runes": false
+        }
+    }
+}
+```
+
+#### parserOptions.svelteFeatures.runes
 
 ***This is an experimental feature. It may be changed or removed in minor versions without notice.***
 
@@ -179,7 +194,9 @@ If set to `true`, Rune symbols will be parsed. In this mode, the parser also par
 {
     "parser": "svelte-eslint-parser",
     "parserOptions": {
-        "runes": true
+        "svelteFeatures": {
+            "runes": true // Default `false`
+        }
     }
 }
 ```
@@ -193,7 +210,9 @@ When using this mode in an ESLint configuration, it is recommended to set it per
             "files": ["*.svelte"],
             "parser": "svelte-eslint-parser",
             "parserOptions": {
-                "runes": true,
+                "svelteFeatures": {
+                    "runes": true,
+                },
                 "parser": "...",
                 ...
             }
@@ -202,15 +221,19 @@ When using this mode in an ESLint configuration, it is recommended to set it per
             "files": ["*.svelte.js"],
             "parser": "svelte-eslint-parser",
             "parserOptions": {
-                "runes": true,
+                "svelteFeatures": {
+                    "runes": true,
+                },
                 ...
             }
         },
         {
             "files": ["*.svelte.ts"],
             "parser": "svelte-eslint-parser",
             "parserOptions": {
-                "runes": true,
+                "svelteFeatures": {
+                    "runes": true,
+                },
                 "parser": "...(ts parser)...",
                 ...
             }
@@ -219,6 +242,18 @@ When using this mode in an ESLint configuration, it is recommended to set it per
 }
 ```
 
+Even if `runes` is not set to `true`, if it is enabled in the `<svelte:option>` of the `*.svelte` file, it will be parsed as `runes` mode is enabled
+
+```svelte
+<svelte:options runes={true} />
+```
+
+Also, even if `runes` is set to `true`, if it is disabled in the `<svelte:option>` of the `*.svelte` file, it will be parsed as `runes` mode is disabled.
+
+```svelte
+<svelte:options runes={false} />
+```
+
 ## :computer: Editor Integrations
 
 ### Visual Studio Code

src/context/index.ts

@@ -136,6 +136,8 @@ export class Context {
 
   public readonly slots = new Set<SvelteHTMLElement>();
 
+  public runes: boolean | null = null;
+
   public readonly elements = new Map<
     SvelteElement,
     | SvAST.InlineComponent

src/parser/analyze-scope.ts

@@ -217,6 +217,30 @@ export function analyzePropsScope(
   }
 }
 
+/**  Analyze Runes. e.g. $state() */
+export function analyzeRunesScope(scopeManager: ScopeManager): void {
+  const globalScope = scopeManager.globalScope;
+  // https://svelte-5-preview.vercel.app/docs/runes
+  for (const $name of ["$state", "$derived", "$effect", "$props"]) {
+    if (globalScope.set.has($name)) continue;
+    const variable = new Variable();
+    variable.name = $name;
+    (variable as any).scope = globalScope;
+    globalScope.variables.push(variable);
+    globalScope.set.set($name, variable);
+    globalScope.through = globalScope.through.filter((reference) => {
+      if (reference.identifier.name === $name) {
+        // Links the variable and the reference.
+        // And this reference is removed from `Scope#through`.
+        reference.resolved = variable;
+        addReference(variable.references, reference);
+        return false;
+      }
+      return true;
+    });
+  }
+}
+
 /** Remove reference from through */
 function removeReferenceFromThrough(reference: Reference, baseScope: Scope) {
   const variable = reference.resolved!;

src/parser/converts/element.ts

@@ -810,7 +810,27 @@ function convertOptionsElement(
   parent: SvelteSpecialElement["parent"],
   ctx: Context,
 ): SvelteSpecialElement {
-  return convertSpecialElement(node, parent, ctx);
+  const element = convertSpecialElement(node, parent, ctx);
+
+  // Extract rune mode from options.
+  for (const attr of node.attributes) {
+    if (attr.type === "Attribute" && attr.name === "runes") {
+      if (attr.value === true) {
+        ctx.runes = true;
+      } else if (attr.value.length === 1) {
+        const val = attr.value[0];
+        if (
+          val.type === "MustacheTag" &&
+          val.expression.type === "Literal" &&
+          typeof val.expression.value === "boolean"
+        ) {
+          ctx.runes = val.expression.value;
+        }
+      }
+    }
+  }
+
+  return element;
 }
 
 /** Convert for <svelte:fragment> element. */

src/parser/index.ts

@@ -17,6 +17,7 @@ import { parseTemplate } from "./template";
 import {
   analyzePropsScope,
   analyzeReactiveScope,
+  analyzeRunesScope,
   analyzeStoreScope,
 } from "./analyze-scope";
 import { ParseError } from "../errors";
@@ -65,11 +66,11 @@ type ParseResult = {
     (
       | {
           isSvelte: true;
-          svelteRunes: boolean;
+          svelteOptions: { runes: boolean };
           getSvelteHtmlAst: () => SvAST.Fragment;
           getStyleContext: () => StyleContext;
         }
-      | { isSvelte: false; svelteRunes: boolean }
+      | { isSvelte: false; svelteOptions: { runes: boolean } }
     );
   visitorKeys: { [type: string]: string[] };
   scopeManager: ScopeManager;
@@ -83,7 +84,7 @@ export function parseForESLint(code: string, options?: any): ParseResult {
   if (
     parserOptions.filePath &&
     !parserOptions.filePath.endsWith(".svelte") &&
-    parserOptions.runes
+    parserOptions.svelteFeatures.runes
   ) {
     const trimmed = code.trim();
     if (!trimmed.startsWith("<") && !trimmed.endsWith(">")) {
@@ -108,6 +109,8 @@ function parseAsSvelte(
     parserOptions,
   );
 
+  const runes = ctx.runes ?? parserOptions.svelteFeatures.runes;
+
   const scripts = ctx.sourceCode.scripts;
   const resultScript = ctx.isTypeScript()
     ? parseTypeScript(
@@ -132,8 +135,9 @@ function parseAsSvelte(
   analyzeStoreScope(resultScript.scopeManager!); // for reactive vars
 
   // Add $$xxx variable
+  const globalScope = resultScript.scopeManager!.globalScope;
   for (const $$name of globals) {
-    const globalScope = resultScript.scopeManager!.globalScope;
+    if (globalScope.set.has($$name)) continue;
     const variable = new Variable();
     variable.name = $$name;
     (variable as any).scope = globalScope;
@@ -151,6 +155,10 @@ function parseAsSvelte(
     });
   }
 
+  if (runes) {
+    analyzeRunesScope(resultScript.scopeManager!);
+  }
+
   const ast = resultTemplate.ast;
 
   const statements = [...resultScript.ast.body];
@@ -204,6 +212,7 @@ function parseAsSvelte(
   resultScript.ast = ast as any;
   resultScript.services = Object.assign(resultScript.services || {}, {
     isSvelte: true,
+    svelteOptions: { runes },
     getSvelteHtmlAst() {
       return resultTemplate.svelteAst.html;
     },
@@ -229,11 +238,11 @@ function parseAsScript(
   parserOptions: NormalizedParserOptions,
 ): ParseResult {
   const lang = parserOptions.filePath?.split(".").pop() || "js";
-  // TODO support runes
   const resultScript = parseScript(code, { lang }, parserOptions);
+  analyzeRunesScope(resultScript.scopeManager!);
   resultScript.services = Object.assign(resultScript.services || {}, {
     isSvelte: false,
-    runes: parserOptions.runes,
+    svelteOptions: { runes: true },
   });
   resultScript.visitorKeys = Object.assign({}, KEYS, resultScript.visitorKeys);
   return resultScript as any;
@@ -249,7 +258,7 @@ type NormalizedParserOptions = {
   comment: boolean;
   eslintVisitorKeys: boolean;
   eslintScopeManager: boolean;
-  runes: boolean;
+  svelteFeatures: { runes: boolean };
   filePath?: string;
 };
 
@@ -265,7 +274,10 @@ function normalizeParserOptions(options: any): NormalizedParserOptions {
     comment: true,
     eslintVisitorKeys: true,
     eslintScopeManager: true,
-    rune: false,
+    svelteFeatures: {
+      rune: false,
+      ...(options?.svelteFeatures || {}),
+    },
     ...(options || {}),
   };
   parserOptions.sourceType = "module";

tests/fixtures/parser/ast/svelte-5-preview/docs/fine-grained-reactivity/_config.json

@@ -1,3 +1,5 @@
 {
-    "runes": true
+    "svelteFeatures": {
+        "runes": true
+    }
 }