fix: consider variables with synthetic store sub as state

Author: paoloricciuti

.changeset/giant-waves-act.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: consider variables with synthetic store sub as state

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -351,6 +351,15 @@ 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.kind = 'state';
+
 			const binding = instance.scope.declare(b.id(name), 'store_sub', 'synthetic');
 			binding.references = references;
 			instance.scope.references.set(name, references);

packages/svelte/tests/migrate/samples/effects-with-alias-run/output.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { run as run_1 } from 'svelte/legacy';
 
-	let count = 0;
+	let count = $state(0);
 	let run = true;
 	run_1(() => {
 		console.log(count);

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>

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

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} />