feat: add experimental support for Svelte v4 (#343)

* feat: add experimental support for Svelte v4

* Create two-months-yawn.md

* format

* fix type fixtures

Author: ota-meshi

.changeset/two-months-yawn.md

@@ -0,0 +1,5 @@
+---
+"svelte-eslint-parser": minor
+---
+
+feat: add experimental support for Svelte v4

.github/workflows/NodeCI.yml

@@ -23,7 +23,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 17.x, 18.x, 19.x]
+        node-version: [16.x, 17.x, 18.x, 19.x, 20.x]
     steps:
       - uses: actions/checkout@v3
       - uses: pnpm/action-setup@v2
@@ -35,6 +35,26 @@ jobs:
         run: pnpm install
       - name: Test
         run: pnpm run test
+  test-for-svelte-v3:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [14.x]
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Install Svelte v3
+        run: |+
+          pnpm install -D svelte@3
+          rm -rf node_modules
+      - name: Install Packages
+        run: pnpm install
+      - name: Test
+        run: pnpm run test
   test-for-ts-eslint-v4:
     runs-on: ubuntu-latest
     strategy:
@@ -49,7 +69,7 @@ jobs:
           node-version: ${{ matrix.node-version }}
       - name: Install @typescript-eslint v4
         run: |+
-          pnpm install -D @typescript-eslint/parser@4 @typescript-eslint/eslint-plugin@4 eslint@7
+          pnpm install -D @typescript-eslint/parser@4 @typescript-eslint/eslint-plugin@4 eslint@7 svelte@3
           rm -rf node_modules
       - name: Install Packages
         run: pnpm install
@@ -69,7 +89,7 @@ jobs:
           node-version: ${{ matrix.node-version }}
       - name: Install eslint v7
         run: |+
-          pnpm install -D eslint@7
+          pnpm install -D eslint@7 svelte@3
           rm -rf node_modules
       - name: Install Packages
         run: pnpm install

explorer-v2/src/lib/Header.svelte

@@ -14,23 +14,14 @@
 
 <header class="header">
 	<span class="title">svelte-eslint-parser</span>
-	<a
-		class="menu"
-		class:active={isActive($page.url.pathname, `/`)}
-		sveltekit:prefetch
-		href="{baseUrl}/">AST</a
-	>
+	<a class="menu" class:active={isActive($page.url.pathname, `/`)} href="{baseUrl}/">AST</a>
 	<a
 		class="menu"
 		class:active={isActive($page.url.pathname, `/playground`)}
-		sveltekit:prefetch
 		href="{baseUrl}/playground">Playgroud</a
 	>
-	<a
-		class="menu"
-		class:active={isActive($page.url.pathname, `/scope`)}
-		sveltekit:prefetch
-		href="{baseUrl}/scope">Scope</a
+	<a class="menu" class:active={isActive($page.url.pathname, `/scope`)} href="{baseUrl}/scope"
+		>Scope</a
 	>
 	<a
 		class="menu"

package.json

