fix: ensure computed props are cached with derived (#9757)

Fixes #9751

Author: trueadm

.changeset/selfish-tools-hide.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure computed props are cached with derived

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

@@ -767,7 +767,18 @@ function serialize_inline_component(node, component_name, context) {
 			const [, value] = serialize_attribute_value(attribute.value, context);
 
 			if (attribute.metadata.dynamic) {
-				push_prop(b.get(attribute.name, [b.return(value)]));
+				const contains_call_expression =
+					Array.isArray(attribute.value) &&
+					attribute.value.some((n) => {
+						return n.type === 'ExpressionTag' && n.metadata.contains_call_expression;
+					});
+				if (contains_call_expression) {
+					const id = b.id(context.state.scope.generate(attribute.name));
+					context.state.init.push(b.var(id, b.call('$.derived', b.thunk(value))));
+					push_prop(b.get(attribute.name, [b.return(b.call('$.get', id))]));
+				} else {
+					push_prop(b.get(attribute.name, [b.return(value)]));
+				}
 			} else {
 				push_prop(b.init(attribute.name, value));
 			}

packages/svelte/tests/runtime-runes/samples/props-derived/Child.svelte

@@ -0,0 +1,7 @@
+<script>
+	let { random } = $props();
+</script>
+
+<p>{random}</p>
+<p>{random}</p>
+<p>{random}</p>

packages/svelte/tests/runtime-runes/samples/props-derived/_config.js

@@ -0,0 +1,21 @@
+import { test } from '../../test';
+
+let math_random = Math.random;
+let calls = 0;
+
+export default test({
+	skip_if_hydrate: 'permanent',
+	before_test() {
+		Math.random = function () {
+			calls++;
+			return math_random.call(this);
+		};
+	},
+	after_test() {
+		Math.random = math_random;
+		calls = 0;
+	},
+	test({ assert }) {
+		assert.equal(calls, 1);
+	}
+});

packages/svelte/tests/runtime-runes/samples/props-derived/main.svelte

@@ -0,0 +1,5 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<Child random={Math.random().toFixed(2)} />