diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts index 9221a683b8..db985e8abb 100644 --- a/src/runtime/internal/Component.ts +++ b/src/runtime/internal/Component.ts @@ -32,9 +32,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) { @@ -46,8 +48,6 @@ export function mount_component(component, target, anchor) { } component.$$.on_mount = []; }); - - after_render.forEach(add_render_callback); } export function destroy_component(component, detaching) { diff --git a/src/runtime/internal/scheduler.ts b/src/runtime/internal/scheduler.ts index b5414d80e1..53bdb1df5f 100644 --- a/src/runtime/internal/scheduler.ts +++ b/src/runtime/internal/scheduler.ts @@ -49,7 +49,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(); diff --git a/test/runtime/samples/lifecycle-render-order-for-children/Item.svelte b/test/runtime/samples/lifecycle-render-order-for-children/Item.svelte new file mode 100755 index 0000000000..91411e1e73 --- /dev/null +++ b/test/runtime/samples/lifecycle-render-order-for-children/Item.svelte @@ -0,0 +1,29 @@ + + +