From 2a784fce16f17831a05bc9ee17f7fb1c329afc90 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Tue, 2 Apr 2024 14:38:36 +0100
Subject: [PATCH] fix: correctly handle closure passed to $derived.by when
 destructuring (#11028)

* fix: correctly handle closure passed to $derived.by when destructuring

* oops
---
 .changeset/grumpy-jars-sparkle.md             |  5 +++++
 .../client/visitors/javascript-runes.js       |  2 +-
 .../samples/derived-fn-destructure/_config.js | 19 +++++++++++++++++++
 .../samples/derived-fn-destructure/log.js     |  2 ++
 .../derived-fn-destructure/main.svelte        | 18 ++++++++++++++++++
 5 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/grumpy-jars-sparkle.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/derived-fn-destructure/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/derived-fn-destructure/log.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/derived-fn-destructure/main.svelte

diff --git a/.changeset/grumpy-jars-sparkle.md b/.changeset/grumpy-jars-sparkle.md
new file mode 100644
index 0000000000..8cf5bd877b
--- /dev/null
+++ b/.changeset/grumpy-jars-sparkle.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: correctly handle closure passed to $derived.by when destructuring
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 95347d8f12..25a2564453 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
@@ -301,7 +301,7 @@ export const javascript_visitors_runes = {
 					declarations.push(
 						b.declarator(
 							b.id(object_id),
-							b.call('$.derived', b.thunk(rune === '$derived.by' ? b.call(value) : value))
+							b.call('$.derived', rune === '$derived.by' ? value : b.thunk(value))
 						)
 					);
 					declarations.push(
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-fn-destructure/_config.js b/packages/svelte/tests/runtime-runes/samples/derived-fn-destructure/_config.js
new file mode 100644
index 0000000000..1b6357656a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-fn-destructure/_config.js
@@ -0,0 +1,19 @@
+import { test } from '../../test';
+import { log } from './log.js';
+
+export default test({
+	before_test() {
+		log.length = 0;
+	},
+
+	html: `<button>0</button>`,
+
+	async test({ assert, target, window }) {
+		const btn = target.querySelector('button');
+		const clickEvent = new window.Event('click', { bubbles: true });
+		await btn?.dispatchEvent(clickEvent);
+
+		assert.htmlEqual(target.innerHTML, `<button>2</button>`);
+		assert.deepEqual(log, ['create_derived']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-fn-destructure/log.js b/packages/svelte/tests/runtime-runes/samples/derived-fn-destructure/log.js
new file mode 100644
index 0000000000..d3df521f4d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-fn-destructure/log.js
@@ -0,0 +1,2 @@
+/** @type {any[]} */
+export const log = [];
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-fn-destructure/main.svelte b/packages/svelte/tests/runtime-runes/samples/derived-fn-destructure/main.svelte
new file mode 100644
index 0000000000..520765469b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-fn-destructure/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	import {log} from './log.js'
+
+  let count = $state(0);
+	function create_derived() {
+		log.push('create_derived');
+		return () => {
+			return {
+				get double() {
+					return count * 2;
+				}
+			}
+		}
+	}
+  let {double} = $derived.by(create_derived());
+</script>
+
+<button on:click={() => count++}>{double}</button>