Merge branch 'main' into proxy-parent

Author: dummdidumm

.changeset/clever-sloths-push.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+breaking: remove unstate(), replace with $state.snapshot rune

.changeset/pre.json

@@ -52,6 +52,7 @@
     "clean-eels-beg",
     "clever-chefs-relate",
     "clever-rockets-burn",
+    "clever-sloths-push",
     "cold-birds-own",
     "cold-masks-learn",
     "cool-ants-leave",
@@ -285,6 +286,7 @@
     "rotten-rules-invite",
     "rude-ghosts-tickle",
     "selfish-dragons-knock",
+    "selfish-socks-smile",
     "selfish-spies-help",
     "selfish-tools-hide",
     "serious-gorillas-eat",

.changeset/selfish-socks-smile.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: more accurate default value handling

packages/svelte/CHANGELOG.md

@@ -1,5 +1,13 @@
 # svelte
 
+## 5.0.0-next.105
+
+### Patch Changes
+
+- breaking: remove unstate(), replace with $state.snapshot rune ([#11180](https://github.com/sveltejs/svelte/pull/11180))
+
+- fix: more accurate default value handling ([#11183](https://github.com/sveltejs/svelte/pull/11183))
+
 ## 5.0.0-next.104
 
 ### Patch Changes

packages/svelte/package.json

@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.104",
+  "version": "5.0.0-next.105",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {

packages/svelte/src/ambient.d.ts

@@ -42,6 +42,26 @@ declare namespace $state {
 	 */
 	export function frozen<T>(initial: T): Readonly<T>;
 	export function frozen<T>(): Readonly<T> | undefined;
+	/**
+	 * To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:
+	 *
+	 * Example:
+	 * ```ts
+	 * <script>
+	 *   let counter = $state({ count: 0 });
+	 *
+	 *   function onclick() {
+	 *     // Will log `{ count: ... }` rather than `Proxy { ... }`
+	 *     console.log($state.snapshot(counter));
+	 *   };
+	 * </script>
+	 * ```
+	 *
+	 * https://svelte-5-preview.vercel.app/docs/runes#$state.snapshot
+	 *
+	 * @param state The value to snapshot
+	 */
+	export function snapshot<T>(state: T): T;
 }
 
 /**

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

@@ -865,6 +865,12 @@ function validate_call_expression(node, scope, path) {
 			error(node, 'invalid-rune-args-length', rune, [1]);
 		}
 	}
+
+	if (rune === '$state.snapshot') {
+		if (node.arguments.length !== 1) {
+			error(node, 'invalid-rune-args-length', rune, [1]);
+		}
+	}
 }
 
 /**

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

@@ -1,5 +1,10 @@
 import * as b from '../../../utils/builders.js';
-import { extract_paths, is_simple_expression, object } from '../../../utils/ast.js';
+import {
+	extract_paths,
+	is_expression_async,
+	is_simple_expression,
+	object
+} from '../../../utils/ast.js';
 import { error } from '../../../errors.js';
 import {
 	PROPS_IS_LAZY_INITIAL,
@@ -115,103 +120,6 @@ export function serialize_get_binding(node, state) {
 	return node;
 }
 
-/**
- * @param {import('estree').Expression | import('estree').Pattern} expression
- * @returns {boolean}
- */
-function is_expression_async(expression) {
-	switch (expression.type) {
-		case 'AwaitExpression': {
-			return true;
-		}
-		case 'ArrayPattern': {
-			return expression.elements.some((element) => element && is_expression_async(element));
-		}
-		case 'ArrayExpression': {
-			return expression.elements.some((element) => {
-				if (!element) {
-					return false;
-				} else if (element.type === 'SpreadElement') {
-					return is_expression_async(element.argument);
-				} else {
-					return is_expression_async(element);
-				}
-			});
-		}
-		case 'AssignmentPattern':
-		case 'AssignmentExpression':
-		case 'BinaryExpression':
-		case 'LogicalExpression': {
-			return is_expression_async(expression.left) || is_expression_async(expression.right);
-		}
-		case 'CallExpression':
-		case 'NewExpression': {
-			return (
-				(expression.callee.type !== 'Super' && is_expression_async(expression.callee)) ||
-				expression.arguments.some((element) => {
-					if (element.type === 'SpreadElement') {
-						return is_expression_async(element.argument);
-					} else {
-						return is_expression_async(element);
-					}
-				})
-			);
-		}
-		case 'ChainExpression': {
-			return is_expression_async(expression.expression);
-		}
-		case 'ConditionalExpression': {
-			return (
-				is_expression_async(expression.test) ||
-				is_expression_async(expression.alternate) ||
-				is_expression_async(expression.consequent)
-			);
-		}
-		case 'ImportExpression': {
-			return is_expression_async(expression.source);
-		}
-		case 'MemberExpression': {
-			return (
-				(expression.object.type !== 'Super' && is_expression_async(expression.object)) ||
-				(expression.property.type !== 'PrivateIdentifier' &&
-					is_expression_async(expression.property))
-			);
-		}
-		case 'ObjectPattern':
-		case 'ObjectExpression': {
-			return expression.properties.some((property) => {
-				if (property.type === 'SpreadElement') {
-					return is_expression_async(property.argument);
-				} else if (property.type === 'Property') {
-					return (
-						(property.key.type !== 'PrivateIdentifier' && is_expression_async(property.key)) ||
-						is_expression_async(property.value)
-					);
-				}
-			});
-		}
-		case 'RestElement': {
-			return is_expression_async(expression.argument);
-		}
-		case 'SequenceExpression':
-		case 'TemplateLiteral': {
-			return expression.expressions.some((subexpression) => is_expression_async(subexpression));
-		}
-		case 'TaggedTemplateExpression': {
-			return is_expression_async(expression.tag) || is_expression_async(expression.quasi);
-		}
-		case 'UnaryExpression':
-		case 'UpdateExpression': {
-			return is_expression_async(expression.argument);
-		}
-		case 'YieldExpression': {
-			return expression.argument ? is_expression_async(expression.argument) : false;
-		}
-		default:
-			return false;
-	}
-}
-
 /**
  * @template {import('./types').ClientTransformState} State
  * @param {import('estree').AssignmentExpression} node

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

@@ -409,6 +409,13 @@ export const javascript_visitors_runes = {
 			return b.call('$.effect_active');
 		}
 
+		if (rune === '$state.snapshot') {
+			return b.call(
+				'$.snapshot',
+				/** @type {import('estree').Expression} */ (context.visit(node.arguments[0]))
+			);
+		}
+
 		if (rune === '$effect.root') {
 			const args = /** @type {import('estree').Expression[]} */ (
 				node.arguments.map((arg) => context.visit(arg))

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

@@ -2277,27 +2277,24 @@ export const template_visitors = {
 			for (const path of paths) {
 				const name = /** @type {import('estree').Identifier} */ (path.node).name;
 				const binding = /** @type {import('#compiler').Binding} */ (context.state.scope.get(name));
+				const needs_derived = path.has_default_value; // to ensure that default value is only called once
+				const fn = b.thunk(
+					/** @type {import('estree').Expression} */ (context.visit(path.expression?.(unwrapped)))
+				);
+
 				declarations.push(
-					b.let(
-						path.node,
-						b.thunk(
-							/** @type {import('estree').Expression} */ (
-								context.visit(path.expression?.(unwrapped))
-							)
-						)
-					)
+					b.let(path.node, needs_derived ? b.call('$.derived_safe_equal', fn) : fn)
+				);
+				binding.expression = needs_derived ? b.call('$.get', b.id(name)) : b.call(name);
+				binding.mutation = create_mutation(
+					/** @type {import('estree').Pattern} */ (path.update_expression(unwrapped))
 				);
 
 				// we need to eagerly evaluate the expression in order to hit any
 				// 'Cannot access x before initialization' errors
 				if (context.state.options.dev) {
-					declarations.push(b.stmt(b.call(name)));
+					declarations.push(b.stmt(binding.expression));
 				}
-
-				binding.expression = b.call(name);
-				binding.mutation = create_mutation(
-					/** @type {import('estree').Pattern} */ (path.update_expression(unwrapped))
-				);
 			}
 		}
 
@@ -2486,24 +2483,23 @@ export const template_visitors = {
 			for (const path of paths) {
 				const name = /** @type {import('estree').Identifier} */ (path.node).name;
 				const binding = /** @type {import('#compiler').Binding} */ (context.state.scope.get(name));
-				declarations.push(
-					b.let(
-						path.node,
-						b.thunk(
-							/** @type {import('estree').Expression} */ (
-								context.visit(path.expression?.(b.maybe_call(b.id(arg_alias))))
-							)
-						)
+				const needs_derived = path.has_default_value; // to ensure that default value is only called once
+				const fn = b.thunk(
+					/** @type {import('estree').Expression} */ (
+						context.visit(path.expression?.(b.maybe_call(b.id(arg_alias))))
 					)
 				);
 
+				declarations.push(
+					b.let(path.node, needs_derived ? b.call('$.derived_safe_equal', fn) : fn)
+				);
+				binding.expression = needs_derived ? b.call('$.get', b.id(name)) : b.call(name);
+
 				// we need to eagerly evaluate the expression in order to hit any
 				// 'Cannot access x before initialization' errors
 				if (context.state.options.dev) {
-					declarations.push(b.stmt(b.call(name)));
+					declarations.push(b.stmt(binding.expression));
 				}
-
-				binding.expression = b.call(name);
 			}
 		}
 

packages/svelte/src/compiler/phases/3-transform/server/transform-server.js

@@ -4,6 +4,7 @@ import {
 	extract_identifiers,
 	extract_paths,
 	is_event_attribute,
+	is_expression_async,
 	unwrap_optional
 } from '../../../utils/ast.js';
 import * as b from '../../../utils/builders.js';
@@ -793,6 +794,10 @@ const javascript_visitors_runes = {
 			return b.literal(false);
 		}
 
+		if (rune === '$state.snapshot') {
+			return /** @type {import('estree').Expression} */ (context.visit(node.arguments[0]));
+		}
+
 		if (rune === '$inspect' || rune === '$inspect().with') {
 			return transform_inspect_rune(node, context);
 		}
@@ -1191,7 +1196,9 @@ const javascript_visitors_legacy = {
 						const name = /** @type {import('estree').Identifier} */ (path.node).name;
 						const binding = /** @type {import('#compiler').Binding} */ (state.scope.get(name));
 						const prop = b.member(b.id('$$props'), b.literal(binding.prop_alias ?? name), true);
-						declarations.push(b.declarator(path.node, b.call('$.value_or_fallback', prop, value)));
+						declarations.push(
+							b.declarator(path.node, b.call('$.value_or_fallback', prop, b.thunk(value)))
+						);
 					}
 					continue;
 				}
@@ -1204,13 +1211,15 @@ const javascript_visitors_legacy = {
 					b.literal(binding.prop_alias ?? declarator.id.name),
 					true
 				);
-				const init = declarator.init
-					? b.call(
-							'$.value_or_fallback',
-							prop,
-							/** @type {import('estree').Expression} */ (visit(declarator.init))
-						)
-					: prop;
+
+				/** @type {import('estree').Expression} */
+				let init = prop;
+				if (declarator.init) {
+					const default_value = /** @type {import('estree').Expression} */ (visit(declarator.init));
+					init = is_expression_async(default_value)
+						? b.await(b.call('$.value_or_fallback_async', prop, b.thunk(default_value, true)))
+						: b.call('$.value_or_fallback', prop, b.thunk(default_value));
+				}
 
 				declarations.push(b.declarator(declarator.id, init));
 

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

@@ -31,6 +31,7 @@ export const PassiveEvents = ['wheel', 'touchstart', 'touchmove', 'touchend', 't
 export const Runes = /** @type {const} */ ([
 	'$state',
 	'$state.frozen',
+	'$state.snapshot',
 	'$props',
 	'$bindable',
 	'$derived',