From 8a013c4cc637f672aa841bd60bc5a571c56cf989 Mon Sep 17 00:00:00 2001
From: Holger Dal Mogensen <61235930+sockmaster27@users.noreply.github.com>
Date: Wed, 27 Dec 2023 17:31:28 +0100
Subject: [PATCH] fix: transition parameters are not reactive (#9836)

* test: add tests of transitions in new runtime

* fix: move evaluation of props

* format

* add changeset
---
 .changeset/bright-peas-juggle.md                 |  5 +++++
 .../svelte/src/internal/client/transitions.js    | 10 +++++-----
 .../samples/transition-evaluation/_config.js     | 12 ++++++++++++
 .../samples/transition-evaluation/main.svelte    | 12 ++++++++++++
 .../samples/transition-js-initial/_config.js     | 14 ++++++++++++++
 .../samples/transition-js-initial/main.svelte    | 16 ++++++++++++++++
 6 files changed, 64 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/bright-peas-juggle.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/transition-evaluation/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/transition-evaluation/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/transition-js-initial/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/transition-js-initial/main.svelte

diff --git a/.changeset/bright-peas-juggle.md b/.changeset/bright-peas-juggle.md
new file mode 100644
index 0000000000..8ef8beaeab
--- /dev/null
+++ b/.changeset/bright-peas-juggle.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+A transition's parameters are now evaluated when the transition is initialized.
diff --git a/packages/svelte/src/internal/client/transitions.js b/packages/svelte/src/internal/client/transitions.js
index c1631f8c9a..38225d0346 100644
--- a/packages/svelte/src/internal/client/transitions.js
+++ b/packages/svelte/src/internal/client/transitions.js
@@ -421,7 +421,6 @@ function is_transition_block(block) {
 export function bind_transition(dom, get_transition_fn, props_fn, direction, global) {
 	const transition_effect = /** @type {import('./types.js').EffectSignal} */ (current_effect);
 	const block = current_block;
-	const props = props_fn === null ? {} : props_fn();
 
 	let can_show_intro_on_mount = true;
 	let can_apply_lazy_transitions = false;
@@ -467,8 +466,9 @@ export function bind_transition(dom, get_transition_fn, props_fn, direction, glo
 		const transition_fn = get_transition_fn();
 		/** @param {DOMRect} [from] */
 		const init = (from) =>
-			untrack(() =>
-				direction === 'key'
+			untrack(() => {
+				const props = props_fn === null ? {} : props_fn();
+				return direction === 'key'
 					? /** @type {import('./types.js').AnimateFn<any>} */ (transition_fn)(
 							dom,
 							{ from: /** @type {DOMRect} */ (from), to: dom.getBoundingClientRect() },
@@ -477,8 +477,8 @@ export function bind_transition(dom, get_transition_fn, props_fn, direction, glo
 					  )
 					: /** @type {import('./types.js').TransitionFn<any>} */ (transition_fn)(dom, props, {
 							direction
-					  })
-			);
+					  });
+			});
 
 		transition = create_transition(dom, init, direction, transition_effect);
 		const is_intro = direction === 'in';
diff --git a/packages/svelte/tests/runtime-runes/samples/transition-evaluation/_config.js b/packages/svelte/tests/runtime-runes/samples/transition-evaluation/_config.js
new file mode 100644
index 0000000000..f07ed3e0a6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/transition-evaluation/_config.js
@@ -0,0 +1,12 @@
+import { test } from '../../test';
+
+export default test({
+	test({ assert, component, target }) {
+		const div = /** @type {HTMLDivElement & { foo?: number }} */ (target.querySelector('div'));
+
+		assert.equal(div.foo, undefined);
+		component.foo = 2;
+		component.visible = false;
+		assert.equal(div.foo, 2);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/transition-evaluation/main.svelte b/packages/svelte/tests/runtime-runes/samples/transition-evaluation/main.svelte
new file mode 100644
index 0000000000..cf4f5b664e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/transition-evaluation/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	const { visible = true, foo = 1 } = $props();
+
+	function bar(node, params) {
+        node.foo = params;
+		return () => ({});
+	}
+</script>
+
+{#if visible}
+	<div transition:bar={foo}></div>
+{/if}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/transition-js-initial/_config.js b/packages/svelte/tests/runtime-runes/samples/transition-js-initial/_config.js
new file mode 100644
index 0000000000..1b85124ce8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/transition-js-initial/_config.js
@@ -0,0 +1,14 @@
+import { test } from '../../test';
+
+export default test({
+	test({ assert, component, target, raf }) {
+		component.visible = true;
+
+		const div = /** @type {HTMLDivElement & { foo: number }} */ (target.querySelector('div'));
+		raf.tick(0);
+		assert.equal(div.foo, 0);
+
+		raf.tick(50);
+		assert.equal(div.foo, 0.5);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/transition-js-initial/main.svelte b/packages/svelte/tests/runtime-runes/samples/transition-js-initial/main.svelte
new file mode 100644
index 0000000000..b5241688d4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/transition-js-initial/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	const { visible = false } = $props();
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:foo></div>
+{/if}
\ No newline at end of file