fix: add ignoreLocalVariables to prefer-svelte-reactivity rule to avoid false positives

.changeset/petite-shirts-smash.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-svelte': patch
+---
+
+fix: add `ignoreLocalVariables` to `prefer-svelte-reactivity` rule to avoid false positives

docs/rules/prefer-svelte-reactivity.md

@@ -105,7 +105,18 @@ export default e;
 
 ## :wrench: Options
 
-Nothing.
+```json
+{
+  "svelte/prefer-svelte-reactivity": [
+    "error",
+    {
+      "ignoreLocalVariables": true
+    }
+  ]
+}
+```
+
+- `ignoreLocalVariables` ... Set to `true` to ignore variables declared anywhere other than the top level, such as inside functions. The default is `true`. In almost all cases, we do not need to set this to `false`.
 
 ## :books: Further Reading
 

packages/eslint-plugin-svelte/src/meta.ts

@@ -1,5 +1,5 @@
 // IMPORTANT!
 // This file has been automatically generated,
 // in order to update its content execute "pnpm run update"
-export const name = 'eslint-plugin-svelte' as const;
-export const version = '3.11.0' as const;
+export const name = 'eslint-plugin-svelte';
+export const version = '3.11.0';

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

@@ -320,7 +320,7 @@ export interface RuleOptions {
    * disallow using mutable instances of built-in classes where a reactive alternative is provided by svelte/reactivity
    * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/prefer-svelte-reactivity/
    */
-  'svelte/prefer-svelte-reactivity'?: Linter.RuleEntry<[]>
+  'svelte/prefer-svelte-reactivity'?: Linter.RuleEntry<SveltePreferSvelteReactivity>
   /**
    * Prefer using writable $derived instead of $state and $effect
    * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/prefer-writable-derived/
@@ -580,6 +580,10 @@ type SveltePreferConst = []|[{
   excludedRunes?: string[]
   [k: string]: unknown | undefined
 }]
+// ----- svelte/prefer-svelte-reactivity -----
+type SveltePreferSvelteReactivity = []|[{
+  ignoreLocalVariables?: boolean
+}]
 // ----- svelte/require-event-prefix -----
 type SvelteRequireEventPrefix = []|[{
   checkAsyncFunctions?: boolean

packages/eslint-plugin-svelte/src/rules/prefer-svelte-reactivity.ts

@@ -2,7 +2,8 @@ import { ReferenceTracker } from '@eslint-community/eslint-utils';
 import { createRule } from '../utils/index.js';
 import type { TSESTree } from '@typescript-eslint/types';
 import { findVariable, isIn } from '../utils/ast-utils.js';
-import { getSvelteContext } from '../utils/svelte-context.js';
+import { getSvelteContext } from 'src/utils/svelte-context.js';
+import type { AST } from 'svelte-eslint-parser';
 
 export default createRule('prefer-svelte-reactivity', {
 	meta: {
@@ -12,7 +13,18 @@ export default createRule('prefer-svelte-reactivity', {
 			category: 'Possible Errors',
 			recommended: true
 		},
-		schema: [],
+		schema: [
+			{
+				type: 'object',
+				properties: {
+					ignoreLocalVariables: {
+						type: 'boolean',
+						default: true
+					}
+				},
+				additionalProperties: false
+			}
+		],
 		messages: {
 			mutableDateUsed:
 				'Found a mutable instance of the built-in Date class. Use SvelteDate instead.',
@@ -31,6 +43,7 @@ export default createRule('prefer-svelte-reactivity', {
 		]
 	},
 	create(context) {
+		const options = context.options[0] ?? { ignoreLocalVariables: true };
 		const exportedVars: TSESTree.Node[] = [];
 		return {
 			...(getSvelteContext(context)?.svelteFileType === '.svelte.[js|ts]' && {
@@ -78,6 +91,10 @@ export default createRule('prefer-svelte-reactivity', {
 						[ReferenceTracker.CONSTRUCT]: true
 					}
 				})) {
+					if (options.ignoreLocalVariables && !isTopLevelDeclaration(node)) {
+						continue;
+					}
+
 					const messageId =
 						path[0] === 'Date'
 							? 'mutableDateUsed'
@@ -135,6 +152,32 @@ export default createRule('prefer-svelte-reactivity', {
 	}
 });
 
+function isTopLevelDeclaration(node: TSESTree.Node | AST.SvelteNode): boolean {
+	let declaration: TSESTree.Node | AST.SvelteNode | null = node;
+	while (
+		declaration &&
+		declaration.type !== 'VariableDeclaration' &&
+		declaration.type !== 'FunctionDeclaration' &&
+		declaration.type !== 'ClassDeclaration' &&
+		declaration.type !== 'ExportDefaultDeclaration'
+	) {
+		declaration = declaration.parent as TSESTree.Node | AST.SvelteNode | null;
+	}
+
+	if (!declaration) {
+		return false;
+	}
+
+	const parentType: string | undefined = declaration.parent?.type;
+	return (
+		parentType === 'SvelteScriptElement' ||
+		parentType === 'Program' ||
+		parentType === 'ExportDefaultDeclaration' ||
+		parentType === 'ExportNamedDeclaration' ||
+		parentType === 'ExportAllDeclaration'
+	);
+}
+
 function isDateMutable(referenceTracker: ReferenceTracker, ctorNode: TSESTree.Expression): boolean {
 	return !referenceTracker
 		.iteratePropertyReferences(ctorNode, {

packages/eslint-plugin-svelte/tests/fixtures/rules/prefer-svelte-reactivity/invalid/local-variables-config.json

@@ -0,0 +1,7 @@
+{
+	"options": [
+		{
+			"ignoreLocalVariables": false
+		}
+	]
+}

packages/eslint-plugin-svelte/tests/fixtures/rules/prefer-svelte-reactivity/invalid/local-variables-errors.yaml

@@ -0,0 +1,4 @@
+- message: Found a mutable instance of the built-in Map class. Use SvelteMap instead.
+  line: 3
+  column: 15
+  suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/prefer-svelte-reactivity/invalid/local-variables-input.svelte

@@ -0,0 +1,8 @@
+<script>
+	const foo = () => {
+		const map = new Map();
+		map.set('foo', 'bar');
+	};
+</script>
+
+{foo()}

packages/eslint-plugin-svelte/tests/fixtures/rules/prefer-svelte-reactivity/valid/local-variables1-input.svelte

@@ -0,0 +1,13 @@
+<script>
+	const foo = () => {
+		const date = new Date();
+		const map = new Map();
+		const set = new Set();
+		const url = new URL('https://svelte.dev/');
+		const objectURL = URL.createObjectURL(new MediaSource());
+		const urlSearchParams = new URLSearchParams();
+		console.log({ date, map, set, url, objectURL, urlSearchParams });
+	};
+</script>
+
+{foo()}

packages/eslint-plugin-svelte/tests/fixtures/rules/prefer-svelte-reactivity/valid/local-variables2-input.svelte.js

@@ -0,0 +1,16 @@
+let toys = $state([]);
+
+export function getUniqueToys() {
+	let names = new Set();
+	let uniqueToys = [];
+	for (const toy in toys) {
+		if (!names.has(toy.name)) {
+			uniqueToys.push(toy);
+		}
+	}
+	return uniqueToys;
+}
+
+let uniqueToys = $derived.by(getUniqueToys);
+
+console.log(uniqueToys)