Supporting iterable collections

[pyrmont]

My understanding is that Solid.js uses this library to convert JSX to JavaScript that manipulates the DOM.

In experimenting with the Squint library, I've noticed that if a JSX value contains a custom collection of JSX nodes that are not in an array, these nodes are not inserted in the DOM. Instead, a warning message is printed to the console stating Unrecognized value. Skipped inserting. I assume this message is generated by the following code:

dom-expressions/packages/dom-expressions/src/client.js

Lines 460 to 470 in 82c377d

	cleanChildren(parent, current, null, value);
	} else if (current == null || current === "" || !parent.firstChild) {
	parent.appendChild(value);
	} else parent.replaceChild(value, parent.firstChild);
	current = value;
	} else if ("_DX_DEV_") console.warn(`Unrecognized value. Skipped inserting`, value);
	return current;
	}
	function normalizeIncomingArray(normalized, array, current, unwrap) {

If the collection is iterable (i.e. it has Symbol.iterator set), is there a reason not to iterate over it and extract its elements that way? A number of Squint's functions return a LazyIterable object rather than an array, and it would be helpful if those were supported.

[borkdude]

Note that React supports anything that has [Symbol.iterator]().

[lxsmnsyc]

React has only recently started supporting iterables, but yes, there is some things to be discussed whether or not this is worth adding.

[borkdude]

I've been using it in React for over a year, FWIW

[ryansolid]

I wonder would we need to expand support for things like For. Because it isn't only the JSX insertion but anything that maps it I imagine.