fix: $state.link bug fixes

Author: trueadm

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

@@ -29,6 +29,7 @@ import * as e from '../errors.js';
 import { derived } from './deriveds.js';
 
 let inspect_effects = new Set();
+let allow_mutations = false;
 
 /**
  * @template V
@@ -56,10 +57,11 @@ export function source_link(get_value, callback) {
 	var was_local = false;
 	var init = false;
 	var local_source = source(/** @type {V} */ (undefined));
+	var cached_linked_value = derived(get_value);
 
 	var linked_derived = derived(() => {
 		var local_value = /** @type {V} */ (get(local_source));
-		var linked_value = get_value();
+		var linked_value = get(cached_linked_value);
 
 		if (was_local) {
 			was_local = false;
@@ -69,6 +71,17 @@ export function source_link(get_value, callback) {
 		return linked_value;
 	});
 
+	/** @type {Derived<V> | undefined} */
+	var callback_derived;
+
+	if (callback !== undefined) {
+		callback_derived = derived(() => {
+			var linked_value = get(cached_linked_value);
+			untrack(() => callback(linked_value));
+			return local_source.v;
+		});
+	}
+
 	return function (/** @type {any} */ value) {
 		if (arguments.length > 0) {
 			was_local = true;
@@ -78,10 +91,11 @@ export function source_link(get_value, callback) {
 		}
 
 		var linked_value = get(linked_derived);
+		get(local_source);
 
 		if (init) {
-			if (callback !== undefined) {
-				untrack(() => callback(linked_value));
+			if (callback_derived !== undefined) {
+				get(callback_derived);
 				return local_source.v;
 			}
 		} else {
@@ -133,7 +147,12 @@ export function mutate(source, value) {
  * @returns {V}
  */
 export function set(source, value) {
-	if (current_reaction !== null && is_runes() && (current_reaction.f & DERIVED) !== 0) {
+	if (
+		!allow_mutations &&
+		current_reaction !== null &&
+		is_runes() &&
+		(current_reaction.f & DERIVED) !== 0
+	) {
 		e.state_unsafe_mutation();
 	}
 

packages/svelte/tests/runtime-runes/samples/state-link-callback-condition/_config.js

@@ -0,0 +1,43 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>0</button><button>0</button><button>false</button>`,
+
+	test({ assert, target }) {
+		const [btn1, btn2, btn3] = target.querySelectorAll('button');
+
+		flushSync(() => btn1.click());
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>1</button><button>1</button><button>false</button>`
+		);
+
+		flushSync(() => btn2.click());
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>1</button><button>2</button><button>false</button>`
+		);
+
+		flushSync(() => btn3.click());
+		assert.htmlEqual(target.innerHTML, `<button>1</button><button>2</button><button>true</button>`);
+
+		flushSync(() => btn1.click());
+		assert.htmlEqual(target.innerHTML, `<button>2</button><button>2</button><button>true</button>`);
+
+		flushSync(() => btn1.click());
+		assert.htmlEqual(target.innerHTML, `<button>3</button><button>2</button><button>true</button>`);
+
+		flushSync(() => btn1.click());
+		flushSync(() => btn3.click());
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>4</button><button>2</button><button>false</button>`
+		);
+		flushSync(() => btn1.click());
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>5</button><button>5</button><button>false</button>`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/state-link-callback-condition/main.svelte

@@ -0,0 +1,12 @@
+<script>
+	let a = $state(0);
+	let b = $state.link(a, (value) => {
+		if (c) return;
+		b = value;
+	});
+	let c = $state(false);
+</script>
+
+<button onclick={() => a++}>{a}</button>
+<button onclick={() => b++}>{b}</button>
+<button onclick={() => c = !c}>{c}</button>

packages/svelte/tests/runtime-runes/samples/state-link-callback-ref/_config.js

@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'], // TODO: make this work in SSR too
+
+	test({ assert, logs }) {
+		assert.deepEqual(logs, [0, 1, 2, 2, 2, 3]);
+	}
+});

packages/svelte/tests/runtime-runes/samples/state-link-callback-ref/main.svelte

@@ -0,0 +1,21 @@
+<script>
+	let a = $state(0);
+	let b = $state.link(a, (value) => {
+		if (c) return;
+		b = value;
+	});
+	let c = $state(false);
+
+	console.log(b);
+	a++;
+	console.log(b);
+	b++;
+	console.log(b);
+	c = true;
+	console.log(b);
+	a++;
+	console.log(b);
+	b++;
+	console.log(b);
+</script>
+

packages/svelte/tests/runtime-runes/samples/state-link-callback/_config.js

@@ -2,37 +2,21 @@ import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
-	html: `<button>0</button><button>0</button><button>false</button>`,
+	html: `<button>0</button><button>0</button>`,
 
-	test({ assert, target }) {
-		const [btn1, btn2, btn3] = target.querySelectorAll('button');
+	test({ assert, target, logs }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
 
 		flushSync(() => btn1.click());
-		assert.htmlEqual(
-			target.innerHTML,
-			`<button>1</button><button>1</button><button>false</button>`
-		);
+		assert.deepEqual(logs, ['in callback 1']);
+		assert.htmlEqual(target.innerHTML, `<button>1</button><button>1</button>`);
 
 		flushSync(() => btn2.click());
-		assert.htmlEqual(
-			target.innerHTML,
-			`<button>1</button><button>2</button><button>false</button>`
-		);
-
-		flushSync(() => btn3.click());
-		assert.htmlEqual(target.innerHTML, `<button>1</button><button>2</button><button>true</button>`);
-
-		flushSync(() => btn1.click());
-		assert.htmlEqual(target.innerHTML, `<button>2</button><button>2</button><button>true</button>`);
-
-		flushSync(() => btn1.click());
-		assert.htmlEqual(target.innerHTML, `<button>3</button><button>2</button><button>true</button>`);
+		assert.deepEqual(logs, ['in callback 1']);
+		assert.htmlEqual(target.innerHTML, `<button>1</button><button>2</button>`);
 
 		flushSync(() => btn1.click());
-		flushSync(() => btn3.click());
-		assert.htmlEqual(
-			target.innerHTML,
-			`<button>4</button><button>4</button><button>false</button>`
-		);
+		assert.deepEqual(logs, ['in callback 1', 'in callback 2']);
+		assert.htmlEqual(target.innerHTML, `<button>2</button><button>2</button>`);
 	}
 });

packages/svelte/tests/runtime-runes/samples/state-link-callback/main.svelte

@@ -1,12 +1,11 @@
 <script>
 	let a = $state(0);
 	let b = $state.link(a, (value) => {
-		if (c) return;
+		console.log(`in callback ${value}`);
 		b = value;
 	});
 	let c = $state(false);
 </script>
 
 <button onclick={() => a++}>{a}</button>
 <button onclick={() => b++}>{b}</button>
-<button onclick={() => c = !c}>{c}</button>