From f700be54381d320cbc5b8c9f024f44e57de08bb4 Mon Sep 17 00:00:00 2001 From: baseballyama Date: Sun, 12 Jan 2025 16:22:13 +0900 Subject: [PATCH 1/3] breaking: deprecate the `svelte/no-dynamic-slot-name` rule --- .changeset/real-birds-move.md | 5 +++ README.md | 2 +- docs/rules.md | 38 +++++++++---------- docs/rules/no-dynamic-slot-name.md | 2 +- .../src/configs/flat/recommended.ts | 1 - .../eslint-plugin-svelte/src/rule-types.ts | 1 + .../src/rules/no-dynamic-slot-name.ts | 8 +++- 7 files changed, 33 insertions(+), 24 deletions(-) create mode 100644 .changeset/real-birds-move.md diff --git a/.changeset/real-birds-move.md b/.changeset/real-birds-move.md new file mode 100644 index 000000000..82f0200e2 --- /dev/null +++ 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 index ac522d6e1..9ebcfd462 100644 --- 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/) | diff --git a/docs/rules.md b/docs/rules.md index f6f5a9f5c..5e710c534 100644 --- 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 index f9a84df2f..805e5e923 100644 --- 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 index 5e3110e24..278704da9 100644 --- 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 index 3b3e4eaa6..30f15c1c2 100644 --- 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 index 7b266bef9..bb30f0f51 100644 --- 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: '`` name cannot be dynamic.', requireValue: '`` name requires a value.' }, - type: 'problem' + type: 'problem', + replacedBy: { + note: 'Now Svelte compiler itself throws an compile error.' + } }, create(context) { const sourceCode = getSourceCode(context); From bdc17811d8e49485973dcf17c4b0f2273ba3d906 Mon Sep 17 00:00:00 2001 From: baseballyama Date: Thu, 16 Jan 2025 09:29:06 +0900 Subject: [PATCH 2/3] ignore dynamic-slot-name --- packages/eslint-plugin-svelte/src/rules/valid-compile.ts | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/eslint-plugin-svelte/src/rules/valid-compile.ts b/packages/eslint-plugin-svelte/src/rules/valid-compile.ts index 21203a5b4..178fe3b58 100644 --- 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; From 477b42b3e771db293d361674ae299fa4c901203f Mon Sep 17 00:00:00 2001 From: baseballyama Date: Thu, 16 Jan 2025 09:43:02 +0900 Subject: [PATCH 3/3] fix test --- .../rules/valid-compile/invalid/dyamic-slot01-errors.yaml | 4 ++++ .../{valid => invalid}/dyamic-slot01-input.svelte | 0 .../{valid => invalid}/dyamic-slot01-requirements.json | 0 3 files changed, 4 insertions(+) create mode 100644 packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/dyamic-slot01-errors.yaml rename packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/{valid => invalid}/dyamic-slot01-input.svelte (100%) rename packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/{valid => invalid}/dyamic-slot01-requirements.json (100%) diff --git a/packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/dyamic-slot01-errors.yaml b/packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/dyamic-slot01-errors.yaml new file mode 100644 index 000000000..58aef47e3 --- /dev/null +++ b/packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/dyamic-slot01-errors.yaml @@ -0,0 +1,4 @@ +- message: name cannot be dynamic(dynamic-slot-name) + line: 5 + column: 7 + suggestions: null diff --git a/packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/valid/dyamic-slot01-input.svelte b/packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/dyamic-slot01-input.svelte similarity index 100% rename from packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/valid/dyamic-slot01-input.svelte rename to packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/dyamic-slot01-input.svelte diff --git a/packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/valid/dyamic-slot01-requirements.json b/packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/dyamic-slot01-requirements.json similarity index 100% rename from packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/valid/dyamic-slot01-requirements.json rename to packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/dyamic-slot01-requirements.json