diff --git a/src/compiler/compile/render_dom/wrappers/EachBlock.ts b/src/compiler/compile/render_dom/wrappers/EachBlock.ts index 42792efce714..ecd55c9b1d02 100644 --- a/src/compiler/compile/render_dom/wrappers/EachBlock.ts +++ b/src/compiler/compile/render_dom/wrappers/EachBlock.ts @@ -178,7 +178,7 @@ export default class EachBlockWrapper extends Wrapper { const snippet = this.node.expression.render(block); - block.builders.init.add_line(`var ${this.vars.each_block_value} = ${snippet};`); + block.builders.init.add_line(`let ${this.vars.each_block_value} = ${snippet};`); renderer.blocks.push(deindent` function ${this.vars.get_each_context}(ctx, list, i) { @@ -214,7 +214,9 @@ export default class EachBlockWrapper extends Wrapper { if (this.block.has_intro_method || this.block.has_outro_method) { block.builders.intro.add_block(deindent` - for (var #i = 0; #i < ${this.vars.data_length}; #i += 1) @transition_in(${this.vars.iterations}[#i]); + for (let #i = 0; #i < ${this.vars.data_length}; #i += 1) { + @transition_in(${this.vars.iterations}[#i]); + } `); } @@ -230,7 +232,7 @@ export default class EachBlockWrapper extends Wrapper { if (this.else) { const each_block_else = component.get_unique_name(`${this.var}_else`); - block.builders.init.add_line(`var ${each_block_else} = null;`); + block.builders.init.add_line(`let ${each_block_else} = null;`); // TODO neaten this up... will end up with an empty line in the block block.builders.init.add_block(deindent` @@ -335,7 +337,7 @@ export default class EachBlockWrapper extends Wrapper { // @ts-ignore todo: probably error this.node.key.render()}; - for (var #i = 0; #i < ${this.vars.each_block_value}.${length}; #i += 1) { + for (let #i = 0; #i < ${this.vars.each_block_value}.${length}; #i += 1) { let child_ctx = ${this.vars.get_each_context}(ctx, ${this.vars.each_block_value}, #i); let key = ${get_key}(child_ctx); ${lookup}.set(key, ${iterations}[#i] = ${create_each_block}(key, child_ctx)); @@ -343,17 +345,23 @@ export default class EachBlockWrapper extends Wrapper { `); block.builders.create.add_block(deindent` - for (#i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].c(); + for (let #i = 0; #i < ${view_length}; #i += 1) { + ${iterations}[#i].c(); + } `); if (parent_nodes && this.renderer.options.hydratable) { block.builders.claim.add_block(deindent` - for (#i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].l(${parent_nodes}); + for (let #i = 0; #i < ${view_length}; #i += 1) { + ${iterations}[#i].l(${parent_nodes}); + } `); } block.builders.mount.add_block(deindent` - for (#i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].m(${initial_mount_node}, ${initial_anchor_node}); + for (let #i = 0; #i < ${view_length}; #i += 1) { + ${iterations}[#i].m(${initial_mount_node}, ${initial_anchor_node}); + } `); const dynamic = this.block.has_update_method; @@ -378,12 +386,16 @@ export default class EachBlockWrapper extends Wrapper { if (this.block.has_outros) { block.builders.outro.add_block(deindent` - for (#i = 0; #i < ${view_length}; #i += 1) @transition_out(${iterations}[#i]); + for (let #i = 0; #i < ${view_length}; #i += 1) { + @transition_out(${iterations}[#i]); + } `); } block.builders.destroy.add_block(deindent` - for (#i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].d(${parent_node ? '' : 'detaching'}); + for (let #i = 0; #i < ${view_length}; #i += 1) { + ${iterations}[#i].d(${parent_node ? '' : 'detaching'}); + } `); } @@ -414,29 +426,29 @@ export default class EachBlockWrapper extends Wrapper { } = this.vars; block.builders.init.add_block(deindent` - var ${iterations} = []; + let ${iterations} = []; - for (var #i = 0; #i < ${data_length}; #i += 1) { + for (let #i = 0; #i < ${data_length}; #i += 1) { ${iterations}[#i] = ${create_each_block}(${this.vars.get_each_context}(ctx, ${this.vars.each_block_value}, #i)); } `); block.builders.create.add_block(deindent` - for (var #i = 0; #i < ${view_length}; #i += 1) { + for (let #i = 0; #i < ${view_length}; #i += 1) { ${iterations}[#i].c(); } `); if (parent_nodes && this.renderer.options.hydratable) { block.builders.claim.add_block(deindent` - for (var #i = 0; #i < ${view_length}; #i += 1) { + for (let #i = 0; #i < ${view_length}; #i += 1) { ${iterations}[#i].l(${parent_nodes}); } `); } block.builders.mount.add_block(deindent` - for (var #i = 0; #i < ${view_length}; #i += 1) { + for (let #i = 0; #i < ${view_length}; #i += 1) { ${iterations}[#i].m(${initial_mount_node}, ${initial_anchor_node}); } `); @@ -499,7 +511,9 @@ export default class EachBlockWrapper extends Wrapper { `); remove_old_blocks = deindent` @group_outros(); - for (#i = ${this.vars.each_block_value}.${length}; #i < ${view_length}; #i += 1) ${out}(#i); + for (#i = ${this.vars.each_block_value}.${length}; #i < ${view_length}; #i += 1) { + ${out}(#i); + } @check_outros(); `; } else { @@ -511,11 +525,14 @@ export default class EachBlockWrapper extends Wrapper { `; } + // We declare `i` as block scoped here, as the `remove_old_blocks` code + // may rely on continuing where this iteration stopped. const update = deindent` ${!this.block.has_update_method && `const #old_length = ${this.vars.each_block_value}.length;`} ${this.vars.each_block_value} = ${snippet}; - for (var #i = ${start}; #i < ${this.vars.each_block_value}.${length}; #i += 1) { + let #i; + for (#i = ${start}; #i < ${this.vars.each_block_value}.${length}; #i += 1) { const child_ctx = ${this.vars.get_each_context}(ctx, ${this.vars.each_block_value}, #i); ${for_loop_body} @@ -534,8 +551,10 @@ export default class EachBlockWrapper extends Wrapper { if (this.block.has_outros) { block.builders.outro.add_block(deindent` ${iterations} = ${iterations}.filter(@_Boolean); - for (let #i = 0; #i < ${view_length}; #i += 1) @transition_out(${iterations}[#i]);` - ); + for (let #i = 0; #i < ${view_length}; #i += 1) { + @transition_out(${iterations}[#i]); + } + `); } block.builders.destroy.add_block(`@destroy_each(${iterations}, detaching);`); diff --git a/test/js/samples/debug-foo-bar-baz-things/expected.js b/test/js/samples/debug-foo-bar-baz-things/expected.js index b93ed72d1cec..f613329fb650 100644 --- a/test/js/samples/debug-foo-bar-baz-things/expected.js +++ b/test/js/samples/debug-foo-bar-baz-things/expected.js @@ -71,17 +71,17 @@ function create_each_block(ctx) { function create_fragment(ctx) { var t0, p, t1, t2; - var each_value = ctx.things; + let each_value = ctx.things; - var each_blocks = []; + let each_blocks = []; - for (var i = 0; i < each_value.length; i += 1) { + for (let i = 0; i < each_value.length; i += 1) { each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i)); } return { c: function create() { - for (var i = 0; i < each_blocks.length; i += 1) { + for (let i = 0; i < each_blocks.length; i += 1) { each_blocks[i].c(); } @@ -97,7 +97,7 @@ function create_fragment(ctx) { }, m: function mount(target, anchor) { - for (var i = 0; i < each_blocks.length; i += 1) { + for (let i = 0; i < each_blocks.length; i += 1) { each_blocks[i].m(target, anchor); } @@ -111,7 +111,8 @@ function create_fragment(ctx) { if (changed.things) { each_value = ctx.things; - for (var i = 0; i < each_value.length; i += 1) { + let i; + for (i = 0; i < each_value.length; i += 1) { const child_ctx = get_each_context(ctx, each_value, i); if (each_blocks[i]) { diff --git a/test/js/samples/debug-foo/expected.js b/test/js/samples/debug-foo/expected.js index 52875735bfa1..0e12e3a6cbe5 100644 --- a/test/js/samples/debug-foo/expected.js +++ b/test/js/samples/debug-foo/expected.js @@ -71,17 +71,17 @@ function create_each_block(ctx) { function create_fragment(ctx) { var t0, p, t1, t2; - var each_value = ctx.things; + let each_value = ctx.things; - var each_blocks = []; + let each_blocks = []; - for (var i = 0; i < each_value.length; i += 1) { + for (let i = 0; i < each_value.length; i += 1) { each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i)); } return { c: function create() { - for (var i = 0; i < each_blocks.length; i += 1) { + for (let i = 0; i < each_blocks.length; i += 1) { each_blocks[i].c(); } @@ -97,7 +97,7 @@ function create_fragment(ctx) { }, m: function mount(target, anchor) { - for (var i = 0; i < each_blocks.length; i += 1) { + for (let i = 0; i < each_blocks.length; i += 1) { each_blocks[i].m(target, anchor); } @@ -111,7 +111,8 @@ function create_fragment(ctx) { if (changed.things) { each_value = ctx.things; - for (var i = 0; i < each_value.length; i += 1) { + let i; + for (i = 0; i < each_value.length; i += 1) { const child_ctx = get_each_context(ctx, each_value, i); if (each_blocks[i]) { diff --git a/test/js/samples/deconflict-builtins/expected.js b/test/js/samples/deconflict-builtins/expected.js index 3041d856b302..6609fcccf7d0 100644 --- a/test/js/samples/deconflict-builtins/expected.js +++ b/test/js/samples/deconflict-builtins/expected.js @@ -52,17 +52,17 @@ function create_each_block(ctx) { function create_fragment(ctx) { var each_1_anchor; - var each_value = ctx.createElement; + let each_value = ctx.createElement; - var each_blocks = []; + let each_blocks = []; - for (var i = 0; i < each_value.length; i += 1) { + for (let i = 0; i < each_value.length; i += 1) { each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i)); } return { c() { - for (var i = 0; i < each_blocks.length; i += 1) { + for (let i = 0; i < each_blocks.length; i += 1) { each_blocks[i].c(); } @@ -70,7 +70,7 @@ function create_fragment(ctx) { }, m(target, anchor) { - for (var i = 0; i < each_blocks.length; i += 1) { + for (let i = 0; i < each_blocks.length; i += 1) { each_blocks[i].m(target, anchor); } @@ -81,7 +81,8 @@ function create_fragment(ctx) { if (changed.createElement) { each_value = ctx.createElement; - for (var i = 0; i < each_value.length; i += 1) { + let i; + for (i = 0; i < each_value.length; i += 1) { const child_ctx = get_each_context(ctx, each_value, i); if (each_blocks[i]) { diff --git a/test/js/samples/each-block-array-literal/expected.js b/test/js/samples/each-block-array-literal/expected.js index 00af8df033c1..6ca6773f6bf4 100644 --- a/test/js/samples/each-block-array-literal/expected.js +++ b/test/js/samples/each-block-array-literal/expected.js @@ -52,17 +52,17 @@ function create_each_block(ctx) { function create_fragment(ctx) { var each_1_anchor; - var each_value = [ctx.a, ctx.b, ctx.c, ctx.d, ctx.e]; + let each_value = [ctx.a, ctx.b, ctx.c, ctx.d, ctx.e]; - var each_blocks = []; + let each_blocks = []; - for (var i = 0; i < 5; i += 1) { + for (let i = 0; i < 5; i += 1) { each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i)); } return { c() { - for (var i = 0; i < 5; i += 1) { + for (let i = 0; i < 5; i += 1) { each_blocks[i].c(); } @@ -70,7 +70,7 @@ function create_fragment(ctx) { }, m(target, anchor) { - for (var i = 0; i < 5; i += 1) { + for (let i = 0; i < 5; i += 1) { each_blocks[i].m(target, anchor); } @@ -81,7 +81,8 @@ function create_fragment(ctx) { if (changed.a || changed.b || changed.c || changed.d || changed.e) { each_value = [ctx.a, ctx.b, ctx.c, ctx.d, ctx.e]; - for (var i = 0; i < each_value.length; i += 1) { + let i; + for (i = 0; i < each_value.length; i += 1) { const child_ctx = get_each_context(ctx, each_value, i); if (each_blocks[i]) { diff --git a/test/js/samples/each-block-changed-check/expected.js b/test/js/samples/each-block-changed-check/expected.js index f48a42d74f12..0601c3133448 100644 --- a/test/js/samples/each-block-changed-check/expected.js +++ b/test/js/samples/each-block-changed-check/expected.js @@ -83,17 +83,17 @@ function create_each_block(ctx) { function create_fragment(ctx) { var t0, p, t1; - var each_value = ctx.comments; + let each_value = ctx.comments; - var each_blocks = []; + let each_blocks = []; - for (var i = 0; i < each_value.length; i += 1) { + for (let i = 0; i < each_value.length; i += 1) { each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i)); } return { c() { - for (var i = 0; i < each_blocks.length; i += 1) { + for (let i = 0; i < each_blocks.length; i += 1) { each_blocks[i].c(); } @@ -103,7 +103,7 @@ function create_fragment(ctx) { }, m(target, anchor) { - for (var i = 0; i < each_blocks.length; i += 1) { + for (let i = 0; i < each_blocks.length; i += 1) { each_blocks[i].m(target, anchor); } @@ -116,7 +116,8 @@ function create_fragment(ctx) { if (changed.comments || changed.elapsed || changed.time) { each_value = ctx.comments; - for (var i = 0; i < each_value.length; i += 1) { + let i; + for (i = 0; i < each_value.length; i += 1) { const child_ctx = get_each_context(ctx, each_value, i); if (each_blocks[i]) { diff --git a/test/js/samples/each-block-keyed-animated/expected.js b/test/js/samples/each-block-keyed-animated/expected.js index ee14dc8559b9..25aa1e5c5df6 100644 --- a/test/js/samples/each-block-keyed-animated/expected.js +++ b/test/js/samples/each-block-keyed-animated/expected.js @@ -74,11 +74,11 @@ function create_each_block(key_1, ctx) { function create_fragment(ctx) { var each_blocks = [], each_1_lookup = new Map(), each_1_anchor; - var each_value = ctx.things; + let each_value = ctx.things; const get_key = ctx => ctx.thing.id; - for (var i = 0; i < each_value.length; i += 1) { + for (let i = 0; i < each_value.length; i += 1) { let child_ctx = get_each_context(ctx, each_value, i); let key = get_key(child_ctx); each_1_lookup.set(key, each_blocks[i] = create_each_block(key, child_ctx)); @@ -86,13 +86,17 @@ function create_fragment(ctx) { return { c() { - for (i = 0; i < each_blocks.length; i += 1) each_blocks[i].c(); + for (let i = 0; i < each_blocks.length; i += 1) { + each_blocks[i].c(); + } each_1_anchor = empty(); }, m(target, anchor) { - for (i = 0; i < each_blocks.length; i += 1) each_blocks[i].m(target, anchor); + for (let i = 0; i < each_blocks.length; i += 1) { + each_blocks[i].m(target, anchor); + } insert(target, each_1_anchor, anchor); }, @@ -108,7 +112,9 @@ function create_fragment(ctx) { o: noop, d(detaching) { - for (i = 0; i < each_blocks.length; i += 1) each_blocks[i].d(detaching); + for (let i = 0; i < each_blocks.length; i += 1) { + each_blocks[i].d(detaching); + } if (detaching) { detach(each_1_anchor); diff --git a/test/js/samples/each-block-keyed/expected.js b/test/js/samples/each-block-keyed/expected.js index 8c37abde7f8a..ae20825344b2 100644 --- a/test/js/samples/each-block-keyed/expected.js +++ b/test/js/samples/each-block-keyed/expected.js @@ -58,11 +58,11 @@ function create_each_block(key_1, ctx) { function create_fragment(ctx) { var each_blocks = [], each_1_lookup = new Map(), each_1_anchor; - var each_value = ctx.things; + let each_value = ctx.things; const get_key = ctx => ctx.thing.id; - for (var i = 0; i < each_value.length; i += 1) { + for (let i = 0; i < each_value.length; i += 1) { let child_ctx = get_each_context(ctx, each_value, i); let key = get_key(child_ctx); each_1_lookup.set(key, each_blocks[i] = create_each_block(key, child_ctx)); @@ -70,13 +70,17 @@ function create_fragment(ctx) { return { c() { - for (i = 0; i < each_blocks.length; i += 1) each_blocks[i].c(); + for (let i = 0; i < each_blocks.length; i += 1) { + each_blocks[i].c(); + } each_1_anchor = empty(); }, m(target, anchor) { - for (i = 0; i < each_blocks.length; i += 1) each_blocks[i].m(target, anchor); + for (let i = 0; i < each_blocks.length; i += 1) { + each_blocks[i].m(target, anchor); + } insert(target, each_1_anchor, anchor); }, @@ -90,7 +94,9 @@ function create_fragment(ctx) { o: noop, d(detaching) { - for (i = 0; i < each_blocks.length; i += 1) each_blocks[i].d(detaching); + for (let i = 0; i < each_blocks.length; i += 1) { + each_blocks[i].d(detaching); + } if (detaching) { detach(each_1_anchor);