Merge pull request #3504 from Swatinem/consistent-each

Make generated `each` code more consistent

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);`);

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]) {

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]) {

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]) {

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]) {

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]) {

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);

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);