From 669a32a61505bca1672a1a5e050b2e13d150cd45 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Sun, 8 Jun 2025 13:00:57 +0200
Subject: [PATCH] fix: destructuring state in ssr (#16102)

---
 .changeset/silly-turkeys-confess.md                   |  5 +++++
 .../server/visitors/VariableDeclaration.js            |  6 +++++-
 .../samples/destructure-state-iterable/_expected.html |  1 +
 .../samples/destructure-state-iterable/main.svelte    | 11 +++++++++++
 .../samples/destructure-state/_expected.html          |  1 +
 .../samples/destructure-state/main.svelte             |  5 +++++
 6 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/silly-turkeys-confess.md
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/destructure-state-iterable/_expected.html
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/destructure-state-iterable/main.svelte
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/destructure-state/_expected.html
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/destructure-state/main.svelte

diff --git a/.changeset/silly-turkeys-confess.md b/.changeset/silly-turkeys-confess.md
new file mode 100644
index 0000000000..9bb677e52a
--- /dev/null
+++ b/.changeset/silly-turkeys-confess.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: destructuring state in ssr
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
index 1f0e6be77c..7c94595147 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
@@ -197,9 +197,13 @@ function create_state_declarators(declarator, scope, value) {
 	}
 
 	const tmp = b.id(scope.generate('tmp'));
-	const { paths } = extract_paths(declarator.id, tmp);
+	const { paths, inserts } = extract_paths(declarator.id, tmp);
 	return [
 		b.declarator(tmp, value), // TODO inject declarator for opts, so we can use it below
+		...inserts.map(({ id, value }) => {
+			id.name = scope.generate('$$array');
+			return b.declarator(id, value);
+		}),
 		...paths.map((path) => {
 			const value = path.expression;
 			return b.declarator(path.node, value);
diff --git a/packages/svelte/tests/server-side-rendering/samples/destructure-state-iterable/_expected.html b/packages/svelte/tests/server-side-rendering/samples/destructure-state-iterable/_expected.html
new file mode 100644
index 0000000000..e3f755a08c
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/destructure-state-iterable/_expected.html
@@ -0,0 +1 @@
+0, 1
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/destructure-state-iterable/main.svelte b/packages/svelte/tests/server-side-rendering/samples/destructure-state-iterable/main.svelte
new file mode 100644
index 0000000000..9414735f2f
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/destructure-state-iterable/main.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	let count = 0;
+	function* test(){
+		while (true) {
+			yield count++;
+		}
+	}
+	let [one, two] = $state(test())
+</script>
+
+{one}, {two}
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/destructure-state/_expected.html b/packages/svelte/tests/server-side-rendering/samples/destructure-state/_expected.html
new file mode 100644
index 0000000000..213a5f5bf1
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/destructure-state/_expected.html
@@ -0,0 +1 @@
+10, Admin
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/destructure-state/main.svelte b/packages/svelte/tests/server-side-rendering/samples/destructure-state/main.svelte
new file mode 100644
index 0000000000..422548cd14
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/destructure-state/main.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	let [level, custom] = $state([10, "Admin"])
+</script>
+
+{level}, {custom}
\ No newline at end of file