feat: added the prefer-svelte-reactivity rule (#1151)

Author: marekdedic

.changeset/rich-colts-nail.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-svelte': minor
+---
+
+feat: added the `prefer-svelte-reactivity` rule

README.md

@@ -273,6 +273,7 @@ These rules relate to possible syntax or logic errors in Svelte code:
 | [svelte/no-store-async](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-store-async/) | disallow using async/await inside svelte stores because it causes issues with the auto-unsubscribing features | :star: |
 | [svelte/no-top-level-browser-globals](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-top-level-browser-globals/) | disallow using top-level browser global variables |  |
 | [svelte/no-unknown-style-directive-property](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-unknown-style-directive-property/) | disallow unknown `style:property` | :star: |
+| [svelte/prefer-svelte-reactivity](https://sveltejs.github.io/eslint-plugin-svelte/rules/prefer-svelte-reactivity/) | disallow using mutable instances of built-in classes where a reactive alternative is provided by svelte/reactivity | :star: |
 | [svelte/require-store-callbacks-use-set-param](https://sveltejs.github.io/eslint-plugin-svelte/rules/require-store-callbacks-use-set-param/) | store callbacks must use `set` param | :bulb: |
 | [svelte/require-store-reactive-access](https://sveltejs.github.io/eslint-plugin-svelte/rules/require-store-reactive-access/) | disallow to use of the store itself as an operand. Need to use $ prefix or get function. | :star::wrench: |
 | [svelte/valid-compile](https://sveltejs.github.io/eslint-plugin-svelte/rules/valid-compile/) | disallow warnings when compiling. |  |

docs/rules.md

@@ -30,6 +30,7 @@ These rules relate to possible syntax or logic errors in Svelte code:
 | [svelte/no-store-async](./rules/no-store-async.md)                                               | disallow using async/await inside svelte stores because it causes issues with the auto-unsubscribing features                          | :star:         |
 | [svelte/no-top-level-browser-globals](./rules/no-top-level-browser-globals.md)                   | disallow using top-level browser global variables                                                                                      |                |
 | [svelte/no-unknown-style-directive-property](./rules/no-unknown-style-directive-property.md)     | disallow unknown `style:property`                                                                                                      | :star:         |
+| [svelte/prefer-svelte-reactivity](./rules/prefer-svelte-reactivity.md)                           | disallow using mutable instances of built-in classes where a reactive alternative is provided by svelte/reactivity                     | :star:         |
 | [svelte/require-store-callbacks-use-set-param](./rules/require-store-callbacks-use-set-param.md) | store callbacks must use `set` param                                                                                                   | :bulb:         |
 | [svelte/require-store-reactive-access](./rules/require-store-reactive-access.md)                 | disallow to use of the store itself as an operand. Need to use $ prefix or get function.                                               | :star::wrench: |
 | [svelte/valid-compile](./rules/valid-compile.md)                                                 | disallow warnings when compiling.                                                                                                      |                |

docs/rules/prefer-svelte-reactivity.md

@@ -0,0 +1,117 @@
+---
+pageClass: 'rule-details'
+sidebarDepth: 0
+title: 'svelte/prefer-svelte-reactivity'
+description: 'disallow using mutable instances of built-in classes where a reactive alternative is provided by svelte/reactivity'
+---
+
+# svelte/prefer-svelte-reactivity
+
+> disallow using mutable instances of built-in classes where a reactive alternative is provided by svelte/reactivity
+
+- :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"`.
+
+## :book: Rule Details
+
+The built-in `Date`, `Map`, `Set`, `URL` and `URLSearchParams` classes are often used in frontend code, however, their properties and methods are not reactive. Because of that, Svelte provides reactive versions of these 5 builtins as part of the "svelte/reactivity" package. This rule reports usage of mutable instances of the built-in versions in Svelte code.
+
+<!--eslint-skip-->
+
+```svelte
+<script>
+  /* eslint svelte/prefer-svelte-reactivity: "error" */
+
+  import {
+    SvelteDate,
+    SvelteMap,
+    SvelteSet,
+    SvelteURL,
+    SvelteURLSearchParams
+  } from 'svelte/reactivity';
+
+  /* ✓ GOOD */
+
+  const a = new Date(8.64e15);
+  const b = new Map([
+    [1, 'one'],
+    [2, 'two']
+  ]);
+  const c = new Set([1, 2, 1, 3, 3]);
+  const d = new URL('https://svelte.dev/');
+  const e = new URLSearchParams('foo=1&bar=2');
+
+  // These don't modify the instances
+  a.getTime();
+  b.keys();
+  c.has(1);
+  d.port;
+  e.entries();
+
+  const f = new SvelteDate(8.64e15);
+  const g = new SvelteMap([
+    [1, 'one'],
+    [2, 'two']
+  ]);
+  const h = new SvelteSet([1, 2, 1, 3, 3]);
+  const i = new SvelteURL('https://svelte.dev/');
+  const j = new SvelteURLSearchParams('foo=1&bar=2');
+
+  // These modify the instances
+  f.getTime();
+  g.keys();
+  h.has(1);
+  i.port;
+  j.entries();
+
+  /* ✗ BAD */
+
+  const k = new Date(8.64e15);
+  const l = new Map([
+    [1, 'one'],
+    [2, 'two']
+  ]);
+  const m = new Set([1, 2, 1, 3, 3]);
+  const n = new URL('https://svelte.dev/');
+  const o = new URLSearchParams('foo=1&bar=2');
+
+  // These modify the instances
+  k.setMonth(3);
+  l.clear();
+  m.delete(2);
+  n.port = 80;
+  o.sort();
+</script>
+```
+
+```js
+// In svelte.js files, exported variables are also reported
+/* eslint svelte/prefer-svelte-reactivity: "error" */
+
+/* ✗ BAD */
+
+const a = new Date(8.64e15);
+const b = new Map([
+  [1, 'one'],
+  [2, 'two']
+]);
+const c = new Set([1, 2, 1, 3, 3]);
+const d = new URL('https://svelte.dev/');
+const e = new URLSearchParams('foo=1&bar=2');
+
+export { a, b, c, d as dd };
+export default e;
+```
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [svelte/reactivity documentation](https://svelte.dev/docs/svelte/svelte-reactivity)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/packages/eslint-plugin-svelte/src/rules/prefer-svelte-reactivity.ts)
+- [Test source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/packages/eslint-plugin-svelte/tests/src/rules/prefer-svelte-reactivity.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-svelte-reactivity': 'error',
 			'svelte/prefer-writable-derived': 'error',
 			'svelte/require-each-key': 'error',
 			'svelte/require-event-dispatcher-types': 'error',

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

@@ -316,6 +316,11 @@ export interface RuleOptions {
    * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/prefer-style-directive/
    */
   'svelte/prefer-style-directive'?: Linter.RuleEntry<[]>
+  /**
+   * 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<[]>
   /**
    * Prefer using writable $derived instead of $state and $effect
    * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/prefer-writable-derived/