@@ -45,7 +45,7 @@
     "version:ci": "env-cmd -e version-ci pnpm run build:meta && changeset version"
   },
   "peerDependencies": {
-    "svelte": "^3.37.0"
+    "svelte": "^3.37.0 || ^4.0.0-0"
   },
   "peerDependenciesMeta": {
     "svelte": {
@@ -89,7 +89,6 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-regexp": "^1.5.0",
     "eslint-plugin-svelte": "^2.28.0",
-    "eslint-plugin-svelte3": "^4.0.0",
     "eslint-plugin-yml": "^1.0.0",
     "estree-walker": "^3.0.0",
     "locate-character": "^2.0.5",
@@ -99,11 +98,11 @@
     "nyc": "^15.1.0",
     "prettier": "^2.8.0",
     "prettier-plugin-pkg": "^0.17.0",
-    "prettier-plugin-svelte": "^2.10.0",
+    "prettier-plugin-svelte": "^2.10.1",
     "rimraf": "^5.0.0",
     "semver": "^7.3.5",
-    "svelte": "^3.57.0",
-    "svelte2tsx": "^0.6.11",
+    "svelte": "^4.0.0-0",
+    "svelte2tsx": "^0.6.15",
     "typescript": "~5.0.0",
     "typescript-eslint-parser-for-extra-files": "^0.5.0",
     "vue-eslint-parser": "^9.0.0"

tests/fixtures/parser/ast/ts-event03-type-output.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import {createEventDispatcher} from 'svelte' // createEventDispatcher: <EventMap extends {} = any>() => <EventKey extends Extract<keyof EventMap, string>>(type: EventKey, detail?: EventMap[EventKey] | undefined, options?: DispatchOptions | undefined) => boolean, createEventDispatcher: <EventMap extends {} = any>() => <EventKey extends Extract<keyof EventMap, string>>(type: EventKey, detail?: EventMap[EventKey] | undefined, options?: DispatchOptions | undefined) => boolean
-    const emit = createEventDispatcher<{ // emit: <EventKey extends "foo" | "bar">(type: EventKey, detail?: { foo: number; bar: string; }[EventKey] | undefined, options?: DispatchOptions | undefined) => boolean, createEventDispatcher<{ foo: number, bar: string }>(): <EventKey extends "foo" | "bar">(type: EventKey, detail?: { foo: number; bar: string; }[EventKey] | undefined, options?: DispatchOptions | undefined) => boolean
+    import {createEventDispatcher} from 'svelte' // createEventDispatcher: <EventMap extends Record<string, any> = any>() => EventDispatcher<EventMap>, createEventDispatcher: <EventMap extends Record<string, any> = any>() => EventDispatcher<EventMap>
+    const emit = createEventDispatcher<{ // emit: EventDispatcher<{ foo: number; bar: string; }>, createEventDispatcher<{ foo: number, bar: string }>(): EventDispatcher<{ foo: number; bar: string; }>
         foo: number,
         bar: string
     }>()

tests/fixtures/parser/ast/ts-reactive02-type-output.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { writable } from 'svelte/store'; // writable: <T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined) => Writable<T>, writable: <T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined) => Writable<T>
+	import { writable } from 'svelte/store'; // writable: <T>(value: T, start?: StartStopNotifier<T> | undefined) => Writable<T>, writable: <T>(value: T, start?: StartStopNotifier<T> | undefined) => Writable<T>
     let x = "hello" // x: string
     const get = ()=>"hello" // get: () => string
 

tests/fixtures/parser/ast/ts-reactive05-type-output.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { writable } from 'svelte/store'; // writable: <T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined) => Writable<T>, writable: <T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined) => Writable<T>
+	import { writable } from 'svelte/store'; // writable: <T>(value: T, start?: StartStopNotifier<T> | undefined) => Writable<T>, writable: <T>(value: T, start?: StartStopNotifier<T> | undefined) => Writable<T>
 
     const a = writable(0) // a: Writable<number>, writable(0): Writable<number>
     $: aValue = $a // $: any, aValue: number, $a: number

tests/fixtures/parser/ast/ts-store01-type-output.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { writable } from 'svelte/store'; // writable: <T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined) => Writable<T>, writable: <T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined) => Writable<T>
+	import { writable } from 'svelte/store'; // writable: <T>(value: T, start?: StartStopNotifier<T> | undefined) => Writable<T>, writable: <T>(value: T, start?: StartStopNotifier<T> | undefined) => Writable<T>
 	const a = writable(0) // a: Writable<number>, writable(0): Writable<number>
 	const b = writable(0) // b: Writable<number>, writable(0): Writable<number>
 	const $b = 'abc' // $b: "abc"

tests/fixtures/parser/ast/ts-store02-type-output.svelte

@@ -1,5 +1,5 @@
 <script context="module" lang="ts">
-	import { writable } from 'svelte/store'; // writable: <T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined) => Writable<T>, writable: <T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined) => Writable<T>
+	import { writable } from 'svelte/store'; // writable: <T>(value: T, start?: StartStopNotifier<T> | undefined) => Writable<T>, writable: <T>(value: T, start?: StartStopNotifier<T> | undefined) => Writable<T>
 	const a = writable(0) // a: Writable<number>, writable(0): Writable<number>
 	declare const $a: string // $a: string
 </script>