From c30ae9a896654a8ce26e10daf6a84af00dbb4887 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sun, 13 Jan 2019 14:19:01 -0500 Subject: [PATCH] Overhaul transitions - fixes #1906 --- src/compile/render-dom/Block.ts | 21 +- src/compile/render-dom/wrappers/AwaitBlock.ts | 11 +- src/compile/render-dom/wrappers/EachBlock.ts | 103 +++--- .../render-dom/wrappers/Element/index.ts | 53 +-- src/compile/render-dom/wrappers/IfBlock.ts | 106 +++--- .../wrappers/InlineComponent/index.ts | 15 +- src/internal/Component.js | 6 +- src/internal/animations.js | 13 +- src/internal/await-block.js | 3 +- src/internal/keyed-each.js | 11 +- src/internal/style_manager.js | 27 +- src/internal/transitions.js | 305 +++++++++++++----- src/internal/utils.js | 7 - .../action-custom-event-handler/expected.js | 14 +- test/js/samples/action/expected.js | 14 +- test/js/samples/bind-width-height/expected.js | 14 +- .../expected.js | 13 +- .../component-static-array/expected.js | 13 +- .../component-static-immutable/expected.js | 13 +- .../component-static-immutable2/expected.js | 13 +- test/js/samples/component-static/expected.js | 13 +- .../samples/computed-collapsed-if/expected.js | 6 +- test/js/samples/css-media-query/expected.js | 14 +- .../css-shadow-dom-keyframes/expected.js | 14 +- test/js/samples/debug-empty/expected.js | 13 +- .../debug-foo-bar-baz-things/expected.js | 13 +- test/js/samples/debug-foo/expected.js | 13 +- .../samples/deconflict-builtins/expected.js | 13 +- .../js/samples/deconflict-globals/expected.js | 6 +- .../expected.js | 13 +- test/js/samples/do-use-dataset/expected.js | 13 +- .../dont-use-dataset-in-legacy/expected.js | 13 +- .../dont-use-dataset-in-svg/expected.js | 13 +- test/js/samples/dynamic-import/expected.js | 13 +- .../each-block-changed-check/expected.js | 13 +- .../each-block-keyed-animated/expected.js | 27 +- test/js/samples/each-block-keyed/expected.js | 23 +- .../event-handler-no-passive/expected.js | 14 +- test/js/samples/event-modifiers/expected.js | 14 +- .../js/samples/head-no-whitespace/expected.js | 14 +- test/js/samples/hoisted-const/expected.js | 14 +- .../js/samples/if-block-no-update/expected.js | 19 +- test/js/samples/if-block-simple/expected.js | 13 +- .../expected.js | 13 +- .../inline-style-optimized-url/expected.js | 13 +- .../inline-style-optimized/expected.js | 13 +- .../inline-style-unoptimized/expected.js | 13 +- test/js/samples/input-files/expected.js | 14 +- test/js/samples/input-range/expected.js | 14 +- .../input-without-blowback-guard/expected.js | 14 +- .../expected.js | 13 +- .../expected.js | 13 +- .../expected.js | 13 +- .../expected.js | 13 +- test/js/samples/legacy-input-type/expected.js | 14 +- test/js/samples/media-bindings/expected.js | 14 +- .../non-imported-component/expected.js | 19 +- .../samples/select-dynamic-value/expected.js | 14 +- test/js/samples/setup-method/expected.js | 6 +- test/js/samples/svg-title/expected.js | 14 +- test/js/samples/title/expected.js | 6 +- .../use-elements-as-anchors/expected.js | 13 +- .../samples/window-binding-scroll/expected.js | 13 +- test/runtime/index.js | 1 - .../_config.js | 2 +- .../samples/transition-css-delay/_config.js | 10 - .../samples/transition-css-delay/main.html | 17 - .../transition-css-duration/_config.js | 2 + .../transition-css-in-out-in/_config.js | 20 ++ .../transition-css-in-out-in/main.html | 25 ++ .../_config.js | 2 +- .../transition-js-aborted-outro/_config.js | 2 +- .../transition-js-await-block/_config.js | 2 +- .../_config.js | 2 +- .../_config.js | 4 +- .../_config.js | 2 +- .../_config.js | 2 +- 77 files changed, 678 insertions(+), 770 deletions(-) delete mode 100644 test/runtime/samples/transition-css-delay/_config.js delete mode 100644 test/runtime/samples/transition-css-delay/main.html create mode 100644 test/runtime/samples/transition-css-in-out-in/_config.js create mode 100644 test/runtime/samples/transition-css-in-out-in/main.html diff --git a/src/compile/render-dom/Block.ts b/src/compile/render-dom/Block.ts index bee2072ef1..5fdd725a98 100644 --- a/src/compile/render-dom/Block.ts +++ b/src/compile/render-dom/Block.ts @@ -218,11 +218,11 @@ export default class Block { getContents(localKey?: string) { const { dev } = this.renderer.options; - if (this.hasIntroMethod || this.hasOutroMethod) { + if (this.hasOutros) { this.addVariable('#current'); - if (!this.builders.mount.isEmpty()) { - this.builders.mount.addLine(`#current = true;`); + if (!this.builders.intro.isEmpty()) { + this.builders.intro.addLine(`#current = true;`); } if (!this.builders.outro.isEmpty()) { @@ -347,27 +347,22 @@ export default class Block { } if (this.hasIntroMethod || this.hasOutroMethod) { - if (this.builders.mount.isEmpty()) { + if (this.builders.intro.isEmpty()) { properties.addLine(`i: @noop,`); } else { properties.addBlock(deindent` - ${dev ? 'i: function intro' : 'i'}(#target, anchor) { - if (#current) return; + ${dev ? 'i: function intro' : 'i'}() { + ${this.hasOutros && `if (#current) return;`} ${this.builders.intro} - this.m(#target, anchor); }, `); } if (this.builders.outro.isEmpty()) { - properties.addLine(`o: @run,`); + properties.addLine(`o: @noop,`); } else { properties.addBlock(deindent` - ${dev ? 'o: function outro' : 'o'}(#outrocallback) { - if (!#current) return; - - ${this.outros > 1 && `#outrocallback = @callAfter(#outrocallback, ${this.outros});`} - + ${dev ? 'o: function outro' : 'o'}() { ${this.builders.outro} }, `); diff --git a/src/compile/render-dom/wrappers/AwaitBlock.ts b/src/compile/render-dom/wrappers/AwaitBlock.ts index ca1fdcc64e..b987dd7fa9 100644 --- a/src/compile/render-dom/wrappers/AwaitBlock.ts +++ b/src/compile/render-dom/wrappers/AwaitBlock.ts @@ -172,11 +172,15 @@ export default class AwaitBlockWrapper extends Wrapper { const hasTransitions = this.pending.block.hasIntroMethod || this.pending.block.hasOutroMethod; block.builders.mount.addBlock(deindent` - ${info}.block.${hasTransitions ? 'i' : 'm'}(${initialMountNode}, ${info}.anchor = ${anchorNode}); + ${info}.block.m(${initialMountNode}, ${info}.anchor = ${anchorNode}); ${info}.mount = () => ${updateMountNode}; ${info}.anchor = ${anchor}; `); + if (hasTransitions) { + block.builders.intro.addLine(`${info}.block.i();`); + } + const conditions = []; if (this.node.expression.dependencies.size > 0) { conditions.push( @@ -208,13 +212,10 @@ export default class AwaitBlockWrapper extends Wrapper { } if (this.pending.block.hasOutroMethod) { - const countdown = block.getUniqueName('countdown'); block.builders.outro.addBlock(deindent` - const ${countdown} = @callAfter(#outrocallback, 3); for (let #i = 0; #i < 3; #i += 1) { const block = ${info}.blocks[#i]; - if (block) block.o(${countdown}); - else ${countdown}(); + if (block) block.o(); } `); } diff --git a/src/compile/render-dom/wrappers/EachBlock.ts b/src/compile/render-dom/wrappers/EachBlock.ts index 4f56a4c6c9..c713ea5f19 100644 --- a/src/compile/render-dom/wrappers/EachBlock.ts +++ b/src/compile/render-dom/wrappers/EachBlock.ts @@ -60,7 +60,6 @@ export default class EachBlockWrapper extends Wrapper { get_each_context: string; iterations: string; length: string; - mountOrIntro: string; } contextProps: string[]; @@ -102,7 +101,6 @@ export default class EachBlockWrapper extends Wrapper { let c = this.node.start + 2; while (renderer.component.source[c] !== 'e') c += 1; renderer.component.code.overwrite(c, c + 4, 'length'); - const length = `[✂${c}-${c+4}✂]`; this.vars = { create_each_block: this.block.name, @@ -112,8 +110,7 @@ export default class EachBlockWrapper extends Wrapper { length: `[✂${c}-${c+4}✂]`, // filled out later - anchor: null, - mountOrIntro: null + anchor: null }; node.contexts.forEach(prop => { @@ -173,8 +170,6 @@ export default class EachBlockWrapper extends Wrapper { ? block.getUniqueName(`${this.var}_anchor`) : (this.next && this.next.var) || 'null'; - this.vars.mountOrIntro = (this.block.hasIntroMethod || this.block.hasOutroMethod) ? 'i' : 'm'; - this.contextProps = this.node.contexts.map(prop => `child_ctx.${prop.key.name} = list[i]${prop.tail};`); if (this.hasBinding) this.contextProps.push(`child_ctx.${this.vars.each_block_value} = list;`); @@ -198,6 +193,12 @@ export default class EachBlockWrapper extends Wrapper { this.renderUnkeyed(block, parentNode, parentNodes, snippet); } + if (this.block.hasIntroMethod || this.block.hasOutroMethod) { + block.builders.intro.addBlock(deindent` + for (var #i = 0; #i < ${this.vars.each_block_value}.${this.vars.length}; #i += 1) ${this.vars.iterations}[#i].i(); + `); + } + if (needsAnchor) { block.addElement( this.vars.anchor, @@ -209,7 +210,6 @@ export default class EachBlockWrapper extends Wrapper { if (this.else) { const each_block_else = component.getUniqueName(`${this.var}_else`); - const mountOrIntro = (this.else.block.hasIntroMethod || this.else.block.hasOutroMethod) ? 'i' : 'm'; block.builders.init.addLine(`var ${each_block_else} = null;`); @@ -223,7 +223,7 @@ export default class EachBlockWrapper extends Wrapper { block.builders.mount.addBlock(deindent` if (${each_block_else}) { - ${each_block_else}.${mountOrIntro}(${parentNode || '#target'}, null); + ${each_block_else}.m(${parentNode || '#target'}, null); } `); @@ -236,7 +236,7 @@ export default class EachBlockWrapper extends Wrapper { } else if (!${this.vars.each_block_value}.${this.vars.length}) { ${each_block_else} = ${this.else.block.name}($$, ctx); ${each_block_else}.c(); - ${each_block_else}.${mountOrIntro}(${initialMountNode}, ${this.vars.anchor}); + ${each_block_else}.m(${initialMountNode}, ${this.vars.anchor}); } else if (${each_block_else}) { ${each_block_else}.d(1); ${each_block_else} = null; @@ -252,7 +252,7 @@ export default class EachBlockWrapper extends Wrapper { } else if (!${each_block_else}) { ${each_block_else} = ${this.else.block.name}($$, ctx); ${each_block_else}.c(); - ${each_block_else}.${mountOrIntro}(${initialMountNode}, ${this.vars.anchor}); + ${each_block_else}.m(${initialMountNode}, ${this.vars.anchor}); } `); } @@ -279,14 +279,13 @@ export default class EachBlockWrapper extends Wrapper { create_each_block, length, anchor, - mountOrIntro, + iterations } = this.vars; const get_key = block.getUniqueName('get_key'); - const blocks = block.getUniqueName(`${this.var}_blocks`); const lookup = block.getUniqueName(`${this.var}_lookup`); - block.addVariable(blocks, '[]'); + block.addVariable(iterations, '[]'); block.addVariable(lookup, `@blankObject()`); if (this.fragment.nodes[0].isDomNode()) { @@ -307,7 +306,7 @@ export default class EachBlockWrapper extends Wrapper { for (var #i = 0; #i < ${this.vars.each_block_value}.${length}; #i += 1) { let child_ctx = ${this.vars.get_each_context}(ctx, ${this.vars.each_block_value}, #i); let key = ${get_key}(child_ctx); - ${blocks}[#i] = ${lookup}[key] = ${create_each_block}($$, key, child_ctx); + ${iterations}[#i] = ${lookup}[key] = ${create_each_block}($$, key, child_ctx); } `); @@ -316,17 +315,17 @@ export default class EachBlockWrapper extends Wrapper { const anchorNode = parentNode ? 'null' : 'anchor'; block.builders.create.addBlock(deindent` - for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].c(); + for (#i = 0; #i < ${iterations}.length; #i += 1) ${iterations}[#i].c(); `); if (parentNodes && this.renderer.options.hydratable) { block.builders.claim.addBlock(deindent` - for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].l(${parentNodes}); + for (#i = 0; #i < ${iterations}.length; #i += 1) ${iterations}[#i].l(${parentNodes}); `); } block.builders.mount.addBlock(deindent` - for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].${mountOrIntro}(${initialMountNode}, ${anchorNode}); + for (#i = 0; #i < ${iterations}.length; #i += 1) ${iterations}[#i].m(${initialMountNode}, ${anchorNode}); `); const dynamic = this.block.hasUpdateMethod; @@ -342,21 +341,20 @@ export default class EachBlockWrapper extends Wrapper { const ${this.vars.each_block_value} = ${snippet}; ${this.block.hasOutros && `@group_outros();`} - ${this.node.hasAnimation && `for (let #i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].r();`} - ${blocks} = @updateKeyedEach(${blocks}, $$, changed, ${get_key}, ${dynamic ? '1' : '0'}, ctx, ${this.vars.each_block_value}, ${lookup}, ${updateMountNode}, ${destroy}, ${create_each_block}, "${mountOrIntro}", ${anchor}, ${this.vars.get_each_context}); - ${this.node.hasAnimation && `for (let #i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].a();`} + ${this.node.hasAnimation && `for (let #i = 0; #i < ${iterations}.length; #i += 1) ${iterations}[#i].r();`} + ${iterations} = @updateKeyedEach(${iterations}, $$, changed, ${get_key}, ${dynamic ? '1' : '0'}, ctx, ${this.vars.each_block_value}, ${lookup}, ${updateMountNode}, ${destroy}, ${create_each_block}, ${anchor}, ${this.vars.get_each_context}); + ${this.node.hasAnimation && `for (let #i = 0; #i < ${iterations}.length; #i += 1) ${iterations}[#i].a();`} + ${this.block.hasOutros && `@check_outros();`} `); if (this.block.hasOutros) { - const countdown = block.getUniqueName('countdown'); block.builders.outro.addBlock(deindent` - const ${countdown} = @callAfter(#outrocallback, ${blocks}.length); - for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].o(${countdown}); + for (#i = 0; #i < ${iterations}.length; #i += 1) ${iterations}[#i].o(); `); } block.builders.destroy.addBlock(deindent` - for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].d(${parentNode ? '' : 'detach'}); + for (#i = 0; #i < ${iterations}.length; #i += 1) ${iterations}[#i].d(${parentNode ? '' : 'detach'}); `); } @@ -370,8 +368,7 @@ export default class EachBlockWrapper extends Wrapper { create_each_block, length, iterations, - anchor, - mountOrIntro, + anchor } = this.vars; block.builders.init.addBlock(deindent` @@ -402,7 +399,7 @@ export default class EachBlockWrapper extends Wrapper { block.builders.mount.addBlock(deindent` for (var #i = 0; #i < ${iterations}.length; #i += 1) { - ${iterations}[#i].${mountOrIntro}(${initialMountNode}, ${anchorNode}); + ${iterations}[#i].m(${initialMountNode}, ${anchorNode}); } `); @@ -415,15 +412,16 @@ export default class EachBlockWrapper extends Wrapper { const outroBlock = this.block.hasOutros && block.getUniqueName('outroBlock') if (outroBlock) { block.builders.init.addBlock(deindent` - function ${outroBlock}(i, detach, fn) { + function ${outroBlock}(i, detach) { if (${iterations}[i]) { - ${iterations}[i].o(() => { - if (detach) { + if (detach) { + @on_outro(() => { ${iterations}[i].d(detach); ${iterations}[i] = null; - } - if (fn) fn(); - }); + }); + } + + ${iterations}[i].o(); } } `); @@ -433,31 +431,25 @@ export default class EachBlockWrapper extends Wrapper { .map(dependency => `changed.${dependency}`) .join(' || '); + const has_transitions = !!(this.block.hasIntroMethod || this.block.hasOutroMethod); + if (condition !== '') { const forLoopBody = this.block.hasUpdateMethod - ? (this.block.hasIntros || this.block.hasOutros) - ? deindent` - if (${iterations}[#i]) { - ${iterations}[#i].p(changed, child_ctx); - } else { - ${iterations}[#i] = ${create_each_block}($$, child_ctx); - ${iterations}[#i].c(); - } - ${iterations}[#i].i(${updateMountNode}, ${anchor}); - ` - : deindent` - if (${iterations}[#i]) { - ${iterations}[#i].p(changed, child_ctx); - } else { - ${iterations}[#i] = ${create_each_block}($$, child_ctx); - ${iterations}[#i].c(); - ${iterations}[#i].m(${updateMountNode}, ${anchor}); - } - ` + ? deindent` + if (${iterations}[#i]) { + ${iterations}[#i].p(changed, child_ctx); + } else { + ${iterations}[#i] = ${create_each_block}($$, child_ctx); + ${iterations}[#i].c(); + ${iterations}[#i].m(${updateMountNode}, ${anchor}); + } + ${has_transitions && `${iterations}[#i].i();`} + ` : deindent` ${iterations}[#i] = ${create_each_block}($$, child_ctx); ${iterations}[#i].c(); - ${iterations}[#i].${mountOrIntro}(${updateMountNode}, ${anchor}); + ${iterations}[#i].m(${updateMountNode}, ${anchor}); + ${has_transitions && `${iterations}[#i].i();`} `; const start = this.block.hasUpdateMethod ? '0' : `${iterations}.length`; @@ -468,6 +460,7 @@ export default class EachBlockWrapper extends Wrapper { destroy = deindent` @group_outros(); for (; #i < ${iterations}.length; #i += 1) ${outroBlock}(#i, 1); + @check_outros(); `; } else { destroy = deindent` @@ -498,11 +491,9 @@ export default class EachBlockWrapper extends Wrapper { } if (outroBlock) { - const countdown = block.getUniqueName('countdown'); block.builders.outro.addBlock(deindent` ${iterations} = ${iterations}.filter(Boolean); - const ${countdown} = @callAfter(#outrocallback, ${iterations}.length); - for (let #i = 0; #i < ${iterations}.length; #i += 1) ${outroBlock}(#i, 0, ${countdown});` + for (let #i = 0; #i < ${iterations}.length; #i += 1) ${outroBlock}(#i, 0);` ); } diff --git a/src/compile/render-dom/wrappers/Element/index.ts b/src/compile/render-dom/wrappers/Element/index.ts index abfef21bcc..be8d355fa4 100644 --- a/src/compile/render-dom/wrappers/Element/index.ts +++ b/src/compile/render-dom/wrappers/Element/index.ts @@ -582,6 +582,7 @@ export default class ElementWrapper extends Wrapper { const { component } = this.renderer; if (intro === outro) { + // bidirectional transition const name = block.getUniqueName(`${this.var}_transition`); const snippet = intro.expression ? intro.expression.render(block) @@ -591,25 +592,22 @@ export default class ElementWrapper extends Wrapper { const fn = component.qualify(intro.name); - block.builders.intro.addConditional(`@intros.enabled`, deindent` - if (${name}) ${name}.invalidate(); - + block.builders.intro.addBlock(deindent` @add_render_callback(() => { - if (!${name}) ${name} = @create_transition(${this.var}, ${fn}, ${snippet}, true); + if (!${name}) ${name} = @create_bidirectional_transition(${this.var}, ${fn}, ${snippet}, true); ${name}.run(1); }); `); block.builders.outro.addBlock(deindent` - if (!${name}) ${name} = @create_transition(${this.var}, ${fn}, ${snippet}, false); - ${name}.run(0, () => { - #outrocallback(); - ${name} = null; - }); + if (!${name}) ${name} = @create_bidirectional_transition(${this.var}, ${fn}, ${snippet}, false); + ${name}.run(0); `); - block.builders.destroy.addConditional('detach', `if (${name}) ${name}.abort();`); - } else { + block.builders.destroy.addConditional('detach', `if (${name}) ${name}.end();`); + } + + else { const introName = intro && block.getUniqueName(`${this.var}_intro`); const outroName = outro && block.getUniqueName(`${this.var}_outro`); @@ -619,21 +617,27 @@ export default class ElementWrapper extends Wrapper { ? intro.expression.render(block) : '{}'; - const fn = component.qualify(intro.name); // TODO add built-in transitions? + const fn = component.qualify(intro.name); if (outro) { block.builders.intro.addBlock(deindent` - if (${introName}) ${introName}.abort(1); - if (${outroName}) ${outroName}.abort(1); + @add_render_callback(() => { + if (!${introName}) ${introName} = @create_in_transition(${this.var}, ${fn}, ${snippet}); + ${introName}.start(); + }); `); - } - block.builders.intro.addConditional(`@intros.enabled`, deindent` - @add_render_callback(() => { - ${introName} = @create_transition(${this.var}, ${fn}, ${snippet}, true); - ${introName}.run(1); - }); - `); + block.builders.outro.addLine(`if (${introName}) ${introName}.invalidate()`); + } else { + block.builders.intro.addBlock(deindent` + if (!${introName}) { + @add_render_callback(() => { + ${introName} = @create_in_transition(${this.var}, ${fn}, ${snippet}); + ${introName}.start(); + }); + } + `); + } } if (outro) { @@ -645,17 +649,16 @@ export default class ElementWrapper extends Wrapper { const fn = component.qualify(outro.name); block.builders.intro.addBlock(deindent` - if (${outroName}) ${outroName}.abort(1); + if (${outroName}) ${outroName}.end(1); `); // TODO hide elements that have outro'd (unless they belong to a still-outroing // group) prior to their removal from the DOM block.builders.outro.addBlock(deindent` - ${outroName} = @create_transition(${this.var}, ${fn}, ${snippet}, false); - ${outroName}.run(0, #outrocallback); + ${outroName} = @create_out_transition(${this.var}, ${fn}, ${snippet}); `); - block.builders.destroy.addConditional('detach', `if (${outroName}) ${outroName}.abort();`); + block.builders.destroy.addConditional('detach', `if (${outroName}) ${outroName}.end();`); } } } diff --git a/src/compile/render-dom/wrappers/IfBlock.ts b/src/compile/render-dom/wrappers/IfBlock.ts index 9ed1acddf3..ab4c697881 100644 --- a/src/compile/render-dom/wrappers/IfBlock.ts +++ b/src/compile/render-dom/wrappers/IfBlock.ts @@ -153,18 +153,17 @@ export default class IfBlockWrapper extends Wrapper { const if_name = hasElse ? '' : `if (${name}) `; const dynamic = this.branches[0].block.hasUpdateMethod; // can use [0] as proxy for all, since they necessarily have the same value + const hasIntros = this.branches[0].block.hasIntroMethod; const hasOutros = this.branches[0].block.hasOutroMethod; + const has_transitions = hasIntros || hasOutros; - const vars = { name, anchor, if_name, hasElse }; + const vars = { name, anchor, if_name, hasElse, has_transitions }; if (this.node.else) { if (hasOutros) { this.renderCompoundWithOutros(block, parentNode, parentNodes, dynamic, vars); - block.builders.outro.addBlock(deindent` - if (${name}) ${name}.o(#outrocallback); - else #outrocallback(); - `); + block.builders.outro.addLine(`if (${name}) ${name}.o();`); } else { this.renderCompound(block, parentNode, parentNodes, dynamic, vars); } @@ -172,10 +171,7 @@ export default class IfBlockWrapper extends Wrapper { this.renderSimple(block, parentNode, parentNodes, dynamic, vars); if (hasOutros) { - block.builders.outro.addBlock(deindent` - if (${name}) ${name}.o(#outrocallback); - else #outrocallback(); - `); + block.builders.outro.addLine(`if (${name}) ${name}.o();`); } } @@ -187,6 +183,10 @@ export default class IfBlockWrapper extends Wrapper { ); } + if (hasIntros || hasOutros) { + block.builders.intro.addLine(`if (${name}) ${name}.i();`); + } + if (needsAnchor) { block.addElement( anchor, @@ -206,7 +206,7 @@ export default class IfBlockWrapper extends Wrapper { parentNode: string, parentNodes: string, dynamic, - { name, anchor, hasElse, if_name } + { name, anchor, hasElse, if_name, has_transitions } ) { const select_block_type = this.renderer.component.getUniqueName(`select_block_type`); const current_block_type = block.getUniqueName(`current_block_type`); @@ -225,12 +225,10 @@ export default class IfBlockWrapper extends Wrapper { var ${name} = ${current_block_type_and}${current_block_type}($$, ctx); `); - const mountOrIntro = this.branches[0].block.hasIntroMethod ? 'i' : 'm'; - const initialMountNode = parentNode || '#target'; const anchorNode = parentNode ? 'null' : 'anchor'; block.builders.mount.addLine( - `${if_name}${name}.${mountOrIntro}(${initialMountNode}, ${anchorNode});` + `${if_name}${name}.m(${initialMountNode}, ${anchorNode});` ); const updateMountNode = this.getUpdateMountNode(anchor); @@ -238,8 +236,11 @@ export default class IfBlockWrapper extends Wrapper { const changeBlock = deindent` ${if_name}${name}.d(1); ${name} = ${current_block_type_and}${current_block_type}($$, ctx); - ${if_name}${name}.c(); - ${if_name}${name}.${mountOrIntro}(${updateMountNode}, ${anchor}); + if (${name}) { + ${name}.c(); + ${name}.m(${updateMountNode}, ${anchor}); + ${has_transitions && `${name}.i();`} + } `; if (dynamic) { @@ -268,7 +269,7 @@ export default class IfBlockWrapper extends Wrapper { parentNode: string, parentNodes: string, dynamic, - { name, anchor, hasElse } + { name, anchor, hasElse, has_transitions } ) { const select_block_type = this.renderer.component.getUniqueName(`select_block_type`); const current_block_type_index = block.getUniqueName(`current_block_type_index`); @@ -311,22 +312,23 @@ export default class IfBlockWrapper extends Wrapper { `); } - const mountOrIntro = this.branches[0].block.hasIntroMethod ? 'i' : 'm'; const initialMountNode = parentNode || '#target'; const anchorNode = parentNode ? 'null' : 'anchor'; block.builders.mount.addLine( - `${if_current_block_type_index}${if_blocks}[${current_block_type_index}].${mountOrIntro}(${initialMountNode}, ${anchorNode});` + `${if_current_block_type_index}${if_blocks}[${current_block_type_index}].m(${initialMountNode}, ${anchorNode});` ); const updateMountNode = this.getUpdateMountNode(anchor); const destroyOldBlock = deindent` @group_outros(); - ${name}.o(function() { + @on_outro(() => { ${if_blocks}[${previous_block_index}].d(1); ${if_blocks}[${previous_block_index}] = null; }); + ${name}.o(); + @check_outros(); `; const createNewBlock = deindent` @@ -335,7 +337,8 @@ export default class IfBlockWrapper extends Wrapper { ${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}]($$, ctx); ${name}.c(); } - ${name}.${mountOrIntro}(${updateMountNode}, ${anchor}); + ${name}.m(${updateMountNode}, ${anchor}); + ${has_transitions && `${name}.i();`} `; const changeBlock = hasElse @@ -386,7 +389,7 @@ export default class IfBlockWrapper extends Wrapper { parentNode: string, parentNodes: string, dynamic, - { name, anchor, if_name } + { name, anchor, if_name, has_transitions } ) { const branch = this.branches[0]; @@ -394,62 +397,47 @@ export default class IfBlockWrapper extends Wrapper { var ${name} = (${branch.condition}) && ${branch.block.name}($$, ctx); `); - const mountOrIntro = branch.block.hasIntroMethod ? 'i' : 'm'; const initialMountNode = parentNode || '#target'; const anchorNode = parentNode ? 'null' : 'anchor'; block.builders.mount.addLine( - `if (${name}) ${name}.${mountOrIntro}(${initialMountNode}, ${anchorNode});` + `if (${name}) ${name}.m(${initialMountNode}, ${anchorNode});` ); const updateMountNode = this.getUpdateMountNode(anchor); const enter = dynamic - ? (branch.block.hasIntroMethod || branch.block.hasOutroMethod) - ? deindent` - if (${name}) { - ${name}.p(changed, ctx); - } else { - ${name} = ${branch.block.name}($$, ctx); - if (${name}) ${name}.c(); - } - - ${name}.i(${updateMountNode}, ${anchor}); - ` - : deindent` - if (${name}) { - ${name}.p(changed, ctx); - } else { - ${name} = ${branch.block.name}($$, ctx); - ${name}.c(); - ${name}.m(${updateMountNode}, ${anchor}); - } - ` - : (branch.block.hasIntroMethod || branch.block.hasOutroMethod) - ? deindent` - if (!${name}) { - ${name} = ${branch.block.name}($$, ctx); - ${name}.c(); - } - ${name}.i(${updateMountNode}, ${anchor}); - ` - : deindent` - if (!${name}) { - ${name} = ${branch.block.name}($$, ctx); - ${name}.c(); - ${name}.m(${updateMountNode}, ${anchor}); - } - `; + ? deindent` + if (${name}) { + ${name}.p(changed, ctx); + } else { + ${name} = ${branch.block.name}($$, ctx); + ${name}.c(); + ${name}.m(${updateMountNode}, ${anchor}); + } + ${has_transitions && `${name}.i();`} + ` + : deindent` + if (!${name}) { + ${name} = ${branch.block.name}($$, ctx); + ${name}.c(); + ${name}.m(${updateMountNode}, ${anchor}); + } + ${has_transitions && `${name}.i();`} + `; // no `p()` here — we don't want to update outroing nodes, // as that will typically result in glitching const exit = branch.block.hasOutroMethod ? deindent` @group_outros(); - ${name}.o(function() { + @on_outro(() => { ${name}.d(1); ${name} = null; }); + + ${name}.o(); + @check_outros(); ` : deindent` ${name}.d(1); diff --git a/src/compile/render-dom/wrappers/InlineComponent/index.ts b/src/compile/render-dom/wrappers/InlineComponent/index.ts index f156ded8d5..435f03e3b4 100644 --- a/src/compile/render-dom/wrappers/InlineComponent/index.ts +++ b/src/compile/render-dom/wrappers/InlineComponent/index.ts @@ -364,9 +364,11 @@ export default class InlineComponentWrapper extends Wrapper { if (${name}) { @group_outros(); const old_component = ${name}; - old_component.$$.fragment.o(() => { + @on_outro(() => { old_component.$destroy(); }); + old_component.$$.fragment.o(); + @check_outros(); } if (${switch_value}) { @@ -378,6 +380,7 @@ export default class InlineComponentWrapper extends Wrapper { ${this.fragment && this.fragment.nodes.map(child => child.remount(name))} ${name}.$$.fragment.c(); @mount_component(${name}, ${updateMountNode}, ${anchor}); + ${name}.$$.fragment.i(); ${this.node.handlers.map(handler => deindent` ${name}.$on("${handler.name}", ${handler.var}); @@ -388,6 +391,10 @@ export default class InlineComponentWrapper extends Wrapper { } `); + block.builders.intro.addBlock(deindent` + if (${name}) ${name}.$$.fragment.i(); + `); + if (updates.length) { block.builders.update.addBlock(deindent` else if (${switch_value}) { @@ -426,6 +433,10 @@ export default class InlineComponentWrapper extends Wrapper { `@mount_component(${name}, ${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'});` ); + block.builders.intro.addBlock(deindent` + ${name}.$$.fragment.i(); + `); + if (updates.length) { block.builders.update.addBlock(deindent` ${updates} @@ -440,7 +451,7 @@ export default class InlineComponentWrapper extends Wrapper { } block.builders.outro.addLine( - `if (${name}) ${name}.$$.fragment.o(#outrocallback);` + `if (${name}) ${name}.$$.fragment.o();` ); } diff --git a/src/internal/Component.js b/src/internal/Component.js index a1607f0b30..8df1d7aee5 100644 --- a/src/internal/Component.js +++ b/src/internal/Component.js @@ -12,7 +12,7 @@ export function bind(component, name, callback) { export function mount_component(component, target, anchor) { const { fragment, on_mount, on_destroy, after_render } = component.$$; - fragment[fragment.i ? 'i' : 'm'](target, anchor); + fragment.m(target, anchor); // onMount happens after the initial afterUpdate. Because // afterUpdate callbacks happen in reverse order (inner first) @@ -101,8 +101,6 @@ export function init(component, options, instance, create_fragment, not_equal) { $$.fragment = create_fragment($$, $$.ctx); if (options.target) { - intros.enabled = !!options.intro; - if (options.hydrate) { $$.fragment.l(children(options.target)); } else { @@ -110,8 +108,8 @@ export function init(component, options, instance, create_fragment, not_equal) { } mount_component(component, options.target, options.anchor); + if (options.intro && component.$$.fragment.i) component.$$.fragment.i(); flush(); - intros.enabled = true; } set_current_component(previous_component); diff --git a/src/internal/animations.js b/src/internal/animations.js index ac14036724..8f65a268db 100644 --- a/src/internal/animations.js +++ b/src/internal/animations.js @@ -26,15 +26,8 @@ export function animate(node, from, fn, params) { function start() { if (css) { - if (delay) node.style.cssText = cssText; - - name = create_rule({ a: 0, b: 1, d: 1, duration }, easing, css); - - node.style.animation = (node.style.animation || '') - .split(', ') - .filter(anim => anim && !/__svelte/.test(anim)) - .concat(`${name} ${duration}ms linear 1 forwards`) - .join(', '); + if (delay) node.style.cssText = cssText; // TODO create delayed animation instead? + name = create_rule(node, 0, 1, duration, 0, easing, css); } started = true; @@ -45,7 +38,7 @@ export function animate(node, from, fn, params) { running = false; } - const { abort, promise } = loop(now => { + loop(now => { if (!started && now >= start_time) { start(); } diff --git a/src/internal/await-block.js b/src/internal/await-block.js index 9f49c13e55..3d8be35edc 100644 --- a/src/internal/await-block.js +++ b/src/internal/await-block.js @@ -29,7 +29,8 @@ export function handlePromise(promise, info) { } block.c(); - block[block.i ? 'i' : 'm'](info.mount(), info.anchor); + block.m(info.mount(), info.anchor); + if (block.i) block.i(); flush(); } diff --git a/src/internal/keyed-each.js b/src/internal/keyed-each.js index 745ead6ff2..ad5eb243d2 100644 --- a/src/internal/keyed-each.js +++ b/src/internal/keyed-each.js @@ -1,12 +1,16 @@ +import { on_outro } from './transitions.js'; + export function destroyBlock(block, lookup) { block.d(1); lookup[block.key] = null; } export function outroAndDestroyBlock(block, lookup) { - block.o(function() { + on_outro(() => { destroyBlock(block, lookup); }); + + block.o(); } export function fixAndOutroAndDestroyBlock(block, lookup) { @@ -14,7 +18,7 @@ export function fixAndOutroAndDestroyBlock(block, lookup) { outroAndDestroyBlock(block, lookup); } -export function updateKeyedEach(old_blocks, component, changed, get_key, dynamic, ctx, list, lookup, node, destroy, create_each_block, intro_method, next, get_context) { +export function updateKeyedEach(old_blocks, component, changed, get_key, dynamic, ctx, list, lookup, node, destroy, create_each_block, next, get_context) { var o = old_blocks.length; var n = list.length; @@ -48,7 +52,8 @@ export function updateKeyedEach(old_blocks, component, changed, get_key, dynamic var did_move = {}; function insert(block) { - block[intro_method](node, next); + block.m(node, next); + if (block.i) block.i(); lookup[block.key] = block; next = block.first; n--; diff --git a/src/internal/style_manager.js b/src/internal/style_manager.js index e4b15ad8d5..38f0acd94e 100644 --- a/src/internal/style_manager.js +++ b/src/internal/style_manager.js @@ -13,17 +13,17 @@ function hash(str) { return hash >>> 0; } -export function create_rule({ a, b, d, duration }, ease, fn) { +export function create_rule(node, a, b, duration, delay, ease, fn, uid = 0) { const step = 16.666 / duration; let keyframes = '{\n'; for (let p = 0; p <= 1; p += step) { - const t = a + d * ease(p); + const t = a + (b - a) * ease(p); keyframes += p * 100 + `%{${fn(t, 1 - t)}}\n`; } const rule = keyframes + `100% {${fn(b, 1 - b)}}\n}`; - const name = `__svelte_${hash(rule)}`; + const name = `__svelte_${hash(rule)}_${uid}`; if (!current_rules[name]) { if (!stylesheet) { @@ -36,21 +36,30 @@ export function create_rule({ a, b, d, duration }, ease, fn) { stylesheet.insertRule(`@keyframes ${name} ${rule}`, stylesheet.cssRules.length); } + const animation = node.style.animation || ''; + node.style.animation = `${animation ? `${animation}, ` : ``}${name} ${duration}ms linear ${delay}ms 1 both`; + active += 1; return name; } export function delete_rule(node, name) { - node.style.animation = node.style.animation + node.style.animation = (node.style.animation || '') .split(', ') - .filter(anim => anim && anim.indexOf(name) === -1) + .filter(name + ? anim => anim.indexOf(name) < 0 // remove specific animation + : anim => anim.indexOf('__svelte') === -1 // remove all Svelte animations + ) .join(', '); - if (--active <= 0) clear_rules(); + if (!--active) clear_rules(); } export function clear_rules() { - let i = stylesheet.cssRules.length; - while (i--) stylesheet.deleteRule(i); - current_rules = {}; + requestAnimationFrame(() => { + if (active) return; + let i = stylesheet.cssRules.length; + while (i--) stylesheet.deleteRule(i); + current_rules = {}; + }); } \ No newline at end of file diff --git a/src/internal/transitions.js b/src/internal/transitions.js index 714f82c6a9..cbbdd7da9c 100644 --- a/src/internal/transitions.js +++ b/src/internal/transitions.js @@ -1,4 +1,4 @@ -import { identity as linear, noop, run } from './utils.js'; +import { identity as linear, noop, run_all } from './utils.js'; import { loop } from './loop.js'; import { create_rule, delete_rule } from './style_manager.js'; @@ -24,152 +24,281 @@ export function group_outros() { }; } -export function create_transition(node, fn, params, intro) { - let config = fn(node, params); - let cssText; +export function check_outros() { + if (!outros.remaining) { + run_all(outros.callbacks); + } +} - let ready = !intro; - let t = intro ? 0 : 1; +export function on_outro(callback) { + outros.callbacks.push(callback); +} +export function create_in_transition(node, fn, params) { + let config = fn(node, params); let running = false; - let running_program = null; - let pending_program = null; + let animation_name; + let task; + let uid = 0; + + function cleanup() { + if (animation_name) delete_rule(node, animation_name); + } + + function go() { + const { + delay = 0, + duration = 300, + easing = linear, + tick = noop, + css + } = config; - function start(program, delay, duration, easing) { - node.dispatchEvent(new window.CustomEvent(`${program.b ? 'intro' : 'outro'}start`)); + if (css) animation_name = create_rule(node, 0, 1, duration, delay, easing, css, uid++); + tick(0, 1); - program.a = t; - program.d = program.b - program.a; - program.duration = duration * Math.abs(program.b - program.a); - program.end = program.start + program.duration; + const start_time = window.performance.now() + delay; + const end_time = start_time + duration; - if (config.css) { - if (delay) node.style.cssText = cssText; + if (task) task.abort(); + running = true; - program.name = create_rule(program, easing, config.css); + task = loop(now => { + if (running) { + if (now >= end_time) { + tick(1, 0); + cleanup(); + return running = false; + } - node.style.animation = (node.style.animation || '') - .split(', ') - .filter(anim => anim && (program.d < 0 || !/__svelte/.test(anim))) - .concat(`${program.name} ${program.duration}ms linear 1 forwards`) - .join(', '); - } + if (now >= start_time) { + const t = easing((now - start_time) / duration); + tick(t, 1 - t); + } + } - running_program = program; - pending_program = null; + return running; + }); } - function done() { - const program = running_program; - running_program = null; + let started = false; - t = program.b; + return { + start() { + if (started) return; - if (config.tick) config.tick(t, 1 - t); + delete_rule(node); - node.dispatchEvent(new window.CustomEvent(`${program.b ? 'intro' : 'outro'}end`)); + if (typeof config === 'function') { + config = config(); + wait().then(go); + } else { + go(); + } + }, - if (!program.b && !program.invalidated) { - program.group.callbacks.push(() => { - program.callback(); - if (config.css) delete_rule(node, program.name); - }); + invalidate() { + started = false; + }, - if (--program.group.remaining === 0) { - program.group.callbacks.forEach(run); + end() { + if (running) { + cleanup(); + running = false; } - } else { - if (config.css) delete_rule(node, program.name); } + }; +} - running = !!pending_program; - } +export function create_out_transition(node, fn, params) { + let config = fn(node, params); + let running = true; + let animation_name; + + const group = outros; + + group.remaining += 1; - function go(b, callback) { + function go() { const { delay = 0, duration = 300, - easing = linear + easing = linear, + tick = noop, + css } = config; - const program = { - start: window.performance.now() + delay, - b, - callback - }; + if (css) animation_name = create_rule(node, 1, 0, duration, delay, easing, css); + + const start_time = window.performance.now() + delay; + const end_time = start_time + duration; + + loop(now => { + if (running) { + if (now >= end_time) { + tick(0, 1); + + if (!--group.remaining) { + // this will result in `end()` being called, + // so we don't need to clean up here + run_all(group.callbacks); + } + + return false; + } + + if (now >= start_time) { + const t = easing((now - start_time) / duration); + tick(1 - t, t); + } + } - if (!ready) { - if (config.css && delay) { - cssText = node.style.cssText; - node.style.cssText += config.css(0, 1); + return running; + }); + } + + if (typeof config === 'function') { + config = config(); + wait().then(go); + } else { + go(); + } + + return { + end(reset) { + if (reset && config.tick) { + config.tick(1, 0); } - if (config.tick) config.tick(0, 1); - ready = true; + if (running) { + if (animation_name) delete_rule(node, animation_name); + running = false; + } } + }; +} + +export function create_bidirectional_transition(node, fn, params, intro) { + let config = fn(node, params); + + let t = intro ? 0 : 1; + + let running_program = null; + let pending_program = null; + let animation_name = null; + + function clear_animation() { + if (animation_name) delete_rule(node, animation_name); + } + + function init(program, duration) { + const d = program.b - t; + duration *= Math.abs(d); + + return { + a: t, + b: program.b, + d, + duration, + start: program.start, + end: program.start + duration, + group: program.group + }; + } + + function go(b) { + const { + delay = 0, + duration = 300, + easing = linear, + tick = noop, + css + } = config; + + const program = { + start: window.performance.now() + delay, + b + }; if (!b) { program.group = outros; outros.remaining += 1; } - if (delay) { + if (running_program) { pending_program = program; } else { - start(program, delay, duration, easing); - } + // if this is an intro, and there's a delay, we need to do + // an initial tick and/or apply CSS animation immediately + if (css) { + clear_animation(); + animation_name = create_rule(node, t, b, duration, delay, easing, css); + } - if (!running) { - running = true; + if (b) tick(0, 1); - const { abort, promise } = loop(now => { - if (running_program && now >= running_program.end) { - done(); - } + running_program = init(program, duration); + node.dispatchEvent(new window.CustomEvent(`${running_program.b ? 'intro' : 'outro'}start`)); + + loop(now => { + if (pending_program && now > pending_program.start) { + running_program = init(pending_program, duration); + pending_program = null; + + node.dispatchEvent(new window.CustomEvent(`${running_program.b ? 'intro' : 'outro'}start`)); - if (pending_program && now >= pending_program.start) { - start(pending_program, delay, duration, easing); + if (css) { + clear_animation(); + animation_name = create_rule(node, t, running_program.b, running_program.duration, 0, easing, config.css); + } } - if (running) { - if (running_program) { + if (running_program) { + if (now >= running_program.end) { + tick(t = running_program.b, 1 - t); + node.dispatchEvent(new window.CustomEvent(`${running_program.b ? 'intro' : 'outro'}end`)); + + if (!pending_program) { + // we're done + if (running_program.b) { + // intro — we can tidy up immediately + clear_animation(); + } else { + // outro — needs to be coordinated + if (!--running_program.group.remaining) run_all(running_program.group.callbacks); + } + } + + running_program = null; + } + + else if (now >= running_program.start) { const p = now - running_program.start; t = running_program.a + running_program.d * easing(p / running_program.duration); - if (config.tick) config.tick(t, 1 - t); + tick(t, 1 - t); } - - return true; } + + return !!(running_program || pending_program); }); } } return { - run(b, callback = noop) { + run(b) { if (typeof config === 'function') { wait().then(() => { config = config(); - go(b, callback); + go(b); }); } else { - go(b, callback); - } - }, - - abort(reset) { - if (reset && config.tick) config.tick(1, 0); - - if (running_program) { - if (config.css) delete_rule(node, running_program.name); - running_program = pending_program = null; - running = false; + go(b); } }, - invalidate() { - if (running_program) { - running_program.invalidated = true; - } + end() { + clear_animation(); + running_program = pending_program = null; } }; } \ No newline at end of file diff --git a/src/internal/utils.js b/src/internal/utils.js index 9559ce9d24..a46385190d 100644 --- a/src/internal/utils.js +++ b/src/internal/utils.js @@ -16,13 +16,6 @@ export function isPromise(value) { return value && typeof value.then === 'function'; } -export function callAfter(fn, i) { - if (i === 0) fn(); - return () => { - if (!--i) fn(); - }; -} - export function addLoc(element, file, line, column, char) { element.__svelte_meta = { loc: { file, line, column, char } diff --git a/test/js/samples/action-custom-event-handler/expected.js b/test/js/samples/action-custom-event-handler/expected.js index e4a1329c60..0c73a79237 100644 --- a/test/js/samples/action-custom-event-handler/expected.js +++ b/test/js/samples/action-custom-event-handler/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, createElement, detachNode, flush, init, insert, noop, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, createElement, detachNode, flush, init, insert, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { - var button, foo_action, current; + var button, foo_action; return { c() { @@ -13,17 +13,11 @@ function create_fragment($$, ctx) { m(target, anchor) { insert(target, button, anchor); foo_action = foo.call(null, button, ctx.foo_function) || {}; - current = true; }, p: noop, - - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/action/expected.js b/test/js/samples/action/expected.js index f2f66baa2b..a8fbf62344 100644 --- a/test/js/samples/action/expected.js +++ b/test/js/samples/action/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, createElement, detachNode, identity, init, insert, noop, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, createElement, detachNode, identity, init, insert, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { - var a, link_action, current; + var a, link_action; return { c() { @@ -14,17 +14,11 @@ function create_fragment($$, ctx) { m(target, anchor) { insert(target, a, anchor); link_action = link.call(null, a) || {}; - current = true; }, p: noop, - - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/bind-width-height/expected.js b/test/js/samples/bind-width-height/expected.js index 4ca71de2cf..a1b13fedc6 100644 --- a/test/js/samples/bind-width-height/expected.js +++ b/test/js/samples/bind-width-height/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, addResizeListener, add_render_callback, createElement, detachNode, flush, init, insert, noop, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, addResizeListener, add_render_callback, createElement, detachNode, flush, init, insert, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { - var div, div_resize_listener, current; + var div, div_resize_listener; return { c() { @@ -14,17 +14,11 @@ function create_fragment($$, ctx) { m(target, anchor) { insert(target, div, anchor); div_resize_listener = addResizeListener(div, ctx.div_resize_handler.bind(div)); - current = true; }, p: noop, - - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/collapses-text-around-comments/expected.js b/test/js/samples/collapses-text-around-comments/expected.js index 26b8dac055..ff5ce3b048 100644 --- a/test/js/samples/collapses-text-around-comments/expected.js +++ b/test/js/samples/collapses-text-around-comments/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, append, createElement, createText, detachNode, flush, init, insert, run, safe_not_equal, setData } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, createElement, createText, detachNode, flush, init, insert, noop, safe_not_equal, setData } from "svelte/internal"; function add_css() { var style = createElement("style"); @@ -9,7 +9,7 @@ function add_css() { } function create_fragment($$, ctx) { - var p, text, current; + var p, text; return { c() { @@ -21,7 +21,6 @@ function create_fragment($$, ctx) { m(target, anchor) { insert(target, p, anchor); append(p, text); - current = true; }, p(changed, ctx) { @@ -30,12 +29,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/component-static-array/expected.js b/test/js/samples/component-static-array/expected.js index f39cb4c328..ab3dbbc4f6 100644 --- a/test/js/samples/component-static-array/expected.js +++ b/test/js/samples/component-static-array/expected.js @@ -13,20 +13,19 @@ function create_fragment($$, ctx) { m(target, anchor) { mount_component(nested, target, anchor); - current = true; }, p: noop, - i(target, anchor) { + i() { if (current) return; - this.m(target, anchor); - }, + nested.$$.fragment.i(); - o(outrocallback) { - if (!current) return; + current = true; + }, - if (nested) nested.$$.fragment.o(outrocallback); + o() { + if (nested) nested.$$.fragment.o(); current = false; }, diff --git a/test/js/samples/component-static-immutable/expected.js b/test/js/samples/component-static-immutable/expected.js index a33a09a093..0e8d67ccea 100644 --- a/test/js/samples/component-static-immutable/expected.js +++ b/test/js/samples/component-static-immutable/expected.js @@ -13,20 +13,19 @@ function create_fragment($$, ctx) { m(target, anchor) { mount_component(nested, target, anchor); - current = true; }, p: noop, - i(target, anchor) { + i() { if (current) return; - this.m(target, anchor); - }, + nested.$$.fragment.i(); - o(outrocallback) { - if (!current) return; + current = true; + }, - if (nested) nested.$$.fragment.o(outrocallback); + o() { + if (nested) nested.$$.fragment.o(); current = false; }, diff --git a/test/js/samples/component-static-immutable2/expected.js b/test/js/samples/component-static-immutable2/expected.js index a33a09a093..0e8d67ccea 100644 --- a/test/js/samples/component-static-immutable2/expected.js +++ b/test/js/samples/component-static-immutable2/expected.js @@ -13,20 +13,19 @@ function create_fragment($$, ctx) { m(target, anchor) { mount_component(nested, target, anchor); - current = true; }, p: noop, - i(target, anchor) { + i() { if (current) return; - this.m(target, anchor); - }, + nested.$$.fragment.i(); - o(outrocallback) { - if (!current) return; + current = true; + }, - if (nested) nested.$$.fragment.o(outrocallback); + o() { + if (nested) nested.$$.fragment.o(); current = false; }, diff --git a/test/js/samples/component-static/expected.js b/test/js/samples/component-static/expected.js index df8a0d3274..be7357c866 100644 --- a/test/js/samples/component-static/expected.js +++ b/test/js/samples/component-static/expected.js @@ -13,20 +13,19 @@ function create_fragment($$, ctx) { m(target, anchor) { mount_component(nested, target, anchor); - current = true; }, p: noop, - i(target, anchor) { + i() { if (current) return; - this.m(target, anchor); - }, + nested.$$.fragment.i(); - o(outrocallback) { - if (!current) return; + current = true; + }, - if (nested) nested.$$.fragment.o(outrocallback); + o() { + if (nested) nested.$$.fragment.o(); current = false; }, diff --git a/test/js/samples/computed-collapsed-if/expected.js b/test/js/samples/computed-collapsed-if/expected.js index 39c7f85bc8..f9411cf5f6 100644 --- a/test/js/samples/computed-collapsed-if/expected.js +++ b/test/js/samples/computed-collapsed-if/expected.js @@ -1,15 +1,13 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, flush, init, noop, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, flush, init, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { - var current; - return { c: noop, m: noop, p: noop, i: noop, - o: run, + o: noop, d: noop }; } diff --git a/test/js/samples/css-media-query/expected.js b/test/js/samples/css-media-query/expected.js index f130945c4b..b771f17a75 100644 --- a/test/js/samples/css-media-query/expected.js +++ b/test/js/samples/css-media-query/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, append, createElement, detachNode, identity, init, insert, noop, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, createElement, detachNode, identity, init, insert, noop, safe_not_equal } from "svelte/internal"; function add_css() { var style = createElement("style"); @@ -9,7 +9,7 @@ function add_css() { } function create_fragment($$, ctx) { - var div, current; + var div; return { c() { @@ -19,17 +19,11 @@ function create_fragment($$, ctx) { m(target, anchor) { insert(target, div, anchor); - current = true; }, p: noop, - - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/css-shadow-dom-keyframes/expected.js b/test/js/samples/css-shadow-dom-keyframes/expected.js index bf56378e2d..d55e3928ca 100644 --- a/test/js/samples/css-shadow-dom-keyframes/expected.js +++ b/test/js/samples/css-shadow-dom-keyframes/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteElement, createElement, detachNode, identity, init, insert, noop, run, safe_not_equal } from "svelte/internal"; +import { SvelteElement, createElement, detachNode, identity, init, insert, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { - var div, current; + var div; return { c() { @@ -13,17 +13,11 @@ function create_fragment($$, ctx) { m(target, anchor) { insert(target, div, anchor); - current = true; }, p: noop, - - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/debug-empty/expected.js b/test/js/samples/debug-empty/expected.js index 16313a1a50..4ed9b00a85 100644 --- a/test/js/samples/debug-empty/expected.js +++ b/test/js/samples/debug-empty/expected.js @@ -1,10 +1,10 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponentDev, addLoc, append, createElement, createText, detachNode, flush, init, insert, run, safe_not_equal, setData } from "svelte/internal"; +import { SvelteComponentDev, addLoc, append, createElement, createText, detachNode, flush, init, insert, noop, safe_not_equal, setData } from "svelte/internal"; const file = undefined; function create_fragment($$, ctx) { - var h1, text0, text1, text2, text3, current; + var h1, text0, text1, text2, text3; return { c: function create() { @@ -27,7 +27,6 @@ function create_fragment($$, ctx) { append(h1, text1); append(h1, text2); insert(target, text3, anchor); - current = true; }, p: function update(changed, ctx) { @@ -38,12 +37,8 @@ function create_fragment($$, ctx) { debugger; }, - i: function intro(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d: function destroy(detach) { if (detach) { diff --git a/test/js/samples/debug-foo-bar-baz-things/expected.js b/test/js/samples/debug-foo-bar-baz-things/expected.js index 7183e59e83..24089b777c 100644 --- a/test/js/samples/debug-foo-bar-baz-things/expected.js +++ b/test/js/samples/debug-foo-bar-baz-things/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponentDev, addLoc, append, createElement, createText, destroyEach, detachNode, flush, init, insert, run, safe_not_equal, setData } from "svelte/internal"; +import { SvelteComponentDev, addLoc, append, createElement, createText, destroyEach, detachNode, flush, init, insert, noop, safe_not_equal, setData } from "svelte/internal"; const file = undefined; @@ -55,7 +55,7 @@ function create_each_block($$, ctx) { } function create_fragment($$, ctx) { - var text0, p, text1, text2, current; + var text0, p, text1, text2; var each_value = ctx.things; @@ -91,7 +91,6 @@ function create_fragment($$, ctx) { insert(target, p, anchor); append(p, text1); append(p, text2); - current = true; }, p: function update(changed, ctx) { @@ -121,12 +120,8 @@ function create_fragment($$, ctx) { } }, - i: function intro(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d: function destroy(detach) { destroyEach(each_blocks, detach); diff --git a/test/js/samples/debug-foo/expected.js b/test/js/samples/debug-foo/expected.js index 93fbdc2f21..2c7d3ef2d2 100644 --- a/test/js/samples/debug-foo/expected.js +++ b/test/js/samples/debug-foo/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponentDev, addLoc, append, createElement, createText, destroyEach, detachNode, flush, init, insert, run, safe_not_equal, setData } from "svelte/internal"; +import { SvelteComponentDev, addLoc, append, createElement, createText, destroyEach, detachNode, flush, init, insert, noop, safe_not_equal, setData } from "svelte/internal"; const file = undefined; @@ -55,7 +55,7 @@ function create_each_block($$, ctx) { } function create_fragment($$, ctx) { - var text0, p, text1, text2, current; + var text0, p, text1, text2; var each_value = ctx.things; @@ -91,7 +91,6 @@ function create_fragment($$, ctx) { insert(target, p, anchor); append(p, text1); append(p, text2); - current = true; }, p: function update(changed, ctx) { @@ -121,12 +120,8 @@ function create_fragment($$, ctx) { } }, - i: function intro(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d: function destroy(detach) { destroyEach(each_blocks, detach); diff --git a/test/js/samples/deconflict-builtins/expected.js b/test/js/samples/deconflict-builtins/expected.js index fe2a247d3d..d8f2db31ce 100644 --- a/test/js/samples/deconflict-builtins/expected.js +++ b/test/js/samples/deconflict-builtins/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, append, createComment, createElement as createElement_1, createText, destroyEach, detachNode, flush, init, insert, run, safe_not_equal, setData } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, createComment, createElement as createElement_1, createText, destroyEach, detachNode, flush, init, insert, noop, safe_not_equal, setData } from "svelte/internal"; function get_each_context(ctx, list, i) { const child_ctx = Object.create(ctx); @@ -37,7 +37,7 @@ function create_each_block($$, ctx) { } function create_fragment($$, ctx) { - var each_anchor, current; + var each_anchor; var each_value = ctx.createElement; @@ -62,7 +62,6 @@ function create_fragment($$, ctx) { } insert(target, each_anchor, anchor); - current = true; }, p(changed, ctx) { @@ -88,12 +87,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { destroyEach(each_blocks, detach); diff --git a/test/js/samples/deconflict-globals/expected.js b/test/js/samples/deconflict-globals/expected.js index eae53e6ab6..b8613b4ff9 100644 --- a/test/js/samples/deconflict-globals/expected.js +++ b/test/js/samples/deconflict-globals/expected.js @@ -1,16 +1,14 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, flush, init, noop, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, flush, init, noop, safe_not_equal } from "svelte/internal"; import { onMount } from "svelte"; function create_fragment($$, ctx) { - var current; - return { c: noop, m: noop, p: noop, i: noop, - o: run, + o: noop, d: noop }; } diff --git a/test/js/samples/dev-warning-missing-data-computed/expected.js b/test/js/samples/dev-warning-missing-data-computed/expected.js index 7f52c96119..3b4c623407 100644 --- a/test/js/samples/dev-warning-missing-data-computed/expected.js +++ b/test/js/samples/dev-warning-missing-data-computed/expected.js @@ -1,10 +1,10 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponentDev, addLoc, append, createElement, createText, detachNode, flush, init, insert, run, safe_not_equal, setData } from "svelte/internal"; +import { SvelteComponentDev, addLoc, append, createElement, createText, detachNode, flush, init, insert, noop, safe_not_equal, setData } from "svelte/internal"; const file = undefined; function create_fragment($$, ctx) { - var p, text0_value = Math.max(0, ctx.foo), text0, text1, text2, current; + var p, text0_value = Math.max(0, ctx.foo), text0, text1, text2; return { c: function create() { @@ -24,7 +24,6 @@ function create_fragment($$, ctx) { append(p, text0); append(p, text1); append(p, text2); - current = true; }, p: function update(changed, ctx) { @@ -37,12 +36,8 @@ function create_fragment($$, ctx) { } }, - i: function intro(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d: function destroy(detach) { if (detach) { diff --git a/test/js/samples/do-use-dataset/expected.js b/test/js/samples/do-use-dataset/expected.js index 1cdc176977..343ac22999 100644 --- a/test/js/samples/do-use-dataset/expected.js +++ b/test/js/samples/do-use-dataset/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, createElement, createText, detachNode, flush, init, insert, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, createElement, createText, detachNode, flush, init, insert, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { - var div0, text, div1, current; + var div0, text, div1; return { c() { @@ -17,7 +17,6 @@ function create_fragment($$, ctx) { insert(target, div0, anchor); insert(target, text, anchor); insert(target, div1, anchor); - current = true; }, p(changed, ctx) { @@ -26,12 +25,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/dont-use-dataset-in-legacy/expected.js b/test/js/samples/dont-use-dataset-in-legacy/expected.js index 26fd86b9b6..dc787888af 100644 --- a/test/js/samples/dont-use-dataset-in-legacy/expected.js +++ b/test/js/samples/dont-use-dataset-in-legacy/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, createElement, createText, detachNode, flush, init, insert, run, safe_not_equal, setAttribute } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, createElement, createText, detachNode, flush, init, insert, noop, safe_not_equal, setAttribute } from "svelte/internal"; function create_fragment($$, ctx) { - var div0, text, div1, current; + var div0, text, div1; return { c() { @@ -17,7 +17,6 @@ function create_fragment($$, ctx) { insert(target, div0, anchor); insert(target, text, anchor); insert(target, div1, anchor); - current = true; }, p(changed, ctx) { @@ -26,12 +25,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/dont-use-dataset-in-svg/expected.js b/test/js/samples/dont-use-dataset-in-svg/expected.js index 2bb5a1d36b..1a5825a63d 100644 --- a/test/js/samples/dont-use-dataset-in-svg/expected.js +++ b/test/js/samples/dont-use-dataset-in-svg/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, append, createSvgElement, detachNode, flush, init, insert, run, safe_not_equal, setAttribute } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, createSvgElement, detachNode, flush, init, insert, noop, safe_not_equal, setAttribute } from "svelte/internal"; function create_fragment($$, ctx) { - var svg, g0, g1, current; + var svg, g0, g1; return { c() { @@ -17,7 +17,6 @@ function create_fragment($$, ctx) { insert(target, svg, anchor); append(svg, g0); append(svg, g1); - current = true; }, p(changed, ctx) { @@ -26,12 +25,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/dynamic-import/expected.js b/test/js/samples/dynamic-import/expected.js index d0e36d4936..1c6e0b873d 100644 --- a/test/js/samples/dynamic-import/expected.js +++ b/test/js/samples/dynamic-import/expected.js @@ -14,20 +14,19 @@ function create_fragment($$, ctx) { m(target, anchor) { mount_component(lazyload, target, anchor); - current = true; }, p: noop, - i(target, anchor) { + i() { if (current) return; - this.m(target, anchor); - }, + lazyload.$$.fragment.i(); - o(outrocallback) { - if (!current) return; + current = true; + }, - if (lazyload) lazyload.$$.fragment.o(outrocallback); + o() { + if (lazyload) lazyload.$$.fragment.o(); current = false; }, diff --git a/test/js/samples/each-block-changed-check/expected.js b/test/js/samples/each-block-changed-check/expected.js index cc59d354d6..9dcf4b1ad2 100644 --- a/test/js/samples/each-block-changed-check/expected.js +++ b/test/js/samples/each-block-changed-check/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, append, createElement, createText, destroyEach, detachAfter, detachNode, flush, init, insert, run, safe_not_equal, setData } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, createElement, createText, destroyEach, detachAfter, detachNode, flush, init, insert, noop, safe_not_equal, setData } from "svelte/internal"; function get_each_context(ctx, list, i) { const child_ctx = Object.create(ctx); @@ -68,7 +68,7 @@ function create_each_block($$, ctx) { } function create_fragment($$, ctx) { - var text0, p, text1, current; + var text0, p, text1; var each_value = ctx.comments; @@ -97,7 +97,6 @@ function create_fragment($$, ctx) { insert(target, text0, anchor); insert(target, p, anchor); append(p, text1); - current = true; }, p(changed, ctx) { @@ -127,12 +126,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { destroyEach(each_blocks, detach); diff --git a/test/js/samples/each-block-keyed-animated/expected.js b/test/js/samples/each-block-keyed-animated/expected.js index 874c79c637..fbd5fa15cc 100644 --- a/test/js/samples/each-block-keyed-animated/expected.js +++ b/test/js/samples/each-block-keyed-animated/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, animate, append, blankObject, createComment, createElement, createText, detachNode, fixAndOutroAndDestroyBlock, fix_position, flush, init, insert, noop, run, safe_not_equal, setData, updateKeyedEach } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, animate, append, blankObject, createComment, createElement, createText, detachNode, fixAndOutroAndDestroyBlock, fix_position, flush, init, insert, noop, safe_not_equal, setData, updateKeyedEach } from "svelte/internal"; function get_each_context(ctx, list, i) { const child_ctx = Object.create(ctx); @@ -56,7 +56,7 @@ function create_each_block($$, key_1, ctx) { } function create_fragment($$, ctx) { - var each_blocks_1 = [], each_lookup = blankObject(), each_anchor, current; + var each_blocks = [], each_lookup = blankObject(), each_anchor; var each_value = ctx.things; @@ -65,39 +65,34 @@ function create_fragment($$, ctx) { for (var i = 0; i < each_value.length; i += 1) { let child_ctx = get_each_context(ctx, each_value, i); let key = get_key(child_ctx); - each_blocks_1[i] = each_lookup[key] = create_each_block($$, key, child_ctx); + each_blocks[i] = each_lookup[key] = create_each_block($$, key, child_ctx); } return { c() { - for (i = 0; i < each_blocks_1.length; i += 1) each_blocks_1[i].c(); + for (i = 0; i < each_blocks.length; i += 1) each_blocks[i].c(); each_anchor = createComment(); }, m(target, anchor) { - for (i = 0; i < each_blocks_1.length; i += 1) each_blocks_1[i].m(target, anchor); + for (i = 0; i < each_blocks.length; i += 1) each_blocks[i].m(target, anchor); insert(target, each_anchor, anchor); - current = true; }, p(changed, ctx) { const each_value = ctx.things; - for (let i = 0; i < each_blocks_1.length; i += 1) each_blocks_1[i].r(); - each_blocks_1 = updateKeyedEach(each_blocks_1, $$, changed, get_key, 1, ctx, each_value, each_lookup, each_anchor.parentNode, fixAndOutroAndDestroyBlock, create_each_block, "m", each_anchor, get_each_context); - for (let i = 0; i < each_blocks_1.length; i += 1) each_blocks_1[i].a(); + for (let i = 0; i < each_blocks.length; i += 1) each_blocks[i].r(); + each_blocks = updateKeyedEach(each_blocks, $$, changed, get_key, 1, ctx, each_value, each_lookup, each_anchor.parentNode, fixAndOutroAndDestroyBlock, create_each_block, each_anchor, get_each_context); + for (let i = 0; i < each_blocks.length; i += 1) each_blocks[i].a(); }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { - for (i = 0; i < each_blocks_1.length; i += 1) each_blocks_1[i].d(detach); + for (i = 0; i < each_blocks.length; i += 1) each_blocks[i].d(detach); if (detach) { detachNode(each_anchor); diff --git a/test/js/samples/each-block-keyed/expected.js b/test/js/samples/each-block-keyed/expected.js index dc6f2c98e2..1599362932 100644 --- a/test/js/samples/each-block-keyed/expected.js +++ b/test/js/samples/each-block-keyed/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, append, blankObject, createComment, createElement, createText, destroyBlock, detachNode, flush, init, insert, run, safe_not_equal, setData, updateKeyedEach } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, blankObject, createComment, createElement, createText, destroyBlock, detachNode, flush, init, insert, noop, safe_not_equal, setData, updateKeyedEach } from "svelte/internal"; function get_each_context(ctx, list, i) { const child_ctx = Object.create(ctx); @@ -42,7 +42,7 @@ function create_each_block($$, key_1, ctx) { } function create_fragment($$, ctx) { - var each_blocks_1 = [], each_lookup = blankObject(), each_anchor, current; + var each_blocks = [], each_lookup = blankObject(), each_anchor; var each_value = ctx.things; @@ -51,37 +51,32 @@ function create_fragment($$, ctx) { for (var i = 0; i < each_value.length; i += 1) { let child_ctx = get_each_context(ctx, each_value, i); let key = get_key(child_ctx); - each_blocks_1[i] = each_lookup[key] = create_each_block($$, key, child_ctx); + each_blocks[i] = each_lookup[key] = create_each_block($$, key, child_ctx); } return { c() { - for (i = 0; i < each_blocks_1.length; i += 1) each_blocks_1[i].c(); + for (i = 0; i < each_blocks.length; i += 1) each_blocks[i].c(); each_anchor = createComment(); }, m(target, anchor) { - for (i = 0; i < each_blocks_1.length; i += 1) each_blocks_1[i].m(target, anchor); + for (i = 0; i < each_blocks.length; i += 1) each_blocks[i].m(target, anchor); insert(target, each_anchor, anchor); - current = true; }, p(changed, ctx) { const each_value = ctx.things; - each_blocks_1 = updateKeyedEach(each_blocks_1, $$, changed, get_key, 1, ctx, each_value, each_lookup, each_anchor.parentNode, destroyBlock, create_each_block, "m", each_anchor, get_each_context); + each_blocks = updateKeyedEach(each_blocks, $$, changed, get_key, 1, ctx, each_value, each_lookup, each_anchor.parentNode, destroyBlock, create_each_block, each_anchor, get_each_context); }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { - for (i = 0; i < each_blocks_1.length; i += 1) each_blocks_1[i].d(detach); + for (i = 0; i < each_blocks.length; i += 1) each_blocks[i].d(detach); if (detach) { detachNode(each_anchor); diff --git a/test/js/samples/event-handler-no-passive/expected.js b/test/js/samples/event-handler-no-passive/expected.js index fea5cf99e2..6a1277988f 100644 --- a/test/js/samples/event-handler-no-passive/expected.js +++ b/test/js/samples/event-handler-no-passive/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, addListener, createElement, detachNode, identity, init, insert, noop, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, addListener, createElement, detachNode, identity, init, insert, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { - var a, current, dispose; + var a, dispose; return { c() { @@ -14,17 +14,11 @@ function create_fragment($$, ctx) { m(target, anchor) { insert(target, a, anchor); - current = true; }, p: noop, - - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/event-modifiers/expected.js b/test/js/samples/event-modifiers/expected.js index 8d334ec04a..ac0f1b3d79 100644 --- a/test/js/samples/event-modifiers/expected.js +++ b/test/js/samples/event-modifiers/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, addListener, append, createElement, createText, detachNode, identity, init, insert, noop, preventDefault, run, run_all, safe_not_equal, stopPropagation } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, addListener, append, createElement, createText, detachNode, identity, init, insert, noop, preventDefault, run_all, safe_not_equal, stopPropagation } from "svelte/internal"; function create_fragment($$, ctx) { - var div, button0, text1, button1, text3, button2, current, dispose; + var div, button0, text1, button1, text3, button2, dispose; return { c() { @@ -30,17 +30,11 @@ function create_fragment($$, ctx) { append(div, button1); append(div, text3); append(div, button2); - current = true; }, p: noop, - - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/head-no-whitespace/expected.js b/test/js/samples/head-no-whitespace/expected.js index 58bfa6ee06..f074e69745 100644 --- a/test/js/samples/head-no-whitespace/expected.js +++ b/test/js/samples/head-no-whitespace/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, append, createElement, detachNode, identity, init, noop, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, createElement, detachNode, identity, init, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { - var meta0, meta1, current; + var meta0, meta1; return { c() { @@ -17,17 +17,11 @@ function create_fragment($$, ctx) { m(target, anchor) { append(document.head, meta0); append(document.head, meta1); - current = true; }, p: noop, - - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { detachNode(meta0); diff --git a/test/js/samples/hoisted-const/expected.js b/test/js/samples/hoisted-const/expected.js index aa81d991e8..cdca1aaeba 100644 --- a/test/js/samples/hoisted-const/expected.js +++ b/test/js/samples/hoisted-const/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, append, createElement, createText, detachNode, identity, init, insert, noop, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, createElement, createText, detachNode, identity, init, insert, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { - var b, text_value = get_answer(), text, current; + var b, text_value = get_answer(), text; return { c() { @@ -13,17 +13,11 @@ function create_fragment($$, ctx) { m(target, anchor) { insert(target, b, anchor); append(b, text); - current = true; }, p: noop, - - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/if-block-no-update/expected.js b/test/js/samples/if-block-no-update/expected.js index cc01e9791a..b8ec6c55c5 100644 --- a/test/js/samples/if-block-no-update/expected.js +++ b/test/js/samples/if-block-no-update/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, createComment, createElement, detachNode, flush, init, insert, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, createComment, createElement, detachNode, flush, init, insert, noop, safe_not_equal } from "svelte/internal"; // (3:0) {:else} function create_else_block($$, ctx) { @@ -46,7 +46,7 @@ function create_if_block($$, ctx) { } function create_fragment($$, ctx) { - var if_block_anchor, current; + var if_block_anchor; function select_block_type(ctx) { if (ctx.foo) return create_if_block; @@ -65,24 +65,21 @@ function create_fragment($$, ctx) { m(target, anchor) { if_block.m(target, anchor); insert(target, if_block_anchor, anchor); - current = true; }, p(changed, ctx) { if (current_block_type !== (current_block_type = select_block_type(ctx))) { if_block.d(1); if_block = current_block_type($$, ctx); - if_block.c(); - if_block.m(if_block_anchor.parentNode, if_block_anchor); + if (if_block) { + if_block.c(); + if_block.m(if_block_anchor.parentNode, if_block_anchor); + } } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if_block.d(detach); diff --git a/test/js/samples/if-block-simple/expected.js b/test/js/samples/if-block-simple/expected.js index 054ee7219b..fbba18e605 100644 --- a/test/js/samples/if-block-simple/expected.js +++ b/test/js/samples/if-block-simple/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, createComment, createElement, detachNode, flush, init, insert, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, createComment, createElement, detachNode, flush, init, insert, noop, safe_not_equal } from "svelte/internal"; // (1:0) {#if foo} function create_if_block($$, ctx) { @@ -24,7 +24,7 @@ function create_if_block($$, ctx) { } function create_fragment($$, ctx) { - var if_block_anchor, current; + var if_block_anchor; var if_block = (ctx.foo) && create_if_block($$, ctx); @@ -37,7 +37,6 @@ function create_fragment($$, ctx) { m(target, anchor) { if (if_block) if_block.m(target, anchor); insert(target, if_block_anchor, anchor); - current = true; }, p(changed, ctx) { @@ -53,12 +52,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (if_block) if_block.d(detach); diff --git a/test/js/samples/inline-style-optimized-multiple/expected.js b/test/js/samples/inline-style-optimized-multiple/expected.js index f4ac24f484..b39aaf9d26 100644 --- a/test/js/samples/inline-style-optimized-multiple/expected.js +++ b/test/js/samples/inline-style-optimized-multiple/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, createElement, detachNode, flush, init, insert, run, safe_not_equal, setStyle } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, createElement, detachNode, flush, init, insert, noop, safe_not_equal, setStyle } from "svelte/internal"; function create_fragment($$, ctx) { - var div, current; + var div; return { c() { @@ -13,7 +13,6 @@ function create_fragment($$, ctx) { m(target, anchor) { insert(target, div, anchor); - current = true; }, p(changed, ctx) { @@ -26,12 +25,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/inline-style-optimized-url/expected.js b/test/js/samples/inline-style-optimized-url/expected.js index da4f91c1d2..49fb1d3427 100644 --- a/test/js/samples/inline-style-optimized-url/expected.js +++ b/test/js/samples/inline-style-optimized-url/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, createElement, detachNode, flush, init, insert, run, safe_not_equal, setStyle } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, createElement, detachNode, flush, init, insert, noop, safe_not_equal, setStyle } from "svelte/internal"; function create_fragment($$, ctx) { - var div, current; + var div; return { c() { @@ -12,7 +12,6 @@ function create_fragment($$, ctx) { m(target, anchor) { insert(target, div, anchor); - current = true; }, p(changed, ctx) { @@ -21,12 +20,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/inline-style-optimized/expected.js b/test/js/samples/inline-style-optimized/expected.js index 84056cfd50..bfb7c56436 100644 --- a/test/js/samples/inline-style-optimized/expected.js +++ b/test/js/samples/inline-style-optimized/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, createElement, detachNode, flush, init, insert, run, safe_not_equal, setStyle } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, createElement, detachNode, flush, init, insert, noop, safe_not_equal, setStyle } from "svelte/internal"; function create_fragment($$, ctx) { - var div, current; + var div; return { c() { @@ -12,7 +12,6 @@ function create_fragment($$, ctx) { m(target, anchor) { insert(target, div, anchor); - current = true; }, p(changed, ctx) { @@ -21,12 +20,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/inline-style-unoptimized/expected.js b/test/js/samples/inline-style-unoptimized/expected.js index 1f66ec8766..73dd167875 100644 --- a/test/js/samples/inline-style-unoptimized/expected.js +++ b/test/js/samples/inline-style-unoptimized/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, createElement, createText, detachNode, flush, init, insert, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, createElement, createText, detachNode, flush, init, insert, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { - var div0, text, div1, div1_style_value, current; + var div0, text, div1, div1_style_value; return { c() { @@ -17,7 +17,6 @@ function create_fragment($$, ctx) { insert(target, div0, anchor); insert(target, text, anchor); insert(target, div1, anchor); - current = true; }, p(changed, ctx) { @@ -30,12 +29,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/input-files/expected.js b/test/js/samples/input-files/expected.js index baab165695..507d9fa2a3 100644 --- a/test/js/samples/input-files/expected.js +++ b/test/js/samples/input-files/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, addListener, createElement, detachNode, flush, init, insert, noop, run, safe_not_equal, setAttribute } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, addListener, createElement, detachNode, flush, init, insert, noop, safe_not_equal, setAttribute } from "svelte/internal"; function create_fragment($$, ctx) { - var input, current, dispose; + var input, dispose; return { c() { @@ -14,17 +14,11 @@ function create_fragment($$, ctx) { m(target, anchor) { insert(target, input, anchor); - current = true; }, p: noop, - - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/input-range/expected.js b/test/js/samples/input-range/expected.js index 1d90cf146c..393a6bb39c 100644 --- a/test/js/samples/input-range/expected.js +++ b/test/js/samples/input-range/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, addListener, createElement, detachNode, flush, init, insert, run, run_all, safe_not_equal, setAttribute, toNumber } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, addListener, createElement, detachNode, flush, init, insert, noop, run_all, safe_not_equal, setAttribute, toNumber } from "svelte/internal"; function create_fragment($$, ctx) { - var input, current, dispose; + var input, dispose; return { c() { @@ -19,20 +19,14 @@ function create_fragment($$, ctx) { insert(target, input, anchor); input.value = ctx.value; - - current = true; }, p(changed, ctx) { if (changed.value) input.value = ctx.value; }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/input-without-blowback-guard/expected.js b/test/js/samples/input-without-blowback-guard/expected.js index 3c5f57391b..a0d6065de6 100644 --- a/test/js/samples/input-without-blowback-guard/expected.js +++ b/test/js/samples/input-without-blowback-guard/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, addListener, createElement, detachNode, flush, init, insert, run, safe_not_equal, setAttribute } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, addListener, createElement, detachNode, flush, init, insert, noop, safe_not_equal, setAttribute } from "svelte/internal"; function create_fragment($$, ctx) { - var input, current, dispose; + var input, dispose; return { c() { @@ -15,20 +15,14 @@ function create_fragment($$, ctx) { insert(target, input, anchor); input.checked = ctx.foo; - - current = true; }, p(changed, ctx) { if (changed.foo) input.checked = ctx.foo; }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/instrumentation-script-if-no-block/expected.js b/test/js/samples/instrumentation-script-if-no-block/expected.js index b8c0cb22e1..319ccb2637 100644 --- a/test/js/samples/instrumentation-script-if-no-block/expected.js +++ b/test/js/samples/instrumentation-script-if-no-block/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, addListener, append, createElement, createText, detachNode, init, insert, run, safe_not_equal, setData } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, addListener, append, createElement, createText, detachNode, init, insert, noop, safe_not_equal, setData } from "svelte/internal"; function create_fragment($$, ctx) { - var button, text1, p, text2, text3, current, dispose; + var button, text1, p, text2, text3, dispose; return { c() { @@ -21,7 +21,6 @@ function create_fragment($$, ctx) { insert(target, p, anchor); append(p, text2); append(p, text3); - current = true; }, p(changed, ctx) { @@ -30,12 +29,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/instrumentation-script-x-equals-x/expected.js b/test/js/samples/instrumentation-script-x-equals-x/expected.js index 429bf51fae..21e26a907f 100644 --- a/test/js/samples/instrumentation-script-x-equals-x/expected.js +++ b/test/js/samples/instrumentation-script-x-equals-x/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, addListener, append, createElement, createText, detachNode, init, insert, run, safe_not_equal, setData } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, addListener, append, createElement, createText, detachNode, init, insert, noop, safe_not_equal, setData } from "svelte/internal"; function create_fragment($$, ctx) { - var button, text1, p, text2, text3_value = ctx.things.length, text3, current, dispose; + var button, text1, p, text2, text3_value = ctx.things.length, text3, dispose; return { c() { @@ -21,7 +21,6 @@ function create_fragment($$, ctx) { insert(target, p, anchor); append(p, text2); append(p, text3); - current = true; }, p(changed, ctx) { @@ -30,12 +29,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/instrumentation-template-if-no-block/expected.js b/test/js/samples/instrumentation-template-if-no-block/expected.js index 8aba31fc4d..d403b12fb1 100644 --- a/test/js/samples/instrumentation-template-if-no-block/expected.js +++ b/test/js/samples/instrumentation-template-if-no-block/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, addListener, append, createElement, createText, detachNode, init, insert, run, safe_not_equal, setData } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, addListener, append, createElement, createText, detachNode, init, insert, noop, safe_not_equal, setData } from "svelte/internal"; function create_fragment($$, ctx) { - var button, text1, p, text2, text3, current, dispose; + var button, text1, p, text2, text3, dispose; return { c() { @@ -21,7 +21,6 @@ function create_fragment($$, ctx) { insert(target, p, anchor); append(p, text2); append(p, text3); - current = true; }, p(changed, ctx) { @@ -30,12 +29,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/instrumentation-template-x-equals-x/expected.js b/test/js/samples/instrumentation-template-x-equals-x/expected.js index 6136f16432..a7496d403a 100644 --- a/test/js/samples/instrumentation-template-x-equals-x/expected.js +++ b/test/js/samples/instrumentation-template-x-equals-x/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, addListener, append, createElement, createText, detachNode, init, insert, run, safe_not_equal, setData } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, addListener, append, createElement, createText, detachNode, init, insert, noop, safe_not_equal, setData } from "svelte/internal"; function create_fragment($$, ctx) { - var button, text1, p, text2, text3_value = ctx.things.length, text3, current, dispose; + var button, text1, p, text2, text3_value = ctx.things.length, text3, dispose; return { c() { @@ -21,7 +21,6 @@ function create_fragment($$, ctx) { insert(target, p, anchor); append(p, text2); append(p, text3); - current = true; }, p(changed, ctx) { @@ -30,12 +29,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/legacy-input-type/expected.js b/test/js/samples/legacy-input-type/expected.js index de095d7c0a..49d3d24f2a 100644 --- a/test/js/samples/legacy-input-type/expected.js +++ b/test/js/samples/legacy-input-type/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, createElement, detachNode, identity, init, insert, noop, run, safe_not_equal, setInputType } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, createElement, detachNode, identity, init, insert, noop, safe_not_equal, setInputType } from "svelte/internal"; function create_fragment($$, ctx) { - var input, current; + var input; return { c() { @@ -12,17 +12,11 @@ function create_fragment($$, ctx) { m(target, anchor) { insert(target, input, anchor); - current = true; }, p: noop, - - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/media-bindings/expected.js b/test/js/samples/media-bindings/expected.js index 645a7d9b0f..17d87e4a9d 100644 --- a/test/js/samples/media-bindings/expected.js +++ b/test/js/samples/media-bindings/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, addListener, add_render_callback, createElement, detachNode, flush, init, insert, run, run_all, safe_not_equal, timeRangesToArray } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, addListener, add_render_callback, createElement, detachNode, flush, init, insert, noop, run_all, safe_not_equal, timeRangesToArray } from "svelte/internal"; function create_fragment($$, ctx) { - var audio, audio_updating = false, audio_animationframe, audio_is_paused = true, current, dispose; + var audio, audio_updating = false, audio_animationframe, audio_is_paused = true, dispose; function audio_timeupdate_handler() { cancelAnimationFrame(audio_animationframe); @@ -34,8 +34,6 @@ function create_fragment($$, ctx) { insert(target, audio, anchor); audio.volume = ctx.volume; - - current = true; }, p(changed, ctx) { @@ -45,12 +43,8 @@ function create_fragment($$, ctx) { audio_updating = false; }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/non-imported-component/expected.js b/test/js/samples/non-imported-component/expected.js index 32a772b3b5..e80b8d0ab1 100644 --- a/test/js/samples/non-imported-component/expected.js +++ b/test/js/samples/non-imported-component/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, callAfter, createText, detachNode, identity, init, insert, mount_component, noop, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, createText, detachNode, identity, init, insert, mount_component, noop, safe_not_equal } from "svelte/internal"; import Imported from "Imported.html"; function create_fragment($$, ctx) { @@ -20,23 +20,22 @@ function create_fragment($$, ctx) { mount_component(imported, target, anchor); insert(target, text, anchor); mount_component(nonimported, target, anchor); - current = true; }, p: noop, - i(target, anchor) { + i() { if (current) return; - this.m(target, anchor); - }, + imported.$$.fragment.i(); - o(outrocallback) { - if (!current) return; + nonimported.$$.fragment.i(); - outrocallback = callAfter(outrocallback, 2); + current = true; + }, - if (imported) imported.$$.fragment.o(outrocallback); - if (nonimported) nonimported.$$.fragment.o(outrocallback); + o() { + if (imported) imported.$$.fragment.o(); + if (nonimported) nonimported.$$.fragment.o(); current = false; }, diff --git a/test/js/samples/select-dynamic-value/expected.js b/test/js/samples/select-dynamic-value/expected.js index cce868ee40..a7f49b940e 100644 --- a/test/js/samples/select-dynamic-value/expected.js +++ b/test/js/samples/select-dynamic-value/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, append, createElement, detachNode, flush, init, insert, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, createElement, detachNode, flush, init, insert, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { - var select, option0, option1, select_value_value, current_1; + var select, option0, option1, select_value_value; return { c() { @@ -31,8 +31,6 @@ function create_fragment($$, ctx) { break; } } - - current_1 = true; }, p(changed, ctx) { @@ -48,12 +46,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current_1) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/setup-method/expected.js b/test/js/samples/setup-method/expected.js index 257de1d245..124e632ddc 100644 --- a/test/js/samples/setup-method/expected.js +++ b/test/js/samples/setup-method/expected.js @@ -1,15 +1,13 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, identity, init, noop, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, identity, init, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { - var current; - return { c: noop, m: noop, p: noop, i: noop, - o: run, + o: noop, d: noop }; } diff --git a/test/js/samples/svg-title/expected.js b/test/js/samples/svg-title/expected.js index ed67789799..3ce818c950 100644 --- a/test/js/samples/svg-title/expected.js +++ b/test/js/samples/svg-title/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, append, createSvgElement, createText, detachNode, identity, init, insert, noop, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, createSvgElement, createText, detachNode, identity, init, insert, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { - var svg, title, text, current; + var svg, title, text; return { c() { @@ -15,17 +15,11 @@ function create_fragment($$, ctx) { insert(target, svg, anchor); append(svg, title); append(title, text); - current = true; }, p: noop, - - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/title/expected.js b/test/js/samples/title/expected.js index cfac2c0ad1..390f11cbcd 100644 --- a/test/js/samples/title/expected.js +++ b/test/js/samples/title/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, flush, init, noop, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, flush, init, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { - var title_value, current; + var title_value; document.title = title_value = "a " + ctx.custom + " title"; @@ -17,7 +17,7 @@ function create_fragment($$, ctx) { }, i: noop, - o: run, + o: noop, d: noop }; } diff --git a/test/js/samples/use-elements-as-anchors/expected.js b/test/js/samples/use-elements-as-anchors/expected.js index e6610407e4..50938e861d 100644 --- a/test/js/samples/use-elements-as-anchors/expected.js +++ b/test/js/samples/use-elements-as-anchors/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, append, createComment, createElement, createText, detachNode, flush, init, insert, run, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, createComment, createElement, createText, detachNode, flush, init, insert, noop, safe_not_equal } from "svelte/internal"; // (2:1) {#if a} function create_if_block_4($$, ctx) { @@ -112,7 +112,7 @@ function create_if_block($$, ctx) { } function create_fragment($$, ctx) { - var div, text0, p0, text2, text3, text4, p1, text6, text7, if_block4_anchor, current; + var div, text0, p0, text2, text3, text4, p1, text6, text7, if_block4_anchor; var if_block0 = (ctx.a) && create_if_block_4($$, ctx); @@ -161,7 +161,6 @@ function create_fragment($$, ctx) { insert(target, text7, anchor); if (if_block4) if_block4.m(target, anchor); insert(target, if_block4_anchor, anchor); - current = true; }, p(changed, ctx) { @@ -221,12 +220,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/js/samples/window-binding-scroll/expected.js b/test/js/samples/window-binding-scroll/expected.js index 0fded5c925..a613882827 100644 --- a/test/js/samples/window-binding-scroll/expected.js +++ b/test/js/samples/window-binding-scroll/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, addListener, add_render_callback, append, createElement, createText, detachNode, flush, init, insert, run, safe_not_equal, setData } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, addListener, add_render_callback, append, createElement, createText, detachNode, flush, init, insert, noop, safe_not_equal, setData } from "svelte/internal"; function create_fragment($$, ctx) { - var scrolling = false, clear_scrolling = () => { scrolling = false }, scrolling_timeout, p, text0, text1, current, dispose; + var scrolling = false, clear_scrolling = () => { scrolling = false }, scrolling_timeout, p, text0, text1, dispose; add_render_callback(ctx.onwindowscroll); @@ -23,7 +23,6 @@ function create_fragment($$, ctx) { insert(target, p, anchor); append(p, text0); append(p, text1); - current = true; }, p(changed, ctx) { @@ -39,12 +38,8 @@ function create_fragment($$, ctx) { } }, - i(target, anchor) { - if (current) return; - this.m(target, anchor); - }, - - o: run, + i: noop, + o: noop, d(detach) { if (detach) { diff --git a/test/runtime/index.js b/test/runtime/index.js index 334426c424..8912e3dab0 100644 --- a/test/runtime/index.js +++ b/test/runtime/index.js @@ -13,7 +13,6 @@ import { setupHtmlEqual } from "../helpers.js"; -const main = path.resolve('index.js'); let svelte$; let svelte; diff --git a/test/runtime/samples/nested-transition-detach-if-false/_config.js b/test/runtime/samples/nested-transition-detach-if-false/_config.js index b76eb5cd32..d2ae78ffe3 100644 --- a/test/runtime/samples/nested-transition-detach-if-false/_config.js +++ b/test/runtime/samples/nested-transition-detach-if-false/_config.js @@ -13,7 +13,7 @@ export default { `, - test({ assert, component, target, window, raf }) { + test({ assert, component, target }) { component.folder.open = false; assert.htmlEqual(target.innerHTML, `
  • diff --git a/test/runtime/samples/transition-css-delay/_config.js b/test/runtime/samples/transition-css-delay/_config.js deleted file mode 100644 index 6e2c4a9ba4..0000000000 --- a/test/runtime/samples/transition-css-delay/_config.js +++ /dev/null @@ -1,10 +0,0 @@ -export default { - test({ assert, component, target, window, raf }) { - component.visible = true; - const div = target.querySelector('div'); - assert.strictEqual(div.style.opacity, '0'); - - raf.tick(50); - assert.strictEqual(div.style.opacity, ''); - } -}; \ No newline at end of file diff --git a/test/runtime/samples/transition-css-delay/main.html b/test/runtime/samples/transition-css-delay/main.html deleted file mode 100644 index faf89582e8..0000000000 --- a/test/runtime/samples/transition-css-delay/main.html +++ /dev/null @@ -1,17 +0,0 @@ - - -{#if visible} -
    delayed
    -{/if} \ No newline at end of file diff --git a/test/runtime/samples/transition-css-duration/_config.js b/test/runtime/samples/transition-css-duration/_config.js index ed25357681..28a78944bb 100644 --- a/test/runtime/samples/transition-css-duration/_config.js +++ b/test/runtime/samples/transition-css-duration/_config.js @@ -4,8 +4,10 @@ export default { const div = target.querySelector('div'); raf.tick(25); + component.visible = false; + raf.tick(26); assert.ok(~div.style.animation.indexOf('25ms')); }, }; diff --git a/test/runtime/samples/transition-css-in-out-in/_config.js b/test/runtime/samples/transition-css-in-out-in/_config.js new file mode 100644 index 0000000000..10719280e9 --- /dev/null +++ b/test/runtime/samples/transition-css-in-out-in/_config.js @@ -0,0 +1,20 @@ +export default { + test({ assert, component, target, window, raf }) { + component.visible = true; + const div = target.querySelector('div'); + + assert.equal(div.style.animation, `__svelte_3809512021_0 100ms linear 0ms 1 both`); + + raf.tick(50); + component.visible = false; + + // both in and out styles + assert.equal(div.style.animation, `__svelte_3809512021_0 100ms linear 0ms 1 both, __svelte_3750847757_0 100ms linear 0ms 1 both`); + + raf.tick(75); + component.visible = true; + + // reset original styles + assert.equal(div.style.animation, `__svelte_3809512021_1 100ms linear 0ms 1 both`); + }, +}; diff --git a/test/runtime/samples/transition-css-in-out-in/main.html b/test/runtime/samples/transition-css-in-out-in/main.html new file mode 100644 index 0000000000..5108452a39 --- /dev/null +++ b/test/runtime/samples/transition-css-in-out-in/main.html @@ -0,0 +1,25 @@ + + +{#if visible} +
    +{/if} \ No newline at end of file diff --git a/test/runtime/samples/transition-js-aborted-outro-in-each/_config.js b/test/runtime/samples/transition-js-aborted-outro-in-each/_config.js index 75242d21af..e78862e86c 100644 --- a/test/runtime/samples/transition-js-aborted-outro-in-each/_config.js +++ b/test/runtime/samples/transition-js-aborted-outro-in-each/_config.js @@ -7,7 +7,7 @@ export default { ] }, - test({ assert, component, target, window, raf }) { + test({ assert, component, target, raf }) { const { things } = component; component.things = []; diff --git a/test/runtime/samples/transition-js-aborted-outro/_config.js b/test/runtime/samples/transition-js-aborted-outro/_config.js index 87ad32be07..d61407e1bd 100644 --- a/test/runtime/samples/transition-js-aborted-outro/_config.js +++ b/test/runtime/samples/transition-js-aborted-outro/_config.js @@ -3,7 +3,7 @@ export default { visible: true, }, - test({ assert, component, target, window, raf }) { + test({ assert, component, target, raf }) { component.visible = false; const span = target.querySelector('span'); diff --git a/test/runtime/samples/transition-js-await-block/_config.js b/test/runtime/samples/transition-js-await-block/_config.js index 5cddc8a95c..2e01dd7f76 100644 --- a/test/runtime/samples/transition-js-await-block/_config.js +++ b/test/runtime/samples/transition-js-await-block/_config.js @@ -13,7 +13,7 @@ export default { intro: true, - test({ assert, component, target, window, raf }) { + test({ assert, target, raf }) { let p = target.querySelector('p'); assert.equal(p.className, 'pending'); diff --git a/test/runtime/samples/transition-js-dynamic-if-block-bidi/_config.js b/test/runtime/samples/transition-js-dynamic-if-block-bidi/_config.js index 6036be6055..aa0bd9e1aa 100644 --- a/test/runtime/samples/transition-js-dynamic-if-block-bidi/_config.js +++ b/test/runtime/samples/transition-js-dynamic-if-block-bidi/_config.js @@ -3,7 +3,7 @@ export default { name: 'world' }, - test({ assert, component, target, window, raf }) { + test({ assert, component, target, raf }) { global.count = 0; component.visible = true; diff --git a/test/runtime/samples/transition-js-if-block-in-each-block-bidi-3/_config.js b/test/runtime/samples/transition-js-if-block-in-each-block-bidi-3/_config.js index 261731c700..04df38a09c 100644 --- a/test/runtime/samples/transition-js-if-block-in-each-block-bidi-3/_config.js +++ b/test/runtime/samples/transition-js-if-block-in-each-block-bidi-3/_config.js @@ -12,9 +12,7 @@ export default {
    5
    `, - test({ assert, component, target, window, raf }) { - const divs = target.querySelectorAll('div'); - + test({ assert, component, target, raf }) { raf.tick(100); component.threshold = 4; diff --git a/test/runtime/samples/transition-js-if-else-block-intro/_config.js b/test/runtime/samples/transition-js-if-else-block-intro/_config.js index 2bf1483dac..c5eccf50e5 100644 --- a/test/runtime/samples/transition-js-if-else-block-intro/_config.js +++ b/test/runtime/samples/transition-js-if-else-block-intro/_config.js @@ -1,7 +1,7 @@ export default { intro: true, - test({ assert, component, target, window, raf }) { + test({ assert, component, target, raf }) { assert.equal(target.querySelector('div'), component.no); assert.equal(component.no.foo, 0); diff --git a/test/runtime/samples/transition-js-nested-each-delete/_config.js b/test/runtime/samples/transition-js-nested-each-delete/_config.js index c2a886db9a..041cbebc66 100644 --- a/test/runtime/samples/transition-js-nested-each-delete/_config.js +++ b/test/runtime/samples/transition-js-nested-each-delete/_config.js @@ -4,7 +4,7 @@ export default { things: ['a', 'b', 'c'] }, - test({ assert, component, target, window, raf }) { + test({ assert, component, target, raf }) { assert.htmlEqual(target.innerHTML, `
    a
    b