useSvelteStoreInitialValue (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/useSvelteStoreInitialValue
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- svelte
Sources:
- Same as svelte/require-stores-init

How to configure

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

Description

Require Svelte stores to be created with an initial value.

A store created without an initial value holds undefined until it is set for the first time. Code that reads the store, such as a component that displays its value, then has to handle undefined in addition to the values the store is meant to hold. Passing an initial value makes the first value of the store explicit.

This rule checks calls to the following functions imported from svelte/store:

writable() and readable(), which take the initial value as their first argument.
derived(), which takes the initial value as its third argument. The store holds this value until its callback sets one. This matters most for a callback that sets the value later, for example after a timer or a network request.

Calls that spread an array into their arguments, such as derived(...args), are not reported, because the rule can’t tell how many arguments they pass.

Examples

Invalid

1
import { writable } from "svelte/store";
2

3
export const count = writable();

code-block.js:3:22 lint/nursery/useSvelteStoreInitialValue ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This writable() store is created without an initial value.
  
    1 │ import { writable } from "svelte/store";
    2 │ 
  > 3 │ export const count = writable();
      │                      ^^^^^^^^
    4 │ 
  
  ℹ Without an initial value, the store holds undefined until it is set for the first time, which code that reads the store may not expect.
  
  ℹ Pass the initial value as the first argument.
  
  ℹ 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
import { readable } from "svelte/store";
2

3
export const time = readable();

code-block.js:3:21 lint/nursery/useSvelteStoreInitialValue ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This readable() store is created without an initial value.
  
    1 │ import { readable } from "svelte/store";
    2 │ 
  > 3 │ export const time = readable();
      │                     ^^^^^^^^
    4 │ 
  
  ℹ Without an initial value, the store holds undefined until it is set for the first time, which code that reads the store may not expect.
  
  ℹ Pass the initial value as the first argument.
  
  ℹ 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
import { derived } from "svelte/store";
2
import { count } from "./count.js";
3

4
export const delayed = derived(count, ($count, set) => {
5
    setTimeout(() => set($count), 1000);
6
});

code-block.js:4:24 lint/nursery/useSvelteStoreInitialValue ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This derived() store is created without an initial value.
  
    2 │ import { count } from "./count.js";
    3 │ 
  > 4 │ export const delayed = derived(count, ($count, set) => {
      │                        ^^^^^^^
    5 │     setTimeout(() => set($count), 1000);
    6 │ });
  
  ℹ Without an initial value, the store holds undefined until its callback sets a value, which code that reads the store may not expect.
  
  ℹ Pass the initial value as the third argument.
  
  ℹ 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
import { derived, readable, writable } from "svelte/store";
2

3
export const count = writable(0);
4
export const time = readable(new Date());
5
export const delayed = derived(
6
    count,
7
    ($count, set) => {
8
        setTimeout(() => set($count), 1000);
9
    },
10
    0,
11
);