Skip to content

Latest commit

 

History

History
101 lines (71 loc) · 2.58 KB

require-store-reactive-access.md

File metadata and controls

101 lines (71 loc) · 2.58 KB
pageClass sidebarDepth title description since
rule-details
0
svelte/require-store-reactive-access
disallow to use of the store itself as an operand. Need to use $ prefix or get function.
v2.12.0

svelte/require-store-reactive-access

disallow to use of the store itself as an operand. Need to use $ prefix or get function.

  • 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

📖 Rule Details

This rule disallow to use of the store itself as an operand.
You should access the store value using the $ prefix or the get function.

<script>
  /* eslint svelte/require-store-reactive-access: "error" */
  import { writable, get } from "svelte/store"
  const storeValue = writable("world")
  const color = writable("red")

  /* ✓ GOOD */
  $: message = `Hello ${$storeValue}`

  /* ✗ BAD */
  $: message = `Hello ${storeValue}`
</script>

<!-- ✓ GOOD -->
<p>{$storeValue}</p>
<p>{get(storeValue)}</p>

<p class={$storeValue} />
<p style:color={$color} />

<MyComponent prop="Hello {$storeValue}" />
<MyComponent bind:this={$storeValue} />
<MyComponent --style-props={$storeValue} />
<MyComponent {...$storeValue} />

<!-- ✗ BAD -->
<p>{storeValue}</p>

<p class={storeValue} />
<p style:color />

<MyComponent prop="Hello {storeValue}" />
<MyComponent bind:this={storeValue} />
<MyComponent --style-props={storeValue} />
<MyComponent {...storeValue} />

This rule checks the usage of store variables only if the store can be determined within a single file.
However, when using @typescript-eslint/parser and full type information, this rule uses the type information to determine if the expression is a store.

// fileName: my-stores.ts
import { writable } from "svelte/store"
export const storeValue = writable("hello")
<script lang="ts">
  /* eslint svelte/require-store-reactive-access: "error" */
  import { storeValue } from "./my-stores"
</script>

<!-- ✓ GOOD -->
<p>{$storeValue}</p>

<!-- ✗ BAD -->
<p>{storeValue}</p>

🔧 Options

Nothing.

🚀 Version

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

🔍 Implementation