From b4382e422d954e99ef8197ae2ad5aa003fcf99c4 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 23 Aug 2024 09:31:09 -0400
Subject: [PATCH] fix: properly transform destructured `$derived.by`
 declarations (#12984)

fixes #12983
---
 .changeset/olive-llamas-warn.md                     |  5 +++++
 .../client/visitors/VariableDeclaration.js          |  2 +-
 .../samples/destructure-derived-by/_config.js       | 13 +++++++++++++
 .../samples/destructure-derived-by/main.svelte      |  8 ++++++++
 4 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/olive-llamas-warn.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/destructure-derived-by/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/destructure-derived-by/main.svelte

diff --git a/.changeset/olive-llamas-warn.md b/.changeset/olive-llamas-warn.md
new file mode 100644
index 0000000000..4cfbf1a763
--- /dev/null
+++ b/.changeset/olive-llamas-warn.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: properly transform destructured `$derived.by` declarations
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
index c05c1b6075..319c711855 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
@@ -173,7 +173,7 @@ export function VariableDeclaration(node, context) {
 					let id;
 					let rhs = value;
 
-					if (init.arguments[0].type === 'Identifier') {
+					if (rune === '$derived' && init.arguments[0].type === 'Identifier') {
 						id = init.arguments[0];
 					} else {
 						id = b.id(context.state.scope.generate('$$d'));
diff --git a/packages/svelte/tests/runtime-runes/samples/destructure-derived-by/_config.js b/packages/svelte/tests/runtime-runes/samples/destructure-derived-by/_config.js
new file mode 100644
index 0000000000..5b090c388f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/destructure-derived-by/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: '<button>clicks: 0</button>',
+
+	test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => btn?.click());
+		assert.htmlEqual(target.innerHTML, `<button>clicks: 1</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/destructure-derived-by/main.svelte b/packages/svelte/tests/runtime-runes/samples/destructure-derived-by/main.svelte
new file mode 100644
index 0000000000..2b00935907
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/destructure-derived-by/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	let count = $state(0);
+	let fn = () => ({ n: count });
+
+	let { n } = $derived.by(fn);
+</script>
+
+<button onclick={() => (count += 1)}>clicks: {n}</button>