Merge branch 'onmount_triggers_in_reverse_order_for_siblings' of https://github.com/colincasey/svelte into colincasey-onmount_triggers_in_reverse_order_for_siblings

pull/3150/head
Rich Harris 6 years ago
commit 3595f50228

@ -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) {

@ -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();

@ -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>

@ -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;
}
};

@ -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>
Loading…
Cancel
Save