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 @@ + + +
  • + {logRender()} +
  • diff --git a/test/runtime/samples/lifecycle-render-order-for-children/_config.js b/test/runtime/samples/lifecycle-render-order-for-children/_config.js new file mode 100644 index 0000000000..e0ff350fbb --- /dev/null +++ b/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; + } +}; diff --git a/test/runtime/samples/lifecycle-render-order-for-children/main.svelte b/test/runtime/samples/lifecycle-render-order-for-children/main.svelte new file mode 100644 index 0000000000..fbb1c937e4 --- /dev/null +++ b/test/runtime/samples/lifecycle-render-order-for-children/main.svelte @@ -0,0 +1,33 @@ + + +{logRender()} + + + diff --git a/test/runtime/samples/lifecycle-render-order-for-children/order.js b/test/runtime/samples/lifecycle-render-order-for-children/order.js new file mode 100644 index 0000000000..109fa8b38c --- /dev/null +++ b/test/runtime/samples/lifecycle-render-order-for-children/order.js @@ -0,0 +1 @@ +export default []; \ No newline at end of file