fix: correct migration of uninitialised state

Author: trueadm

.changeset/neat-rabbits-divide.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correct migration of uninitialised state

packages/svelte/src/compiler/migrate/index.js

@@ -549,23 +549,27 @@ const instance_script = {
 				let labeled_statement;
 
 				// Analyze declaration bindings to see if they're exclusively updated within a single reactive statement
-				const possible_derived = bindings.every((binding) =>
-					binding.references.every((reference) => {
-						const declaration = reference.path.find((el) => el.type === 'VariableDeclaration');
-						const assignment = reference.path.find((el) => el.type === 'AssignmentExpression');
-						const update = reference.path.find((el) => el.type === 'UpdateExpression');
-						const labeled = reference.path.find(
-							(el) => el.type === 'LabeledStatement' && el.label.name === '$'
-						);
+				const possible_derived = bindings.every(
+					(binding) =>
+						binding.initial !== null &&
+						binding.references.every((reference) => {
+							const declaration = reference.path.find((el) => el.type === 'VariableDeclaration');
+							const assignment = reference.path.find((el) => el.type === 'AssignmentExpression');
+							const update = reference.path.find((el) => el.type === 'UpdateExpression');
+							const labeled = reference.path.find(
+								(el) => el.type === 'LabeledStatement' && el.label.name === '$'
+							);
 
-						if (assignment && labeled) {
-							if (assignment_in_labeled) return false;
-							assignment_in_labeled = /** @type {AssignmentExpression} */ (assignment);
-							labeled_statement = /** @type {LabeledStatement} */ (labeled);
-						}
+							if (assignment && labeled) {
+								if (assignment_in_labeled) return false;
+								assignment_in_labeled = /** @type {AssignmentExpression} */ (assignment);
+								labeled_statement = /** @type {LabeledStatement} */ (labeled);
+							}
 
-						return !update && (declaration || (labeled && assignment) || (!labeled && !assignment));
-					})
+							return (
+								!update && (declaration || (labeled && assignment) || (!labeled && !assignment))
+							);
+						})
 				);
 
 				const labeled_has_single_assignment =

packages/svelte/tests/migrate/samples/reactive-statements-reorder-with-comments/output.svelte

@@ -6,10 +6,7 @@
 
 
 	// triple
-	//  update triple
-	let triple = $derived(count * 3)
-	//  trailing comment
-	//  in triple;
+	let triple = $state();
 
 	function increment() {
 		count += 1;
@@ -19,7 +16,12 @@
 	run(() => {
 		console.log({ count, double });
 	});
-	
+	run(() => {
+		// update triple
+		triple = count * 3;
+		// trailing comment
+		// in triple
+	});
 </script>
 
 <button onclick={increment}>

packages/svelte/tests/migrate/samples/single-assignment-labeled/output.svelte

@@ -2,8 +2,10 @@
 	import { run } from 'svelte/legacy';
 
 	let count = $state(0);
-	let double = $derived(count * 2);
-	
+	let double = $state();
+	run(() => {
+		double = count * 2;
+	});
 	
 	let quadruple = $state();
 	run(() => {
@@ -41,10 +43,13 @@
 		evenmore_doubled = evenmore * 2;
 	});
 
-	let almost_infinity = $derived(count * 128);
-	
+	let almost_infinity = $state();
+	run(() => {
+		almost_infinity = count * 128;
+	});
 
-	let should_be_state = $state(42);
+	let should_be_state = $state();
+	let should_be_state = $state();
 	
 	let should_be_state_too = $state(42);
 	

packages/svelte/tests/migrate/samples/state-no-initial/input.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	let bounds: DOMRect | undefined;
+	$: position = calculatePosition(bounds);
+
+	const openDropdown = () => {
+    bounds = getInputPosition();
+  };
+
+	const getInputPosition = () => {};
+  const calculatePosition = (boundary?: DOMRect) => ({});
+</script>
+
+<div style:top={position.top}></div>

packages/svelte/tests/migrate/samples/state-no-initial/output.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	let bounds: DOMRect | undefined = $state();
+
+	const openDropdown = () => {
+    bounds = getInputPosition();
+  };
+
+	const getInputPosition = () => {};
+  const calculatePosition = (boundary?: DOMRect) => ({});
+	let position = $derived(calculatePosition(bounds));
+</script>
+
+<div style:top={position.top}></div>