Skip to content

Commit

Permalink
Fix for each-blocks preventing outros from completing
Browse files Browse the repository at this point in the history
Unkeyed each blocks end up with trailing `null` values that prevent the whole from being outroed. This fixes it so the null values are removed before outroing the remaining blocks.

Fixes #1617
  • Loading branch information
jacwright committed Aug 25, 2018
1 parent 0f171a5 commit 4c2b960
Show file tree
Hide file tree
Showing 4 changed files with 53 additions and 0 deletions.
1 change: 1 addition & 0 deletions src/compile/nodes/EachBlock.ts
Original file line number Diff line number Diff line change
Expand Up @@ -480,6 +480,7 @@ export default class EachBlock extends Node {
if (outroBlock && this.compiler.options.nestedTransitions) {
const countdown = block.getUniqueName('countdown');
block.builders.outro.addBlock(deindent`
${iterations} = ${iterations}.filter(Boolean);
const ${countdown} = @callAfter(#outrocallback, ${iterations}.length);
for (let #i = 0; #i < ${iterations}.length; #i += 1) ${outroBlock}(#i, 0, ${countdown});`
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,8 @@ export default {
assert.equal( divs[0].foo, undefined );
assert.equal( divs[1].foo, 0.5 );
assert.equal( divs[2].foo, 0.5 );

raf.tick( 100 );
assert.htmlEqual(target.innerHTML, '<div>a</div>');
}
};
29 changes: 29 additions & 0 deletions test/runtime/samples/transition-js-nested-each-delete/_config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
export default {
nestedTransitions: true,
skipIntroByDefault: true,

data: {
visible: true,
things: [ 'a', 'b', 'c' ]
},

test ( assert, component, target, window, raf ) {
assert.htmlEqual(target.innerHTML, `
<div>a</div>
<div>b</div>
<div>c</div>
`);

component.set({ things: [ 'a' ] });

raf.tick( 100 );
assert.htmlEqual(target.innerHTML, `
<div>a</div>
`);

component.set({ visible: false });

raf.tick( 200 );
assert.htmlEqual(target.innerHTML, '');
}
};
20 changes: 20 additions & 0 deletions test/runtime/samples/transition-js-nested-each-delete/main.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{#if visible}
{#each things as thing}
<div transition:foo>{thing}</div>
{/each}
{/if}

<script>
export default {
transitions: {
foo(node, params) {
return {
duration: 100,
tick: t => {
node.foo = t;
}
};
}
}
};
</script>

0 comments on commit 4c2b960

Please sign in to comment.