Skip to content

Commit

Permalink
Merge pull request #1453 from sveltejs/deferred-transitions
Browse files Browse the repository at this point in the history 
Deferred transitions
  • Loading branch information
@Rich-Harris
Rich-Harris authored May 13, 2018
2 parents 8d9a3ef + f02177d commit 6d00f2b
Show file tree
Hide file tree
Showing 90 changed files with 280 additions and 215 deletions.
4 changes: 2 additions & 2 deletions src/compile/dom/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,7 @@ export default function dom(
this._fragment.c();
this._fragment.${block.hasIntroMethod ? 'i' : 'm'}(this.shadowRoot, null);
if (options.target) this._mount(options.target, options.anchor, ${options.skipIntroByDefault ? `options.intro` : 'true'});
if (options.target) this._mount(options.target, options.anchor);
` : deindent`
if (options.target) {
${compiler.options.hydratable
Expand All @@ -241,7 +241,7 @@ export default function dom(
${options.dev && `if (options.hydrate) throw new Error("options.hydrate only works if the component was compiled with the \`hydratable: true\` option");`}
this._fragment.c();
`}
this._mount(options.target, options.anchor, ${options.skipIntroByDefault ? `options.intro` : 'true'});
this._mount(options.target, options.anchor);
${(compiler.hasComponents || target.hasComplexBindings || hasInitHooks || target.hasIntroTransitions) && deindent`
${compiler.hasComponents && `this._lock = true;`}
Expand Down
8 changes: 4 additions & 4 deletions src/compile/nodes/Component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -387,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 ? '#component._intro' : 'true'});
${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'});
${this.ref && `#component.refs.${this.ref} = ${name};`}
}
`);
Expand All @@ -409,7 +409,7 @@ export default class Component extends Node {
${name}._fragment.c();
${this.children.map(child => child.remount(name))}
${name}._mount(${updateMountNode}, ${anchor}, true);
${name}._mount(${updateMountNode}, ${anchor});
${this.handlers.map(handler => deindent`
${name}.on("${handler.name}", ${handler.var});
Expand Down Expand Up @@ -468,7 +468,7 @@ export default class Component extends Node {
}

block.builders.mount.addLine(
`${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'}, ${compiler.options.skipIntroByDefault ? '#component._intro' : 'true'});`
`${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'});`
);

if (updates.length) {
Expand All @@ -493,7 +493,7 @@ export default class Component extends Node {
}

remount(name: string) {
return `${this.var}._mount(${name}._slotted.default, null, false);`;
return `${this.var}._mount(${name}._slotted.default, null);`;
}

ssr() {
Expand Down
5 changes: 3 additions & 2 deletions src/compile/nodes/Element.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -699,7 +699,7 @@ export default class Element extends Node {

const fn = `%transitions-${intro.name}`;

block.builders.intro.addBlock(deindent`
block.builders.intro.addConditional(`#component._intro`, deindent`
if (${name}) ${name}.invalidate();
#component.root._aftercreate.push(() => {
Expand All @@ -709,6 +709,7 @@ export default class Element extends Node {
`);

block.builders.outro.addBlock(deindent`
if (!${name}) ${name} = @wrapTransition(#component, ${this.var}, ${fn}, ${snippet}, false);
${name}.run(0, () => {
#outrocallback();
${name} = null;
Expand All @@ -733,7 +734,7 @@ export default class Element extends Node {
`);
}

block.builders.intro.addBlock(deindent`
block.builders.intro.addConditional(`#component._intro`, deindent`
#component.root._aftercreate.push(() => {
${introName} = @wrapTransition(#component, ${this.var}, ${fn}, ${snippet}, true);
${introName}.run(1);
Expand Down
4 changes: 2 additions & 2 deletions src/shared/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,8 +128,8 @@ export function callAll(fns) {
while (fns && fns.length) fns.shift()();
}

export function _mount(target, anchor, intro) {
this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
export function _mount(target, anchor) {
this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
}

export var PENDING = {};
Expand Down
51 changes: 40 additions & 11 deletions src/shared/transitions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,19 +27,12 @@ export function hash(str) {
}

export function wrapTransition(component, node, fn, params, intro) {
const obj = fn(node, params);
const duration = obj.duration || 300;
const ease = obj.easing || linear;
let obj = fn(node, params);
let duration;
let ease;
let cssText;

if (intro) {
if (obj.css && obj.delay) {
cssText = node.style.cssText;
node.style.cssText += obj.css(0, 1);
}

if (obj.tick) obj.tick(0, 1);
}
let initialised = false;

return {
t: intro ? 0 : 1,
Expand All @@ -48,12 +41,36 @@ export function wrapTransition(component, node, fn, params, intro) {
pending: null,

run(b, callback) {
if (typeof obj === 'function') {
transitionManager.wait().then(() => {
obj = obj();
this._run(b, callback);
});
} else {
this._run(b, callback);
}
},

_run(b, callback) {
duration = obj.duration || 300;
ease = obj.easing || linear;

const program = {
start: window.performance.now() + (obj.delay || 0),
b,
callback: callback || noop
};

if (intro && !initialised) {
if (obj.css && obj.delay) {
cssText = node.style.cssText;
node.style.cssText += obj.css(0, 1);
}

if (obj.tick) obj.tick(0, 1);
initialised = true;
}

if (!b) {
program.group = transitionManager.outros;
transitionManager.outros.remaining += 1;
Expand Down Expand Up @@ -154,6 +171,7 @@ export var transitionManager = {
bound: null,
stylesheet: null,
activeRules: {},
promise: null,

add(transition) {
this.transitions.push(transition);
Expand Down Expand Up @@ -223,5 +241,16 @@ export var transitionManager = {
remaining: 0,
callbacks: []
};
},

wait() {
if (!transitionManager.promise) {
transitionManager.promise = Promise.resolve();
transitionManager.promise.then(() => {
transitionManager.promise = null;
});
}

return transitionManager.promise;
}
};
6 changes: 3 additions & 3 deletions test/cli/samples/basic/expected/Main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ function Main(options) {

if (options.target) {
this._fragment.c();
this._mount(options.target, options.anchor, true);
this._mount(options.target, options.anchor);
}
}

Expand Down Expand Up @@ -150,8 +150,8 @@ function _set(newState) {
}
}

function _mount(target, anchor, intro) {
this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
function _mount(target, anchor) {
this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
}

function _differs(a, b) {
Expand Down
6 changes: 3 additions & 3 deletions test/cli/samples/custom-element/expected/Main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ class Main extends HTMLElement {
this._fragment.c();
this._fragment.m(this.shadowRoot, null);

if (options.target) this._mount(options.target, options.anchor, true);
if (options.target) this._mount(options.target, options.anchor);
}

static get observedAttributes() {
Expand Down Expand Up @@ -171,8 +171,8 @@ function _set(newState) {
}
}

function _mount(target, anchor, intro) {
this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
function _mount(target, anchor) {
this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
}

function _differs(a, b) {
Expand Down
6 changes: 3 additions & 3 deletions test/cli/samples/dev/expected/Main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ function Main(options) {
if (options.target) {
if (options.hydrate) throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
this._fragment.c();
this._mount(options.target, options.anchor, true);
this._mount(options.target, options.anchor);
}
}

Expand Down Expand Up @@ -154,8 +154,8 @@ function _set(newState) {
}
}

function _mount(target, anchor, intro) {
this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
function _mount(target, anchor) {
this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
}

function _differs(a, b) {
Expand Down
8 changes: 4 additions & 4 deletions test/cli/samples/dir-sourcemap/expected/Main.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions test/cli/samples/dir-sourcemap/expected/Widget.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions test/cli/samples/dir-subdir/expected/Main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ function create_main_fragment(component, ctx) {
},

m(target, anchor) {
widget._mount(target, anchor, true);
widget._mount(target, anchor);
},

p: noop,
Expand All @@ -41,7 +41,7 @@ function Main(options) {

if (options.target) {
this._fragment.c();
this._mount(options.target, options.anchor, true);
this._mount(options.target, options.anchor);

this._lock = true;
callAll(this._beforecreate);
Expand Down Expand Up @@ -157,8 +157,8 @@ function _set(newState) {
}
}

function _mount(target, anchor, intro) {
this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
function _mount(target, anchor) {
this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
}

function _differs(a, b) {
Expand Down
6 changes: 3 additions & 3 deletions test/cli/samples/dir-subdir/expected/widget/Widget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ function Widget(options) {

if (options.target) {
this._fragment.c();
this._mount(options.target, options.anchor, true);
this._mount(options.target, options.anchor);
}
}

Expand Down Expand Up @@ -150,8 +150,8 @@ function _set(newState) {
}
}

function _mount(target, anchor, intro) {
this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
function _mount(target, anchor) {
this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
}

function _differs(a, b) {
Expand Down
8 changes: 4 additions & 4 deletions test/cli/samples/dir/expected/Main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ function create_main_fragment(component, ctx) {
},

m(target, anchor) {
widget._mount(target, anchor, true);
widget._mount(target, anchor);
},

p: noop,
Expand All @@ -41,7 +41,7 @@ function Main(options) {

if (options.target) {
this._fragment.c();
this._mount(options.target, options.anchor, true);
this._mount(options.target, options.anchor);

this._lock = true;
callAll(this._beforecreate);
Expand Down Expand Up @@ -157,8 +157,8 @@ function _set(newState) {
}
}

function _mount(target, anchor, intro) {
this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
function _mount(target, anchor) {
this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
}

function _differs(a, b) {
Expand Down
6 changes: 3 additions & 3 deletions test/cli/samples/dir/expected/Widget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ function Widget(options) {

if (options.target) {
this._fragment.c();
this._mount(options.target, options.anchor, true);
this._mount(options.target, options.anchor);
}
}

Expand Down Expand Up @@ -150,8 +150,8 @@ function _set(newState) {
}
}

function _mount(target, anchor, intro) {
this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
function _mount(target, anchor) {
this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
}

function _differs(a, b) {
Expand Down
Loading

0 comments on commit 6d00f2b

Please sign in to comment.