feat: makes it optional whether to parse runes.

Author: ota-meshi

README.md

@@ -259,6 +259,12 @@ export default [
       parser: svelteParser,
       parserOptions: {
         svelteFeatures: {
+          /* -- Experimental Svelte Features -- */
+          /* It may be changed or removed in minor versions without notice. */
+          // If true, it will analyze Runes.
+          // By default, it will try to read `compilerOptions.runes` from `svelte.config.js`.
+          // However, note that if it cannot be resolved due to static analysis, it will behave as false.
+          runes: false,
           /* -- Experimental Svelte Features -- */
           /* It may be changed or removed in minor versions without notice. */
           // Whether to parse the `generics` attribute.
@@ -278,6 +284,12 @@ For example in `.eslintrc.*`:
   "parser": "svelte-eslint-parser",
   "parserOptions": {
     "svelteFeatures": {
+      /* -- Experimental Svelte Features -- */
+      /* It may be changed or removed in minor versions without notice. */
+      // If true, it will analyze Runes.
+      // By default, it will try to read `compilerOptions.runes` from `svelte.config.js`.
+      // However, note that if it cannot be resolved due to static analysis, it will behave as false.
+      "runes": false,
       /* -- Experimental Svelte Features -- */
       /* It may be changed or removed in minor versions without notice. */
       // Whether to parse the `generics` attribute.
@@ -292,7 +304,7 @@ For example in `.eslintrc.*`:
 
 **_This is an experimental feature. It may be changed or removed in minor versions without notice._**
 
-If you install Svelte v5 the parser will be able to parse runes, and will also be able to parse `*.js` and `*.ts` files.
+If you install Svelte v5 and turn on runes (`compilerOptions.runes` in `svelte.config.js` or `parserOptions.svelteFeatures.runes` in ESLint config is `true`), the parser will be able to parse runes, and will also be able to parse `*.js` and `*.ts` files.
 
 When using this mode in an ESLint configuration, it is recommended to set it per file pattern as below.
 

src/parser/analyze-scope.ts

@@ -10,6 +10,7 @@ import type {
 import { addReference, addVariable, getScopeFromNode } from "../scope";
 import { addElementToSortedArray } from "../utils";
 import type { NormalizedParserOptions } from "./parser-options";
+import type { SvelteParseContext } from "./svelte-parse-context";
 /**
  * Analyze scope
  */
@@ -160,6 +161,7 @@ export function analyzeStoreScope(scopeManager: ScopeManager): void {
 export function analyzePropsScope(
   body: SvelteScriptElement,
   scopeManager: ScopeManager,
+  svelteParseContext: SvelteParseContext,
 ): void {
   const moduleScope = scopeManager.scopes.find(
     (scope) => scope.type === "module",
@@ -187,23 +189,25 @@ export function analyzePropsScope(
         }
       }
     } else if (node.type === "VariableDeclaration") {
-      // Process for Svelte v5 Runes props. e.g. `let { x = $bindable() } = $props()`;
-      for (const decl of node.declarations) {
-        if (
-          decl.init?.type === "CallExpression" &&
-          decl.init.callee.type === "Identifier" &&
-          decl.init.callee.name === "$props" &&
-          decl.id.type === "ObjectPattern"
-        ) {
-          for (const pattern of extractPattern(decl.id)) {
-            if (
-              pattern.type === "AssignmentPattern" &&
-              pattern.left.type === "Identifier" &&
-              pattern.right.type === "CallExpression" &&
-              pattern.right.callee.type === "Identifier" &&
-              pattern.right.callee.name === "$bindable"
-            ) {
-              addPropReference(pattern.left, moduleScope);
+      if (svelteParseContext.runes) {
+        // Process for Svelte v5 Runes props. e.g. `let { x = $bindable() } = $props()`;
+        for (const decl of node.declarations) {
+          if (
+            decl.init?.type === "CallExpression" &&
+            decl.init.callee.type === "Identifier" &&
+            decl.init.callee.name === "$props" &&
+            decl.id.type === "ObjectPattern"
+          ) {
+            for (const pattern of extractPattern(decl.id)) {
+              if (
+                pattern.type === "AssignmentPattern" &&
+                pattern.left.type === "Identifier" &&
+                pattern.right.type === "CallExpression" &&
+                pattern.right.callee.type === "Identifier" &&
+                pattern.right.callee.name === "$bindable"
+              ) {
+                addPropReference(pattern.left, moduleScope);
+              }
             }
           }
         }

src/parser/globals.ts

@@ -1,6 +1,6 @@
-import { svelteVersion } from "./svelte-version";
+import type { SvelteParseContext } from "./svelte-parse-context";
 
-const globalsForSvelte4 = ["$$slots", "$$props", "$$restProps"] as const;
+const globalsForSvelte = ["$$slots", "$$props", "$$restProps"] as const;
 export const globalsForRunes = [
   "$state",
   "$derived",
@@ -10,10 +10,22 @@ export const globalsForRunes = [
   "$inspect",
   "$host",
 ] as const;
-const globalsForSvelte5 = [...globalsForSvelte4, ...globalsForRunes];
-export const globals = svelteVersion.gte(5)
-  ? globalsForSvelte5
-  : globalsForSvelte4;
-export const globalsForSvelteScript = svelteVersion.gte(5)
-  ? globalsForRunes
-  : [];
+type Global =
+  | (typeof globalsForSvelte)[number]
+  | (typeof globalsForRunes)[number];
+export function getGlobalsForSvelte(
+  svelteParseContext: SvelteParseContext,
+): readonly Global[] {
+  if (svelteParseContext.runes) {
+    return [...globalsForSvelte, ...globalsForRunes];
+  }
+  return globalsForSvelte;
+}
+export function getGlobalsForSvelteScript(
+  svelteParseContext: SvelteParseContext,
+): readonly Global[] {
+  if (svelteParseContext.runes) {
+    return globalsForRunes;
+  }
+  return [];
+}

src/parser/index.ts

@@ -34,11 +34,18 @@ import {
   styleNodeLoc,
   styleNodeRange,
 } from "./style-context";
-import { globals, globalsForSvelteScript } from "./globals";
-import { svelteVersion } from "./svelte-version";
+import { getGlobalsForSvelte, getGlobalsForSvelteScript } from "./globals";
 import type { NormalizedParserOptions } from "./parser-options";
 import { isTypeScript, normalizeParserOptions } from "./parser-options";
 import { getFragmentFromRoot } from "./compat";
+import {
+  isEnableRunes,
+  resolveSvelteParseContextForSvelte,
+  resolveSvelteParseContextForSvelteScript,
+  type SvelteParseContext,
+} from "./svelte-parse-context";
+import type { StaticSvelteConfig } from "../svelte-config";
+import { resolveSvelteConfig } from "../svelte-config";
 
 export {
   StyleContext,
@@ -74,8 +81,13 @@ type ParseResult = {
           isSvelteScript: false;
           getSvelteHtmlAst: () => SvAST.Fragment | Compiler.Fragment;
           getStyleContext: () => StyleContext;
+          svelteParseContext: SvelteParseContext;
+        }
+      | {
+          isSvelte: false;
+          isSvelteScript: true;
+          svelteParseContext: SvelteParseContext;
         }
-      | { isSvelte: false; isSvelteScript: true }
     );
   visitorKeys: { [type: string]: string[] };
   scopeManager: ScopeManager;
@@ -84,29 +96,35 @@ type ParseResult = {
  * Parse source code
  */
 export function parseForESLint(code: string, options?: any): ParseResult {
+  const svelteConfig = resolveSvelteConfig(options?.filePath);
   const parserOptions = normalizeParserOptions(options);
 
   if (
-    svelteVersion.hasRunes &&
+    isEnableRunes(svelteConfig, parserOptions) &&
     parserOptions.filePath &&
     !parserOptions.filePath.endsWith(".svelte") &&
     // If no `filePath` is set in ESLint, "<input>" will be specified.
     parserOptions.filePath !== "<input>"
   ) {
     const trimmed = code.trim();
     if (!trimmed.startsWith("<") && !trimmed.endsWith(">")) {
-      return parseAsScript(code, parserOptions);
+      const svelteParseContext = resolveSvelteParseContextForSvelteScript(
+        svelteConfig,
+        parserOptions,
+      );
+      return parseAsScript(code, parserOptions, svelteParseContext);
     }
   }
 
-  return parseAsSvelte(code, parserOptions);
+  return parseAsSvelte(code, svelteConfig, parserOptions);
 }
 
 /**
  * Parse source code as svelte component
  */
 function parseAsSvelte(
   code: string,
+  svelteConfig: StaticSvelteConfig | null,
   parserOptions: NormalizedParserOptions,
 ): ParseResult {
   const ctx = new Context(code, parserOptions);
@@ -115,14 +133,19 @@ function parseAsSvelte(
     ctx,
     parserOptions,
   );
+  const svelteParseContext = resolveSvelteParseContextForSvelte(
+    svelteConfig,
+    parserOptions,
+    resultTemplate.svelteAst,
+  );
 
   const scripts = ctx.sourceCode.scripts;
   const resultScript = ctx.isTypeScript()
     ? parseTypeScriptInSvelte(
         scripts.getCurrentVirtualCodeInfo(),
         scripts.attrs,
         parserOptions,
-        { slots: ctx.slots },
+        { slots: ctx.slots, svelteParseContext },
       )
     : parseScriptInSvelte(
         scripts.getCurrentVirtualCode(),
@@ -141,7 +164,10 @@ function parseAsSvelte(
   analyzeSnippetsScope(ctx.snippets, resultScript.scopeManager!);
 
   // Add $$xxx variable
-  addGlobalVariables(resultScript.scopeManager!, globals);
+  addGlobalVariables(
+    resultScript.scopeManager!,
+    getGlobalsForSvelte(svelteParseContext),
+  );
 
   const ast = resultTemplate.ast;
 
@@ -177,7 +203,7 @@ function parseAsSvelte(
           attr.value[0].value === "module",
       )
     ) {
-      analyzePropsScope(body, resultScript.scopeManager!);
+      analyzePropsScope(body, resultScript.scopeManager!, svelteParseContext);
     }
   }
   if (statements.length) {
@@ -208,6 +234,7 @@ function parseAsSvelte(
     },
     styleNodeLoc,
     styleNodeRange,
+    svelteParseContext,
   });
   resultScript.visitorKeys = Object.assign({}, KEYS, resultScript.visitorKeys);
 
@@ -220,18 +247,23 @@ function parseAsSvelte(
 function parseAsScript(
   code: string,
   parserOptions: NormalizedParserOptions,
+  svelteParseContext: SvelteParseContext,
 ): ParseResult {
   const lang = parserOptions.filePath?.split(".").pop();
   const resultScript = isTypeScript(parserOptions, lang)
-    ? parseTypeScript(code, { lang }, parserOptions)
+    ? parseTypeScript(code, { lang }, parserOptions, svelteParseContext)
     : parseScript(code, { lang }, parserOptions);
 
   // Add $$xxx variable
-  addGlobalVariables(resultScript.scopeManager!, globalsForSvelteScript);
+  addGlobalVariables(
+    resultScript.scopeManager!,
+    getGlobalsForSvelteScript(svelteParseContext),
+  );
 
   resultScript.services = Object.assign(resultScript.services || {}, {
     isSvelte: false,
     isSvelteScript: true,
+    svelteParseContext,
   });
   resultScript.visitorKeys = Object.assign({}, KEYS, resultScript.visitorKeys);
   return resultScript as any;

src/parser/parser-options.ts

@@ -20,6 +20,10 @@ export type NormalizedParserOptions = {
     [key: string]: any;
   };
   svelteFeatures?: {
+    // If true, it will analyze Runes.
+    // By default, it will try to read `compilerOptions.runes` from `svelte.config.js`.
+    // However, note that if it cannot be resolved due to static analysis, it will behave as false.
+    runes?: boolean;
     /* -- Experimental Svelte Features -- */
     // Whether to parse the `generics` attribute.
     // See https://github.com/sveltejs/rfcs/pull/38

src/parser/svelte-parse-context.ts

@@ -0,0 +1,71 @@
+import type * as Compiler from "svelte/compiler";
+import type * as SvAST from "./svelte-ast-types";
+import type { NormalizedParserOptions } from "./parser-options";
+import { compilerVersion, svelteVersion } from "./svelte-version";
+import type { StaticSvelteConfig } from "../svelte-config";
+
+/** The context for parsing. */
+export type SvelteParseContext = {
+  /**
+   * Whether to use Runes mode.
+   * May be `true` if the user is using Svelte v5.
+   * Resolved from `svelte.config.js` or `parserOptions`, but may be overridden by `<svelte:options>`.
+   */
+  runes: boolean;
+  /** The version of "svelte/compiler". */
+  compilerVersion: string;
+  /** The result of static analysis of `svelte.config.js`. */
+  svelteConfig: StaticSvelteConfig | null;
+};
+
+export function isEnableRunes(
+  svelteConfig: StaticSvelteConfig | null,
+  parserOptions: NormalizedParserOptions,
+): boolean {
+  if (!svelteVersion.gte(5)) return false;
+  if (parserOptions.svelteFeatures?.runes != null) {
+    return Boolean(parserOptions.svelteFeatures.runes);
+  } else if (svelteConfig?.compilerOptions?.runes != null) {
+    return Boolean(svelteConfig.compilerOptions.runes);
+  }
+  return false;
+}
+
+export function resolveSvelteParseContextForSvelte(
+  svelteConfig: StaticSvelteConfig | null,
+  parserOptions: NormalizedParserOptions,
+  svelteAst: Compiler.Root | SvAST.AstLegacy,
+): SvelteParseContext {
+  const svelteOptions = (svelteAst as Compiler.Root).options;
+  if (svelteOptions?.runes != null) {
+    return {
+      runes: svelteOptions.runes,
+      compilerVersion,
+      svelteConfig,
+    };
+  }
+
+  return {
+    runes: isEnableRunes(svelteConfig, parserOptions),
+    compilerVersion,
+    svelteConfig,
+  };
+}
+
+export function resolveSvelteParseContextForSvelteScript(
+  svelteConfig: StaticSvelteConfig | null,
+  parserOptions: NormalizedParserOptions,
+): SvelteParseContext {
+  return resolveSvelteParseContext(svelteConfig, parserOptions);
+}
+
+function resolveSvelteParseContext(
+  svelteConfig: StaticSvelteConfig | null,
+  parserOptions: NormalizedParserOptions,
+): SvelteParseContext {
+  return {
+    runes: isEnableRunes(svelteConfig, parserOptions),
+    compilerVersion,
+    svelteConfig,
+  };
+}

src/parser/svelte-version.ts

@@ -1,10 +1,11 @@
-import { VERSION as SVELTE_VERSION } from "svelte/compiler";
+import { VERSION as compilerVersion } from "svelte/compiler";
 
-const verStrings = SVELTE_VERSION.split(".");
+export { compilerVersion };
+
+const verStrings = compilerVersion.split(".");
 
 export const svelteVersion = {
   gte(v: number): boolean {
     return Number(verStrings[0]) >= v;
   },
-  hasRunes: Number(verStrings[0]) >= 5,
 };