eslint-plugin-svelte 3.20.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: |

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.20.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.20.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.20.0';
+export const version = '3.21.0';

package/lib/rule-types.d.ts

@@ -115,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/

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/utils/rules.js

@@ -20,6 +20,7 @@ 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';
@@ -104,6 +105,7 @@ export const rules = [
     noAtConstTags,
     noAtDebugTags,
     noAtHtmlTags,
+    noBindValueOnCheckableInputs,
     noDomManipulating,
     noDupeElseIfBlocks,
     noDupeOnDirectives,

package/package.json

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