native-document 1.0.53 → 1.0.54

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

@@ -1,8 +1,5 @@
 import Validator from "../../utils/validator";
 import {Observable} from "../Observable";
-import ObservableItem from "../ObservableItem";
-
-
 
 const ObservableObjectValue = function(data) {
     const result = {};
@@ -45,40 +42,47 @@ const ObservableGet = function(target, property) {
 /**
  *
  * @param {Object} initialValue
- * @param {{propagation: boolean, deep: boolean}} configs
+ * @param {{propagation: boolean, deep: boolean, reset: boolean}|null} configs
  * @returns {Proxy}
  */
-Observable.init = function(initialValue, { propagation= false, deep = true } = {}) {
+Observable.init = function(initialValue, configs = null) {
     const data = {};
     for(const key in initialValue) {
         const itemValue = initialValue[key];
         if(Array.isArray(itemValue)) {
-            if(deep) {
+            if(configs?.deep !== false) {
                 const mappedItemValue = itemValue.map(item => {
                     if(Validator.isJson(item)) {
-                        return Observable.json(item, { propagation, deep });
+                        return Observable.json(item, configs);
                     }
                     if(Validator.isArray(item)) {
-                        return Observable.array(item, { propagation, deep });
+                        return Observable.array(item, configs);
                     }
-                    return Observable(item);
+                    return Observable(item, configs);
                 });
-                data[key] = Observable.array(mappedItemValue, { propagation });
+                data[key] = Observable.array(mappedItemValue, configs);
                 continue;
             }
-            data[key] = Observable.array(itemValue, { propagation });
+            data[key] = Observable.array(itemValue, configs);
             continue;
         }
         if(Validator.isObservable(itemValue) || Validator.isProxy(itemValue)) {
             data[key] = itemValue;
             continue;
         }
-        data[key] = Observable(itemValue);
+        data[key] = Observable(itemValue, configs);
+    }
+
+    const $reset = () => {
+        for(const key in data) {
+            const item = data[key];
+            item.reset();
+        }
     }
 
     const $val = () => ObservableObjectValue(data);
 
-    const $clone = () => Observable.init($val(), { propagation, deep });
+    const $clone = () => Observable.init($val(), configs);
 
     const $updateWith = (values) => {
         Observable.update(proxy, values);
@@ -88,34 +92,17 @@ Observable.init = function(initialValue, { propagation= false, deep = true } = {
 
     const proxy = new Proxy(data, {
         get(target, property) {
-            if(property === '__isProxy__') {
-                return true;
-            }
-            if(property === '$value') {
-                return $val();
-            }
-            if(property === '$clone') {
-                return $clone;
-            }
-            if(property === '$keys') {
-                return Object.keys(initialValue);
-            }
-            if(property === '$observables') {
-                return Object.values(target);
-            }
-            if(property === '$set' || property === '$updateWith') {
-                return $updateWith;
-            }
-            if(property === '$get') {
-                return $get;
-            }
-            if(property === '$val') {
-                return $val;
-            }
-            if(target[property] !== undefined) {
-                return target[property];
-            }
-            return undefined;
+            if(property === '__isProxy__') { return true; }
+            if(property === '$value') { return $val() }
+            if(property === 'get' || property === '$get') { return $get; }
+            if(property === 'val' || property === '$val') { return $val; }
+            if(property === 'set' || property === '$set' || property === '$updateWith') { return $updateWith; }
+            if(property === 'observables' || property === '$observables') { return Object.values(target); }
+            if(property === 'keys'|| property === '$keys') { return Object.keys(initialValue); }
+            if(property === 'clone' || property === '$clone') { return $clone; }
+            if(property === 'reset') { return $reset; }
+            if(property === 'configs') { return configs; }
+            return target[property];
         },
         set(target, prop, newValue) {
             if(target[prop] !== undefined) {
@@ -166,6 +153,7 @@ Observable.value = function(data) {
 
 Observable.update = function($target, newData) {
     const data = Validator.isProxy(newData) ? newData.$value : newData;
+    const configs = $target.configs;
 
     for(const key in data) {
         const targetItem = $target[key];
@@ -178,9 +166,9 @@ Observable.update = function($target, newData) {
                 if(Validator.isObservable(firstElementFromOriginalValue) || Validator.isProxy(firstElementFromOriginalValue)) {
                     const newValues = newValue.map(item => {
                         if(Validator.isProxy(firstElementFromOriginalValue)) {
-                            return Observable.init(item);
+                            return Observable.init(item, configs);
                         }
-                        return Observable(item);
+                        return Observable(item, configs);
                     });
                     targetItem.set(newValues);
                     continue;

package/src/elements/control/switch.js

@@ -49,9 +49,20 @@ export const Match = function($condition, values, shouldKeepInCache = true) {
         if(content) {
             anchor.appendChild(content);
         }
-    })
+    });
 
-    return anchor;
+    return anchor.nd.with({
+        add(key, view, shouldFocusOn = false) {
+            values[key] = view;
+            if(shouldFocusOn) {
+                $condition.set(key);
+            }
+        },
+        remove(key) {
+            shouldKeepInCache && cache.delete(key);
+            delete values[key];
+        }
+    });
 }
 
 

package/src/utils/helpers.js

@@ -57,4 +57,36 @@ export const getKey = (item, defaultKey, key) => {
 
 export const trim = function(str, char) {
     return str.replace(new RegExp(`^[${char}]+|[${char}]+$`, 'g'), '');
-}
+}
+
+export const deepClone = (value, onObservableFound) => {
+    // Primitives
+    if (value === null || typeof value !== 'object') {
+        return value;
+    }
+
+    // Dates
+    if (value instanceof Date) {
+        return new Date(value.getTime());
+    }
+
+    // Arrays
+    if (Array.isArray(value)) {
+        return value.map(item => deepClone(item));
+    }
+
+    // Observables - keep the référence
+    if (Validator.isObservable(value)) {
+        onObservableFound && onObservableFound(value);
+        return value;
+    }
+
+    // Objects
+    const cloned = {};
+    for (const key in value) {
+        if (value.hasOwnProperty(key)) {
+            cloned[key] = deepClone(value[key]);
+        }
+    }
+    return cloned;
+};

package/src/utils/validator.js

@@ -50,7 +50,7 @@ const Validator = {
         return typeof value === 'function' && value.constructor.name === 'AsyncFunction';
     },
     isObject(value) {
-        return typeof value === 'object';
+        return typeof value === 'object' && value !== null;
     },
     isJson(value) {
         return typeof value === 'object' && value !== null && !Array.isArray(value) && value.constructor.name === 'Object';

package/src/wrappers/NDElement.js

@@ -1,6 +1,9 @@
 import DocumentObserver from "./DocumentObserver";
 import PluginsManager from "../utils/plugins-manager";
 import Validator from "../utils/validator";
+import NativeDocumentError from "../errors/NativeDocumentError.js";
+import DebugManager from "../utils/debug-manager.js";
+
 import {EVENTS} from "../utils/events";
 
 export function NDElement(element) {
@@ -19,6 +22,11 @@ NDElement.prototype.ref = function(target, name) {
     return this;
 };
 
+NDElement.prototype.refSelf = function(target, name) {
+    target[name] = this;
+    return this;
+};
+
 NDElement.prototype.unmountChildren = function() {
     let element = this.$element;
     for(let i = 0, length = element.children.length; i < length; i++) {
@@ -209,4 +217,78 @@ for(const event of EVENTS) {
         captureEventWrapper(this.$element, eventName, directHandler);
         return this;
     };
-}
+}
+
+NDElement.prototype.with = function(methods) {
+    if (!methods || typeof methods !== 'object') {
+        throw new NativeDocumentError('extend() requires an object of methods');
+    }
+    if(process.env.NODE_ENV === 'development') {
+        if (!this.$localExtensions) {
+            this.$localExtensions = new Map();
+        }
+    }
+
+    for (const name in methods) {
+        const method = methods[name];
+
+        if (typeof method !== 'function') {
+            console.warn(`⚠️ extends(): "${name}" is not a function, skipping`);
+            continue;
+        }
+        if(process.env.NODE_ENV === 'development') {
+            if (this[name] && !this.$localExtensions.has(name)) {
+                DebugManager.warn('NDElement.extend', `Method "${name}" already exists and will be overwritten`);
+            }
+            this.$localExtensions.set(name, method);
+        }
+
+        this[name] = method.bind(this);
+    }
+
+    return this;
+}
+
+NDElement.extend = function(methods) {
+    if (!methods || typeof methods !== 'object') {
+        throw new NativeDocumentError('NDElement.extend() requires an object of methods');
+    }
+
+    if (Array.isArray(methods)) {
+        throw new NativeDocumentError('NDElement.extend() requires an object, not an array');
+    }
+
+    const protectedMethods = new Set([
+        'constructor', 'valueOf', '$element', '$observer',
+        'ref', 'remove', 'cleanup', 'with', 'extend', 'attach',
+        'lifecycle', 'mounted', 'unmounted', 'unmountChildren'
+    ]);
+
+    for (const name in methods) {
+        if (!methods.hasOwnProperty(name)) {
+            continue;
+        }
+
+        const method = methods[name];
+
+        if (typeof method !== 'function') {
+            DebugManager.warn('NDElement.extend', `"${name}" is not a function, skipping`);
+            continue;
+        }
+
+        if (protectedMethods.has(name)) {
+            DebugManager.error('NDElement.extend', `Cannot override protected method "${name}"`);
+            throw new NativeDocumentError(`Cannot override protected method "${name}"`);
+        }
+
+        if (NDElement.prototype[name]) {
+            DebugManager.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
+        }
+
+        NDElement.prototype[name] = method;
+    }
+
+    PluginsManager.emit('NDElementExtended', methods);
+
+    return NDElement;
+};

package/src/wrappers/NdPrototype.js

@@ -1,9 +1,19 @@
 import { NDElement } from "./NDElement";
 
-Object.defineProperty(HTMLElement.prototype, 'nd', {
+const property = {
     configurable: true,
     get() {
-        return new NDElement(this);
+        return  new NDElement(this);
+    }
+};
+
+Object.defineProperty(HTMLElement.prototype, 'nd', property);
+
+Object.defineProperty(DocumentFragment.prototype, 'nd', property);
+Object.defineProperty(NDElement.prototype, 'nd', {
+    configurable: true,
+    get: function() {
+        return this;
     }
 });
 

package/types/memoize.d.ts

@@ -1,16 +1,26 @@
 
+type OnceProxy<T> = {
+    [K in keyof T]: T[K];
+};
+
+type MemoizeProxy<T> = {
+    [key: string]: T;
+    [key: symbol]: T;
+};
+
 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 autoOnce<T extends object>(fn: () => T): OnceProxy<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>;
+export function autoMemoize<T>(fn: () => T): MemoizeProxy<T>;
+
+export function autoMemoize<T, Args extends any[]>(
+    fn: (...args: Args) => T
+): MemoizeProxy<(...args: Args) => T>;