fix: deduplicate generated props and action arg names (sveltejs#10669)

dummdidumm · web-flow · commit b1b51a404b13 · 2024-02-29T12:32:40.000+01:00
fixes sveltejs#10662
diff --git a/.changeset/unlucky-steaks-warn.md b/.changeset/unlucky-steaks-warn.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: deduplicate generated props and action arg names
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
@@ -2668,7 +2668,7 @@ export const template_visitors = {
 		const params = [b.id('$$node')];
 
 		if (node.expression) {
-			params.push(b.id('$$props'));
+			params.push(b.id('$$action_arg'));
 		}
 
 		/** @type {import('estree').Expression[]} */
diff --git a/packages/svelte/tests/runtime-legacy/samples/action-component/_config.js b/packages/svelte/tests/runtime-legacy/samples/action-component/_config.js
@@ -0,0 +1,14 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	accessors: false,
+	async test({ assert, target }) {
+		assert.htmlEqual(target.innerHTML, '<button>foo / foo</button><div></div>');
+
+		const button = target.querySelector('button');
+		button?.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<button>bar / bar</button><div></div>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/action-component/main.svelte b/packages/svelte/tests/runtime-legacy/samples/action-component/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import Component from "./sub.svelte"
+	let state = 'foo';
+	let param = '';
+
+	function action(node, _param) {
+		param = _param
+		return {
+			update(_param) {
+				param = _param;
+			}
+		};
+	}
+</script>
+
+<button on:click={() => state = 'bar'}>{state} / {param}</button>
+<Component {action} {state}></Component>
diff --git a/packages/svelte/tests/runtime-legacy/samples/action-component/sub.svelte b/packages/svelte/tests/runtime-legacy/samples/action-component/sub.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let action;
+	export let state;
+</script>
+
+<div use:action={state}></div>

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"svelte": patch
 +---
++
 +fix: deduplicate generated props and action arg names
Original file line number	Diff line number	Diff line change
`@@ -2668,7 +2668,7 @@ export const template_visitors = {`
`2668`	`2668`	`const params = [b.id('$$node')];`
`2669`	`2669`
`2670`	`2670`	`if (node.expression) {`
`2671`		`- params.push(b.id('$$props'));`
	`2671`	`+ params.push(b.id('$$action_arg'));`
`2672`	`2672`	`}`
`2673`	`2673`
`2674`	`2674`	`/** @type {import('estree').Expression[]} */`