Merge pull request #2204 from sveltejs/gh-2180-fix

generate valid code for each block array literals (#2180)

src/compile/render-dom/wrappers/EachBlock.ts

@@ -1,6 +1,5 @@
 import Renderer from '../Renderer';
 import Block from '../Block';
-import Node from '../../nodes/shared/Node';
 import Wrapper from './shared/Wrapper';
 import createDebuggingComment from '../../../utils/createDebuggingComment';
 import EachBlock from '../../nodes/EachBlock';
@@ -55,8 +54,9 @@ export default class EachBlockWrapper extends Wrapper {
 		each_block_value: string;
 		get_each_context: string;
 		iterations: string;
-		data_length: string,
-		view_length: string,
+		fixed_length: number;
+		data_length: string;
+		view_length: string;
 		length: string;
 	}
 
@@ -113,6 +113,7 @@ export default class EachBlockWrapper extends Wrapper {
 			length: `[✂${c}-${c+4}✂]`,
 
 			// optimisation for array literal
+			fixed_length,
 			data_length: fixed_length === null ? `${each_block_value}.[✂${c}-${c+4}✂]` : fixed_length,
 			view_length: fixed_length === null ? `${iterations}.[✂${c}-${c+4}✂]` : fixed_length,
 
@@ -373,6 +374,7 @@ export default class EachBlockWrapper extends Wrapper {
 			create_each_block,
 			length,
 			iterations,
+			fixed_length,
 			data_length,
 			view_length,
 			anchor
@@ -475,7 +477,7 @@ export default class EachBlockWrapper extends Wrapper {
 					for (${this.block.hasUpdateMethod ? `` : `#i = ${this.vars.each_block_value}.${length}`}; #i < ${view_length}; #i += 1) {
 						${iterations}[#i].d(1);
 					}
-					${view_length} = ${this.vars.each_block_value}.${length};
+					${!fixed_length && `${view_length} = ${this.vars.each_block_value}.${length};`}
 				`;
 			}
 

test/js/samples/each-block-array-literal/expected.js

@@ -1,5 +1,5 @@
 /* generated by Svelte vX.Y.Z */
-import { SvelteComponent as SvelteComponent_1, append, createComment, createElement, createText, destroyEach, detachNode, init, insert, noop, safe_not_equal } from "svelte/internal";
+import { SvelteComponent as SvelteComponent_1, append, createComment, createElement, createText, destroyEach, detachNode, flush, init, insert, noop, safe_not_equal, setData } from "svelte/internal";
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = Object.create(ctx);
@@ -7,14 +7,14 @@ function get_each_context(ctx, list, i) {
 	return child_ctx;
 }
 
-// (1:0) {#each [1, 2, 3, 4, 5] as num}
+// (1:0) {#each [a, b, c, d, e] as num}
 function create_each_block(ctx) {
-	var span, text;
+	var span, text_value = ctx.num, text;
 
 	return {
 		c() {
 			span = createElement("span");
-			text = createText(ctx.num);
+			text = createText(text_value);
 		},
 
 		m(target, anchor) {
@@ -22,7 +22,11 @@ function create_each_block(ctx) {
 			append(span, text);
 		},
 
-		p: noop,
+		p(changed, ctx) {
+			if ((changed.a || changed.b || changed.c || changed.d || changed.e) && text_value !== (text_value = ctx.num)) {
+				setData(text, text_value);
+			}
+		},
 
 		d(detach) {
 			if (detach) {
@@ -35,7 +39,7 @@ function create_each_block(ctx) {
 function create_fragment(ctx) {
 	var each_anchor;
 
-	var each_value = [1, 2, 3, 4, 5];
+	var each_value = [ctx.a, ctx.b, ctx.c, ctx.d, ctx.e];
 
 	var each_blocks = [];
 
@@ -60,7 +64,28 @@ function create_fragment(ctx) {
 			insert(target, each_anchor, anchor);
 		},
 
-		p: noop,
+		p(changed, 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) {
+					const child_ctx = get_each_context(ctx, each_value, i);
+
+					if (each_blocks[i]) {
+						each_blocks[i].p(changed, child_ctx);
+					} else {
+						each_blocks[i] = create_each_block(child_ctx);
+						each_blocks[i].c();
+						each_blocks[i].m(each_anchor.parentNode, each_anchor);
+					}
+				}
+
+				for (; i < 5; i += 1) {
+					each_blocks[i].d(1);
+				}
+			}
+		},
+
 		i: noop,
 		o: noop,
 
@@ -74,10 +99,69 @@ function create_fragment(ctx) {
 	};
 }
 
+function instance($$self, $$props, $$invalidate) {
+	let { a, b, c, d, e } = $$props;
+
+	$$self.$set = $$props => {
+		if ('a' in $$props) $$invalidate('a', a = $$props.a);
+		if ('b' in $$props) $$invalidate('b', b = $$props.b);
+		if ('c' in $$props) $$invalidate('c', c = $$props.c);
+		if ('d' in $$props) $$invalidate('d', d = $$props.d);
+		if ('e' in $$props) $$invalidate('e', e = $$props.e);
+	};
+
+	return { a, b, c, d, e };
+}
+
 class SvelteComponent extends SvelteComponent_1 {
 	constructor(options) {
 		super();
-		init(this, options, null, create_fragment, safe_not_equal);
+		init(this, options, instance, create_fragment, safe_not_equal);
+	}
+
+	get a() {
+		return this.$$.ctx.a;
+	}
+
+	set a(a) {
+		this.$set({ a });
+		flush();
+	}
+
+	get b() {
+		return this.$$.ctx.b;
+	}
+
+	set b(b) {
+		this.$set({ b });
+		flush();
+	}
+
+	get c() {
+		return this.$$.ctx.c;
+	}
+
+	set c(c) {
+		this.$set({ c });
+		flush();
+	}
+
+	get d() {
+		return this.$$.ctx.d;
+	}
+
+	set d(d) {
+		this.$set({ d });
+		flush();
+	}
+
+	get e() {
+		return this.$$.ctx.e;
+	}
+
+	set e(e) {
+		this.$set({ e });
+		flush();
 	}
 }
 

test/js/samples/each-block-array-literal/input.svelte

@@ -1,3 +1,3 @@
-{#each [1, 2, 3, 4, 5] as num}
+{#each [a, b, c, d, e] as num}
 	<span>{num}</span>
 {/each}