refactor: Instead of "signal", use wording used in the Svelte docs

Author: bfanger

.changeset/proud-donuts-tickle.md

@@ -2,4 +2,4 @@
 'eslint-plugin-svelte': minor
 ---
 
-New svelte/signal-prefer-let rule
+New svelte/rune-prefer-let rule

README.md

@@ -430,7 +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/rune-prefer-let](https://sveltejs.github.io/eslint-plugin-svelte/rules/rune-prefer-let/) | use let instead of const for reactive variables created by runes | :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,7 +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/rune-prefer-let](./rules/rune-prefer-let.md)                                     | use let instead of const for reactive variables created by runes                                                                          | :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 docs/rules/rune-prefer-let.md

@@ -1,30 +1,30 @@
 ---
 pageClass: 'rule-details'
 sidebarDepth: 0
-title: 'svelte/signal-prefer-let'
-description: 'use let instead of const for signals values'
+title: 'svelte/rune-prefer-let'
+description: 'use let instead of const for reactive variables created by runes'
 ---
 
-# svelte/signal-prefer-let
+# svelte/rune-prefer-let
 
-> use let instead of const for signals values
+> use let instead of const for reactive variables created by runes
 
 - :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.
+This rule reports whenever a rune that creates a reactive value 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.
+Reactive variables can be reassigned by Svelte's reactivity system.
 
 <ESLintCodeBlock fix>
 
 <!--eslint-skip-->
 
 ```svelte
 <script>
-  /* eslint svelte/signal-prefer-let: "error" */
+  /* eslint svelte/rune-prefer-let: "error" */
 
   /* ✓ GOOD */
   let { value } = $props();
@@ -46,5 +46,5 @@ 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)
+- [Rule source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/src/rules/rune-prefer-let.ts)
+- [Test source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/tests/src/rules/rune-prefer-let.ts)

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

@@ -289,6 +289,11 @@ export interface RuleOptions {
    * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/require-stores-init/
    */
   'svelte/require-stores-init'?: Linter.RuleEntry<[]>
+  /**
+   * use let instead of const for reactive variables created by runes
+   * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/rune-prefer-let/
+   */
+  'svelte/rune-prefer-let'?: Linter.RuleEntry<[]>
   /**
    * enforce use of shorthand syntax in attribute
    * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/shorthand-attribute/
@@ -299,11 +304,6 @@ 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 packages/eslint-plugin-svelte/src/rules/rune-prefer-let.ts

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

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

@@ -57,9 +57,9 @@ import requireOptimizedStyleAttribute from '../rules/require-optimized-style-att
 import requireStoreCallbacksUseSetParam from '../rules/require-store-callbacks-use-set-param';
 import requireStoreReactiveAccess from '../rules/require-store-reactive-access';
 import requireStoresInit from '../rules/require-stores-init';
+import runePreferLet from '../rules/rune-prefer-let';
 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';
@@ -123,9 +123,9 @@ export const rules = [
 	requireStoreCallbacksUseSetParam,
 	requireStoreReactiveAccess,
 	requireStoresInit,
+	runePreferLet,
 	shorthandAttribute,
 	shorthandDirective,
-	signalPreferLet,
 	sortAttributes,
 	spacedHtmlComment,
 	system,

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

@@ -0,0 +1,20 @@
+- message: const is used for a reactive variable from $props(). Use 'let' instead.
+  line: 2
+  column: 2
+  suggestions: null
+- message: const is used for a reactive variable from $state(). Use 'let' instead.
+  line: 4
+  column: 2
+  suggestions: null
+- message: const is used for a reactive variable from $state.frozen(). Use 'let' instead.
+  line: 5
+  column: 2
+  suggestions: null
+- message: const is used for a reactive variable from $derived(). Use 'let' instead.
+  line: 7
+  column: 2
+  suggestions: null
+- message: const is used for a reactive variable from $derived.by(). Use 'let' instead.
+  line: 8
+  column: 2
+  suggestions: null

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

@@ -1,6 +1,9 @@
 <script>
 	const { prop } = $props();
+
 	const state = $state();
+	const frozen = $state.frozen();
+
 	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 packages/eslint-plugin-svelte/tests/fixtures/rules/rune-prefer-let/invalid/test01-output.svelte

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

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

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

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

@@ -1,5 +1,5 @@
 import { RuleTester } from '../../utils/eslint-compat';
-import rule from '../../../src/rules/signal-prefer-let';
+import rule from '../../../src/rules/rune-prefer-let';
 import { loadTestCases } from '../../utils/utils';
 
 const tester = new RuleTester({
@@ -9,4 +9,4 @@ const tester = new RuleTester({
 	}
 });
 
-tester.run('signal-prefer-let', rule as any, loadTestCases('signal-prefer-let'));
+tester.run('rune-prefer-let', rule as any, loadTestCases('rune-prefer-let'));