From dd9ade77367777abf4114e46eec46343e078e3e0 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Thu, 18 Jul 2024 21:27:29 +0200
Subject: [PATCH] fix: ensure `bind:this` happens before transitions and
 animations (#12497)

* fix: ensure `bind:this` happens before transitions and animations

* test
---
 .../3-transform/client/visitors/template.js       |  6 ++++--
 .../samples/bind-this-order/_config.js            | 13 +++++++++++++
 .../samples/bind-this-order/main.svelte           | 15 +++++++++++++++
 3 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 packages/svelte/tests/runtime-runes/samples/bind-this-order/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/bind-this-order/main.svelte

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
index f5bd0af8da..cab004bf9f 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
@@ -1890,7 +1890,8 @@ export const template_visitors = {
 				? b.literal(null)
 				: b.thunk(/** @type {Expression} */ (visit(node.expression)));
 
-		state.init.push(
+		// in after_update to ensure it always happens after bind:this
+		state.after_update.push(
 			b.stmt(
 				b.call(
 					'$.animation',
@@ -1922,7 +1923,8 @@ export const template_visitors = {
 			args.push(b.thunk(/** @type {Expression} */ (visit(node.expression))));
 		}
 
-		state.init.push(b.stmt(b.call('$.transition', ...args)));
+		// in after_update to ensure it always happens after bind:this
+		state.after_update.push(b.stmt(b.call('$.transition', ...args)));
 	},
 	RegularElement(node, context) {
 		/** @type {import('#shared').SourceLocation} */
diff --git a/packages/svelte/tests/runtime-runes/samples/bind-this-order/_config.js b/packages/svelte/tests/runtime-runes/samples/bind-this-order/_config.js
new file mode 100644
index 0000000000..1f1aadeb6d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bind-this-order/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+		flushSync();
+		assert.htmlEqual(target.innerHTML, `<button>toggle</button> <nav>hello</nav>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/bind-this-order/main.svelte b/packages/svelte/tests/runtime-runes/samples/bind-this-order/main.svelte
new file mode 100644
index 0000000000..2d0d18df5e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bind-this-order/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	function fly(node, params) {
+		return {};
+	}
+
+	let show = $state(false);
+	let sidebar = $state();
+</script>
+
+<button onclick={() => (show = !show)}>toggle</button>
+
+{#if show}
+	<!-- bind:this should be applied before any of the directives -->
+	<nav transition:fly={{ x: sidebar.offsetWidth }} bind:this={sidebar}>hello</nav>
+{/if}