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

Author: ota-meshi

.changeset/friendly-toys-end.md

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

.changeset/grumpy-gorillas-sip.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-svelte": minor
+---
+
+fix(deps): update dependency svelte-eslint-parser to ^0.30.0

.eslintrc.js

@@ -33,6 +33,7 @@ module.exports = {
         usePrettierrc: true,
       },
     ],
+    "node/no-missing-import": "off", // It's a plugin bug. Should be replaced with eslint-plugin-n.
     // Repo rule
     "no-restricted-imports": [
       "error",

.github/workflows/NodeCI.yml

@@ -19,6 +19,8 @@ jobs:
         run: |+
           pnpm run build
           pnpm run lint
+      - name: Type Coverage
+        run: pnpm run typecov
   build:
     runs-on: ubuntu-latest
     steps:
@@ -38,7 +40,31 @@ jobs:
       matrix:
         os: [ubuntu-latest]
         eslint: [7, 8]
-        node: [14, 16, 17, 18, 20]
+        node: [16, 17, 18, 20]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+      - name: Setup Node.js ${{ matrix.node }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
+      - name: Install ESLint ${{ matrix.eslint }}
+        run: |+
+          pnpm install -D eslint@${{ matrix.eslint }}
+          rm -rf node_modules
+        if: matrix.eslint != 8
+      - name: Install Packages
+        run: pnpm install
+      - name: Test
+        run: pnpm run test
+  test-for-svelte-v3:
+    name: Test for Svelte v3
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node: [14]
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -53,16 +79,12 @@ jobs:
           rm -rf node_modules
       - name: Install ESLint ${{ matrix.eslint }}
         run: |+
-          pnpm install -D eslint@${{ matrix.eslint }}
+          pnpm install -D svelte@3
           rm -rf node_modules
-          rm -rf pnpm-lock.yaml
-        if: matrix.eslint != 8
       - name: Install Packages
         run: pnpm install
       - name: Test
         run: pnpm run test
-      - name: Type Coverage
-        run: pnpm run typecov
   update-resources:
     runs-on: ubuntu-latest
     steps:

docs-svelte-kit/src/lib/header/Header.svelte

@@ -16,6 +16,8 @@
   <div class="corner">
     <div
       class="sidebar-button"
+      role="button"
+      tabindex="0"
       on:click={handleToggleSidebar}
       on:keydown={(e) =>
         (e.code === "Enter" || e.code === "Space") && handleToggleSidebar()}
@@ -44,20 +46,20 @@
     </svg>
     <ul>
       <li class:active={isActive("/", $page)}>
-        <a sveltekit:prefetch href="{baseUrl}/">Home</a>
+        <a href="{baseUrl}/">Home</a>
       </li>
       <li class:active={isActive("/user-guide/", $page)}>
-        <a sveltekit:prefetch href="{baseUrl}/user-guide/">User Guide</a>
+        <a href="{baseUrl}/user-guide/">User Guide</a>
       </li>
       <li class:active={isActive("/rules/", $page)}>
-        <a sveltekit:prefetch href="{baseUrl}/rules/">Rules</a>
+        <a href="{baseUrl}/rules/">Rules</a>
       </li>
       <li class:active={isActive("/playground/", $page)}>
-        <a sveltekit:prefetch href="{baseUrl}/playground/">Playground</a>
+        <a href="{baseUrl}/playground/">Playground</a>
       </li>
     </ul>
     <div class="nav-title">
-      <a sveltekit:prefetch href="{baseUrl}/">
+      <a href="{baseUrl}/">
         <img src={logo} alt="Logo" />eslint-plugin-svelte</a
       >
     </div>

docs-svelte-kit/src/routes/+layout.svelte

@@ -33,6 +33,7 @@
 
 <SideMenu {sidebarOpen} hiddenMenu={frontmatter.hiddenMenu} />
 
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <main
   class:hidden-menu={frontmatter.hiddenMenu}
   on:click={sidebarOpen ? resetSidebarOpen : null}

package.json

@@ -59,7 +59,7 @@
   },
   "peerDependencies": {
     "eslint": "^7.0.0 || ^8.0.0-0",
-    "svelte": "^3.37.0"
+    "svelte": "^3.37.0 || ^4.0.0-0"
   },
   "peerDependenciesMeta": {
     "svelte": {
@@ -75,7 +75,7 @@
     "postcss": "^8.4.5",
     "postcss-load-config": "^3.1.4",
     "postcss-safe-parser": "^6.0.0",
-    "svelte-eslint-parser": "^0.29.0"
+    "svelte-eslint-parser": "^0.30.0"
   },
   "devDependencies": {
     "@1stg/browserslist-config": "^1.2.3",
@@ -163,9 +163,9 @@
     "stylelint": "^15.0.0",
     "stylelint-config-standard": "^33.0.0",
     "stylus": "^0.59.0",
-    "svelte": "^3.59.1",
+    "svelte": "^4.0.0-0",
     "svelte-adapter-ghpages": "0.1.0",
-    "svelte-i18n": "^3.4.0",
+    "svelte-i18n": "^3.6.0",
     "tslib": "^2.5.0",
     "type-coverage": "^2.22.0",
     "typescript": "^5.0.0",