run bindings in derived

packages/svelte/src/compiler/phases/3-transform/shared/spread_bindings.js

@@ -16,15 +16,21 @@ export function init_spread_bindings(spread_expression, { state, visit }) {
 		? b.literal(source.slice(spread_expression.start, spread_expression.end))
 		: undefined;
 
-	const id = state.scope.generate('$$spread_binding');
+	const id = b.id(state.scope.generate('$$spread_binding'));
-	const get = b.id(id + '_get');
-	const set = b.id(id + '_set');
 	state.init.push(
 		b.const(
-			b.array_pattern([get, set]),
+			id,
-			b.call('$.validate_spread_bindings', expression, expression_text)
+			b.call(
+				'$.derived',
+				b.thunk(b.call('$.validate_spread_bindings', expression, expression_text))
+			)
 		)
 	);
 
+	const is_server = state.options.generate === 'server';
+	const binding = is_server ? b.call(id) : b.call('$.get', id);
+
+	const get = b.thunk(b.call(b.member(binding, b.literal(0), true)));
+	const set = b.thunk(b.call(b.member(binding, b.literal(1), true), b.id('$$value')));
 	return { get, set };
 }

packages/svelte/tests/runtime-runes/samples/bind-spread-reactive/_config.js

@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		assert.htmlEqual(target.innerHTML, `<input><button>Toggle</button>`);
+
+		assert.deepEqual(logs, [false]);
+
+		const button = target.querySelector('button');
+
+		button?.click();
+		flushSync();
+
+		assert.deepEqual(logs, [false, true]);
+	}
+});

packages/svelte/tests/runtime-runes/samples/bind-spread-reactive/main.svelte

@@ -0,0 +1,17 @@
+<script>
+	let state = $state(false);
+	let value = $state('hello')
+
+	function binding(state) {
+		console.log(state);
+
+		return [
+			() => value,
+			(v) => value = v
+		];
+	}
+</script>
+
+<input bind:value={...binding(state)} />
+
+<button onclick={() => (state = !state)}>Toggle</button>