useSvelteKitRuneImports (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.5.15
Diagnostic Category: lint/nursery/useSvelteKitRuneImports
This rule doesn’t have a fix.
The default severity of this rule is warning.
This rule belongs to the following domains:
- svelte

How to configure

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

Description

Require importing SvelteKit’s app state from $app/state instead of $app/stores.

SvelteKit 2.12 deprecated $app/stores in favor of $app/state. The $app/state module exposes page, navigating, and updated as reactive objects built on Svelte 5 runes, so they can be read directly instead of through a store subscription.

Switching modules also changes how the values are read. For example, $page.url becomes page.url, and $updated becomes updated.current. For this reason, the rule doesn’t provide a code fix.

Examples

Invalid

1
import { page } from "$app/stores";

code-block.js:1:22 lint/nursery/useSvelteKitRuneImports ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The $app/stores module is deprecated.
  
  > 1 │ import { page } from "$app/stores";
      │                      ^^^^^^^^^^^^^
    2 │ 
  
  ℹ SvelteKit deprecated $app/stores in favor of $app/state, which provides the same values as reactive objects built on runes.
  
  ℹ Import from $app/state instead, and read its values directly, for example page.url instead of $page.url.
  
  ℹ 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
import { page } from "$app/stores";
3
</script>
4

5
<h1>{$page.url.pathname}</h1>

code-block.svelte:2:22 lint/nursery/useSvelteKitRuneImports ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The $app/stores module is deprecated.
  
    1 │ <script>
  > 2 │ import { page } from "$app/stores";
      │                      ^^^^^^^^^^^^^
    3 │ </script>
    4 │ 
  
  ℹ SvelteKit deprecated $app/stores in favor of $app/state, which provides the same values as reactive objects built on runes.
  
  ℹ Import from $app/state instead, and read its values directly, for example page.url instead of $page.url.
  
  ℹ 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 { page } from "$app/state";

1
<script>
2
import { page } from "$app/state";
3
</script>
4

5
<h1>{page.url.pathname}</h1>