eslint-plugin-svelte 3.20.0 → 3.22.0

package/README.md

@@ -296,6 +296,8 @@ 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-conflicting-module-names](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-conflicting-module-names/) | disallow a `.svelte` component and a same-named runes module (e.g. `Foo.svelte` and `Foo.svelte.ts`) from coexisting |  |
 | [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.22.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.22.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.22.0';

package/lib/rule-types.d.ts

@@ -115,6 +115,16 @@ 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 a `.svelte` component and a same-named runes module (e.g. `Foo.svelte` and `Foo.svelte.ts`) from coexisting
+     * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-conflicting-module-names/
+     */
+    'svelte/no-conflicting-module-names'?: 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/rules/no-conflicting-module-names.d.ts

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

package/lib/rules/no-conflicting-module-names.js

@@ -0,0 +1,104 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { createRule } from '../utils/index.js';
+// Extensions that plain TypeScript resolution appends to an unknown `.svelte`
+// specifier. `.d.ts` is intentionally excluded: `Foo.svelte.d.ts` is a
+// hand-written component declaration and does not shadow the component.
+const MODULE_EXTENSIONS = ['.ts', '.tsx', '.js', '.jsx', '.mts', '.cts', '.mjs', '.cjs'];
+function isFile(filePath) {
+    try {
+        return fs.statSync(filePath).isFile();
+    }
+    catch {
+        return false;
+    }
+}
+// Resolve the real on-disk casing of a path's basename. On case-insensitive
+// file systems (macOS, Windows) `fs.statSync` matches a differently-cased
+// sibling, so the constructed name may not exist with that exact casing. Read
+// the directory and use the actual entry name when one matches.
+function realBasename(filePath) {
+    const wanted = path.basename(filePath);
+    try {
+        const entries = fs.readdirSync(path.dirname(filePath));
+        return (entries.find((entry) => entry === wanted) ??
+            entries.find((entry) => entry.toLowerCase() === wanted.toLowerCase()) ??
+            wanted);
+    }
+    catch {
+        return wanted;
+    }
+}
+export default createRule('no-conflicting-module-names', {
+    meta: {
+        docs: {
+            description: 'disallow a `.svelte` component and a same-named runes module (e.g. `Foo.svelte` and `Foo.svelte.ts`) from coexisting',
+            category: 'Possible Errors',
+            recommended: false
+        },
+        schema: [],
+        messages: {
+            conflictOnComponent: 'The module `{{moduleName}}` has the same name as this component. TypeScript resolves the import `{{specifier}}` to that module, not to this component. Rename `{{moduleName}}`.',
+            conflictOnModule: 'This module has the same name as the component `{{svelteName}}`. TypeScript resolves the import `{{specifier}}` to this module, not to the component. Rename this file.'
+        },
+        type: 'problem'
+    },
+    create(context) {
+        const filename = context.physicalFilename;
+        // Skip virtual/untitled files that do not exist on disk (editors, tests
+        // with fake paths). Only real files on disk are checked.
+        if (!isFile(filename)) {
+            return {};
+        }
+        // Both sides of the collision are linted by this plugin, and a lint run
+        // may contain only one of them, so each side reports on itself.
+        if (filename.endsWith('.svelte')) {
+            return {
+                Program(node) {
+                    const svelteName = path.basename(filename);
+                    for (const ext of MODULE_EXTENSIONS) {
+                        const modulePath = `${filename}${ext}`;
+                        if (isFile(modulePath)) {
+                            context.report({
+                                node,
+                                loc: { line: 1, column: 0 },
+                                messageId: 'conflictOnComponent',
+                                data: {
+                                    moduleName: realBasename(modulePath),
+                                    specifier: `./${svelteName}`
+                                }
+                            });
+                            return;
+                        }
+                    }
+                }
+            };
+        }
+        // A module named `<name>.svelte.<ext>`. Dropping the extension gives the
+        // component path it collides with. Declaration files such as
+        // `Foo.svelte.d.ts` do not match, because dropping `.ts` leaves
+        // `Foo.svelte.d`, which is not a component name.
+        const moduleExt = MODULE_EXTENSIONS.find((ext) => filename.endsWith(ext));
+        if (moduleExt == null) {
+            return {};
+        }
+        const sveltePath = filename.slice(0, -moduleExt.length);
+        if (!sveltePath.endsWith('.svelte') || !isFile(sveltePath)) {
+            return {};
+        }
+        return {
+            Program(node) {
+                const svelteName = realBasename(sveltePath);
+                context.report({
+                    node,
+                    loc: { line: 1, column: 0 },
+                    messageId: 'conflictOnModule',
+                    data: {
+                        svelteName,
+                        specifier: `./${svelteName}`
+                    }
+                });
+            }
+        };
+    }
+});

package/lib/utils/rules.js

@@ -20,6 +20,8 @@ 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 noConflictingModuleNames from '../rules/no-conflicting-module-names.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 +106,8 @@ export const rules = [
     noAtConstTags,
     noAtDebugTags,
     noAtHtmlTags,
+    noBindValueOnCheckableInputs,
+    noConflictingModuleNames,
     noDomManipulating,
     noDupeElseIfBlocks,
     noDupeOnDirectives,

package/package.json

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