feat: signal-prefer-let rule

Author: bfanger

.changeset/proud-donuts-tickle.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-svelte': minor
+---
+
+New svelte/signal-prefer-let rule

README.md

@@ -430,6 +430,7 @@ These rules relate to better ways of doing things to help you avoid problems:
 | [svelte/require-event-dispatcher-types](https://sveltejs.github.io/eslint-plugin-svelte/rules/require-event-dispatcher-types/) | require type parameters for `createEventDispatcher` |  |
 | [svelte/require-optimized-style-attribute](https://sveltejs.github.io/eslint-plugin-svelte/rules/require-optimized-style-attribute/) | require style attributes that can be optimized |  |
 | [svelte/require-stores-init](https://sveltejs.github.io/eslint-plugin-svelte/rules/require-stores-init/) | require initial value in store |  |
+| [svelte/signal-prefer-let](https://sveltejs.github.io/eslint-plugin-svelte/rules/signal-prefer-let/) | use let instead of const for signals values | :wrench: |
 | [svelte/valid-each-key](https://sveltejs.github.io/eslint-plugin-svelte/rules/valid-each-key/) | enforce keys to use variables defined in the `{#each}` block |  |
 
 ## Stylistic Issues

docs/rules.md

@@ -67,6 +67,7 @@ These rules relate to better ways of doing things to help you avoid problems:
 | [svelte/require-event-dispatcher-types](./rules/require-event-dispatcher-types.md)       | require type parameters for `createEventDispatcher`                                                                                       |          |
 | [svelte/require-optimized-style-attribute](./rules/require-optimized-style-attribute.md) | require style attributes that can be optimized                                                                                            |          |
 | [svelte/require-stores-init](./rules/require-stores-init.md)                             | require initial value in store                                                                                                            |          |
+| [svelte/signal-prefer-let](./rules/signal-prefer-let.md)                                 | use let instead of const for signals values                                                                                               | :wrench: |
 | [svelte/valid-each-key](./rules/valid-each-key.md)                                       | enforce keys to use variables defined in the `{#each}` block                                                                              |          |
 
 ## Stylistic Issues

docs/rules/signal-prefer-let.md

@@ -0,0 +1,50 @@
+---
+pageClass: 'rule-details'
+sidebarDepth: 0
+title: 'svelte/signal-prefer-let'
+description: 'use let instead of const for signals values'
+---
+
+# svelte/signal-prefer-let
+
+> use let instead of const for signals values
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
+- :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
+
+This rule reports whenever a signal is assigned to a const.
+In JavaScript `const` are defined as immutable references which cannot be reassigned.
+Signals are by definition changing and are reassigned by Svelte's reactivity system.
+
+<ESLintCodeBlock fix>
+
+<!--eslint-skip-->
+
+```svelte
+<script>
+  /* eslint svelte/signal-prefer-let: "error" */
+
+  /* ✓ GOOD */
+  let { value } = $props();
+
+  let doubled = $derived(value * 2);
+
+  /* ✗ BAD */
+  const { value } = $props();
+
+  const doubled = $derived(value * 2);
+</script>
+```
+
+</ESLintCodeBlock>
+
+## :wrench: Options
+
+Nothing
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/src/rules/signal-prefer-let.ts)
+- [Test source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/tests/src/rules/signal-prefer-let.ts)

packages/eslint-plugin-svelte/src/rule-types.ts

@@ -299,6 +299,11 @@ export interface RuleOptions {
    * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/shorthand-directive/
    */
   'svelte/shorthand-directive'?: Linter.RuleEntry<SvelteShorthandDirective>
+  /**
+   * use let instead of const for signals values
+   * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/signal-prefer-let/
+   */
+  'svelte/signal-prefer-let'?: Linter.RuleEntry<[]>
   /**
    * enforce order of attributes
    * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/sort-attributes/

packages/eslint-plugin-svelte/src/rules/signal-prefer-let.ts

@@ -0,0 +1,51 @@
+import type { TSESTree } from '@typescript-eslint/types';
+import { createRule } from '../utils';
+
+export default createRule('signal-prefer-let', {
+	meta: {
+		docs: {
+			description: 'use let instead of const for signals values',
+			category: 'Best Practices',
+			recommended: false
+		},
+		schema: [],
+		messages: {
+			useLet: "const is used for a signal value. Use 'let' instead."
+		},
+		type: 'suggestion',
+		fixable: 'code'
+	},
+	create(context) {
+		function preferLet(node: TSESTree.VariableDeclaration) {
+			if (node.kind !== 'const') {
+				return;
+			}
+			context.report({
+				node,
+				messageId: 'useLet',
+				fix: (fixer) => fixer.replaceTextRange([node.range[0], node.range[0] + 5], 'let')
+			});
+		}
+
+		return {
+			'VariableDeclaration > VariableDeclarator > CallExpression > Identifier'(
+				node: TSESTree.Identifier
+			) {
+				if (['$props', '$derived', '$state'].includes(node.name)) {
+					preferLet(node.parent.parent?.parent as TSESTree.VariableDeclaration);
+				}
+			},
+			'VariableDeclaration > VariableDeclarator > CallExpression > MemberExpression > Identifier'(
+				node: TSESTree.Identifier
+			) {
+				if (
+					node.name === 'by' &&
+					((node.parent as TSESTree.MemberExpression).object as TSESTree.Identifier).name ===
+						'$derived'
+				) {
+					preferLet(node.parent.parent?.parent?.parent as TSESTree.VariableDeclaration);
+				}
+			}
+		};
+	}
+});

packages/eslint-plugin-svelte/src/utils/rules.ts

@@ -59,6 +59,7 @@ import requireStoreReactiveAccess from '../rules/require-store-reactive-access';
 import requireStoresInit from '../rules/require-stores-init';
 import shorthandAttribute from '../rules/shorthand-attribute';
 import shorthandDirective from '../rules/shorthand-directive';
+import signalPreferLet from '../rules/signal-prefer-let';
 import sortAttributes from '../rules/sort-attributes';
 import spacedHtmlComment from '../rules/spaced-html-comment';
 import system from '../rules/system';
@@ -124,6 +125,7 @@ export const rules = [
 	requireStoresInit,
 	shorthandAttribute,
 	shorthandDirective,
+	signalPreferLet,
 	sortAttributes,
 	spacedHtmlComment,
 	system,

packages/eslint-plugin-svelte/tests/fixtures/rules/signal-prefer-let/invalid/test01-errors.yaml

@@ -0,0 +1,12 @@
+- message: "const is used for a signal value. Use 'let' instead."
+  line: 2
+  column: 2
+- message: "const is used for a signal value. Use 'let' instead."
+  line: 3
+  column: 2
+- message: "const is used for a signal value. Use 'let' instead."
+  line: 4
+  column: 2
+- message: "const is used for a signal value. Use 'let' instead."
+  line: 5
+  column: 2

packages/eslint-plugin-svelte/tests/fixtures/rules/signal-prefer-let/invalid/test01-input.svelte

@@ -0,0 +1,6 @@
+<script>
+	const { prop } = $props();
+	const state = $state();
+	const derived = $derived(state + 1);
+	const derivedBy = $derived.by(() => prop + state);
+</script>

packages/eslint-plugin-svelte/tests/fixtures/rules/signal-prefer-let/invalid/test01-output.svelte

@@ -0,0 +1,6 @@
+<script>
+	let { prop } = $props();
+	let state = $state();
+	let derived = $derived(state + 1);
+	let derivedBy = $derived.by(() => prop + state);
+</script>

packages/eslint-plugin-svelte/tests/fixtures/rules/signal-prefer-let/valid/test01-input.svelte

@@ -0,0 +1,3 @@
+<script>
+	let { value } = $props();
+</script>

packages/eslint-plugin-svelte/tests/src/rules/signal-prefer-let.ts

@@ -0,0 +1,12 @@
+import { RuleTester } from '../../utils/eslint-compat';
+import rule from '../../../src/rules/signal-prefer-let';
+import { loadTestCases } from '../../utils/utils';
+
+const tester = new RuleTester({
+	languageOptions: {
+		ecmaVersion: 2020,
+		sourceType: 'module'
+	}
+});
+
+tester.run('signal-prefer-let', rule as any, loadTestCases('signal-prefer-let'));