fix: replicate Svelte 4 props update detection in legacy mode

fixes #11448 by wrapping props in deriveds

Author: dummdidumm

.changeset/empty-flowers-change.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: replicate Svelte 4 props update detection in legacy mode

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

@@ -89,6 +89,7 @@ export function serialize_get_binding(node, state) {
 
 	if (binding.kind === 'prop' || binding.kind === 'bindable_prop') {
 		if (
+			!state.analysis.runes ||
 			state.analysis.accessors ||
 			(state.analysis.immutable ? binding.reassigned : binding.mutated) ||
 			binding.initial

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/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,27 @@ 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 {
+		// Svelte 4 did not trigger updates when a primitive value was updated to the same value.
+		// Replicate that behavior through using a derived
+		var derived_getter = (immutable ? derived : derived_safe_equal)(
+			() => /** @type {V} */ (props[key])
+		);
+		getter = () => {
+			var value = get(derived_getter);
+			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/src/internal/client/runtime.js

@@ -797,7 +797,16 @@ export function invalidate_inner_signals(fn) {
 		captured_signals = previous_captured_signals;
 	}
 	for (signal of captured) {
-		mutate(signal, null /* doesnt matter */);
+		// Go one level up because derived signals created as part of props in legacy mode
+		if ((signal.f & DERIVED) !== 0) {
+			for (const dep of /** @type {import('#client').Derived} */ (signal).deps || []) {
+				if ((dep.f & DERIVED) === 0) {
+					mutate(dep, null /* doesnt matter */);
+				}
+			}
+		} else {
+			mutate(signal, null /* doesnt matter */);
+		}
 	}
 }
 

packages/svelte/tests/runtime-legacy/samples/prop-no-change/Nested.svelte

@@ -0,0 +1,6 @@
+<script>
+	export let primitive;
+	export let object;
+	$: primitive && console.log('primitive');
+	$: object && console.log('object');
+</script>

packages/svelte/tests/runtime-legacy/samples/prop-no-change/_config.js

@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, logs, target }) {
+		assert.deepEqual(logs, ['primitive', 'object']);
+		await target.querySelector('button')?.click();
+		assert.deepEqual(logs, ['primitive', 'object', 'object']);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/prop-no-change/main.svelte

@@ -0,0 +1,8 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	let value = { count: 1 };
+</script>
+
+<button on:click={() => value = { count: 1 }}>reassign</button>
+<Nested primitive={value.count} object={value} />