native-document 1.0.46 → 1.0.48

package/src/data/ObservableItem.js

@@ -4,6 +4,7 @@ import NativeDocumentError from "../errors/NativeDocumentError";
 import ObservableChecker from "./ObservableChecker";
 import PluginsManager from "../utils/plugins-manager";
 import Validator from "../utils/validator";
+import {ObservableWhen} from "./ObservableWhen";
 
 /**
  *
@@ -35,6 +36,7 @@ Object.defineProperty(ObservableItem.prototype, '$value', {
 ObservableItem.prototype.__$isObservable = true;
 const DEFAULT_OPERATIONS = {};
 const noneTrigger = function() {};
+
 ObservableItem.prototype.triggerFirstListener = function(operations) {
     this.$listeners[0](this.$currentValue, this.$previousValue, operations || {});
 }
@@ -235,7 +237,7 @@ ObservableItem.prototype.get = function(key) {
 };
 
 ObservableItem.prototype.when = function(value) {
-    return {$target: value, $observer: this};
+    return new ObservableWhen(this, value);
 };
 
 ObservableItem.prototype.toString = function() {

package/src/data/ObservableWhen.js

@@ -0,0 +1,23 @@
+
+export const ObservableWhen = function(observer, value) {
+    this.$target = value;
+    this.$observer = observer;
+};
+
+ObservableWhen.prototype.__$isObservableWhen = true;
+
+ObservableWhen.prototype.subscribe = function(callback) {
+    return this.$observer.on(this.$target, callback);
+};
+
+ObservableWhen.prototype.val = function() {
+    return this.$observer.$currentValue === this.$target;
+};
+
+ObservableWhen.prototype.isMath = function() {
+    return this.$observer.$currentValue === this.$target;
+};
+
+ObservableWhen.prototype.isActive = function() {
+    return this.$observer.$currentValue === this.$target;
+};

package/src/data/observable-helpers/array.js

@@ -1,108 +1,12 @@
-import NativeDocumentError from "../../errors/NativeDocumentError";
 import {Observable} from "../Observable";
-import PluginsManager from "../../utils/plugins-manager";
+import ObservableArray from "../ObservableArray.js";
 
 
-const methods = ['push', 'pop', 'shift', 'unshift', 'reverse', 'sort', 'splice'];
-
 /**
  *
  * @param {Array} target
- * @returns {ObservableItem}
+ * @returns {ObservableArray}
  */
