fix: put more executions after the render effect(s) (#10186)

snippets and slots should also come after the render effect so that they are executed in order with all the other things (if blocks, actions, etc etc)

Author: dummdidumm

packages/svelte/src/compiler/phases/3-transform/client/types.d.ts

@@ -29,9 +29,8 @@ export interface ComponentClientTransformState extends ClientTransformState {
 	readonly hoisted: Array<Statement | ModuleDeclaration>;
 	readonly events: Set<string>;
 
-	/** Stuff that happens before the render effect */
+	/** Stuff that happens before the render effect(s) */
 	readonly init: Statement[];
-
 	/** Stuff that happens inside separate render effects (due to call expressions) */
 	readonly update_effects: Statement[];
 	/** Stuff that happens inside the render effect */
@@ -42,7 +41,7 @@ export interface ComponentClientTransformState extends ClientTransformState {
 		/** Used if condition for singular prop is false (see comment above) */
 		grouped: Statement;
 	}[];
-	/** Stuff that happens after the render effect (bindings, actions) */
+	/** Stuff that happens after the render effect (control blocks, dynamic elements, bindings, actions, etc) */
 	readonly after_update: Statement[];
 	/** The HTML template string */
 	readonly template: string[];

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

@@ -1798,11 +1798,11 @@ export const template_visitors = {
 		}
 
 		if (is_reactive) {
-			context.state.init.push(
+			context.state.after_update.push(
 				b.stmt(b.call('$.snippet_effect', b.thunk(snippet_function), ...args))
 			);
 		} else {
-			context.state.init.push(b.stmt(b.call(snippet_function, ...args)));
+			context.state.after_update.push(b.stmt(b.call(snippet_function, ...args)));
 		}
 	},
 	AnimateDirective(node, { state, visit }) {
@@ -2974,7 +2974,7 @@ export const template_visitors = {
 			: b.member(b.member(b.id('$$props'), b.id('$$slots')), name, true, true);
 
 		const slot = b.call('$.slot', context.state.node, expression, props_expression, fallback);
-		context.state.init.push(b.stmt(slot));
+		context.state.after_update.push(b.stmt(slot));
 	},
 	SvelteHead(node, context) {
 		// TODO attributes?