noSvelteExportLet (JavaScript)

Language JavaScript (and super languages)

Summary

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

How to configure

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

Description

Disallow declaring Svelte component props with export let.

Svelte 5 declares component props with the $props() rune. Exporting a let or var binding from the instance <script> is the legacy way of declaring props: it opts the component into legacy mode, and it is a compile error in runes mode.

Exports from a <script module> block are regular module exports, not props, so they are ignored.

Examples

Invalid

1
<script>
2
export let name;
3
</script>

code-block.svelte:2:1 lint/nursery/noSvelteExportLet ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Declaring component props with export let is legacy Svelte syntax.
  
    1 │ <script>
  > 2 │ export let name;
      │ ^^^^^^^^^^
    3 │ </script>
    4 │ 
  
  ℹ Svelte 5 declares props with the $props() rune. Declaring props with export makes the component run in legacy mode, and is a compile error in runes mode.
  
  ℹ Destructure the props from $props() instead, for example: let { name } = $props();. See the Svelte 5 migration guide.
  
  ℹ 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
let className;
3
export { className as class };
4
</script>

code-block.svelte:3:10 lint/nursery/noSvelteExportLet ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Exporting className declares a component prop with legacy Svelte syntax.
  
    1 │ <script>
    2 │ let className;
  > 3 │ export { className as class };
      │          ^^^^^^^^^^^^^^^^^^
    4 │ </script>
    5 │ 
  
  ℹ Svelte 5 declares props with the $props() rune. Declaring props with export makes the component run in legacy mode, and is a compile error in runes mode.
  
  ℹ Destructure the props from $props() instead, for example: let { name } = $props();. See the Svelte 5 migration guide.
  
  ℹ 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
let { name, class: className } = $props();
3
</script>

1
<script module>
2
export let count = 0;
3
</script>