msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

fire intro.start and outro.start events (#702)

Browse Source
pull/705/head
Rich Harris 7 years ago
parent 5eff188b55
commit e9f17f34ff
17 changed files with 166 additions and 73 deletions
Show Stats Download Patch File Download Diff File

1
mocha.opts
Unescape View File

@ -1,2 +1 @@
--bail
test/test.js

26
src/generators/dom/index.ts
Unescape View File

@ -122,10 +122,9 @@ export default function dom(
@dispatchObservers( this, this._observers.pre, newState, oldState );
${block.hasUpdateMethod && `this._fragment.update( newState, this._state );`}
@dispatchObservers( this, this._observers.post, newState, oldState );
${(generator.hasComponents || generator.hasIntroTransitions) &&
${(generator.hasComponents || generator.hasComplexBindings) &&
`this._flush();`}
${generator.hasComplexBindings &&
`while ( this._bindings.length ) this._bindings.pop()();`}
${generator.hasIntroTransitions && `@callAll(this._postcreate);`}
`;
if (hasJs) {
@ -199,9 +198,9 @@ export default function dom(
${generator.css &&
options.css !== false &&
`if ( !document.getElementById( '${generator.cssId}-style' ) ) @add_css();`}
${(generator.hasComponents || generator.hasIntroTransitions) &&
`this._oncreate = [];`}
${generator.hasComponents && `this._oncreate = [];`}
${generator.hasComplexBindings && `this._bindings = [];`}
${generator.hasIntroTransitions && `this._postcreate = [];`}
this._fragment = @create_main_fragment( this._state, this );
@ -219,19 +218,18 @@ export default function dom(
this._fragment.${block.hasIntroMethod ? 'intro' : 'mount'}( options.target, null );
}
${(generator.hasComponents || generator.hasIntroTransitions) &&
${(generator.hasComponents || generator.hasIntroTransitions || generator.hasComplexBindings || templateProperties.oncreate) &&
`this._flush();`}
${generator.hasComplexBindings &&
`while ( this._bindings.length ) this._bindings.pop()();`}
${templateProperties.oncreate &&
deindent`
if ( options._root ) {
options._root._oncreate.push( @template.oncreate.bind( this ) );
} else {
@template.oncreate.call( this );
}
`}
if ( options._root ) {
options._root._oncreate.push( @template.oncreate.bind( this ) );
} else {
@template.oncreate.call( this );
}`}
${generator.hasIntroTransitions && `@callAll(this._postcreate);`}
}
@assign( ${prototypeBase}, ${proto});

10
src/generators/dom/visitors/Element/addTransitions.ts
Unescape View File

@ -23,8 +23,8 @@ export default function addTransitions(
const fn = `@template.transitions.${intro.name}`;
block.builders.intro.addBlock(deindent`
#component._oncreate.push( function () {
if ( !${name} ) ${name} = @wrapTransition( ${state.name}, ${fn}, ${snippet}, true, null );
#component._postcreate.push( function () {
if ( !${name} ) ${name} = @wrapTransition( #component, ${state.name}, ${fn}, ${snippet}, true, null );
${name}.run( true, function () {
#component.fire( 'intro.end', { node: ${state.name} });
});
@ -58,8 +58,8 @@ export default function addTransitions(
}
block.builders.intro.addBlock(deindent`
#component._oncreate.push( function () {
${introName} = @wrapTransition( ${state.name}, ${fn}, ${snippet}, true, null );
#component._postcreate.push( function () {
${introName} = @wrapTransition( #component, ${state.name}, ${fn}, ${snippet}, true, null );
${introName}.run( true, function () {
#component.fire( 'intro.end', { node: ${state.name} });
});
@ -78,7 +78,7 @@ export default function addTransitions(
// 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} = @wrapTransition( ${state.name}, ${fn}, ${snippet}, false, null );
${outroName} = @wrapTransition( #component, ${state.name}, ${fn}, ${snippet}, false, null );
${outroName}.run( false, function () {
#component.fire( 'outro.end', { node: ${state.name} });
if ( --#outros === 0 ) #outrocallback();

11
src/shared/index.js
Unescape View File

@ -109,12 +109,13 @@ export function set(newState) {
this._root._flush();
}
export function _flush() {
if (!this._oncreate) return;
export function callAll(fns) {
while (fns && fns.length) fns.pop()();
}
while (this._oncreate.length) {
this._oncreate.pop()();
}
export function _flush() {
callAll(this._oncreate);
callAll(this._bindings);
}
export var proto = {

8
src/shared/transitions.js
Unescape View File

@ -32,7 +32,7 @@ export function hash(str) {
return hash >>> 0;
}
export function wrapTransition(node, fn, params, intro, outgroup) {
export function wrapTransition(component, node, fn, params, intro, outgroup) {
var obj = fn(node, params);
var duration = obj.duration || 300;
var ease = obj.easing || linear;
@ -78,6 +78,8 @@ export function wrapTransition(node, fn, params, intro, outgroup) {
}
},
start: function(program) {
component.fire(program.intro ? 'intro.start' : 'outro.start', { node: node });
program.a = this.t;
program.b = program.intro ? 1 : 0;
program.delta = program.b - program.a;
@ -149,7 +151,7 @@ export var transitionManager = {
if (!this.running) {
this.running = true;
this.next();
requestAnimationFrame(this.bound || (this.bound = this.next.bind(this)));
}
},
@ -186,7 +188,7 @@ export var transitionManager = {
}
if (this.running) {
requestAnimationFrame(this.bound || (this.bound = this.next.bind(this)));
requestAnimationFrame(this.bound);
} else if (this.stylesheet) {
var i = this.stylesheet.cssRules.length;
while (i--) this.stylesheet.deleteRule(i);

11
test/js/samples/collapses-text-around-comments/expected-bundle.js
Unescape View File

@ -118,12 +118,13 @@ function set(newState) {
this._root._flush();
}
function _flush() {
if (!this._oncreate) return;
function callAll(fns) {
while (fns && fns.length) fns.pop()();
}
while (this._oncreate.length) {
this._oncreate.pop()();
}
function _flush() {
callAll(this._oncreate);
callAll(this._bindings);
}
var proto = {

11
test/js/samples/computed-collapsed-if/expected-bundle.js
Unescape View File

@ -94,12 +94,13 @@ function set(newState) {
this._root._flush();
}
function _flush() {
if (!this._oncreate) return;
function callAll(fns) {
while (fns && fns.length) fns.pop()();
}
while (this._oncreate.length) {
this._oncreate.pop()();
}
function _flush() {
callAll(this._oncreate);
callAll(this._bindings);
}
var proto = {

11
test/js/samples/each-block-changed-check/expected-bundle.js
Unescape View File

@ -127,12 +127,13 @@ function set(newState) {
this._root._flush();
}
function _flush() {
if (!this._oncreate) return;
function callAll(fns) {
while (fns && fns.length) fns.pop()();
}
while (this._oncreate.length) {
this._oncreate.pop()();
}
function _flush() {
callAll(this._oncreate);
callAll(this._bindings);
}
var proto = {

11
test/js/samples/event-handlers-custom/expected-bundle.js
Unescape View File

@ -112,12 +112,13 @@ function set(newState) {
this._root._flush();
}
function _flush() {
if (!this._oncreate) return;
function callAll(fns) {
while (fns && fns.length) fns.pop()();
}
while (this._oncreate.length) {
this._oncreate.pop()();
}
function _flush() {
callAll(this._oncreate);
callAll(this._bindings);
}
var proto = {

11
test/js/samples/if-block-no-update/expected-bundle.js
Unescape View File

@ -118,12 +118,13 @@ function set(newState) {
this._root._flush();
}
function _flush() {
if (!this._oncreate) return;
function callAll(fns) {
while (fns && fns.length) fns.pop()();
}
while (this._oncreate.length) {
this._oncreate.pop()();
}
function _flush() {
callAll(this._oncreate);
callAll(this._bindings);
}
var proto = {

11
test/js/samples/if-block-simple/expected-bundle.js
Unescape View File

@ -118,12 +118,13 @@ function set(newState) {
this._root._flush();
}
function _flush() {
if (!this._oncreate) return;
function callAll(fns) {
while (fns && fns.length) fns.pop()();
}
while (this._oncreate.length) {
this._oncreate.pop()();
}
function _flush() {
callAll(this._oncreate);
callAll(this._bindings);
}
var proto = {

11
test/js/samples/non-imported-component/expected-bundle.js
Unescape View File

@ -106,12 +106,13 @@ function set(newState) {
this._root._flush();
}
function _flush() {
if (!this._oncreate) return;
function callAll(fns) {
while (fns && fns.length) fns.pop()();
}
while (this._oncreate.length) {
this._oncreate.pop()();
}
function _flush() {
callAll(this._oncreate);
callAll(this._bindings);
}
var proto = {

13
test/js/samples/onrender-onteardown-rewritten/expected-bundle.js
Unescape View File

@ -94,12 +94,13 @@ function set(newState) {
this._root._flush();
}
function _flush() {
if (!this._oncreate) return;
function callAll(fns) {
while (fns && fns.length) fns.pop()();
}
while (this._oncreate.length) {
this._oncreate.pop()();
}
function _flush() {
callAll(this._oncreate);
callAll(this._bindings);
}
var proto = {
@ -155,6 +156,8 @@ function SvelteComponent ( options ) {
this._fragment.mount( options.target, null );
}
this._flush();
if ( options._root ) {
options._root._oncreate.push( template.oncreate.bind( this ) );
} else {

2
test/js/samples/onrender-onteardown-rewritten/expected.js
Unescape View File

@ -44,6 +44,8 @@ function SvelteComponent ( options ) {
this._fragment.mount( options.target, null );
}
this._flush();
if ( options._root ) {
options._root._oncreate.push( template.oncreate.bind( this ) );
} else {

11
test/js/samples/use-elements-as-anchors/expected-bundle.js
Unescape View File

@ -118,12 +118,13 @@ function set(newState) {
this._root._flush();
}
function _flush() {
if (!this._oncreate) return;
function callAll(fns) {
while (fns && fns.length) fns.pop()();
}
while (this._oncreate.length) {
this._oncreate.pop()();
}
function _flush() {
callAll(this._oncreate);
callAll(this._bindings);
}
var proto = {

35
test/runtime/samples/transition-js-events/_config.js
Unescape View File

@ -0,0 +1,35 @@
export default {
data: {
visible: true,
things: ['a', 'b', 'c', 'd']
},
test (assert, component, target, window, raf) {
raf.tick(50);
assert.deepEqual(component.intros.sort(), ['a', 'b', 'c', 'd']);
assert.equal(component.introCount, 4);
raf.tick(100);
assert.equal(component.introCount, 0);
component.set({ visible: false });
raf.tick(150);
assert.deepEqual(component.outros.sort(), ['a', 'b', 'c', 'd']);
assert.equal(component.outroCount, 4);
raf.tick(200);
assert.equal(component.outroCount, 0);
component.set({ visible: true });
component.on('intro.start', () => {
throw new Error(`intro.start should fire during set(), not after`);
});
raf.tick(250);
assert.deepEqual(component.intros.sort(), ['a', 'a', 'b', 'b', 'c', 'c', 'd', 'd']);
assert.equal(component.introCount, 4);
component.destroy();
}
};

45
test/runtime/samples/transition-js-events/main.html
Unescape View File

@ -0,0 +1,45 @@
{{#each things as thing}}
{{#if visible}}
<p transition:foo>{{thing}}</p>
{{/if}}
{{/each}}
<script>
export default {
transitions: {
foo: function ( node, params ) {
return {
duration: 100,
tick: t => {
node.foo = t;
}
};
}
},
oncreate() {
this.intros = [];
this.outros = [];
this.introCount = 0;
this.outroCount = 0;
this.on('intro.start', ({ node }) => {
this.intros.push(node.textContent);
this.introCount += 1;
});
this.on('intro.end', () => {
this.introCount -= 1;
});
this.on('outro.start', ({ node }) => {
this.outros.push(node.textContent);
this.outroCount += 1;
});
this.on('outro.end', () => {
this.outroCount -= 1;
});
}
};
</script>
Write Preview
Loading…
Cancel
Save