forEach directive

[barak007]

There are few things that I consider for the forEach directive:

1. Assume the forEach will not built only for arrays but for any iterable(Map, Set, generator) if then it's might be good to consider less verbose approach (with many attributes like index,key,item)
2. The item={item} is something different from other directives because it's defining a scoped variable and not using one.
3. Access the index of the iteration might also be important (not printing the last divider)
4. Not sure about async iterations but it can be also supported

Maybe embrace the JS syntax for of that when the left side if the of is always a const it's. with some sugar for the index.

<div for="items" trackBy={expr}></div> - cool auto destructure
<div for="item of items" trackBy={expr}></div>
<div for="[key, value] of items" trackBy={expr}></div>
<div for="[index, value] of items" trackBy={expr}></div>
<div for="[key, value, index] of items" trackBy={expr}></div> - index sugar

Async
<div for="await value of promises" trackBy={expr}></div>
Or
<div for-await="value of promises" trackBy={expr}></div>

[yoavaa]

Super interesting feedback.

I have not tried yet to support iterable. I have opted for a simple option for now -

        <div forEach="items" trackBy="id">
            <span>{name}</span>
            <span>{completed}</span>
            <span>{cost}</span>
        </div>

where name, completed and cost are attributes of the item in items. with this approach it is hard to add an automatic index because we do not know if the item has an index attribute.

Note I have used a pattern at which you do not have to use item.name, rather you use name directly as it is the common case. I am considering to add an option to reference the root data item using a directory like pattern - ../parent-attribute

e.g.
for data like

data:
    title: string
    items:
    -  name: string
       completed: boolean
       cost: number
       id: string

one will be able to do

        <div forEach="items" trackBy="id">
            <span>{../title} - {name}</span>
            <span>{completed}</span>
            <span>{cost}</span>
        </div>