useSvelteReactiveClasses (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.0
Diagnostic Category: lint/nursery/useSvelteReactiveClasses
This rule doesn’t have a fix.
The default severity of this rule is warning.
This rule belongs to the following domains:
- svelte
Sources:
- Inspired from svelte/prefer-svelte-reactivity

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useSvelteReactiveClasses": "error"
6
      }
7
    }
8
  }
9
}

Description

Require the reactive classes from svelte/reactivity instead of built-in objects that are modified.

Svelte updates the page when a $state variable is reassigned, or when a plain object or array stored in it changes. It doesn’t detect changes made inside objects created from built-in classes. For example, calling map.set() on a Map, calling date.setMonth() on a Date, or assigning url.port on a URL changes the object, but the parts of the page that use it don’t update. Wrapping the object in $state() doesn’t help, because $state only tracks plain objects and arrays.

The svelte/reactivity module provides versions of these classes that Svelte tracks:

Built-in class	Svelte class
`Date`	`SvelteDate`
`Map`	`SvelteMap`
`Set`	`SvelteSet`
`URL`	`SvelteURL`
`URLSearchParams`	`SvelteURLSearchParams`

This rule reports objects created from the built-in classes that are modified after they’re created, including through other variables that hold the same object. Objects that are only read are allowed. Objects stored only in variables declared inside a function are allowed too: each call to the function creates a new object, so the object can’t hold data that the page keeps showing.

In Svelte modules (.svelte.js and .svelte.ts files), the rule also reports objects that are exported, such as export const cache = new Map(), because other files that import them can modify them.

Changes made in the component markup, such as in an onclick attribute, aren’t detected.

Examples

Invalid

1
<script>
2
const tags = new Set();
3
function addTag(tag) {
4
    tags.add(tag);
5
}
6
</script>

code-block.svelte:2:14 lint/nursery/useSvelteReactiveClasses ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This Set is modified, but Svelte doesn't detect changes to it.
  
    1 │ <script>
  > 2 │ const tags = new Set();
      │              ^^^^^^^^^
    3 │ function addTag(tag) {
    4 │     tags.add(tag);
  
  ℹ It's modified here.
  
    2 │ const tags = new Set();
    3 │ function addTag(tag) {
  > 4 │     tags.add(tag);
      │     ^^^^^^^^^^^^^
    5 │ }
    6 │ </script>
  
  ℹ Svelte doesn't detect changes made inside a built-in Set, so the parts of the page that use it don't update.
  
  ℹ Use SvelteSet from svelte/reactivity instead.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<script>
2
const date = $state(new Date());
3
date.setFullYear(2000);
4
</script>

code-block.svelte:2:21 lint/nursery/useSvelteReactiveClasses ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This Date is modified, but Svelte doesn't detect changes to it.
  
    1 │ <script>
  > 2 │ const date = $state(new Date());
      │                     ^^^^^^^^^^
    3 │ date.setFullYear(2000);
    4 │ </script>
  
  ℹ It's modified here.
  
    1 │ <script>
    2 │ const date = $state(new Date());
  > 3 │ date.setFullYear(2000);
      │ ^^^^^^^^^^^^^^^^^^^^^^
    4 │ </script>
    5 │ 
  
  ℹ Svelte doesn't detect changes made inside a built-in Date, so the parts of the page that use it don't update.
  
  ℹ Use SvelteDate from svelte/reactivity instead.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<script>
2
const url = new URL("https://svelte.dev/");
3
url.pathname = "/docs";
4
</script>

code-block.svelte:2:13 lint/nursery/useSvelteReactiveClasses ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This URL is modified, but Svelte doesn't detect changes to it.
  
    1 │ <script>
  > 2 │ const url = new URL("https://svelte.dev/");
      │             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 │ url.pathname = "/docs";
    4 │ </script>
  
  ℹ It's modified here.
  
    1 │ <script>
    2 │ const url = new URL("https://svelte.dev/");
  > 3 │ url.pathname = "/docs";
      │ ^^^^^^^^^^^^
    4 │ </script>
    5 │ 
  
  ℹ Svelte doesn't detect changes made inside a built-in URL, so the parts of the page that use it don't update.
  
  ℹ Use SvelteURL from svelte/reactivity instead.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<script>
2
import { SvelteSet } from "svelte/reactivity";
3
const tags = new SvelteSet();
4
function addTag(tag) {
5
    tags.add(tag);
6
}
7

8
const map = new Map([[1, "one"]]);
9
console.log(map.get(1));
10

11
function unique(items) {
12
    const seen = new Set();
13
    for (const item of items) {
14
        seen.add(item);
15
    }
16
    return [...seen];
17
}
18
</script>

References

svelte/reactivity