From ea0d80e1950b5c62547c69a26c823282e8d88ad3 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Thu, 7 Nov 2024 15:33:02 +0100
Subject: [PATCH] fix: consider variables with synthetic store sub as state
 (#14195)

Fixes #14183
---
 .changeset/giant-waves-act.md                 |  5 ++++
 .../src/compiler/phases/2-analyze/index.js    | 11 +++++++
 .../variable-assigned-store-state/Test.svelte | 11 +++++++
 .../variable-assigned-store-state/_config.js  | 29 +++++++++++++++++++
 .../variable-assigned-store-state/main.svelte |  9 ++++++
 5 files changed, 65 insertions(+)
 create mode 100644 .changeset/giant-waves-act.md
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/variable-assigned-store-state/Test.svelte
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/variable-assigned-store-state/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/variable-assigned-store-state/main.svelte

diff --git a/.changeset/giant-waves-act.md b/.changeset/giant-waves-act.md
new file mode 100644
index 0000000000..591f0f25ba
--- /dev/null
+++ b/.changeset/giant-waves-act.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: consider variables with synthetic store sub as state
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index f5a31d09a7..36d8145145 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -351,6 +351,17 @@ export function analyze_component(root, source, options) {
 				}
 			}
 
+			// if we are creating a synthetic binding for a let declaration we should also declare
+			// the declaration as state in case it's reassigned
+			if (
+				declaration !== null &&
+				declaration.kind === 'normal' &&
+				declaration.declaration_kind === 'let' &&
+				declaration.reassigned
+			) {
+				declaration.kind = 'state';
+			}
+
 			const binding = instance.scope.declare(b.id(name), 'store_sub', 'synthetic');
 			binding.references = references;
 			instance.scope.references.set(name, references);
diff --git a/packages/svelte/tests/runtime-legacy/samples/variable-assigned-store-state/Test.svelte b/packages/svelte/tests/runtime-legacy/samples/variable-assigned-store-state/Test.svelte
new file mode 100644
index 0000000000..8b11acb279
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/variable-assigned-store-state/Test.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let store;
+
+	let currentStore;
+	function update(){
+		currentStore = store
+	}
+</script>
+
+<button on:click={update}></button>
+<p>{$currentStore}</p>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-legacy/samples/variable-assigned-store-state/_config.js b/packages/svelte/tests/runtime-legacy/samples/variable-assigned-store-state/_config.js
new file mode 100644
index 0000000000..eecdcb2462
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/variable-assigned-store-state/_config.js
@@ -0,0 +1,29 @@
+import { flushSync } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	async test({ assert, target, window }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+		const p = target.querySelector('p');
+
+		assert.equal(p?.innerHTML, '');
+
+		flushSync(() => {
+			btn2.click();
+		});
+
+		assert.equal(p?.innerHTML, '1');
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		assert.equal(p?.innerHTML, '1');
+
+		flushSync(() => {
+			btn2.click();
+		});
+
+		assert.equal(p?.innerHTML, '2');
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/variable-assigned-store-state/main.svelte b/packages/svelte/tests/runtime-legacy/samples/variable-assigned-store-state/main.svelte
new file mode 100644
index 0000000000..5033fbc526
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/variable-assigned-store-state/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { writable } from 'svelte/store'
+	import Test from './Test.svelte'
+	let counter = 1
+	let store = writable(counter)
+</script>
+
+<button on:click={() => store = writable(++counter)}></button>
+<Test {store} />
\ No newline at end of file