fix: more robust handling of var declarations

.changeset/spotty-trees-provide.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: more robust handling of var declarations

packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js

@@ -296,7 +296,7 @@ export function VariableDeclaration(node, context) {
 }
 
 /**
- * Creates the output for a state declaration.
+ * Creates the output for a state declaration in legacy mode.
  * @param {VariableDeclarator} declarator
  * @param {Scope} scope
  * @param {Expression} value

packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js

@@ -23,7 +23,7 @@ export function add_state_transformers(context) {
 			binding.kind === 'legacy_reactive'
 		) {
 			context.state.transform[name] = {
-				read: get_value,
+				read: binding.declaration_kind === 'var' ? (node) => b.call('$.safe_get', node) : get_value,
 				assign: (node, value) => {
 					let call = b.call('$.set', node, value);
 

packages/svelte/src/compiler/phases/scope.js

@@ -461,8 +461,20 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 		ForStatement: create_block_scope,
 		ForInStatement: create_block_scope,
 		ForOfStatement: create_block_scope,
-		BlockStatement: create_block_scope,
 		SwitchStatement: create_block_scope,
+		BlockStatement(node, context) {
+			const parent = context.path.at(-1);
+			if (
+				parent?.type === 'FunctionDeclaration' ||
+				parent?.type === 'FunctionExpression' ||
+				parent?.type === 'ArrowFunctionExpression'
+			) {
+				// We already created a new scope for the function
+				context.next();
+			} else {
+				create_block_scope(node, context);
+			}
+		},
 
 		ClassDeclaration(node, { state, next }) {
 			if (node.id) state.scope.declare(node.id, 'normal', 'let', node);

packages/svelte/src/internal/client/index.js

@@ -127,6 +127,7 @@ export {
 export { set_text } from './render.js';
 export {
 	get,
+	safe_get,
 	invalidate_inner_signals,
 	flush_sync,
 	tick,

packages/svelte/src/internal/client/runtime.js

@@ -734,6 +734,19 @@ export function get(signal) {
 	return signal.v;
 }
 
+/**
+ * Like `get`, but checks for `undefined`. Used for `var` declarations because they can be accessed before being declared
+ * @template V
+ * @param {Value<V> | undefined} signal
+ * @returns {V | undefined}
+ */
+export function safe_get(signal) {
+	if (!signal) {
+		return undefined;
+	}
+	return get(signal);
+}
+
 /**
  * Invokes a function and captures all signals that are read during the invocation,
  * then invalidates them.

packages/svelte/tests/runtime-runes/samples/var-declarations/_config.js

@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	test({ assert, logs }) {
+		assert.deepEqual(logs, [undefined, undefined, 10, 20, 0, 1]);
+	}
+});

packages/svelte/tests/runtime-runes/samples/var-declarations/main.svelte

@@ -0,0 +1,24 @@
+<script>
+	console.log(foo, double);
+	var foo = $state(10);
+	var double = $derived(foo * 2);
+	console.log(foo, double);
+
+	function wrap(initial) {
+		var _value = $state(initial);
+
+		return {
+			get() {
+				return _value;
+			},
+			set(state) {
+				_value = state;
+			}
+		};
+	}
+
+	var wrapped = wrap(0);
+	console.log(wrapped.get());
+	wrapped.set(1);
+	console.log(wrapped.get());
+</script>