From ac3bbbaa55c4908537106292d37b7f95db8abc60 Mon Sep 17 00:00:00 2001 From: Colin Casey Date: Mon, 13 May 2019 22:43:47 -0300 Subject: [PATCH 1/3] FIX: #2281 - trigger onMount callbacks in same order as child components --- src/internal/Component.js | 10 +++++----- src/internal/scheduler.js | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) 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(); From 59c4b763837f66c42c8518dfc90269c15421243d Mon Sep 17 00:00:00 2001 From: Colin Casey Date: Thu, 16 May 2019 23:25:28 -0300 Subject: [PATCH 2/3] unit test for child rendering lifecycle --- .../Item.svelte | 30 +++++++++++++++++++ .../_config.js | 24 +++++++++++++++ .../main.svelte | 11 +++++++ .../order.js | 1 + 4 files changed, 66 insertions(+) create mode 100755 test/runtime/samples/lifecycle-render-order-for-children/Item.svelte create mode 100644 test/runtime/samples/lifecycle-render-order-for-children/_config.js create mode 100644 test/runtime/samples/lifecycle-render-order-for-children/main.svelte create mode 100644 test/runtime/samples/lifecycle-render-order-for-children/order.js 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..405c656998 --- /dev/null +++ b/test/runtime/samples/lifecycle-render-order-for-children/Item.svelte @@ -0,0 +1,30 @@ + + +
  • + {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..02ff0d8d95 --- /dev/null +++ b/test/runtime/samples/lifecycle-render-order-for-children/_config.js @@ -0,0 +1,24 @@ +import order from './order.js'; + +export default { + skip_if_ssr: true, + + test({ assert, component, target }) { + assert.deepEqual(order, [ + '1: beforeUpdate', + '1: render', + '2: beforeUpdate', + '2: render', + '3: beforeUpdate', + '3: render', + '1: afterUpdate', + '1: onMount', + '2: afterUpdate', + '2: onMount', + '3: afterUpdate', + '3: 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..8320b86d79 --- /dev/null +++ b/test/runtime/samples/lifecycle-render-order-for-children/main.svelte @@ -0,0 +1,11 @@ + + + + + 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 From 5dc35283052d98c32f894431e06352e0adf4f765 Mon Sep 17 00:00:00 2001 From: Colin Casey Date: Thu, 16 May 2019 23:32:18 -0300 Subject: [PATCH 3/3] include parent component in test scenario --- .../Item.svelte | 1 - .../_config.js | 6 ++++- .../main.svelte | 22 +++++++++++++++++++ 3 files changed, 27 insertions(+), 2 deletions(-) diff --git a/test/runtime/samples/lifecycle-render-order-for-children/Item.svelte b/test/runtime/samples/lifecycle-render-order-for-children/Item.svelte index 405c656998..91411e1e73 100755 --- a/test/runtime/samples/lifecycle-render-order-for-children/Item.svelte +++ b/test/runtime/samples/lifecycle-render-order-for-children/Item.svelte @@ -1,6 +1,5 @@ +{logRender()}
      {#each [1,2,3] as index}