-Observable.array = function(target, { propagation = false, deep = false } = {}) {
-    if(!Array.isArray(target)) {
-        throw new NativeDocumentError('Observable.array : target must be an array');
-    }
-    const observer = Observable(target);
-
-    PluginsManager.emit('CreateObservableArray', observer);
-
-    methods.forEach((method) => {
-        observer[method] = function(...values) {
-            const result = observer.val()[method](...values);
-            observer.trigger({ action: method, args: values, result });
-            return result;
-        };
-    });
-
-    observer.clear = function() {
-        observer.val().length = 0;
-        observer.trigger({ action: 'clear' });
-        return true;
-    };
-
-    observer.merge = function(values) {
-        observer.$value.push(...values);
-        observer.trigger({ action: 'merge',  args: values });
-    };
-
-    observer.populateAndRender = function(iteration, callback) {
-        observer.trigger({ action: 'populate', args: [observer.val(), iteration, callback] });
-    };
-
-    observer.removeItem = function(item) {
-        const indexOfItem = observer.val().indexOf(item);
-        return observer.remove(indexOfItem);
-    };
-
-    observer.remove = function(index) {
-        const deleted = observer.val().splice(index, 1);
-        if(deleted.length === 0) {
-            return [];
-        }
-        observer.trigger({ action: 'remove', args: [index], result: deleted[0] });
-        return deleted;
-    };
-
-    observer.swap = function(indexA, indexB) {
-        const value = observer.val();
-        const length = value.length;
-        if(length < indexA || length < indexB) {
-            return false;
-        }
-        if(indexB < indexA) {
-            const temp = indexA;
-            indexA = indexB;
-            indexB = temp;
-        }
-        const elementA = value[indexA];
-        const elementB = value[indexB]
-
-        value[indexA] = elementB;
-        value[indexB] = elementA;
-        observer.trigger({ action: 'swap', args: [indexA, indexB], result: [elementA, elementB] });
-        return true;
-    };
-
-    observer.length = function() {
-        return observer.val().length;
-    };
-
-    /**
-     *
-     * @param {Function} condition
-     * @returns {number}
-     */
-    observer.count = (condition) => {
-        let count = 0;
-        observer.val().forEach((item, index) => {
-            if(condition(item, index)) {
-                count++;
-            }
-        });
-        return count;
-    };
-    observer.isEmpty = function() {
-        return observer.val().length === 0;
-    };
-
-    const overrideMethods = ['map', 'filter', 'reduce', 'some', 'every', 'find', 'findIndex', 'concat', 'includes', 'indexOf'];
-    overrideMethods.forEach((method) => {
-        observer[method] = (...args) => {
-            return observer.val()[method](...args);
-        };
-    });
-
-    return observer;
+Observable.array = function(target) {
+    return new ObservableArray(target);
 };

package/src/data/observable-helpers/object.js

@@ -54,7 +54,7 @@ Observable.init = function(initialValue, { propagation= false, deep = true } = {
         const itemValue = initialValue[key];
         if(Array.isArray(itemValue)) {
             if(deep) {
-                data[key] = itemValue.map(item => {
+                const mappedItemValue = itemValue.map(item => {
                     if(Validator.isJson(item)) {
                         return Observable.json(item, { propagation, deep });
                     }
@@ -63,6 +63,7 @@ Observable.init = function(initialValue, { propagation= false, deep = true } = {
                     }
                     return Observable(item);
                 });
+                data[key] = Observable.array(mappedItemValue, { propagation });
                 continue;
             }
             data[key] = Observable.array(itemValue, { propagation });
@@ -108,6 +109,9 @@ Observable.init = function(initialValue, { propagation= false, deep = true } = {
             if(property === '$get') {
                 return $get;
             }
+            if(property === '$val') {
+                return $val;
+            }
             if(target[property] !== undefined) {
                 return target[property];
             }
@@ -170,12 +174,13 @@ Observable.update = function($target, newData) {
 
         if(Validator.isObservable(targetItem)) {
             if(Validator.isArray(newValue)) {
-                if(Validator.isObservable(newValueOrigin[0]) || Validator.isProxy(newValueOrigin[0])) {
+                const firstElementFromOriginalValue = newValueOrigin.at(0);
+                if(Validator.isObservable(firstElementFromOriginalValue) || Validator.isProxy(firstElementFromOriginalValue)) {
                     const newValues = newValue.map(item => {
-                        if(Validator.isObservable(newValueOrigin[0])) {
-                            return Observable(item);
+                        if(Validator.isProxy(firstElementFromOriginalValue)) {
+                            return Observable.init(item);
                         }
-                        return Observable.init(newValueOrigin[0]);
+                        return Observable(item);
                     });
                     targetItem.set(newValues);
                     continue;

package/src/elements/control/show-if.js

@@ -13,7 +13,7 @@ import {ElementCreator} from "../../wrappers/ElementCreator";
  * @returns {DocumentFragment}
  */
 export const ShowIf = function(condition, child, { comment = null, shouldKeepInCache = true} = {}) {
-    if(!(Validator.isObservable(condition))) {
+    if(!(Validator.isObservable(condition)) && !Validator.isObservableWhenResult(condition)) {
         return DebugManager.warn('ShowIf', "ShowIf : condition must be an Observable / "+comment, condition);
     }
     const element = new Anchor('Show if : '+(comment || ''));

package/src/elements/control/show-when.js

@@ -0,0 +1,31 @@
+import Validator from "../../utils/validator.js";
+import NativeDocumentError from "../../errors/NativeDocumentError.js";
+import {ShowIf} from "./show-if.js";
+
+export const ShowWhen = function() {
+    if(arguments.length === 2) {
+        const [observer, target] = arguments;
+        if(!Validator.isObservableWhenResult(observer)) {
+            throw new NativeDocumentError('showWhen observer must be an ObservableWhenResult', {
+                data: observer,
+                'help': 'Use observer.when(target) to create an ObservableWhenResult'
+            });
+        }
+        return ShowIf(observer, target);
+    }
+    if(arguments.length === 3) {
+        const [observer, target, view] = arguments;
+        if(!Validator.isObservable(observer)) {
+            throw new NativeDocumentError('showWhen observer must be an Observable', {
+                data: observer,
+            });
+        }
+        return ShowIf(observer.when(target), view);
+    }
+    throw new NativeDocumentError('showWhen must have 2 or 3 arguments', {
+        data: [
+            'showWhen(observer, target, view)',
+            'showWhen(observerWhenResult, view)',
+        ]
+    });
+};

package/src/elements/index.js

@@ -3,6 +3,7 @@ import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
 export * from './control/for-each';
 export * from './control/for-each-array';
 export * from './control/show-if';
+export * from './control/show-when';
 export * from './control/switch';
 export * from './content-formatter';
 export * from './description-list';

package/src/utils/memoize.js

@@ -0,0 +1,53 @@
+
+
+export const once = (fn) => {
+    let result = null;
+    return (...args) => {
+        if(result === null) {
+            result = fn(...args);
+        }
+        return result;
+    };
+};
+
+export const autoOnce = (fn) => {
+    let target = null;
+    return new Proxy({}, {
+        get: (_, key) => {
+            if(target === null) {
+                target = fn();
+            }
+            return target[key];
+        }
+    });
+};
+
+export const memoize = (fn) => {
+    const cache = new Map();
+    return (...args) => {
+        const [key, ...rest] = args;
+        if(!cache.has(key)) {
+            cache.set(key, fn(...rest));
+        }
+        return cache.get(key);
+    };
+};
+
+export const autoMemoize = (fn) => {
+    const cache = new Map();
+    return new Proxy({}, {
+        get: (_, key) => {
+            if(!cache.has(key)) {
+                if(fn.length > 0) {
+                    return (...args) => {
+                        const result = fn(...args);
+                        cache.set(key, result);
+                        return result;
+                    }
+                }
+                cache.set(key, fn());
+            }
+            return cache.get(key);
+        }
+    });
+};

package/src/utils/prototypes.js

@@ -9,15 +9,15 @@ Function.prototype.args = function(...args) {
 };
 
 Function.prototype.cached = function(...args) {
-    let $cache = null;
-    let  getCache = function(){ return $cache; };
+    let $cache;
+    let  getCache = () => $cache;
     return () => {
         if(!$cache) {
             $cache = this.apply(this, args);
             if($cache.cloneNode) {
-                getCache = function() { return $cache.cloneNode(true); };
+                getCache = () => $cache.cloneNode(true);
             } else if($cache.$element) {
-                getCache = function() { return new NDElement($cache.$element.cloneNode(true)); };
+                getCache = () => new NDElement($cache.$element.cloneNode(true));
             }
         }
         return getCache();

package/src/utils/service.js

@@ -0,0 +1,6 @@
+import { autoMemoize, autoOnce } from "./memoize.js";
+
+export const Service = {
+    once: fn => autoOnce(fn),
+    memoize: fn => autoMemoize(fn)
+};

package/src/utils/validator.js

@@ -16,6 +16,12 @@ const Validator = {
     isObservable(value) {
         return  value?.__$isObservable || value instanceof ObservableItem || value instanceof ObservableChecker;
     },
+    isObservableWhenResult(value) {
+        return value && (value.__$isObservableWhen || (typeof value === 'object' && '$target' in value && '$observer' in value));
+    },
+    isArrayObservable(value) {
+        return  value?.__$isObservableArray;
+    },
     isProxy(value) {
         return value?.__isProxy__
     },

package/src/wrappers/AttributesWrapper.js

@@ -37,9 +37,9 @@ function bindClassAttribute(element, data) {
             value.subscribe(toggleElementClass.bind(null, element, className));
             continue;
         }
-        if(value.$observer) {
-            element.classes.toggle(className, value.$observer.val() === value.$target);
-            value.$observer.on(value.$target, toggleElementClass.bind(null, element, className));
+        if(Validator.isObservableWhenResult(value)) {
+            element.classes.toggle(className, value.isMath());
+            value.subscribe(toggleElementClass.bind(null, element, className));
             continue;
         }
         if(value.$hydrate) {

package/types/control-flow.d.ts

@@ -1,10 +1,10 @@
 // Control flow components type definitions
-import { ObservableItem, ObservableChecker, ObservableArray } from './observable';
+import {ObservableItem, ObservableChecker, ObservableArray, ObservableWhen} from './observable';
 import { ValidChild } from './elements';
 
 // Control Flow Functions
 export interface ShowIfFunction {
-    (condition: ObservableItem<boolean> | ObservableChecker<boolean>, child: ValidChild, options?: { comment?: string | null; shouldKeepInCache?: boolean }): DocumentFragment;
+    (condition: ObservableItem<boolean> | ObservableChecker<boolean> | ObservableWhen, child: ValidChild, options?: { comment?: string | null; shouldKeepInCache?: boolean }): DocumentFragment;
 }
 
 export interface HideIfFunction {
@@ -42,9 +42,13 @@ export interface ForEachArrayFunction {
 }
 
 export interface HideIfNotFunction {
-    (condition: ObservableItem<boolean> | ObservableChecker<boolean>, child: ValidChild, options?: { comment?: string | null; shouldKeepInCache?: boolean }): DocumentFragment;
+    (condition: ObservableItem<boolean> | ObservableChecker<boolean> | ObservableWhen, child: ValidChild, options?: { comment?: string | null; shouldKeepInCache?: boolean }): DocumentFragment;
 }
 
+
+export function ShowWhen(observer: ObservableWhen, target: any): ReturnType<typeof ShowIf>;
+export function ShowWhen(observer: ObservableWhen, target: any, view: any): ReturnType<typeof ShowIf>;
+
 // Control Flow Components
 export declare const ShowIf: ShowIfFunction;
 export declare const HideIf: HideIfFunction;

package/types/memoize.d.ts

@@ -0,0 +1,16 @@
+
+export function once<T extends (...args: any[]) => any>(
+    fn: T
+): (...args: Parameters<T>) => ReturnType<T>;
+
+export function autoOnce<T extends object>(
+    fn: () => T
+): T;
+
+export function memoize<T extends (...args: any[]) => any>(
+    fn: T
+): (key: any, ...args: Parameters<T>) => ReturnType<T>;
+
+export function autoMemoize<T extends (...args: any[]) => any>(
+    fn: T
+): Record<PropertyKey, Parameters<T>['length'] extends 0 ? ReturnType<T> : T>;

package/types/observable.d.ts

@@ -1,3 +1,5 @@
+export type Unsubscribe = () => void;
+
 // Observable system type definitions
 export interface ObservableItem<T = any> {
     readonly $currentValue: T;
@@ -12,7 +14,7 @@ export interface ObservableItem<T = any> {
     trigger(operations?: ObservableOperation): void;
     cleanup(): void;
 
-    subscribe(callback: (current: T, previous: T, operations?: ObservableOperation) => void): () => void;
+    subscribe(callback: (current: T, previous: T, operations?: ObservableOperation) => void): Unsubscribe;
     unsubscribe(callback: Function): void;
     on(value: T, callback: ObservableItem<boolean> | ((isActive: boolean) => void)): () => void;
 
@@ -23,6 +25,19 @@ export interface ObservableItem<T = any> {
     toString(): string;
 }
 
+export class ObservableWhen<T = any> {
+    readonly __$isObservableWhen: true;
+    private $target: T;
+    private $observer: ObservableItem<T>;
+
+    constructor(observer: ObservableItem<T>, value: T);
+
+    subscribe(callback: (value: boolean) => void): Unsubscribe;
+    val(): boolean;
+    isMath(): boolean;
+    isActive(): boolean;
+}
+
 export interface ObservableOperation {
     action?: string;
     args?: any[];
@@ -32,7 +47,7 @@ export interface ObservableOperation {
 export interface ObservableChecker<T = any> {
     readonly __$isObservableChecker: true;
 
-    subscribe(callback: (value: T) => void): () => void;
+    subscribe(callback: (value: T) => void): Unsubscribe;
     check<U>(callback: (value: T) => U): ObservableChecker<U>;
     val(): T;
 
@@ -73,8 +88,11 @@ export interface ObservableArray<T> extends ObservableItem<T[]> {
 export type ObservableProxy<T extends Record<string, any>> = {
     readonly __isProxy__: true;
     readonly $value: T;
+    $val(): T;
+    $get(key: string): any;
     $clone(): ObservableProxy<T>;
     $updateWith(values: Partial<T>): void;
+    $set(values: Partial<T>): void;
 } & {
     [K in keyof T]: T[K] extends (infer U)[]
         ? ObservableArray<U>
@@ -117,4 +135,4 @@ export interface ObservableStatic {
     cleanup(observable: ObservableItem): void;
     autoCleanup(enable?: boolean, options?: AutoCleanupOptions): void;
     arrayOfObject<T extends Record<string, any>>(data: T[]): ObservableProxy<T>[];
-}
+}