Trigger onMount callbacks in same order as child components

src/runtime/internal/Component.ts

@@ -30,9 +30,11 @@ export function mount_component(component, target, anchor) {
 
 	fragment.m(target, anchor);
 
-	// onMount happens after the initial afterUpdate. Because
-	// afterUpdate callbacks happen in reverse order (inner first)
-	// we schedule onMount callbacks before afterUpdate callbacks
+	// afterUpdate callbacks happen in reverse order (inner first) so
+	// reverse their position so callbacks are properly ordered
+	after_render.reverse().forEach(add_render_callback);
+
+	// onMount happens after the initial afterUpdate
 	add_render_callback(() => {
 		const new_on_destroy = on_mount.map(run).filter(is_function);
 		if (on_destroy) {
@@ -44,8 +46,6 @@ export function mount_component(component, target, anchor) {
 		}
 		component.$$.on_mount = [];
 	});
-
-	after_render.forEach(add_render_callback);
 }
 
 function destroy(component, detaching) {

src/runtime/internal/scheduler.ts

@@ -52,7 +52,7 @@ export function flush() {
 		// afterUpdate functions. This may cause
 		// subsequent updates...
 		while (render_callbacks.length) {
-			const callback = render_callbacks.pop();
+			const callback = render_callbacks.shift();
 			if (!seen_callbacks.has(callback)) {
 				callback();
 

test/runtime/samples/lifecycle-render-order-for-children/Item.svelte

@@ -0,0 +1,29 @@
+<script>
+	import { onMount, beforeUpdate, afterUpdate } from 'svelte';
+	import order from './order.js';
+
+	export let index;
+	export let id;
+	export let name;
+
+	function logRender () {
+		order.push(`${index}: render`);
+		return index;
+	}
+
+	beforeUpdate(() => {
+		order.push(`${index}: beforeUpdate`);
+	});
+
+	afterUpdate(() => {
+		order.push(`${index}: afterUpdate`);
+	});
+
+	onMount(() => {
+		order.push(`${index}: onMount`);
+	});
+</script>
+
+<li>
+	{logRender()}
+</li>

test/runtime/samples/lifecycle-render-order-for-children/_config.js

@@ -0,0 +1,28 @@
+import order from './order.js';
+
+export default {
+	skip_if_ssr: true,
+
+	test({ assert, component, target }) {
+		assert.deepEqual(order, [
+			'0: beforeUpdate',
+			'0: render',
+			'1: beforeUpdate',
+			'1: render',
+			'2: beforeUpdate',
+			'2: render',
+			'3: beforeUpdate',
+			'3: render',
+			'1: afterUpdate',
+			'1: onMount',
+			'2: afterUpdate',
+			'2: onMount',
+			'3: afterUpdate',
+			'3: onMount',
+			'0: afterUpdate',
+			'0: onMount',
+		]);
+
+		order.length = 0;
+	}
+};

test/runtime/samples/lifecycle-render-order-for-children/main.svelte

@@ -0,0 +1,33 @@
+<script>
+	import { onMount, beforeUpdate, afterUpdate } from 'svelte';
+	import order from './order.js';
+	import Item from './Item.svelte';
+
+	const parentIndex = 0;
+
+	function logRender () {
+  		order.push(`${parentIndex}: render`);
+  		return parentIndex;
+  	}
+
+  	beforeUpdate(() => {
+  		order.push(`${parentIndex}: beforeUpdate`);
+  	});
+
+  	afterUpdate(() => {
+  		order.push(`${parentIndex}: afterUpdate`);
+  	});
+
+  	onMount(() => {
+  		order.push(`${parentIndex}: onMount`);
+  	})
+</script>
+
+{logRender()}
+<ul>
+	{#each [1,2,3] as index}
+		<Item {index} />
+	{/each}
+</ul>
+
+

test/runtime/samples/lifecycle-render-order-for-children/order.js

@@ -0,0 +1 @@
+export default [];