add comment

demos/justact-test/src/index.jsx

@@ -1,10 +1,9 @@
 // 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" />
         ) : (
@@ -19,9 +18,6 @@ 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,6 +134,7 @@ 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

@@ -1,51 +0,0 @@
-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,7 +5,6 @@ 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,
@@ -35,4 +34,3 @@ 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,7 +24,6 @@ export class ArrayVAO extends AbstractVAO {
 
     constructor (initialValue: any[]) {
         super();
-        if ( initialValue == null ) initialValue = [];
         if ( ! Array.isArray(initialValue) ) {
             throw new Error('ArrayVAO expects an array');
         }