vasille 5.1.9 → 6.0.0-rc.2

package/lib/dev/components.js

@@ -70,9 +70,9 @@ export class DevSwitchedNode extends SwitchedNode {
             time: Date.now(),
         });
     }
-    destroy() {
+    destroy(keepNodes) {
         this.runner.inspector.destroy({ id: this.id, time: Date.now() });
-        super.destroy();
+        super.destroy(keepNodes);
     }
     newChild(index) {
         const frag = new DevFragment(this.runner, null, null, "Case", { index });

package/lib/dev/node.js

@@ -43,17 +43,17 @@ export class DevFragment extends Fragment {
             time: Date.now(),
         });
     }
-    destroy() {
+    destroy(keepNodes) {
         this.inspector.destroy({ id: this.id, time: Date.now() });
-        super.destroy();
+        super.destroy(keepNodes);
     }
-    pushNode(node) {
+    push(node) {
         if ("id" in node && typeof node.id == "number") {
             this.inspector.setElementParent({
                 parent: this.id,
                 child: node.id,
             });
         }
-        super.pushNode(node);
+        super.push(node);
     }
 }

package/lib/dev/runner.js

@@ -25,9 +25,9 @@ export class DevTextNode extends TextNode {
             position: usage,
         });
     }
-    destroy() {
+    destroy(keepNodes) {
         this.runner.inspector.destroy({ id: this.id, time: Date.now() });
-        super.destroy();
+        super.destroy(keepNodes);
     }
     compose() {
         super.compose();
@@ -110,16 +110,13 @@ export class DevTag extends Tag {
         }
         super.applyOptions(options);
     }
-    getNode() {
-        return this.node;
-    }
-    destroy() {
+    destroy(keepNodes) {
         this.runner.inspector.destroy({ id: this.id, time: Date.now() });
-        super.destroy();
+        super.destroy(keepNodes);
     }
     compose() {
         super.compose();
-        Object.defineProperty(this.element, "vasille", { value: this.id, configurable: false, enumerable: false });
+        Object.defineProperty(this.node, "vasille", { value: this.id, configurable: false, enumerable: false });
     }
 }
 export class DevRunner extends Runner {

package/lib/dev/state.js

@@ -1,4 +1,5 @@
 import { IValue } from "../core/ivalue.js";
+import { reportError } from "../functional/safety.js";
 import { errorToString, provideId, toDevValue, } from "./inspectable.js";
 export class DevIValue extends IValue {
 }

package/lib/dev/views.js

@@ -1,62 +1,82 @@
-import { ArrayView } from "../views/array-view.js";
-import { MapView } from "../views/map-view.js";
-import { SetView } from "../views/set-view.js";
+import { ArrayView, SinglePassArrayView } from "../models/array-model.js";
+import { MapView } from "../models/map-model.js";
+import { SetView } from "../models/set-model.js";
+import { Reference } from "../value/reference.js";
 import { provideId, toDevObject } from "./inspectable.js";
 import { DevFragment } from "./node.js";
+import { DevReference } from "./state.js";
+function createDevFragment(runner, host) {
+    const frag = new DevFragment(runner, null, null, "Fragment", {});
+    runner.inspector.setElementParent({ parent: host.id, child: frag.id });
+    return frag;
+}
 export class DevArrayView extends ArrayView {
     id;
-    constructor(input, runner, usage) {
-        super(input, runner);
+    constructor(runner, model, slot, usage, indexDeclaration) {
+        super(runner, model, slot, v => (indexDeclaration ? new DevReference(v, indexDeclaration, runner.inspector) : new Reference(v)), runner => createDevFragment(runner, this));
         this.id = provideId();
         runner.inspector.createComponent({
             id: this.id,
             name: "ArrayView",
-            props: toDevObject(input),
+            props: toDevObject({ model }),
+            usage: usage,
+            time: Date.now(),
+        });
+    }
+}
+export class DevSinglePassArrayView extends SinglePassArrayView {
+    id;
+    constructor(runner, model, key, slot, usage, valueDeclaration, indexDeclaration) {
+        super(runner, model, key, slot, v => new DevReference(v, valueDeclaration, runner.inspector), v => new DevReference(v, indexDeclaration, runner.inspector), runner => createDevFragment(runner, this));
+        this.id = provideId();
+        runner.inspector.createComponent({
+            id: this.id,
+            name: "SinglePassArrayView",
+            props: toDevObject({ model }),
             usage: usage,
             time: Date.now(),
         });
     }
-    newChild(id, item) {
-        const frag = new DevFragment(this.runner, null, null, "ArrayViewItem", { item });
-        this.runner.inspector?.setElementParent({ parent: this.id, child: frag.id });
-        return frag;
+}
+export class DevMultiPassArrayView extends SinglePassArrayView {
+    id;
+    constructor(runner, model, key, slot, usage, valueDeclaration, indexDeclaration) {
+        super(runner, model, key, slot, v => new DevReference(v, valueDeclaration, runner.inspector), v => new DevReference(v, indexDeclaration, runner.inspector), runner => createDevFragment(runner, this));
+        this.id = provideId();
+        runner.inspector.createComponent({
+            id: this.id,
+            name: "MultiPassArrayView",
+            props: toDevObject({ model }),
+            usage: usage,
+            time: Date.now(),
+        });
     }
 }
 export class DevSetView extends SetView {
     id;
-    constructor(input, runner, usage) {
-        super(input, runner);
+    constructor(runner, model, slot, usage) {
+        super(runner, model, slot, runner => createDevFragment(runner, this));
         this.id = provideId();
         runner.inspector.createComponent({
             id: this.id,
             name: "SetView",
-            props: toDevObject(input),
+            props: toDevObject({ model }),
             usage: usage,
             time: Date.now(),
         });
     }
-    newChild(_id, item) {
-        const frag = new DevFragment(this.runner, null, null, "SetViewItem", { item });
-        this.runner.inspector.setElementParent({ parent: this.id, child: frag.id });
-        return frag;
-    }
 }
 export class DevMapView extends MapView {
     id;
-    constructor(input, runner, usage) {
-        super(input, runner);
+    constructor(runner, model, slot, usage, valueDeclaration) {
+        super(runner, model, slot, v => (valueDeclaration ? new DevReference(v, valueDeclaration, runner.inspector) : new Reference(v)), runner => createDevFragment(runner, this));
         this.id = provideId();
         runner.inspector.createComponent({
             id: this.id,
             name: "MapView",
-            props: toDevObject(input),
+            props: toDevObject({ model }),
             usage: usage,
             time: Date.now(),
         });
     }
-    newChild(key, value) {
-        const frag = new DevFragment(this.runner, null, null, "MapViewItem", { key, value });
-        this.runner.inspector.setElementParent({ parent: this.id, child: frag.id });
-        return frag;
-    }
 }

package/lib/functional/safety.js

@@ -1,6 +1,5 @@
 export let reportError = (e) => {
     console.error(e);
-    console.log("Docs Link https://github.com/vasille-js/vasille-js/blob/v4/doc/V4-API.md");
 };
 export function setErrorHandler(handler) {
     reportError = handler;

package/lib/index.js

@@ -1,17 +1,13 @@
 export { Reactive } from "./core/core.js";
 export { IValue } from "./core/ivalue.js";
 export { reportError, setErrorHandler, safe } from "./functional/safety.js";
-export { ArrayModel } from "./models/array-model.js";
+export { ArrayModel, SinglePassArrayView, ArrayView } from "./models/array-model.js";
 export { Listener } from "./models/listener.js";
-export { MapModel } from "./models/map-model.js";
-export { SetModel } from "./models/set-model.js";
+export { MapModel, MapView } from "./models/map-model.js";
+export { SetModel, SetView } from "./models/set-model.js";
 export { App, Portal } from "./node/app.js";
 export { Fragment, Tag, TextNode, SwitchedNode } from "./node/node.js";
 export { Expression } from "./value/expression.js";
 export { Reference } from "./value/reference.js";
-export { ArrayView } from "./views/array-view.js";
-export { BaseView } from "./views/base-view.js";
-export { MapView } from "./views/map-view.js";
-export { SetView } from "./views/set-view.js";
 export { userError } from "./core/errors.js";
 export { Watch } from "./node/watch.js";

package/lib/models/array-model.js

@@ -1,3 +1,4 @@
+import { Fragment } from "../node/node.js";
 import { Listener } from "./listener.js";
 /**
  * Model based on Array class
@@ -11,12 +12,10 @@ export class ArrayModel extends Array {
      * @param ctx lifetime context of model
      */
     constructor(data, ctx) {
-        super();
+        super(typeof data === "number" ? data : 0);
         this.listener = new Listener();
         if (data instanceof Array) {
-            for (let i = 0; i < data.length; i++) {
-                super.push(data[i]);
-            }
+            super.push(...data);
         }
         ctx?.bind(this);
     }
@@ -37,10 +36,9 @@ export class ArrayModel extends Array {
             end = this.length;
         }
         for (let i = start; i < end; i++) {
-            this.listener.emitRemoved(this[i], this[i]);
             this[i] = value;
-            this.listener.emitAdded(value, value);
         }
+        this.listener.emit(0, this.length, this);
         return this;
     }
     /**
@@ -50,9 +48,8 @@ export class ArrayModel extends Array {
     pop() {
         /* istanbul ignore else */
         if (this.length > 0) {
-            const v = super.pop();
-            this.listener.emitRemoved(v, v);
-            return v;
+            this.listener.emit(this.length - 1, 1);
+            return super.pop();
         }
     }
     /**
@@ -61,10 +58,8 @@ export class ArrayModel extends Array {
      * @return {number} new length of the array
      */
     push(...items) {
-        items.forEach(item => {
-            this.listener.emitAdded(item, item);
-            super.push(item);
-        });
+        this.listener.emit(this.length, 0, items);
+        super.push(...items);
         return this.length;
     }
     /**
@@ -74,9 +69,8 @@ export class ArrayModel extends Array {
     shift() {
         /* istanbul ignore else */
         if (this.length > 0) {
-            const v = super.shift();
-            this.listener.emitRemoved(v, v);
-            return v;
+            this.listener.emit(0, 1);
+            return super.shift();
         }
     }
     /**
@@ -89,18 +83,8 @@ export class ArrayModel extends Array {
     splice(start, deleteCount, ...items) {
         start = Math.min(start, this.length);
         deleteCount = typeof deleteCount === "number" ? deleteCount : this.length - start;
-        const before = this[start + deleteCount];
-        for (let i = 0; i < deleteCount; i++) {
-            const index = start + deleteCount - i - 1;
-            /* istanbul ignore else */
-            if (this[index] !== undefined) {
-                this.listener.emitRemoved(this[index], this[index]);
-            }
-        }
-        for (let i = 0; i < items.length; i++) {
-            this.listener.emitAdded(before, items[i]);
-        }
-        return new ArrayModel(super.splice(start, deleteCount, ...items));
+        this.listener.emit(start, deleteCount, items);
+        return super.splice(start, deleteCount, ...items);
     }
     /**
      * Calls Array.unshift and notify about changed
@@ -108,14 +92,11 @@ export class ArrayModel extends Array {
      * @return {number} the length after prepending
      */
     unshift(...items) {
-        for (let i = 0; i < items.length; i++) {
-            this.listener.emitAdded(this[i], items[i]);
-        }
+        this.listener.emit(0, 0, items);
         return super.unshift(...items);
     }
     replace(at, with_) {
-        this.listener.emitAdded(this[at], with_);
-        this.listener.emitRemoved(this[at], this[at]);
+        this.listener.emit(at, 1, [with_]);
         this[at] = with_;
         return this;
     }
@@ -123,3 +104,309 @@ export class ArrayModel extends Array {
         this.splice(0);
     }
 }
+class BaseArrayView extends Fragment {
+    cache = [];
+    unmount(keepStructure) {
+        super.unmount(keepStructure);
+        this.cache.forEach(item => item.frag.unmount(true));
+    }
+    remount() {
+        for (let i = this.cache.length - 1; i >= 0; i--) {
+            this.cache[i].frag.remount();
+        }
+    }
+    destroy(keepNodes) {
+        for (let i = this.cache.length - 1; i >= 0; i--) {
+            this.cache[i]?.frag.destroy(keepNodes);
+        }
+        super.destroy(keepNodes);
+    }
+}
+export class ArrayView extends BaseArrayView {
+    model;
+    slot;
+    ref;
+    frag;
+    apply;
+    constructor(runner, model, slot, ref, frag) {
+        super(runner);
+        this.model = model;
+        this.slot = slot;
+        this.ref = ref;
+        this.frag = frag;
+    }
+    compose() {
+        const view = this;
+        function apply(index, remove, values) {
+            const children = view.cache;
+            const toInsert = [];
+            const prev = children[index - 1]?.frag;
+            const next = children[index + remove]?.frag;
+            const length = values?.length || 0;
+            const lastIndex = length - 1;
+            // create new fragments
+            for (let i = 0; i < length; i++) {
+                toInsert[i] = {
+                    frag: view.frag(view.runner),
+                    index: view.ref(i + index),
+                };
+            }
+            // locate new fragments
+            for (let i = 0; i < length; i++) {
+                toInsert[i].frag.link(view, i === 0 ? prev : toInsert[i - 1].frag, i === lastIndex ? next : toInsert[i + 1].frag);
+            }
+            // destroy removed nodes
+            for (let i = 0; i < remove; i++) {
+                children[index + i]?.frag.destroy();
+            }
+            // modify the cache
+            children.splice(index, remove, ...toInsert);
+            // update indexes of affected items in the cache
+            for (let i = index + length; i < children.length; i++) {
+                children[i].index.V = i;
+            }
+            // render new fragments content in reverse order
+            for (let i = lastIndex; i >= 0; i--) {
+                view.slot(toInsert[i].frag, values[i], toInsert[i].index);
+            }
+        }
+        apply(0, 0, this.model);
+        this.model.listener.on(apply);
+        this.apply = apply;
+    }
+    destroy(keepNodes) {
+        /* istanbul ignore else */
+        if (this.apply) {
+            this.model.listener.off(this.apply);
+        }
+        super.destroy(keepNodes);
+    }
+}
+export class DiffingArrayView extends BaseArrayView {
+    model;
+    key;
+    slot;
+    vRef;
+    iRef;
+    frag;
+    match;
+    constructor(runner, model, key, slot, vRef, iRef, frag) {
+        super(runner);
+        this.model = model;
+        this.key = key;
+        this.slot = slot;
+        this.vRef = vRef;
+        this.iRef = iRef;
+        this.frag = frag;
+    }
+    addChild(newCache, key, modelItem, prev, next) {
+        const frag = this.frag(this.runner);
+        const index = this.iRef(newCache.length);
+        const value = this.vRef(modelItem);
+        const cache = {
+            frag: frag,
+            key: key,
+            value: value,
+            moved: false,
+            unmounted: false,
+            index,
+        };
+        frag.link(this, prev, next);
+        this.slot(frag, value, index);
+        newCache.push(cache);
+        return cache;
+    }
+    destroy(keepNodes) {
+        /* istanbul ignore else */
+        if (this.match) {
+            this.model.off(this.match);
+        }
+        super.destroy(keepNodes);
+    }
+}
+export class SinglePassArrayView extends DiffingArrayView {
+    existing = new Map();
+    compose() {
+        const view = this;
+        const { existing } = this;
+        function match(model) {
+            const children = view.cache;
+            const newCache = [];
+            const unmounted = new Set();
+            const modelLength = model.length;
+            const cacheLength = children.length;
+            let modelIndex = 0;
+            let cacheIndex = 0;
+            while (modelIndex <= modelLength &&
+                cacheIndex <= cacheLength &&
+                !(modelIndex == modelLength && cacheIndex == cacheLength)) {
+                const modelItem = model[modelIndex];
+                const cacheItem = children[cacheIndex];
+                const key = modelItem ? view.key(modelItem) : null;
+                const prev = newCache[modelIndex - 1];
+                let present;
+                // ideal case, a match
+                if (key === cacheItem?.key) {
+                    cacheItem.value.V = modelItem;
+                    cacheItem.index.V = modelIndex;
+                    newCache.push(cacheItem);
+                    modelIndex++;
+                    cacheIndex++;
+                    continue;
+                }
+                // skip already unmounted items
+                if (cacheItem?.moved || !modelItem) {
+                    cacheIndex++;
+                    /* istanbul ignore else */
+                    if (cacheItem) {
+                        if (cacheItem.moved) {
+                            cacheItem.moved = false;
+                        }
+                        else {
+                            cacheItem.frag.unlink();
+                            unmounted.add(cacheItem);
+                            cacheItem.unmounted = true;
+                        }
+                    }
+                }
+                // the item is present in another position, move it
+                else if ((present = existing.get(key))) {
+                    const frag = present.frag;
+                    const presentIndex = present.index;
+                    const presentValue = present.value;
+                    const indexDiff = presentIndex.V - cacheIndex;
+                    const removeLimit = modelLength < cacheLength ? cacheLength - modelLength + 2 : 4;
+                    // remove items between if less than 5
+                    if (indexDiff <= removeLimit && indexDiff > 0) {
+                        while (cacheIndex < presentIndex.V) {
+                            const item = children[cacheIndex];
+                            item.frag.unmount(false);
+                            item.unmounted = true;
+                            unmounted.add(item);
+                            cacheIndex++;
+                        }
+                    }
+                    else {
+                        if (!present.unmounted) {
+                            frag.unmount(false);
+                        }
+                        frag.link(view, prev?.frag, cacheItem?.frag);
+                        frag.remount();
+                        presentIndex.V = modelIndex;
+                        presentValue.V = modelItem;
+                        present.moved = indexDiff > 0;
+                        newCache.push(present);
+                        modelIndex++;
+                        // if was unmounted, remove it from the unmounted set
+                        if (present.unmounted) {
+                            unmounted.delete(present);
+                            present.unmounted = false;
+                        }
+                    }
+                }
+                // add missing items
+                else {
+                    /* istanbul ignore else */
+                    if (key !== null && modelItem) {
+                        existing.set(key, view.addChild(newCache, key, modelItem, prev?.frag, cacheItem?.frag));
+                        modelIndex++;
+                    }
+                }
+            }
+            // destroy removed nodes
+            unmounted.forEach(item => {
+                existing.delete(item.key);
+                item.frag.destroy();
+            });
+            view.cache = newCache;
+        }
+        match(this.model.V);
+        this.model.on(match);
+        this.match = match;
+    }
+}
+// export class MultiPassArrayView<
+//     T,
+//     Node,
+//     Element,
+//     TagOptions extends object,
+//     Runner extends IRunner<Node, Element, TagOptions>,
+// > extends DiffingArrayView<T, Node, Element, TagOptions, Runner> {
+//     public override compose() {
+//         const view = this;
+//
+//         function match(model: T[]) {
+//             const children = view.cache;
+//             const newCache: KeyedCacheItem<T, Node, Element, TagOptions, Runner>[] = [];
+//             const modelKeys = new Set<number | string>();
+//             const modelData: { item: T; key: number | string }[] = [];
+//
+//             // pass 1, transform model data to keyed data
+//             for (let i = 0; i < model.length; i++) {
+//                 const modelItem = model[i] as T;
+//                 const key = view.key(modelItem);
+//                 modelKeys.add(key);
+//                 modelData.push({ item: modelItem, key });
+//             }
+//
+//             let gt = 0,
+//                 lt = 0;
+//
+//             // pass 2, destroy unexisting items
+//             for (let i = 0; i < children.length; i++) {
+//                 const cacheItem = children[i]!;
+//                 const key = cacheItem.key;
+//
+//                 if (!modelKeys.has(key)) {
+//                     const { next, prev } = cacheItem.frag;
+//
+//                     if (prev) {
+//                         prev.next = next;
+//                     }
+//                     if (next) {
+//                         next.prev = prev;
+//                     }
+//
+//                     cacheItem.unmounted = true;
+//                     cacheItem.frag.destroy();
+//                 }
+//             }
+//
+//             const modelLength = model.length;
+//             const cacheLength = children.length;
+//             let modelIndex = 0;
+//             let cacheIndex = 0;
+//
+//             // pass 3, create new items
+//             while (modelIndex < modelLength && cacheIndex <= cacheLength) {
+//                 const modelItem = modelData[modelIndex]!;
+//                 const cacheItem = children[cacheIndex];
+//                 const key = modelItem.key;
+//
+//                 // ideal case, a match
+//                 if (key === cacheItem?.key) {
+//                     cacheItem.value.V = modelItem.item;
+//                     cacheItem.index.V = modelIndex;
+//                     newCache.push(cacheItem);
+//                     modelIndex++;
+//                     cacheIndex++;
+//                 }
+//                 // skip unmounted items in step 2
+//                 else if (cacheItem?.unmounted) {
+//                     cacheIndex++;
+//                 }
+//                 // add missing items
+//                 else {
+//                     view.addChild(newCache, key, modelItem.item, newCache[modelIndex - 1]?.frag, cacheItem?.frag);
+//                     modelIndex++;
+//                 }
+//             }
+//
+//             view.cache = newCache;
+//         }
+//
+//         match(this.model.V);
+//         this.model.on(match);
+//         this.match = match;
+//     }
+// }