keep each block value (#5841)

pull/5849/head
Tan Li Hau 5 years ago committed by GitHub
parent 63669330f6
commit 08cb3142e9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -7,6 +7,7 @@
* Fix checkbox `bind:group` in keyed `{#each}` where the array can be reordered ([#5779](https://github.com/sveltejs/svelte/issues/5779))
* Fix checkbox `bind:group` in nested `{#each}` contexts ([#5811](https://github.com/sveltejs/svelte/issues/5811))
* Add graphics roles as known ARIA roles ([#5822](https://github.com/sveltejs/svelte/pull/5822))
* Fix local transitions if a parent has a cancelled outro transition ([#5822](https://github.com/sveltejs/svelte/issues/5822))
## 3.31.0

@ -450,7 +450,7 @@ export default class EachBlockWrapper extends Wrapper {
this.block.maintain_context = true;
this.updates.push(b`
const ${this.vars.each_block_value} = ${snippet};
${this.vars.each_block_value} = ${snippet};
${this.renderer.options.dev && b`@validate_each_argument(${this.vars.each_block_value});`}
${this.block.has_outros && b`@group_outros();`}

@ -94,7 +94,7 @@ function create_fragment(ctx) {
},
p(ctx, [dirty]) {
if (dirty & /*things*/ 1) {
const each_value = /*things*/ ctx[0];
each_value = /*things*/ ctx[0];
for (let i = 0; i < each_blocks.length; i += 1) each_blocks[i].r();
each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, each_1_anchor.parentNode, fix_and_destroy_block, create_each_block, each_1_anchor, get_each_context);
for (let i = 0; i < each_blocks.length; i += 1) each_blocks[i].a();

@ -79,7 +79,7 @@ function create_fragment(ctx) {
},
p(ctx, [dirty]) {
if (dirty & /*things*/ 1) {
const each_value = /*things*/ ctx[0];
each_value = /*things*/ ctx[0];
each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, each_1_anchor.parentNode, destroy_block, create_each_block, each_1_anchor, get_each_context);
}
},

@ -0,0 +1,57 @@
export default {
html: '<section></section>',
async test({ assert, component, target, raf }) {
await component.add();
await component.add();
let time = 0;
assert.htmlEqual(target.innerHTML, `
<section>
<div t="0">Thing 1</div>
<div t="0">Thing 2</div>
</section>
`);
raf.tick(time += 400);
assert.htmlEqual(target.innerHTML, `
<section>
<div t="1">Thing 1</div>
<div t="1">Thing 2</div>
</section>
`);
await component.toggle();
// transition halfway
raf.tick(time += 200);
assert.htmlEqual(target.innerHTML, `
<section t="0.5">
<div t="1">Thing 1</div>
<div t="1">Thing 2</div>
</section>
`);
await component.toggle();
// transition back
raf.tick(time += 200);
assert.htmlEqual(target.innerHTML, `
<section t="1">
<div t="1">Thing 1</div>
<div t="1">Thing 2</div>
</section>
`);
await component.remove(1);
raf.tick(time += 400);
assert.htmlEqual(target.innerHTML, `
<section t="1">
<div t="1">Thing 2</div>
</section>
`);
}
};

@ -0,0 +1,29 @@
<script>
function fade(node) {
return {
duration: 400,
tick(t) {
node.setAttribute('t', t);
}
};
}
let shown = true;
let _id = 1;
let items = [];
export const toggle = () => (shown = !shown);
export const add = () => {
items = items.concat({ _id, name: `Thing ${_id}` });
_id++;
};
export const remove = (id) => (items = items.filter(({ _id }) => _id !== id));
</script>
{#if shown}
<section transition:fade>
{#each items as thing (thing._id)}
<div in:fade|local out:fade|local>{thing.name}</div>
{/each}
</section>
{/if}
Loading…
Cancel
Save