From 4b274dd00d6173963a65ebe0122593d1012a5a63 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Thu, 15 Feb 2024 14:28:37 +0000
Subject: [PATCH] feat: derive destructured derived objects values (#10488)

* feat: derive destructured derived objects values

* address feedback

* address feedback
---
 .changeset/fluffy-humans-worry.md             |  5 ++++
 .../client/visitors/javascript-runes.js       | 11 +++++++-
 .../samples/derived-destructure/_config.js    | 28 +++++++++++++++++++
 .../samples/derived-destructure/log.js        |  2 ++
 .../samples/derived-destructure/main.svelte   | 24 ++++++++++++++++
 5 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/fluffy-humans-worry.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/derived-destructure/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/derived-destructure/log.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/derived-destructure/main.svelte

diff --git a/.changeset/fluffy-humans-worry.md b/.changeset/fluffy-humans-worry.md
new file mode 100644
index 0000000000..e5aab5e376
--- /dev/null
+++ b/.changeset/fluffy-humans-worry.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+feat: derive destructured derived objects values
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-runes.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-runes.js
index 12cd8d2052..56f7ae1e64 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-runes.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-runes.js
@@ -315,7 +315,16 @@ export const javascript_visitors_runes = {
 						)
 					);
 					for (let i = 0; i < bindings.length; i++) {
-						bindings[i].expression = b.member(b.call('$.get', b.id(id)), b.literal(i), true);
+						const binding = bindings[i];
+						declarations.push(
+							b.declarator(
+								binding.node,
+								b.call(
+									'$.derived',
+									b.thunk(b.member(b.call('$.get', b.id(id)), b.literal(i), true))
+								)
+							)
+						);
 					}
 				}
 				continue;
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-destructure/_config.js b/packages/svelte/tests/runtime-runes/samples/derived-destructure/_config.js
new file mode 100644
index 0000000000..6cb0ce442a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-destructure/_config.js
@@ -0,0 +1,28 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+import { log } from './log.js';
+
+export default test({
+	before_test() {
+		log.length = 0;
+	},
+
+	async test({ assert, target }) {
+		const [b1, b2, b3] = target.querySelectorAll('button');
+		log.length = 0;
+		flushSync(() => {
+			b1.click();
+		});
+		assert.deepEqual(log, ['a', 1]);
+		log.length = 0;
+		flushSync(() => {
+			b2.click();
+		});
+		assert.deepEqual(log, ['b', 1]);
+		log.length = 0;
+		flushSync(() => {
+			b3.click();
+		});
+		assert.deepEqual(log, ['c', 1]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-destructure/log.js b/packages/svelte/tests/runtime-runes/samples/derived-destructure/log.js
new file mode 100644
index 0000000000..d3df521f4d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-destructure/log.js
@@ -0,0 +1,2 @@
+/** @type {any[]} */
+export const log = [];
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-destructure/main.svelte b/packages/svelte/tests/runtime-runes/samples/derived-destructure/main.svelte
new file mode 100644
index 0000000000..be2bad2ab5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-destructure/main.svelte
@@ -0,0 +1,24 @@
+<script>
+	import { log } from './log.js';
+
+	let a = $state(0);
+	let b = $state(0);
+	let c = $state(0);
+	const {a: a1, b: b1, c: c1} = $derived({a, b, c});
+
+	$effect(() => {
+		log.push('a', a1)
+	});
+
+	$effect(() => {
+		log.push('b', b1)
+	});
+
+	$effect(() => {
+		log.push('c', c1)
+	});
+</script>
+
+<button onclick={() => a++}>{a1}</button>
+<button onclick={() => b++}>{b1}</button>
+<button onclick={() => c++}>{c1}</button>