breaking: deprecate the svelte/no-dynamic-slot-name rule (#1011)

sveltejs · Jan 16, 2025 · 7596287 · 7596287
1 parent 21989c1
commit 7596287
Show file tree

Hide file tree

Showing 11 changed files with 38 additions and 31 deletions.
diff --git a/.changeset/real-birds-move.md b/.changeset/real-birds-move.md
@@ -0,0 +1,5 @@
+---
+'eslint-plugin-svelte': major
+---
+
+breaking: deprecate the `svelte/no-dynamic-slot-name` rule
diff --git a/README.md b/README.md
@@ -325,7 +325,6 @@ These rules relate to possible syntax or logic errors in Svelte code:
 | [svelte/no-dupe-on-directives](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-dupe-on-directives/) | disallow duplicate `on:` directives |  |
 | [svelte/no-dupe-style-properties](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-dupe-style-properties/) | disallow duplicate style properties | :star: |
 | [svelte/no-dupe-use-directives](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-dupe-use-directives/) | disallow duplicate `use:` directives |  |
-| [svelte/no-dynamic-slot-name](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-dynamic-slot-name/) | disallow dynamic slot name | :star::wrench: |
 | [svelte/no-not-function-handler](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-not-function-handler/) | disallow use of not function in event handler | :star: |
 | [svelte/no-object-in-text-mustaches](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-object-in-text-mustaches/) | disallow objects in text mustache interpolation | :star: |
 | [svelte/no-raw-special-elements](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-raw-special-elements/) | Checks for invalid raw HTML elements | :wrench: |
@@ -445,6 +444,7 @@ These rules relate to this plugin works:
 | Rule ID | Replaced by |
 |:--------|:------------|
 | [svelte/@typescript-eslint/no-unnecessary-condition](https://sveltejs.github.io/eslint-plugin-svelte/rules/@typescript-eslint/no-unnecessary-condition/) | This rule is no longer needed when using svelte-eslint-parser>=v0.19.0. |
+| [svelte/no-dynamic-slot-name](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-dynamic-slot-name/) | Now Svelte compiler itself throws an compile error. |
 | [svelte/no-goto-without-base](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-goto-without-base/) | [svelte/no-navigation-without-base](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-navigation-without-base/) |
 
 <!--RULES_TABLE_END-->

diff --git a/docs/rules.md b/docs/rules.md
@@ -14,25 +14,24 @@ sidebarDepth: 0
 
 These rules relate to possible syntax or logic errors in Svelte code:
 
-| Rule ID                                                                                          | Description                                                                                                                            |                |
-| :----------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------- | :------------- |
-| [svelte/infinite-reactive-loop](./rules/infinite-reactive-loop.md)                               | Svelte runtime prevents calling the same reactive statement twice in a microtask. But between different microtask, it doesn't prevent. |                |
-| [svelte/no-dom-manipulating](./rules/no-dom-manipulating.md)                                     | disallow DOM manipulating                                                                                                              |                |
-| [svelte/no-dupe-else-if-blocks](./rules/no-dupe-else-if-blocks.md)                               | disallow duplicate conditions in `{#if}` / `{:else if}` chains                                                                         | :star:         |
-| [svelte/no-dupe-on-directives](./rules/no-dupe-on-directives.md)                                 | disallow duplicate `on:` directives                                                                                                    |                |
-| [svelte/no-dupe-style-properties](./rules/no-dupe-style-properties.md)                           | disallow duplicate style properties                                                                                                    | :star:         |
-| [svelte/no-dupe-use-directives](./rules/no-dupe-use-directives.md)                               | disallow duplicate `use:` directives                                                                                                   |                |
-| [svelte/no-dynamic-slot-name](./rules/no-dynamic-slot-name.md)                                   | disallow dynamic slot name                                                                                                             | :star::wrench: |
-| [svelte/no-not-function-handler](./rules/no-not-function-handler.md)                             | disallow use of not function in event handler                                                                                          | :star:         |
-| [svelte/no-object-in-text-mustaches](./rules/no-object-in-text-mustaches.md)                     | disallow objects in text mustache interpolation                                                                                        | :star:         |
-| [svelte/no-raw-special-elements](./rules/no-raw-special-elements.md)                             | Checks for invalid raw HTML elements                                                                                                   | :wrench:       |
-| [svelte/no-reactive-reassign](./rules/no-reactive-reassign.md)                                   | disallow reassigning reactive values                                                                                                   |                |
-| [svelte/no-shorthand-style-property-overrides](./rules/no-shorthand-style-property-overrides.md) | disallow shorthand style properties that override related longhand properties                                                          | :star:         |
-| [svelte/no-store-async](./rules/no-store-async.md)                                               | disallow using async/await inside svelte stores because it causes issues with the auto-unsubscribing features                          |                |
-| [svelte/no-unknown-style-directive-property](./rules/no-unknown-style-directive-property.md)     | disallow unknown `style:property`                                                                                                      | :star:         |
-| [svelte/require-store-callbacks-use-set-param](./rules/require-store-callbacks-use-set-param.md) | store callbacks must use `set` param                                                                                                   |                |
-| [svelte/require-store-reactive-access](./rules/require-store-reactive-access.md)                 | disallow to use of the store itself as an operand. Need to use $ prefix or get function.                                               | :wrench:       |
-| [svelte/valid-compile](./rules/valid-compile.md)                                                 | disallow warnings when compiling.                                                                                                      | :star:         |
+| Rule ID                                                                                          | Description                                                                                                                            |          |
+| :----------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------- | :------- |
+| [svelte/infinite-reactive-loop](./rules/infinite-reactive-loop.md)                               | Svelte runtime prevents calling the same reactive statement twice in a microtask. But between different microtask, it doesn't prevent. |          |
+| [svelte/no-dom-manipulating](./rules/no-dom-manipulating.md)                                     | disallow DOM manipulating                                                                                                              |          |
+| [svelte/no-dupe-else-if-blocks](./rules/no-dupe-else-if-blocks.md)                               | disallow duplicate conditions in `{#if}` / `{:else if}` chains                                                                         | :star:   |
+| [svelte/no-dupe-on-directives](./rules/no-dupe-on-directives.md)                                 | disallow duplicate `on:` directives                                                                                                    |          |
+| [svelte/no-dupe-style-properties](./rules/no-dupe-style-properties.md)                           | disallow duplicate style properties                                                                                                    | :star:   |
+| [svelte/no-dupe-use-directives](./rules/no-dupe-use-directives.md)                               | disallow duplicate `use:` directives                                                                                                   |          |
+| [svelte/no-not-function-handler](./rules/no-not-function-handler.md)                             | disallow use of not function in event handler                                                                                          | :star:   |
+| [svelte/no-object-in-text-mustaches](./rules/no-object-in-text-mustaches.md)                     | disallow objects in text mustache interpolation                                                                                        | :star:   |
+| [svelte/no-raw-special-elements](./rules/no-raw-special-elements.md)                             | Checks for invalid raw HTML elements                                                                                                   | :wrench: |
+| [svelte/no-reactive-reassign](./rules/no-reactive-reassign.md)                                   | disallow reassigning reactive values                                                                                                   |          |
+| [svelte/no-shorthand-style-property-overrides](./rules/no-shorthand-style-property-overrides.md) | disallow shorthand style properties that override related longhand properties                                                          | :star:   |
+| [svelte/no-store-async](./rules/no-store-async.md)                                               | disallow using async/await inside svelte stores because it causes issues with the auto-unsubscribing features                          |          |
+| [svelte/no-unknown-style-directive-property](./rules/no-unknown-style-directive-property.md)     | disallow unknown `style:property`                                                                                                      | :star:   |
+| [svelte/require-store-callbacks-use-set-param](./rules/require-store-callbacks-use-set-param.md) | store callbacks must use `set` param                                                                                                   |          |
+| [svelte/require-store-reactive-access](./rules/require-store-reactive-access.md)                 | disallow to use of the store itself as an operand. Need to use $ prefix or get function.                                               | :wrench: |
+| [svelte/valid-compile](./rules/valid-compile.md)                                                 | disallow warnings when compiling.                                                                                                      | :star:   |
 
 ## Security Vulnerability
 
@@ -142,4 +141,5 @@ These rules relate to this plugin works:
 | Rule ID                                                                                                      | Replaced by                                                                |
 | :----------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------- |
 | [svelte/@typescript-eslint/no-unnecessary-condition](./rules/@typescript-eslint/no-unnecessary-condition.md) | This rule is no longer needed when using svelte-eslint-parser>=v0.19.0.    |
+| [svelte/no-dynamic-slot-name](./rules/no-dynamic-slot-name.md)                                               | Now Svelte compiler itself throws an compile error.                        |
 | [svelte/no-goto-without-base](./rules/no-goto-without-base.md)                                               | [svelte/no-navigation-without-base](./rules/no-navigation-without-base.md) |
diff --git a/docs/rules/no-dynamic-slot-name.md b/docs/rules/no-dynamic-slot-name.md
@@ -10,7 +10,7 @@ since: 'v0.14.0'
 
 > disallow dynamic slot name
 
-- :gear: This rule is included in `"plugin:svelte/recommended"`.
+- :warning: This rule was **deprecated**. Now Svelte compiler itself throws an compile error.
 - :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details

diff --git a/packages/eslint-plugin-svelte/src/configs/flat/recommended.ts b/packages/eslint-plugin-svelte/src/configs/flat/recommended.ts
@@ -14,7 +14,6 @@ const config: Linter.Config[] = [
 			'svelte/no-at-html-tags': 'error',
 			'svelte/no-dupe-else-if-blocks': 'error',
 			'svelte/no-dupe-style-properties': 'error',
-			'svelte/no-dynamic-slot-name': 'error',
 			'svelte/no-inner-declarations': 'error',
 			'svelte/no-not-function-handler': 'error',
 			'svelte/no-object-in-text-mustaches': 'error',

diff --git a/packages/eslint-plugin-svelte/src/rule-types.ts b/packages/eslint-plugin-svelte/src/rule-types.ts
@@ -137,6 +137,7 @@ export interface RuleOptions {
   /**
    * disallow dynamic slot name
    * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-dynamic-slot-name/
+   * @deprecated
    */
   'svelte/no-dynamic-slot-name'?: Linter.RuleEntry<[]>
   /**

diff --git a/packages/eslint-plugin-svelte/src/rules/no-dynamic-slot-name.ts b/packages/eslint-plugin-svelte/src/rules/no-dynamic-slot-name.ts
@@ -13,15 +13,19 @@ export default createRule('no-dynamic-slot-name', {
 		docs: {
 			description: 'disallow dynamic slot name',
 			category: 'Possible Errors',
-			recommended: true
+			recommended: false
 		},
 		fixable: 'code',
+		deprecated: true,
 		schema: [],
 		messages: {
 			unexpected: '`<slot>` name cannot be dynamic.',
 			requireValue: '`<slot>` name requires a value.'
 		},
-		type: 'problem'
+		type: 'problem',
+		replacedBy: {
+			note: 'Now Svelte compiler itself throws an compile error.'
+		}
 	},
 	create(context) {
 		const sourceCode = getSourceCode(context);

diff --git a/packages/eslint-plugin-svelte/src/rules/valid-compile.ts b/packages/eslint-plugin-svelte/src/rules/valid-compile.ts
@@ -4,13 +4,7 @@ import { getSvelteCompileWarnings } from '../shared/svelte-compile-warns/index.j
 import { getSourceCode } from '../utils/compat.js';
 import type { Position } from 'svelte-eslint-parser/lib/ast/common.js';
 
-const ignores: string[] = [
-	'missing-declaration',
-	// Svelte v4
-	'dynamic-slot-name',
-	// Svelte v5
-	'invalid-slot-name'
-] as const;
+const ignores: string[] = ['missing-declaration'] as const;
 
 const unusedSelectorWarnings: string[] = ['css_unused_selector', 'css-unused-selector'] as const;
 

diff --git a/...eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/dyamic-slot01-errors.yaml b/...eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/dyamic-slot01-errors.yaml
@@ -0,0 +1,4 @@
+- message: <slot> name cannot be dynamic(dynamic-slot-name)
+  line: 5
+  column: 7
+  suggestions: null
diff --git a/...-compile/valid/dyamic-slot01-input.svelte → ...ompile/invalid/dyamic-slot01-input.svelte b/...-compile/valid/dyamic-slot01-input.svelte → ...ompile/invalid/dyamic-slot01-input.svelte
diff --git a/...ile/valid/dyamic-slot01-requirements.json → ...e/invalid/dyamic-slot01-requirements.json b/...ile/valid/dyamic-slot01-requirements.json → ...e/invalid/dyamic-slot01-requirements.json