Merge pull request #1451 from sveltejs/nested-transitions

Nested transitions
pull/1781/head
Rich Harris 6 years ago committed by GitHub
commit c37e6a7267
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -5,6 +5,7 @@ import Compiler from '../Compiler';
import { Node } from '../../interfaces';
export interface BlockOptions {
parent?: Block;
name: string;
compiler?: Compiler;
comment?: string;
@ -14,6 +15,7 @@ export interface BlockOptions {
}
export default class Block {
parent?: Block;
compiler: Compiler;
name: string;
comment?: string;
@ -50,6 +52,7 @@ export default class Block {
autofocus: string;
constructor(options: BlockOptions) {
this.parent = options.parent;
this.compiler = options.compiler;
this.name = options.name;
this.comment = options.comment;
@ -115,6 +118,15 @@ export default class Block {
}
}
addIntro() {
this.hasIntroMethod = this.compiler.target.hasIntroTransitions = true;
}
addOutro() {
this.hasOutroMethod = this.compiler.target.hasOutroTransitions = true;
this.outros += 1;
}
addVariable(name: string, init?: string) {
if (this.variables.has(name) && this.variables.get(name) !== init) {
throw new Error(
@ -246,11 +258,15 @@ export default class Block {
},
`);
} else {
properties.addBlock(deindent`
${dev ? 'i: function intro' : 'i'}(#target, anchor) {
this.m(#target, anchor);
},
`);
if (this.builders.mount.isEmpty()) {
properties.addBlock(`i: @noop,`);
} else {
properties.addBlock(deindent`
${dev ? 'i: function intro' : 'i'}(#target, anchor) {
this.m(#target, anchor);
},
`);
}
}
if (hasOutros) {
@ -260,7 +276,7 @@ export default class Block {
${outroing} = true;
${hasIntros && `${introing} = false;`}
${this.outros > 1 && `var #outros = ${this.outros};`}
${this.outros > 1 && `#outrocallback = @callAfter(#outrocallback, ${this.outros});`}
${this.builders.outro}
},

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

@ -76,6 +76,8 @@ export default class AwaitBlock extends Node {
this.pending.block.hasOutroMethod = hasOutros;
this.then.block.hasOutroMethod = hasOutros;
this.catch.block.hasOutroMethod = hasOutros;
if (hasOutros && this.compiler.options.nestedTransitions) block.addOutro();
}
build(
@ -169,6 +171,17 @@ export default class AwaitBlock extends Node {
`);
}
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) {
const block = ${info}.blocks[#i];
if (block) block.o(#outrocallback);
else #outrocallback();
}
`);
}
block.builders.destroy.addBlock(deindent`
${info}.block.d(${parentNode ? '' : 'detach'});
${info} = null;

@ -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() {

@ -118,6 +118,10 @@ export default class EachBlock extends Node {
);
this.else.block.hasUpdateMethod = this.else.block.dependencies.size > 0;
}
if (this.block.hasOutroMethod || (this.else && this.else.block.hasOutroMethod)) {
block.addOutro();
}
}
build(
@ -313,9 +317,17 @@ export default class EachBlock extends Node {
block.builders.update.addBlock(deindent`
var ${this.each_block_value} = ${snippet};
${this.block.hasOutroMethod && `@transitionManager.groupOutros();`}
${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});
`);
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'});
`);
@ -372,6 +384,21 @@ export default class EachBlock extends Node {
allDependencies.add(dependency);
});
const outro = this.block.hasOutroMethod && block.getUniqueName('outro')
if (outro) {
block.builders.init.addBlock(deindent`
function ${outro}(i, detach, fn) {
if (${iterations}[i]) {
${iterations}[i].o(() => {
${iterations}[i].d(detach);
if (detach) ${iterations}[i] = null;
if (fn) fn();
});
}
}
`);
}
// TODO do this for keyed blocks as well
const condition = Array.from(allDependencies)
.map(dependency => `changed.${dependency}`)
@ -406,27 +433,21 @@ export default class EachBlock extends Node {
const start = this.block.hasUpdateMethod ? '0' : `${iterations}.length`;
const outro = block.getUniqueName('outro');
const destroy = this.block.hasOutroMethod
? deindent`
function ${outro}(i) {
if (${iterations}[i]) {
${iterations}[i].o(function() {
${iterations}[i].d(1);
${iterations}[i] = null;
});
}
}
let destroy;
if (this.block.hasOutroMethod) {
destroy = deindent`
@transitionManager.groupOutros();
for (; #i < ${iterations}.length; #i += 1) ${outro}(#i);
`
: deindent`
for (; #i < ${iterations}.length; #i += 1) ${outro}(#i, 1);
`;
} else {
destroy = deindent`
for (; #i < ${iterations}.length; #i += 1) {
${iterations}[#i].d(1);
}
${iterations}.length = ${this.each_block_value}.${length};
`;
}
block.builders.update.addBlock(deindent`
if (${condition}) {
@ -443,6 +464,13 @@ export default class EachBlock extends Node {
`);
}
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);`
);
}
block.builders.destroy.addBlock(`@destroyEach(${iterations}, detach);`);
}

@ -182,13 +182,12 @@ export default class Element extends Node {
if (this.intro) {
this.parent.cannotUseInnerHTML();
this.compiler.target.hasIntroTransitions = block.hasIntroMethod = true;
block.addIntro();
}
if (this.outro) {
this.parent.cannotUseInnerHTML();
this.compiler.target.hasOutroTransitions = block.hasOutroMethod = true;
block.outros += 1;
block.addOutro();
}
if (this.ref) {
@ -711,7 +710,7 @@ export default class Element extends Node {
block.builders.outro.addBlock(deindent`
${name}.run(0, () => {
${block.outros > 1 ? `if (--#outros === 0) #outrocallback();` : `#outrocallback();`}
#outrocallback();
${name} = null;
});
`);
@ -758,9 +757,7 @@ export default class Element extends Node {
// group) prior to their removal from the DOM
block.builders.outro.addBlock(deindent`
${outroName} = @wrapTransition(#component, ${this.var}, ${fn}, ${snippet}, false);
${outroName}.run(0, () => {
${block.outros > 1 ? `if (--#outros === 0) #outrocallback();` : `#outrocallback();`}
});
${outroName}.run(0, #outrocallback);
`);
}
}

@ -95,6 +95,11 @@ export default class IfBlock extends Node {
attachBlocks(this);
if (compiler.options.nestedTransitions) {
if (hasIntros) block.addIntro();
if (hasOutros) block.addOutro();
}
blocks.forEach(block => {
block.hasUpdateMethod = dynamic;
block.hasIntroMethod = hasIntros;
@ -129,11 +134,23 @@ export default class IfBlock extends Node {
if (this.else) {
if (hasOutros) {
this.buildCompoundWithOutros(block, parentNode, parentNodes, branches, dynamic, vars);
if (this.compiler.options.nestedTransitions) {
block.builders.outro.addLine(
`${name}.o(#outrocallback);`
);
}
} else {
this.buildCompound(block, parentNode, parentNodes, branches, dynamic, vars);
}
} else {
this.buildSimple(block, parentNode, parentNodes, branches[0], dynamic, vars);
if (hasOutros && this.compiler.options.nestedTransitions) {
block.builders.outro.addLine(
`if (${name}) ${name}.o(#outrocallback);`
);
}
}
block.builders.create.addLine(`${if_name}${name}.c();`);

@ -67,6 +67,7 @@ export interface CompileOptions {
// to remove in v3
skipIntroByDefault?: boolean;
nestedTransitions: boolean;
}
export interface GenerateOptions {

@ -1,5 +1,3 @@
import { transitionManager } from './transitions.js';
export function destroyBlock(block, lookup) {
block.d(1);
lookup[block.key] = null;
@ -45,7 +43,6 @@ export function updateKeyedEach(old_blocks, component, changed, get_key, dynamic
var did_move = {};
var destroy = has_outro ? outroAndDestroyBlock : destroyBlock;
if (has_outro) transitionManager.groupOutros();
function insert(block) {
block[intro_method](node, next);

@ -12,4 +12,10 @@ export function assignTrue(tar, src) {
export function isPromise(value) {
return value && typeof value.then === 'function';
}
export function callAfter(fn, i) {
return () => {
if (!--i) fn();
};
}

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

@ -73,6 +73,7 @@ describe("runtime", () => {
compileOptions.store = !!config.store;
compileOptions.immutable = config.immutable;
compileOptions.skipIntroByDefault = config.skipIntroByDefault;
compileOptions.nestedTransitions = config.nestedTransitions;
Object.keys(require.cache)
.filter(x => x.endsWith(".html"))
@ -114,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;
}
@ -173,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,37 @@
let fulfil;
const promise = new Promise(f => {
fulfil = f;
});
export default {
skipIntroByDefault: true,
nestedTransitions: true,
data: {
x: false,
promise
},
test(assert, component, target, window, raf) {
component.set({ x: true });
fulfil();
return promise.then(() => {
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,20 @@
{#if x}
{#await promise then value}
<div transition:foo></div>
{/await}
{/if}
<script>
export default {
transitions: {
foo(node, params) {
return {
duration: 100,
tick: t => {
node.foo = t;
}
};
}
}
};
</script>

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

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save