Track which blocks are outroing to prevent duplication

* track whether block is already outroing

* get tests passing

* use transition_in and transition_out helpers

* fix some stuff

* fix non-existent dynamic component outros

* another fix

* another fix

* argh so close

* NAILED IT

* remove unused code

* tidy up
pull/3069/head
Rich Harris 5 years ago committed by GitHub
parent 9bce3fc586
commit d9046786a1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -177,7 +177,7 @@ export default class AwaitBlockWrapper extends Wrapper {
`);
if (has_transitions) {
block.builders.intro.add_line(`${info}.block.i();`);
block.builders.intro.add_line(`@transition_in(${info}.block);`);
}
const conditions = [];
@ -216,7 +216,7 @@ export default class AwaitBlockWrapper extends Wrapper {
block.builders.outro.add_block(deindent`
for (let #i = 0; #i < 3; #i += 1) {
const block = ${info}.blocks[#i];
if (block) block.o();
@transition_out(block);
}
`);
}

@ -204,7 +204,7 @@ export default class EachBlockWrapper extends Wrapper {
if (this.block.has_intro_method || this.block.has_outro_method) {
block.builders.intro.add_block(deindent`
for (var #i = 0; #i < ${this.vars.data_length}; #i += 1) ${this.vars.iterations}[#i].i();
for (var #i = 0; #i < ${this.vars.data_length}; #i += 1) @transition_in(${this.vars.iterations}[#i]);
`);
}
@ -362,7 +362,7 @@ export default class EachBlockWrapper extends Wrapper {
if (this.block.has_outros) {
block.builders.outro.add_block(deindent`
for (#i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].o();
for (#i = 0; #i < ${view_length}; #i += 1) @transition_out(${iterations}[#i]);
`);
}
@ -425,24 +425,6 @@ export default class EachBlockWrapper extends Wrapper {
all_dependencies.add(dependency);
});
const outro_block = this.block.has_outros && block.get_unique_name('outro_block');
if (outro_block) {
block.builders.init.add_block(deindent`
function ${outro_block}(i, detaching, local) {
if (${iterations}[i]) {
if (detaching) {
@on_outro(() => {
${iterations}[i].d(detaching);
${iterations}[i] = null;
});
}
${iterations}[i].o(local);
}
}
`);
}
const condition = Array.from(all_dependencies)
.map(dependency => `changed.${dependency}`)
.join(' || ');
@ -454,18 +436,18 @@ export default class EachBlockWrapper extends Wrapper {
? deindent`
if (${iterations}[#i]) {
${iterations}[#i].p(changed, child_ctx);
${has_transitions && `${iterations}[#i].i(1);`}
${has_transitions && `@transition_in(${this.vars.iterations}[#i], 1);`}
} else {
${iterations}[#i] = ${create_each_block}(child_ctx);
${iterations}[#i].c();
${has_transitions && `${iterations}[#i].i(1);`}
${has_transitions && `@transition_in(${this.vars.iterations}[#i], 1);`}
${iterations}[#i].m(${update_mount_node}, ${anchor});
}
`
: deindent`
${iterations}[#i] = ${create_each_block}(child_ctx);
${iterations}[#i].c();
${has_transitions && `${iterations}[#i].i(1);`}
${has_transitions && `@transition_in(${this.vars.iterations}[#i], 1);`}
${iterations}[#i].m(${update_mount_node}, ${anchor});
`;
@ -474,9 +456,16 @@ export default class EachBlockWrapper extends Wrapper {
let remove_old_blocks;
if (this.block.has_outros) {
const out = block.get_unique_name('out');
block.builders.init.add_block(deindent`
const ${out} = i => @transition_out(${iterations}[i], 1, () => {
${iterations}[i] = null;
});
`);
remove_old_blocks = deindent`
@group_outros();
for (; #i < ${view_length}; #i += 1) ${outro_block}(#i, 1, 1);
for (; #i < ${view_length}; #i += 1) ${out}(#i);
@check_outros();
`;
} else {
@ -507,10 +496,10 @@ export default class EachBlockWrapper extends Wrapper {
`);
}
if (outro_block) {
if (this.block.has_outros) {
block.builders.outro.add_block(deindent`
${iterations} = ${iterations}.filter(Boolean);
for (let #i = 0; #i < ${view_length}; #i += 1) ${outro_block}(#i, 0, 0);`
for (let #i = 0; #i < ${view_length}; #i += 1) @transition_out(${iterations}[#i]);`
);
}

@ -160,7 +160,7 @@ export default class IfBlockWrapper extends Wrapper {
if (has_outros) {
this.render_compound_with_outros(block, parent_node, parent_nodes, dynamic, vars, detaching);
block.builders.outro.add_line(`if (${name}) ${name}.o();`);
block.builders.outro.add_line(`@transition_out(${name});`);
} else {
this.render_compound(block, parent_node, parent_nodes, dynamic, vars, detaching);
}
@ -168,7 +168,7 @@ export default class IfBlockWrapper extends Wrapper {
this.render_simple(block, parent_node, parent_nodes, dynamic, vars, detaching);
if (has_outros) {
block.builders.outro.add_line(`if (${name}) ${name}.o();`);
block.builders.outro.add_line(`@transition_out(${name});`);
}
}
@ -181,7 +181,7 @@ export default class IfBlockWrapper extends Wrapper {
}
if (has_intros || has_outros) {
block.builders.intro.add_line(`if (${name}) ${name}.i();`);
block.builders.intro.add_line(`@transition_in(${name});`);
}
if (needs_anchor) {
@ -238,7 +238,7 @@ export default class IfBlockWrapper extends Wrapper {
${name} = ${current_block_type_and}${current_block_type}(ctx);
if (${name}) {
${name}.c();
${has_transitions && `${name}.i(1);`}
${has_transitions && `@transition_in(${name}, 1);`}
${name}.m(${update_mount_node}, ${anchor});
}
`;
@ -326,11 +326,9 @@ export default class IfBlockWrapper extends Wrapper {
const destroy_old_block = deindent`
@group_outros();
@on_outro(() => {
${if_blocks}[${previous_block_index}].d(1);
@transition_out(${if_blocks}[${previous_block_index}], 1, () => {
${if_blocks}[${previous_block_index}] = null;
});
${name}.o(1);
@check_outros();
`;
@ -340,7 +338,7 @@ export default class IfBlockWrapper extends Wrapper {
${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}](ctx);
${name}.c();
}
${has_transitions && `${name}.i(1);`}
${has_transitions && `@transition_in(${name}, 1);`}
${name}.m(${update_mount_node}, ${anchor});
`;
@ -414,11 +412,11 @@ export default class IfBlockWrapper extends Wrapper {
? deindent`
if (${name}) {
${name}.p(changed, ctx);
${has_transitions && `${name}.i(1);`}
${has_transitions && `@transition_in(${name}, 1);`}
} else {
${name} = ${branch.block.name}(ctx);
${name}.c();
${has_transitions && `${name}.i(1);`}
${has_transitions && `@transition_in(${name}, 1);`}
${name}.m(${update_mount_node}, ${anchor});
}
`
@ -426,38 +424,37 @@ export default class IfBlockWrapper extends Wrapper {
if (!${name}) {
${name} = ${branch.block.name}(ctx);
${name}.c();
${has_transitions && `${name}.i(1);`}
${has_transitions && `@transition_in(${name}, 1);`}
${name}.m(${update_mount_node}, ${anchor});
${has_transitions && `} else {
${name}.i(1);`}
@transition_in(${name}, 1);`}
}
`;
// no `p()` here — we don't want to update outroing nodes,
// as that will typically result in glitching
const exit = branch.block.has_outro_method
? deindent`
@group_outros();
@on_outro(() => {
if (branch.block.has_outro_method) {
block.builders.update.add_block(deindent`
if (${branch.condition}) {
${enter}
} else if (${name}) {
@group_outros();
@transition_out(${name}, 1, () => {
${name} = null;
});
@check_outros();
}
`);
} else {
block.builders.update.add_block(deindent`
if (${branch.condition}) {
${enter}
} else if (${name}) {
${name}.d(1);
${name} = null;
});
${name}.o(1);
@check_outros();
`
: deindent`
${name}.d(1);
${name} = null;
`;
block.builders.update.add_block(deindent`
if (${branch.condition}) {
${enter}
} else if (${name}) {
${exit}
}
`);
}
`);
}
block.builders.destroy.add_line(`${if_name}${name}.d(${detaching});`);
}

@ -423,10 +423,9 @@ export default class InlineComponentWrapper extends Wrapper {
if (${name}) {
@group_outros();
const old_component = ${name};
@on_outro(() => {
old_component.$destroy();
@transition_out(old_component.$$.fragment, 1, () => {
@destroy_component(old_component);
});
old_component.$$.fragment.o(1);
@check_outros();
}
@ -437,7 +436,7 @@ export default class InlineComponentWrapper extends Wrapper {
${munged_handlers}
${name}.$$.fragment.c();
${name}.$$.fragment.i(1);
@transition_in(${name}.$$.fragment, 1);
@mount_component(${name}, ${update_mount_node}, ${anchor});
} else {
${name} = null;
@ -446,7 +445,7 @@ export default class InlineComponentWrapper extends Wrapper {
`);
block.builders.intro.add_block(deindent`
if (${name}) ${name}.$$.fragment.i(#local);
@transition_in(${name}.$$.fragment, #local);
`);
if (updates.length) {
@ -458,10 +457,10 @@ export default class InlineComponentWrapper extends Wrapper {
}
block.builders.outro.add_line(
`if (${name}) ${name}.$$.fragment.o(#local);`
`if (${name}) @transition_out(${name}.$$.fragment, #local);`
);
block.builders.destroy.add_line(`if (${name}) ${name}.$destroy(${parent_node ? '' : 'detaching'});`);
block.builders.destroy.add_line(`if (${name}) @destroy_component(${name}, ${parent_node ? '' : 'detaching'});`);
} else {
const expression = this.node.name === 'svelte:self'
? '__svelte:self__' // TODO conflict-proof this
@ -490,7 +489,7 @@ export default class InlineComponentWrapper extends Wrapper {
);
block.builders.intro.add_block(deindent`
${name}.$$.fragment.i(#local);
@transition_in(${name}.$$.fragment, #local);
`);
if (updates.length) {
@ -501,11 +500,11 @@ export default class InlineComponentWrapper extends Wrapper {
}
block.builders.destroy.add_block(deindent`
${name}.$destroy(${parent_node ? '' : 'detaching'});
@destroy_component(${name}, ${parent_node ? '' : 'detaching'});
`);
block.builders.outro.add_line(
`${name}.$$.fragment.o(#local);`
`@transition_out(${name}.$$.fragment, #local);`
);
}
}

@ -142,11 +142,11 @@ export default class SlotWrapper extends Wrapper {
`);
block.builders.intro.add_line(
`if (${slot} && ${slot}.i) ${slot}.i(#local);`
`@transition_in(${slot}, #local);`
);
block.builders.outro.add_line(
`if (${slot} && ${slot}.o) ${slot}.o(#local);`
`@transition_out(${slot}, #local);`
);
let update_conditions = [...this.dependencies].map(name => `changed.${name}`).join(' || ');

@ -2,6 +2,7 @@ import { add_render_callback, flush, schedule_update, dirty_components } from '.
import { current_component, set_current_component } from './lifecycle';
import { blank_object, is_function, run, run_all, noop } from './utils';
import { children } from './dom';
import { transition_in } from './transitions';
// eslint-disable-next-line @typescript-eslint/class-name-casing
interface T$$ {
@ -49,10 +50,11 @@ export function mount_component(component, target, anchor) {
after_render.forEach(add_render_callback);
}
function destroy(component, detaching) {
if (component.$$) {
export function destroy_component(component, detaching) {
if (component.$$.fragment) {
run_all(component.$$.on_destroy);
component.$$.fragment.d(detaching);
if (detaching) component.$$.fragment.d(1);
// TODO null out other refs, including component.$$ (but need to
// preserve final state?)
@ -123,7 +125,7 @@ export function init(component, options, instance, create_fragment, not_equal, p
$$.fragment!.c();
}
if (options.intro && component.$$.fragment.i) component.$$.fragment.i();
if (options.intro) transition_in(component.$$.fragment);
mount_component(component, options.target, options.anchor);
flush();
}
@ -153,7 +155,7 @@ if (typeof HTMLElement !== 'undefined') {
}
$destroy() {
destroy(this, true);
destroy_component(this, 1);
this.$destroy = noop;
}
@ -178,7 +180,7 @@ export class SvelteComponent {
$$: T$$;
$destroy() {
destroy(this, true);
destroy_component(this, 1);
this.$destroy = noop;
}

@ -1,5 +1,5 @@
import { assign, is_promise } from './utils';
import { check_outros, group_outros, on_outro } from './transitions';
import { check_outros, group_outros, transition_in, transition_out } from './transitions';
import { flush } from '../internal/scheduler';
export function handle_promise(promise, info) {
@ -18,11 +18,9 @@ export function handle_promise(promise, info) {
info.blocks.forEach((block, i) => {
if (i !== index && block) {
group_outros();
on_outro(() => {
block.d(1);
transition_out(block, 1, () => {
info.blocks[i] = null;
});
block.o(1);
check_outros();
}
});
@ -31,7 +29,7 @@ export function handle_promise(promise, info) {
}
block.c();
if (block.i) block.i(1);
transition_in(block, 1);
block.m(info.mount(), info.anchor);
flush();

@ -1,4 +1,4 @@
import { on_outro } from './transitions';
import { transition_in, transition_out } from './transitions';
export function destroy_block(block, lookup) {
block.d(1);
@ -6,11 +6,9 @@ export function destroy_block(block, lookup) {
}
export function outro_and_destroy_block(block, lookup) {
on_outro(() => {
transition_out(block, 1, () => {
destroy_block(block, lookup);
});
block.o(1);
}
export function fix_and_destroy_block(block, lookup) {
@ -57,7 +55,7 @@ export function update_keyed_each(old_blocks, changed, get_key, dynamic, ctx, li
const did_move = new Set();
function insert(block) {
if (block.i) block.i(1);
transition_in(block, 1);
block.m(node, next);
lookup.set(block.key, block);
next = block.first;

@ -23,6 +23,7 @@ function dispatch(node: Element, direction: boolean, kind: 'start' | 'end') {
node.dispatchEvent(custom_event(`${direction ? 'intro' : 'outro'}${kind}`));
}
const outroing = new Set();
let outros;
export function group_outros() {
@ -38,9 +39,30 @@ export function check_outros() {
}
}
export function on_outro(callback) {
outros.callbacks.push(callback);
export function transition_in(block, local?: 0 | 1) {
if (block && block.i) {
outroing.delete(block);
block.i(local);
}
}
export function transition_out(block, local: 0 | 1, callback) {
if (block && block.o) {
if (outroing.has(block)) return;
outroing.add(block);
outros.callbacks.push(() => {
outroing.delete(block);
if (callback) {
block.d(1);
callback();
}
});
block.o(local);
}
}
type TransitionFn = (node: Element, params: any) => TransitionConfig;
export function create_in_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any) {

@ -1,10 +1,13 @@
/* generated by Svelte vX.Y.Z */
import {
SvelteComponent,
destroy_component,
init,
mount_component,
noop,
safe_not_equal
safe_not_equal,
transition_in,
transition_out
} from "svelte/internal";
function create_fragment(ctx) {
@ -26,18 +29,18 @@ function create_fragment(ctx) {
i(local) {
if (current) return;
nested.$$.fragment.i(local);
transition_in(nested.$$.fragment, local);
current = true;
},
o(local) {
nested.$$.fragment.o(local);
transition_out(nested.$$.fragment, local);
current = false;
},
d(detaching) {
nested.$destroy(detaching);
destroy_component(nested, detaching);
}
};
}

@ -1,10 +1,13 @@
/* generated by Svelte vX.Y.Z */
import {
SvelteComponent,
destroy_component,
init,
mount_component,
noop,
not_equal
not_equal,
transition_in,
transition_out
} from "svelte/internal";
function create_fragment(ctx) {
@ -26,18 +29,18 @@ function create_fragment(ctx) {
i(local) {
if (current) return;
nested.$$.fragment.i(local);
transition_in(nested.$$.fragment, local);
current = true;
},
o(local) {
nested.$$.fragment.o(local);
transition_out(nested.$$.fragment, local);
current = false;
},
d(detaching) {
nested.$destroy(detaching);
destroy_component(nested, detaching);
}
};
}

@ -1,10 +1,13 @@
/* generated by Svelte vX.Y.Z */
import {
SvelteComponent,
destroy_component,
init,
mount_component,
noop,
not_equal
not_equal,
transition_in,
transition_out
} from "svelte/internal";
function create_fragment(ctx) {
@ -26,18 +29,18 @@ function create_fragment(ctx) {
i(local) {
if (current) return;
nested.$$.fragment.i(local);
transition_in(nested.$$.fragment, local);
current = true;
},
o(local) {
nested.$$.fragment.o(local);
transition_out(nested.$$.fragment, local);
current = false;
},
d(detaching) {
nested.$destroy(detaching);
destroy_component(nested, detaching);
}
};
}

@ -1,10 +1,13 @@
/* generated by Svelte vX.Y.Z */
import {
SvelteComponent,
destroy_component,
init,
mount_component,
noop,
safe_not_equal
safe_not_equal,
transition_in,
transition_out
} from "svelte/internal";
function create_fragment(ctx) {
@ -26,18 +29,18 @@ function create_fragment(ctx) {
i(local) {
if (current) return;
nested.$$.fragment.i(local);
transition_in(nested.$$.fragment, local);
current = true;
},
o(local) {
nested.$$.fragment.o(local);
transition_out(nested.$$.fragment, local);
current = false;
},
d(detaching) {
nested.$destroy(detaching);
destroy_component(nested, detaching);
}
};
}

@ -1,10 +1,13 @@
/* generated by Svelte vX.Y.Z */
import {
SvelteComponent,
destroy_component,
init,
mount_component,
noop,
safe_not_equal
safe_not_equal,
transition_in,
transition_out
} from "svelte/internal";
import LazyLoad from "./LazyLoad.svelte";
@ -27,18 +30,18 @@ function create_fragment(ctx) {
i(local) {
if (current) return;
lazyload.$$.fragment.i(local);
transition_in(lazyload.$$.fragment, local);
current = true;
},
o(local) {
lazyload.$$.fragment.o(local);
transition_out(lazyload.$$.fragment, local);
current = false;
},
d(detaching) {
lazyload.$destroy(detaching);
destroy_component(lazyload, detaching);
}
};
}

@ -1,13 +1,16 @@
/* generated by Svelte vX.Y.Z */
import {
SvelteComponent,
destroy_component,
detach,
init,
insert,
mount_component,
noop,
safe_not_equal,
space
space,
transition_in,
transition_out
} from "svelte/internal";
import Imported from "Imported.svelte";
@ -36,27 +39,27 @@ function create_fragment(ctx) {
i(local) {
if (current) return;
imported.$$.fragment.i(local);
transition_in(imported.$$.fragment, local);
nonimported.$$.fragment.i(local);
transition_in(nonimported.$$.fragment, local);
current = true;
},
o(local) {
imported.$$.fragment.o(local);
nonimported.$$.fragment.o(local);
transition_out(imported.$$.fragment, local);
transition_out(nonimported.$$.fragment, local);
current = false;
},
d(detaching) {
imported.$destroy(detaching);
destroy_component(imported, detaching);
if (detaching) {
detach(t);
}
nonimported.$destroy(detaching);
destroy_component(nonimported, detaching);
}
};
}

@ -9,7 +9,8 @@ import {
init,
insert,
noop,
safe_not_equal
safe_not_equal,
transition_in
} from "svelte/internal";
// (8:0) {#if x}
@ -34,10 +35,10 @@ function create_if_block(ctx) {
if (!if_block) {
if_block = create_if_block_1(ctx);
if_block.c();
if_block.i(1);
transition_in(if_block, 1);
if_block.m(if_block_anchor.parentNode, if_block_anchor);
} else {
if_block.i(1);
transition_in(if_block, 1);
}
} else if (if_block) {
if_block.d(1);

@ -0,0 +1,129 @@
/* generated by Svelte vX.Y.Z */
import {
SvelteComponent,
check_outros,
create_out_transition,
detach,
element,
empty,
group_outros,
init,
insert,
safe_not_equal,
transition_in,
transition_out
} from "svelte/internal";
import { fade } from "svelte/transition";
// (7:0) {#if num < 5}
function create_if_block(ctx) {
var div, div_outro, current;
return {
c() {
div = element("div");
div.innerHTML = `<p>wheeee</p>`;
},
m(target, anchor) {
insert(target, div, anchor);
current = true;
},
i(local) {
if (current) return;
if (div_outro) div_outro.end(1);
current = true;
},
o(local) {
div_outro = create_out_transition(div, fade, {});
current = false;
},
d(detaching) {
if (detaching) {
detach(div);
if (div_outro) div_outro.end();
}
}
};
}
function create_fragment(ctx) {
var if_block_anchor, current;
var if_block = (ctx.num < 5) && create_if_block(ctx);
return {
c() {
if (if_block) if_block.c();
if_block_anchor = empty();
},
m(target, anchor) {
if (if_block) if_block.m(target, anchor);
insert(target, if_block_anchor, anchor);
current = true;
},
p(changed, ctx) {
if (ctx.num < 5) {
if (!if_block) {
if_block = create_if_block(ctx);
if_block.c();
transition_in(if_block, 1);
if_block.m(if_block_anchor.parentNode, if_block_anchor);
} else {
transition_in(if_block, 1);
}
} else if (if_block) {
group_outros();
transition_out(if_block, 1, () => {
if_block = null;
});
check_outros();
}
},
i(local) {
if (current) return;
transition_in(if_block);
current = true;
},
o(local) {
transition_out(if_block);
current = false;
},
d(detaching) {
if (if_block) if_block.d(detaching);
if (detaching) {
detach(if_block_anchor);
}
}
};
}
function instance($$self, $$props, $$invalidate) {
let { num = 1 } = $$props;
$$self.$set = $$props => {
if ('num' in $$props) $$invalidate('num', num = $$props.num);
};
return { num };
}
class Component extends SvelteComponent {
constructor(options) {
super();
init(this, options, instance, create_fragment, safe_not_equal, ["num"]);
}
}
export default Component;

@ -0,0 +1,11 @@
<script>
import { fade } from 'svelte/transition';
export let num = 1;
</script>
{#if num < 5}
<div out:fade>
<p>wheeee</p>
</div>
{/if}
Loading…
Cancel
Save