Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/rich-colts-nail.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'eslint-plugin-svelte': minor
---

feat: added the `prefer-svelte-reactivity` rule
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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. | |
Expand Down
1 change: 1 addition & 0 deletions docs/rules.md
Original file line number Diff line number Diff line change
Expand Up @@ -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. | |
Expand Down
117 changes: 117 additions & 0 deletions docs/rules/prefer-svelte-reactivity.md
Original file line number Diff line number Diff line change
@@ -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)
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
5 changes: 5 additions & 0 deletions packages/eslint-plugin-svelte/src/rule-types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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/
Expand Down
Loading
Loading