Skip to content

Commit e9f17f3

Browse files
Rich-HarrisRich-Harris
committed
fire intro.start and outro.start events (sveltejs#702)
1 parent 5eff188 commit e9f17f3

File tree

17 files changed

+166
-73
lines changed

17 files changed

+166
-73
lines changed

‎mocha.opts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
--bail
21
test/test.js

‎src/generators/dom/index.ts

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -122,10 +122,9 @@ export default function dom(
122122
@dispatchObservers( this, this._observers.pre, newState, oldState );
123123
${block.hasUpdateMethod && `this._fragment.update( newState, this._state );`}
124124
@dispatchObservers( this, this._observers.post, newState, oldState );
125-
${(generator.hasComponents || generator.hasIntroTransitions) &&
125+
${(generator.hasComponents || generator.hasComplexBindings) &&
126126
`this._flush();`}
127-
${generator.hasComplexBindings &&
128-
`while ( this._bindings.length ) this._bindings.pop()();`}
127+
${generator.hasIntroTransitions && `@callAll(this._postcreate);`}
129128
`;
130129

131130
if (hasJs) {
@@ -199,9 +198,9 @@ export default function dom(
199198
${generator.css &&
200199
options.css !== false &&
201200
`if ( !document.getElementById( '${generator.cssId}-style' ) ) @add_css();`}
202-
${(generator.hasComponents || generator.hasIntroTransitions) &&
203-
`this._oncreate = [];`}
201+
${generator.hasComponents && `this._oncreate = [];`}
204202
${generator.hasComplexBindings && `this._bindings = [];`}
203+
${generator.hasIntroTransitions && `this._postcreate = [];`}
205204
206205
this._fragment = @create_main_fragment( this._state, this );
207206
@@ -219,19 +218,18 @@ export default function dom(
219218
this._fragment.${block.hasIntroMethod ? 'intro' : 'mount'}( options.target, null );
220219
}
221220
222-
${(generator.hasComponents || generator.hasIntroTransitions) &&
221+
${(generator.hasComponents || generator.hasIntroTransitions || generator.hasComplexBindings || templateProperties.oncreate) &&
223222
`this._flush();`}
224-
${generator.hasComplexBindings &&
225-
`while ( this._bindings.length ) this._bindings.pop()();`}
226223
227224
${templateProperties.oncreate &&
228225
deindent`
229-
if ( options._root ) {
230-
options._root._oncreate.push( @template.oncreate.bind( this ) );
231-
} else {
232-
@template.oncreate.call( this );
233-
}
234-
`}
226+
if ( options._root ) {
227+
options._root._oncreate.push( @template.oncreate.bind( this ) );
228+
} else {
229+
@template.oncreate.call( this );
230+
}`}
231+
232+
${generator.hasIntroTransitions && `@callAll(this._postcreate);`}
235233
}
236234
237235
@assign( ${prototypeBase}, ${proto});

‎src/generators/dom/visitors/Element/addTransitions.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ export default function addTransitions(
2323
const fn = `@template.transitions.${intro.name}`;
2424

2525
block.builders.intro.addBlock(deindent`
26-
#component._oncreate.push( function () {
27-
if ( !${name} ) ${name} = @wrapTransition( ${state.name}, ${fn}, ${snippet}, true, null );
26+
#component._postcreate.push( function () {
27+
if ( !${name} ) ${name} = @wrapTransition( #component, ${state.name}, ${fn}, ${snippet}, true, null );
2828
${name}.run( true, function () {
2929
#component.fire( 'intro.end', { node: ${state.name} });
3030
});
@@ -58,8 +58,8 @@ export default function addTransitions(
5858
}
5959

6060
block.builders.intro.addBlock(deindent`
61-
#component._oncreate.push( function () {
62-
${introName} = @wrapTransition( ${state.name}, ${fn}, ${snippet}, true, null );
61+
#component._postcreate.push( function () {
62+
${introName} = @wrapTransition( #component, ${state.name}, ${fn}, ${snippet}, true, null );
6363
${introName}.run( true, function () {
6464
#component.fire( 'intro.end', { node: ${state.name} });
6565
});
@@ -78,7 +78,7 @@ export default function addTransitions(
7878
// TODO hide elements that have outro'd (unless they belong to a still-outroing
7979
// group) prior to their removal from the DOM
8080
block.builders.outro.addBlock(deindent`
81-
${outroName} = @wrapTransition( ${state.name}, ${fn}, ${snippet}, false, null );
81+
${outroName} = @wrapTransition( #component, ${state.name}, ${fn}, ${snippet}, false, null );
8282
${outroName}.run( false, function () {
8383
#component.fire( 'outro.end', { node: ${state.name} });
8484
if ( --#outros === 0 ) #outrocallback();

‎src/shared/index.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -109,12 +109,13 @@ export function set(newState) {
109109
this._root._flush();
110110
}
111111

112-
export function _flush() {
113-
if (!this._oncreate) return;
112+
export function callAll(fns) {
113+
while (fns && fns.length) fns.pop()();
114+
}
114115

115-
while (this._oncreate.length) {
116-
this._oncreate.pop()();
117-
}
116+
export function _flush() {
117+
callAll(this._oncreate);
118+
callAll(this._bindings);
118119
}
119120

120121
export var proto = {

‎src/shared/transitions.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export function hash(str) {
3232
return hash >>> 0;
3333
}
3434

35-
export function wrapTransition(node, fn, params, intro, outgroup) {
35+
export function wrapTransition(component, node, fn, params, intro, outgroup) {
3636
var obj = fn(node, params);
3737
var duration = obj.duration || 300;
3838
var ease = obj.easing || linear;
@@ -78,6 +78,8 @@ export function wrapTransition(node, fn, params, intro, outgroup) {
7878
}
7979
},
8080
start: function(program) {
81+
component.fire(program.intro ? 'intro.start' : 'outro.start', { node: node });
82+
8183
program.a = this.t;
8284
program.b = program.intro ? 1 : 0;
8385
program.delta = program.b - program.a;
@@ -149,7 +151,7 @@ export var transitionManager = {
149151

150152
if (!this.running) {
151153
this.running = true;
152-
this.next();
154+
requestAnimationFrame(this.bound || (this.bound = this.next.bind(this)));
153155
}
154156
},
155157

@@ -186,7 +188,7 @@ export var transitionManager = {
186188
}
187189

188190
if (this.running) {
189-
requestAnimationFrame(this.bound || (this.bound = this.next.bind(this)));
191+
requestAnimationFrame(this.bound);
190192
} else if (this.stylesheet) {
191193
var i = this.stylesheet.cssRules.length;
192194
while (i--) this.stylesheet.deleteRule(i);

‎test/js/samples/collapses-text-around-comments/expected-bundle.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -118,12 +118,13 @@ function set(newState) {
118118
this._root._flush();
119119
}
120120

121-
function _flush() {
122-
if (!this._oncreate) return;
121+
function callAll(fns) {
122+
while (fns && fns.length) fns.pop()();
123+
}
123124

124-
while (this._oncreate.length) {
125-
this._oncreate.pop()();
126-
}
125+
function _flush() {
126+
callAll(this._oncreate);
127+
callAll(this._bindings);
127128
}
128129

129130
var proto = {

‎test/js/samples/computed-collapsed-if/expected-bundle.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -94,12 +94,13 @@ function set(newState) {
9494
this._root._flush();
9595
}
9696

97-
function _flush() {
98-
if (!this._oncreate) return;
97+
function callAll(fns) {
98+
while (fns && fns.length) fns.pop()();
99+
}
99100

100-
while (this._oncreate.length) {
101-
this._oncreate.pop()();
102-
}
101+
function _flush() {
102+
callAll(this._oncreate);
103+
callAll(this._bindings);
103104
}
104105

105106
var proto = {

‎test/js/samples/each-block-changed-check/expected-bundle.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -127,12 +127,13 @@ function set(newState) {
127127
this._root._flush();
128128
}
129129

130-
function _flush() {
131-
if (!this._oncreate) return;
130+
function callAll(fns) {
131+
while (fns && fns.length) fns.pop()();
132+
}
132133

133-
while (this._oncreate.length) {
134-
this._oncreate.pop()();
135-
}
134+
function _flush() {
135+
callAll(this._oncreate);
136+
callAll(this._bindings);
136137
}
137138

138139
var proto = {

‎test/js/samples/event-handlers-custom/expected-bundle.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -112,12 +112,13 @@ function set(newState) {
112112
this._root._flush();
113113
}
114114

115-
function _flush() {
116-
if (!this._oncreate) return;
115+
function callAll(fns) {
116+
while (fns && fns.length) fns.pop()();
117+
}
117118

118-
while (this._oncreate.length) {
119-
this._oncreate.pop()();
120-
}
119+
function _flush() {
120+
callAll(this._oncreate);
121+
callAll(this._bindings);
121122
}
122123

123124
var proto = {

‎test/js/samples/if-block-no-update/expected-bundle.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -118,12 +118,13 @@ function set(newState) {
118118
this._root._flush();
119119
}
120120

121-
function _flush() {
122-
if (!this._oncreate) return;
121+
function callAll(fns) {
122+
while (fns && fns.length) fns.pop()();
123+
}
123124

124-
while (this._oncreate.length) {
125-
this._oncreate.pop()();
126-
}
125+
function _flush() {
126+
callAll(this._oncreate);
127+
callAll(this._bindings);
127128
}
128129

129130
var proto = {

0 commit comments

Comments
 (0)