nested component transitions

pull/1451/head
Rich Harris 7 years ago
parent 3623c4abc9
commit 042ec54f7f

@ -119,11 +119,11 @@ export default class Block {
}
addIntro() {
this.hasIntroMethod = true;
this.hasIntroMethod = this.compiler.target.hasIntroTransitions = true;
}
addOutro() {
this.hasOutroMethod = true;
this.hasOutroMethod = this.compiler.target.hasOutroTransitions = true;
this.outros += 1;
}

@ -182,6 +182,7 @@ export default function dom(
})}
${compiler.bindingGroups.length &&
`this._bindingGroups = [${Array(compiler.bindingGroups.length).fill('[]').join(', ')}];`}
this._intro = ${compiler.options.skipIntroByDefault ? 'options.intro' : 'true'};
${templateProperties.onstate && `this._handlers.state = [%onstate];`}
${templateProperties.onupdate && `this._handlers.update = [%onupdate];`}
@ -251,6 +252,8 @@ export default function dom(
`}
}
`}
${compiler.options.skipIntroByDefault && `this._intro = true;`}
`;
if (compiler.customElement) {

@ -77,7 +77,7 @@ export default class AwaitBlock extends Node {
this.then.block.hasOutroMethod = hasOutros;
this.catch.block.hasOutroMethod = hasOutros;
if (hasOutros) block.addOutro();
if (hasOutros && this.compiler.options.nestedTransitions) block.addOutro();
}
build(
@ -171,7 +171,7 @@ export default class AwaitBlock extends Node {
`);
}
if (this.pending.block.hasOutroMethod) {
if (this.pending.block.hasOutroMethod && this.compiler.options.nestedTransitions) {
block.builders.outro.addBlock(deindent`
#outrocallback = @callAfter(#outrocallback, 3);
for (let #i = 0; #i < 3; #i += 1) {

@ -108,6 +108,10 @@ export default class Component extends Node {
child.init(block, stripWhitespace, nextSibling);
});
}
if (this.compiler.options.nestedTransitions) {
block.addOutro();
}
}
build(
@ -383,7 +387,7 @@ export default class Component extends Node {
block.builders.mount.addBlock(deindent`
if (${name}) {
${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'}, ${compiler.options.skipIntroByDefault ? 'false' : 'true'});
${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'}, ${compiler.options.skipIntroByDefault ? '#component._intro' : 'true'});
${this.ref && `#component.refs.${this.ref} = ${name};`}
}
`);
@ -405,7 +409,7 @@ export default class Component extends Node {
${name}._fragment.c();
${this.children.map(child => child.remount(name))}
${name}._mount(${updateMountNode}, ${anchor}, ${compiler.options.skipIntroByDefault ? 'false' : 'true'});
${name}._mount(${updateMountNode}, ${anchor}, true);
${this.handlers.map(handler => deindent`
${name}.on("${handler.name}", ${handler.var});
@ -464,7 +468,7 @@ export default class Component extends Node {
}
block.builders.mount.addLine(
`${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'}, ${compiler.options.skipIntroByDefault ? 'false' : 'true'});`
`${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'}, ${compiler.options.skipIntroByDefault ? '#component._intro' : 'true'});`
);
if (updates.length) {
@ -480,10 +484,16 @@ export default class Component extends Node {
${this.ref && `if (#component.refs.${this.ref} === ${name}) #component.refs.${this.ref} = null;`}
`);
}
if (this.compiler.options.nestedTransitions) {
block.builders.outro.addLine(
`${name}._fragment.o(#outrocallback);`
);
}
}
remount(name: string) {
return `${this.var}._mount(${name}._slotted.default, null, ${this.compiler.options.skipIntroByDefault ? 'false' : 'true'});`;
return `${this.var}._mount(${name}._slotted.default, null, false);`;
}
ssr() {

@ -321,10 +321,12 @@ export default class EachBlock extends Node {
${blocks} = @updateKeyedEach(${blocks}, #component, changed, ${get_key}, ${dynamic ? '1' : '0'}, ctx, ${this.each_block_value}, ${lookup}, ${updateMountNode}, ${String(this.block.hasOutroMethod)}, ${create_each_block}, "${mountOrIntro}", ${anchor}, ${this.get_each_context});
`);
block.builders.outro.addBlock(deindent`
#outrocallback = @callAfter(#outrocallback, ${blocks}.length);
for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].o(#outrocallback);
`)
if (this.compiler.options.nestedTransitions) {
block.builders.outro.addBlock(deindent`
#outrocallback = @callAfter(#outrocallback, ${blocks}.length);
for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].o(#outrocallback);
`);
}
block.builders.destroy.addBlock(deindent`
for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].d(${parentNode ? '' : 'detach'});
@ -462,7 +464,7 @@ export default class EachBlock extends Node {
`);
}
if (outro) {
if (outro && this.compiler.options.nestedTransitions) {
block.builders.outro.addBlock(deindent`
#outrocallback = @callAfter(#outrocallback, #i);
for (let #i = 0; #i < ${iterations}.length; #i += 1) ${outro}(#i, 0, #outrocallback);`

@ -182,13 +182,11 @@ export default class Element extends Node {
if (this.intro) {
this.parent.cannotUseInnerHTML();
this.compiler.target.hasIntroTransitions = true;
block.addIntro();
}
if (this.outro) {
this.parent.cannotUseInnerHTML();
this.compiler.target.hasOutroTransitions = true;
block.addOutro();
}

@ -26,6 +26,7 @@ function create_main_fragment(component, ctx) {
function Main(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -29,6 +29,7 @@ class Main extends HTMLElement {
super();
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this.attachShadow({ mode: 'open' });

@ -28,6 +28,7 @@ function Main(options) {
if (!options || (!options.target && !options.root)) throw new Error("'target' is a required option");
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -29,6 +29,7 @@ function create_main_fragment(component, ctx) {
function Main(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
if (!options.root) {
this._oncreate = [];

@ -1 +1 @@
{"version":3,"file":"Main.js","sources":["../src/Main.html"],"sourcesContent":["<Widget/>\n\n<script>\n\timport Widget from './Widget.html';\n\n\texport default {\n\t\tcomponents: {\n\t\t\tWidget\n\t\t}\n\t};\n</script>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
{"version":3,"file":"Main.js","sources":["../src/Main.html"],"sourcesContent":["<Widget/>\n\n<script>\n\timport Widget from './Widget.html';\n\n\texport default {\n\t\tcomponents: {\n\t\t\tWidget\n\t\t}\n\t};\n</script>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

@ -26,6 +26,7 @@ function create_main_fragment(component, ctx) {
function Widget(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -1 +1 @@
{"version":3,"file":"Widget.js","sources":["../src/Widget.html"],"sourcesContent":["<p>widget</p>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
{"version":3,"file":"Widget.js","sources":["../src/Widget.html"],"sourcesContent":["<p>widget</p>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

@ -29,6 +29,7 @@ function create_main_fragment(component, ctx) {
function Main(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
if (!options.root) {
this._oncreate = [];

@ -26,6 +26,7 @@ function create_main_fragment(component, ctx) {
function Widget(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -29,6 +29,7 @@ function create_main_fragment(component, ctx) {
function Main(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
if (!options.root) {
this._oncreate = [];

@ -26,6 +26,7 @@ function create_main_fragment(component, ctx) {
function Widget(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -41,6 +41,7 @@ var Main = (function(answer) { "use strict";
function Main(options) {
init(this, options);
this._state = assign(data(), options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -26,6 +26,7 @@ function create_main_fragment(component, ctx) {
function Main(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);
@ -165,4 +166,4 @@ function callAll(fns) {
while (fns && fns.length) fns.shift()();
}
export default Main;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTWFpbi5qcyIsInNvdXJjZXMiOlsiLi4vc3JjL01haW4uaHRtbCJdLCJzb3VyY2VzQ29udGVudCI6WyI8cD5IZWxsbyB3b3JsZCE8L3A+XG5cbjxzY3JpcHQ+XG5cdGV4cG9ydCBkZWZhdWx0IHtcblx0XHRvbnJlbmRlciAoKSB7XG5cdFx0XHRjb25zb2xlLmxvZyggJ2hlcmUnICk7XG5cdFx0fVxuXHR9O1xuPC9zY3JpcHQ+Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7In0=
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTWFpbi5qcyIsInNvdXJjZXMiOlsiLi4vc3JjL01haW4uaHRtbCJdLCJzb3VyY2VzQ29udGVudCI6WyI8cD5IZWxsbyB3b3JsZCE8L3A+XG5cbjxzY3JpcHQ+XG5cdGV4cG9ydCBkZWZhdWx0IHtcblx0XHRvbnJlbmRlciAoKSB7XG5cdFx0XHRjb25zb2xlLmxvZyggJ2hlcmUnICk7XG5cdFx0fVxuXHR9O1xuPC9zY3JpcHQ+Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OyJ9

@ -26,6 +26,7 @@ function create_main_fragment(component, ctx) {
function Main(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -1 +1 @@
{"version":3,"file":"Main.js","sources":["../src/Main.html"],"sourcesContent":["<p>Hello world!</p>\n\n<script>\n\texport default {\n\t\tonrender () {\n\t\t\tconsole.log( 'here' );\n\t\t}\n\t};\n</script>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
{"version":3,"file":"Main.js","sources":["../src/Main.html"],"sourcesContent":["<p>Hello world!</p>\n\n<script>\n\texport default {\n\t\tonrender () {\n\t\t\tconsole.log( 'here' );\n\t\t}\n\t};\n</script>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

@ -34,6 +34,7 @@ function Main(options) {
init(this, options);
this._state = assign(this.store._init(["name"]), options.data);
this.store._add(this, ["name"]);
this._intro = true;
this._handlers.destroy = [removeFromStore];

@ -174,6 +174,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -47,6 +47,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -195,6 +195,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
if (!options.root) {
this._oncreate = [];

@ -35,6 +35,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
if (!options.root) {
this._oncreate = [];

@ -179,6 +179,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign(data(), options.data);
this._intro = true;
if (!document.getElementById("svelte-1a7i8ec-style")) add_css();

@ -44,6 +44,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign(data(), options.data);
this._intro = true;
if (!document.getElementById("svelte-1a7i8ec-style")) add_css();

@ -147,6 +147,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
if (!options.root) {
this._oncreate = [];

@ -31,6 +31,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
if (!options.root) {
this._oncreate = [];

@ -151,6 +151,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
if (!options.root) {
this._oncreate = [];

@ -31,6 +31,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
if (!options.root) {
this._oncreate = [];

@ -151,6 +151,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
if (!options.root) {
this._oncreate = [];

@ -31,6 +31,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
if (!options.root) {
this._oncreate = [];

@ -147,6 +147,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
if (!options.root) {
this._oncreate = [];

@ -31,6 +31,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
if (!options.root) {
this._oncreate = [];

@ -142,6 +142,7 @@ function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._recompute({ x: 1 }, this._state);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -26,6 +26,7 @@ function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._recompute({ x: 1 }, this._state);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -166,6 +166,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
if (!document.getElementById("svelte-1slhpfn-style")) add_css();

@ -34,6 +34,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
if (!document.getElementById("svelte-1slhpfn-style")) add_css();

@ -158,6 +158,7 @@ class SvelteComponent extends HTMLElement {
super();
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `<style>div{animation:foo 1s}@keyframes foo{0%{opacity:0}100%{opacity:1}}</style>`;

@ -30,6 +30,7 @@ class SvelteComponent extends HTMLElement {
super();
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `<style>div{animation:foo 1s}@keyframes foo{0%{opacity:0}100%{opacity:1}}</style>`;

@ -248,6 +248,7 @@ function get_each_context(ctx, list, i) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -102,6 +102,7 @@ function get_each_context(ctx, list, i) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -147,6 +147,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign(data_1(), options.data);
this._intro = true;
if (!options.root) {
this._oncreate = [];

@ -27,6 +27,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign(data_1(), options.data);
this._intro = true;
if (!options.root) {
this._oncreate = [];

@ -202,6 +202,7 @@ function SvelteComponent(options) {
this._state = assign({ Math : Math }, options.data);
this._recompute({ foo: 1 }, this._state);
if (!('foo' in this._state)) console.warn("<SvelteComponent> was created without expected data property 'foo'");
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -48,6 +48,7 @@ function SvelteComponent(options) {
this._state = assign({ Math : Math }, options.data);
this._recompute({ foo: 1 }, this._state);
if (!('foo' in this._state)) console.warn("<SvelteComponent> was created without expected data property 'foo'");
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -170,6 +170,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -38,6 +38,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -174,6 +174,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -38,6 +38,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -172,6 +172,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -36,6 +36,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -289,6 +289,7 @@ function get_each_context(ctx, list, i) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -141,6 +141,7 @@ function get_each_context(ctx, list, i) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -172,6 +172,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -45,6 +45,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -159,6 +159,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -31,6 +31,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -220,6 +220,7 @@ function create_if_block_1(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -88,6 +88,7 @@ function create_if_block_1(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -196,6 +196,7 @@ function create_if_block(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -64,6 +64,7 @@ function create_if_block(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -168,6 +168,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -36,6 +36,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -163,6 +163,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -31,6 +31,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -163,6 +163,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -31,6 +31,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -174,6 +174,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -42,6 +42,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -184,6 +184,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -40,6 +40,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -178,6 +178,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -38,6 +38,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -161,6 +161,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -27,6 +27,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -227,6 +227,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
if (!options.root) {
this._oncreate = [];

@ -83,6 +83,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
if (!options.root) {
this._oncreate = [];

@ -173,6 +173,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
if (!options.root) {
this._oncreate = [];

@ -44,6 +44,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
if (!options.root) {
this._oncreate = [];

@ -149,6 +149,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -33,6 +33,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -166,6 +166,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -30,6 +30,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -140,6 +140,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -24,6 +24,7 @@ function create_main_fragment(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -384,6 +384,7 @@ function create_if_block_4(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -244,6 +244,7 @@ function create_if_block_4(component, ctx) {
function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -193,6 +193,7 @@ function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._state.y = window.pageYOffset;
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -57,6 +57,7 @@ function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
this._state.y = window.pageYOffset;
this._intro = true;
this._fragment = create_main_fragment(this, this._state);

@ -115,7 +115,7 @@ describe("runtime", () => {
try {
SvelteComponent = require(`./samples/${dir}/main.html`);
} catch (err) {
showOutput(cwd, { shared, format: 'cjs', hydratable: hydrate, store: !!compileOptions.store }, compile); // eslint-disable-line no-console
showOutput(cwd, { shared, format: 'cjs', hydratable: hydrate, store: !!compileOptions.store, skipIntroByDefault: compileOptions.skipIntroByDefault, nestedTransitions: compileOptions.nestedTransitions }, compile); // eslint-disable-line no-console
throw err;
}
@ -174,12 +174,12 @@ describe("runtime", () => {
config.error(assert, err);
} else {
failed.add(dir);
showOutput(cwd, { shared, format: 'cjs', hydratable: hydrate, store: !!compileOptions.store }, compile); // eslint-disable-line no-console
showOutput(cwd, { shared, format: 'cjs', hydratable: hydrate, store: !!compileOptions.store, skipIntroByDefault: compileOptions.skipIntroByDefault, nestedTransitions: compileOptions.nestedTransitions }, compile); // eslint-disable-line no-console
throw err;
}
})
.then(() => {
if (config.show) showOutput(cwd, { shared, format: 'cjs', hydratable: hydrate, store: !!compileOptions.store }, compile);
if (config.show) showOutput(cwd, { shared, format: 'cjs', hydratable: hydrate, store: !!compileOptions.store, skipIntroByDefault: compileOptions.skipIntroByDefault, nestedTransitions: compileOptions.nestedTransitions }, compile);
});
});
}

@ -0,0 +1,16 @@
<div transition:foo></div>
<script>
export default {
transitions: {
foo(node, params) {
return {
duration: 100,
tick: t => {
node.foo = t;
}
};
}
}
};
</script>

@ -0,0 +1,27 @@
export default {
skipIntroByDefault: true,
nestedTransitions: true,
data: {
x: false
},
test(assert, component, target, window, raf) {
component.set({ x: true });
const div = target.querySelector('div');
assert.equal(div.foo, 0);
raf.tick(100);
assert.equal(div.foo, 1);
component.set({ x: false });
assert.htmlEqual(target.innerHTML, '<div></div>');
raf.tick(150);
assert.equal(div.foo, 0.5);
raf.tick(200);
assert.htmlEqual(target.innerHTML, '');
}
};

@ -0,0 +1,13 @@
{#if x}
<Widget/>
{/if}
<script>
import Widget from './Widget.html';
export default {
components: {
Widget: './Widget.html'
}
};
</script>
Loading…
Cancel
Save