diff --git a/src/internal/Component.js b/src/internal/Component.js index 871dbd6054..bf3398f449 100644 --- a/src/internal/Component.js +++ b/src/internal/Component.js @@ -14,9 +14,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) { @@ -28,8 +30,6 @@ export function mount_component(component, target, anchor) { } component.$$.on_mount = []; }); - - after_render.forEach(add_render_callback); } function destroy(component, detaching) { diff --git a/src/internal/scheduler.js b/src/internal/scheduler.js index 749c3971dc..2ef79c6b69 100644 --- a/src/internal/scheduler.js +++ b/src/internal/scheduler.js @@ -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();