fix: improve derived rune destructuring support (#10665)

.changeset/tasty-cheetahs-appear.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: improve derived rune destructuring support

packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-runes.js

@@ -299,15 +299,22 @@ export const javascript_visitors_runes = {
 					);
 				} else {
 					const bindings = state.scope.get_bindings(declarator);
-					const id = state.scope.generate('derived_value');
+					const object_id = state.scope.generate('derived_object');
+					const values_id = state.scope.generate('derived_values');
 					declarations.push(
 						b.declarator(
-							b.id(id),
+							b.id(object_id),
+							b.call('$.derived', b.thunk(rune === '$derived.by' ? b.call(value) : value))
+						)
+					);
+					declarations.push(
+						b.declarator(
+							b.id(values_id),
 							b.call(
 								'$.derived',
 								b.thunk(
 									b.block([
-										b.let(declarator.id, rune === '$derived.by' ? b.call(value) : value),
+										b.let(declarator.id, b.call('$.get', b.id(object_id))),
 										b.return(b.array(bindings.map((binding) => binding.node)))
 									])
 								)
@@ -321,7 +328,7 @@ export const javascript_visitors_runes = {
 								binding.node,
 								b.call(
 									'$.derived',
-									b.thunk(b.member(b.call('$.get', b.id(id)), b.literal(i), true))
+									b.thunk(b.member(b.call('$.get', b.id(values_id)), b.literal(i), true))
 								)
 							)
 						);

packages/svelte/tests/runtime-runes/samples/destructure-derived-object/_config.js

@@ -0,0 +1,14 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+		await btn?.click();
+
+		assert.htmlEqual(target.innerHTML, `<button>1 1 1</button>`);
+
+		await btn?.click();
+
+		assert.htmlEqual(target.innerHTML, `<button>2 2 2</button>`);
+	}
+});

packages/svelte/tests/runtime-runes/samples/destructure-derived-object/main.svelte

@@ -0,0 +1,23 @@
+
+<script>
+  function get_values() {
+    let a = $state(0);
+    let b = $state(0);
+    let c = $state(0);
+
+    return {
+       get a() { return a },
+       get b() { return b },
+       get c() { return c },
+			 increment() {
+				a++;
+				b++;
+				c++;
+			 }
+    };
+  }
+
+  const { a, b, c, increment } = $derived(get_values());
+</script>
+
+<button onclick={increment}>{a} {b} {c}</button>