fix: wrap incoming props in deriveds in legacy mode

.changeset/odd-jobs-taste.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: wrap props in deriveds more conservatively in legacy mode

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

@@ -1263,8 +1263,9 @@ const common_visitors = {
 	},
 	CallExpression(node, context) {
 		if (
-			context.state.expression?.type === 'ExpressionTag' ||
-			(context.state.expression?.type === 'SpreadAttribute' && !is_known_safe_call(node, context))
+			(context.state.expression?.type === 'ExpressionTag' ||
+				context.state.expression?.type === 'SpreadAttribute') &&
+			!is_known_safe_call(node, context)
 		) {
 			context.state.expression.metadata.contains_call_expression = true;
 		}

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

@@ -88,18 +88,15 @@ export function serialize_get_binding(node, state) {
 	}
 
 	if (binding.kind === 'prop' || binding.kind === 'bindable_prop') {
-		if (
-			state.analysis.accessors ||
-			(state.analysis.immutable ? binding.reassigned : binding.mutated) ||
-			binding.initial
-		) {
+		if (!state.analysis.runes || binding.reassigned || binding.initial) {
 			return b.call(node);
 		}
 
 		if (binding.prop_alias) {
 			const key = b.key(binding.prop_alias);
 			return b.member(b.id('$$props'), key, key.type === 'Literal');
 		}
+
 		return b.member(b.id('$$props'), node);
 	}
 

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

@@ -93,24 +93,17 @@ export const javascript_visitors_legacy = {
 					state.scope.get(declarator.id.name)
 				);
 
-				if (
-					state.analysis.accessors ||
-					(state.analysis.immutable ? binding.reassigned : binding.mutated) ||
-					declarator.init
-				) {
-					declarations.push(
-						b.declarator(
-							declarator.id,
-							get_prop_source(
-								binding,
-								state,
-								binding.prop_alias ?? declarator.id.name,
-								declarator.init &&
-									/** @type {import('estree').Expression} */ (visit(declarator.init))
-							)
+				declarations.push(
+					b.declarator(
+						declarator.id,
+						get_prop_source(
+							binding,
+							state,
+							binding.prop_alias ?? declarator.id.name,
+							declarator.init && /** @type {import('estree').Expression} */ (visit(declarator.init))
 						)
-					);
-				}
+					)
+				);
 
 				continue;
 			}

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

@@ -721,6 +721,7 @@ function serialize_inline_component(node, component_name, context) {
 					attribute.value.some((n) => {
 						return (
 							n.type === 'ExpressionTag' &&
+							n.expression.type !== 'Literal' &&
 							n.expression.type !== 'Identifier' &&
 							n.expression.type !== 'MemberExpression'
 						);

packages/svelte/src/internal/client/reactivity/props.js

@@ -7,7 +7,7 @@ import {
 } from '../../../constants.js';
 import { get_descriptor, is_function } from '../utils.js';
 import { mutable_source, set, source } from './sources.js';
-import { derived } from './deriveds.js';
+import { derived, derived_safe_equal } from './deriveds.js';
 import { get, is_signals_recorded, untrack, update } from '../runtime.js';
 import { safe_equals } from './equality.js';
 import { inspect_fn } from '../dev/inspect.js';
@@ -236,18 +236,24 @@ export function prop(props, key, flags, fallback) {
 		if (setter) setter(prop_value);
 	}
 
-	var getter = runes
-		? () => {
-				var value = /** @type {V} */ (props[key]);
-				if (value === undefined) return get_fallback();
-				fallback_dirty = true;
-				return value;
-			}
-		: () => {
-				var value = /** @type {V} */ (props[key]);
-				if (value !== undefined) fallback_value = /** @type {V} */ (undefined);
-				return value === undefined ? fallback_value : value;
-			};
+	/** @type {() => V} */
+	var getter;
+
+	if (runes) {
+		getter = () => {
+			var value = /** @type {V} */ (props[key]);
+			if (value === undefined) return get_fallback();
+			fallback_dirty = true;
+			return value;
+		};
+	} else {
+		var wrapper = derived_safe_equal(() => /** @type {V} */ (props[key]));
+		getter = () => {
+			var value = get(wrapper);
+			if (value !== undefined) fallback_value = /** @type {V} */ (undefined);
+			return value === undefined ? fallback_value : value;
+		};
+	}
 
 	// easy mode — prop is never written to
 	if ((flags & PROPS_IS_UPDATED) === 0) {

packages/svelte/tests/runtime-legacy/samples/component-prop-derived/Child.svelte

@@ -0,0 +1,7 @@
+<svelte:options accessors={false} />
+
+<script>
+	export let x;
+
+	$: console.log('x', x);
+</script>

packages/svelte/tests/runtime-legacy/samples/component-prop-derived/_config.js

@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, logs, target }) {
+		assert.deepEqual(logs, ['x', 42]);
+
+		const btn = target.querySelector('button');
+		flushSync(() => btn?.click());
+
+		assert.deepEqual(logs, ['x', 42]);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/component-prop-derived/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	import Child from './Child.svelte';
+
+	let object = { x: 42 };
+</script>
+
+<button on:click={() => object = { x: 42 }}>update</button>
+
+<Child x={object.x} />

packages/svelte/tests/sourcemaps/samples/basic/_config.js

@@ -1,6 +1,6 @@
 import { test } from '../../test';
 
 export default test({
-	client: ['foo.bar.baz'],
-	server: ['foo.bar.baz']
+	client: ['bar.baz'],
+	server: ['bar.baz']
 });