native-document 1.0.31 → 1.0.33

package/src/utils/args-types.js

@@ -2,6 +2,9 @@ import Validator from "./validator";
 import ArgTypesError from "../errors/ArgTypesError";
 import NativeDocumentError from "../errors/NativeDocumentError";
 
+let withValidation = (fn) => fn;
+let ArgTypes = {};
+
 /**
  *
  * @type {{string: (function(*): {name: *, type: string, validate: function(*): boolean}),
@@ -19,91 +22,117 @@ import NativeDocumentError from "../errors/NativeDocumentError";
  *      validate: function(*): boolean})
  * }}
  */
-export const ArgTypes = {
-    string: (name) => ({ name, type: 'string', validate: (v) => Validator.isString(v) }),
-    number: (name) => ({ name, type: 'number', validate: (v) => Validator.isNumber(v) }),
-    boolean: (name) => ({ name, type: 'boolean', validate: (v) => Validator.isBoolean(v) }),
-    observable: (name) => ({ name, type: 'observable', validate: (v) => Validator.isObservable(v) }),
-    element: (name) => ({ name, type: 'element', validate: (v) => Validator.isElement(v) }),
-    function: (name) => ({ name, type: 'function', validate: (v) => Validator.isFunction(v) }),
-    object: (name) => ({ name, type: 'object', validate: (v) => (Validator.isObject(v)) }),
-    objectNotNull: (name) => ({ name, type: 'object', validate: (v) => (Validator.isObject(v) && v !== null) }),
-    children: (name) => ({ name, type: 'children', validate: (v) => Validator.validateChildren(v) }),
-    attributes: (name) => ({ name, type: 'attributes', validate: (v) => Validator.validateAttributes(v) }),
-
-    // Optional arguments
-    optional: (argType) => ({ ...argType, optional: true }),
-
-    // Union types
-    oneOf: (name, ...argTypes) => ({
-        name,
-        type: 'oneOf',
-        types: argTypes,
-        validate: (v) => argTypes.some(type => type.validate(v))
-    })
-};
+if(process.env.NODE_ENV === 'development') {
+    ArgTypes = {
+        string: (name) => ({ name, type: 'string', validate: (v) => Validator.isString(v) }),
+        number: (name) => ({ name, type: 'number', validate: (v) => Validator.isNumber(v) }),
+        boolean: (name) => ({ name, type: 'boolean', validate: (v) => Validator.isBoolean(v) }),
+        observable: (name) => ({ name, type: 'observable', validate: (v) => Validator.isObservable(v) }),
+        element: (name) => ({ name, type: 'element', validate: (v) => Validator.isElement(v) }),
+        function: (name) => ({ name, type: 'function', validate: (v) => Validator.isFunction(v) }),
+        object: (name) => ({ name, type: 'object', validate: (v) => (Validator.isObject(v)) }),
+        objectNotNull: (name) => ({ name, type: 'object', validate: (v) => (Validator.isObject(v) && v !== null) }),
+        children: (name) => ({ name, type: 'children', validate: (v) => Validator.validateChildren(v) }),
+        attributes: (name) => ({ name, type: 'attributes', validate: (v) => Validator.validateAttributes(v) }),
 
-/**
- *
- * @param {Array} args
- * @param {Array} argSchema
- * @param {string} fnName
- */
-const validateArgs = (args, argSchema, fnName = 'Function') => {
-    if (!argSchema) return;
+        // Optional arguments
+        optional: (argType) => ({ ...argType, optional: true }),
 
-    const errors = [];
+        // Union types
+        oneOf: (name, ...argTypes) => ({
+            name,
+            type: 'oneOf',
+            types: argTypes,
+            validate: (v) => argTypes.some(type => type.validate(v))
+        })
+    };
 
-    // Check the number of arguments
-    const requiredCount = argSchema.filter(arg => !arg.optional).length;
-    if (args.length < requiredCount) {
-        errors.push(`${fnName}: Expected at least ${requiredCount} arguments, got ${args.length}`);
-    }
 
-    // Validate each argument
-    argSchema.forEach((schema, index) => {
-        const position = index + 1;
-        const value = args[index];
+    /**
+     *
+     * @param {Array} args
+     * @param {Array} argSchema
+     * @param {string} fnName
+     */
+    const validateArgs = (args, argSchema, fnName = 'Function') => {
+        if (!argSchema) return;
 
-        if (value === undefined) {
-            if (!schema.optional) {
-                errors.push(`${fnName}: Missing required argument '${schema.name}' at position ${position}`);
+        const errors = [];
+
+        // Check the number of arguments
+        const requiredCount = argSchema.filter(arg => !arg.optional).length;
+        if (args.length < requiredCount) {
+            errors.push(`${fnName}: Expected at least ${requiredCount} arguments, got ${args.length}`);
+        }
+
+        // Validate each argument
+        argSchema.forEach((schema, index) => {
+            const position = index + 1;
+            const value = args[index];
+
+            if (value === undefined) {
+                if (!schema.optional) {
+                    errors.push(`${fnName}: Missing required argument '${schema.name}' at position ${position}`);
+                }
+                return;
             }
-            return;
+
+            if (!schema.validate(value)) {
+                const valueTypeOf = value?.constructor?.name || typeof value;
+                errors.push(`${fnName}: Invalid argument '${schema.name}' at position ${position}, expected ${schema.type}, got ${valueTypeOf}`);
+            }
+        });
+
+        if (errors.length > 0) {
+            throw new ArgTypesError(`Argument validation failed`, errors);
         }
+    };
+
+
 
-        if (!schema.validate(value)) {
-            const valueTypeOf = value?.constructor?.name || typeof value;
-            errors.push(`${fnName}: Invalid argument '${schema.name}' at position ${position}, expected ${schema.type}, got ${valueTypeOf}`);
+    /**
+     * @param {Function} fn
+     * @param {Array} argSchema
+     * @param {string} fnName
+     * @returns {Function}
+     */
+    withValidation = (fn, argSchema, fnName = 'Function') => {
+        if(!Validator.isArray(argSchema)) {
+            throw new NativeDocumentError('withValidation : argSchema must be an array');
         }
-    });
+        return function(...args) {
+            validateArgs(args, argSchema, fn.name || fnName);
+            return fn.apply(this, args);
+        };
+    };
+}
+if(process.env.NODE_ENV === 'production') {
+    ArgTypes = {
+        string: () => true,
+        number: () => true,
+        boolean: () => true,
+        observable: () => true,
+        element: () => true,
+        function: () => true,
+        object: () => true,
+        objectNotNull: () => true,
+        children: () => true,
+        attributes: () => true,
 
-    if (errors.length > 0) {
-        throw new ArgTypesError(`Argument validation failed`, errors);
-    }
-};
+        // Optional arguments
+        optional: () => true,
 
-/**
- * @param {Function} fn
- * @param {Array} argSchema
- * @param {string} fnName
- * @returns {Function}
- */
-export const withValidation = (fn, argSchema, fnName = 'Function') => {
-    if(!Validator.isArray(argSchema)) {
-        throw new NativeDocumentError('withValidation : argSchema must be an array');
-    }
-    return function(...args) {
-        validateArgs(args, argSchema, fn.name || fnName);
-        return fn.apply(this, args);
+        // Union types
+        oneOf: () => true
     };
-};
+}
 
 export const normalizeComponentArgs = function(props, children = null) {
-    if(!Validator.isJson(props)) {
+    if(!Validator.isJson(props) || props?.$hydrate) {
         const temp = children;
         children = props;
         props = temp;
     }
     return { props, children };
-}
+}
+export { ArgTypes, withValidation };

package/src/utils/prototypes.js

@@ -1,12 +1,29 @@
 import {withValidation} from "./args-types.js";
 import {Observable} from "../data/Observable";
 import Validator from "./validator";
+import {NDElement} from "../wrappers/NDElement";
 
 
 Function.prototype.args = function(...args) {
     return withValidation(this, args);
 };
 
+Function.prototype.cached = function(...args) {
+    let $cache = null;
+    let  getCache = function(){ return $cache; };
+    return () => {
+        if(!$cache) {
+            $cache = this.apply(this, args);
+            if($cache.cloneNode) {
+                getCache = function() { return $cache.cloneNode(true); };
+            } else if($cache.$element) {
+                getCache = function() { return new NDElement($cache.$element.cloneNode(true)); };
+            }
+        }
+        return getCache();
+    };
+};
+
 Function.prototype.errorBoundary = function(callback) {
     return (...args)  => {
         try {

package/src/wrappers/AttributesWrapper.js

@@ -23,6 +23,10 @@ function bindClassAttribute(element, data) {
             });
             continue;
         }
+        if(value.$hydrate) {
+            value.$hydrate(element, className);
+            continue;
+        }
         element.classList.toggle(className, value)
     }
 }

package/src/wrappers/ElementCreator.js

@@ -21,11 +21,22 @@ export const ElementCreator = {
      */
     createObservableNode(parent, observable) {
         const text = ElementCreator.createTextNode();
-        observable.subscribe(value => text.nodeValue = String(value));
+        observable.subscribe(value => text.nodeValue = value);
         text.nodeValue = observable.val();
         parent && parent.appendChild(text);
         return text;
     },
+    /**
+     *
+     * @param {HTMLElement|DocumentFragment} parent
+     * @param {{$hydrate: Function}} item
+     * @returns {Text}
+     */
+    createHydratableNode(parent, item) {
+        const text = ElementCreator.createTextNode();
+        item.$hydrate(text);
+        return text;
+    },
 
     /**
      *
@@ -35,7 +46,7 @@ export const ElementCreator = {
      */
     createStaticTextNode(parent, value) {
         let text = ElementCreator.createTextNode();
-        text.nodeValue = String(value);
+        text.nodeValue = value;
         parent && parent.appendChild(text);
         return text;
     },
@@ -104,6 +115,9 @@ export const ElementCreator = {
             PluginsManager.emit('BeforeProcessComponent', child);
             return this.getChild(child());
         }
+        if(child?.$hydrate) {
+            return ElementCreator.createHydratableNode(null, child);
+        }
         return ElementCreator.createStaticTextNode(null, child);
     },
     /**

package/src/wrappers/HtmlElementWrapper.js

@@ -1,5 +1,4 @@
 import Validator from "../utils/validator";
-import DebugManager from "../utils/debug-manager";
 import {ElementCreator} from "./ElementCreator";
 import './NdPrototype';
 import {normalizeComponentArgs} from "../utils/args-types";
@@ -16,6 +15,17 @@ export const createTextNode = function(value) {
 };
 
 
+function createHtmlElement($tagName, _attributes, _children = null, customWrapper) {
+    const { props: attributes, children = null } = normalizeComponentArgs(_attributes, _children);
+    const element = ElementCreator.createElement($tagName);
+    const finalElement = (typeof customWrapper === 'function') ? customWrapper(element) : element;
+
+    ElementCreator.processAttributes(finalElement, attributes);
+    ElementCreator.processChildren(children, finalElement);
+
+    return ElementCreator.setup(finalElement, attributes, customWrapper);
+}
+
 /**
  *
  * @param {string} name
@@ -23,21 +33,6 @@ export const createTextNode = function(value) {
  * @returns {Function}
  */
 export default function HtmlElementWrapper(name, customWrapper) {
-    const $tagName = name.toLowerCase();
-
-    return function(_attributes, _children = null) {
-        try {
-            const { props: attributes, children = null } = normalizeComponentArgs(_attributes, _children);
-            const element = ElementCreator.createElement($tagName);
-            const finalElement = (typeof customWrapper === 'function') ? customWrapper(element) : element;
-
-            ElementCreator.processAttributes(finalElement, attributes);
-            ElementCreator.processChildren(children, finalElement);
-
-            return ElementCreator.setup(finalElement, attributes, customWrapper);
-        } catch (error) {
-            DebugManager.error('ElementCreation', `Error creating ${$tagName}`, error);
-        }
-    };
-}
+    return (_attributes, _children = null) => createHtmlElement(name.toLowerCase(), _attributes, _children, customWrapper);
+};
 

package/src/wrappers/NDElement.js

@@ -91,4 +91,9 @@ NDElement.prototype.htmlElement = function() {
     return this.$element;
 };
 
-NDElement.prototype.node = NDElement.prototype.htmlElement;
+NDElement.prototype.node = NDElement.prototype.htmlElement;
+
+NDElement.prototype.attach = function(methodName, bindingHydrator) {
+    bindingHydrator.$hydrate(this.$element, methodName);
+    return this.$element;
+};

package/src/wrappers/TemplateCloner.js

@@ -0,0 +1,129 @@
+import {ElementCreator} from "./ElementCreator";
+import {createTextNode} from "./HtmlElementWrapper";
+
+const cloneBindingsDataCache = new WeakMap();
+
+
+const bindAttributes = (node, bindDingData, data) => {
+    if(!bindDingData) {
+        return null;
+    }
+    const attributes = { };
+    if(bindDingData.attributes) {
+        for (const attr in bindDingData.attributes) {
+            attributes[attr] = bindDingData.attributes[attr](...data);
+        }
+    }
+
+    if(bindDingData.classes) {
+        attributes.class = {};
+        for (const className in bindDingData.classes) {
+            attributes.class[className] = bindDingData.classes[className](...data);
+        }
+    }
+
+    if(bindDingData.styles) {
+        attributes.style = {};
+        for (const property in bindDingData.styles) {
+            attributes.style[property] = bindDingData.styles[property](...data);
+        }
+    }
+
+    if(Object.keys(attributes)) {
+        ElementCreator.processAttributes(node, attributes);
+        return attributes;
+    }
+
+    return null;
+};
+
+
+const bindAttachesMethods = function(node, bindDingData, data) {
+    if(!bindDingData?.attaches) {
+        return null;
+    }
+    for(const methodName in bindDingData.attaches) {
+        node.nd[methodName](function(...args) {
+            bindDingData.attaches[methodName].call(this, ...[...args, ...data]);
+        });
+    }
+}
+
+export function TemplateCloner($fn) {
+    let $node = null;
+
+    const clone = (node, data) => {
+        const bindDingData = cloneBindingsDataCache.get(node);
+        if(node instanceof Text) {
+            if(bindDingData?.value) {
+                return bindDingData.value(data);
+            }
+            return node.cloneNode(true);
+        }
+        const nodeCloned = node.cloneNode();
+        bindAttributes(nodeCloned, bindDingData, data);
+        bindAttachesMethods(nodeCloned, bindDingData, data);
+
+        for(let i = 0, length = node.childNodes.length; i < length; i++) {
+            const childNode = node.childNodes[i];
+            const childNodeCloned = clone(childNode, data);
+            nodeCloned.appendChild(childNodeCloned);
+        }
+        return nodeCloned;
+    };
+
+    this.clone = (data) => {
+        if(!$node) {
+            $node = $fn(this);
+        }
+        return clone($node, data);
+    };
+
+    const createBinding = (hydrateFunction, target) => {
+        return {
+            $hydrate : function(element, property) {
+                if(!cloneBindingsDataCache.has(element)) {
+                    // { classes, styles, attributes, value, attaches }
+                    cloneBindingsDataCache.set(element, {});
+                }
+                const hydrationState = cloneBindingsDataCache.get(element);
+                if(target === 'value') {
+                    hydrationState.value = hydrateFunction;
+                    return;
+                }
+                hydrationState[target] = hydrationState[target] || {};
+                hydrationState[target][property] = hydrateFunction;
+            }
+        }
+    };
+
+    this.style = (fn) => {
+        return createBinding(fn, 'styles');
+    };
+    this.class = (fn) => {
+        return createBinding(fn, 'classes');
+    };
+    this.value = (fn) => {
+        return createBinding(function(data) {
+            return createTextNode(fn(...data));
+        }, 'value');
+    };
+    this.attr = (fn) => {
+        return createBinding(fn, 'attributes');
+    };
+    this.attach = (fn) => {
+        return createBinding(fn, 'attaches');
+    };
+}
+
+export function useCache(fn) {
+    let $cache = null;
+
+    return function(...args) {
+        if(!$cache) {
+            $cache = new TemplateCloner(fn);
+        }
+
+        return $cache.clone(args);
+    };
+}

package/types/elements.d.ts

@@ -1,5 +1,6 @@
 // DOM elements and components type definitions - Version complète
 import { ObservableItem } from './observable';
+import {BindingHydrator} from "./template-cloner";
 
 export interface NDElement {
     readonly __$isNDElement: true;
@@ -16,6 +17,7 @@ export interface NDElement {
 
     htmlElement(): HTMLElement;
     node(): HTMLElement;
+    attach(methodeName: string, bindingHydrator: BindingHydrator): HTMLElement;
 
     // Mouse Events
     onClick(callback: (event: MouseEvent) => void): this;

package/types/template-cloner.ts

@@ -0,0 +1,36 @@
+
+interface BindingData {
+    attributes?: Record<string, (...data: any[]) => any>;
+    classes?: Record<string, (...data: any[]) => any>;
+    styles?: Record<string, (...data: any[]) => any>;
+    value?: (...data: any[]) => any;
+    events?: Record<string, (this: Element, event: Event, ...data: any[]) => void>;
+}
+
+interface ProcessedAttributes {
+    class?: Record<string, any>;
+    style?: Record<string, any>;
+    [key: string]: any;
+}
+
+export interface BindingHydrator {
+    $hydrate: (element: Element | Text, property?: string) => void;
+}
+
+export type TemplateBuilder = (templateCloner: TemplateCloner) => Node;
+
+type CachedTemplateFunction = (...args: any[]) => Node;
+
+export declare class TemplateCloner {
+    constructor($fn: TemplateBuilder);
+
+    clone(data: any[]): Node;
+
+    style(fn: (...data: any[]) => any): BindingHydrator;
+    class(fn: (...data: any[]) => any): BindingHydrator;
+    value(fn: (...data: any[]) => any): BindingHydrator;
+    attr(fn: (...data: any[]) => any): BindingHydrator;
+    event(fn: (event: Event, ...data: any[]) => void): BindingHydrator;
+}
+
+export declare function useCache(fn: TemplateBuilder): CachedTemplateFunction;