feat: (experimental) partial support for Svelte v5 (#620)

Author: ota-meshi

.changeset/cuddly-cats-beam.md

@@ -0,0 +1,8 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "eslint-plugin-svelte": "2.35.0"
+  },
+  "changesets": []
+}

.changeset/pre.json

@@ -16,6 +16,7 @@
 /tests/fixtures/rules/valid-compile/valid/ts
 /tests/fixtures/rules/prefer-style-directive
 /tests/fixtures/rules/@typescript-eslint
+/tests/fixtures/rules/valid-compile/valid/svelte3-options-custom-element-input.svelte
 /.svelte-kit
 /svelte.config-dist.js
 /build

.eslintignore

@@ -34,13 +34,13 @@ jobs:
           pnpm run update
           pnpm run build
   test:
-    name: 'Test for ESLint ${{ matrix.eslint }} on ${{ matrix.node }} OS: ${{matrix.os}}'
+    name: 'Test for ESLint ${{ matrix.eslint }} on Node.js: ${{ matrix.node }} OS: ${{matrix.os}}'
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
         os: [ubuntu-latest]
         eslint: [7, 8]
-        node: [16, 17, 18, 20]
+        node: [20]
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -58,6 +58,29 @@ jobs:
         run: pnpm install
       - name: Test
         run: pnpm run test
+  test-for-svelte-v4:
+    name: 'Test for Svelte v4 on Node.js: ${{ matrix.node }} OS: ${{matrix.os}}'
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node: [16, 17, 18, 20]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
+      - name: Setup Node.js ${{ matrix.node }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node }}
+      - name: Install svelte@4
+        run: |+
+          pnpm install -D svelte@4
+          rm -rf node_modules
+      - 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 }}

.github/workflows/NodeCI.yml

