Accept iterables and collections as children.

[leebyron]

React currently accepts Arrays as children:

var array = [<span />, <span />, <span />];
<div>{spans}</div>

It would be excellent if we can generalize this concept to accept both collections and iterables.

Collections (such as Set, Map, or Immutable-js's variants) can be identified if they implement values() and the result of calling values() is an Iterator (typeof maybeIterator.next === 'function').

Iterables (Array, arguments object, other array-ish things, third-party data structures) can be identified if they have Symbol.iterator or @@iterator returning an Iterator.

In both cases, you're left with an Iterator, at which point extracting the children becomes straight-forward.

This unlocks a few really useful things:

Use Immutable-js with React efficiently:

var data = Immutable.Vector('a', 'b', 'c');
<div>{data.map(str => <span>{str.toUpperCase}</span>)}</div>

Use generators:

var data = function*() {
  yield <span />;
  yield <span />;
  yield <span />;
}
<div>{data}</div>

[leebyron]

cc @sebmarkbage

[sebmarkbage]

I'm not sure about the Collections duck typing. Set also have @@iterator so that should be enough.

Maps are special in that we'd probably want to use the key as the React key value. So we could either detect maps specifically, or just allow any iterable with a sequence of two value tuples. The difficult part is, how do you determine if the tuple is a nested array value or Map tuple?

[leebyron]

Maybe Iterable is enough then.

Map iterators return tuples while Set and Array iterators return individual values. Perhaps we can hold this convention and treat tuple[0] as React key.

[leebyron]

The drawback with that is nested iterables/arrays. Explicitly looking for a method spec'd for Collections (entries if we also want to see keys) would differentiate the cases

[syranide]

Perhaps I misunderstood the discussion, but it seems to me that you must explicitly test for Map vs Set, etc. A Set containing tuples should not be interpreted as key/value, as it's not unthinkable that you would want store lists of children in a Set.

PS. IE11 collections does not have iterator, @@iterator nor values, etc.

[leebyron]

#2376 implements this.

IE11 collections are a mess. I think the right strategy is to intelligently check for a native ES6 Map/Set implementation and polyfill over them if they are non-compliant. This is the approach we're taking at Facebook.

[syranide]

@leebyron Sounds sane, "we" could even polyfill Array to be a cheap iterable very easily as well. As for IE11, I believe I showed you my earlier work on back-porting Map and Set (and an approximate WeakMap and WeakSet as well) to all legacy browsers which actually perform rather well (both perf and memory). Those could easily be made smart enough to use IE11 Map/Set as the underlying data structure and just provide the additional data required for fast ordered iteration.

[graue]

@leebyron Should this be closed now that #2376 is merged?

[leebyron]

Yep, thanks for the reminder :)