native-document 1.0.115 → 1.0.117

package/dist/native-document.dev.js

@@ -528,21 +528,6 @@ var NativeDocument = (function (exports) {
         return this.shadow('closed', style);
     };
 
-    /**
-     * Attaches a template binding to the element by hydrating it with the specified method.
-     *
-     * @param {string} methodName - Name of the hydration method to call
-     * @param {BindingHydrator} bindingHydrator - Template binding with $hydrate method
-     * @returns {HTMLElement} The underlying HTML element
-     * @example
-     * const onClick = $binder.attach((event, data) => console.log(data));
-     * element.nd.attach('onClick', onClick);
-     */
-    NDElement.prototype.attach = function(methodName, bindingHydrator) {
-        bindingHydrator.$hydrate(this.$element, methodName);
-        return this.$element;
-    };
-
     /**
      * Extends the current NDElement instance with custom methods.
      * Methods are bound to the instance and available for chaining.
@@ -801,164 +786,6 @@ var NativeDocument = (function (exports) {
         };
     }
 
-    function Anchor(name, isUniqueChild = false) {
-        const anchorFragment = document.createDocumentFragment();
-        anchorFragment.__Anchor__ = true;
-
-        const anchorStart = document.createComment('Anchor Start : '+name);
-        const anchorEnd = document.createComment('/ Anchor End '+name);
-
-        anchorFragment.appendChild(anchorStart);
-        anchorFragment.appendChild(anchorEnd);
-
-        anchorFragment.nativeInsertBefore = anchorFragment.insertBefore;
-        anchorFragment.nativeAppendChild = anchorFragment.appendChild;
-        anchorFragment.nativeAppend = anchorFragment.append;
-
-        const isParentUniqueChild = isUniqueChild
-            ? () => true
-            : (parent) => (parent.firstChild === anchorStart && parent.lastChild === anchorEnd);
-
-        const insertBefore = function(parent, child, target) {
-            const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
-            if(parent === anchorFragment) {
-                parent.nativeInsertBefore(childElement, target);
-                return;
-            }
-            if(isParentUniqueChild(parent) && target === anchorEnd) {
-                parent.append(childElement,  target);
-                return;
-            }
-            parent.insertBefore(childElement, target);
-        };
-
-        anchorFragment.appendElement = function(child, before = null) {
-            const parentNode = anchorStart.parentNode;
-            const targetBefore = before || anchorEnd;
-            if(parentNode === anchorFragment) {
-                parentNode.nativeInsertBefore(child, targetBefore);
-                return;
-            }
-            parentNode?.insertBefore(child, targetBefore);
-        };
-
-        anchorFragment.appendChild = function(child, before = null) {
-            const parent = anchorEnd.parentNode;
-            if(!parent) {
-                DebugManager.error('Anchor', 'Anchor : parent not found', child);
-                return;
-            }
-            before = before ?? anchorEnd;
-            insertBefore(parent, child, before);
-        };
-
-        anchorFragment.append = function(...args ) {
-            return anchorFragment.appendChild(args);
-        };
-
-        anchorFragment.removeChildren = function() {
-            const parent = anchorEnd.parentNode;
-            if(parent === anchorFragment) {
-                return;
-            }
-            if(isParentUniqueChild(parent)) {
-                parent.replaceChildren(anchorStart, anchorEnd);
-                return;
-            }
-
-            let itemToRemove = anchorStart.nextSibling, tempItem;
-            while(itemToRemove && itemToRemove !== anchorEnd) {
-                tempItem = itemToRemove.nextSibling;
-                itemToRemove.remove();
-                itemToRemove =  tempItem;
-            }
-        };
-
-        anchorFragment.remove = function() {
-            const parent = anchorEnd.parentNode;
-            if(parent === anchorFragment) {
-                return;
-            }
-            if(isParentUniqueChild(parent)) {
-                parent.replaceChildren(anchorStart, anchorEnd);
-                return;
-            }
-            let itemToRemove = anchorStart.nextSibling, tempItem;
-            while(itemToRemove && itemToRemove !== anchorEnd) {
-                tempItem = itemToRemove.nextSibling;
-                anchorFragment.nativeAppend(itemToRemove);
-                itemToRemove = tempItem;
-            }
-        };
-
-        anchorFragment.removeWithAnchors = function() {
-            anchorFragment.removeChildren();
-            anchorStart.remove();
-            anchorEnd.remove();
-        };
-
-        anchorFragment.replaceContent = function(child) {
-            const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
-            const parent = anchorEnd.parentNode;
-            if(!parent) {
-                return;
-            }
-            if(isParentUniqueChild(parent)) {
-                parent.replaceChildren(anchorStart, childElement, anchorEnd);
-                return;
-            }
-            anchorFragment.removeChildren();
-            parent.insertBefore(childElement, anchorEnd);
-        };
-
-        anchorFragment.setContent = anchorFragment.replaceContent;
-
-        anchorFragment.insertBefore = function(child, anchor = null) {
-            anchorFragment.appendChild(child, anchor);
-        };
-
-        anchorFragment.endElement = function() {
-            return anchorEnd;
-        };
-
-        anchorFragment.startElement = function() {
-            return anchorStart;
-        };
-        anchorFragment.restore = function() {
-            anchorFragment.appendChild(anchorFragment);
-        };
-        anchorFragment.clear = anchorFragment.remove;
-        anchorFragment.detach = anchorFragment.remove;
-
-        anchorFragment.getByIndex = function(index) {
-            let currentNode = anchorStart;
-            for(let i = 0; i <= index; i++) {
-                if(!currentNode.nextSibling) {
-                    return null;
-                }
-                currentNode = currentNode.nextSibling;
-            }
-            return currentNode !== anchorStart ? currentNode : null;
-        };
-
-        return anchorFragment;
-    }
-    /**
-     *
-     * @param {HTMLElement|DocumentFragment|Text|String|Array} children
-     * @param {{ parent?: HTMLElement, name?: String}} configs
-     * @returns {DocumentFragment}
-     */
-    function createPortal(children, { parent, name = 'unnamed' } = {}) {
-        const anchor = Anchor('Portal '+name);
-        anchor.appendChild(ElementCreator.getChild(children));
-
-        (parent || document.body).appendChild(anchor);
-        return anchor;
-    }
-
-    DocumentFragment.prototype.setAttribute = () => {};
-
     const BOOLEAN_ATTRIBUTES = new Set([
         'checked',
         'selected',
@@ -2647,7 +2474,6 @@ var NativeDocument = (function (exports) {
         this.$hydrate(element, attributeName);
     };
 
-    const $nodeCache = new Map();
     let $textNodeCache = null;
 
     const ElementCreator = {
@@ -2677,7 +2503,7 @@ var NativeDocument = (function (exports) {
          * @param {{$hydrate: Function}} item
          * @returns {Text}
          */
-        createHydratableNode(parent, item) {
+        createHydratableNode: (parent, item) => {
             const text = ElementCreator.createTextNode();
             item.$hydrate(text);
             return text;
@@ -2689,7 +2515,7 @@ var NativeDocument = (function (exports) {
          * @param {*} value
          * @returns {Text}
          */
-        createStaticTextNode(parent, value) {
+        createStaticTextNode: (parent, value) => {
             let text = ElementCreator.createTextNode();
             text.nodeValue = value;
             parent && parent.appendChild(text);
@@ -2701,15 +2527,10 @@ var NativeDocument = (function (exports) {
          * @returns {HTMLElement|DocumentFragment}
          */
         createElement: (name) => {
-            if(name) {
-                const cacheNode = $nodeCache.get(name);
-                if(cacheNode) {
-                    return cacheNode.cloneNode();
-                }
-                const node = document.createElement(name);
-                $nodeCache.set(name, node);
-                return node.cloneNode();
-            }
+            const node = document.createElement(name);
+            return node.cloneNode();
+        },
+        createFragment: (name) => {
             return Anchor('Fragment');
         },
         bindTextNode: (textNode, value) => {
@@ -2725,12 +2546,12 @@ var NativeDocument = (function (exports) {
          * @param {*} children
          * @param {HTMLElement|DocumentFragment} parent
          */
-        processChildren(children, parent) {
+        processChildren: (children, parent) => {
             if(children === null) return;
             {
                 PluginsManager.emit('BeforeProcessChildren', parent);
             }
-            let child = this.getChild(children);
+            let child = ElementCreator.getChild(children);
             if(child) {
                 parent.appendChild(child);
             }
@@ -2777,6 +2598,164 @@ var NativeDocument = (function (exports) {
         processStyleAttribute: bindStyleAttribute,
     };
 
+    function Anchor(name, isUniqueChild = false) {
+        const anchorFragment = document.createDocumentFragment();
+        anchorFragment.__Anchor__ = true;
+
+        const anchorStart = document.createComment('Anchor Start : '+name);
+        const anchorEnd = document.createComment('/ Anchor End '+name);
+
+        anchorFragment.appendChild(anchorStart);
+        anchorFragment.appendChild(anchorEnd);
+
+        anchorFragment.nativeInsertBefore = anchorFragment.insertBefore;
+        anchorFragment.nativeAppendChild = anchorFragment.appendChild;
+        anchorFragment.nativeAppend = anchorFragment.append;
+
+        const isParentUniqueChild = isUniqueChild
+            ? () => true
+            : (parent) => (parent.firstChild === anchorStart && parent.lastChild === anchorEnd);
+
+        const insertBefore = function(parent, child, target) {
+            const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            if(parent === anchorFragment) {
+                parent.nativeInsertBefore(childElement, target);
+                return;
+            }
+            if(isParentUniqueChild(parent) && target === anchorEnd) {
+                parent.append(childElement,  target);
+                return;
+            }
+            parent.insertBefore(childElement, target);
+        };
+
+        anchorFragment.appendElement = function(child, before = null) {
+            const parentNode = anchorStart.parentNode;
+            const targetBefore = before || anchorEnd;
+            if(parentNode === anchorFragment) {
+                parentNode.nativeInsertBefore(child, targetBefore);
+                return;
+            }
+            parentNode?.insertBefore(child, targetBefore);
+        };
+
+        anchorFragment.appendChild = function(child, before = null) {
+            const parent = anchorEnd.parentNode;
+            if(!parent) {
+                DebugManager.error('Anchor', 'Anchor : parent not found', child);
+                return;
+            }
+            before = before ?? anchorEnd;
+            insertBefore(parent, child, before);
+        };
+
+        anchorFragment.append = function(...args ) {
+            return anchorFragment.appendChild(args);
+        };
+
+        anchorFragment.removeChildren = function() {
+            const parent = anchorEnd.parentNode;
+            if(parent === anchorFragment) {
+                return;
+            }
+            if(isParentUniqueChild(parent)) {
+                parent.replaceChildren(anchorStart, anchorEnd);
+                return;
+            }
+
+            let itemToRemove = anchorStart.nextSibling, tempItem;
+            while(itemToRemove && itemToRemove !== anchorEnd) {
+                tempItem = itemToRemove.nextSibling;
+                itemToRemove.remove();
+                itemToRemove =  tempItem;
+            }
+        };
+
+        anchorFragment.remove = function() {
+            const parent = anchorEnd.parentNode;
+            if(parent === anchorFragment) {
+                return;
+            }
+            if(isParentUniqueChild(parent)) {
+                parent.replaceChildren(anchorStart, anchorEnd);
+                return;
+            }
+            let itemToRemove = anchorStart.nextSibling, tempItem;
+            while(itemToRemove && itemToRemove !== anchorEnd) {
+                tempItem = itemToRemove.nextSibling;
+                anchorFragment.nativeAppend(itemToRemove);
+                itemToRemove = tempItem;
+            }
+        };
+
+        anchorFragment.removeWithAnchors = function() {
+            anchorFragment.removeChildren();
+            anchorStart.remove();
+            anchorEnd.remove();
+        };
+
+        anchorFragment.replaceContent = function(child) {
+            const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            const parent = anchorEnd.parentNode;
+            if(!parent) {
+                return;
+            }
+            if(isParentUniqueChild(parent)) {
+                parent.replaceChildren(anchorStart, childElement, anchorEnd);
+                return;
+            }
+            anchorFragment.removeChildren();
+            parent.insertBefore(childElement, anchorEnd);
+        };
+
+        anchorFragment.setContent = anchorFragment.replaceContent;
+
+        anchorFragment.insertBefore = function(child, anchor = null) {
+            anchorFragment.appendChild(child, anchor);
+        };
+
+        anchorFragment.endElement = function() {
+            return anchorEnd;
+        };
+
+        anchorFragment.startElement = function() {
+            return anchorStart;
+        };
+        anchorFragment.restore = function() {
+            anchorFragment.appendChild(anchorFragment);
+        };
+        anchorFragment.clear = anchorFragment.remove;
+        anchorFragment.detach = anchorFragment.remove;
+
+        anchorFragment.getByIndex = function(index) {
+            let currentNode = anchorStart;
+            for(let i = 0; i <= index; i++) {
+                if(!currentNode.nextSibling) {
+                    return null;
+                }
+                currentNode = currentNode.nextSibling;
+            }
+            return currentNode !== anchorStart ? currentNode : null;
+        };
+
+        return anchorFragment;
+    }
+    /**
+     *
+     * @param {HTMLElement|DocumentFragment|Text|String|Array} children
+     * @param {{ parent?: HTMLElement, name?: String}} configs
+     * @returns {DocumentFragment}
+     */
+    function createPortal(children, { parent, name = 'unnamed' } = {}) {
+        const anchor = Anchor('Portal '+name);
+        anchor.appendChild(ElementCreator.getChild(children));
+
+        (parent || document.body).appendChild(anchor);
+        return anchor;
+    }
+
+    DocumentFragment.prototype.setAttribute = () => {};
+
     const EVENTS = [
       "Click",
       "DblClick",
@@ -3180,7 +3159,10 @@ var NativeDocument = (function (exports) {
     }
 
     const normalizeComponentArgs = function(props, children = null) {
-        if(Array.isArray(props) || typeof props !== 'object' || props === null || props.constructor.name !== 'Object' ||  props.$hydrate) { // IF it's not a JSON
+        if(props && children) {
+            return { props, children };
+        }
+        if(typeof props !== 'object' || Array.isArray(props) || props === null || props.constructor.name !== 'Object' ||  props.$hydrate) { // IF it's not a JSON
             return { props: children, children: props }
         }
         return { props, children };
@@ -3191,22 +3173,20 @@ var NativeDocument = (function (exports) {
      * @param {*} value
      * @returns {Text}
      */
-    const createTextNode = function(value) {
+    const createTextNode = (value) => {
         return (Validator.isObservable(value))
             ? ElementCreator.createObservableNode(null, value)
             : ElementCreator.createStaticTextNode(null, value);
     };
 
 
-    function createHtmlElement($tagName, customWrapper, _attributes, _children = null) {
+    const createHtmlElement = (element, _attributes, _children = null) => {
         let { props: attributes, children = null } = normalizeComponentArgs(_attributes, _children);
-        let element = ElementCreator.createElement($tagName);
-        let finalElement = (customWrapper && typeof customWrapper === 'function') ? customWrapper(element) : element;
 
-        ElementCreator.processAttributes(finalElement, attributes);
-        ElementCreator.processChildren(children, finalElement);
-        return finalElement;
-    }
+        ElementCreator.processAttributes(element, attributes);
+        ElementCreator.processChildren(children, element);
+        return element;
+    };
 
     /**
      *
@@ -3215,341 +3195,233 @@ var NativeDocument = (function (exports) {
      * @returns {Function}
      */
     function HtmlElementWrapper(name, customWrapper = null) {
-        return createHtmlElement.bind(null, name, customWrapper);
-    }
-
-    const cloneBindingsDataCache = new WeakMap();
+        if(name) {
+            if(customWrapper) {
+                let node = null;
+                let createElement = (attr, children) => {
+                    node = document.createElement(name);
+                    createElement = (attr, children) => {
+                        return createHtmlElement(customWrapper(node.cloneNode()), attr, children);
+                    };
+                    return createHtmlElement(customWrapper(node.cloneNode()), attr, children);            };
+
+                return (attr, children) => createElement(attr, children)
+            }
+
+            let node = null;
+            let createElement = (attr, children) => {
+                node = document.createElement(name);
+                createElement = (attr, children) => {
+                    return createHtmlElement(node.cloneNode(), attr, children);
+                };
+                return createHtmlElement(node.cloneNode(), attr, children);
+            };
 
-    const pathProcess = (target, path, data) => {
-        if(path.HYDRATE_TEXT) {
-            const value = path.value;
-            ElementCreator.bindTextNode(target, path.isString ? data[0][value] : value.apply(null, data));
-            return;
-        }
-        if(path.ATTACH_METHOD) {
-            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);
-                });
-            }
+            return (attr, children) => createElement(attr, children)
         }
-        if(path.HYDRATE_ATTRIBUTES) {
-            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 = [];
+        return () => Anchor('');
+    }
 
-        if(bindDingData.attributes) {
-            for (const attr in bindDingData.attributes) {
-                attributes.push({
-                    name: attr,
-                    value: bindDingData.attributes[attr]
-                });
-            }
-        }
+    function NodeCloner($element) {
+        this.$element = $element;
+        this.$classes = null;
+        this.$styles = null;
+        this.$attrs = null;
+        this.$ndMethods = null;
+    }
 
-        if(bindDingData.classes) {
-            for (const className in bindDingData.classes) {
-                bindDingData._hasClassAttribute = true;
-                classAndStyles.push({
-                    name: 'class',
-                    key: className,
-                    value: bindDingData.classes[className]
-                });
-            }
-        }
 
-        if(bindDingData.styles) {
-            for (const property in bindDingData.styles) {
-                bindDingData._hasStyleAttribute = true;
-                classAndStyles.push({
-                    name: 'style',
-                    key: property,
-                    value: bindDingData.styles[property]
-                });
-            }
+    /**
+     * Attaches a template binding to the element by hydrating it with the specified method.
+     *
+     * @param {string} methodName - Name of the hydration method to call
+     * @param {BindingHydrator} bindingHydrator - Template binding with $hydrate method
+     * @returns {HTMLElement} The underlying HTML element
+     * @example
+     * const onClick = $binder.attach((event, data) => console.log(data));
+     * element.nd.attach('onClick', onClick);
+     */
+    NDElement.prototype.attach = function(methodName, bindingHydrator) {
+        if(typeof bindingHydrator === 'function') {
+            const element = this.$element;
+            element.nodeCloner = element.nodeCloner || new NodeCloner(element);
+            element.nodeCloner.attach(methodName, bindingHydrator);
+            return element;
         }
-
-        bindDingData._flatAttributes = attributes;
-        bindDingData._flatAttributesLength = attributes.length;
-        bindDingData._flatDynamique = classAndStyles;
-        bindDingData._flatDynamiqueLength = classAndStyles.length;
-        bindDingData._attachLength = bindDingData.attach.length;
+        bindingHydrator.$hydrate(this.$element, methodName);
+        return this.$element;
     };
 
+    NodeCloner.prototype.__$isNodeCloner = true;
 
-    const $hydrateFn = function(hydrateFunction, targetType, element, property) {
-        if(!cloneBindingsDataCache.has(element)) {
-            cloneBindingsDataCache.set(element, { attach: [] });
+    const buildProperties = (cache, properties, data) => {
+        for(const key in properties) {
+            cache[key] = properties[key].apply(null, data);
         }
-        const hydrationState = cloneBindingsDataCache.get(element);
+        return cache;
+    };
 
-        if(targetType === 'value') {
-            hydrationState.value = hydrateFunction;
+    NodeCloner.prototype.resolve = function() {
+        if(this.$content) {
             return;
         }
-        if(targetType === 'attach') {
-            hydrationState.attach = hydrationState.attach || [];
-            hydrationState.attach.push({ methodName: property, fn: hydrateFunction});
-            return;
-        }
-        hydrationState[targetType] = hydrationState[targetType] || {};
-        hydrationState[targetType][property] = hydrateFunction;
-    };
-
-    const bindAttachMethods = (node, bindDingData, 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 steps = [];
+        if(this.$ndMethods) {
+            steps.push((clonedNode, data) => {
+                for(const methodName in this.$ndMethods) {
+                    clonedNode.nd[methodName](this.$ndMethods[methodName].bind(clonedNode, ...data));
+                }
             });
         }
-    };
-
-    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;
-
-            if(path.HYDRATE_TEXT) {
-                const value = path.value;
-                ElementCreator.bindTextNode(target, path.isString ? data[0][value] : value.apply(null, data));
-                continue;
-            }
-            if(path.ATTACH_METHOD) {
-                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.HYDRATE_ATTRIBUTES) {
-                path.hydrator(target, path.bindingData, data);
-            }
+        if(this.$classes) {
+            const cache = {};
+            steps.push((clonedNode, data) => {
+                ElementCreator.processClassAttribute(clonedNode, buildProperties(cache, this.$classes, data));
+            });
         }
-
-        for (let i = 0; i <= pathSize; i++) {
-            $applyBindingParents[i] = null;
+        if(this.$styles) {
+            const cache = {};
+            steps.push((clonedNode, data) => {
+                ElementCreator.processStyleAttribute(clonedNode, buildProperties(cache, this.$styles, data));
+            });
         }
-    };
-
-    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);
+        if(this.$attrs) {
+            const cache = {};
+            steps.push((clonedNode, data) => {
+                ElementCreator.processAttributes(clonedNode, buildProperties(cache, this.$attrs, 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);
-        }
+        const stepsCount = steps.length;
+        const $element = this.$element;
 
-        ElementCreator.processAttributesDirect(node, cacheAttributes);
-        return true;
+        this.cloneNode = (data) => {
+            const clonedNode = $element.cloneNode(false);
+            for(let i = 0; i < stepsCount; i++) {
+                steps[i](clonedNode, data);
+            }
+            return clonedNode;
+        };
     };
 
-    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;
+    NodeCloner.prototype.cloneNode = function(data) {
+        return this.$element.cloneNode(false);
     };
 
-    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;
+    NodeCloner.prototype.attach = function(methodName, callback) {
+        this.$ndMethods = this.$ndMethods || {};
+        this.$ndMethods[methodName] = callback;
+        return this;
     };
 
-    const hydrateStyleAttribute = (node, bindDingData, data) => {
-        const styleAttributes = bindDingData._cache;
-
-        for(let i = 0, length = bindDingData._flatDynamiqueLength; i < length; i++) {
-            const dyn = bindDingData._flatDynamique[i];
-            styleAttributes[dyn.key] = dyn.value.apply(null, data);
+    NodeCloner.prototype.text = function(value) {
+        this.$content = value;
+        if(typeof value === 'function') {
+            this.cloneNode = (data) => createTextNode(value.apply(null, data));
+            return this;
         }
-
-        ElementCreator.processStyleAttribute(node, styleAttributes);
-        return true;
+        this.cloneNode = (data) => createTextNode(data[0][value]);
+        return this;
     };
 
-    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);
+    NodeCloner.prototype.attr = function(attrName, value) {
+        if(attrName === 'class') {
+            this.$classes = this.$classes || {};
+            this.$classes[value.property] = value.value;
+            return this;
         }
-
-        ElementCreator.processAttributesDirect(node, cacheAttributes);
-        return true;
+        if(attrName === 'style') {
+            this.$styles = this.$styles || {};
+            this.$styles[value.property] = value.value;
+            return this;
+        }
+        this.$attrs = this.$attrs || {};
+        this.$attrs[attrName] = value.value;
+        return this;
     };
 
-    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;
+    const $hydrateFn = function(value, targetType, element, property) {
+        element.nodeCloner = element.nodeCloner || new NodeCloner(element);
+        if(targetType === 'value') {
+            element.nodeCloner.text(value);
+            return;
         }
-        if(bindDingData._hasClassAttribute) {
-            return hydrateClassAttribute;
+        if(targetType === 'attach') {
+            element.nodeCloner.attach(property, value);
+            return;
         }
-        return hydrateStyleAttribute;
+        element.nodeCloner.attr(targetType, { property, value });
     };
 
     function TemplateCloner($fn) {
         let $node = null;
-        let $hasBindingData = false;
-
-        let $bindingTreePathSize = 0;
-        const $bindingTreePath = [
-            {
-                id: 0,
-                parentId: null
-            }
-        ];
-
-        let pathCounter = 0;
-        const clone = (node, data, currentPath) => {
-            const bindDingData = cloneBindingsDataCache.get(node);
-            if(bindDingData) {
-                optimizeBindingData(bindDingData);
-            }
-            if(node.nodeType === 3) {
-                if(bindDingData && bindDingData.value) {
-                    const value = bindDingData.value;
-                    const textNode = node.cloneNode();
-                    currentPath.value = value;
-                    currentPath.HYDRATE_TEXT = true;
-                    currentPath.operation = true;
-                    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) {
-                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) {
-                    currentPath.HYDRATE_ATTRIBUTES = true;
-                    currentPath.operation = true;
+        const assignClonerToNode = ($node) => {
+            const childNodes = $node.childNodes;
+            let containDynamicNode = !!$node.nodeCloner;
+            const childNodesLength = childNodes.length;
+            for(let i = 0; i < childNodesLength; i++) {
+                const child = childNodes[i];
+                if(child.nodeCloner) {
+                    containDynamicNode = true;
                 }
-                if(hasAttachMethods) {
-                    currentPath.ATTACH_METHOD = true;
-                    currentPath.operation = true;
+                const localContainDynamicNode = assignClonerToNode(child);
+                if(localContainDynamicNode) {
+                    containDynamicNode = true;
                 }
             }
-            const childNodes = node.childNodes;
-            const parentId = currentPath.id;
 
-            for(let i = 0, length = childNodes.length; i < length; i++) {
-                const childNode = childNodes[i];
-                const path = { parentId, id: ++pathCounter,  index: i };
-                const childNodeCloned = clone(childNode, data, path);
-                if(path.hasChildren || path.operation) {
-                    $bindingTreePath.push(path);
-                    currentPath.hasChildren = true;
+            if(!containDynamicNode) {
+                $node.dynamicCloneNode = $node.cloneNode.bind($node, true);
+            } else {
+                if($node.nodeCloner) {
+                    $node.nodeCloner.resolve();
+                    $node.dynamicCloneNode = (data) => {
+                        const clonedNode = $node.nodeCloner.cloneNode(data);
+                        for(let i = 0; i < childNodesLength; i++) {
+                            const child = childNodes[i].dynamicCloneNode(data);
+                            clonedNode.appendChild(child);
+                        }
+                        return clonedNode;
+                    };
+                } else {
+                    $node.dynamicCloneNode = (data) => {
+                        const clonedNode = $node.cloneNode();
+                        for(let i = 0; i < childNodesLength; i++) {
+                            const child = childNodes[i].dynamicCloneNode(data);
+                            clonedNode.appendChild(child);
+                        }
+                        return clonedNode;
+                    };
                 }
-                nodeCloned.appendChild(childNodeCloned);
             }
-            return nodeCloned;
-        };
-
-        const cloneWithBindingPaths = (data) => {
-            let root = $node.cloneNode(true);
 
-            hydrateClonedNode(root, data, $bindingTreePath, $bindingTreePathSize);
-            return root;
+            return containDynamicNode;
         };
 
         this.clone = (data) => {
             const binder = createTemplateCloner(this);
             $node = $fn(binder);
-            if(!$hasBindingData) {
-                this.clone = () => $node.cloneNode(true);
-                return $node.cloneNode(true);
+            if(!$node.nodeCloner) {
+                $node.nodeCloner = new NodeCloner($node);
             }
-
-            const firstClone = clone($node, data, $bindingTreePath[0]);
-            $bindingTreePath.reverse();
-            $bindingTreePathSize = $bindingTreePath.length - 1;
-
-            this.clone = cloneWithBindingPaths;
-            return firstClone;
+            assignClonerToNode($node);
+            this.clone = $node.dynamicCloneNode;
+            return $node.dynamicCloneNode(data);
         };
 
 
         const createBinding = (hydrateFunction, targetType) => {
             return new TemplateBinding((element, property) => {
-                $hasBindingData = true;
                 $hydrateFn(hydrateFunction, targetType, element, property);
             });
         };
 
         this.style = (fn) => {
-            return createBinding(fn, 'styles');
+            return createBinding(fn, 'style');
         };
         this.class = (fn) => {
-            return createBinding(fn, 'classes');
+            return createBinding(fn, 'class');
         };
         this.property = (propertyName) => {
             return this.value(propertyName);
@@ -3586,10 +3458,9 @@ var NativeDocument = (function (exports) {
         let wrapper = (args) => {
             $cache = new TemplateCloner(fn);
 
-            wrapper = (args) => {
-                return $cache.clone(args);
-            };
-            return $cache.clone(args);
+            const node = $cache.clone(args);
+            wrapper = $cache.clone;
+            return node;
         };
 
         if(fn.length < 2) {