|
| 1 | +--- |
| 2 | +pageClass: 'rule-details' |
| 3 | +sidebarDepth: 0 |
| 4 | +title: 'svelte/prefer-svelte-reactivity' |
| 5 | +description: 'disallow using built-in classes where a reactive alternative is provided by svelte/reactivity' |
| 6 | +--- |
| 7 | + |
| 8 | +# svelte/prefer-svelte-reactivity |
| 9 | + |
| 10 | +> disallow using built-in classes where a reactive alternative is provided by svelte/reactivity |
| 11 | +
|
| 12 | +- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge> |
| 13 | +- :gear: This rule is included in `"plugin:svelte/recommended"`. |
| 14 | + |
| 15 | +## :book: Rule Details |
| 16 | + |
| 17 | +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 the built-in versions in Svelte code. |
| 18 | + |
| 19 | +<!--eslint-skip--> |
| 20 | + |
| 21 | +```svelte |
| 22 | +<script> |
| 23 | + /* eslint svelte/prefer-svelte-reactivity: "error" */ |
| 24 | +
|
| 25 | + import { SvelteDate, SvelteMap, SvelteSet, SvelteURL, SvelteURLSearchParams } from "svelte/reactivity"; |
| 26 | +
|
| 27 | + /* ✓ GOOD */ |
| 28 | +
|
| 29 | + const a = new SvelteDate(8.64e15); |
| 30 | + const b = new SvelteMap([[1, "one"], [2, "two"]]); |
| 31 | + const c = new SvelteSet([1, 2, 1, 3, 3]); |
| 32 | + const d = new SvelteURL("https://svelte.dev/"); |
| 33 | + const e = new SvelteURLSearchParams("foo=1&bar=2"); |
| 34 | +
|
| 35 | + /* ✗ BAD */ |
| 36 | +
|
| 37 | + const f = new Date(8.64e15); |
| 38 | + const g = new Map([[1, "one"], [2, "two"]]); |
| 39 | + const h = new Set([1, 2, 1, 3, 3]); |
| 40 | + const i = new URL("https://svelte.dev/"); |
| 41 | + const j = new URLSearchParams("foo=1&bar=2"); |
| 42 | +</script> |
| 43 | +``` |
| 44 | + |
| 45 | +## :wrench: Options |
| 46 | + |
| 47 | +Nothing. |
| 48 | + |
| 49 | +## :books: Further Reading |
| 50 | + |
| 51 | +- [svelte/reactivity documentation](https://svelte.dev/docs/svelte/svelte-reactivity) |
| 52 | + |
| 53 | +## :mag: Implementation |
| 54 | + |
| 55 | +- [Rule source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/packages/eslint-plugin-svelte/src/rules/prefer-svelte-reactivity.ts) |
| 56 | +- [Test source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/packages/eslint-plugin-svelte/tests/src/rules/prefer-svelte-reactivity.ts) |
0 commit comments