no-immutable-reactive-statements.md

pageClass	sidebarDepth	title	description	since
rule-details	0	svelte/no-immutable-reactive-statements	disallow reactive statements that don't reference reactive values.	v2.27.0

svelte/no-immutable-reactive-statements

disallow reactive statements that don't reference reactive values.

📖 Rule Details

This rule reports if all variables referenced in reactive statements are immutable. That reactive statement is immutable and not reactive.

<script>
  /* eslint svelte/no-immutable-reactive-statements: "error" */
  import myStore from "./my-stores"
  import myVar from "./my-variables"
  let mutableVar = "hello"
  export let prop
  /* ✓ GOOD */
  $: computed1 = mutableVar + " " + mutableVar
  $: computed2 = fn1(mutableVar)
  $: console.log(mutableVar)
  $: console.log(computed1)
  $: console.log($myStore)
  $: console.log(prop)

  const immutableVar = "hello"
  /* ✗ BAD */
  $: computed3 = fn1(immutableVar)
  $: computed4 = fn2()
  $: console.log(immutableVar)
  $: console.log(myVar)

  /* ignore */
  $: console.log(unknown)

  function fn1(v) {
    return v + " " + v
  }
  function fn2() {
    return mutableVar + " " + mutableVar
  }
</script>

<input bind:value={mutableVar} />

🔧 Options

Nothing.

🚀 Version

This rule was introduced in eslint-plugin-svelte v2.27.0

🔍 Implementation

• Rule source
• Test source