j-templates 5.0.33 → 5.0.36

package/jTemplates.js

@@ -564,6 +564,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);
@@ -1096,6 +1109,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();
     }
@@ -1176,6 +1192,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;
             }
         };
     }
@@ -1202,43 +1222,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(".");
@@ -1281,61 +1301,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;
         }
     }
@@ -1476,12 +1514,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const observableTree_1 = __webpack_require__(/*! ../Tree/observableTree */ "./src/Store/Tree/observableTree.ts");
 const diffAsync_1 = __webpack_require__(/*! ../Diff/diffAsync */ "./src/Store/Diff/diffAsync.ts");
 const storeAsyncWriter_1 = __webpack_require__(/*! ./storeAsyncWriter */ "./src/Store/Store/storeAsyncWriter.ts");
+const asyncQueue_1 = __webpack_require__(/*! ../../Utils/asyncQueue */ "./src/Utils/asyncQueue.ts");
 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);
@@ -1492,10 +1532,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) => {
@@ -1508,6 +1550,7 @@ class StoreAsync {
         });
     }
     Destroy() {
+        this.asyncQueue.Stop();
         this.diffAsync.Destroy();
         this.observableTree.Destroy();
     }
@@ -1556,26 +1599,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;
@@ -1675,9 +1716,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;
@@ -1767,6 +1806,9 @@ class ObservableNode {
             };
         });
     }
+    get Key() {
+        return this.key;
+    }
     get Path() {
         if (this.path === undefined)
             this.path = (this.parent ? this.parent.Path + "." : "") + this.key;
@@ -2273,8 +2315,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;
@@ -2412,6 +2464,61 @@ class Animation {
 exports.Animation = Animation;
 
 
+/***/ }),
+
+/***/ "./src/Utils/asyncQueue.ts":
+/*!*********************************!*\
+  !*** ./src/Utils/asyncQueue.ts ***!
+  \*********************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+const list_1 = __webpack_require__(/*! ./list */ "./src/Utils/list.ts");
+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;
+
+
 /***/ }),
 
 /***/ "./src/Utils/decorators.ts":