Skip to content

Commit 5cede00

Browse files
committed
docs(prefer-svelte-reactivity): added rule docs
1 parent 7bc67b7 commit 5cede00

File tree

1 file changed

+56
-0
lines changed

1 file changed

+56
-0
lines changed
+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
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

Comments
 (0)