native-document 1.0.31 → 1.0.33

package/dist/native-document.dev.js

@@ -264,14 +264,24 @@ var NativeDocument = (function (exports) {
         const $currentValue = this.$currentValue;
 
         if($watchers.has($currentValue)) {
-            $watchers.get($currentValue).forEach(callback => {
-                callback.set ? callback.set(true) : callback(true);
-            });
+            const $currentValueCallbacks = $watchers.get($currentValue);
+            if(!Validator.isArray($currentValueCallbacks)) {
+                $currentValueCallbacks.set ? $currentValueCallbacks.set(true) : $currentValueCallbacks(true);
+            } else {
+                $currentValueCallbacks.forEach(callback => {
+                    callback.set ? callback.set(true) : callback(true);
+                });
+            }
         }
         if($watchers.has($previousValue)) {
-            $watchers.get($previousValue).forEach(callback => {
-                callback.set ? callback.set(false) : callback(false);
-            });
+            const $previousValueCallbacks = $watchers.get($previousValue);
+            if(typeof $previousValueCallbacks === "function") {
+                $previousValueCallbacks.set ? $previousValueCallbacks.set(false) : $previousValueCallbacks(false);
+            } else {
+                $previousValueCallbacks.forEach(callback => {
+                    callback.set ? callback.set(false) : callback(false);
+                });
+            }
         }
     };
 
@@ -309,6 +319,7 @@ var NativeDocument = (function (exports) {
         this.$currentValue = newValue;
         PluginsManager.emit('ObservableBeforeChange', this);
         this.trigger();
+        this.$previousValue = null;
         PluginsManager.emit('ObservableAfterChange', this);
     };
 
@@ -322,7 +333,9 @@ var NativeDocument = (function (exports) {
         this.$currentValue = null;
         if(this.$watchers) {
             for (const [_, watchValueList] of this.$watchers) {
-                watchValueList.splice(0);
+                if(Validator.isArray(watchValueList)) {
+                    watchValueList.splice(0);
+                }
             }
         }
         this.$watchers?.clear();
@@ -368,17 +381,25 @@ var NativeDocument = (function (exports) {
         this.$watchers = this.$watchers ?? new Map();
 
         let watchValueList = this.$watchers.get(value);
+
         if(!watchValueList) {
-            watchValueList = [];
+            this.$watchers.set(value, callback);
+        } else if(!Validator.isArray(watchValueList)) {
+            watchValueList = [watchValueList];
             this.$watchers.set(value, watchValueList);
+            return;
+        } else {
+            watchValueList.push(callback);
         }
 
-        watchValueList.push(callback);
         this.assocTrigger();
         return () => {
             const index = watchValueList.indexOf(callback);
             watchValueList?.splice(index, 1);
-            if(watchValueList.size === 0) {
+            if(watchValueList.size === 1) {
+                this.$watchers.set(value, watchValueList[0]);
+            }
+            else if(watchValueList.size === 0) {
                 this.$watchers?.delete(value);
                 watchValueList = null;
             }
@@ -691,6 +712,11 @@ var NativeDocument = (function (exports) {
 
     NDElement.prototype.node = NDElement.prototype.htmlElement;
 
+    NDElement.prototype.attach = function(methodName, bindingHydrator) {
+        bindingHydrator.$hydrate(this.$element, methodName);
+        return this.$element;
+    };
+
     const Validator = {
         isObservable(value) {
             return value instanceof ObservableItem || value instanceof ObservableChecker || value?.__$isObservable;
@@ -809,7 +835,7 @@ var NativeDocument = (function (exports) {
         }
     };
 
-    function Anchor(name) {
+    function Anchor(name, isUniqueChild = false) {
         const element = document.createDocumentFragment();
 
         const anchorStart = document.createComment('Anchor Start : '+name);
@@ -822,14 +848,25 @@ var NativeDocument = (function (exports) {
         element.nativeAppendChild = element.appendChild;
 
         const insertBefore = function(parent, child, target) {
+            const element = Validator.isElement(child) ? child : ElementCreator.getChild(child);
             if(parent === element) {
-                parent.nativeInsertBefore(ElementCreator.getChild(child), target);
+                parent.nativeInsertBefore(element, target);
                 return;
             }
-            parent.insertBefore(ElementCreator.getChild(child), target);
+            if(isUniqueChild || target === anchorEnd) {
+                parent.append(element,  target);
+                return;
+            }
+            parent.insertBefore(element, target);
         };
 
         element.appendElement = function(child, before = null) {
+            if(isUniqueChild) {
+                (before && before !== anchorEnd)
+                    ? anchorEnd.parentNode.insertBefore(child, anchorEnd)
+                    : anchorEnd.parentNode.append(child, anchorEnd);
+                return;
+            }
             if(anchorEnd.parentNode === element) {
                 anchorEnd.parentNode.nativeInsertBefore(child, before || anchorEnd);
                 return;
@@ -844,14 +881,6 @@ var NativeDocument = (function (exports) {
                 return;
             }
             before = before ?? anchorEnd;
-            if(Validator.isArray(child)) {
-                const fragment = document.createDocumentFragment();
-                for(let i = 0, length = child.length; i < length; i++) {
-                    fragment.appendChild(ElementCreator.getChild(child[i]));
-                }
-                insertBefore(parent, fragment, before);
-                return element;
-            }
             insertBefore(parent, child, before);
         };
 
@@ -860,7 +889,7 @@ var NativeDocument = (function (exports) {
             if(parent === element) {
                 return;
             }
-            if(parent.firstChild === anchorStart && parent.lastChild === anchorEnd) {
+            if(isUniqueChild || (parent.firstChild === anchorStart && parent.lastChild === anchorEnd)) {
                 parent.replaceChildren(anchorStart, anchorEnd);
                 return;
             }
@@ -879,6 +908,10 @@ var NativeDocument = (function (exports) {
             if(parent === element) {
                 return;
             }
+            if(isUniqueChild) {
+                parent.replaceChildren(anchorEnd, anchorEnd);
+                return;
+            }
             let itemToRemove = anchorStart.nextSibling, tempItem;
             while(itemToRemove !== anchorEnd) {
                 tempItem = itemToRemove.nextSibling;
@@ -898,7 +931,7 @@ var NativeDocument = (function (exports) {
             if(!parent) {
                 return;
             }
-            if(parent.firstChild === anchorStart && parent.lastChild === anchorEnd) {
+            if(isUniqueChild || (parent.firstChild === anchorStart && parent.lastChild === anchorEnd)) {
                 parent.replaceChildren(anchorStart, child, anchorEnd);
                 return;
             }
@@ -995,6 +1028,10 @@ var NativeDocument = (function (exports) {
                 });
                 continue;
             }
+            if(value.$hydrate) {
+                value.$hydrate(element, className);
+                continue;
+            }
             element.classList.toggle(className, value);
         }
     }
@@ -1142,11 +1179,22 @@ var NativeDocument = (function (exports) {
          */
         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;
+        },
 
         /**
          *
@@ -1156,7 +1204,7 @@ var NativeDocument = (function (exports) {
          */
         createStaticTextNode(parent, value) {
             let text = ElementCreator.createTextNode();
-            text.nodeValue = String(value);
+            text.nodeValue = value;
             parent && parent.appendChild(text);
             return text;
         },
@@ -1225,6 +1273,9 @@ var NativeDocument = (function (exports) {
                 PluginsManager.emit('BeforeProcessComponent', child);
                 return this.getChild(child());
             }
+            if(child?.$hydrate) {
+                return ElementCreator.createHydratableNode(null, child);
+            }
             return ElementCreator.createStaticTextNode(null, child);
         },
         /**
@@ -1270,6 +1321,9 @@ var NativeDocument = (function (exports) {
         }
     }
 
+    exports.withValidation = (fn) => fn;
+    exports.ArgTypes = {};
+
     /**
      *
      * @type {{string: (function(*): {name: *, type: string, validate: function(*): boolean}),
@@ -1287,88 +1341,93 @@ var NativeDocument = (function (exports) {
      *      validate: function(*): boolean})
      * }}
      */
-    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))
-        })
-    };
+    {
+        exports.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))
+            })
+        };
 
-    /**
-     *
-     * @param {Array} args
-     * @param {Array} argSchema
-     * @param {string} fnName
-     */
-    const validateArgs = (args, argSchema, fnName = 'Function') => {
-        if (!argSchema) return;
 
-        const errors = [];
+        /**
+         *
+         * @param {Array} args
+         * @param {Array} argSchema
+         * @param {string} fnName
+         */
+        const validateArgs = (args, argSchema, fnName = 'Function') => {
+            if (!argSchema) return;
+
+            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}`);
-        }
+            // 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];
+            // 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;
+                }
 
-            if (value === undefined) {
-                if (!schema.optional) {
-                    errors.push(`${fnName}: Missing required argument '${schema.name}' at position ${position}`);
+                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}`);
                 }
-                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 (errors.length > 0) {
-            throw new ArgTypesError(`Argument validation failed`, errors);
-        }
-    };
 
-    /**
-     * @param {Function} fn
-     * @param {Array} argSchema
-     * @param {string} fnName
-     * @returns {Function}
-     */
-    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);
+
+        /**
+         * @param {Function} fn
+         * @param {Array} argSchema
+         * @param {string} fnName
+         * @returns {Function}
+         */
+        exports.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);
+            };
         };
-    };
+    }
 
     const normalizeComponentArgs = function(props, children = null) {
-        if(!Validator.isJson(props)) {
+        if(!Validator.isJson(props) || props?.$hydrate) {
             const temp = children;
             children = props;
             props = temp;
@@ -1376,6 +1435,29 @@ var NativeDocument = (function (exports) {
         return { props, children };
     };
 
+    /**
+     *
+     * @param {*} value
+     * @returns {Text}
+     */
+    const createTextNode = function(value) {
+        return (Validator.isObservable(value))
+            ? ElementCreator.createObservableNode(null, value)
+            : ElementCreator.createStaticTextNode(null, 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
@@ -1383,26 +1465,154 @@ var NativeDocument = (function (exports) {
      * @returns {Function}
      */
     function HtmlElementWrapper(name, customWrapper) {
-        const $tagName = name.toLowerCase();
+        return (_attributes, _children = null) => createHtmlElement(name.toLowerCase(), _attributes, _children, customWrapper);
+    }
 
-        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;
+    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]);
+            });
+        }
+    };
+
+    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;
+        };
 
-                ElementCreator.processAttributes(finalElement, attributes);
-                ElementCreator.processChildren(children, finalElement);
+        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;
+                }
+            }
+        };
 
-                return ElementCreator.setup(finalElement, attributes, customWrapper);
-            } catch (error) {
-                DebugManager$1.error('ElementCreation', `Error creating ${$tagName}`, error);
+        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');
+        };
+    }
+
+    function useCache(fn) {
+        let $cache = null;
+
+        return function(...args) {
+            if(!$cache) {
+                $cache = new TemplateCloner(fn);
             }
+
+            return $cache.clone(args);
         };
     }
 
     Function.prototype.args = function(...args) {
-        return withValidation(this, args);
+        return exports.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) {
@@ -1514,7 +1724,8 @@ var NativeDocument = (function (exports) {
         };
 
         observer.merge = function(values) {
-            observer.set([...observer.val(), ...values]);
+            observer.$value.push(...values);
+            observer.trigger({ action: 'merge',  args: values });
         };
 
         observer.populateAndRender = function(iteration, callback) {
@@ -2009,20 +2220,15 @@ var NativeDocument = (function (exports) {
                 cache.delete(keyId);
             }
 
-            try {
-                const indexObserver = isIndexRequired ? Observable(indexKey) : null;
-                let child = ElementCreator.getChild(callback(item, indexObserver));
-                cache.set(keyId, {
-                    keyId,
-                    child: child,
-                    indexObserver: (indexObserver ? new WeakRef(indexObserver) : null)
-                });
-                keysCache.set(item, keyId);
-                return child;
-            } catch (e) {
-                DebugManager$1.error('ForEach', `Error creating element for key ${keyId}` , e);
-                throw e;
-            }
+            const indexObserver = isIndexRequired ? Observable(indexKey) : null;
+            let child = ElementCreator.getChild(callback(item, indexObserver));
+            cache.set(keyId, {
+                keyId,
+                child: child,
+                indexObserver: (indexObserver ? new WeakRef(indexObserver) : null)
+            });
+            keysCache.set(item, keyId);
+            return child;
         };
         const getChildByKey = function(keyId) {
             const cacheItem = cache.get(keyId);
@@ -2086,11 +2292,7 @@ var NativeDocument = (function (exports) {
                 element.appendElement(fragment, blockEnd);
             },
             removeOne(element, index) {
-                let child = getItemChild(element);
-                if(child) {
-                    removeCacheItemByKey(getItemKey(element, index), true);
-                }
-                child = null;
+                removeCacheItemByKey(getItemKey(element, index), true);
             },
             clear,
             merge(items) {
@@ -3376,18 +3578,19 @@ var NativeDocument = (function (exports) {
         Router: Router
     });
 
-    exports.ArgTypes = ArgTypes;
     exports.ElementCreator = ElementCreator;
     exports.HtmlElementWrapper = HtmlElementWrapper;
     exports.NDElement = NDElement;
     exports.Observable = Observable;
     exports.Store = Store;
+    exports.TemplateCloner = TemplateCloner;
     exports.classPropertyAccumulator = classPropertyAccumulator;
+    exports.createTextNode = createTextNode;
     exports.cssPropertyAccumulator = cssPropertyAccumulator;
     exports.elements = elements;
     exports.normalizeComponentArgs = normalizeComponentArgs;
     exports.router = router;
-    exports.withValidation = withValidation;
+    exports.useCache = useCache;
 
     return exports;