Add ForEach to demo

demos/justact-test/src/index.jsx

@@ -1,9 +1,10 @@
 // const justact = require('justact');
 import * as justact from 'justact';
 
+import { ForEach } from 'justact';
+
 class InputMultiplex extends justact.Component {
     render () {
-        console.log('InputMultiplex', this);
         return this.swap ? (
             <input value={this.valueB$} type="text" />
         ) : (
@@ -18,6 +19,9 @@ class App extends justact.Component {
             <div>
                 <input  type="checkbox" value={this.swap$} />
                 <InputMultiplex swap={this.swap$}></InputMultiplex>
+                <ForEach array={[1,2,3]} render={item => (
+                    <input value={item} disabled />
+                )} />
             </div>
         )
     }

src/component/Component.ts

@@ -134,7 +134,6 @@ export abstract class Component {
 
         const newElements = this.createElements();
         referenceElement.replaceWith(...newElements);
-        // Required because it renders itself in this case
         this.notifyMounted({
             parent: this.parent_,
         })

src/construct/ForEach.ts

@@ -0,0 +1,51 @@
+import { Renderable } from '../component/componentdefs.js';
+import { Component } from '../component/Component.js';
+import { ArrayVAO } from '../vao/ArrayVAO.js';
+import { ScalarVAO } from '../vao/ScalarVAO.js';
+import { TAttributes } from '../html/htmldefs.js';
+
+// === TODO ===
+// [A] Naive implementation - should be optimzied
+
+export type TForEachRender = (item: any) => Renderable | Renderable[]
+
+export class ForEach extends Component {
+    static properties = {
+        array: {
+            $: ArrayVAO
+        },
+        render: {
+            $: ScalarVAO
+        }
+    }
+    constructor ({ attributes, children }: {
+        attributes: TAttributes | undefined,
+        children: Renderable[] | undefined
+    }) {
+        super({ attributes, children });
+
+        const array$ = this.vaos_['array'] as ArrayVAO;
+
+        // TODO: [A]
+        ((events) => {
+            for ( const event of events ) {
+                array$.sub(event, this.rerenderSelf.bind(this));
+            }
+        })(['change', 'item.insert', 'item.remove', 'item.replace']);
+    }
+    render () {
+        const array$ = this.vaos_['array'] as ArrayVAO;
+        const render$ = this.vaos_['render'];
+
+        const render = render$.get() as TForEachRender;
+
+        const outputRenderables = [];
+        for ( const item of array$.get() ) {
+            outputRenderables.push(...(result => Array.isArray(result)
+                ? result : [result])(render(item)));
+        }
+
+        return outputRenderables;
+    }
+}
+

src/index.ts

@@ -5,6 +5,7 @@ import { Component as ExportableComponent } from './component/Component.js';
 import { ScalarVAO as ExportableScalarVAO } from './vao/ScalarVAO.js';
 import { ArrayVAO as ExportableArrayVAO } from './vao/ArrayVAO.js';
 import { AbstractVAO as ExportableAbstractVAO } from './vao/VAO.js';
+import { ForEach as ForEachExportable } from './construct/ForEach.js';
 
 export function createElement(
     tag: string | RenderableConstructor,
@@ -34,3 +35,4 @@ export const Component = ExportableComponent;
 export const AbstractVAO = ExportableAbstractVAO;
 export const ScalarVAO = ExportableScalarVAO;
 export const ArrayVAO = ExportableArrayVAO;
+export const ForEach = ForEachExportable;

src/vao/ArrayVAO.ts

@@ -24,6 +24,7 @@ export class ArrayVAO extends AbstractVAO {
 
     constructor (initialValue: any[]) {
         super();
+        if ( initialValue == null ) initialValue = [];
         if ( ! Array.isArray(initialValue) ) {
             throw new Error('ArrayVAO expects an array');
         }