svelte/no-composable-reactivity-lose

[tbashiyy]

Motivation

When using a composable from a file like useXXX.svelte.ts (e.g., useXXX), accessing a getter through destructuring assignment causes its reactivity to be lost. This behavior is likely unintentional and can lead to unexpected bugs. To preserve reactivity, destructuring should be avoided when working with composables from .svelte.ts or .svelte.js files.

Description

This rule prevents destructuring assignment when using composables (functions typically named useXXX and defined in useXXX.svelte.ts/js).

In Svelte, composables often return reactive getters. However, when these getters are accessed through destructuring assignment, their reactivity is lost. This can lead to subtle bugs where values no longer update as expected.

To avoid this unintentional behavior, this rule enforces accessing properties directly from the composable return object instead of using destructuring.

Examples

<script>
import { useComposable } from './composable.svelte.ts';

// ✓ GOOD
const composable = useComposable();

// ✗ BAD
const {count, add} = useComposable();
</script>

https://svelte.dev/playground/dd6847e8aba64d06931fa9e10f71d27d?version=latest

Additional comments

I don't know how to call oficial about like composable in svelte world....