[hdom] - iterators disappear after initial render

[den1k]

I was looking for a shorter way to write components that dynamically create inner child-nodes from a collection.

For example, a basic list component:

[
  "ul",
  tx.transduce(tx.map(i => ["li", i]), tx.push(), tx.range(1, 6))
]

The transduce transduce and the push() seem superfluous to me. I tried:

["ul", tx.map(i => ["li", i], tx.range(1, 6))]

and

["ul", tx.iterator(tx.map(i => ["li", i]), [...tx.range(1, 6)])],

to compose transducers.

Both approaches work fine on first render and then never again. I assume that's because the overloaded map and iterator turn into generator functions? Generator functions are probably not very useful for hdom if they can only run once. However, it looks like iterators can also be computed several times though I'm not sure that's desirable.

Getting back to the issue, is there a shorter way to express the list component above?

[postspectacular]

Iterators can of course only be consumed once, but they do make sense in many situations also in hdom. It all really depends on how your components are setup/created.

1. This will FAIL after first render:

start(["ul", tx.map((i) => ["li", i], tx.range(5))]);

The reason this fails is because the value passed to start() is the array ["ul", iterator], but then the iterator can only be consumed once... hence in the second frame the ul element will have no more children and so they'll be diffed away.

2. This WORKS:

start(["ul", ...tx.map((i) => ["li", i], tx.range(5))]);

Here the spread operator forces the iterator to be realized before the array is passed to start(), so the array is really now a static piece of data ["ul", ["li", 0], ["li", 1], ....]

3. This WORKS too:

start(()=> ["ul", tx.map((i) => ["li", i], tx.range(5))]);

Here the value passed to start is a function which will be re-executed every single time, so works too...

Hope that clears things up!

[den1k]

It does! Thanks @postspectacular !