fix: improve props aliasing (#9900)

Author: trueadm

.changeset/beige-rabbits-shave.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: improve props aliasing

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

@@ -81,6 +81,9 @@ export function serialize_get_binding(node, state) {
 			return b.call(node);
 		}
 
+		if (binding.prop_alias) {
+			return b.member(b.id('$$props'), b.id(binding.prop_alias));
+		}
 		return b.member(b.id('$$props'), node);
 	}
 

packages/svelte/tests/runtime-runes/samples/props-alias/Counter.svelte

@@ -0,0 +1,5 @@
+<script>
+	let { count: definedCount } = $props();
+</script>
+
+<button on:click={() => definedCount++}>{definedCount}</button>

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

@@ -0,0 +1,32 @@
+import { test } from '../../test';
+
+export default test({
+	html: `
+	<p>0 0 0 0</p>
+	<button>0</button>
+	<button>0</button>
+	<button>0</button>
+	<button>0</button>
+	`,
+
+	async test({ assert, target, component }) {
+		const [b1, b2, b3, b4] = target.querySelectorAll('button');
+
+		b1.click();
+		b2.click();
+		b3.click();
+		b4.click();
+		await Promise.resolve();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+		<p>1 1 0 0</p>
+		<button>1</button>
+		<button>1</button>
+		<button>1</button>
+		<button>1</button>
+		`
+		);
+	}
+});

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

@@ -0,0 +1,15 @@
+<script>
+    import Counter from './Counter.svelte';
+
+    let bound = $state(0);
+    let bound_nested = $state({count: 0});
+    let unbound = $state(0);
+    let unbound_nested = $state({count: 0});
+</script>
+
+<p>{bound} {bound_nested.count} {unbound} {unbound_nested.count}</p>
+
+<Counter bind:count={bound} />
+<Counter bind:count={bound_nested.count} />
+<Counter count={unbound} />
+<Counter count={unbound_nested.count} />