eslint-plugin-svelte 3.19.0 → 3.21.0

package/README.md

@@ -296,6 +296,7 @@ These rules relate to possible syntax or logic errors in Svelte code:
 | Rule ID | Description |    |
 |:--------|:------------|:---|
 | [svelte/infinite-reactive-loop](https://sveltejs.github.io/eslint-plugin-svelte/rules/infinite-reactive-loop/) | Svelte runtime prevents calling the same reactive statement twice in a microtask. But between different microtask, it doesn't prevent. | :star: |
+| [svelte/no-bind-value-on-checkable-inputs](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-bind-value-on-checkable-inputs/) | disallow useless `bind:value` on `<input type="checkbox">` and `<input type="radio">` | :bulb: |
 | [svelte/no-dom-manipulating](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-dom-manipulating/) | disallow DOM manipulating | :star: |
 | [svelte/no-dupe-else-if-blocks](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-dupe-else-if-blocks/) | disallow duplicate conditions in `{#if}` / `{:else if}` chains | :star: |
 | [svelte/no-dupe-on-directives](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-dupe-on-directives/) | disallow duplicate `on:` directives | :star: |
@@ -334,6 +335,7 @@ These rules relate to better ways of doing things to help you avoid problems:
 | [svelte/block-lang](https://sveltejs.github.io/eslint-plugin-svelte/rules/block-lang/) | disallows the use of languages other than those specified in the configuration for the lang attribute of `<script>` and `<style>` blocks. | :bulb: |
 | [svelte/button-has-type](https://sveltejs.github.io/eslint-plugin-svelte/rules/button-has-type/) | disallow usage of button without an explicit type attribute |  |
 | [svelte/no-add-event-listener](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-add-event-listener/) | Warns against the use of `addEventListener` | :bulb: |
+| [svelte/no-at-const-tags](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-at-const-tags/) | disallow the use of `{@const}` in favor of `{const ...}` declaration tags | :wrench: |
 | [svelte/no-at-debug-tags](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-at-debug-tags/) | disallow the use of `{@debug}` | :star::bulb: |
 | [svelte/no-ignored-unsubscribe](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-ignored-unsubscribe/) | disallow ignoring the unsubscribe method returned by the `subscribe()` on Svelte stores. |  |
 | [svelte/no-immutable-reactive-statements](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-immutable-reactive-statements/) | disallow reactive statements that don't reference reactive values. | :star: |
@@ -403,7 +405,7 @@ These rules relate to SvelteKit and its best Practices.
 |:--------|:------------|:---|
 | [svelte/no-export-load-in-svelte-module-in-kit-pages](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-export-load-in-svelte-module-in-kit-pages/) | disallow exporting load functions in `*.svelte` module in SvelteKit page components. | :star: |
 | [svelte/no-navigation-without-resolve](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-navigation-without-resolve/) | disallow internal navigation (links, `goto()`, `pushState()`, `replaceState()`) without a `resolve()` | :star: |
-| [svelte/valid-prop-names-in-kit-pages](https://sveltejs.github.io/eslint-plugin-svelte/rules/valid-prop-names-in-kit-pages/) | disallow props other than data or errors in SvelteKit page components. | :star: |
+| [svelte/valid-prop-names-in-kit-pages](https://sveltejs.github.io/eslint-plugin-svelte/rules/valid-prop-names-in-kit-pages/) | disallow invalid props in SvelteKit route components. | :star: |
 
 ## Experimental
 

package/lib/main.d.ts

@@ -14,7 +14,7 @@ export declare const configs: {
 export declare const rules: Record<string, Rule.RuleModule>;
 export declare const meta: {
     name: "eslint-plugin-svelte";
-    version: "3.19.0";
+    version: "3.21.0";
 };
 export declare const processors: {
     '.svelte': typeof processor;

package/lib/meta.d.ts

@@ -1,2 +1,2 @@
 export declare const name: "eslint-plugin-svelte";
-export declare const version: "3.19.0";
+export declare const version: "3.21.0";

package/lib/meta.js

@@ -2,4 +2,4 @@
 // This file has been automatically generated,
 // in order to update its content execute "pnpm run update"
 export const name = 'eslint-plugin-svelte';
-export const version = '3.19.0';
+export const version = '3.21.0';

package/lib/rule-types.d.ts

@@ -100,6 +100,11 @@ export interface RuleOptions {
      * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-add-event-listener/
      */
     'svelte/no-add-event-listener'?: Linter.RuleEntry<[]>;
+    /**
+     * disallow the use of `{@const}` in favor of `{const ...}` declaration tags
+     * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-at-const-tags/
+     */
+    'svelte/no-at-const-tags'?: Linter.RuleEntry<[]>;
     /**
      * disallow the use of `{@debug}`
      * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-at-debug-tags/
@@ -110,6 +115,11 @@ export interface RuleOptions {
      * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-at-html-tags/
      */
     'svelte/no-at-html-tags'?: Linter.RuleEntry<[]>;
+    /**
+     * disallow useless `bind:value` on `<input type="checkbox">` and `<input type="radio">`
+     * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-bind-value-on-checkable-inputs/
+     */
+    'svelte/no-bind-value-on-checkable-inputs'?: Linter.RuleEntry<[]>;
     /**
      * disallow DOM manipulating
      * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-dom-manipulating/
@@ -409,7 +419,7 @@ export interface RuleOptions {
      */
     'svelte/valid-each-key'?: Linter.RuleEntry<[]>;
     /**
-     * disallow props other than data or errors in SvelteKit page components.
+     * disallow invalid props in SvelteKit route components.
      * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/valid-prop-names-in-kit-pages/
      */
     'svelte/valid-prop-names-in-kit-pages'?: Linter.RuleEntry<[]>;

package/lib/rules/no-at-const-tags.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("../types.js").RuleModule;
+export default _default;

package/lib/rules/no-at-const-tags.js

@@ -0,0 +1,67 @@
+import { createRule } from '../utils/index.js';
+import { getSvelteContext } from '../utils/svelte-context.js';
+import { VERSION as SVELTE_VERSION } from 'svelte/compiler';
+import semver from 'semver';
+const shouldRun = semver.satisfies(SVELTE_VERSION, '>=5.56.0');
+export default createRule('no-at-const-tags', {
+    meta: {
+        docs: {
+            description: 'disallow the use of `{@const}` in favor of `{const ...}` declaration tags',
+            category: 'Best Practices',
+            recommended: false
+        },
+        fixable: 'code',
+        schema: [],
+        messages: {
+            unexpected: 'Use `{const ...}` declaration tag instead of legacy `{@const ...}`.'
+        },
+        type: 'suggestion',
+        conditions: [
+            {
+                svelteVersions: ['5']
+            }
+        ]
+    },
+    create(context) {
+        if (!shouldRun) {
+            return {};
+        }
+        const sourceCode = context.sourceCode;
+        const runes = getSvelteContext(context)?.runes;
+        // Only report and fix in runes mode, since preserving reactivity requires
+        // `$derived(...)`, which is unavailable outside runes mode.
+        if (runes !== true) {
+            return {};
+        }
+        return {
+            SvelteConstTag(node) {
+                context.report({
+                    node,
+                    messageId: 'unexpected',
+                    *fix(fixer) {
+                        const text = sourceCode.getText(node);
+                        const match = /^\{(\s*)@const\b/u.exec(text);
+                        if (!match) {
+                            return;
+                        }
+                        const atOffset = node.range[0] + 1 + match[1].length;
+                        yield fixer.removeRange([atOffset, atOffset + 1]);
+                        const init = node.declarations[0].init;
+                        if (init == null) {
+                            return;
+                        }
+                        // Preserve the reactivity of legacy `{@const}` by wrapping the
+                        // initializer in `$derived(...)`. Skip when already wrapped.
+                        if (init.type === 'CallExpression' &&
+                            init.callee.type === 'Identifier' &&
+                            init.callee.name === '$derived') {
+                            return;
+                        }
+                        yield fixer.insertTextBefore(init, '$derived(');
+                        yield fixer.insertTextAfter(init, ')');
+                    }
+                });
+            }
+        };
+    }
+});

package/lib/rules/no-bind-value-on-checkable-inputs.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("src/types.js").RuleModule;
+export default _default;

package/lib/rules/no-bind-value-on-checkable-inputs.js

@@ -0,0 +1,73 @@
+import { getStaticValue } from '@eslint-community/eslint-utils';
+import { getScope } from '../utils/ast-utils.js';
+import { createRule } from '../utils/index.js';
+export default createRule('no-bind-value-on-checkable-inputs', {
+    meta: {
+        hasSuggestions: true,
+        docs: {
+            description: 'disallow useless `bind:value` on `<input type="checkbox">` and `<input type="radio">`',
+            category: 'Possible Errors',
+            recommended: false
+        },
+        schema: [],
+        type: 'problem',
+        messages: {
+            checkboxValueBinding: '`bind:value` does not work on checkbox inputs. Did you mean `bind:checked` or `bind:group`?',
+            radioValueBinding: '`bind:value` does not work on radio inputs. Did you mean `bind:group`?', // svelte compiler disallows `bind:checked` on radios
+            checkedSuggestion: 'Change `bind:value` to `bind:checked`.',
+            groupSuggestion: 'Change `bind:value` to `bind:group`.'
+        }
+    },
+    create(context) {
+        return {
+            "SvelteElement[name.name='input']"(node) {
+                function getType() {
+                    const typeAttr = node.startTag?.attributes.find((attr) => attr.type === 'SvelteAttribute' && attr.key.name.toLowerCase() === 'type');
+                    if (!typeAttr)
+                        return null;
+                    if (typeAttr.value.length !== 1)
+                        return null;
+                    const typeValue = typeAttr.value[0];
+                    if (typeValue.type === 'SvelteLiteral') {
+                        // <input type="checkbox" />
+                        return typeValue.value.toLowerCase();
+                    }
+                    if (typeValue.type === 'SvelteMustacheTag') {
+                        const staticValue = getStaticValue(typeValue.expression, getScope(context, typeValue.expression));
+                        if (typeof staticValue?.value !== 'string')
+                            return null;
+                        // <input type={"checkbox"} />
+                        return staticValue.value.toLowerCase();
+                    }
+                    return null;
+                }
+                const type = getType();
+                if (!type || (type !== 'checkbox' && type !== 'radio'))
+                    return;
+                const bindValue = node.startTag?.attributes.find((attr) => attr.type === 'SvelteDirective' &&
+                    attr.kind === 'Binding' &&
+                    attr.key.name.name === 'value');
+                if (!bindValue)
+                    return;
+                function suggestion(suggestionType, bindValue // make typescript happy
+                ) {
+                    return {
+                        messageId: `${suggestionType}Suggestion`,
+                        fix(fixer) {
+                            if (bindValue.shorthand)
+                                return fixer.replaceText(bindValue, `bind:${suggestionType}={value}`);
+                            return fixer.replaceText(bindValue.key, `bind:${suggestionType}`);
+                        }
+                    };
+                }
+                context.report({
+                    node: bindValue,
+                    messageId: `${type}ValueBinding`,
+                    suggest: type === 'checkbox'
+                        ? [suggestion('checked', bindValue), suggestion('group', bindValue)]
+                        : [suggestion('group', bindValue)]
+                });
+            }
+        };
+    }
+});

package/lib/rules/valid-prop-names-in-kit-pages.js

@@ -1,7 +1,9 @@
 import { createRule } from '../utils/index.js';
-import { getSvelteVersion } from '../utils/svelte-context.js';
-const EXPECTED_PROP_NAMES = ['data', 'errors', 'form', 'params', 'snapshot'];
-const EXPECTED_PROP_NAMES_SVELTE5 = [...EXPECTED_PROP_NAMES, 'children'];
+import { getSvelteContext, getSvelteVersion } from '../utils/svelte-context.js';
+const PAGE_PROP_NAMES = ['data', 'form', 'params', 'snapshot'];
+const LEGACY_PAGE_PROP_NAMES = [...PAGE_PROP_NAMES, 'errors'];
+const LAYOUT_PROP_NAMES = [...PAGE_PROP_NAMES, 'children'];
+const ERROR_PROP_NAMES = ['error'];
 function checkProp(node, context, expectedPropNames) {
     if (node.id.type !== 'ObjectPattern')
         return;
@@ -32,25 +34,35 @@ function isModuleScript(node) {
 export default createRule('valid-prop-names-in-kit-pages', {
     meta: {
         docs: {
-            description: 'disallow props other than data or errors in SvelteKit page components.',
+            description: 'disallow invalid props in SvelteKit route components.',
             category: 'SvelteKit',
             recommended: true
         },
         schema: [],
         messages: {
-            unexpected: 'disallow props other than data or errors in SvelteKit page components.'
+            unexpected: 'disallow invalid props in SvelteKit route components.'
         },
         type: 'problem',
         conditions: [
             {
-                svelteKitFileTypes: ['+page.svelte', '+error.svelte', '+layout.svelte']
+                svelteKitFileTypes: ['+page.svelte', '+layout.svelte', '+error.svelte']
             }
         ]
     },
     create(context) {
         let isScript = false;
         const isSvelte5 = getSvelteVersion() === '5';
-        const expectedPropNames = isSvelte5 ? EXPECTED_PROP_NAMES_SVELTE5 : EXPECTED_PROP_NAMES;
+        const svelteContext = getSvelteContext(context);
+        const fileType = svelteContext?.svelteKitFileType;
+        let expectedPropNames = PAGE_PROP_NAMES;
+        if (isSvelte5) {
+            if (fileType === '+layout.svelte') {
+                expectedPropNames = LAYOUT_PROP_NAMES;
+            }
+            else if (fileType === '+error.svelte') {
+                expectedPropNames = ERROR_PROP_NAMES;
+            }
+        }
         return {
             // <script>
             'Program > SvelteScriptElement > SvelteStartTag': (node) => {
@@ -67,7 +79,7 @@ export default createRule('valid-prop-names-in-kit-pages', {
                     return;
                 // export let foo
                 if (node.id.type === 'Identifier') {
-                    if (!expectedPropNames.includes(node.id.name)) {
+                    if (!LEGACY_PAGE_PROP_NAMES.includes(node.id.name)) {
                         context.report({
                             node,
                             loc: node.loc,
@@ -77,7 +89,7 @@ export default createRule('valid-prop-names-in-kit-pages', {
                     return;
                 }
                 // export let { xxx, yyy } = zzz
-                checkProp(node, context, expectedPropNames);
+                checkProp(node, context, LEGACY_PAGE_PROP_NAMES);
             },
             // Svelte5
             // let { foo, bar } = $props();

package/lib/utils/rules.js

@@ -17,8 +17,10 @@ import maxAttributesPerLine from '../rules/max-attributes-per-line.js';
 import maxLinesPerBlock from '../rules/max-lines-per-block.js';
 import mustacheSpacing from '../rules/mustache-spacing.js';
 import noAddEventListener from '../rules/no-add-event-listener.js';
+import noAtConstTags from '../rules/no-at-const-tags.js';
 import noAtDebugTags from '../rules/no-at-debug-tags.js';
 import noAtHtmlTags from '../rules/no-at-html-tags.js';
+import noBindValueOnCheckableInputs from '../rules/no-bind-value-on-checkable-inputs.js';
 import noDomManipulating from '../rules/no-dom-manipulating.js';
 import noDupeElseIfBlocks from '../rules/no-dupe-else-if-blocks.js';
 import noDupeOnDirectives from '../rules/no-dupe-on-directives.js';
@@ -100,8 +102,10 @@ export const rules = [
     maxLinesPerBlock,
     mustacheSpacing,
     noAddEventListener,
+    noAtConstTags,
     noAtDebugTags,
     noAtHtmlTags,
+    noBindValueOnCheckableInputs,
     noDomManipulating,
     noDupeElseIfBlocks,
     noDupeOnDirectives,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-svelte",
-  "version": "3.19.0",
+  "version": "3.21.0",
   "description": "ESLint plugin for Svelte using AST",
   "repository": {
     "type": "git",