native-document 1.0.79 → 1.0.81

package/src/core/wrappers/AttributesWrapper.js

@@ -37,8 +37,18 @@ export function updateObserverFromInput(element, attributeName, defaultValue, va
 export function bindClassAttribute(element, data) {
     for(let className in data) {
         const value = data[className];
-        if(value?.bindNdClass) {
-            value.bindNdClass(element, className);
+        if(Validator.isObservable(value)) {
+            element.classes.toggle(className, value.val());
+            value.subscribe(toggleElementClass.bind(null, element, className));
+            continue;
+        }
+        if(Validator.isObservableWhenResult(value)) {
+            element.classes.toggle(className, value.isMath());
+            value.subscribe(toggleElementClass.bind(null, element, className));
+            continue;
+        }
+        if(value.$hydrate) {
+            value.$hydrate(element, className);
             continue;
         }
         element.classes.toggle(className, value)
@@ -108,12 +118,6 @@ export function bindAttributeWithObservable(element, attributeName, value) {
     }
 }
 
-const NdBindings = {
-    class: (element, value) => bindClassAttribute(element, value),
-    style: (element, value) => bindStyleAttribute(element, value),
-};
-
-
 /**
  *
  * @param {HTMLElement} element
@@ -129,7 +133,7 @@ export default function AttributesWrapper(element, attributes) {
 
     for(let key in attributes) {
         const attributeName = key.toLowerCase();
-        let value = attributes[key];
+        let value = attributes[attributeName];
         if(value == null) {
             continue;
         }
@@ -137,10 +141,13 @@ export default function AttributesWrapper(element, attributes) {
             value.handleNdAttribute(element, attributeName, value)
             continue;
         }
-        if(typeof value === 'object') {
-            const binding = NdBindings[attributeName];
-            if(binding) {
-                binding(element, value);
+        if(typeof value ===  'object') {
+            if(attributeName === 'class') {
+                bindClassAttribute(element, value);
+                continue;
+            }
+            if(attributeName === 'style') {
+                bindStyleAttribute(element, value);
                 continue;
             }
         }

package/src/core/wrappers/ElementCreator.js

@@ -83,14 +83,19 @@ export const ElementCreator = {
         PluginsManager.emit('AfterProcessChildren', parent);
     },
     getChild(child) {
-        while (child?.toNdElement) {
-            child = child.toNdElement();
-
-            if (Validator.isElement(child)) return child;
-            if (!child) return null;
+        if(child == null) {
+            return null;
+        }
+        if(child.toNdElement) {
+            do {
+                child =  child.toNdElement();
+                if(Validator.isElement(child)) {
+                    return child;
+                }
+            } while (child.toNdElement);
         }
 
-        return child ? ElementCreator.createStaticTextNode(null, child) : null;
+        return ElementCreator.createStaticTextNode(null, child);
     },
     /**
      *

package/src/core/wrappers/TemplateCloner.js

@@ -38,14 +38,6 @@ const bindAttributes = (node, bindDingData, data) => {
     return null;
 };
 
-const findByPath = (root, path) => {
-    let target = root;
-    for (let i = 0, len = path.length; i < len; i++) {
-        target = target.childNodes[path[i]];
-    }
-    return target;
-};
-
 const $hydrateFn = function(hydrateFunction, targetType, element, property) {
     if(!cloneBindingsDataCache.has(element)) {
         // { classes, styles, attributes, value, attach }
@@ -71,27 +63,43 @@ const bindAttachMethods = function(node, bindDingData, data) {
     }
 };
 
+
+const applyBindingTreePath = (root, target, data, path) => {
+    let newTarget = null;
+    if(path.fn) {
+        newTarget = path.fn(data, target, root);
+    }
+    if(path.children) {
+        for(let i = 0, length = path.children.length; i < length; i++) {
+            const currentPath = path.children[i];
+            const pathTargetNode = target.childNodes[currentPath.index];
+            applyBindingTreePath(root, pathTargetNode, data, currentPath);
+        }
+    }
+    return newTarget;
+};
+
 export function TemplateCloner($fn) {
     let $node = null;
     let $hasBindingData = false;
 
-    const $bindingPaths = [];
+    const $bindingTreePath = {
+        fn: null,
+        children: [],
+    };
 
-    const clone = (node, data, path) => {
+    const clone = (node, data, currentPath) => {
         const bindDingData = cloneBindingsDataCache.get(node);
         if(node.nodeType === 3) {
             if(bindDingData && bindDingData.value) {
-                $bindingPaths.push({
-                    path: [...path],
-                    fn: (data, targetNode, currentRoot) => {
-                        const newNode = bindDingData.value(data);
-                        targetNode.replaceWith(newNode);
-                        if (targetNode === currentRoot) {
-                            return newNode;
-                        }
-                        return null;
+                currentPath.fn = (data, targetNode, currentRoot) => {
+                    const newNode = bindDingData.value(data);
+                    if (targetNode === currentRoot) {
+                        return newNode;
                     }
-                });
+                    targetNode.replaceWith(newNode);
+                    return null;
+                };
                 return bindDingData.value(data);
             }
             return node.cloneNode(true);
@@ -103,35 +111,35 @@ export function TemplateCloner($fn) {
         if(bindDingData) {
             bindAttributes(nodeCloned, bindDingData, data);
             bindAttachMethods(nodeCloned, bindDingData, data);
-            $bindingPaths.push({
-                path: [...path],
-                fn: (data, targetNode) => {
-                    bindAttributes(targetNode, bindDingData, data);
-                    bindAttachMethods(targetNode, bindDingData, data);
-                }
-            })
+            currentPath.fn = (data, targetNode) => {
+                bindAttributes(targetNode, bindDingData, data);
+                bindAttachMethods(targetNode, bindDingData, data);
+            };
         }
         const childNodes = node.childNodes;
+        const bindingPathChildren = [];
         for(let i = 0, length = childNodes.length; i < length; i++) {
             const childNode = childNodes[i];
-            path.push(i);
+            const path = { index: i, fn: null };
             const childNodeCloned = clone(childNode, data, path);
-            path.pop();
+            if(path.children || path.fn) {
+                bindingPathChildren.push(path);
+            }
             nodeCloned.appendChild(childNodeCloned);
         }
+        if(bindingPathChildren.length) {
+            currentPath.children = currentPath.children || [];
+            currentPath.children = bindingPathChildren;
+        }
         return nodeCloned;
     };
 
     const cloneWithBindingPaths = (data) => {
         let root = $node.cloneNode(true);
 
-        for (let i = 0, len = $bindingPaths.length; i < len; i++) {
-            const binding = $bindingPaths[i];
-            const target = findByPath(root, binding.path);
-            const newRoot = binding.fn(data, target, root);
-            if(newRoot) {
-                root = newRoot;
-            }
+        const newRoot = applyBindingTreePath(root, root, data, $bindingTreePath);
+        if(newRoot) {
+            root = newRoot;
         }
 
         return root;
@@ -144,7 +152,7 @@ export function TemplateCloner($fn) {
             return $node.cloneNode(true);
         }
 
-        const firstClone = clone($node, data, []);
+        const firstClone = clone($node, data, $bindingTreePath);
         this.clone = cloneWithBindingPaths;
         return firstClone;
     };

package/src/core/wrappers/prototypes/attributes-extensions.js

@@ -8,14 +8,6 @@ String.prototype.handleNdAttribute = function(element, attributeName) {
     element.setAttribute(attributeName, this);
 };
 
-Number.prototype.handleNdAttribute = function(element, attributeName) {
-    element.setAttribute(attributeName, this);
-};
-
-Boolean.prototype.handleNdAttribute = function(element, attrName) {
-    bindBooleanAttribute(element, attrName, this);
-};
-
 ObservableItem.prototype.handleNdAttribute = function(element, attributeName) {
     if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
         bindBooleanAttribute(element, attributeName, this);