msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

fix: check each_blocks is empty on mount (#7505)

Browse Source 
fixes #8282
pull/8335/head
4eb0da 1 year ago committed by GitHub
parent 474a13ad90
commit 9edd2df0d3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 277 additions and 11 deletions
Show Stats Download Patch File Download Diff File

8
src/compiler/compile/render_dom/wrappers/EachBlock.ts
Unescape View File

@ -448,7 +448,9 @@ export default class EachBlockWrapper extends Wrapper {
block.chunks.mount.push(b`
for (let #i = 0; #i < ${view_length}; #i += 1) {
${iterations}[#i].m(${initial_mount_node}, ${initial_anchor_node});
if (${iterations}[#i]) {
${iterations}[#i].m(${initial_mount_node}, ${initial_anchor_node});
}
}
`);
@ -542,7 +544,9 @@ export default class EachBlockWrapper extends Wrapper {
block.chunks.mount.push(b`
for (let #i = 0; #i < ${view_length}; #i += 1) {
${iterations}[#i].m(${initial_mount_node}, ${initial_anchor_node});
if (${iterations}[#i]) {
${iterations}[#i].m(${initial_mount_node}, ${initial_anchor_node});
}
}
`);

4
test/js/samples/debug-foo-bar-baz-things/expected.js
Unescape View File

@ -114,7 +114,9 @@ function create_fragment(ctx) {
},
m: function mount(target, anchor) {
for (let i = 0; i < each_blocks.length; i += 1) {
each_blocks[i].m(target, anchor);
if (each_blocks[i]) {
each_blocks[i].m(target, anchor);
}
}
insert_dev(target, t0, anchor);

4
test/js/samples/debug-foo/expected.js
Unescape View File

@ -108,7 +108,9 @@ function create_fragment(ctx) {
},
m: function mount(target, anchor) {
for (let i = 0; i < each_blocks.length; i += 1) {
each_blocks[i].m(target, anchor);
if (each_blocks[i]) {
each_blocks[i].m(target, anchor);
}
}
insert_dev(target, t0, anchor);

4
test/js/samples/debug-no-dependencies/expected.js
Unescape View File

@ -86,7 +86,9 @@ function create_fragment(ctx) {
},
m: function mount(target, anchor) {
for (let i = 0; i < each_blocks.length; i += 1) {
each_blocks[i].m(target, anchor);
if (each_blocks[i]) {
each_blocks[i].m(target, anchor);
}
}
insert_dev(target, each_1_anchor, anchor);

4
test/js/samples/deconflict-builtins/expected.js
Unescape View File

@ -63,7 +63,9 @@ function create_fragment(ctx) {
},
m(target, anchor) {
for (let i = 0; i < each_blocks.length; i += 1) {
each_blocks[i].m(target, anchor);
if (each_blocks[i]) {
each_blocks[i].m(target, anchor);
}
}
insert(target, each_1_anchor, anchor);

4
test/js/samples/each-block-array-literal/expected.js
Unescape View File

@ -63,7 +63,9 @@ function create_fragment(ctx) {
},
m(target, anchor) {
for (let i = 0; i < 5; i += 1) {
each_blocks[i].m(target, anchor);
if (each_blocks[i]) {
each_blocks[i].m(target, anchor);
}
}
insert(target, each_1_anchor, anchor);

6
test/js/samples/each-block-changed-check/expected.js
Unescape View File

@ -104,7 +104,9 @@ function create_fragment(ctx) {
},
m(target, anchor) {
for (let i = 0; i < each_blocks.length; i += 1) {
each_blocks[i].m(target, anchor);
if (each_blocks[i]) {
each_blocks[i].m(target, anchor);
}
}
insert(target, t0, anchor);
@ -170,4 +172,4 @@ class Component extends SvelteComponent {
}
}
export default Component;
export default Component;

4
test/js/samples/each-block-keyed-animated/expected.js
Unescape View File

@ -87,7 +87,9 @@ function create_fragment(ctx) {
},
m(target, anchor) {
for (let i = 0; i < each_blocks.length; i += 1) {
each_blocks[i].m(target, anchor);
if (each_blocks[i]) {
each_blocks[i].m(target, anchor);
}
}
insert(target, each_1_anchor, anchor);

4
test/js/samples/each-block-keyed/expected.js
Unescape View File

@ -72,7 +72,9 @@ function create_fragment(ctx) {
},
m(target, anchor) {
for (let i = 0; i < each_blocks.length; i += 1) {
each_blocks[i].m(target, anchor);
if (each_blocks[i]) {
each_blocks[i].m(target, anchor);
}
}
insert(target, each_1_anchor, anchor);

21
test/runtime/samples/component-binding-each-remount-keyed/Child.svelte
Unescape View File

@ -0,0 +1,21 @@
<script>
import InnerChild from './InnerChild.svelte';
export let id = 1;
export let count;
export let increment;
let list;
$: {
list = [];
for (let i = 0; i < count; ++i) {
list.push(i);
}
}
</script>
<div data-id={id}>
{#each list as item (item)}
<InnerChild val={item} {increment} />
{/each}
</div>

14
test/runtime/samples/component-binding-each-remount-keyed/InnerChild.svelte
Unescape View File

@ -0,0 +1,14 @@
<script>
import { afterUpdate } from 'svelte';
export let val = 1;
export let increment;
afterUpdate(() => {
increment();
});
</script>
<inner>
{val}
</inner>

53
test/runtime/samples/component-binding-each-remount-keyed/_config.js
Unescape View File

@ -0,0 +1,53 @@
export default {
html: `
<div data-id="1">
<inner>0</inner>
<inner>1</inner>
</div>
<div data-id="2">
<inner>0</inner>
<inner>1</inner>
</div>
<div data-id="3">
<inner>0</inner>
<inner>1</inner>
</div>
`,
ssrHtml: `
<div data-id="1">
<inner>0</inner>
<inner>1</inner>
<inner>2</inner>
</div>
<div data-id="2">
<inner>0</inner>
<inner>1</inner>
<inner>2</inner>
</div>
<div data-id="3">
<inner>0</inner>
<inner>1</inner>
<inner>2</inner>
</div>
`,
async test({ assert, component, target }) {
await component.done;
assert.equal(component.getCounter(), 13);
assert.htmlEqual(target.innerHTML, `
<div data-id="3">
<inner>0</inner>
<inner>1</inner>
</div>
<div data-id="2">
<inner>0</inner>
<inner>1</inner>
</div>
<div data-id="1">
<inner>0</inner>
<inner>1</inner>
</div>
`);
}
};

35
test/runtime/samples/component-binding-each-remount-keyed/main.svelte
Unescape View File

@ -0,0 +1,35 @@
<script>
import { onMount } from 'svelte';
import Child from './Child.svelte';
let updateCounter = 0;
let promiseResolve;
export const done = new Promise(resolve => {
promiseResolve = resolve;
});
export const getCounter = () => {
return updateCounter;
};
let vals = [1, 2, 3];
const instances = [];
let count = 3;
const increment = () => {
++updateCounter;
};
onMount(() => {
count = 2;
setTimeout(() => {
vals = vals.reverse();
setTimeout(promiseResolve);
});
});
</script>
{#each vals as val, index (val)}
<Child bind:this={instances[index]} id={val} {count} {increment} />
{/each}

21
test/runtime/samples/component-binding-each-remount-unkeyed/Child.svelte
Unescape View File

@ -0,0 +1,21 @@
<script>
import InnerChild from './InnerChild.svelte';
export let id = 1;
export let count;
export let increment;
let list;
$: {
list = [];
for (let i = 0; i < count; ++i) {
list.push(i);
}
}
</script>
<div data-id={id}>
{#each list as item}
<InnerChild val={item} {increment} />
{/each}
</div>

14
test/runtime/samples/component-binding-each-remount-unkeyed/InnerChild.svelte
Unescape View File

@ -0,0 +1,14 @@
<script>
import { afterUpdate } from 'svelte';
export let val = 1;
export let increment;
afterUpdate(() => {
increment();
});
</script>
<inner>
{val}
</inner>

53
test/runtime/samples/component-binding-each-remount-unkeyed/_config.js
Unescape View File

@ -0,0 +1,53 @@
export default {
html: `
<div data-id="1">
<inner>0</inner>
<inner>1</inner>
</div>
<div data-id="2">
<inner>0</inner>
<inner>1</inner>
</div>
<div data-id="3">
<inner>0</inner>
<inner>1</inner>
</div>
`,
ssrHtml: `
<div data-id="1">
<inner>0</inner>
<inner>1</inner>
<inner>2</inner>
</div>
<div data-id="2">
<inner>0</inner>
<inner>1</inner>
<inner>2</inner>
</div>
<div data-id="3">
<inner>0</inner>
<inner>1</inner>
<inner>2</inner>
</div>
`,
async test({ assert, component, target }) {
await component.done;
assert.equal(component.getCounter(), 13);
assert.htmlEqual(target.innerHTML, `
<div data-id="3">
<inner>0</inner>
<inner>1</inner>
</div>
<div data-id="2">
<inner>0</inner>
<inner>1</inner>
</div>
<div data-id="1">
<inner>0</inner>
<inner>1</inner>
</div>
`);
}
};

35
test/runtime/samples/component-binding-each-remount-unkeyed/main.svelte
Unescape View File

@ -0,0 +1,35 @@
<script>
import { onMount } from 'svelte';
import Child from './Child.svelte';
let updateCounter = 0;
let promiseResolve;
export const done = new Promise(resolve => {
promiseResolve = resolve;
});
export const getCounter = () => {
return updateCounter;
};
let vals = [1, 2, 3];
const instances = [];
let count = 3;
const increment = () => {
++updateCounter;
};
onMount(() => {
count = 2;
setTimeout(() => {
vals = vals.reverse();
setTimeout(promiseResolve);
});
});
</script>
{#each vals as val, index (val)}
<Child bind:this={instances[index]} id={val} {count} {increment} />
{/each}
Write Preview
Loading…
Cancel
Save