msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

use transition_in and transition_out helpers

Browse Source
pull/3046/head
Rich Harris 6 years ago
parent 79f7236c75
commit 6a2fc68ade
21 changed files with 122 additions and 110 deletions
Show Stats Download Patch File Download Diff File

4
src/compiler/compile/render-dom/wrappers/AwaitBlock.ts
Unescape View File

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

41
src/compiler/compile/render-dom/wrappers/EachBlock.ts
Unescape View File

@ -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]);`}
} 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]);`}
${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]);`}
${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, 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]);`
);
}

27
src/compiler/compile/render-dom/wrappers/IfBlock.ts
Unescape View File

@ -161,7 +161,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);
}
@ -169,7 +169,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});`);
}
}
@ -182,7 +182,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) {
@ -239,7 +239,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});
}
`;
@ -327,11 +327,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, 1, () => {
${if_blocks}[${previous_block_index}] = null;
});
${name}.o(1);
@check_outros();
`;
@ -341,7 +339,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});
`;
@ -420,11 +418,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});
}
`
@ -432,10 +430,10 @@ 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);`}
}
`;
@ -449,12 +447,9 @@ export default class IfBlockWrapper extends Wrapper {
} else if (${name} && !${outroing}) {
${outroing} = true;
@group_outros();
@on_outro(() => {
${name}.d(1);
@transition_out(${name}, 1, 1, () => {
${name} = null;
});
${name}.o(1);
@check_outros();
}
`);

15
src/compiler/compile/render-dom/wrappers/InlineComponent/index.ts
Unescape View File

@ -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, 1, () => {
@destroy(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,7 +457,7 @@ export default class InlineComponentWrapper extends Wrapper {
}
block.builders.outro.add_line(
`if (${name}) ${name}.$$.fragment.o(#local);`
`@transition_out(${name}.$$.fragment, #local);`
);
block.builders.destroy.add_line(`if (${name}) ${name}.$destroy(${parent_node ? '' : 'detaching'});`);
@ -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) {
@ -505,7 +504,7 @@ export default class InlineComponentWrapper extends Wrapper {
`);
block.builders.outro.add_line(
`${name}.$$.fragment.o(#local);`
`@transition_out(${name}.$$.fragment, 0, #local);`
);
}
}

4
src/compiler/compile/render-dom/wrappers/Slot.ts
Unescape View File

@ -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} && ${slot}.i, #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(' || ');

12
src/runtime/internal/Component.ts
Unescape View File

@ -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,9 @@ export function mount_component(component, target, anchor) {
after_render.forEach(add_render_callback);
}
function destroy(component, detaching) {
export function destroy(component) {
if (component.$$) {
run_all(component.$$.on_destroy);
component.$$.fragment.d(detaching);
// TODO null out other refs, including component.$$ (but need to
// preserve final state?)
@ -123,7 +123,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 +153,8 @@ if (typeof HTMLElement !== 'undefined') {
}
$destroy() {
destroy(this, true);
this.$$.fragment.d(1);
destroy(this);
this.$destroy = noop;
}
@ -178,7 +179,8 @@ export class SvelteComponent {
$$: T$$;
$destroy() {
destroy(this, true);
this.$$.fragment.d(1);
destroy(this);
this.$destroy = noop;
}

8
src/runtime/internal/await-block.ts
Unescape View File

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

8
src/runtime/internal/keyed-each.ts
Unescape View File

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

24
src/runtime/internal/transitions.ts
Unescape View File

@ -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,28 @@ 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, detaching: 0 | 1, local: 0 | 1, callback) {
if (block && block.o) {
if (outroing.has(block)) return;
outroing.add(block);
outros.callbacks.push(() => {
outroing.delete(block);
block.d(detaching);
if (callback) callback();
});
block.o(local);
}
}
type TransitionFn = (node: Element, params: any) => TransitionConfig;
export function create_in_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any) {

8
test/js/samples/component-static-array/expected.js
Unescape View File

@ -4,7 +4,9 @@ import {
init,
mount_component,
noop,
safe_not_equal
safe_not_equal,
transition_in,
transition_out
} from "svelte/internal";
function create_fragment(ctx) {
@ -26,13 +28,13 @@ 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, 0, local);
current = false;
},

8
test/js/samples/component-static-immutable/expected.js
Unescape View File

@ -4,7 +4,9 @@ import {
init,
mount_component,
noop,
not_equal
not_equal,
transition_in,
transition_out
} from "svelte/internal";
function create_fragment(ctx) {
@ -26,13 +28,13 @@ 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, 0, local);
current = false;
},

8
test/js/samples/component-static-immutable2/expected.js
Unescape View File

@ -4,7 +4,9 @@ import {
init,
mount_component,
noop,
not_equal
not_equal,
transition_in,
transition_out
} from "svelte/internal";
function create_fragment(ctx) {
@ -26,13 +28,13 @@ 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, 0, local);
current = false;
},

