fix: ensure async initial store value is noticed (#12486)

* fix: ensure async initial store value is noticed

fixes #12341

* fix another case

.changeset/nasty-carrots-develop.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure async initial store value is noticed

packages/svelte/src/internal/client/reactivity/sources.js

@@ -97,11 +97,7 @@ export function set(source, value) {
 		// reactions as we only allocate and assign the reactions after the signal
 		// has fully executed. So in the case of ensuring it registers the reaction
 		// properly for itself, we need to ensure the current effect actually gets
-		// scheduled. i.e:
+		// scheduled. i.e: `$effect(() => x++)`
-		//
-		// $effect(() => x++)
-		//
-		// We additionally want to skip this logic when initialising store sources
 		if (
 			is_runes() &&
 			current_effect !== null &&

packages/svelte/src/internal/client/reactivity/store.js

@@ -31,18 +31,19 @@ export function store_get(store, store_name, stores) {
 			set(entry.source, undefined);
 			entry.unsubscribe = noop;
 		} else {
-			var initial = true;
+			var is_synchronous_callback = true;
 
 			entry.unsubscribe = subscribe_to_store(store, (v) => {
-				if (initial) {
+				if (is_synchronous_callback) {
-					// if the first time the store value is read is inside a derived,
+					// If the first updates to the store value (possibly multiple of them) are synchronously
-					// we will hit the `state_unsafe_mutation` error if we `set` the value
+					// inside a derived, we will hit the `state_unsafe_mutation` error if we `set` the value
 					entry.source.v = v;
-					initial = false;
 				} else {
 					set(entry.source, v);
 				}
 			});
+
+			is_synchronous_callback = false;
 		}
 	}
 

packages/svelte/tests/runtime-runes/samples/store-async-first-value/_config.js

@@ -0,0 +1,10 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	async test({ assert, target }) {
+		assert.htmlEqual(target.innerHTML, ' / ');
+		await new Promise((r) => setTimeout(r, 110));
+		assert.htmlEqual(target.innerHTML, '42 / 42');
+	}
+});

packages/svelte/tests/runtime-runes/samples/store-async-first-value/main.svelte

@@ -0,0 +1,19 @@
+<script>
+	function store() {
+		return {
+			subscribe: (cb) => {
+				setTimeout(() => {
+					cb(42);
+				}, 100);
+
+				return () => {};
+			}
+		};
+	}
+
+	const value1 = store();
+	const value2 = store();
+	const derivedValue = $derived($value1);
+</script>
+
+{$value2} / {derivedValue}

packages/svelte/tests/runtime-runes/samples/store-no-mutation-validation/main.svelte

@@ -1,7 +1,18 @@
-<script> 
+<script>
-	import { writable } from "svelte/store";
+	import { writable } from 'svelte/store';
-	let store = writable('store');
+
-	let name = $derived($store); // store signal is updated during reading this, which normally errors, but shouldn't for stores
+	let store1 = writable('store');
+	let store2 = {
+		subscribe: (cb) => {
+			cb('...');
+			cb('Hello');
+			return () => {};
+		}
+	};
+
+	// store signal is updated during reading this, which normally errors, but shouldn't for stores
+	let name = $derived($store1);
+	let hello = $derived($store2);
 </script>
 
-<h1>Hello {name}</h1>
+<h1>{hello} {name}</h1>