feat: allow #each to iterate over iterables (#8626)

closes #7425
Uses a new ensure_array_like function to use Array.from in case the variable doesn't have a length property ('length' in 'some string' fails, therefore obj?.length). This ensures other places can stay unmodified. Using for (const x of y) constructs would require large changes across the each block code where it's uncertain that it would work for all cases since the array length is needed in various places.

Author: dummdidumm

CHANGELOG.md

@@ -30,6 +30,7 @@
 * Treat slots as if they don't exist when using CSS adjacent and general sibling combinators ([#8284](https://github.com/sveltejs/svelte/issues/8284))
 * Fix transitions so that they don't require a `style-src 'unsafe-inline'` Content Security Policy (CSP) ([#6662](https://github.com/sveltejs/svelte/issues/6662)).
 * Explicitly disallow `var` declarations extending the reactive statement scope ([#6800](https://github.com/sveltejs/svelte/pull/6800))
+* Allow `#each` to iterate over iterables like `Set`, `Map` etc ([#7425](https://github.com/sveltejs/svelte/issues/7425))
 * Warn about `:` in attributes and props to prevent ambiguity with Svelte directives ([#6823](https://github.com/sveltejs/svelte/issues/6823))
 
 ## 3.59.1

site/content/docs/03-template-syntax.md

@@ -296,6 +296,8 @@ An each block can also have an `{:else}` clause, which is rendered if the list i
 {/each}
 ```
 
+It is possible to iterate over iterables like `Map` or `Set`. Iterables need to be finite and static (they shouldn't change while being iterated over). Under the hood, they are transformed to an array using `Array.from` before being passed off to rendering. If you're writing performance-sensitive code, try to avoid iterables and use regular arrays as they are more performant.
+
 
 ### {#await ...}
 

src/compiler/compile/internal_exports.js

@@ -206,11 +206,8 @@ export default class EachBlockWrapper extends Wrapper {
 		const needs_anchor = this.next
 			? !this.next.is_dom_node()
 			: !parent_node || !this.parent.is_dom_node();
-		const snippet = this.node.expression.manipulate(block);
+		const snippet = x`@ensure_array_like(${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});`);
-		}
 
 		/** @type {import('estree').Identifier} */
 		const initial_anchor_node = {
@@ -480,7 +477,6 @@ export default class EachBlockWrapper extends Wrapper {
 			this.block.maintain_context = true;
 			this.updates.push(b`
 				${this.vars.each_block_value} = ${snippet};
-				${this.renderer.options.dev && b`@validate_each_argument(${this.vars.each_block_value});`}
 
 				${this.block.has_outros && b`@group_outros();`}
 				${
@@ -628,7 +624,6 @@ export default class EachBlockWrapper extends Wrapper {
 			const update = b`
 				${!this.block.has_update_method && b`const #old_length = ${this.vars.each_block_value}.length;`}
 				${this.vars.each_block_value} = ${snippet};
-				${this.renderer.options.dev && b`@validate_each_argument(${this.vars.each_block_value});`}
 
 				let #i;
 				for (#i = ${start}; #i < ${data_length}; #i += 1) {

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

@@ -12,6 +12,7 @@ import { SvelteComponent } from './Component.js';
 import { is_void } from '../../shared/utils/names.js';
 import { VERSION } from '../../shared/version.js';
 import { contenteditable_truthy_values } from './utils.js';
+import { ensure_array_like } from './each.js';
 
 /**
  * @template T
@@ -208,16 +209,15 @@ export function set_data_maybe_contenteditable_dev(text, data, attr_value) {
 	}
 }
 
-/**
- * @returns {void} */
-export function validate_each_argument(arg) {
-	if (typeof arg !== 'string' && !(arg && typeof arg === 'object' && 'length' in arg)) {
-		let msg = '{#each} only iterates over array-like objects.';
-		if (typeof Symbol === 'function' && arg && Symbol.iterator in arg) {
-			msg += ' You can use a spread to convert this iterable into an array.';
-		}
-		throw new Error(msg);
+export function ensure_array_like_dev(arg) {
+	if (
+		typeof arg !== 'string' &&
+		!(arg && typeof arg === 'object' && 'length' in arg) &&
+		!(typeof Symbol === 'function' && arg && Symbol.iterator in arg)
+	) {
+		throw new Error('{#each} only works with iterable values.');
 	}
+	return ensure_array_like(arg);
 }
 
 /**

src/runtime/internal/dev.js

@@ -1,6 +1,16 @@
 import { transition_in, transition_out } from './transitions.js';
 import { run_all } from './utils.js';
 
+// general each functions:
+
+export function ensure_array_like(array_like_or_iterator) {
+	return array_like_or_iterator?.length !== undefined
+		? array_like_or_iterator
+		: Array.from(array_like_or_iterator);
+}
+
+// keyed each functions:
+
 /** @returns {void} */
 export function destroy_block(block, lookup) {
 	block.d(1);

src/runtime/internal/keyed_each.js renamed to src/runtime/internal/each.js

@@ -3,7 +3,7 @@ export * from './await_block.js';
 export * from './dom.js';
 export * from './environment.js';
 export * from './globals.js';
-export * from './keyed_each.js';
+export * from './each.js';
 export * from './lifecycle.js';
 export * from './loop.js';
 export * from './scheduler.js';

src/runtime/internal/index.js

@@ -1,6 +1,7 @@
 import { set_current_component, current_component } from './lifecycle.js';
 import { run_all, blank_object } from './utils.js';
 import { boolean_attributes } from '../../shared/boolean_attributes.js';
+import { ensure_array_like } from './each.js';
 export { is_void } from '../../shared/utils/names.js';
 
 export const invalid_attribute_name_character =
@@ -107,6 +108,7 @@ export function escape_object(obj) {
 
 /** @returns {string} */
 export function each(items, fn) {
+	items = ensure_array_like(items);
 	let str = '';
 	for (let i = 0; i < items.length; i += 1) {
 		str += fn(items[i], i);

src/runtime/internal/ssr.js

@@ -7,14 +7,14 @@ import {
 	detach_dev,
 	dispatch_dev,
 	element,
+	ensure_array_like_dev,
 	init,
 	insert_dev,
 	noop,
 	safe_not_equal,
 	set_data_dev,
 	space,
 	text,
-	validate_each_argument,
 	validate_slots
 } from "svelte/internal";
 
@@ -89,8 +89,7 @@ function create_fragment(ctx) {
 	let p;
 	let t1;
 	let t2;
-	let each_value = /*things*/ ctx[0];
-	validate_each_argument(each_value);
+	let each_value = ensure_array_like_dev(/*things*/ ctx[0]);
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
@@ -126,8 +125,7 @@ function create_fragment(ctx) {
 		},
 		p: function update(ctx, [dirty]) {
 			if (dirty & /*things*/ 1) {
-				each_value = /*things*/ ctx[0];
-				validate_each_argument(each_value);
+				each_value = ensure_array_like_dev(/*things*/ ctx[0]);
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {

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

@@ -7,14 +7,14 @@ import {
 	detach_dev,
 	dispatch_dev,
 	element,
+	ensure_array_like_dev,
 	init,
 	insert_dev,
 	noop,
 	safe_not_equal,
 	set_data_dev,
 	space,
 	text,
-	validate_each_argument,
 	validate_slots
 } from "svelte/internal";
 
@@ -83,8 +83,7 @@ function create_fragment(ctx) {
 	let p;
 	let t1;
 	let t2;
-	let each_value = /*things*/ ctx[0];
-	validate_each_argument(each_value);
+	let each_value = ensure_array_like_dev(/*things*/ ctx[0]);
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
@@ -120,8 +119,7 @@ function create_fragment(ctx) {
 		},
 		p: function update(ctx, [dirty]) {
 			if (dirty & /*things*/ 1) {
-				each_value = /*things*/ ctx[0];
-				validate_each_argument(each_value);
+				each_value = ensure_array_like_dev(/*things*/ ctx[0]);
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {