|
|
|
@ -807,20 +807,18 @@ export default class ElementWrapper extends Wrapper {
|
|
|
|
|
|
|
|
|
|
|
|
add_transitions(
|
|
|
|
add_transitions(
|
|
|
|
block: Block
|
|
|
|
block: Block
|
|
|
|
): { intro: Identifier | null, outro: Identifier | null } {
|
|
|
|
) {
|
|
|
|
const names = { intro: null, outro: null };
|
|
|
|
|
|
|
|
const { intro, outro } = this.node;
|
|
|
|
const { intro, outro } = this.node;
|
|
|
|
if (!intro && !outro) return names;
|
|
|
|
if (!intro && !outro) return;
|
|
|
|
|
|
|
|
|
|
|
|
if (intro === outro) {
|
|
|
|
if (intro === outro) {
|
|
|
|
// bidirectional transition
|
|
|
|
// bidirectional transition
|
|
|
|
const name = block.get_unique_name(`${this.var.name}_transition`);
|
|
|
|
const name = block.get_unique_name(`${this.var.name}_transition`);
|
|
|
|
names.intro = names.outro = name;
|
|
|
|
|
|
|
|
const snippet = intro.expression
|
|
|
|
const snippet = intro.expression
|
|
|
|
? intro.expression.manipulate(block)
|
|
|
|
? intro.expression.manipulate(block)
|
|
|
|
: x`{}`;
|
|
|
|
: x`{}`;
|
|
|
|
|
|
|
|
|
|
|
|
block.add_variable(names.intro);
|
|
|
|
block.add_variable(name);
|
|
|
|
|
|
|
|
|
|
|
|
const fn = this.renderer.reference(intro.name);
|
|
|
|
const fn = this.renderer.reference(intro.name);
|
|
|
|
|
|
|
|
|
|
|
|
@ -855,11 +853,11 @@ export default class ElementWrapper extends Wrapper {
|
|
|
|
|
|
|
|
|
|
|
|
block.chunks.destroy.push(b`if (detaching && ${name}) ${name}.end();`);
|
|
|
|
block.chunks.destroy.push(b`if (detaching && ${name}) ${name}.end();`);
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
names.intro = intro && block.get_unique_name(`${this.var.name}_intro`);
|
|
|
|
const intro_name = intro && block.get_unique_name(`${this.var.name}_intro`);
|
|
|
|
names.outro = outro && block.get_unique_name(`${this.var.name}_outro`);
|
|
|
|
const outro_name = outro && block.get_unique_name(`${this.var.name}_outro`);
|
|
|
|
|
|
|
|
|
|
|
|
if (intro) {
|
|
|
|
if (intro) {
|
|
|
|
block.add_variable(names.intro);
|
|
|
|
block.add_variable(intro_name);
|
|
|
|
const snippet = intro.expression
|
|
|
|
const snippet = intro.expression
|
|
|
|
? intro.expression.manipulate(block)
|
|
|
|
? intro.expression.manipulate(block)
|
|
|
|
: x`{}`;
|
|
|
|
: x`{}`;
|
|
|
|
@ -871,19 +869,19 @@ export default class ElementWrapper extends Wrapper {
|
|
|
|
if (outro) {
|
|
|
|
if (outro) {
|
|
|
|
intro_block = b`
|
|
|
|
intro_block = b`
|
|
|
|
@add_render_callback(() => {
|
|
|
|
@add_render_callback(() => {
|
|
|
|
if (${names.outro}) ${names.outro}.end(1);
|
|
|
|
if (${outro_name}) ${outro_name}.end(1);
|
|
|
|
${names.intro} = @create_in_transition(${this.var}, ${fn}, ${snippet});
|
|
|
|
${intro_name} = @create_in_transition(${this.var}, ${fn}, ${snippet});
|
|
|
|
${names.intro}.start();
|
|
|
|
${intro_name}.start();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
`;
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
|
|
block.chunks.outro.push(b`if (${names.intro}) ${names.intro}.invalidate();`);
|
|
|
|
block.chunks.outro.push(b`if (${intro_name}) ${intro_name}.invalidate();`);
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
intro_block = b`
|
|
|
|
intro_block = b`
|
|
|
|
if (!${names.intro}) {
|
|
|
|
if (!${intro_name}) {
|
|
|
|
@add_render_callback(() => {
|
|
|
|
@add_render_callback(() => {
|
|
|
|
${names.intro} = @create_in_transition(${this.var}, ${fn}, ${snippet});
|
|
|
|
${intro_name} = @create_in_transition(${this.var}, ${fn}, ${snippet});
|
|
|
|
${names.intro}.start();
|
|
|
|
${intro_name}.start();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
`;
|
|
|
|
@ -901,7 +899,7 @@ export default class ElementWrapper extends Wrapper {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (outro) {
|
|
|
|
if (outro) {
|
|
|
|
block.add_variable(names.outro);
|
|
|
|
block.add_variable(outro_name);
|
|
|
|
const snippet = outro.expression
|
|
|
|
const snippet = outro.expression
|
|
|
|
? outro.expression.manipulate(block)
|
|
|
|
? outro.expression.manipulate(block)
|
|
|
|
: x`{}`;
|
|
|
|
: x`{}`;
|
|
|
|
@ -910,14 +908,14 @@ export default class ElementWrapper extends Wrapper {
|
|
|
|
|
|
|
|
|
|
|
|
if (!intro) {
|
|
|
|
if (!intro) {
|
|
|
|
block.chunks.intro.push(b`
|
|
|
|
block.chunks.intro.push(b`
|
|
|
|
if (${names.outro}) ${names.outro}.end(1);
|
|
|
|
if (${outro_name}) ${outro_name}.end(1);
|
|
|
|
`);
|
|
|
|
`);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// TODO hide elements that have outro'd (unless they belong to a still-outroing
|
|
|
|
// TODO hide elements that have outro'd (unless they belong to a still-outroing
|
|
|
|
// group) prior to their removal from the DOM
|
|
|
|
// group) prior to their removal from the DOM
|
|
|
|
let outro_block = b`
|
|
|
|
let outro_block = b`
|
|
|
|
${names.outro} = @create_out_transition(${this.var}, ${fn}, ${snippet});
|
|
|
|
${outro_name} = @create_out_transition(${this.var}, ${fn}, ${snippet});
|
|
|
|
`;
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
|
|
if (outro.is_local) {
|
|
|
|
if (outro.is_local) {
|
|
|
|
@ -930,15 +928,13 @@ export default class ElementWrapper extends Wrapper {
|
|
|
|
|
|
|
|
|
|
|
|
block.chunks.outro.push(outro_block);
|
|
|
|
block.chunks.outro.push(outro_block);
|
|
|
|
|
|
|
|
|
|
|
|
block.chunks.destroy.push(b`if (detaching && ${names.outro}) ${names.outro}.end();`);
|
|
|
|
block.chunks.destroy.push(b`if (detaching && ${outro_name}) ${outro_name}.end();`);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if ((intro && intro.expression && intro.expression.dependencies.size) || (outro && outro.expression && outro.expression.dependencies.size)) {
|
|
|
|
if ((intro && intro.expression && intro.expression.dependencies.size) || (outro && outro.expression && outro.expression.dependencies.size)) {
|
|
|
|
block.maintain_context = true;
|
|
|
|
block.maintain_context = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return names;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
add_animation(block: Block) {
|
|
|
|
add_animation(block: Block) {
|
|
|
|
|