Skip to content

Latest commit

 

History

History
98 lines (70 loc) · 2.67 KB

require-store-reactive-access.md

File metadata and controls

98 lines (70 loc) · 2.67 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.

  • ⚙️ This rule is included in "plugin:svelte/recommended".
  • 🔧 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