Skip to content

Commit 24655a7

Browse files
jacwrightjacwright
committed
Adds compiler option "containedTransitions"
Makes transitions only run when the closest non-component block containing them has changed state. Implements #1480. ### Details Without the `containedTransitions` compiler option, all transitions are run whenever their element is added/remove from the dom. With `containedTransitions` the transitions are only run when the closest non-component block (e.g. an if-block or each-block) changes state. This means the transitions on the items of an each-block will not run when the each-block first appears on screen, or when it is removed, but they will run when items are added/removed from the each block. In addition, if a whole page fades in with a transition at the page level, the there will not be other transitions occuring inside the page. The transition containers do not include components, since a component is a reusable container and not a state-driven block. Thus, a transition at the root of a component will run when that component is added to the DOM inside an if-block or each-block the same way an element with a transition inside either of those blocks is run.
1 parent 2e4b65a commit 24655a7

File tree

76 files changed

+478
-153
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

76 files changed

+478
-153
lines changed

‎src/compile/dom/Block.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -241,7 +241,7 @@ export default class Block {
241241
properties.addBlock(`m: @noop,`);
242242
} else {
243243
properties.addBlock(deindent`
244-
${dev ? 'm: function mount' : 'm'}(#target, anchor) {
244+
${dev ? 'm: function mount' : 'm'}(#target, anchor${this.compiler.options.containedTransitions ? ', skipIntro' : ''}) {
245245
${this.builders.mount}
246246
},
247247
`);

‎src/compile/dom/index.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -227,7 +227,7 @@ export default function dom(
227227
this._fragment.c();
228228
this._fragment.${block.hasIntroMethod ? 'i' : 'm'}(this.shadowRoot, null);
229229
230-
if (options.target) this._mount(options.target, options.anchor);
230+
if (options.target) this._mount(options.target, options.anchor${compiler.options.containedTransitions && ', !options.intro'});
231231
` : deindent`
232232
if (options.target) {
233233
${compiler.options.hydratable
@@ -239,7 +239,7 @@ export default function dom(
239239
${options.dev &&
240240
`if (options.hydrate) throw new Error("options.hydrate only works if the component was compiled with the \`hydratable: true\` option");`}
241241
this._fragment.c();`}
242-
this._mount(options.target, options.anchor);
242+
this._mount(options.target, options.anchor${compiler.options.containedTransitions && ', !options.intro'});
243243
244244
${(compiler.hasComponents || target.hasComplexBindings || hasInitHooks || target.hasIntroTransitions) &&
245245
`@flush(this);`}

‎src/compile/nodes/AwaitBlock.ts

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -172,15 +172,19 @@ export default class AwaitBlock extends Node {
172172
}
173173

174174
if (this.pending.block.hasOutroMethod && this.compiler.options.nestedTransitions) {
175-
const countdown = block.getUniqueName('countdown');
176-
block.builders.outro.addBlock(deindent`
177-
const ${countdown} = @callAfter(#outrocallback, 3);
178-
for (let #i = 0; #i < 3; #i += 1) {
179-
const block = ${info}.blocks[#i];
180-
if (block) block.o(${countdown});
181-
else ${countdown}();
182-
}
183-
`);
175+
if (this.compiler.options.containedTransitions) {
176+
block.builders.outro.addLine('#outrocallback();');
177+
} else {
178+
const countdown = block.getUniqueName('countdown');
179+
block.builders.outro.addBlock(deindent`
180+
const ${countdown} = @callAfter(#outrocallback, 3);
181+
for (let #i = 0; #i < 3; #i += 1) {
182+
const block = ${info}.blocks[#i];
183+
if (block) block.o(${countdown});
184+
else ${countdown}();
185+
}
186+
`);
187+
}
184188
}
185189

186190
block.builders.destroy.addBlock(deindent`

‎src/compile/nodes/Component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -386,7 +386,7 @@ export default class Component extends Node {
386386

387387
block.builders.mount.addBlock(deindent`
388388
if (${name}) {
389-
${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'});
389+
${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'}${compiler.options.containedTransitions ? ', skipIntro' : ''});
390390
${this.ref && `#component.refs.${this.ref} = ${name};`}
391391
}
392392
`);
@@ -486,7 +486,7 @@ export default class Component extends Node {
486486
}
487487

488488
block.builders.mount.addLine(
489-
`${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'});`
489+
`${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'}${compiler.options.containedTransitions ? ', skipIntro' : ''});`
490490
);
491491

492492
if (updates.length) {

‎src/compile/nodes/EachBlock.ts

Lines changed: 34 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -201,9 +201,13 @@ export default class EachBlock extends Node {
201201
}
202202
`);
203203

204+
const mountCall = compiler.options.containedTransitions
205+
? `m(${parentNode || '#target'}, null, true)`
206+
: `${mountOrIntro}(${parentNode || '#target'}, null)`
207+
204208
block.builders.mount.addBlock(deindent`
205209
if (${each_block_else}) {
206-
${each_block_else}.${mountOrIntro}(${parentNode || '#target'}, null);
210+
${each_block_else}.${mountCall};
207211
}
208212
`);
209213

@@ -309,8 +313,12 @@ export default class EachBlock extends Node {
309313
`);
310314
}
311315

316+
const mountCall = this.compiler.options.containedTransitions
317+
? `m(${initialMountNode}, ${anchorNode}, true)`
318+
: `${mountOrIntro}(${initialMountNode}, ${anchorNode})`;
319+
312320
block.builders.mount.addBlock(deindent`
313-
for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].${mountOrIntro}(${initialMountNode}, ${anchorNode});
321+
for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].${mountCall};
314322
`);
315323

316324
const dynamic = this.block.hasUpdateMethod;
@@ -332,11 +340,15 @@ export default class EachBlock extends Node {
332340
`);
333341

334342
if (this.compiler.options.nestedTransitions) {
335-
const countdown = block.getUniqueName('countdown');
336-
block.builders.outro.addBlock(deindent`
337-
const ${countdown} = @callAfter(#outrocallback, ${blocks}.length);
338-
for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].o(${countdown});
339-
`);
343+
if (this.compiler.options.containedTransitions) {
344+
block.builders.outro.addLine('#outrocallback();');
345+
} else {
346+
const countdown = block.getUniqueName('countdown');
347+
block.builders.outro.addBlock(deindent`
348+
const ${countdown} = @callAfter(#outrocallback, ${blocks}.length);
349+
for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].o(${countdown});
350+
`);
351+
}
340352
}
341353

342354
block.builders.destroy.addBlock(deindent`
@@ -383,9 +395,13 @@ export default class EachBlock extends Node {
383395
`);
384396
}
385397

398+
const mountCall = this.compiler.options.containedTransitions
399+
? `m(${initialMountNode}, ${anchorNode}, true)`
400+
: `${mountOrIntro}(${initialMountNode}, ${anchorNode})`;
401+
386402
block.builders.mount.addBlock(deindent`
387403
for (var #i = 0; #i < ${iterations}.length; #i += 1) {
388-
${iterations}[#i].${mountOrIntro}(${initialMountNode}, ${anchorNode});
404+
${iterations}[#i].${mountCall};
389405
}
390406
`);
391407

@@ -478,12 +494,16 @@ export default class EachBlock extends Node {
478494
}
479495

480496
if (outroBlock && this.compiler.options.nestedTransitions) {
481-
const countdown = block.getUniqueName('countdown');
482-
block.builders.outro.addBlock(deindent`
483-
${iterations} = ${iterations}.filter(Boolean);
484-
const ${countdown} = @callAfter(#outrocallback, ${iterations}.length);
485-
for (let #i = 0; #i < ${iterations}.length; #i += 1) ${outroBlock}(#i, 0, ${countdown});`
486-
);
497+
if (this.compiler.options.containedTransitions) {
498+
block.builders.outro.addLine('#outrocallback();');
499+
} else {
500+
const countdown = block.getUniqueName('countdown');
501+
block.builders.outro.addBlock(deindent`
502+
${iterations} = ${iterations}.filter(Boolean);
503+
const ${countdown} = @callAfter(#outrocallback, ${iterations}.length);
504+
for (let #i = 0; #i < ${iterations}.length; #i += 1) ${outroBlock}(#i, 0, ${countdown});`
505+
);
506+
}
487507
}
488508

489509
block.builders.destroy.addBlock(`@destroyEach(${iterations}, detach);`);

‎src/compile/nodes/IfBlock.ts

Lines changed: 28 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -139,10 +139,14 @@ export default class IfBlock extends Node {
139139
this.buildCompoundWithOutros(block, parentNode, parentNodes, branches, dynamic, vars);
140140

141141
if (this.compiler.options.nestedTransitions) {
142-
block.builders.outro.addBlock(deindent`
143-
if (${name}) ${name}.o(#outrocallback);
144-
else #outrocallback();
145-
`);
142+
if (this.compiler.options.containedTransitions) {
143+
block.builders.outro.addLine('#outrocallback();');
144+
} else {
145+
block.builders.outro.addBlock(deindent`
146+
if (${name}) ${name}.o(#outrocallback);
147+
else #outrocallback();
148+
`);
149+
}
146150
}
147151
} else {
148152
this.buildCompound(block, parentNode, parentNodes, branches, dynamic, vars);
@@ -151,10 +155,14 @@ export default class IfBlock extends Node {
151155
this.buildSimple(block, parentNode, parentNodes, branches[0], dynamic, vars);
152156

153157
if (hasOutros && this.compiler.options.nestedTransitions) {
154-
block.builders.outro.addBlock(deindent`
155-
if (${name}) ${name}.o(#outrocallback);
156-
else #outrocallback();
157-
`);
158+
if (this.compiler.options.containedTransitions) {
159+
block.builders.outro.addLine('#outrocallback();');
160+
} else {
161+
block.builders.outro.addBlock(deindent`
162+
if (${name}) ${name}.o(#outrocallback);
163+
else #outrocallback();
164+
`);
165+
}
158166
}
159167
}
160168

@@ -205,8 +213,11 @@ export default class IfBlock extends Node {
205213

206214
const initialMountNode = parentNode || '#target';
207215
const anchorNode = parentNode ? 'null' : 'anchor';
216+
const mountCall = this.compiler.options.containedTransitions
217+
? `m(${initialMountNode}, ${anchorNode}, true)`
218+
: `${mountOrIntro}(${initialMountNode}, ${anchorNode})`;
208219
block.builders.mount.addLine(
209-
`${if_name}${name}.${mountOrIntro}(${initialMountNode}, ${anchorNode});`
220+
`${if_name}${name}.${mountCall};`
210221
);
211222

212223
const updateMountNode = this.getUpdateMountNode(anchor);
@@ -290,9 +301,12 @@ export default class IfBlock extends Node {
290301
const mountOrIntro = branches[0].hasIntroMethod ? 'i' : 'm';
291302
const initialMountNode = parentNode || '#target';
292303
const anchorNode = parentNode ? 'null' : 'anchor';
304+
const mountCall = this.compiler.options.containedTransitions
305+
? `m(${initialMountNode}, ${anchorNode}, true)`
306+
: `${mountOrIntro}(${initialMountNode}, ${anchorNode})`;
293307

294308
block.builders.mount.addLine(
295-
`${if_current_block_type_index}${if_blocks}[${current_block_type_index}].${mountOrIntro}(${initialMountNode}, ${anchorNode});`
309+
`${if_current_block_type_index}${if_blocks}[${current_block_type_index}].${mountCall};`
296310
);
297311

298312
const updateMountNode = this.getUpdateMountNode(anchor);
@@ -372,9 +386,12 @@ export default class IfBlock extends Node {
372386
const mountOrIntro = branch.hasIntroMethod ? 'i' : 'm';
373387
const initialMountNode = parentNode || '#target';
374388
const anchorNode = parentNode ? 'null' : 'anchor';
389+
const mountCall = this.compiler.options.containedTransitions
390+
? `m(${initialMountNode}, ${anchorNode}, true)`
391+
: `${mountOrIntro}(${initialMountNode}, ${anchorNode})`;
375392

376393
block.builders.mount.addLine(
377-
`if (${name}) ${name}.${mountOrIntro}(${initialMountNode}, ${anchorNode});`
394+
`if (${name}) ${name}.${mountCall};`
378395
);
379396

380397
const updateMountNode = this.getUpdateMountNode(anchor);

‎src/interfaces.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,8 @@ export interface CompileOptions {
6565
onerror?: (error: Error) => void;
6666
onwarn?: (warning: Warning) => void;
6767

68+
containedTransitions?: boolean;
69+
6870
// to remove in v3
6971
skipIntroByDefault?: boolean;
7072
nestedTransitions: boolean;

‎src/shared/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -147,8 +147,8 @@ export function callAll(fns) {
147147
while (fns && fns.length) fns.shift()();
148148
}
149149

150-
export function _mount(target, anchor) {
151-
this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
150+
export function _mount(target, anchor, skipIntro) {
151+
this._fragment[!skipIntro && this._fragment.i ? 'i' : 'm'](target, anchor || null, skipIntro);
152152
}
153153

154154
export var PENDING = {};

‎test/cli/samples/amd/expected/Main.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -165,8 +165,8 @@ define("test", function() { "use strict";
165165
assign(this._staged, newState);
166166
}
167167

168-
function _mount(target, anchor) {
169-
this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
168+
function _mount(target, anchor, skipIntro) {
169+
this._fragment[!skipIntro && this._fragment.i ? 'i' : 'm'](target, anchor || null, skipIntro);
170170
}
171171

172172
function _differs(a, b) {

‎test/cli/samples/basic/expected/Main.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -165,8 +165,8 @@ function _stage(newState) {
165165
assign(this._staged, newState);
166166
}
167167

168-
function _mount(target, anchor) {
169-
this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
168+
function _mount(target, anchor, skipIntro) {
169+
this._fragment[!skipIntro && this._fragment.i ? 'i' : 'm'](target, anchor || null, skipIntro);
170170
}
171171

172172
function _differs(a, b) {

‎test/cli/samples/custom-element/expected/Main.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -186,8 +186,8 @@ function _stage(newState) {
186186
assign(this._staged, newState);
187187
}
188188

189-
function _mount(target, anchor) {
190-
this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
189+
function _mount(target, anchor, skipIntro) {
190+
this._fragment[!skipIntro && this._fragment.i ? 'i' : 'm'](target, anchor || null, skipIntro);
191191
}
192192

193193
function _differs(a, b) {

‎test/cli/samples/dev/expected/Main.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -191,8 +191,8 @@ function _stage(newState) {
191191
assign(this._staged, newState);
192192
}
193193

194-
function _mount(target, anchor) {
195-
this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
194+
function _mount(target, anchor, skipIntro) {
195+
this._fragment[!skipIntro && this._fragment.i ? 'i' : 'm'](target, anchor || null, skipIntro);
196196
}
197197

198198
function _differs(a, b) {

‎test/cli/samples/dir-sourcemap/expected/Main.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎test/cli/samples/dir-sourcemap/expected/Widget.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎test/cli/samples/dir-subdir/expected/Main.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -167,8 +167,8 @@ function _stage(newState) {
167167
assign(this._staged, newState);
168168
}
169169

170-
function _mount(target, anchor) {
171-
this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
170+
function _mount(target, anchor, skipIntro) {
171+
this._fragment[!skipIntro && this._fragment.i ? 'i' : 'm'](target, anchor || null, skipIntro);
172172
}
173173

174174
function _differs(a, b) {

‎test/cli/samples/dir-subdir/expected/widget/Widget.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -165,8 +165,8 @@ function _stage(newState) {
165165
assign(this._staged, newState);
166166
}
167167

168-
function _mount(target, anchor) {
169-
this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
168+
function _mount(target, anchor, skipIntro) {
169+
this._fragment[!skipIntro && this._fragment.i ? 'i' : 'm'](target, anchor || null, skipIntro);
170170
}
171171

172172
function _differs(a, b) {

‎test/cli/samples/dir/expected/Main.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -167,8 +167,8 @@ function _stage(newState) {
167167
assign(this._staged, newState);
168168
}
169169

170-
function _mount(target, anchor) {
171-
this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
170+
function _mount(target, anchor, skipIntro) {
171+
this._fragment[!skipIntro && this._fragment.i ? 'i' : 'm'](target, anchor || null, skipIntro);
172172
}
173173

174174
function _differs(a, b) {

‎test/cli/samples/dir/expected/Widget.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -165,8 +165,8 @@ function _stage(newState) {
165165
assign(this._staged, newState);
166166
}
167167

168-
function _mount(target, anchor) {
169-
this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
168+
function _mount(target, anchor, skipIntro) {
169+
this._fragment[!skipIntro && this._fragment.i ? 'i' : 'm'](target, anchor || null, skipIntro);
170170
}
171171

172172
function _differs(a, b) {

‎test/cli/samples/globals/expected/Main.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -190,8 +190,8 @@ var Main = (function(answer) { "use strict";
190190
assign(this._staged, newState);
191191
}
192192

193-
function _mount(target, anchor) {
194-
this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
193+
function _mount(target, anchor, skipIntro) {
194+
this._fragment[!skipIntro && this._fragment.i ? 'i' : 'm'](target, anchor || null, skipIntro);
195195
}
196196

197197
function _differs(a, b) {

‎test/cli/samples/sourcemap-inline/expected/Main.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)