native-document 1.0.109 → 1.0.111

package/dist/native-document.dev.js

@@ -1,10 +1,10 @@
 var NativeDocument = (function (exports) {
     'use strict';
 
-    let DebugManager$1 = {};
+    let DebugManager = {};
 
     {
-        DebugManager$1 = {
+        DebugManager = {
             enabled: false,
 
             enable() {
@@ -35,7 +35,7 @@ var NativeDocument = (function (exports) {
         };
 
     }
-    var DebugManager = DebugManager$1;
+    var DebugManager$1 = DebugManager;
 
     class NativeDocumentError extends Error {
         constructor(message, context = {}) {
@@ -313,10 +313,10 @@ var NativeDocument = (function (exports) {
         subtree: true,
     });
 
-    let PluginsManager$1 = null;
+    let PluginsManager = null;
 
     {
-        PluginsManager$1 = (function() {
+        PluginsManager = (function() {
 
             const $plugins = new Map();
             const $pluginByEvents = new Map();
@@ -382,7 +382,7 @@ var NativeDocument = (function (exports) {
                             try{
                                 callback.call(plugin, ...data);
                             } catch (error) {
-                                DebugManager.error('Plugin Manager', `Error in plugin ${plugin.$name} for event ${eventName}`, error);
+                                DebugManager$1.error('Plugin Manager', `Error in plugin ${plugin.$name} for event ${eventName}`, error);
                             }
                         }
                     }
@@ -391,12 +391,12 @@ var NativeDocument = (function (exports) {
         }());
     }
 
-    var PluginsManager = PluginsManager$1;
+    var PluginsManager$1 = PluginsManager;
 
     function NDElement(element) {
         this.$element = element;
         {
-            PluginsManager.emit('NDElementCreated', element, this);
+            PluginsManager$1.emit('NDElementCreated', element, this);
         }
     }
 
@@ -576,7 +576,7 @@ var NativeDocument = (function (exports) {
             }
             {
                 if (this[name] && !this.$localExtensions.has(name)) {
-                    DebugManager.warn('NDElement.extend', `Method "${name}" already exists and will be overwritten`);
+                    DebugManager$1.warn('NDElement.extend', `Method "${name}" already exists and will be overwritten`);
                 }
                 this.$localExtensions.set(name, method);
             }
@@ -627,23 +627,23 @@ var NativeDocument = (function (exports) {
             const method = methods[name];
 
             if (typeof method !== 'function') {
-                DebugManager.warn('NDElement.extend', `"${name}" is not a function, skipping`);
+                DebugManager$1.warn('NDElement.extend', `"${name}" is not a function, skipping`);
                 continue;
             }
 
             if (protectedMethods.has(name)) {
-                DebugManager.error('NDElement.extend', `Cannot override protected method "${name}"`);
+                DebugManager$1.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}"`);
+                DebugManager$1.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
             }
 
             NDElement.prototype[name] = method;
         }
         {
-            PluginsManager.emit('NDElementExtended', methods);
+            PluginsManager$1.emit('NDElementExtended', methods);
         }
 
         return NDElement;
@@ -656,12 +656,11 @@ var NativeDocument = (function (exports) {
         DOCUMENT_FRAGMENT: 11
     };
 
-    const VALID_TYPES = {
-        [COMMON_NODE_TYPES.ELEMENT]: true,
-        [COMMON_NODE_TYPES.TEXT]: true,
-        [COMMON_NODE_TYPES.DOCUMENT_FRAGMENT]: true,
-        [COMMON_NODE_TYPES.COMMENT]: true
-    };
+    const VALID_TYPES = [];
+    VALID_TYPES[COMMON_NODE_TYPES.ELEMENT] = true;
+    VALID_TYPES[COMMON_NODE_TYPES.TEXT] = true;
+    VALID_TYPES[COMMON_NODE_TYPES.DOCUMENT_FRAGMENT] = true;
+    VALID_TYPES[COMMON_NODE_TYPES.COMMENT] = true;
 
     const Validator = {
         isObservable(value) {
@@ -795,7 +794,7 @@ var NativeDocument = (function (exports) {
             const foundReserved = Object.keys(attributes).filter(key => reserved.includes(key));
 
             if (foundReserved.length > 0) {
-                DebugManager.warn('Validator', `Reserved attributes found: ${foundReserved.join(', ')}`);
+                DebugManager$1.warn('Validator', `Reserved attributes found: ${foundReserved.join(', ')}`);
             }
 
             return attributes;
@@ -846,7 +845,7 @@ var NativeDocument = (function (exports) {
         anchorFragment.appendChild = function(child, before = null) {
             const parent = anchorEnd.parentNode;
             if(!parent) {
-                DebugManager.error('Anchor', 'Anchor : parent not found', child);
+                DebugManager$1.error('Anchor', 'Anchor : parent not found', child);
                 return;
             }
             before = before ?? anchorEnd;
@@ -1040,7 +1039,7 @@ var NativeDocument = (function (exports) {
                     }
                 }
                 if (cleanedCount > 0) {
-                    DebugManager.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
+                    DebugManager$1.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
                 }
             }
         };
@@ -1242,7 +1241,7 @@ var NativeDocument = (function (exports) {
         const $getStoreOrThrow = (method, name) => {
             const item = $stores.get(name);
             if (!item) {
-                DebugManager.error('Store', `Store.${method}('${name}') : store not found. Did you call Store.create('${name}') first?`);
+                DebugManager$1.error('Store', `Store.${method}('${name}') : store not found. Did you call Store.create('${name}') first?`);
                 throw new NativeDocumentError(
                     `Store.${method}('${name}') : store not found.`
                 );
@@ -1255,7 +1254,7 @@ var NativeDocument = (function (exports) {
          */
         const $applyReadOnly = (observer, name, context) => {
             const readOnlyError = (method) => () => {
-                DebugManager.error('Store', `Store.${context}('${name}') is read-only. '${method}()' is not allowed.`);
+                DebugManager$1.error('Store', `Store.${context}('${name}') is read-only. '${method}()' is not allowed.`);
                 throw new NativeDocumentError(
                     `Store.${context}('${name}') is read-only.`
                 );
@@ -1286,7 +1285,7 @@ var NativeDocument = (function (exports) {
              */
             create(name, value) {
                 if ($stores.has(name)) {
-                    DebugManager.warn('Store', `Store.create('${name}') : a store with this name already exists. Use Store.get('${name}') to retrieve it.`);
+                    DebugManager$1.warn('Store', `Store.create('${name}') : a store with this name already exists. Use Store.get('${name}') to retrieve it.`);
                     throw new NativeDocumentError(
                         `Store.create('${name}') : a store with this name already exists.`
                     );
@@ -1307,7 +1306,7 @@ var NativeDocument = (function (exports) {
              */
             createResettable(name, value) {
                 if ($stores.has(name)) {
-                    DebugManager.warn('Store', `Store.createResettable('${name}') : a store with this name already exists.`);
+                    DebugManager$1.warn('Store', `Store.createResettable('${name}') : a store with this name already exists.`);
                     throw new NativeDocumentError(
                         `Store.createResettable('${name}') : a store with this name already exists.`
                     );
@@ -1343,7 +1342,7 @@ var NativeDocument = (function (exports) {
              */
             createComposed(name, computation, dependencies) {
                 if ($stores.has(name)) {
-                    DebugManager.warn('Store', `Store.createComposed('${name}') : a store with this name already exists.`);
+                    DebugManager$1.warn('Store', `Store.createComposed('${name}') : a store with this name already exists.`);
                     throw new NativeDocumentError(
                         `Store.createComposed('${name}') : a store with this name already exists.`
                     );
@@ -1366,7 +1365,7 @@ var NativeDocument = (function (exports) {
                     }
                     const depItem = $stores.get(depName);
                     if (!depItem) {
-                        DebugManager.error('Store', `Store.createComposed('${name}') : dependency '${depName}' not found. Create it first.`);
+                        DebugManager$1.error('Store', `Store.createComposed('${name}') : dependency '${depName}' not found. Create it first.`);
                         throw new NativeDocumentError(
                             `Store.createComposed('${name}') : dependency store '${depName}' not found.`
                         );
@@ -1400,13 +1399,13 @@ var NativeDocument = (function (exports) {
             reset(name) {
                 const item = $getStoreOrThrow('reset', name);
                 if (item.composed) {
-                    DebugManager.error('Store', `Store.reset('${name}') : composed stores cannot be reset. Their value is derived from dependencies.`);
+                    DebugManager$1.error('Store', `Store.reset('${name}') : composed stores cannot be reset. Their value is derived from dependencies.`);
                     throw new NativeDocumentError(
                         `Store.reset('${name}') : composed stores cannot be reset.`
                     );
                 }
                 if (!item.resettable) {
-                    DebugManager.error('Store', `Store.reset('${name}') : this store is not resettable. Use Store.createResettable('${name}', value) instead of Store.create().`);
+                    DebugManager$1.error('Store', `Store.reset('${name}') : this store is not resettable. Use Store.createResettable('${name}', value) instead of Store.create().`);
                     throw new NativeDocumentError(
                         `Store.reset('${name}') : this store is not resettable. Use Store.createResettable('${name}', value) instead of Store.create().`
                     );
@@ -1427,7 +1426,7 @@ var NativeDocument = (function (exports) {
                 const item = $getStoreOrThrow('use', name);
 
                 if (item.composed) {
-                    DebugManager.error('Store', `Store.use('${name}') : composed stores are read-only. Use Store.follow('${name}') instead.`);
+                    DebugManager$1.error('Store', `Store.use('${name}') : composed stores are read-only. Use Store.follow('${name}') instead.`);
                     throw new NativeDocumentError(
                         `Store.use('${name}') : composed stores are read-only. Use Store.follow('${name}') instead.`
                     );
@@ -1494,7 +1493,7 @@ var NativeDocument = (function (exports) {
             get(name) {
                 const item = $stores.get(name);
                 if (!item) {
-                    DebugManager.warn('Store', `Store.get('${name}') : store not found.`);
+                    DebugManager$1.warn('Store', `Store.get('${name}') : store not found.`);
                     return null;
                 }
                 return item.observer;
@@ -1516,7 +1515,7 @@ var NativeDocument = (function (exports) {
             delete(name) {
                 const item = $stores.get(name);
                 if (!item) {
-                    DebugManager.warn('Store', `Store.delete('${name}') : store not found, nothing to delete.`);
+                    DebugManager$1.warn('Store', `Store.delete('${name}') : store not found, nothing to delete.`);
                     return;
                 }
                 item.subscribers.forEach(follower => follower.destroy());
@@ -1618,7 +1617,7 @@ var NativeDocument = (function (exports) {
                 return undefined;
             },
             set(target, prop, value) {
-                DebugManager.error('Store', `Forbidden: You cannot overwrite the store key '${String(prop)}'. Use .use('${String(prop)}').set(value) instead.`);
+                DebugManager$1.error('Store', `Forbidden: You cannot overwrite the store key '${String(prop)}'. Use .use('${String(prop)}').set(value) instead.`);
                 throw new NativeDocumentError(`Store structure is immutable. Use .set() on the observable.`);
             },
             deleteProperty(target, prop) {
@@ -1750,7 +1749,7 @@ var NativeDocument = (function (exports) {
             }
         }
         {
-            PluginsManager.emit('CreateObservable', this);
+            PluginsManager$1.emit('CreateObservable', this);
         }
     }
 
@@ -1854,12 +1853,12 @@ var NativeDocument = (function (exports) {
         this.$previousValue = this.$currentValue;
         this.$currentValue = newValue;
         {
-            PluginsManager.emit('ObservableBeforeChange', this);
+            PluginsManager$1.emit('ObservableBeforeChange', this);
         }
         this.trigger();
         this.$previousValue = null;
         {
-            PluginsManager.emit('ObservableAfterChange', this);
+            PluginsManager$1.emit('ObservableAfterChange', this);
         }
     };
 
@@ -1937,7 +1936,7 @@ var NativeDocument = (function (exports) {
     ObservableItem.prototype.subscribe = function(callback) {
         {
             if (this.$isCleanedUp) {
-                DebugManager.warn('Observable subscription', '⚠️ Attempted to subscribe to a cleaned up observable.');
+                DebugManager$1.warn('Observable subscription', '⚠️ Attempted to subscribe to a cleaned up observable.');
                 return;
             }
             if (typeof callback !== 'function') {
@@ -1949,7 +1948,7 @@ var NativeDocument = (function (exports) {
         this.$listeners.push(callback);
         this.assocTrigger();
         {
-            PluginsManager.emit('ObservableSubscribe', this);
+            PluginsManager$1.emit('ObservableSubscribe', this);
         }
     };
 
@@ -2060,7 +2059,7 @@ var NativeDocument = (function (exports) {
         }
         this.assocTrigger();
         {
-            PluginsManager.emit('ObservableUnsubscribe', this);
+            PluginsManager$1.emit('ObservableUnsubscribe', this);
         }
     };
 
@@ -2453,7 +2452,9 @@ var NativeDocument = (function (exports) {
      */
     function AttributesWrapper(element, attributes) {
 
-        Validator.validateAttributes(attributes);
+        {
+            Validator.validateAttributes(attributes);
+        }
 
         for(const originalAttributeName in attributes) {
             const attributeName = originalAttributeName.toLowerCase();
@@ -2534,7 +2535,7 @@ var NativeDocument = (function (exports) {
     Function.prototype.toNdElement = function () {
         const child = this;
         {
-            PluginsManager.emit('BeforeProcessComponent', child);
+            PluginsManager$1.emit('BeforeProcessComponent', child);
         }
         return ElementCreator.getChild(child());
     };
@@ -2726,14 +2727,14 @@ var NativeDocument = (function (exports) {
         processChildren(children, parent) {
             if(children === null) return;
             {
-                PluginsManager.emit('BeforeProcessChildren', parent);
+                PluginsManager$1.emit('BeforeProcessChildren', parent);
             }
             let child = this.getChild(children);
             if(child) {
                 parent.appendChild(child);
             }
             {
-                PluginsManager.emit('AfterProcessChildren', parent);
+                PluginsManager$1.emit('AfterProcessChildren', parent);
             }
         },
         async safeRemove(element) {
@@ -2764,7 +2765,15 @@ var NativeDocument = (function (exports) {
             if (attributes) {
                 AttributesWrapper(element, attributes);
             }
-        }
+        },
+        /**
+         *
+         * @param {HTMLElement} element
+         * @param {Object} attributes
+         */
+        processAttributesDirect: AttributesWrapper,
+        processClassAttribute: bindClassAttribute,
+        processStyleAttribute: bindStyleAttribute,
     };
 
     const EVENTS = [
@@ -3208,48 +3217,92 @@ var NativeDocument = (function (exports) {
         return createHtmlElement.bind(null, name, customWrapper);
     }
 
-    const cloneBindingsDataCache = new WeakMap();
+    const OPERATIONS = {
+        HYDRATE_TEXT: 1,
+        ATTACH_METHOD: 2,
+        HYDRATE_ATTRIBUTES: 3,
+        HYDRATE_FULL: 4,
+    };
+
+
+
+    const pathProcess = (target, path, data) => {
+        if(path.operation === OPERATIONS.HYDRATE_TEXT) {
+            const value = path.value;
+            ElementCreator.bindTextNode(target, path.isString ? data[0][value] : value.apply(null, data));
+            return;
+        }
+        if(path.operation === OPERATIONS.ATTACH_METHOD || path.operation === OPERATIONS.HYDRATE_FULL) {
+            const bindingData = path.bindingData;
+            for(let i = 0, length = bindingData._attachLength; i < length; i++) {
+                const method = bindingData.attach[i];
+                target.nd[method.methodName](function() {
+                    method.fn.call(this, ...data, ...arguments);
+                });
+            }
+        }
+        if(path.operation === OPERATIONS.HYDRATE_ATTRIBUTES || path.operation === OPERATIONS.HYDRATE_FULL) {
+            path.hydrator(target, path.bindingData, data);
+        }
+    };
+
+    const buildAttributesCache = (bindDingData) => {
+        const cache = { };
+        if(bindDingData.attributes) cache.attributes = {};
+        if(bindDingData.classes)    cache.class = {};
+        if(bindDingData.styles)     cache.style = {};
+        bindDingData._cache = cache;
+    };
 
+    const prepareBindingMetadata = (bindDingData) => {
+        const attributes = [];
+        const classAndStyles = [];
 
-    const bindAttributes = (node, bindDingData, data) => {
-        let attributes = null;
         if(bindDingData.attributes) {
-            attributes = {};
             for (const attr in bindDingData.attributes) {
-                attributes[attr] = bindDingData.attributes[attr].apply(null, data);
+                attributes.push({
+                    name: attr,
+                    value: bindDingData.attributes[attr]
+                });
             }
         }
 
         if(bindDingData.classes) {
-            attributes = attributes || {};
-            attributes.class = {};
             for (const className in bindDingData.classes) {
-                attributes.class[className] = bindDingData.classes[className].apply(null, data);
+                bindDingData._hasClassAttribute = true;
+                classAndStyles.push({
+                    name: 'class',
+                    key: className,
+                    value: bindDingData.classes[className]
+                });
             }
         }
 
         if(bindDingData.styles) {
-            attributes = attributes || {};
-            attributes.style = {};
             for (const property in bindDingData.styles) {
-                attributes.style[property] = bindDingData.styles[property].apply(null, data);
+                bindDingData._hasStyleAttribute = true;
+                classAndStyles.push({
+                    name: 'style',
+                    key: property,
+                    value: bindDingData.styles[property]
+                });
             }
         }
 
-        if(attributes) {
-            ElementCreator.processAttributes(node, attributes);
-            return true;
-        }
-
-        return null;
+        bindDingData._flatAttributes = attributes;
+        bindDingData._flatAttributesLength = attributes.length;
+        bindDingData._flatDynamique = classAndStyles;
+        bindDingData._flatDynamiqueLength = classAndStyles.length;
+        bindDingData._attachLength = bindDingData.attach.length;
     };
 
+
     const $hydrateFn = function(hydrateFunction, targetType, element, property) {
         if(!cloneBindingsDataCache.has(element)) {
-            // { classes, styles, attributes, value, attach }
             cloneBindingsDataCache.set(element, { attach: [] });
         }
         const hydrationState = cloneBindingsDataCache.get(element);
+
         if(targetType === 'value') {
             hydrationState.value = hydrateFunction;
             return;
@@ -3264,87 +3317,177 @@ var NativeDocument = (function (exports) {
     };
 
     const bindAttachMethods = (node, bindDingData, data) => {
-        for(let i = 0, length = bindDingData.attach.length; i < length; i++) {
-            const { methodName, fn } = bindDingData.attach[i];
-            node.nd[methodName](function(...args) {
-                fn.apply(this, [...args, ...data]);
+        for(let i = 0, length = bindDingData._attachLength; i < length; i++) {
+            const method = bindDingData.attach[i];
+            node.nd[method.methodName](function() {
+                method.fn.call(this, ...data, ...arguments);
             });
         }
     };
 
+    const optimizeBindingData = (bindDingData) => {
+        buildAttributesCache(bindDingData);
+        prepareBindingMetadata(bindDingData);
+    };
+
+
+    const $applyBindingParents = [];
+    const hydrateClonedNode = (root, data, paths, pathSize) => {
+        const rootPath = paths[pathSize];
+        $applyBindingParents[rootPath.id] = root;
+        pathProcess(root, rootPath, data);
+
+        let target = null, path = null;
+        for(let i = 0; i < pathSize; i++) {
+            path = paths[i];
+            target = $applyBindingParents[path.parentId].childNodes[path.index];
+            $applyBindingParents[path.id] = target;
+
+            pathProcess(target, path, data);
+        }
+
+        for (let i = 0; i <= pathSize; i++) {
+            $applyBindingParents[i] = null;
+        }
+    };
+
+    const hydrateFull = (node, bindDingData, data) => {
+        const cacheAttributes = bindDingData._cache;
+
+        for(let i = 0, length = bindDingData._flatAttributesLength; i < length; i++) {
+            const attr = bindDingData._flatAttributes[i];
+            cacheAttributes[attr.name] = attr.value.apply(null, data);
+        }
+
+        for(let i = 0, length = bindDingData._flatDynamiqueLength; i < length; i++) {
+            const dyn = bindDingData._flatDynamique[i];
+            cacheAttributes[dyn.name][dyn.key] = dyn.value.apply(null, data);
+        }
+
+        ElementCreator.processAttributesDirect(node, cacheAttributes);
+        return true;
+    };
+
+    const hydrateDynamic = (node, bindDingData, data) => {
+        const cacheAttributes = bindDingData._cache;
+
+        for(let i = 0, length = bindDingData._flatDynamiqueLength; i < length; i++) {
+            const dyn = bindDingData._flatDynamique[i];
+            cacheAttributes[dyn.name][dyn.key] = dyn.value.apply(null, data);
+        }
+
+        ElementCreator.processClassAttribute(node, cacheAttributes.class);
+        ElementCreator.processStyleAttribute(node, cacheAttributes.style);
+        return true;
+    };
+
+    const hydrateClassAttribute = (node, bindDingData, data) => {
+        const classAttributes = bindDingData._cache.class;
+
+        for(let i = 0, length = bindDingData._flatDynamiqueLength; i < length; i++) {
+            const dyn = bindDingData._flatDynamique[i];
+            classAttributes[dyn.key] = dyn.value.apply(null, data);
+        }
+
+        ElementCreator.processClassAttribute(node, classAttributes);
+        return true;
+    };
+
+    const hydrateStyleAttribute = (node, bindDingData, data) => {
+        const styleAttributes = bindDingData._cache;
 
-    const applyBindingTreePath = (root, data, paths) => {
-        const rootPath = paths.at(-1);
-        const parents = [];
-        parents[rootPath.id] = root;
-        data[0];
-        const rootPathFn = rootPath.fn;
-        rootPathFn(data, root, root);
+        for(let i = 0, length = bindDingData._flatDynamiqueLength; i < length; i++) {
+            const dyn = bindDingData._flatDynamique[i];
+            styleAttributes[dyn.key] = dyn.value.apply(null, data);
+        }
 
+        ElementCreator.processStyleAttribute(node, styleAttributes);
+        return true;
+    };
+
+    const hydrateAttributes = (node, bindDingData, data) => {
+        const cacheAttributes = bindDingData._cache;
+
+        for(let i = 0, length = bindDingData._flatAttributesLength; i < length; i++) {
+            const attr = bindDingData._flatAttributes[i];
+            cacheAttributes[attr.name] = attr.value.apply(null, data);
+        }
 
-        for(let i = 0, length = paths.length - 1; i < length; i++) {
-            const path = paths[i];
-            const target = parents[path.parentId].childNodes[path.index];
+        ElementCreator.processAttributesDirect(node, cacheAttributes);
+        return true;
+    };
 
-            parents[path.id] = target;
-            const pathFn = path.fn;
-            pathFn(data, target, root);
+    const getHydrator = (bindDingData) => {
+        if(!bindDingData._cache) {
+            return noUpdate;
+        }
+        if(bindDingData._flatAttributesLength && bindDingData._flatDynamiqueLength) {
+            return hydrateFull;
+        }
+        if(bindDingData._flatAttributesLength) {
+            return hydrateAttributes;
+        }
+        if(bindDingData._hasClassAttribute && bindDingData._hasStyleAttribute) {
+            return hydrateDynamic;
+        }
+        if(bindDingData._hasClassAttribute) {
+            return hydrateClassAttribute;
         }
-        parents.length = 0;
+        return hydrateStyleAttribute;
     };
 
-    const noUpdate = () => {};
+    const cloneBindingsDataCache$1 = new WeakMap();
+
     function TemplateCloner($fn) {
         let $node = null;
         let $hasBindingData = false;
 
+        let $bindingTreePathSize = 0;
         const $bindingTreePath = [
             {
                 id: 0,
-                parentId: null,
-                fn: noUpdate,
+                parentId: null
             }
         ];
 
         let pathCounter = 0;
         const clone = (node, data, currentPath) => {
-            const bindDingData = cloneBindingsDataCache.get(node);
+            const bindDingData = cloneBindingsDataCache$1.get(node);
+            if(bindDingData) {
+                optimizeBindingData(bindDingData);
+            }
             if(node.nodeType === 3) {
                 if(bindDingData && bindDingData.value) {
-                    currentPath.fn = bindDingData.value;
+                    const value = bindDingData.value;
                     const textNode = node.cloneNode();
-                    if(typeof bindDingData.value === 'string') {
-                        ElementCreator.bindTextNode(textNode, data[0][bindDingData.value]);
-                        return textNode;
-                    }
-                    bindDingData.value(data, textNode);
+                    currentPath.value = value;
+                    currentPath.operation = OPERATIONS.HYDRATE_TEXT;
+                    currentPath.isString = (typeof value === 'string');
+                    ElementCreator.bindTextNode(textNode, (currentPath.isString ? data[0][value] : value.apply(null, data)));
                     return textNode;
                 }
                 return node.cloneNode(true);
             }
             const nodeCloned = node.cloneNode();
             if(bindDingData) {
-                bindAttributes(nodeCloned, bindDingData, data);
+                const hydrator = getHydrator(bindDingData);
+                hydrator(nodeCloned, bindDingData, data);
                 bindAttachMethods(nodeCloned, bindDingData, data);
 
                 const hasAttributes = bindDingData.classes || bindDingData.styles || bindDingData.attributes;
                 const hasAttachMethods = bindDingData.attach.length;
 
+                currentPath.bindingData = bindDingData;
+                currentPath.hydrator = hydrator;
+
                 if(hasAttributes && hasAttachMethods) {
-                    currentPath.fn = (data, targetNode) => {
-                        bindAttributes(targetNode, bindDingData, data);
-                        bindAttachMethods(targetNode, bindDingData, data);
-                    };
+                    currentPath.operation = OPERATIONS.HYDRATE_FULL;
                 }
                 else if(hasAttributes) {
-                    currentPath.fn = (data, targetNode) => {
-                        bindAttributes(targetNode, bindDingData, data);
-                    };
+                    currentPath.operation = OPERATIONS.HYDRATE_ATTRIBUTES;
                 }
                 else if(hasAttachMethods) {
-                    currentPath.fn = (data, targetNode) => {
-                        bindAttachMethods(targetNode, bindDingData, data);
-                    };
+                    currentPath.operation = OPERATIONS.ATTACH_METHOD;
                 }
             }
             const childNodes = node.childNodes;
@@ -3352,10 +3495,10 @@ var NativeDocument = (function (exports) {
 
             for(let i = 0, length = childNodes.length; i < length; i++) {
                 const childNode = childNodes[i];
-                const path = { parentId, id: ++pathCounter,  index: i, fn: noUpdate };
+                const path = { parentId, id: ++pathCounter,  index: i };
                 const childNodeCloned = clone(childNode, data, path);
-                if(path.hasChildren || path.fn) {
-                    $bindingTreePath.unshift(path);
+                if(path.hasChildren || path.operation) {
+                    $bindingTreePath.push(path);
                     currentPath.hasChildren = true;
                 }
                 nodeCloned.appendChild(childNodeCloned);
@@ -3366,18 +3509,22 @@ var NativeDocument = (function (exports) {
         const cloneWithBindingPaths = (data) => {
             let root = $node.cloneNode(true);
 
-            applyBindingTreePath(root, data, $bindingTreePath);
+            hydrateClonedNode(root, data, $bindingTreePath, $bindingTreePathSize);
             return root;
         };
 
         this.clone = (data) => {
-            $node = $fn(this);
+            const binder = createTemplateCloner(this);
+            $node = $fn(binder);
             if(!$hasBindingData) {
                 this.clone = () => $node.cloneNode(true);
                 return $node.cloneNode(true);
             }
 
             const firstClone = clone($node, data, $bindingTreePath[0]);
+            $bindingTreePath.reverse();
+            $bindingTreePathSize = $bindingTreePath.length - 1;
+
             this.clone = cloneWithBindingPaths;
             return firstClone;
         };
@@ -3400,14 +3547,7 @@ var NativeDocument = (function (exports) {
             return this.value(propertyName);
         };
         this.value = (callbackOrProperty) => {
-            if(typeof callbackOrProperty !== 'function') {
-                return createBinding((data, textNode) => {
-                    ElementCreator.bindTextNode(textNode, data[0][callbackOrProperty]);
-                }, 'value');
-            }
-            return createBinding((data, textNode) => {
-                ElementCreator.bindTextNode(textNode, callbackOrProperty(...data));
-            }, 'value');
+            return createBinding(callbackOrProperty, 'value');
         };
         this.text = this.value;
         this.attr = (fn) => {
@@ -3416,14 +3556,29 @@ var NativeDocument = (function (exports) {
         this.attach = (fn) => {
             return createBinding(fn, 'attach');
         };
+        this.callback = this.attach;
 
     }
 
+
+    function createTemplateCloner($binder) {
+        return new Proxy($binder, {
+            get(target, prop) {
+                if(prop in target) {
+                    return target[prop];
+                }
+                if (typeof prop === 'symbol') return target[prop];
+                return target.value(prop);
+            }
+        });
+    }
+
     function useCache(fn) {
         let $cache = null;
 
         let wrapper = function(args) {
             $cache = new TemplateCloner(fn);
+
             wrapper = function(args) {
                 return $cache.clone(args);
             };
@@ -4017,7 +4172,7 @@ var NativeDocument = (function (exports) {
 
         ObservableItem.call(this, target, configs);
         {
-            PluginsManager.emit('CreateObservableArray', this);
+            PluginsManager$1.emit('CreateObservableArray', this);
         }
     };
 
@@ -4649,7 +4804,7 @@ var NativeDocument = (function (exports) {
         const observable = new ObservableItem(initialValue);
         const updatedValue = nextTick(() => observable.set(callback()));
         {
-            PluginsManager.emit('CreateObservableComputed', observable, dependencies);
+            PluginsManager$1.emit('CreateObservableComputed', observable, dependencies);
         }
 
         if(Validator.isFunction(dependencies)) {
@@ -4748,7 +4903,7 @@ var NativeDocument = (function (exports) {
                 }
                 cache.set(keyId, { keyId, isNew: true, child: new WeakRef(child), indexObserver});
             } catch (e) {
-                DebugManager.error('ForEach', `Error creating element for key ${keyId}` , e);
+                DebugManager$1.error('ForEach', `Error creating element for key ${keyId}` , e);
                 throw e;
             }
             return keyId;
@@ -5138,7 +5293,7 @@ var NativeDocument = (function (exports) {
      */
     const ShowIf = function(condition, child, { comment = null, shouldKeepInCache = true} = {}) {
         if(!(Validator.isObservable(condition)) && !Validator.isObservableWhenResult(condition)) {
-            return DebugManager.warn('ShowIf', "ShowIf : condition must be an Observable / "+comment, condition);
+            return DebugManager$1.warn('ShowIf', "ShowIf : condition must be an Observable / "+comment, condition);
         }
         const element = Anchor('Show if : '+(comment || ''));
 
@@ -6557,7 +6712,7 @@ var NativeDocument = (function (exports) {
                 window.history.pushState({ name: route.name(), params, path}, route.name() || path , path);
                 this.handleRouteChange(route, params, query, path);
             } catch (e) {
-                DebugManager.error('HistoryRouter', 'Error in pushState', e);
+                DebugManager$1.error('HistoryRouter', 'Error in pushState', e);
             }
         };
         /**
@@ -6570,7 +6725,7 @@ var NativeDocument = (function (exports) {
                 window.history.replaceState({ name: route.name(), params, path}, route.name() || path , path);
                 this.handleRouteChange(route, params, {}, path);
             } catch(e) {
-                DebugManager.error('HistoryRouter', 'Error in replaceState', e);
+                DebugManager$1.error('HistoryRouter', 'Error in replaceState', e);
             }
         };
         this.forward = function() {
@@ -6597,7 +6752,7 @@ var NativeDocument = (function (exports) {
                     }
                     this.handleRouteChange(route, params, query, path);
                 } catch(e) {
-                    DebugManager.error('HistoryRouter', 'Error in popstate event', e);
+                    DebugManager$1.error('HistoryRouter', 'Error in popstate event', e);
                 }
             });
             const { route, params, query, path } = this.resolve(defaultPath || (window.location.pathname+window.location.search));
@@ -6822,7 +6977,7 @@ var NativeDocument = (function (exports) {
                     listener(request);
                     next && next(request);
                 } catch (e) {
-                    DebugManager.warn('Route Listener', 'Error in listener:', e);
+                    DebugManager$1.warn('Route Listener', 'Error in listener:', e);
                 }
             }
         };
@@ -7000,7 +7155,7 @@ var NativeDocument = (function (exports) {
      */
     Router.create = function(options, callback) {
         if(!Validator.isFunction(callback)) {
-            DebugManager.error('Router', 'Callback must be a function');
+            DebugManager$1.error('Router', 'Callback must be a function');
             throw new RouterError('Callback must be a function');
         }
         const router = new Router(options);
@@ -7204,7 +7359,7 @@ var NativeDocument = (function (exports) {
     exports.HtmlElementWrapper = HtmlElementWrapper;
     exports.NDElement = NDElement;
     exports.Observable = Observable;
-    exports.PluginsManager = PluginsManager;
+    exports.PluginsManager = PluginsManager$1;
     exports.SingletonView = SingletonView;
     exports.Store = Store;
     exports.StoreFactory = StoreFactory;