fix: update svelte to 5.0.0-next.181 and fix for {:else if} (#548)

ota-meshi · web-flow · commit dfe5cb815ef2 · 2024-07-11T19:17:01.000+09:00
diff --git a/.changeset/new-rats-sneeze.md b/.changeset/new-rats-sneeze.md
@@ -0,0 +1,5 @@
+---
+"svelte-eslint-parser": minor
+---
+
+fix: update svelte to 5.0.0-next.181 and fix for `{:else if}`
diff --git a/package.json b/package.json
@@ -47,7 +47,7 @@
     "version:ci": "env-cmd -e version-ci pnpm run build:meta && changeset version"
   },
   "peerDependencies": {
-    "svelte": "^3.37.0 || ^4.0.0 || ^5.0.0-next.115"
+    "svelte": "^3.37.0 || ^4.0.0 || ^5.0.0-next.181"
   },
   "peerDependenciesMeta": {
     "svelte": {
@@ -58,22 +58,22 @@
     "eslint-scope": "^7.2.2",
     "eslint-visitor-keys": "^3.4.3",
     "espree": "^9.6.1",
-    "postcss": "^8.4.38",
+    "postcss": "^8.4.39",
     "postcss-scss": "^4.0.9"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",
-    "@changesets/cli": "^2.27.5",
-    "@changesets/get-release-plan": "^4.0.2",
+    "@changesets/cli": "^2.27.7",
+    "@changesets/get-release-plan": "^4.0.3",
     "@ota-meshi/eslint-plugin": "^0.15.3",
     "@types/benchmark": "^2.1.5",
     "@types/chai": "^4.3.16",
     "@types/eslint": "^8.56.10",
     "@types/eslint-scope": "^3.7.7",
     "@types/eslint-visitor-keys": "^3.3.0",
     "@types/estree": "^1.0.5",
-    "@types/mocha": "^10.0.6",
-    "@types/node": "^20.14.4",
+    "@types/mocha": "^10.0.7",
+    "@types/node": "^20.14.10",
     "@types/semver": "^7.5.8",
     "@typescript-eslint/eslint-plugin": "^7.16.0",
     "@typescript-eslint/parser": "~7.16.0",
@@ -86,28 +86,28 @@
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
-    "eslint-plugin-json-schema-validator": "^5.1.0",
+    "eslint-plugin-json-schema-validator": "^5.1.2",
     "eslint-plugin-jsonc": "^2.16.0",
     "eslint-plugin-n": "^17.9.0",
     "eslint-plugin-node-dependencies": "^0.12.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-regexp": "^2.6.0",
-    "eslint-plugin-svelte": "^2.40.0",
+    "eslint-plugin-svelte": "^2.41.0",
     "eslint-plugin-yml": "^1.14.0",
     "estree-walker": "^3.0.3",
     "locate-character": "^3.0.0",
     "magic-string": "^0.30.10",
-    "mocha": "^10.4.0",
+    "mocha": "^10.6.0",
     "mocha-chai-jest-snapshot": "^1.1.4",
     "nyc": "^17.0.0",
     "prettier": "~3.3.2",
     "prettier-plugin-pkg": "^0.18.1",
     "prettier-plugin-svelte": "^3.2.5",
     "rimraf": "^6.0.0",
     "semver": "^7.6.2",
-    "svelte": "^5.0.0-next.158",
-    "svelte2tsx": "^0.7.10",
-    "typescript": "~5.5.0",
+    "svelte": "^5.0.0-next.181",
+    "svelte2tsx": "^0.7.13",
+    "typescript": "~5.5.3",
     "typescript-eslint-parser-for-extra-files": "^0.7.0"
   },
   "publishConfig": {
diff --git a/src/context/index.ts b/src/context/index.ts
@@ -12,7 +12,7 @@ import type {
 } from "../ast";
 import type ESTree from "estree";
 import type * as SvAST from "../parser/svelte-ast-types";
-import type * as Compiler from "svelte/compiler";
+import type * as Compiler from "../parser/svelte-ast-types-for-v5";
 import { ScriptLetContext } from "./script-let";
 import { LetDirectiveCollections } from "./let-directive-collection";
 import { parseAttributes } from "../parser/html";
@@ -169,19 +169,7 @@ export class Context {
     | SvAST.SlotTemplate
     | SvAST.Slot
     | SvAST.Title
-    | Compiler.RegularElement
-    | Compiler.Component
-    | Compiler.SvelteComponent
-    | Compiler.SvelteElement
-    | Compiler.SvelteWindow
-    | Compiler.SvelteBody
-    | Compiler.SvelteHead
-    | Compiler.SvelteDocument
-    | Compiler.SvelteFragment
-    | Compiler.SvelteSelf
-    | Compiler.SvelteOptionsRaw
-    | Compiler.SlotElement
-    | Compiler.TitleElement
+    | Compiler.ElementLike
   >();
 
   public readonly snippets: SvelteSnippetBlock[] = [];
diff --git a/src/parser/compat.ts b/src/parser/compat.ts
@@ -1,7 +1,7 @@
 /** Compatibility for Svelte v4 <-> v5 */
 import type ESTree from "estree";
 import type * as SvAST from "./svelte-ast-types";
-import type * as Compiler from "svelte/compiler";
+import type * as Compiler from "./svelte-ast-types-for-v5";
 
 export type Child =
   | Compiler.Text
diff --git a/src/parser/converts/attr.ts b/src/parser/converts/attr.ts
@@ -24,7 +24,7 @@ import type {
 import type ESTree from "estree";
 import type { Context } from "../../context";
 import type * as SvAST from "../svelte-ast-types";
-import type * as Compiler from "svelte/compiler";
+import type * as Compiler from "../svelte-ast-types-for-v5";
 import { getWithLoc, indexOf } from "./common";
 import { convertMustacheTag } from "./mustache";
 import { convertTextToLiteral } from "./text";
diff --git a/src/parser/converts/block.ts b/src/parser/converts/block.ts
@@ -1,5 +1,5 @@
 import type * as SvAST from "../svelte-ast-types";
-import type * as Compiler from "svelte/compiler";
+import type * as Compiler from "../svelte-ast-types-for-v5";
 import type {
   SvelteAwaitBlock,
   SvelteAwaitBlockAwaitCatch,
@@ -114,20 +114,21 @@ export function convertIfBlock(
   node: SvAST.IfBlock | Compiler.IfBlock,
   parent: SvelteIfBlock["parent"],
   ctx: Context,
-  elseif: true,
+  elseifContext?: { start: number },
 ): SvelteIfBlockElseIf;
 /** Convert for IfBlock */
 export function convertIfBlock(
   node: SvAST.IfBlock | Compiler.IfBlock,
   parent: SvelteIfBlock["parent"],
   ctx: Context,
-  elseif?: true,
+  elseifContext?: { start: number },
 ): SvelteIfBlock {
   // {#if expr} {:else} {/if}
   // {:else if expr} {/if}
+  const elseif = Boolean(elseifContext);
   const nodeStart = startBlockIndex(
     ctx.code,
-    elseif ? node.start - 1 : node.start,
+    elseifContext?.start ?? node.start,
     elseif ? ":else" : "#if",
   );
   const ifBlock: SvelteIfBlock = {
@@ -188,7 +189,9 @@ export function convertIfBlock(
       };
       ifBlock.else = elseBlock;
 
-      const elseIfBlock = convertIfBlock(c, elseBlock, ctx, true);
+      const elseIfBlock = convertIfBlock(c, elseBlock, ctx, {
+        start: elseStart,
+      });
       // adjust loc
       elseBlock.range[1] = elseIfBlock.range[1];
       elseBlock.loc.end = {
@@ -238,22 +241,21 @@ function startBlockIndexForElse(
   lastExpression: ESTree.Node | { start: number; end: number },
   ctx: Context,
 ) {
-  let baseStart: number;
   const elseChildren = getChildren(elseFragment);
   if (elseChildren.length > 0) {
     const c = elseChildren[0];
-    baseStart = c.start;
     if (c.type === "IfBlock" && c.elseif) {
-      baseStart = Math.min(baseStart, getWithLoc(getTestFromIfBlock(c)).start);
+      const contentStart = getWithLoc(getTestFromIfBlock(c)).start;
+      if (contentStart <= c.start) {
+        return startBlockIndex(ctx.code, contentStart - 1, ":else");
+      }
     }
-  } else {
-    const beforeEnd = endIndexFromFragment(beforeFragment, () => {
-      return ctx.code.indexOf("}", getWithLoc(lastExpression).end) + 1;
-    });
-    baseStart = beforeEnd + 1;
+    return startBlockIndex(ctx.code, c.start, ":else");
   }
-
-  return startBlockIndex(ctx.code, baseStart - 1, ":else");
+  const beforeEnd = endIndexFromFragment(beforeFragment, () => {
+    return ctx.code.indexOf("}", getWithLoc(lastExpression).end) + 1;
+  });
+  return startBlockIndex(ctx.code, beforeEnd, ":else");
 }
 
 /** Convert for EachBlock */
@@ -706,7 +708,7 @@ function extractMustacheBlockTokens(
     | SvelteKeyBlock
     | SvelteSnippetBlock,
   ctx: Context,
-  option?: { startOnly?: true },
+  option?: { startOnly?: boolean },
 ) {
   const startSectionNameStart = indexOf(
     ctx.code,
diff --git a/src/parser/converts/const.ts b/src/parser/converts/const.ts
@@ -2,7 +2,7 @@ import type { SvelteConstTag } from "../../ast";
 import type { Context } from "../../context";
 import { getDeclaratorFromConstTag } from "../compat";
 import type * as SvAST from "../svelte-ast-types";
-import type * as Compiler from "svelte/compiler";
+import type * as Compiler from "../svelte-ast-types-for-v5";
 
 /** Convert for ConstTag */
 export function convertConstTag(
diff --git a/src/parser/converts/element.ts b/src/parser/converts/element.ts
@@ -30,7 +30,7 @@ import type {
 import type ESTree from "estree";
 import type { Context } from "../../context";
 import type * as SvAST from "../svelte-ast-types";
-import type * as Compiler from "svelte/compiler";
+import type * as Compiler from "../svelte-ast-types-for-v5";
 
 import {
   convertAwaitBlock,
diff --git a/src/parser/converts/mustache.ts b/src/parser/converts/mustache.ts
@@ -7,7 +7,7 @@ import type {
 import type { Context } from "../../context";
 import type * as SvAST from "../svelte-ast-types";
 import { hasTypeInfo } from "../../utils";
-import type * as Compiler from "svelte/compiler";
+import type * as Compiler from "../svelte-ast-types-for-v5";
 
 /** Convert for MustacheTag */
 export function convertMustacheTag(
diff --git a/src/parser/converts/render.ts b/src/parser/converts/render.ts
@@ -2,7 +2,7 @@ import type * as ESTree from "estree";
 import type { SvelteRenderTag } from "../../ast";
 import type { Context } from "../../context";
 import { getWithLoc } from "./common";
-import type * as Compiler from "svelte/compiler";
+import type * as Compiler from "../svelte-ast-types-for-v5";
 
 /** Convert for RenderTag */
 export function convertRenderTag(
diff --git a/src/parser/converts/root.ts b/src/parser/converts/root.ts
@@ -1,5 +1,5 @@
 import type * as SvAST from "../svelte-ast-types";
-import type * as Compiler from "svelte/compiler";
+import type * as Compiler from "../svelte-ast-types-for-v5";
 import type {
   SvelteAttribute,
   SvelteGenericsDirective,
diff --git a/src/parser/html.ts b/src/parser/html.ts
@@ -1,4 +1,4 @@
-import type * as Compiler from "svelte/compiler";
+import type * as Compiler from "./svelte-ast-types-for-v5";
 import type ESTree from "estree";
 import { getEspree } from "./espree";
 
diff --git a/src/parser/index.ts b/src/parser/index.ts
@@ -12,7 +12,7 @@ import type { ScopeManager } from "eslint-scope";
 import { Variable } from "eslint-scope";
 import { parseScript, parseScriptInSvelte } from "./script";
 import type * as SvAST from "./svelte-ast-types";
-import type * as Compiler from "svelte/compiler";
+import type * as Compiler from "./svelte-ast-types-for-v5";
 import { sortNodes } from "./sort";
 import { parseTemplate } from "./template";
 import {
diff --git a/src/parser/svelte-ast-types-for-v5.ts b/src/parser/svelte-ast-types-for-v5.ts
@@ -0,0 +1,116 @@
+// FIXME Since the node type is not provided by "svelte/compiler",
+// we work around this by extracting the type from the parse function.
+// See also https://github.com/sveltejs/svelte/issues/12292
+
+import type { parse } from "svelte/compiler";
+
+export type Root = ModernParseReturnType<typeof parse>;
+export type Fragment = Root["fragment"];
+export type SvelteOptions = Root["options"];
+export type Script = Root["instance"];
+type FragmentChild = Fragment["nodes"][number];
+
+export type Text = Extract<FragmentChild, { type: "Text" }>;
+
+export type ExpressionTag = Extract<FragmentChild, { type: "ExpressionTag" }>;
+export type HtmlTag = Extract<FragmentChild, { type: "HtmlTag" }>;
+export type ConstTag = Extract<FragmentChild, { type: "ConstTag" }>;
+export type DebugTag = Extract<FragmentChild, { type: "DebugTag" }>;
+export type RenderTag = Extract<FragmentChild, { type: "RenderTag" }>;
+
+export type Component = Extract<FragmentChild, { type: "Component" }>;
+export type TitleElement = Extract<FragmentChild, { type: "TitleElement" }>;
+export type SlotElement = Extract<FragmentChild, { type: "SlotElement" }>;
+export type RegularElement = Extract<FragmentChild, { type: "RegularElement" }>;
+export type SvelteBody = Extract<FragmentChild, { type: "SvelteBody" }>;
+export type SvelteComponent = Extract<
+  FragmentChild,
+  { type: "SvelteComponent" }
+>;
+export type SvelteDocument = Extract<FragmentChild, { type: "SvelteDocument" }>;
+export type SvelteElement = Extract<FragmentChild, { type: "SvelteElement" }>;
+export type SvelteFragment = Extract<FragmentChild, { type: "SvelteFragment" }>;
+export type SvelteHead = Extract<FragmentChild, { type: "SvelteHead" }>;
+export type SvelteOptionsRaw = Extract<
+  FragmentChild,
+  { type: "SvelteOptions" }
+>;
+export type SvelteSelf = Extract<FragmentChild, { type: "SvelteSelf" }>;
+export type SvelteWindow = Extract<FragmentChild, { type: "SvelteWindow" }>;
+
+export type IfBlock = Extract<FragmentChild, { type: "IfBlock" }>;
+export type EachBlock = Extract<FragmentChild, { type: "EachBlock" }>;
+export type AwaitBlock = Extract<FragmentChild, { type: "AwaitBlock" }>;
+export type KeyBlock = Extract<FragmentChild, { type: "KeyBlock" }>;
+export type SnippetBlock = Extract<FragmentChild, { type: "SnippetBlock" }>;
+
+export type Comment = Extract<FragmentChild, { type: "Comment" }>;
+type ComponentAttribute = Component["attributes"][number];
+export type Attribute = Extract<ComponentAttribute, { type: "Attribute" }>;
+export type SpreadAttribute = Extract<
+  ComponentAttribute,
+  { type: "SpreadAttribute" }
+>;
+export type AnimateDirective = Extract<
+  ComponentAttribute,
+  { type: "AnimateDirective" }
+>;
+export type BindDirective = Extract<
+  ComponentAttribute,
+  { type: "BindDirective" }
+>;
+export type ClassDirective = Extract<
+  ComponentAttribute,
+  { type: "ClassDirective" }
+>;
+export type LetDirective = Extract<
+  ComponentAttribute,
+  { type: "LetDirective" }
+>;
+export type OnDirective = Extract<ComponentAttribute, { type: "OnDirective" }>;
+export type StyleDirective = Extract<
+  ComponentAttribute,
+  { type: "StyleDirective" }
+>;
+export type TransitionDirective = Extract<
+  ComponentAttribute,
+  { type: "TransitionDirective" }
+>;
+export type UseDirective = Extract<
+  ComponentAttribute,
+  { type: "UseDirective" }
+>;
+
+export type Tag = ExpressionTag | HtmlTag | ConstTag | DebugTag | RenderTag;
+export type ElementLike =
+  | Component
+  | TitleElement
+  | SlotElement
+  | RegularElement
+  | SvelteBody
+  | SvelteComponent
+  | SvelteDocument
+  | SvelteElement
+  | SvelteFragment
+  | SvelteHead
+  | SvelteOptionsRaw
+  | SvelteSelf
+  | SvelteWindow;
+export type Block = EachBlock | IfBlock | AwaitBlock | KeyBlock | SnippetBlock;
+
+export type Directive =
+  | AnimateDirective
+  | BindDirective
+  | ClassDirective
+  | LetDirective
+  | OnDirective
+  | StyleDirective
+  | TransitionDirective
+  | UseDirective;
+
+type ModernParseReturnType<T> = T extends {
+  (source: string, options: { filename?: string; modern: true }): infer R;
+  (...args: any[]): any;
+}
+  ? R
+  : any;
diff --git a/src/parser/svelte-parse-context.ts b/src/parser/svelte-parse-context.ts
@@ -1,4 +1,4 @@
-import type * as Compiler from "svelte/compiler";
+import type * as Compiler from "./svelte-ast-types-for-v5";
 import type * as SvAST from "./svelte-ast-types";
 import type { NormalizedParserOptions } from "./parser-options";
 import { compilerVersion, svelteVersion } from "./svelte-version";
diff --git a/src/parser/template.ts b/src/parser/template.ts
@@ -1,6 +1,6 @@
 import type {} from "svelte"; // FIXME: Workaround to get type information for "svelte/compiler"
 import { parse } from "svelte/compiler";
-import type * as Compiler from "svelte/compiler";
+import type * as Compiler from "./svelte-ast-types-for-v5";
 import type * as SvAST from "./svelte-ast-types";
 import type { Context } from "../context";
 import { convertSvelteRoot } from "./converts/index";
diff --git a/tests/fixtures/parser/ast/svelte5/docs/snippets/10-typing-snippets-type-output.svelte b/tests/fixtures/parser/ast/svelte5/docs/snippets/10-typing-snippets-type-output.svelte
diff --git a/tests/fixtures/parser/ast/svelte5/docs/snippets/11-typing-snippets-type-output.svelte b/tests/fixtures/parser/ast/svelte5/docs/snippets/11-typing-snippets-type-output.svelte
diff --git a/tests/fixtures/parser/ast/svelte5/generics01-snippets-type-output.svelte b/tests/fixtures/parser/ast/svelte5/generics01-snippets-type-output.svelte

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"svelte-eslint-parser": minor
 +---
++
 +fix: update svelte to 5.0.0-next.181 and fix for `{:else if}`