implement Dev mode validation of {#each} block argument - disallow Sets, Maps, nonArrayLikes

src/compiler/compile/render_dom/wrappers/EachBlock.ts

@@ -204,6 +204,9 @@ export default class EachBlockWrapper extends Wrapper {
 		const snippet = this.node.expression.manipulate(block);
 
 		block.chunks.init.push(b`let ${this.vars.each_block_value} = ${snippet};`);
+		if (this.renderer.options.dev) {
+			block.chunks.init.push(b`@validate_each_argument(${this.vars.each_block_value});`);
+		}
 
 		// TODO which is better — Object.create(array) or array.slice()?
 		renderer.blocks.push(b`

src/runtime/internal/dev.ts

@@ -79,6 +79,19 @@ export function set_data_dev(text, data) {
 	text.data = data;
 }
 
+export function validate_each_argument(arg) {
+	if (arg instanceof Set || arg instanceof Map) {
+		throw new Error(
+			`Svelte does not allow Sets or Maps in an {#each} block. Use [...arg.values()] or [...arg.entries()] instead.`
+		);
+	} 
+	if (arg.length === undefined) {
+		throw new Error(
+			`Svelte needs an array-like value for the {#each} block. You can spread your iterable into an array instead, e.g. [...iterable]`
+		);
+	}
+}
+
 
 type Props = Record<string, any>;
 export interface SvelteComponentDev {

test/js/samples/debug-foo-bar-baz-things/expected.js

@@ -13,7 +13,8 @@ import {
 	safe_not_equal,
 	set_data_dev,
 	space,
-	text
+	text,
+	validate_each_argument
 } from "svelte/internal";
 
 const file = undefined;
@@ -88,6 +89,7 @@ function create_fragment(ctx) {
 	let t1;
 	let t2;
 	let each_value = /*things*/ ctx[0];
+	validate_each_argument(each_value);
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {

test/js/samples/debug-foo/expected.js

@@ -13,7 +13,8 @@ import {
 	safe_not_equal,
 	set_data_dev,
 	space,
-	text
+	text,
+	validate_each_argument
 } from "svelte/internal";
 
 const file = undefined;
@@ -82,6 +83,7 @@ function create_fragment(ctx) {
 	let t1;
 	let t2;
 	let each_value = /*things*/ ctx[0];
+	validate_each_argument(each_value);
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {

test/js/samples/debug-no-dependencies/expected.js

@@ -10,7 +10,8 @@ import {
 	noop,
 	safe_not_equal,
 	space,
-	text
+	text,
+	validate_each_argument
 } from "svelte/internal";
 
 const file = undefined;
@@ -64,6 +65,7 @@ function create_each_block(ctx) {
 function create_fragment(ctx) {
 	let each_1_anchor;
 	let each_value = things;
+	validate_each_argument(each_value);
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {

test/runtime/samples/dev-warning-each-block-no-sets-maps/_config.js

@@ -0,0 +1,6 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+	error: `Svelte does not allow Sets or Maps in an {#each} block. Use [...arg.values()] or [...arg.entries()] instead.`
+};

test/runtime/samples/dev-warning-each-block-no-sets-maps/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	const foo = new Set([1,2,3])
+</script>
+
+{#each foo as item}
+	<div>{item}</div>
+{/each}

test/runtime/samples/dev-warning-each-block-require-arraylike/_config.js

@@ -0,0 +1,6 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+	error: `Svelte needs an array-like value for the {#each} block. You can spread your iterable into an array instead, e.g. [...iterable]`
+};

test/runtime/samples/dev-warning-each-block-require-arraylike/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	const foo = new Set([1,2,3])
+</script>
+
+{#each foo.values() as item}
+	<div>{item}</div>
+{/each}