Skip to content

Commit 23c8253

Browse files
committed
docs(prefer-svelte-reactivity): added rule docs
1 parent fdf8c10 commit 23c8253

File tree

1 file changed

+117
-0
lines changed

1 file changed

+117
-0
lines changed
Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
---
2+
pageClass: 'rule-details'
3+
sidebarDepth: 0
4+
title: 'svelte/prefer-svelte-reactivity'
5+
description: 'disallow using mutable instances of built-in classes where a reactive alternative is provided by svelte/reactivity'
6+
---
7+
8+
# svelte/prefer-svelte-reactivity
9+
10+
> disallow using mutable instances of 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 mutable instances 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 {
26+
SvelteDate,
27+
SvelteMap,
28+
SvelteSet,
29+
SvelteURL,
30+
SvelteURLSearchParams
31+
} from 'svelte/reactivity';
32+
33+
/* ✓ GOOD */
34+
35+
const a = new Date(8.64e15);
36+
const b = new Map([
37+
[1, 'one'],
38+
[2, 'two']
39+
]);
40+
const c = new Set([1, 2, 1, 3, 3]);
41+
const d = new URL('https://svelte.dev/');
42+
const e = new URLSearchParams('foo=1&bar=2');
43+
44+
// These don't modify the instances
45+
a.getTime();
46+
b.keys();
47+
c.has(1);
48+
d.port;
49+
e.entries();
50+
51+
const f = new SvelteDate(8.64e15);
52+
const g = new SvelteMap([
53+
[1, 'one'],
54+
[2, 'two']
55+
]);
56+
const h = new SvelteSet([1, 2, 1, 3, 3]);
57+
const i = new SvelteURL('https://svelte.dev/');
58+
const j = new SvelteURLSearchParams('foo=1&bar=2');
59+
60+
// These modify the instances
61+
f.getTime();
62+
g.keys();
63+
h.has(1);
64+
i.port;
65+
j.entries();
66+
67+
/* ✗ BAD */
68+
69+
const k = new Date(8.64e15);
70+
const l = new Map([
71+
[1, 'one'],
72+
[2, 'two']
73+
]);
74+
const m = new Set([1, 2, 1, 3, 3]);
75+
const n = new URL('https://svelte.dev/');
76+
const o = new URLSearchParams('foo=1&bar=2');
77+
78+
// These modify the instances
79+
k.setMonth(3);
80+
l.clear();
81+
m.delete(2);
82+
n.port = 80;
83+
o.sort();
84+
</script>
85+
```
86+
87+
```js
88+
// In svelte.js files, exported variables are also reported
89+
/* eslint svelte/prefer-svelte-reactivity: "error" */
90+
91+
/* ✗ BAD */
92+
93+
const a = new Date(8.64e15);
94+
const b = new Map([
95+
[1, 'one'],
96+
[2, 'two']
97+
]);
98+
const c = new Set([1, 2, 1, 3, 3]);
99+
const d = new URL('https://svelte.dev/');
100+
const e = new URLSearchParams('foo=1&bar=2');
101+
102+
export { a, b, c, d as dd };
103+
export default e;
104+
```
105+
106+
## :wrench: Options
107+
108+
Nothing.
109+
110+
## :books: Further Reading
111+
112+
- [svelte/reactivity documentation](https://svelte.dev/docs/svelte/svelte-reactivity)
113+
114+
## :mag: Implementation
115+
116+
- [Rule source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/packages/eslint-plugin-svelte/src/rules/prefer-svelte-reactivity.ts)
117+
- [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)