implement

Author: baseballyama

README.md

@@ -310,6 +310,7 @@ These rules relate to better ways of doing things to help you avoid problems:
 | [svelte/no-useless-mustaches](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-useless-mustaches/) | disallow unnecessary mustache interpolations | :star::wrench: |
 | [svelte/prefer-const](https://sveltejs.github.io/eslint-plugin-svelte/rules/prefer-const/) | Require `const` declarations for variables that are never reassigned after declared | :wrench: |
 | [svelte/prefer-destructured-store-props](https://sveltejs.github.io/eslint-plugin-svelte/rules/prefer-destructured-store-props/) | destructure values from object stores for better change tracking & fewer redraws | :bulb: |
+| [svelte/prefer-writable-derived](https://sveltejs.github.io/eslint-plugin-svelte/rules/prefer-writable-derived/) | Prefer using writable $derived instead of $state and $effect | :star::wrench: |
 | [svelte/require-each-key](https://sveltejs.github.io/eslint-plugin-svelte/rules/require-each-key/) | require keyed `{#each}` block | :star: |
 | [svelte/require-event-dispatcher-types](https://sveltejs.github.io/eslint-plugin-svelte/rules/require-event-dispatcher-types/) | require type parameters for `createEventDispatcher` | :star: |
 | [svelte/require-optimized-style-attribute](https://sveltejs.github.io/eslint-plugin-svelte/rules/require-optimized-style-attribute/) | require style attributes that can be optimized |  |

docs/rules.md

@@ -67,6 +67,7 @@ These rules relate to better ways of doing things to help you avoid problems:
 | [svelte/no-useless-mustaches](./rules/no-useless-mustaches.md)                           | disallow unnecessary mustache interpolations                                                                                              | :star::wrench: |
 | [svelte/prefer-const](./rules/prefer-const.md)                                           | Require `const` declarations for variables that are never reassigned after declared                                                       | :wrench:       |
 | [svelte/prefer-destructured-store-props](./rules/prefer-destructured-store-props.md)     | destructure values from object stores for better change tracking & fewer redraws                                                          | :bulb:         |
+| [svelte/prefer-writable-derived](./rules/prefer-writable-derived.md)                     | Prefer using writable $derived instead of $state and $effect                                                                              | :star::wrench: |
 | [svelte/require-each-key](./rules/require-each-key.md)                                   | require keyed `{#each}` block                                                                                                             | :star:         |
 | [svelte/require-event-dispatcher-types](./rules/require-event-dispatcher-types.md)       | require type parameters for `createEventDispatcher`                                                                                       | :star:         |
 | [svelte/require-optimized-style-attribute](./rules/require-optimized-style-attribute.md) | require style attributes that can be optimized                                                                                            |                |

docs/rules/prefer-writable-derived.md

@@ -1,23 +1,48 @@
-# (svelte/prefer-writable-derived)
+---
+pageClass: 'rule-details'
+sidebarDepth: 0
+title: 'svelte/prefer-writable-derived'
+description: 'Prefer using writable $derived instead of $state and $effect'
+---
 
-> description
+# svelte/prefer-writable-derived
+
+> Prefer using writable $derived instead of $state and $effect
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
+- :gear: This rule is included in `"plugin:svelte/recommended"`.
+- :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 ???.
+This rule reports when you use a combination of `$state` and `$effect` to create a derived value that can be written to. It encourages using the more concise and clearer `$derived` syntax instead.
 
 <!--eslint-skip-->
 
 ```svelte
 <script>
   /* eslint svelte/prefer-writable-derived: "error" */
-</script>
+  const { initialValue } = $props();
 
-<!-- ✓ GOOD -->
+  // ✓ GOOD
+  let value1 = $derived(initialValue);
 
-<!-- ✗ BAD -->
+  // ✗ BAD
+  let value2 = $state(initialValue);
+  $effect(() => {
+    value2 = initialValue;
+  });
+</script>
 ```
 
+The rule specifically looks for patterns where:
+
+1. You initialize a variable with `$state()`
+2. You then use `$effect()` or `$effect.pre()` to assign a new value to that same variable
+3. The effect function contains only a single assignment statement
+
+When this pattern is detected, the rule suggests refactoring to use `$derived()` instead, which provides the same functionality in a more concise way.
+
 ## :wrench: Options
 
 ```json
@@ -26,8 +51,14 @@ This rule reports ???.
 }
 ```
 
--
+- This rule has no options.
 
 ## :books: Further Reading
 
--
+- [Svelte Documentation on Reactivity Primitives](https://svelte.dev/docs/svelte-components#script-2-assignments-are-reactive)
+- [Svelte RFC for Reactivity Primitives](https://github.com/sveltejs/rfcs/blob/rfc-better-primitives/text/0000-better-primitives.md)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/packages/eslint-plugin-svelte/src/rules/prefer-writable-derived.ts)
+- [Test source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/packages/eslint-plugin-svelte/tests/src/rules/prefer-writable-derived.ts)

packages/eslint-plugin-svelte/src/configs/flat/recommended.ts

@@ -37,6 +37,7 @@ const config: Linter.Config[] = [
 			'svelte/no-unused-svelte-ignore': 'error',
 			'svelte/no-useless-children-snippet': 'error',
 			'svelte/no-useless-mustaches': 'error',
+			'svelte/prefer-writable-derived': 'error',
 			'svelte/require-each-key': 'error',
 			'svelte/require-event-dispatcher-types': 'error',
 			'svelte/require-store-reactive-access': 'error',

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

@@ -306,6 +306,11 @@ export interface RuleOptions {
    * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/prefer-style-directive/
    */
   'svelte/prefer-style-directive'?: Linter.RuleEntry<[]>
+  /**
+   * Prefer using writable $derived instead of $state and $effect
+   * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/prefer-writable-derived/
+   */
+  'svelte/prefer-writable-derived'?: Linter.RuleEntry<[]>
   /**
    * require keyed `{#each}` block
    * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/require-each-key/

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

@@ -60,7 +60,7 @@ import preferClassDirective from '../rules/prefer-class-directive.js';
 import preferConst from '../rules/prefer-const.js';
 import preferDestructuredStoreProps from '../rules/prefer-destructured-store-props.js';
 import preferStyleDirective from '../rules/prefer-style-directive.js';
-import preferWritableDerived from 'src/rules/prefer-writable-derived.js';
+import preferWritableDerived from '../rules/prefer-writable-derived.js';
 import requireEachKey from '../rules/require-each-key.js';
 import requireEventDispatcherTypes from '../rules/require-event-dispatcher-types.js';
 import requireOptimizedStyleAttribute from '../rules/require-optimized-style-attribute.js';

packages/eslint-plugin-svelte/tests/fixtures/rules/prefer-writable-derived/invalid/multiple-reassign1-errors.yaml

@@ -0,0 +1,4 @@
+- message: Prefer using writable $derived instead of $state and $effect
+  line: 4
+  column: 6
+  suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/prefer-writable-derived/invalid/multiple-reassign1-input.svelte

@@ -0,0 +1,14 @@
+<script>
+	const { albumName } = $props();
+
+	let newAlbumName = $state(albumName);
+	$effect(() => {
+		newAlbumName = albumName;
+	});
+
+	setInterval(() => {
+		newAlbumName = albumName + albumName;
+	}, 1000);
+</script>
+
+<input bind:value={newAlbumName} />

packages/eslint-plugin-svelte/tests/fixtures/rules/prefer-writable-derived/invalid/multiple-reassign1-output.svelte

@@ -0,0 +1,12 @@
+<script>
+	const { albumName } = $props();
+
+	let newAlbumName = $derived(albumName);
+	;
+
+	setInterval(() => {
+		newAlbumName = albumName + albumName;
+	}, 1000);
+</script>
+
+<input bind:value={newAlbumName} />

packages/eslint-plugin-svelte/tests/fixtures/rules/prefer-writable-derived/invalid/multiple-reassign2-errors.yaml

@@ -0,0 +1,4 @@
+- message: Prefer using writable $derived instead of $state and $effect
+  line: 4
+  column: 6
+  suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/prefer-writable-derived/invalid/multiple-reassign2-input.svelte

@@ -0,0 +1,14 @@
+<script>
+	const { albumName } = $props();
+
+	let newAlbumName = $state(albumName);
+	$effect(() => {
+		newAlbumName = albumName;
+	});
+</script>
+
+<FooComponent
+	doSomething={(value) => {
+		newAlbumName = value;
+	}}
+/>

packages/eslint-plugin-svelte/tests/fixtures/rules/prefer-writable-derived/invalid/multiple-reassign2-output.svelte

@@ -0,0 +1,12 @@
+<script>
+	const { albumName } = $props();
+
+	let newAlbumName = $derived(albumName);
+	;
+</script>
+
+<FooComponent
+	doSomething={(value) => {
+		newAlbumName = value;
+	}}
+/>

packages/eslint-plugin-svelte/tests/fixtures/rules/prefer-writable-derived/valid/has-condition-input.svelte renamed to packages/eslint-plugin-svelte/tests/fixtures/rules/prefer-writable-derived/valid/condition1-input.svelte

@@ -0,0 +1,14 @@
+<script>
+	const { albumName } = $props();
+
+	let newAlbumName = $state(albumName);
+	$effect(() => {
+		if (albumName === '') {
+			newAlbumName = albumName + albumName;
+		} else {
+			newAlbumName = albumName;
+		}
+	});
+</script>
+
+<input bind:value={newAlbumName} />