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

Author: trueadm

.changeset/grumpy-jars-sparkle.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: correctly handle closure passed to $derived.by when destructuring

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(

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']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/derived-fn-destructure/log.js

@@ -0,0 +1,2 @@
+/** @type {any[]} */
+export const log = [];

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>

packages/svelte/tests/runtime-runes/samples/derived-fn/main.svelte

@@ -1,6 +1,17 @@
 <script>
   let count = $state(0);
-  let double = $derived.by(() => count * 2);
+	let other = $state(0);
+	function create_derived() {
+		other++;
+		return () => {
+			return {
+				get double() {
+					return count * 2;
+				}
+			}
+		}
+	}
+  let {double} = $derived.by(create_derived());
 </script>
 
 <button on:click={() => count++}>{double}</button>