diff --git a/src/compile/render-dom/Block.ts b/src/compile/render-dom/Block.ts index f115201b62..954110b368 100644 --- a/src/compile/render-dom/Block.ts +++ b/src/compile/render-dom/Block.ts @@ -174,13 +174,15 @@ export default class Block { } } - addIntro() { + addIntro(local?: boolean) { this.hasIntros = this.hasIntroMethod = this.renderer.hasIntroTransitions = true; + if (!local && this.parent) this.parent.addIntro(); } - addOutro() { + addOutro(local?: boolean) { this.hasOutros = this.hasOutroMethod = this.renderer.hasOutroTransitions = true; this.outros += 1; + if (!local && this.parent) this.parent.addOutro(); } addAnimation() { diff --git a/src/compile/render-dom/wrappers/Element/index.ts b/src/compile/render-dom/wrappers/Element/index.ts index d5433f176a..c61e81c69c 100644 --- a/src/compile/render-dom/wrappers/Element/index.ts +++ b/src/compile/render-dom/wrappers/Element/index.ts @@ -162,8 +162,8 @@ export default class ElementWrapper extends Wrapper { this.bindings = this.node.bindings.map(binding => new Binding(block, binding, this)); if (node.intro || node.outro) { - if (node.intro) block.addIntro(); - if (node.outro) block.addOutro(); + if (node.intro) block.addIntro(node.intro.is_local); + if (node.outro) block.addOutro(node.outro.is_local); } if (node.animation) { diff --git a/src/compile/render-dom/wrappers/IfBlock.ts b/src/compile/render-dom/wrappers/IfBlock.ts index 58ff2e7744..46a9357215 100644 --- a/src/compile/render-dom/wrappers/IfBlock.ts +++ b/src/compile/render-dom/wrappers/IfBlock.ts @@ -125,9 +125,6 @@ export default class IfBlockWrapper extends Wrapper { createBranches(this.node); - if (hasIntros) block.addIntro(); - if (hasOutros) block.addOutro(); - blocks.forEach(block => { block.hasUpdateMethod = isDynamic; block.hasIntroMethod = hasIntros; diff --git a/test/js/samples/transition-local/expected.js b/test/js/samples/transition-local/expected.js new file mode 100644 index 0000000000..1e96247f19 --- /dev/null +++ b/test/js/samples/transition-local/expected.js @@ -0,0 +1,162 @@ +/* generated by Svelte vX.Y.Z */ +import { SvelteComponent as SvelteComponent_1, add_render_callback, createComment, createElement, create_in_transition, detachNode, flush, init, insert, noop, safe_not_equal } from "svelte/internal"; + +// (8:0) {#if x} +function create_if_block(ctx) { + var if_block_anchor; + + var if_block = (ctx.y) && create_if_block_1(ctx); + + return { + c() { + if (if_block) if_block.c(); + if_block_anchor = createComment(); + }, + + m(target, anchor) { + if (if_block) if_block.m(target, anchor); + insert(target, if_block_anchor, anchor); + }, + + p(changed, ctx) { + if (ctx.y) { + if (!if_block) { + if_block = create_if_block_1(ctx); + if_block.c(); + if_block.m(if_block_anchor.parentNode, if_block_anchor); + } + if_block.i(1); + } else if (if_block) { + if_block.d(1); + if_block = null; + } + }, + + d(detach) { + if (if_block) if_block.d(detach); + + if (detach) { + detachNode(if_block_anchor); + } + } + }; +} + +// (9:1) {#if y} +function create_if_block_1(ctx) { + var div, div_intro; + + return { + c() { + div = createElement("div"); + div.textContent = "..."; + }, + + m(target, anchor) { + insert(target, div, anchor); + }, + + i(local) { + if (local) { + if (!div_intro) { + add_render_callback(() => { + div_intro = create_in_transition(div, foo, {}); + div_intro.start(); + }); + } + } + }, + + o: noop, + + d(detach) { + if (detach) { + detachNode(div); + } + } + }; +} + +function create_fragment(ctx) { + var if_block_anchor; + + var if_block = (ctx.x) && create_if_block(ctx); + + return { + c() { + if (if_block) if_block.c(); + if_block_anchor = createComment(); + }, + + m(target, anchor) { + if (if_block) if_block.m(target, anchor); + insert(target, if_block_anchor, anchor); + }, + + p(changed, ctx) { + if (ctx.x) { + if (if_block) { + if_block.p(changed, ctx); + } else { + if_block = create_if_block(ctx); + if_block.c(); + if_block.m(if_block_anchor.parentNode, if_block_anchor); + } + } else if (if_block) { + if_block.d(1); + if_block = null; + } + }, + + i: noop, + o: noop, + + d(detach) { + if (if_block) if_block.d(detach); + + if (detach) { + detachNode(if_block_anchor); + } + } + }; +} + +function foo() {} + +function instance($$self, $$props, $$invalidate) { + let { x, y } = $$props; + + $$self.$set = $$props => { + if ('x' in $$props) $$invalidate('x', x = $$props.x); + if ('y' in $$props) $$invalidate('y', y = $$props.y); + }; + + return { x, y }; +} + +class SvelteComponent extends SvelteComponent_1 { + constructor(options) { + super(); + init(this, options, instance, create_fragment, safe_not_equal); + } + + get x() { + return this.$$.ctx.x; + } + + set x(x) { + this.$set({ x }); + flush(); + } + + get y() { + return this.$$.ctx.y; + } + + set y(y) { + this.$set({ y }); + flush(); + } +} + +export default SvelteComponent; \ No newline at end of file diff --git a/test/js/samples/transition-local/input.html b/test/js/samples/transition-local/input.html new file mode 100644 index 0000000000..3f87627c62 --- /dev/null +++ b/test/js/samples/transition-local/input.html @@ -0,0 +1,12 @@ + + +{#if x} + {#if y} +