flinker-dom 1.1.0 → 1.1.2

package/dist/esm/components.js

@@ -4,11 +4,7 @@ export class UIComponent {
     constructor(tag) {
         this.unsubscribeColl = [];
         this.reactions = [];
-        /*
-         *
-         * Rendering
-         *
-         */
+        // Rendering
         this.willDomUpdate = false;
         this.affectSet = new Set();
         this.props = {};
@@ -511,54 +507,83 @@ export class List extends UIComponent {
     }
     items(fn) {
         this._itemsFn = fn;
+        this.render('recreateChildren');
         return this;
     }
     itemRenderer(fn) {
         this._itemRenderer = fn;
+        this.render('recreateChildren');
         return this;
     }
     itemHash(fn) {
         this._itemHashFn = fn;
+        this.render('recreateChildren');
         return this;
     }
-    didDomUpdate() {
-        super.didDomUpdate();
+    updateDom() {
+        if (this.isDestroyed)
+            return;
+        if (!this.willDomUpdate)
+            return;
+        this.willDomUpdate = false;
         if (this.affectSet.has('affectsProps')) {
-            const actualItemsHash = [];
-            const actualItems = this._itemsFn ? [...this._itemsFn()] : [];
-            const actualChildren = [];
-            let index = 0;
-            if (!this.childrenColl)
-                this.childrenColl = [];
-            while (index < actualItems.length) {
-                const actualItem = actualItems[index];
-                const actualItemHash = this._itemHashFn(actualItem);
-                const oldVN = this.childrenColl[index];
-                if (index < this._oldItemsHash.length) {
-                    if (actualItemHash === this._oldItemsHash[index]) {
-                        actualChildren.push(oldVN);
-                    }
-                    else {
-                        const newVN = this._itemRenderer(actualItem, index);
-                        oldVN.dom.replaceWith(newVN.dom);
-                        oldVN.destroy();
-                        actualChildren.push(newVN);
-                    }
+            this.updateProps();
+            if (this.props.visible === false) {
+                this.dom.hidden = true;
+                this.dom.className = '';
+            }
+            else {
+                const cn = buildClassName(this.props, 'none');
+                this.dom.className = cn;
+                this.dom.hidden = false;
+            }
+        }
+        if (this.affectSet.has('recreateChildren')) {
+            this.recreateChildren();
+        }
+        if (this.affectSet.has('affectsChildrenProps')) {
+            this.childrenColl?.forEach(c => c.render('affectsProps', 'affectsChildrenProps'));
+        }
+        if (this.affectSet.size > 0) {
+            this.didDomUpdate();
+            this.affectSet.clear();
+        }
+    }
+    recreateChildren() {
+        const actualItemsHash = [];
+        const actualItems = this._itemsFn ? [...this._itemsFn()] : [];
+        const actualChildren = [];
+        let index = 0;
+        if (!this.childrenColl)
+            this.childrenColl = [];
+        while (index < actualItems.length) {
+            const actualItem = actualItems[index];
+            const actualItemHash = this._itemHashFn(actualItem);
+            const oldVN = this.childrenColl[index];
+            if (index < this._oldItemsHash.length) {
+                if (actualItemHash === this._oldItemsHash[index]) {
+                    actualChildren.push(oldVN);
                 }
                 else {
                     const newVN = this._itemRenderer(actualItem, index);
-                    this.dom.appendChild(newVN.dom);
+                    oldVN.dom.replaceWith(newVN.dom);
+                    oldVN.destroy();
                     actualChildren.push(newVN);
                 }
-                actualItemsHash.push(actualItemHash);
-                index++;
             }
-            if (index < this.childrenColl.length) {
-                this.childrenColl.slice(index).forEach(n => n.destroy());
+            else {
+                const newVN = this._itemRenderer(actualItem, index);
+                this.dom.appendChild(newVN.dom);
+                actualChildren.push(newVN);
             }
-            this.childrenColl = actualChildren;
-            this._oldItemsHash = actualItemsHash;
+            actualItemsHash.push(actualItemHash);
+            index++;
+        }
+        if (index < this.childrenColl.length) {
+            this.childrenColl.slice(index).forEach(n => n.destroy());
         }
+        this.childrenColl = actualChildren;
+        this._oldItemsHash = actualItemsHash;
     }
 }
 export const vlist = () => {

package/dist/types/components.d.ts

@@ -108,8 +108,9 @@ export declare class List<T, P extends UIComponentProps> extends UIComponent<P>
     itemRenderer(fn: (item: T, index: number) => AnyUIComponent): this;
     private _itemHashFn;
     itemHash(fn: (item: T) => any): this;
+    protected updateDom(): void;
     private _oldItemsHash;
-    protected didDomUpdate(): void;
+    private recreateChildren;
 }
 export declare const vlist: <T>() => List<T, StackProps>;
 export declare const hlist: <T>() => List<T, StackProps>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "flinker-dom",
   "description": "Free TypeScript library for writing frontend apps",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Dittner/FlinkerDOM.git"