From cca67bba51a5ba13fd00c46a12c50e5e4c15cef8 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 19 Apr 2024 11:06:22 +0200
Subject: [PATCH] fix: support `$state.snapshot` as part of variable
 declarations (#11235)

fixes #11234
---
 .changeset/sixty-numbers-hope.md                          | 5 +++++
 .../3-transform/client/visitors/javascript-runes.js       | 8 +++++++-
 .../tests/runtime-runes/samples/state-snapshot/_config.js | 4 ++--
 .../runtime-runes/samples/state-snapshot/main.svelte      | 2 ++
 4 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/sixty-numbers-hope.md

diff --git a/.changeset/sixty-numbers-hope.md b/.changeset/sixty-numbers-hope.md
new file mode 100644
index 0000000000..eb1c949750
--- /dev/null
+++ b/.changeset/sixty-numbers-hope.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: support `$state.snapshot` as part of variable declarations
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 7857909aa5..7646ae78b7 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
@@ -197,7 +197,13 @@ export const javascript_visitors_runes = {
 		for (const declarator of node.declarations) {
 			const init = declarator.init;
 			const rune = get_rune(init, state.scope);
-			if (!rune || rune === '$effect.active' || rune === '$effect.root' || rune === '$inspect') {
+			if (
+				!rune ||
+				rune === '$effect.active' ||
+				rune === '$effect.root' ||
+				rune === '$inspect' ||
+				rune === '$state.snapshot'
+			) {
 				if (init != null && is_hoistable_function(init)) {
 					const hoistable_function = visit(init);
 					state.hoisted.push(
diff --git a/packages/svelte/tests/runtime-runes/samples/state-snapshot/_config.js b/packages/svelte/tests/runtime-runes/samples/state-snapshot/_config.js
index c0d6357f14..1088a5189c 100644
--- a/packages/svelte/tests/runtime-runes/samples/state-snapshot/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/state-snapshot/_config.js
@@ -1,12 +1,12 @@
 import { test } from '../../test';
 
 export default test({
-	html: `<button>[{"a":0}]</button>`,
+	html: `[{"a":0}] <button>[{"a":0}]</button>`,
 
 	async test({ assert, target }) {
 		const btn = target.querySelector('button');
 
 		await btn?.click();
-		assert.htmlEqual(target.innerHTML, `<button>[{"a":0},{"a":1}]</button>`);
+		assert.htmlEqual(target.innerHTML, `[{"a":0}] <button>[{"a":0},{"a":1}]</button>`);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/state-snapshot/main.svelte b/packages/svelte/tests/runtime-runes/samples/state-snapshot/main.svelte
index ac438dacc4..567b7fa537 100644
--- a/packages/svelte/tests/runtime-runes/samples/state-snapshot/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/state-snapshot/main.svelte
@@ -1,5 +1,7 @@
 <script>
     let items = $state([{a: 0}]);
+    let start = $state.snapshot(items);
 </script>
 
+{JSON.stringify(start)}
 <button on:click={() => items.push({a: items.length})}>{JSON.stringify(structuredClone($state.snapshot(items)))}</button>