noSvelteAddEventListener (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.0
Diagnostic Category: lint/nursery/noSvelteAddEventListener
This rule has an unsafe fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- svelte
Sources:
- Same as svelte/no-add-event-listener

How to configure

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

Description

Disallow addEventListener in Svelte files.

Svelte relies on event delegation for performance and to guarantee the order in which event handlers run. Listeners attached with addEventListener bypass this mechanism, so they may run before or after delegated handlers in an unexpected order. The on function from svelte/events attaches listeners that cooperate with event delegation, and it returns a function that removes the listener.

The rule provides a fix when on is already imported from svelte/events.

Examples

Invalid

1
<script>
2
window.addEventListener("resize", handler);
3
</script>

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

  ℹ Unexpected use of addEventListener.
  
    1 │ <script>
  > 2 │ window.addEventListener("resize", handler);
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 │ </script>
    4 │ 
  
  ℹ Listeners attached with addEventListener bypass Svelte's event delegation, so they may not run in the expected order relative to other event handlers.
  
  ℹ Use the on function from svelte/events 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
addEventListener("message", handler);
3
</script>

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

  ℹ Unexpected use of addEventListener.
  
    1 │ <script>
  > 2 │ addEventListener("message", handler);
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 │ </script>
    4 │ 
  
  ℹ Listeners attached with addEventListener bypass Svelte's event delegation, so they may not run in the expected order relative to other event handlers.
  
  ℹ Use the on function from svelte/events 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 { on } from "svelte/events";
3

4
on(window, "resize", handler);
5
</script>