add allowReassign option

Author: baseballyama

docs/rules/no-unnecessary-state-wrap.md

@@ -65,13 +65,15 @@ Therefore, wrapping them with `$state` is unnecessary and can lead to confusion.
   "svelte/no-unnecessary-state-wrap": [
     "error",
     {
-      "additionalReactiveClasses": []
+      "additionalReactiveClasses": [],
+      "allowReassign": false
     }
   ]
 }
 ```
 
 - `additionalReactiveClasses` ... An array of class names that should also be considered reactive. This is useful when you have custom classes that are inherently reactive. Default is `[]`.
+- `allowReassign` ... If `true`, allows `$state` wrapping of reactive classes when the variable is reassigned. Default is `false`.
 
 ### Examples with Options
 
@@ -90,6 +92,23 @@ Therefore, wrapping them with `$state` is unnecessary and can lead to confusion.
 </script>
 ```
 
+#### `allowReassign`
+
+```svelte
+<script>
+  /* eslint svelte/no-unnecessary-state-wrap: ["error", { "allowReassign": true }] */
+  import { SvelteSet } from 'svelte/reactivity';
+
+  // ✓ GOOD
+  let set1 = $state(new SvelteSet());
+  set1 = new SvelteSet([1, 2, 3]); // Variable is reassigned
+
+  // ✗ BAD
+  const set2 = $state(new SvelteSet()); // const cannot be reassigned
+  let set3 = $state(new SvelteSet()); // Variable is never reassigned
+</script>
+```
+
 ## :mag: Implementation
 
 - [Rule source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/packages/eslint-plugin-svelte/src/rules/no-unnecessary-state-wrap.ts)

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

@@ -516,6 +516,7 @@ type SvelteNoUnknownStyleDirectiveProperty = []|[{
 // ----- svelte/no-unnecessary-state-wrap -----
 type SvelteNoUnnecessaryStateWrap = []|[{
   additionalReactiveClasses?: string[]
+  allowReassign?: boolean
 }]
 // ----- svelte/no-unused-class-name -----
 type SvelteNoUnusedClassName = []|[{

packages/eslint-plugin-svelte/src/rules/no-unnecessary-state-wrap.ts

@@ -29,6 +29,9 @@ export default createRule('no-unnecessary-state-wrap', {
 							type: 'string'
 						},
 						uniqueItems: true
+					},
+					allowReassign: {
+						type: 'boolean'
 					}
 				},
 				additionalProperties: false
@@ -50,6 +53,7 @@ export default createRule('no-unnecessary-state-wrap', {
 	create(context) {
 		const options = context.options[0] ?? {};
 		const additionalReactiveClasses = options.additionalReactiveClasses ?? [];
+		const allowReassign = options.allowReassign ?? false;
 
 		const referenceTracker = new ReferenceTracker(getSourceCode(context).scopeManager.globalScope!);
 		const traceMap: Record<string, Record<string, boolean>> = {};
@@ -75,11 +79,25 @@ export default createRule('no-unnecessary-state-wrap', {
 			};
 		});
 
+		function isReassigned(identifier: TSESTree.Identifier): boolean {
+			const variable = getSourceCode(context).scopeManager.getDeclaredVariables(
+				identifier.parent
+			)[0];
+			return variable.references.some((ref) => {
+				return ref.isWrite() && ref.identifier !== identifier;
+			});
+		}
+
 		function reportUnnecessaryStateWrap(
 			stateNode: TSESTree.Node,
 			targetNode: TSESTree.Node,
-			className: string
+			className: string,
+			identifier?: TSESTree.Identifier
 		) {
+			if (allowReassign && identifier && isReassigned(identifier)) {
+				return;
+			}
+
 			context.report({
 				node: targetNode,
 				messageId: 'unnecessaryStateWrap',
@@ -112,7 +130,7 @@ export default createRule('no-unnecessary-state-wrap', {
 						if (additionalReactiveClasses.includes(name)) {
 							const parent = node.parent;
 							if (parent?.type === 'VariableDeclarator' && parent.id.type === 'Identifier') {
-								reportUnnecessaryStateWrap(node, arg, name);
+								reportUnnecessaryStateWrap(node, arg, name, parent.id);
 							}
 						}
 					}
@@ -128,7 +146,7 @@ export default createRule('no-unnecessary-state-wrap', {
 					) {
 						const parent = node.parent.parent;
 						if (parent?.type === 'VariableDeclarator' && parent.id.type === 'Identifier') {
-							reportUnnecessaryStateWrap(node.parent, node, name);
+							reportUnnecessaryStateWrap(node.parent, node, name, parent.id);
 						}
 					}
 				}

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unnecessary-state-wrap/invalid/allow-reassign-config.json

@@ -0,0 +1,7 @@
+{
+	"options": [
+		{
+			"allowReassign": true
+		}
+	]
+}

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unnecessary-state-wrap/invalid/allow-reassign-errors.yaml

@@ -0,0 +1,30 @@
+- message: SvelteSet is already reactive, $state wrapping is unnecessary.
+  line: 6
+  column: 21
+  suggestions:
+    - desc: Remove unnecessary $state wrapping
+      messageId: suggestRemoveStateWrap
+      output: |
+        <script>
+        	import { SvelteSet, SvelteMap } from 'svelte/reactivity';
+
+        	// These should be reported as unnecessary $state wrapping
+        	// even with allowReassign: true because they are not reassigned
+        	const set = new SvelteSet();
+        	let map = $state(new SvelteMap());
+        </script>
+- message: SvelteMap is already reactive, $state wrapping is unnecessary.
+  line: 7
+  column: 19
+  suggestions:
+    - desc: Remove unnecessary $state wrapping
+      messageId: suggestRemoveStateWrap
+      output: |
+        <script>
+        	import { SvelteSet, SvelteMap } from 'svelte/reactivity';
+
+        	// These should be reported as unnecessary $state wrapping
+        	// even with allowReassign: true because they are not reassigned
+        	const set = $state(new SvelteSet());
+        	let map = new SvelteMap();
+        </script>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unnecessary-state-wrap/invalid/allow-reassign-input.svelte

@@ -0,0 +1,8 @@
+<script>
+	import { SvelteSet, SvelteMap } from 'svelte/reactivity';
+
+	// These should be reported as unnecessary $state wrapping
+	// even with allowReassign: true because they are not reassigned
+	const set = $state(new SvelteSet());
+	let map = $state(new SvelteMap());
+</script>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unnecessary-state-wrap/valid/allow-reassign-config.json

@@ -0,0 +1,7 @@
+{
+	"options": [
+		{
+			"allowReassign": true
+		}
+	]
+}

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unnecessary-state-wrap/valid/allow-reassign-input.svelte

@@ -0,0 +1,10 @@
+<script>
+	import { SvelteSet, SvelteMap } from 'svelte/reactivity';
+
+	// These should be allowed when allowReassign is true and variables are reassigned
+	let set = $state(new SvelteSet());
+	set = new SvelteSet([1, 2, 3]);
+
+	let map = $state(new SvelteMap());
+	map = new SvelteMap([['key', 'value']]);
+</script>