j-templates 6.1.6 → 6.1.8

package/DOM/domNodeConfig.js

@@ -16,18 +16,19 @@ function processUpdates() {
     let callback;
     while ((callback = list_1.List.Pop(pendingUpdates)))
         callback();
-    const now = Date.now();
     if (pendingUpdates.size === 0)
         updateScheduled = false;
-    else if (now - frameStart < frameTime)
-        queueMicrotask(processUpdates);
     else {
-        frameStart = now;
+        frameStart = Date.now();
         window_1.wndw.requestAnimationFrame(processUpdates);
     }
 }
+let highPriority = false;
 function scheduleUpdate(callback) {
-    list_1.List.Add(pendingUpdates, callback);
+    if (highPriority)
+        list_1.List.Push(pendingUpdates, callback);
+    else
+        list_1.List.Add(pendingUpdates, callback);
     if (!updateScheduled) {
         const now = Date.now();
         updateScheduled = true;
@@ -39,6 +40,14 @@ function scheduleUpdate(callback) {
         }
     }
 }
+function wrapPriorityUpdates(callback) {
+    return function (...args) {
+        const currentPriority = highPriority;
+        highPriority = true;
+        callback(...args);
+        highPriority = currentPriority;
+    };
+}
 exports.DOMNodeConfig = {
     createNode(type, namespace) {
         return namespace ?
@@ -49,6 +58,7 @@ exports.DOMNodeConfig = {
         return window_1.wndw.document.createTextNode(value);
     },
     scheduleUpdate,
+    wrapPriorityUpdates,
     addListener(target, type, callback) {
         target.addEventListener(type, callback);
     },

package/Node/nodeConfig.d.ts

@@ -2,6 +2,7 @@ export interface INodeConfig {
     createNode(type: any, namespace: string): any;
     createTextNode(value?: string): any;
     scheduleUpdate(callback: () => void): void;
+    wrapPriorityUpdates<P extends any[]>(callback: (...args: P) => void): (...args: P) => void;
     setText(target: any, text: string): void;
     getAttribute(target: any, attribute: string): string;
     setAttribute(target: any, attribute: string, value: string): void;

package/Store/Tree/observableNode.js

@@ -181,7 +181,7 @@ function CreateProxyFactory(alias) {
     function SetPropertyValue(object, prop, value) {
         object[prop] = value;
         const leafScopes = leafScopeCache.get(object);
-        observableScope_1.ObservableScope.Update(leafScopes && leafScopes[prop] || scopeCache.get(object));
+        observableScope_1.ObservableScope.Update((leafScopes && leafScopes[prop]) || scopeCache.get(object));
     }
     function ObjectProxySetter(object, prop, value) {
         if (readOnly)
@@ -189,7 +189,7 @@ function CreateProxyFactory(alias) {
         if (prop === exports.IS_OBSERVABLE_NODE)
             throw `Cannot assign read-only property: ${exports.IS_OBSERVABLE_NODE}`;
         const jsonType = (0, jsonType_1.JsonType)(value);
-        if (jsonType === 'value') {
+        if (jsonType === "value") {
             value !== object[prop] && SetPropertyValue(object, prop, value);
         }
         else {

package/Store/Tree/observableScope.d.ts

@@ -42,6 +42,7 @@ export interface IObservableScope<T> extends IDestroyable {
     emitter: Emitter;
     emitters: (Emitter | null)[];
     calcFunctions: ICalcFunction<any>[] | null;
+    onDestroyed: Emitter | null;
     destroyed: boolean;
     watchEmitters: Emitter[] | null;
     watchEmittersSet: Set<Emitter> | null;
@@ -52,11 +53,13 @@ export declare namespace ObservableScope {
         (): T | Promise<T>;
     }): IObservableScope<T>;
     function Register(emitter: Emitter): void;
+    function Init<T>(scope: IObservableScope<T>): void;
     function Value<T>(scope: IObservableScope<T>): T;
     function Watching(): boolean;
     function Touch<T>(scope: IObservableScope<T>): void;
     function Watch<T>(scope: IObservableScope<T>, callback: EmitterCallback<[IObservableScope<T>]>): void;
     function Unwatch<T>(scope: IObservableScope<T>, callback: EmitterCallback<[IObservableScope<T> | ObservableScopeValue<T>]>): void;
+    function OnDestroyed(scope: IObservableScope<unknown>, callback: () => void): void;
     function Update(scope: IObservableScope<any>): void;
     function Destroy<T>(scope: IObservableScope<T>): void;
 }

package/Store/Tree/observableScope.js

@@ -83,6 +83,7 @@ function CalcScope(callback) {
             emitter: emitter_1.Emitter.Create(),
             emitters: [],
             calcFunctions: null,
+            onDestroyed: null,
             destroyed: false,
             watchEmitters: null,
             watchEmittersSet: null,
@@ -105,6 +106,12 @@ function CalcScope(callback) {
         }
     }
     ObservableScope.Register = Register;
+    function Init(scope) {
+        if (!scope)
+            return;
+        UpdateScope(scope);
+    }
+    ObservableScope.Init = Init;
     function Value(scope) {
         if (!scope)
             return undefined;
@@ -135,6 +142,11 @@ function CalcScope(callback) {
         emitter_1.Emitter.Remove(scope.emitter, callback);
     }
     ObservableScope.Unwatch = Unwatch;
+    function OnDestroyed(scope, callback) {
+        scope.onDestroyed ??= emitter_1.Emitter.Create();
+        emitter_1.Emitter.On(scope.onDestroyed, callback);
+    }
+    ObservableScope.OnDestroyed = OnDestroyed;
     function Update(scope) {
         OnSet(scope);
     }
@@ -224,6 +236,7 @@ function DestroyScope(scope) {
     scope.setCallback = null;
     scope.calcFunctions = null;
     scope.destroyed = true;
+    scope.onDestroyed !== null && emitter_1.Emitter.Emit(scope.onDestroyed);
     for (let x = 0; x < emitters.length; x++)
         emitter_1.Emitter.Remove(emitters[x], scope.setCallback);
 }

package/Utils/animation.d.ts

@@ -5,14 +5,14 @@ export declare enum AnimationType {
 }
 export declare class Animation implements IDestroyable {
     private type;
-    private frameCount;
-    private frameTimings;
-    private update;
-    private animationTimeouts;
     private running;
     private start;
     private end;
     private enabled;
+    private animationStart;
+    private animationDuration;
+    private animationUpdate;
+    private animationRun;
     get Running(): boolean;
     get Start(): number;
     get End(): number;
@@ -25,5 +25,4 @@ export declare class Animation implements IDestroyable {
     Enable(): void;
     Cancel(): void;
     Destroy(): void;
-    private SetTimeout;
 }

package/Utils/animation.js

@@ -1,18 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Animation = exports.AnimationType = void 0;
+const domNodeConfig_1 = require("../DOM/domNodeConfig");
 var StepFunctions;
 (function (StepFunctions) {
-    function* EaseIn(count) {
-        var diff = 1 / count;
-        for (var t = diff, x = 0; x < count; x++, t += diff)
-            yield (1 - t) * (1 - t) * (1 - t) * 0 + 3 * (1 - t) * (1 - t) * t * 1 + 3 * (1 - t) * t * t * 1 + t * t * t * 1;
+    function EaseIn(start, duration) {
+        const elapsed = Date.now() - start;
+        const percent = Math.min(elapsed / duration, 1);
+        return ((1 - percent) * (1 - percent) * (1 - percent) * 0 +
+            3 * (1 - percent) * (1 - percent) * percent * 1 +
+            3 * (1 - percent) * percent * percent * 1 +
+            percent * percent * percent * 1);
     }
     StepFunctions.EaseIn = EaseIn;
-    function* Linear(count) {
-        var diff = 1 / count;
-        for (var t = diff, x = 0; x < count; x++, t += diff)
-            yield t;
+    function Linear(start, duration) {
+        const elapsed = Date.now() - start;
+        const percent = Math.min(elapsed / duration, 1);
+        return percent;
     }
     StepFunctions.Linear = Linear;
 })(StepFunctions || (StepFunctions = {}));
@@ -35,41 +39,46 @@ class Animation {
         return this.enabled;
     }
     constructor(type, duration, update) {
+        this.animationStart = 0;
+        this.animationRun = null;
         this.running = false;
         this.start = null;
         this.end = null;
         this.enabled = true;
         this.type = type;
-        this.frameCount = Math.ceil((duration / 1000) * 60);
-        this.frameTimings = [];
-        var frameTime = duration / this.frameCount;
-        for (var x = 0; x < this.frameCount; x++)
-            this.frameTimings[x] = (x + 1) * frameTime;
-        this.update = update;
-        this.animationTimeouts = [];
+        this.animationDuration = duration;
+        this.animationUpdate = domNodeConfig_1.DOMNodeConfig.wrapPriorityUpdates(update);
     }
     Animate(start, end) {
         if (!this.enabled)
             return;
-        var diff = end - start;
+        const diff = end - start;
         if (diff === 0)
             return;
         this.Cancel();
+        this.animationStart = Date.now();
         this.running = true;
         this.start = start;
         this.end = end;
-        return new Promise(resolve => {
-            var stepFunc = StepFunctions[AnimationType[this.type]];
-            var index = 0;
-            for (var step of stepFunc(this.frameCount)) {
-                var value = (step * diff) + start;
-                this.SetTimeout(index, value, index === (this.frameCount - 1) ? resolve : null);
-                index++;
-            }
+        return new Promise((resolve) => {
+            const stepFunc = StepFunctions[AnimationType[this.type]];
+            const animationRun = () => {
+                if (this.animationRun !== animationRun)
+                    return;
+                const percent = stepFunc(this.animationStart, this.animationDuration);
+                const step = percent * diff;
+                const next = this.start + step;
+                this.animationUpdate(next);
+                if (percent < 1)
+                    domNodeConfig_1.DOMNodeConfig.scheduleUpdate(this.animationRun);
+                else {
+                    resolve();
+                }
+            };
+            this.animationRun = animationRun;
+            domNodeConfig_1.DOMNodeConfig.scheduleUpdate(this.animationRun);
         }).then(() => {
-            this.running = false;
-            this.start = null;
-            this.end = null;
+            this.Cancel();
         });
     }
     Disable() {
@@ -80,20 +89,13 @@ class Animation {
         this.enabled = true;
     }
     Cancel() {
-        for (var x = 0; x < this.animationTimeouts.length; x++)
-            clearTimeout(this.animationTimeouts[x]);
         this.running = false;
         this.start = null;
         this.end = null;
+        this.animationRun = null;
     }
     Destroy() {
-        this.Cancel();
-    }
-    SetTimeout(index, value, resolve) {
-        this.animationTimeouts[index] = setTimeout(() => {
-            this.update(value);
-            resolve && resolve();
-        }, this.frameTimings[index]);
+        this.Disable();
     }
 }
 exports.Animation = Animation;

package/Utils/decorators.d.ts

@@ -1,6 +1,8 @@
 import { Component } from "../Node/component";
 import { IDestroyable } from "./utils.types";
 import { NodeRefTypes } from "../Node/nodeRef.types";
+export declare function Computed<T extends Component<any, any, any>, K extends keyof T, V extends T[K]>(defaultValue: V): (target: T, propertyKey: K, descriptor: PropertyDescriptor) => PropertyDescriptor;
+export declare function ComputedAsync<T extends Component<any, any, any>, K extends keyof T, V extends T[K]>(defaultValue: V): (target: T, propertyKey: K, descriptor: PropertyDescriptor) => PropertyDescriptor;
 export declare function State(): any;
 export declare function Value(): any;
 export declare function Scope(): typeof ScopeDecorator;

package/Utils/decorators.js

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Computed = Computed;
+exports.ComputedAsync = ComputedAsync;
 exports.State = State;
 exports.Value = Value;
 exports.Scope = Scope;
@@ -9,6 +11,8 @@ exports.PreReqTemplate = PreReqTemplate;
 exports.PreReq = PreReq;
 const observableScope_1 = require("../Store/Tree/observableScope");
 const observableNode_1 = require("../Store/Tree/observableNode");
+const Store_1 = require("../Store");
+const json_1 = require("./json");
 const nodeInstanceMap = new WeakMap();
 const scopeInstanceMap = new WeakMap();
 const destroyPrototypeMap = new WeakMap();
@@ -27,6 +31,76 @@ function GetDestroyArrayForPrototype(prototype) {
     destroyPrototypeMap.set(prototype, array);
     return array;
 }
+function Computed(defaultValue) {
+    return function (target, propertyKey, descriptor) {
+        return ComputedDecorator(target, propertyKey, descriptor, defaultValue);
+    };
+}
+function ComputedDecorator(target, prop, descriptor, defaultValue) {
+    const propertyKey = prop;
+    if (!(descriptor && descriptor.get))
+        throw "Computed decorator requires a getter";
+    if (descriptor && descriptor.set)
+        throw "Computed decorator does not support setters";
+    const getter = descriptor.get;
+    return {
+        configurable: false,
+        enumerable: true,
+        get: function () {
+            const scopeMap = GetScopeMapForInstance(this);
+            if (scopeMap[propertyKey] === undefined) {
+                const getterScope = observableScope_1.ObservableScope.Create(async () => getter.call(this));
+                const syncStore = new Store_1.StoreSync();
+                observableScope_1.ObservableScope.Watch(getterScope, (scope) => {
+                    const copy = (0, json_1.JsonDeepClone)(observableScope_1.ObservableScope.Value(scope));
+                    syncStore.Write(copy, 'root');
+                });
+                observableScope_1.ObservableScope.Init(getterScope);
+                const propertyScope = observableScope_1.ObservableScope.Create(() => syncStore.Get('root', defaultValue));
+                observableScope_1.ObservableScope.OnDestroyed(propertyScope, function () {
+                    observableScope_1.ObservableScope.Destroy(getterScope);
+                });
+                scopeMap[propertyKey] = [propertyScope, undefined];
+            }
+            return observableScope_1.ObservableScope.Value(scopeMap[propertyKey][0]);
+        }
+    };
+}
+function ComputedAsync(defaultValue) {
+    return function (target, propertyKey, descriptor) {
+        return ComputedAsyncDecorator(target, propertyKey, descriptor, defaultValue);
+    };
+}
+function ComputedAsyncDecorator(target, prop, descriptor, defaultValue) {
+    const propertyKey = prop;
+    if (!(descriptor && descriptor.get))
+        throw "Computed decorator requires a getter";
+    if (descriptor && descriptor.set)
+        throw "Computed decorator does not support setters";
+    const getter = descriptor.get;
+    return {
+        configurable: false,
+        enumerable: true,
+        get: function () {
+            const scopeMap = GetScopeMapForInstance(this);
+            if (scopeMap[propertyKey] === undefined) {
+                const getterScope = observableScope_1.ObservableScope.Create(async () => getter.call(this));
+                const asyncStore = new Store_1.StoreAsync();
+                observableScope_1.ObservableScope.Watch(getterScope, (scope) => {
+                    asyncStore.Write(observableScope_1.ObservableScope.Value(scope), 'root');
+                });
+                observableScope_1.ObservableScope.Init(getterScope);
+                const propertyScope = observableScope_1.ObservableScope.Create(() => asyncStore.Get('root', defaultValue));
+                observableScope_1.ObservableScope.OnDestroyed(propertyScope, function () {
+                    observableScope_1.ObservableScope.Destroy(getterScope);
+                    asyncStore.Destroy();
+                });
+                scopeMap[propertyKey] = [propertyScope, undefined];
+            }
+            return observableScope_1.ObservableScope.Value(scopeMap[propertyKey][0]);
+        }
+    };
+}
 function State() {
     return StateDecorator;
 }

package/Utils/index.d.ts

@@ -1,3 +1,2 @@
 export * from "./decorators";
 export * from "./animation";
-export * from "./animation_v2";

package/Utils/index.js

@@ -16,4 +16,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./decorators"), exports);
 __exportStar(require("./animation"), exports);
-__exportStar(require("./animation_v2"), exports);

package/Utils/json.js

@@ -8,12 +8,14 @@ function JsonDiffFactory() {
     const arrayProto = Object.getPrototypeOf([]);
     const strProto = Object.getPrototypeOf("");
     const numProto = Object.getPrototypeOf(0);
+    const boolProto = Object.getPrototypeOf(false);
     function JsonType(value) {
         if (value === null || value === undefined)
             return "value";
         switch (Object.getPrototypeOf(value)) {
             case strProto:
             case numProto:
+            case boolProto:
                 return "value";
             case jsonProto:
                 return "object";

package/Utils/list.js

@@ -19,7 +19,7 @@ var List;
         Split(tempList, trimSize);
     }
     function ScheduleTrimTempList() {
-        if (!trimScheduled) {
+        if (!trimScheduled && tempList.size > maxTempListSize) {
             trimScheduled = true;
             requestIdleCallback(TrimTempList);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "j-templates",
-  "version": "6.1.6",
+  "version": "6.1.8",
   "description": "j-templates",
   "license": "MIT",
   "repository": "https://github.com/TypesInCode/jTemplates",

package/Utils/animation_v2.d.ts

@@ -1,28 +0,0 @@
-import { IDestroyable } from "./utils.types";
-export declare enum AnimationTypeV2 {
-    Linear = 0,
-    EaseIn = 1
-}
-export declare class AnimationV2 implements IDestroyable {
-    private type;
-    private running;
-    private start;
-    private end;
-    private enabled;
-    private animationStart;
-    private animationDuration;
-    private animationUpdate;
-    private animationRun;
-    get Running(): boolean;
-    get Start(): number;
-    get End(): number;
-    get Enabled(): boolean;
-    constructor(type: AnimationTypeV2, duration: number, update: {
-        (next: number): void;
-    });
-    Animate(start: number, end: number): Promise<void>;
-    Disable(): void;
-    Enable(): void;
-    Cancel(): void;
-    Destroy(): void;
-}

package/Utils/animation_v2.js

@@ -1,98 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AnimationV2 = exports.AnimationTypeV2 = void 0;
-const domNodeConfig_1 = require("../DOM/domNodeConfig");
-var StepFunctions;
-(function (StepFunctions) {
-    function EaseIn(start, duration) {
-        const elapsed = Date.now() - start;
-        const percent = Math.min(elapsed / duration, 1);
-        return (1 - percent) * (1 - percent) * (1 - percent) * 0 + 3 * (1 - percent) * (1 - percent) * percent * 1 + 3 * (1 - percent) * percent * percent * 1 + percent * percent * percent * 1;
-    }
-    StepFunctions.EaseIn = EaseIn;
-    function Linear(start, duration) {
-        const elapsed = Date.now() - start;
-        const percent = Math.min(elapsed / duration, 1);
-        return percent;
-    }
-    StepFunctions.Linear = Linear;
-})(StepFunctions || (StepFunctions = {}));
-var AnimationTypeV2;
-(function (AnimationTypeV2) {
-    AnimationTypeV2[AnimationTypeV2["Linear"] = 0] = "Linear";
-    AnimationTypeV2[AnimationTypeV2["EaseIn"] = 1] = "EaseIn";
-})(AnimationTypeV2 || (exports.AnimationTypeV2 = AnimationTypeV2 = {}));
-class AnimationV2 {
-    get Running() {
-        return this.running;
-    }
-    get Start() {
-        return this.start;
-    }
-    get End() {
-        return this.end;
-    }
-    get Enabled() {
-        return this.enabled;
-    }
-    constructor(type, duration, update) {
-        this.animationStart = 0;
-        this.animationRun = null;
-        this.running = false;
-        this.start = null;
-        this.end = null;
-        this.enabled = true;
-        this.type = type;
-        this.animationDuration = duration;
-        this.animationUpdate = update;
-    }
-    Animate(start, end) {
-        if (!this.enabled)
-            return;
-        const diff = end - start;
-        if (diff === 0)
-            return;
-        this.Cancel();
-        this.animationStart = Date.now();
-        this.running = true;
-        this.start = start;
-        this.end = end;
-        return new Promise(resolve => {
-            const stepFunc = StepFunctions[AnimationTypeV2[this.type]];
-            const animationRun = () => {
-                if (this.animationRun !== animationRun)
-                    return;
-                const percent = stepFunc(this.animationStart, this.animationDuration);
-                const step = percent * diff;
-                const next = this.start + step;
-                this.animationUpdate(next);
-                if (percent < 1)
-                    domNodeConfig_1.DOMNodeConfig.scheduleUpdate(this.animationRun);
-                else {
-                    resolve();
-                }
-            };
-            this.animationRun = animationRun;
-            domNodeConfig_1.DOMNodeConfig.scheduleUpdate(this.animationRun);
-        }).then(() => {
-            this.Cancel();
-        });
-    }
-    Disable() {
-        this.Cancel();
-        this.enabled = false;
-    }
-    Enable() {
-        this.enabled = true;
-    }
-    Cancel() {
-        this.running = false;
-        this.start = null;
-        this.end = null;
-        this.animationRun = null;
-    }
-    Destroy() {
-        this.Cancel();
-    }
-}
-exports.AnimationV2 = AnimationV2;