@@ -58,7 +58,7 @@
   },
   "peerDependencies": {
     "eslint": "^7.0.0 || ^8.0.0-0",
-    "svelte": "^3.37.0 || ^4.0.0"
+    "svelte": "^3.37.0 || ^4.0.0 || ^5.0.0-next.8"
   },
   "peerDependenciesMeta": {
     "svelte": {
@@ -77,7 +77,7 @@
     "postcss-safe-parser": "^6.0.0",
     "postcss-selector-parser": "^6.0.11",
     "semver": "^7.5.3",
-    "svelte-eslint-parser": ">=0.33.0 <1.0.0"
+    "svelte-eslint-parser": ">=0.34.0-next.2 <1.0.0"
   },
   "devDependencies": {
     "@1stg/browserslist-config": "^1.2.3",
@@ -164,7 +164,7 @@
     "stylelint": "^15.0.0",
     "stylelint-config-standard": "^34.0.0",
     "stylus": "^0.62.0",
-    "svelte": "^4.0.0",
+    "svelte": "^5.0.0-next.8",
     "svelte-adapter-ghpages": "0.1.0",
     "svelte-i18n": "^4.0.0",
     "tslib": "^2.5.0",

README.md

@@ -90,6 +90,7 @@ export function isBeginningOfElement(node: AST.SvelteText): boolean {
 		node.parent.type === 'SvelteElseBlock' ||
 		node.parent.type === 'SvelteIfBlock' ||
 		node.parent.type === 'SvelteKeyBlock' ||
+		node.parent.type === 'SvelteSnippetBlock' ||
 		node.parent.type === 'SvelteStyleElement'
 	) {
 		return node.parent.children[0] === node;

docs/README.md

@@ -28,7 +28,13 @@ export default createRule('valid-compile', {
 		}
 		const ignoreWarnings = Boolean(context.options[0]?.ignoreWarnings);
 
-		const ignores = ['missing-declaration', 'dynamic-slot-name'];
+		const ignores = [
+			'missing-declaration',
+			// Svelte v4
+			'dynamic-slot-name',
+			// Svelte v5
+			'invalid-slot-name'
+		];
 
 		/**
 		 * report

package.json

@@ -221,6 +221,7 @@ export type ASTNodeListener = {
 	SvelteMustacheTag?: (node: AST.SvelteMustacheTag & ASTNodeWithParent) => void;
 	SvelteDebugTag?: (node: AST.SvelteDebugTag & ASTNodeWithParent) => void;
 	SvelteConstTag?: (node: AST.SvelteConstTag & ASTNodeWithParent) => void;
+	SvelteRenderTag?: (node: AST.SvelteRenderTag & ASTNodeWithParent) => void;
 	SvelteIfBlock?: (node: AST.SvelteIfBlock & ASTNodeWithParent) => void;
 	SvelteElseBlock?: (node: AST.SvelteElseBlock & ASTNodeWithParent) => void;
 	SvelteEachBlock?: (node: AST.SvelteEachBlock & ASTNodeWithParent) => void;
@@ -229,6 +230,7 @@ export type ASTNodeListener = {
 	SvelteAwaitThenBlock?: (node: AST.SvelteAwaitThenBlock & ASTNodeWithParent) => void;
 	SvelteAwaitCatchBlock?: (node: AST.SvelteAwaitCatchBlock & ASTNodeWithParent) => void;
 	SvelteKeyBlock?: (node: AST.SvelteKeyBlock & ASTNodeWithParent) => void;
+	SvelteSnippetBlock?: (node: AST.SvelteSnippetBlock & ASTNodeWithParent) => void;
 	SvelteAttribute?: (node: AST.SvelteAttribute & ASTNodeWithParent) => void;
 	SvelteShorthandAttribute?: (node: AST.SvelteShorthandAttribute & ASTNodeWithParent) => void;
 	SvelteSpreadAttribute?: (node: AST.SvelteSpreadAttribute & ASTNodeWithParent) => void;
@@ -439,6 +441,7 @@ export type SvelteNodeListener = {
 	SvelteMustacheTag?: (node: AST.SvelteMustacheTag & ASTNodeWithParent) => void;
 	SvelteDebugTag?: (node: AST.SvelteDebugTag & ASTNodeWithParent) => void;
 	SvelteConstTag?: (node: AST.SvelteConstTag & ASTNodeWithParent) => void;
+	SvelteRenderTag?: (node: AST.SvelteRenderTag & ASTNodeWithParent) => void;
 	SvelteIfBlock?: (node: AST.SvelteIfBlock & ASTNodeWithParent) => void;
 	SvelteElseBlock?: (node: AST.SvelteElseBlock & ASTNodeWithParent) => void;
 	SvelteEachBlock?: (node: AST.SvelteEachBlock & ASTNodeWithParent) => void;
@@ -447,6 +450,7 @@ export type SvelteNodeListener = {
 	SvelteAwaitThenBlock?: (node: AST.SvelteAwaitThenBlock & ASTNodeWithParent) => void;
 	SvelteAwaitCatchBlock?: (node: AST.SvelteAwaitCatchBlock & ASTNodeWithParent) => void;
 	SvelteKeyBlock?: (node: AST.SvelteKeyBlock & ASTNodeWithParent) => void;
+	SvelteSnippetBlock?: (node: AST.SvelteSnippetBlock & ASTNodeWithParent) => void;
 	SvelteAttribute?: (node: AST.SvelteAttribute & ASTNodeWithParent) => void;
 	SvelteShorthandAttribute?: (node: AST.SvelteShorthandAttribute & ASTNodeWithParent) => void;
 	SvelteSpreadAttribute?: (node: AST.SvelteSpreadAttribute & ASTNodeWithParent) => void;

src/rules/indent-helpers/commons.ts

@@ -83,3 +83,5 @@ name
 /await
 }
 </div>
+
+<!--tests/fixtures/rules/indent/invalid/await01-input.svelte-->

src/rules/valid-compile.ts

@@ -83,3 +83,5 @@
     /await
   }
 </div>
+
+<!--tests/fixtures/rules/indent/invalid/await01-input.svelte-->

src/types-for-node.ts

@@ -0,0 +1,4 @@
+{
+	"FIXME": "It seems to return the wrong location in Svelte v5.",
+	"svelte": "^4 || ^3"
+}

tests/fixtures/rules/indent/invalid/await01-input.svelte

@@ -0,0 +1,4 @@
+{
+	"FIXME": "It seems to return the wrong location in Svelte v5.",
+	"svelte": "^4 || ^3"
+}

tests/fixtures/rules/indent/invalid/await01-output.svelte

@@ -0,0 +1,4 @@
+{
+	"FIXME": "It seems to return the wrong location in Svelte v5.",
+	"svelte": "^4 || ^3"
+}

tests/fixtures/rules/indent/invalid/await01-requirements.json

@@ -0,0 +1,4 @@
+{
+	"FIXME": "It seems to return the wrong location in Svelte v5.",
+	"svelte": "^4 || ^3"
+}

tests/fixtures/rules/indent/invalid/each01-requirements.json

@@ -46,3 +46,5 @@
 {#await expression}...{:then}...{:catch}...{/await}
 
 {#key expression}...{/key}
+
+<!--tests/fixtures/rules/mustache-spacing/invalid/always/test01-input.svelte-->

tests/fixtures/rules/indent/invalid/if01-requirements.json

@@ -46,3 +46,5 @@
 { #await expression }...{ :then}...{ :catch}...{ /await }
 
 { #key expression }...{ /key }
+
+<!--tests/fixtures/rules/mustache-spacing/invalid/always/test01-input.svelte-->

tests/fixtures/rules/indent/invalid/key01-requirements.json

@@ -46,3 +46,5 @@
 
 { #key expression }...{ /key }
 </div>
+
+<!--tests/fixtures/rules/mustache-spacing/invalid/test01-input.svelte-->

tests/fixtures/rules/mustache-spacing/invalid/always/test01-input.svelte

@@ -46,3 +46,5 @@
 
 {#key expression}...{/key}
 </div>
+
+<!--tests/fixtures/rules/mustache-spacing/invalid/test01-input.svelte-->

tests/fixtures/rules/mustache-spacing/invalid/always/test01-output.svelte

@@ -0,0 +1,4 @@
+{
+	"FIXME": "It seems to return the wrong location in Svelte v5.",
+	"svelte": "^4 || ^3"
+}

tests/fixtures/rules/mustache-spacing/invalid/test01-input.svelte

@@ -1,8 +1,4 @@
 - message: svelte-ignore comment is used, but not warned
-  line: 3
-  column: 19
-  suggestions: null
-- message: svelte-ignore comment is used, but not warned
-  line: 5
+  line: 4
   column: 19
   suggestions: null

tests/fixtures/rules/mustache-spacing/invalid/test01-output.svelte

@@ -1,9 +1,11 @@
 <script>
-	let foo;
-	// svelte-ignore unused-export-let
-	export let used;
-	// svelte-ignore module-script-reactive-declaration
-	$: reactive = foo;
+	// svelte-ignore state-rune-not-mutated
+	let mutable = $state(42);
+	// svelte-ignore state-rune-not-mutated
+	let immutable = $state(42);
+	export function update(a) {
+		immutable = a;
+	}
 </script>
 
-{used}
+{mutable}{immutable}

tests/fixtures/rules/mustache-spacing/invalid/test01-requirements.json

@@ -0,0 +1,3 @@
+{
+	"svelte": ">=5.0.0-0"
+}

tests/fixtures/rules/no-unused-svelte-ignore/invalid/script-comment01-errors.yaml

@@ -0,0 +1,8 @@
+- message: svelte-ignore comment is used, but not warned
+  line: 3
+  column: 19
+  suggestions: null
+- message: svelte-ignore comment is used, but not warned
+  line: 5
+  column: 19
+  suggestions: null

tests/fixtures/rules/no-unused-svelte-ignore/invalid/script-comment01-input.svelte

@@ -0,0 +1,9 @@
+<script>
+	let foo;
+	// svelte-ignore unused-export-let
+	export let used;
+	// svelte-ignore module-script-reactive-declaration
+	$: reactive = foo;
+</script>
+
+{used}

tests/fixtures/rules/no-unused-svelte-ignore/invalid/script-comment01-requirements.json

@@ -0,0 +1,3 @@
+{
+	"svelte": "^3.0.0 || ^4.0.0"
+}

tests/fixtures/rules/no-unused-svelte-ignore/invalid/script-comment01-svelte4-errors.yaml

@@ -0,0 +1,3 @@
+{
+	"svelte": "^3.0.0 || ^4.0.0"
+}

tests/fixtures/rules/no-unused-svelte-ignore/invalid/script-comment01-svelte4-input.svelte

@@ -0,0 +1,3 @@
+{
+	"svelte": "^3.0.0 || ^4.0.0"
+}

tests/fixtures/rules/no-unused-svelte-ignore/invalid/script-comment01-svelte4-requirements.json

@@ -1,10 +1,6 @@
-<script context="module">
-	let foo;
-</script>
-
 <script>
-	// svelte-ignore unused-export-let
-	export let unused;
-	// svelte-ignore module-script-reactive-declaration
-	$: reactive = foo;
+	// svelte-ignore state-rune-not-mutated
+	let immutable = $state(42);
 </script>
+
+{immutable}

tests/fixtures/rules/no-unused-svelte-ignore/invalid/script-comment02-errors.yaml renamed to tests/fixtures/rules/no-unused-svelte-ignore/invalid/script-comment02-svelte4-errors.yaml

@@ -0,0 +1,3 @@
+{
+	"svelte": ">=5.0.0-0"
+}

tests/fixtures/rules/no-unused-svelte-ignore/invalid/script-comment02-input.svelte renamed to tests/fixtures/rules/no-unused-svelte-ignore/invalid/script-comment02-svelte4-input.svelte

@@ -0,0 +1,10 @@
+<script context="module">
+	let foo;
+</script>
+
+<script>
+	// svelte-ignore unused-export-let
+	export let unused;
+	// svelte-ignore module-script-reactive-declaration
+	$: reactive = foo;
+</script>

tests/fixtures/rules/no-unused-svelte-ignore/invalid/script-comment02-svelte4-requirements.json

@@ -0,0 +1,3 @@
+{
+	"svelte": "^3.0.0 || ^4.0.0"
+}

tests/fixtures/rules/no-unused-svelte-ignore/valid/has-error-input.svelte renamed to tests/fixtures/rules/no-unused-svelte-ignore/valid/has-error-svelte4-input.svelte

@@ -0,0 +1,4 @@
+{
+	"FIXME": "It seems that unused selectors are not checked yet in Svelte v5.",
+	"svelte": "^4 || ^3"
+}

tests/fixtures/rules/no-unused-svelte-ignore/valid/has-error-svelte4-requirements.json

@@ -0,0 +1,4 @@
+{
+	"FIXME": "It seems that unused selectors are not checked yet in Svelte v5.",
+	"svelte": "^4 || ^3"
+}

tests/fixtures/rules/no-unused-svelte-ignore/valid/script-comment-input.svelte

@@ -0,0 +1,4 @@
+{
+	"FIXME": "It seems that unused selectors are not checked yet in Svelte v5.",
+	"svelte": "^4 || ^3"
+}

tests/fixtures/rules/no-unused-svelte-ignore/valid/script-comment-requirements.json

@@ -0,0 +1,4 @@
+{
+	"FIXME": "It seems that unused selectors are not checked yet in Svelte v5.",
+	"svelte": "^4 || ^3"
+}

tests/fixtures/rules/no-unused-svelte-ignore/valid/script-comment-svelte4-input.svelte

@@ -0,0 +1,4 @@
+{
+	"FIXME": "It seems that unused selectors are not checked yet in Svelte v5.",
+	"svelte": "^4 || ^3"
+}

tests/fixtures/rules/no-unused-svelte-ignore/valid/script-comment-svelte4-requirements.json

@@ -0,0 +1,4 @@
+{
+	"FIXME": "It seems that unused selectors are not checked yet in Svelte v5.",
+	"svelte": "^4 || ^3"
+}

tests/fixtures/rules/no-unused-svelte-ignore/valid/style-lang01-requirements.json

@@ -1,4 +1,10 @@
-<script lang="ts">
-	// svelte-ignore unused-export-let
-	export let something;
+<script>
+	let mutable = $state(42);
+	// svelte-ignore state-rune-not-mutated
+	let immutable = $state(42);
+	export function update(a) {
+		mutable = a;
+	}
 </script>
+
+{mutable}{immutable}

tests/fixtures/rules/no-unused-svelte-ignore/valid/style-lang02-requirements.json

@@ -0,0 +1,3 @@
+{
+	"svelte": ">=5.0.0-0"
+}

tests/fixtures/rules/no-unused-svelte-ignore/valid/style-lang03-requirements.json

@@ -0,0 +1,4 @@
+<script lang="ts">
+	// svelte-ignore unused-export-let
+	export let something;
+</script>