Inconsistent reactivity behavior with `toStore` and reactive variables.
The issue describes inconsistent reactivity behavior when using `toStore` with reactive variables in Svelte 5. The expected behavior is consistent reactivity, but currently, it only works when the state is explicitly passed as a prop. This issue is blocking progressive migration to Svelte 5, particularly in complex component hierarchies.
Stores created with toStore show inconsistent behaviour when passed as a prop togther with and without the state it was initialized with.
<!-- Parent -->
<!-- If use the input we will observe no reactivity in the child component. -->
<script>
import { toStore } from "svelte/store"
import Child from './Component.svelte'
let state = $state({ nested: "Nested Text" })
</script>
<p>Change me: <input bind:value={state.nested} /></p>
<Child store={toStore(() => state)} {state}></Child>
<!-- Child -->
<!-- However if we uncomment the commented out code in the child component we will now
observe that the {text} variable and the chained reference in the template are reactive
-->
<svelte:options runes={false} />
<script>
export let store;
//export let state;
$: derived = $store.nested || "nested"
//$: text = state.nested || "state"
</script>
<p>I am a template chained reference: {$store.nested}</p>
<p>I am a derived variable: {derived}</p>
<!-- <p>I am propped state derived: {text}</p> -->
Expected behaviour is reactivity in both cases where toStore is used. If not possible, consistency is at least expected.
REPL Here: https://svelte.dev/playground/5c4215385e8c49d98e0b45ce2a63f7a8?version=latest
N/A
N/A
blocking all usage of svelte
Claim this issue to let others know you're working on it. You'll earn 10 points when you complete it!