j-templates 5.0.33 → 5.0.36

package/Node/component.d.ts

@@ -24,6 +24,7 @@ export declare class Component<D = void, T = void, E = void> {
 }
 export declare namespace Component {
     function ToFunction<D = void, T = void, E = void>(type: any, namespace: any, constructor: ComponentConstructor<D, T, E>): import("./componentNode.types").ComponentNodeFunction<D, T, E>;
+    function Register<D = void, T = void, E = void>(name: string, constructor: ComponentConstructor<D, T, E>): void;
     function Attach(node: Node, nodeRef: NodeRefTypes): void;
 }
 export declare type ComponentConstructor<D, T, E> = {

package/Node/component.js

@@ -52,6 +52,19 @@ exports.Component = Component;
         return componentNode_1.ComponentNode.ToFunction(type, namespace, constructor);
     }
     Component.ToFunction = ToFunction;
+    function Register(name, constructor) {
+        const componentFunction = ToFunction(`${name}-component`, undefined, constructor);
+        class WebComponent extends HTMLElement {
+            constructor() {
+                super();
+                const shadowRoot = this.attachShadow({ mode: 'open' });
+                const node = componentFunction({});
+                Attach(shadowRoot, node);
+            }
+        }
+        customElements.define(name, WebComponent);
+    }
+    Component.Register = Register;
     function Attach(node, nodeRef) {
         nodeRef_1.NodeRef.Init(nodeRef);
         var rootRef = nodeRef_1.NodeRef.Wrap(node);

package/Store/Diff/diffAsync.d.ts

@@ -12,5 +12,6 @@ export declare class DiffAsync {
         value: any;
     }>): Promise<IDiffResponse>;
     UpdatePath(path: string, value: any): Promise<void>;
+    GetPath(path: string): Promise<any>;
     Destroy(): void;
 }

package/Store/Diff/diffAsync.js

