fix: ensure use directives execute in the correct sequence (#13384)

Fixes #13382. This PR ensures that action directives are now executed in the same sequence as Svelte 4, so child element before parent element.

Author: trueadm

.changeset/afraid-trainers-occur.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure use directives execute in the correct sequence

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

@@ -157,15 +157,18 @@ export function RegularElement(node, context) {
 		}
 	}
 
+	/** @type {typeof state} */
+	const element_after_update_state = { ...context.state, after_update: [] };
+
 	for (const attribute of other_directives) {
 		if (attribute.type === 'OnDirective') {
 			const handler = /** @type {Expression} */ (context.visit(attribute));
 
-			context.state.after_update.push(
+			element_after_update_state.after_update.push(
 				b.stmt(has_use ? b.call('$.effect', b.thunk(handler)) : handler)
 			);
 		} else {
-			context.visit(attribute);
+			context.visit(attribute, element_after_update_state);
 		}
 	}
 
@@ -401,13 +404,19 @@ export function RegularElement(node, context) {
 			b.block([
 				...child_state.init,
 				child_state.update.length > 0 ? build_render_statement(child_state.update) : b.empty,
-				...child_state.after_update
+				...child_state.after_update,
+				...element_after_update_state.after_update
 			])
 		);
 	} else if (node.fragment.metadata.dynamic) {
 		context.state.init.push(...child_state.init);
 		context.state.update.push(...child_state.update);
-		context.state.after_update.push(...child_state.after_update);
+		context.state.after_update.push(
+			...child_state.after_update,
+			...element_after_update_state.after_update
+		);
+	} else {
+		context.state.after_update.push(...element_after_update_state.after_update);
 	}
 
 	if (lookup.has('dir')) {

packages/svelte/tests/runtime-runes/samples/action-sequence/_config.js

@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, logs }) {
+		assert.deepEqual(logs, ['1', '2', '3', '4', '5', '6']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/action-sequence/main.svelte

@@ -0,0 +1,18 @@
+<script>
+	const action = (element) => {
+		console.log(element.id);
+	};
+</script>
+
+<div use:action id="5">
+	<div use:action id="3">
+		<div use:action id="1">
+		</div>
+		<div use:action id="2">
+		</div>
+	</div>
+	<div use:action id="4">
+	</div>
+</div>
+<div use:action id="6">
+</div>