diff --git a/packages/svelte/src/compiler/compile/render_dom/wrappers/EachBlock.js b/packages/svelte/src/compiler/compile/render_dom/wrappers/EachBlock.js index a432cca3e9..76000d798f 100644 --- a/packages/svelte/src/compiler/compile/render_dom/wrappers/EachBlock.js +++ b/packages/svelte/src/compiler/compile/render_dom/wrappers/EachBlock.js @@ -194,6 +194,25 @@ export default class EachBlockWrapper extends Wrapper { } } + /** + * @param {import('../Block.js').default} block + * @param {import('estree').Node} snippet + * @return {import('estree').Node[] | null} + */ + check_iterable_dependencies(block, snippet) { + let update_each_block_value = b`${this.vars.each_block_value} = ${snippet};`; + if (this.node.expression.dependencies.size == 0) { + update_each_block_value = null; + } else if (this.dependencies.size > this.node.expression.dependencies.size) { + const snippet_dependencies = Array.from(this.node.expression.dependencies); + update_each_block_value = b`if (${block.renderer.dirty(snippet_dependencies)}) { + ${update_each_block_value} + }`; + } + + return update_each_block_value; + } + /** * @param {import('../Block.js').default} block * @param {import('estree').Identifier} parent_node @@ -475,19 +494,8 @@ export default class EachBlockWrapper extends Wrapper { : '@destroy_block'; if (this.dependencies.size) { this.block.maintain_context = true; - - let update_each_block_value = b`${this.vars.each_block_value} = ${snippet};`; - if (this.node.expression.dependencies.size == 0) { - update_each_block_value = null; - } else if (this.dependencies.size > this.node.expression.dependencies.size) { - const snippet_dependencies = Array.from(this.node.expression.dependencies); - update_each_block_value = b`if (${block.renderer.dirty(snippet_dependencies)}) { - ${update_each_block_value} - }`; - } - this.updates.push(b` - ${update_each_block_value} + ${this.check_iterable_dependencies(block, snippet)} ${this.block.has_outros && b`@group_outros();`} ${ @@ -631,21 +639,12 @@ export default class EachBlockWrapper extends Wrapper { `; } - let update_each_block_value = b`${this.vars.each_block_value} = ${snippet};`; - if (this.node.expression.dependencies.size == 0) { - update_each_block_value = null; - } else if (this.dependencies.size > this.node.expression.dependencies.size) { - const snippet_dependencies = Array.from(this.node.expression.dependencies); - update_each_block_value = b`if (${block.renderer.dirty(snippet_dependencies)}) { - ${update_each_block_value} - }`; - } - // We declare `i` as block scoped here, as the `remove_old_blocks` code // may rely on continuing where this iteration stopped. const update = b` ${!this.block.has_update_method && b`const #old_length = ${this.vars.each_block_value}.length;`} - ${update_each_block_value} + ${this.check_iterable_dependencies(block, snippet)} + let #i; for (#i = ${start}; #i < ${data_length}; #i += 1) { const child_ctx = ${this.vars.get_each_context}(#ctx, ${this.vars.each_block_value}, #i); diff --git a/packages/svelte/test/runtime/samples/each-block-bind-this-5/_config.js b/packages/svelte/test/runtime/samples/each-block-bind-this-5/_config.js index d48c412f1b..3a20e362a4 100644 --- a/packages/svelte/test/runtime/samples/each-block-bind-this-5/_config.js +++ b/packages/svelte/test/runtime/samples/each-block-bind-this-5/_config.js @@ -5,8 +5,8 @@ export default { async test({ assert, component, target }) { const pArray = target.querySelectorAll('p'); - for (let i = 0; i <= 9; i++) { - assert.equal(component.bindings[i], pArray[i]); - } + for (let i = 0; i <= 9; i++) { + assert.equal(component.bindings[i], pArray[i]); + } } };