native-document 1.0.115 → 1.0.116

package/src/core/wrappers/template-cloner/TemplateCloner.js

@@ -1,112 +1,77 @@
-import {ElementCreator} from "../ElementCreator";
 import TemplateBinding from "../TemplateBinding";
-import { hydrateClonedNode, optimizeBindingData, $hydrateFn, bindAttachMethods, cloneBindingsDataCache } from './utils';
-import { getHydrator } from './attributes-hydrator';
+import { $hydrateFn} from './utils';
+import NodeCloner from "./NodeCloner";
 
 export 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) {
+            console.log('nodeCloner not found on :')
+            $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 = (data) => $node.dynamicCloneNode(data);
+        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);

package/src/core/wrappers/template-cloner/utils.js

@@ -1,7 +1,5 @@
 import { ElementCreator } from "../ElementCreator";
-
-
-export const cloneBindingsDataCache = new WeakMap();
+import NodeCloner from "./NodeCloner";
 
 const pathProcess = (target, path, data) => {
     if(path.HYDRATE_TEXT) {
@@ -74,23 +72,17 @@ const prepareBindingMetadata = (bindDingData) => {
 };
 
 
-export const $hydrateFn = function(hydrateFunction, targetType, element, property) {
-    if(!cloneBindingsDataCache.has(element)) {
-        cloneBindingsDataCache.set(element, { attach: [] });
-    }
-    const hydrationState = cloneBindingsDataCache.get(element);
-
+export const $hydrateFn = function(value, targetType, element, property) {
+    element.nodeCloner = element.nodeCloner || new NodeCloner(element);
     if(targetType === 'value') {
-        hydrationState.value = hydrateFunction;
+        element.nodeCloner.text(value);
         return;
     }
     if(targetType === 'attach') {
-        hydrationState.attach = hydrationState.attach || [];
-        hydrationState.attach.push({ methodName: property, fn: hydrateFunction});
+        element.nodeCloner.attach(property, value);
         return;
     }
-    hydrationState[targetType] = hydrationState[targetType] || {};
-    hydrationState[targetType][property] = hydrateFunction;
+    element.nodeCloner.attr(targetType, { property, value });
 };
 
 export const bindAttachMethods = (node, bindDingData, data) => {