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

.changeset/cuddly-cats-beam.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-svelte": minor
+---
+
+feat: (experimental) partial support for Svelte v5

.changeset/pre.json

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

.eslintignore

@@ -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

.github/workflows/NodeCI.yml

@@ -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 }}

README.md

@@ -25,11 +25,17 @@ It provides many unique check rules using the AST generated by [svelte-eslint-pa
 
 ### ❗ Attention
 
+#### Cannot be used with eslint-plugin-svelte3
+
 The [svelte-eslint-parser] and the `eslint-plugin-svelte` can not be used with the [eslint-plugin-svelte3].
 
 [svelte-eslint-parser]: https://github.com/sveltejs/svelte-eslint-parser
 [eslint-plugin-svelte3]: https://github.com/sveltejs/eslint-plugin-svelte3
 
+#### Experimental support for Svelte v5
+
+We are working on support for Svelte v5, but it is still an experimental feature. Please note that rules and features related to Svelte v5 may be changed or removed in minor versions without notice.
+
 <!--DOCS_IGNORE_START-->
 
 ## Migration Guide

docs/README.md

@@ -29,11 +29,17 @@ It provides many unique check rules using the AST generated by [svelte-eslint-pa
 
 ### ❗ Attention
 
+#### Cannot be used with eslint-plugin-svelte3
+
 The [svelte-eslint-parser] and the `eslint-plugin-svelte` can not be used with the [eslint-plugin-svelte3].
 
 [svelte-eslint-parser]: https://github.com/sveltejs/svelte-eslint-parser
 [eslint-plugin-svelte3]: https://github.com/sveltejs/eslint-plugin-svelte3
 
+#### Experimental support for Svelte v5
+
+We are working on support for Svelte v5, but it is still an experimental feature. Please note that rules and features related to Svelte v5 may be changed or removed in minor versions without notice.
+
 ## :book: Usage
 
 See [User Guide](./user-guide.md).

package.json

@@ -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",

src/rules/indent-helpers/commons.ts

@@ -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;

src/rules/valid-compile.ts

@@ -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

src/types-for-node.ts

@@ -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;

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

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

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

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

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

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

tests/fixtures/rules/indent/invalid/if01-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/key01-requirements.json

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

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

@@ -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/mustache-spacing/invalid/always/test01-output.svelte

@@ -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/mustache-spacing/invalid/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/test01-output.svelte

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

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

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

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

@@ -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/no-unused-svelte-ignore/invalid/script-comment01-input.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/no-unused-svelte-ignore/invalid/script-comment01-requirements.json

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

tests/fixtures/rules/no-unused-svelte-ignore/invalid/script-comment01-svelte4-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-svelte4-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-svelte4-requirements.json

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

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-svelte4-requirements.json

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

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

@@ -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/valid/script-comment-requirements.json

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

tests/fixtures/rules/no-unused-svelte-ignore/valid/script-comment-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/valid/script-comment-svelte4-requirements.json

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

tests/fixtures/rules/no-unused-svelte-ignore/valid/style-lang01-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-lang02-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-lang03-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-lang04-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-lang05-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-lang06-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/ts-lang01-input.svelte

@@ -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/ts-lang01-requirements.json

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

tests/fixtures/rules/no-unused-svelte-ignore/valid/ts-lang01-svelte4-input.svelte

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