Skip to content

Commit ed68b20

Browse files
ota-meshiota-meshi
authored
feat: add svelte/no-reactive-reassign rule (#440)
1 parent f810b69 commit ed68b20

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+949
-0
lines changed

‎.changeset/tidy-pugs-draw.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"eslint-plugin-svelte": minor
3+
---
4+
5+
feat: add `svelte/no-reactive-reassign` rule

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -313,6 +313,7 @@ These rules relate to possible syntax or logic errors in Svelte code:
313313
| [svelte/no-export-load-in-svelte-module-in-kit-pages](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-export-load-in-svelte-module-in-kit-pages/) | disallow exporting load functions in `*.svelte` module in Svelte Kit page components. | |
314314
| [svelte/no-not-function-handler](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-not-function-handler/) | disallow use of not function in event handler | :star: |
315315
| [svelte/no-object-in-text-mustaches](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-object-in-text-mustaches/) | disallow objects in text mustache interpolation | :star: |
316+
| [svelte/no-reactive-reassign](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-reactive-reassign/) | disallow reassigning reactive values | |
316317
| [svelte/no-shorthand-style-property-overrides](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-shorthand-style-property-overrides/) | disallow shorthand style properties that override related longhand properties | :star: |
317318
| [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 | |
318319
| [svelte/no-unknown-style-directive-property](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-unknown-style-directive-property/) | disallow unknown `style:property` | :star: |

‎docs/rules.md

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ These rules relate to possible syntax or logic errors in Svelte code:
2626
| [svelte/no-export-load-in-svelte-module-in-kit-pages](./rules/no-export-load-in-svelte-module-in-kit-pages.md) | disallow exporting load functions in `*.svelte` module in Svelte Kit page components. | |
2727
| [svelte/no-not-function-handler](./rules/no-not-function-handler.md) | disallow use of not function in event handler | :star: |
2828
| [svelte/no-object-in-text-mustaches](./rules/no-object-in-text-mustaches.md) | disallow objects in text mustache interpolation | :star: |
29+
| [svelte/no-reactive-reassign](./rules/no-reactive-reassign.md) | disallow reassigning reactive values | |
2930
| [svelte/no-shorthand-style-property-overrides](./rules/no-shorthand-style-property-overrides.md) | disallow shorthand style properties that override related longhand properties | :star: |
3031
| [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 | |
3132
| [svelte/no-unknown-style-directive-property](./rules/no-unknown-style-directive-property.md) | disallow unknown `style:property` | :star: |

‎docs/rules/no-reactive-reassign.md

+122
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
---
2+
pageClass: "rule-details"
3+
sidebarDepth: 0
4+
title: "svelte/no-reactive-reassign"
5+
description: "disallow reassigning reactive values"
6+
---
7+
8+
# svelte/no-reactive-reassign
9+
10+
> disallow reassigning reactive values
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+
14+
## :book: Rule Details
15+
16+
This rule aims to prevent unintended behavior caused by modification or reassignment of reactive values.
17+
18+
<ESLintCodeBlock>
19+
20+
<!--eslint-skip-->
21+
22+
```svelte
23+
<script>
24+
/* eslint svelte/no-reactive-reassign: "error" */
25+
let value = 0
26+
$: reactiveValue = value * 2
27+
28+
function handleClick() {
29+
/* ✓ GOOD */
30+
value++
31+
/* ✗ BAD */
32+
reactiveValue = value * 3
33+
reactiveValue++
34+
}
35+
</script>
36+
37+
<!-- ✓ GOOD -->
38+
<input type="number" bind:value />
39+
<!-- ✗ BAD -->
40+
<input type="number" bind:value={reactiveValue} />
41+
```
42+
43+
</ESLintCodeBlock>
44+
45+
## :wrench: Options
46+
47+
```json
48+
{
49+
"svelte/no-reactive-reassign": ["error", {
50+
"props": true
51+
}]
52+
}
53+
```
54+
55+
- `props` ... If set to `true`, this rule warns against the modification of reactive value properties. Default is `true`.
56+
57+
### `{ "props": true }`
58+
59+
<ESLintCodeBlock>
60+
61+
<!--eslint-skip-->
62+
63+
```svelte
64+
<script>
65+
/* eslint svelte/no-reactive-reassign: ["error", { "props": true }] */
66+
let value = 0
67+
$: reactiveValue = { value: value * 2}
68+
69+
function handleClick() {
70+
/* ✓ GOOD */
71+
value++
72+
/* ✗ BAD */
73+
reactiveValue.value++
74+
reactiveValue = { value: reactiveValue.value + 1 }
75+
}
76+
</script>
77+
78+
<!-- ✓ GOOD -->
79+
<input type="number" bind:value />
80+
<!-- ✗ BAD -->
81+
<input type="number" bind:value={reactiveValue.value} />
82+
<MyComponent bind:objectValue={reactiveValue} />
83+
```
84+
85+
</ESLintCodeBlock>
86+
87+
### `{ "props": false }`
88+
89+
<ESLintCodeBlock>
90+
91+
<!--eslint-skip-->
92+
93+
```svelte
94+
<script>
95+
/* eslint svelte/no-reactive-reassign: ["error", { "props": false }] */
96+
let value = 0
97+
$: reactiveValue = { value: value * 2}
98+
99+
function handleClick() {
100+
/* ✓ GOOD */
101+
value++
102+
/* OK */
103+
reactiveValue.value++
104+
/* ✗ BAD */
105+
reactiveValue = { value: reactiveValue.value + 1 }
106+
}
107+
</script>
108+
109+
<!-- ✓ GOOD -->
110+
<input type="number" bind:value />
111+
<!-- OK -->
112+
<input type="number" bind:value={reactiveValue.value} />
113+
<!-- ✗ BAD -->
114+
<MyComponent bind:objectValue={reactiveValue} />
115+
```
116+
117+
</ESLintCodeBlock>
118+
119+
## :mag: Implementation
120+
121+
- [Rule source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/src/rules/no-reactive-reassign.ts)
122+
- [Test source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/tests/src/rules/no-reactive-reassign.ts)

0 commit comments

Comments
 (0)