native-document 1.0.109 → 1.0.110

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.109",
+  "version": "1.0.110",
   "main": "index.js",
   "type": "module",
   "scripts": {

package/src/core/wrappers/ElementCreator.js

@@ -1,6 +1,6 @@
 import Anchor from "../elements/anchor";
 import Validator from "../utils/validator";
-import AttributesWrapper from "./AttributesWrapper";
+import AttributesWrapper, { bindClassAttribute, bindStyleAttribute } from "./AttributesWrapper";
 import PluginsManager from "../utils/plugins-manager";
 import './prototypes/nd-element-extensions';
 import './prototypes/nd-element.transition.extensions';
@@ -124,5 +124,13 @@ export const ElementCreator = {
         if (attributes) {
             AttributesWrapper(element, attributes);
         }
-    }
+    },
+    /**
+     *
+     * @param {HTMLElement} element
+     * @param {Object} attributes
+     */
+    processAttributesDirect: AttributesWrapper,
+    processClassAttribute: bindClassAttribute,
+    processStyleAttribute: bindStyleAttribute,
 };

package/src/core/wrappers/TemplateCloner.js

@@ -3,6 +3,12 @@ import TemplateBinding from "./TemplateBinding";
 
 const cloneBindingsDataCache = new WeakMap();
 
+const OPERATIONS = {
+    HYDRATE_TEXT: 1,
+    ATTACH_METHOD: 2,
+    HYDRATE_ATTRIBUTES: 3,
+    HYDRATE_FULL: 4,
+};
 
 const hydrateFull = (node, bindDingData, data) => {
     const cacheAttributes = bindDingData._cache;
@@ -29,7 +35,32 @@ const hydrateDynamic = (node, bindDingData, data) => {
         cacheAttributes[dyn.name][dyn.key] = dyn.value.apply(null, data);
     }
 
-    ElementCreator.processAttributesDirect(node, cacheAttributes);
+    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;
+
+    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;
 };
 
@@ -55,7 +86,13 @@ const getHydrator = (bindDingData) => {
     if(bindDingData._flatAttributesLength) {
         return hydrateAttributes;
     }
-    return hydrateDynamic;
+    if(bindDingData._hasClassAttribute && bindDingData._hasStyleAttribute) {
+        return hydrateDynamic;
+    }
+    if(bindDingData._hasClassAttribute) {
+        return hydrateClassAttribute;
+    }
+    return hydrateStyleAttribute;
 };
 
 const $hydrateFn = function(hydrateFunction, targetType, element, property) {
@@ -81,29 +118,50 @@ 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, ...arguments, ...data);
+            method.fn.call(this, ...data, ...arguments);
         });
     }
 };
 
 
 const $applyBindingParents = [];
+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 applyBindingTreePath = (root, data, paths, pathSize) => {
-    const rootPath = paths.at(-1);
+    const rootPath = paths[pathSize];
     $applyBindingParents[rootPath.id] = root;
-    const rootPathFn = rootPath.fn;
-    rootPathFn(data, root, root);
-
+    pathProcess(root, rootPath, data);
 
+    let target = null, path = null;
     for(let i = 0; i < pathSize; i++) {
-        const path = paths[i];
-        const target = $applyBindingParents[path.parentId].childNodes[path.index];
-
+        path = paths[i];
+        target = $applyBindingParents[path.parentId].childNodes[path.index];
         $applyBindingParents[path.id] = target;
-        const pathFn = path.fn;
-        pathFn(data, target, root);
+
+        pathProcess(target, path, data);
+    }
+
+    for (let i = 0; i <= pathSize; i++) {
+        $applyBindingParents[i] = null;
     }
-    $applyBindingParents.length = 0;
 };
 const buildAttributesCache = (bindDingData) => {
     const cache = { };
@@ -128,6 +186,7 @@ const prepareBindingMetadata = (bindDingData) => {
 
     if(bindDingData.classes) {
         for (const className in bindDingData.classes) {
+            bindDingData._hasClassAttribute = true;
             classAndStyles.push({
                 name: 'class',
                 key: className,
@@ -138,6 +197,7 @@ const prepareBindingMetadata = (bindDingData) => {
 
     if(bindDingData.styles) {
         for (const property in bindDingData.styles) {
+            bindDingData._hasStyleAttribute = true;
             classAndStyles.push({
                 name: 'style',
                 key: property,
@@ -154,9 +214,6 @@ const prepareBindingMetadata = (bindDingData) => {
 };
 
 const optimizeBindingData = (bindDingData) => {
-    if(!bindDingData) {
-        return;
-    }
     buildAttributesCache(bindDingData);
     prepareBindingMetadata(bindDingData);
 };
@@ -170,24 +227,24 @@ export function TemplateCloner($fn) {
     const $bindingTreePath = [
         {
             id: 0,
-            parentId: null,
-            fn: noUpdate,
+            parentId: null
         }
     ];
 
     let pathCounter = 0;
     const clone = (node, data, currentPath) => {
         const bindDingData = cloneBindingsDataCache.get(node);
-        optimizeBindingData(bindDingData);
+        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);
@@ -201,22 +258,17 @@ export function TemplateCloner($fn) {
             const hasAttributes = bindDingData.classes || bindDingData.styles || bindDingData.attributes;
             const hasAttachMethods = bindDingData.attach.length;
 
-            currentPath.fn = noUpdate;
+            currentPath.bindingData = bindDingData;
+            currentPath.hydrator = hydrator;
+
             if(hasAttributes && hasAttachMethods) {
-                currentPath.fn = (data, targetNode) => {
-                    hydrator(targetNode, bindDingData, data);
-                    bindAttachMethods(targetNode, bindDingData, data);
-                };
+                currentPath.operation = OPERATIONS.HYDRATE_FULL;
             }
             else if(hasAttributes) {
-                currentPath.fn = (data, targetNode) => {
-                    hydrator(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;
@@ -224,9 +276,9 @@ export function TemplateCloner($fn) {
 
         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 !== noUpdate) {
+            if(path.hasChildren || path.operation) {
                 $bindingTreePath.push(path);
                 currentPath.hasChildren = true;
             }
@@ -243,7 +295,8 @@ export function TemplateCloner($fn) {
     };
 
     this.clone = (data) => {
-        $node = $fn(this);
+        const binder = createTemplateCloner(this);
+        $node = $fn(binder);
         if(!$hasBindingData) {
             this.clone = () => $node.cloneNode(true);
             return $node.cloneNode(true);
@@ -275,14 +328,7 @@ export function TemplateCloner($fn) {
         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) => {
@@ -295,11 +341,24 @@ export function TemplateCloner($fn) {
 
 }
 
+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);
+        }
+    });
+}
+
 export function useCache(fn) {
     let $cache = null;
 
     let wrapper = function(args) {
         $cache = new TemplateCloner(fn);
+
         wrapper = function(args) {
             return $cache.clone(args);
         };