@@ -24,6 +24,9 @@ class DiffAsync {
     async UpdatePath(path, value) {
         await this.workerQueue.Push({ method: "updatepath", arguments: [path, value] });
     }
+    async GetPath(path) {
+        return await this.workerQueue.Push({ method: "getpath", arguments: [path] });
+    }
     Destroy() {
         this.workerQueue.Destroy();
     }

package/Store/Diff/diffTree.d.ts

@@ -1,14 +1,11 @@
 export interface IDiffMethod {
-    method: "create" | "diffpath" | "diffbatch" | "updatepath";
+    method: "create" | "diffpath" | "diffbatch" | "updatepath" | "getpath";
     arguments: Array<any>;
 }
-export interface IDiffResponse {
-    changedPaths: Array<{
-        path: string;
-        value: any;
-    }>;
-    deletedPaths: Array<string>;
-}
+export declare type IDiffResponse = {
+    path: string;
+    value: any;
+}[];
 export interface IDiffTree {
     DiffBatch(data: Array<{
         path: string;

package/Store/Diff/diffTree.js

@@ -24,6 +24,10 @@ function DiffTreeScope(worker) {
                     diffTree.UpdatePath(data.arguments[0], data.arguments[1]);
                     ctx.postMessage(null);
                     break;
+                case "getpath":
+                    var ret = diffTree.GetPath(data.arguments[0]);
+                    ctx.postMessage(ret);
+                    break;
             }
         };
     }
@@ -50,43 +54,43 @@ function DiffTreeScope(worker) {
             return matches[1];
         }
         DiffBatch(data) {
-            var resp = {
-                changedPaths: [],
-                deletedPaths: []
-            };
+            var resp = [];
             ;
             for (var x = 0; x < data.length; x++)
                 this.RunDiff(data[x].path, data[x].value, resp);
             return resp;
         }
         DiffPath(path, value) {
-            var resp = {
-                changedPaths: [],
-                deletedPaths: []
-            };
+            var resp = [];
             this.RunDiff(path, value, resp);
             return resp;
         }
         UpdatePath(path, value) {
             this.SetPathValue(path, value);
         }
+        GetPath(path) {
+            return this.GetPathValue(path);
+        }
         RunDiff(path, value, diffResp) {
             var breakupMap = this.GetBreakUpMap(path, value);
-            var resp = diffResp || {
-                changedPaths: [],
-                deletedPaths: []
-            };
+            var resp = diffResp || [];
             breakupMap.forEach((value, key) => {
                 var currentValue = key.split(".").reduce((pre, curr, index) => {
                     if (index === 0)
                         return this.rootStateMap.get(curr);
                     return pre && pre[curr];
                 }, null);
-                this.DiffValues(key, value, currentValue, resp);
-            });
-            resp.changedPaths.forEach(val => {
-                this.SetPathValue(val.path, val.value);
+                this.DiffJson(key, value, currentValue, resp);
             });
+            for (var x = 0; x < resp.length; x++)
+                this.SetPathValue(resp[x].path, resp[x].value);
+        }
+        GetPathValue(path) {
+            var parts = path.split(".");
+            var curr = this.rootStateMap.get(parts[0]);
+            for (var x = 1; x < parts.length; x++)
+                curr = curr && curr[parts[x]];
+            return curr;
         }
         SetPathValue(path, value) {
             var parts = path.split(".");
@@ -129,61 +133,79 @@ function DiffTreeScope(worker) {
                 map.set(path, key === path ? value : keyRef || value);
             return map;
         }
-        DiffValues(path, newValue, oldValue, resp) {
-            var changedPathLength = resp.changedPaths.length;
-            var oldIsValue = IsValue(oldValue);
-            if (oldIsValue) {
+        DiffJson(path, newValue, oldValue, resp) {
+            const oldIsValue = IsValue(oldValue);
+            const newIsValue = IsValue(newValue);
+            if (oldIsValue || newIsValue) {
                 if (oldValue !== newValue) {
-                    resp.changedPaths.push({
-                        path: path,
+                    resp.push({
+                        path,
                         value: newValue
                     });
                     return true;
                 }
                 return false;
             }
-            var oldKeys = Array.isArray(oldValue) ? null : Object.keys(oldValue);
-            var newIsValue = IsValue(newValue);
-            if (newIsValue) {
-                resp.changedPaths.push({
-                    path: path,
+            let allChildrenChanged = true;
+            let childDeleted = false;
+            const oldIsArray = Array.isArray(oldValue);
+            const newIsArray = Array.isArray(newValue);
+            if (oldIsArray !== newIsArray) {
+                resp.push({
+                    path,
                     value: newValue
                 });
-                for (var x = 0; x < (oldKeys || oldValue).length; x++)
-                    resp.deletedPaths.push(`${path}.${oldKeys ? oldKeys[x] : x}`);
                 return true;
             }
-            var deleted = false;
-            var allChanged = true;
-            var newKeys = Object.keys(newValue);
-            var newKeysSet = new Set(newKeys);
-            for (var x = 0; x < (oldKeys || oldValue).length; x++) {
-                var oldKey = oldKeys ? oldKeys[x] : x.toString();
-                var childPath = `${path}.${oldKey}`;
-                var stays = newKeysSet.delete(oldKey);
-                if (stays)
-                    allChanged = this.DiffValues(childPath, newValue[oldKey], oldValue[oldKey], resp) && allChanged;
-                else {
-                    deleted = true;
-                    resp.deletedPaths.push(childPath);
+            const changedPathLength = resp.length;
+            if (oldIsArray && newIsArray) {
+                if (oldValue.length === 0 && newValue.length === 0)
+                    return false;
+                for (let y = 0; y < newValue.length; y++) {
+                    const arrayPath = path ? `${path}.${y}` : `${y}`;
+                    allChildrenChanged = this.DiffJson(arrayPath, newValue[y], oldValue[y], resp) && allChildrenChanged;
                 }
+                if (!allChildrenChanged && newValue.length < oldValue.length)
+                    resp.push({
+                        path: path ? `${path}.length` : 'length',
+                        value: newValue.length
+                    });
             }
-            if (allChanged || deleted) {
-                resp.changedPaths.splice(changedPathLength);
-                resp.changedPaths.push({
-                    path: path,
-                    value: newValue
-                });
-                return true;
-            }
-            else if (newKeysSet.size > 0) {
-                newKeysSet.forEach(function (key) {
-                    resp.changedPaths.push({
-                        path: `${path}.${key}`,
+            else {
+                const oldKeys = Reflect.ownKeys(oldValue);
+                const newKeys = Reflect.ownKeys(newValue);
+                if (oldKeys && oldKeys.length === 0 && newKeys.length === 0)
+                    return false;
+                const newKeysSet = new Set(newKeys);
+                for (let x = 0; x < oldKeys.length && !childDeleted; x++) {
+                    const oldKey = oldKeys[x];
+                    const childPath = path ? `${path}.${oldKey}` : `${oldKey}`;
+                    if (newKeysSet.delete(oldKey))
+                        allChildrenChanged = this.DiffJson(childPath, newValue[oldKey], oldValue[oldKey], resp) && allChildrenChanged;
+                    else if (path)
+                        childDeleted = true;
+                    else
+                        resp.push({
+                            path: childPath,
+                            value: undefined
+                        });
+                }
+                newKeysSet.forEach(key => {
+                    const childPath = path ? `${path}.${key}` : `${key}`;
+                    resp.push({
+                        path: childPath,
                         value: newValue[key]
                     });
                 });
             }
+            if (path && (allChildrenChanged || childDeleted)) {
+                resp.splice(changedPathLength);
+                resp.push({
+                    path,
+                    value: newValue
+                });
+                return true;
+            }
             return false;
         }
     }

package/Store/Store/storeAsync.d.ts

@@ -4,6 +4,7 @@ export declare class StoreAsync {
     private diffAsync;
     private observableTree;
     private asyncWriter;
+    private asyncQueue;
     constructor(idFunc: {
         (val: any): string;
     }, init?: any);

package/Store/Store/storeAsync.js

@@ -3,12 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const observableTree_1 = require("../Tree/observableTree");
 const diffAsync_1 = require("../Diff/diffAsync");
 const storeAsyncWriter_1 = require("./storeAsyncWriter");
+const asyncQueue_1 = require("../../Utils/asyncQueue");
 class StoreAsync {
     constructor(idFunc, init) {
         this.idFunc = idFunc;
         this.diffAsync = new diffAsync_1.DiffAsync(this.idFunc);
         this.observableTree = new observableTree_1.ObservableTree(diffAsync_1.DiffAsync.ReadKeyRef);
         this.asyncWriter = new storeAsyncWriter_1.StoreAsyncWriter(this.idFunc, this.diffAsync, this.observableTree);
+        this.asyncQueue = new asyncQueue_1.AsyncQueue();
         if (init) {
             var id = this.idFunc(init);
             this.observableTree.Write(id, init);
@@ -19,10 +21,12 @@ class StoreAsync {
         return this.observableTree.Scope(id, func);
     }
     async Action(id, action) {
-        var node;
-        if (id)
-            node = this.observableTree.GetNode(id);
-        await action(node && node.Proxy, this.asyncWriter);
+        await this.asyncQueue.Next(async () => {
+            var node;
+            if (id)
+                node = this.observableTree.GetNode(id);
+            await action(node && node.Proxy, this.asyncWriter);
+        });
     }
     async Write(data) {
         await this.Action(null, async (val, writer) => {
@@ -35,6 +39,7 @@ class StoreAsync {
         });
     }
     Destroy() {
+        this.asyncQueue.Stop();
         this.diffAsync.Destroy();
         this.observableTree.Destroy();
     }

package/Store/Store/storeAsyncWriter.js

@@ -29,26 +29,24 @@ class StoreAsyncWriter {
         this.ApplyChanges(diff);
     }
     async Push(source, data) {
-        var array = source;
         var proxy = source;
         var rootPath = proxy.___node.Path;
-        var length = array.length;
+        var lengthPath = `${rootPath}.length`;
+        var length = await this.diffAsync.GetPath(lengthPath);
         var diff = await this.diffAsync.DiffPath(`${rootPath}.${length}`, data);
         this.ApplyChanges(diff);
     }
     async Splice(source, start, deleteCount, ...items) {
         var proxy = source;
         var rootPath = proxy.___node.Path;
-        var array = this.observableTree.Get(rootPath);
+        var array = await this.diffAsync.GetPath(rootPath);
         array = array.slice();
         array.splice(start, deleteCount, ...items);
         var diff = await this.diffAsync.DiffPath(rootPath, array);
         this.ApplyChanges(diff);
     }
     ApplyChanges(diff) {
-        for (var x = 0; x < diff.deletedPaths.length; x++)
-            this.observableTree.Delete(diff.deletedPaths[x]);
-        this.observableTree.WriteAll(diff.changedPaths);
+        this.observableTree.WriteAll(diff);
     }
 }
 exports.StoreAsyncWriter = StoreAsyncWriter;

package/Store/Store/storeSyncWriter.js

@@ -37,9 +37,7 @@ class StoreSyncWriter {
         return proxy.___node.Splice(start, deleteCount, ...items);
     }
     ApplyChanges(diff) {
-        for (var x = 0; x < diff.deletedPaths.length; x++)
-            this.observableTree.Delete(diff.deletedPaths[x]);
-        this.observableTree.WriteAll(diff.changedPaths);
+        this.observableTree.WriteAll(diff);
     }
 }
 exports.StoreSyncWriter = StoreSyncWriter;

package/Store/Tree/observableNode.d.ts

@@ -10,6 +10,7 @@ export declare class ObservableNode {
     private path;
     private scope;
     private arrayScope;
+    get Key(): string;
     get Path(): string;
     get Value(): any;
     get Type(): Type;

package/Store/Tree/observableNode.js

@@ -29,6 +29,9 @@ class ObservableNode {
             };
         });
     }
+    get Key() {
+        return this.key;
+    }
     get Path() {
         if (this.path === undefined)
             this.path = (this.parent ? this.parent.Path + "." : "") + this.key;

package/Store/Tree/observableTree.d.ts

@@ -16,7 +16,7 @@ export declare class ObservableTree {
     GetNode(path: string): ObservableNode;
     Delete(path: string): void;
     Destroy(): void;
-    Scope<O, R>(path: string, func?: {
+    Scope<O, R = O>(path: string, func?: {
         (val: O): R;
     }): ObservableScope<R>;
     private WritePath;

package/Store/Tree/observableTree.js

@@ -74,8 +74,18 @@ class ObservableTree {
     UpdatePathNode(path) {
         var node = this.GetNode(path);
         node.Update();
-        if (node.Parent && node.Parent.Type === observableProxy_1.Type.Array)
+        if (node.Parent && node.Parent.Type === observableProxy_1.Type.Array) {
             node.Parent.ArrayUpdate();
+            if (node.Key === 'length') {
+                var index = node.Value;
+                var childNode = node.Parent.Children.get(index.toString());
+                while (childNode) {
+                    childNode.Destroy();
+                    index++;
+                    childNode = node.Parent.Children.get(index.toString());
+                }
+            }
+        }
     }
 }
 exports.ObservableTree = ObservableTree;

package/Utils/asyncQueue.d.ts

@@ -0,0 +1,8 @@
+export declare class AsyncQueue {
+    private running;
+    private queue;
+    Next<T>(callback: () => Promise<T>): Promise<T>;
+    Stop(): void;
+    private Start;
+    private ExecuteQueue;
+}

package/Utils/asyncQueue.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const list_1 = require("./list");
+class AsyncQueue {
+    constructor() {
+        this.running = false;
+        this.queue = list_1.List.Create();
+    }
+    Next(callback) {
+        const ret = new Promise(async function (resolve, reject) {
+            list_1.List.Add(this.queue, async function () {
+                try {
+                    const ret = await callback();
+                    resolve(ret);
+                }
+                catch (e) {
+                    reject(e);
+                }
+            });
+        });
+        this.Start();
+        return ret;
+    }
+    Stop() {
+        list_1.List.Clear(this.queue);
+    }
+    Start() {
+        if (this.running)
+            return;
+        this.running = true;
+        this.ExecuteQueue();
+    }
+    async ExecuteQueue() {
+        const callback = list_1.List.Pop(this.queue);
+        if (callback !== null) {
+            await callback();
+            this.ExecuteQueue();
+        }
+        else
+            this.running = false;
+    }
+}
+exports.AsyncQueue = AsyncQueue;