8
test/js/samples/component-static/expected.js
Unescape View File

@ -4,7 +4,9 @@ import {
init,
mount_component,
noop,
safe_not_equal
safe_not_equal,
transition_in,
transition_out
} from "svelte/internal";
function create_fragment(ctx) {
@ -26,13 +28,13 @@ 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, 0, local);
current = false;
},

2
test/js/samples/debug-empty/expected.js
Unescape View File

@ -53,7 +53,7 @@ function create_fragment(ctx) {
i: noop,
o: noop,
d: function destroy(detaching) {
d: function destroy_1(detaching) {
if (detaching) {
detach(h1);
detach(t3);

4
test/js/samples/debug-foo-bar-baz-things/expected.js
Unescape View File

@ -59,7 +59,7 @@ function create_each_block(ctx) {
}
},
d: function destroy(detaching) {
d: function destroy_1(detaching) {
if (detaching) {
detach(span);
detach(t1);
@ -137,7 +137,7 @@ function create_fragment(ctx) {
i: noop,
o: noop,
d: function destroy(detaching) {
d: function destroy_1(detaching) {
destroy_each(each_blocks, detaching);
if (detaching) {

4
test/js/samples/debug-foo/expected.js
Unescape View File

@ -59,7 +59,7 @@ function create_each_block(ctx) {
}
},
d: function destroy(detaching) {
d: function destroy_1(detaching) {
if (detaching) {
detach(span);
detach(t1);
@ -137,7 +137,7 @@ function create_fragment(ctx) {
i: noop,
o: noop,
d: function destroy(detaching) {
d: function destroy_1(detaching) {
destroy_each(each_blocks, detaching);
if (detaching) {

2
test/js/samples/dev-warning-missing-data-computed/expected.js
Unescape View File

@ -52,7 +52,7 @@ function create_fragment(ctx) {
i: noop,
o: noop,
d: function destroy(detaching) {
d: function destroy_1(detaching) {
if (detaching) {
detach(p);
}

8
test/js/samples/dynamic-import/expected.js
Unescape View File

@ -4,7 +4,9 @@ import {
init,
mount_component,
noop,
safe_not_equal
safe_not_equal,
transition_in,
transition_out
} from "svelte/internal";
import LazyLoad from "./LazyLoad.svelte";
@ -27,13 +29,13 @@ 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, 0, local);
current = false;
},

12
test/js/samples/non-imported-component/expected.js
Unescape View File

@ -7,7 +7,9 @@ import {
mount_component,
noop,
safe_not_equal,
space
space,
transition_in,
transition_out
} from "svelte/internal";
import Imported from "Imported.svelte";
@ -36,16 +38,16 @@ 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, 0, local);
transition_out(nonimported.$$.fragment, 0, local);
current = false;
},

7
test/js/samples/transition-local/expected.js
Unescape View File

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

18
test/js/samples/transition-repeated-outro/expected.js
Unescape View File

@ -9,8 +9,9 @@ import {
group_outros,
init,
insert,
on_outro,
safe_not_equal
safe_not_equal,
transition_in,
transition_out
} from "svelte/internal";
import { fade } from "svelte/transition";
@ -74,32 +75,29 @@ function create_fragment(ctx) {
if (!if_block) {
if_block = create_if_block(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 && !outroing_if_block) {
outroing_if_block = true;
group_outros();
on_outro(() => {
if_block.d(1);
transition_out(if_block, 1, 1, () => {
if_block = null;
});
if_block.o(1);
check_outros();
}
},
i(local) {
if (current) return;
if (if_block) if_block.i();
transition_in(if_block);
current = true;
},
o(local) {
if (if_block) if_block.o();
transition_out(if_block);
current = false;
},

Write Preview
Loading…
Cancel
Save