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

-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
--bail
21
test/test.js

‎src/generators/dom/index.ts

+12-14
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

+5-5
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

+6-5
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

+5-3
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

+6-5
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

+6-5
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

+6-5
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

+6-5
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

+6-5
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/if-block-simple/expected-bundle.js

+6-5
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/non-imported-component/expected-bundle.js

+6-5
Original file line numberDiff line numberDiff line change
@@ -106,12 +106,13 @@ function set(newState) {
106106
this._root._flush();
107107
}
108108

109-
function _flush() {
110-
if (!this._oncreate) return;
109+
function callAll(fns) {
110+
while (fns && fns.length) fns.pop()();
111+
}
111112

112-
while (this._oncreate.length) {
113-
this._oncreate.pop()();
114-
}
113+
function _flush() {
114+
callAll(this._oncreate);
115+
callAll(this._bindings);
115116
}
116117

117118
var proto = {

‎test/js/samples/onrender-onteardown-rewritten/expected-bundle.js

+8-5
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 = {
@@ -155,6 +156,8 @@ function SvelteComponent ( options ) {
155156
this._fragment.mount( options.target, null );
156157
}
157158

159+
this._flush();
160+
158161
if ( options._root ) {
159162
options._root._oncreate.push( template.oncreate.bind( this ) );
160163
} else {

‎test/js/samples/onrender-onteardown-rewritten/expected.js

+2
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@ function SvelteComponent ( options ) {
4444
this._fragment.mount( options.target, null );
4545
}
4646

47+
this._flush();
48+
4749
if ( options._root ) {
4850
options._root._oncreate.push( template.oncreate.bind( this ) );
4951
} else {

‎test/js/samples/use-elements-as-anchors/expected-bundle.js

+6-5
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/runtime/samples/transition-js-events/_config.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
export default {
2+
data: {
3+
visible: true,
4+
things: ['a', 'b', 'c', 'd']
5+
},
6+
7+
test (assert, component, target, window, raf) {
8+
raf.tick(50);
9+
assert.deepEqual(component.intros.sort(), ['a', 'b', 'c', 'd']);
10+
assert.equal(component.introCount, 4);
11+
12+
raf.tick(100);
13+
assert.equal(component.introCount, 0);
14+
15+
component.set({ visible: false });
16+
17+
raf.tick(150);
18+
assert.deepEqual(component.outros.sort(), ['a', 'b', 'c', 'd']);
19+
assert.equal(component.outroCount, 4);
20+
21+
raf.tick(200);
22+
assert.equal(component.outroCount, 0);
23+
24+
component.set({ visible: true });
25+
component.on('intro.start', () => {
26+
throw new Error(`intro.start should fire during set(), not after`);
27+
});
28+
29+
raf.tick(250);
30+
assert.deepEqual(component.intros.sort(), ['a', 'a', 'b', 'b', 'c', 'c', 'd', 'd']);
31+
assert.equal(component.introCount, 4);
32+
33+
component.destroy();
34+
}
35+
};

0 commit comments

Comments
 (0)