native-document 1.0.107 → 1.0.109

package/src/core/wrappers/TemplateCloner.js

@@ -4,94 +4,181 @@ import TemplateBinding from "./TemplateBinding";
 const cloneBindingsDataCache = new WeakMap();
 
 
-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);
-        }
+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(bindDingData.classes) {
-        attributes = attributes || {};
-        attributes.class = {};
-        for (const className in bindDingData.classes) {
-            attributes.class[className] = bindDingData.classes[className].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);
     }
 
-    if(bindDingData.styles) {
-        attributes = attributes || {};
-        attributes.style = {};
-        for (const property in bindDingData.styles) {
-            attributes.style[property] = bindDingData.styles[property].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);
     }
 
-    if(attributes) {
-        ElementCreator.processAttributes(node, attributes);
-        return true;
+    ElementCreator.processAttributesDirect(node, cacheAttributes);
+    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);
     }
 
-    return null;
+    ElementCreator.processAttributesDirect(node, cacheAttributes);
+    return true;
+};
+
+const getHydrator = (bindDingData) => {
+    if(!bindDingData._cache) {
+        return noUpdate;
+    }
+    if(bindDingData._flatAttributesLength && bindDingData._flatDynamiqueLength) {
+        return hydrateFull;
+    }
+    if(bindDingData._flatAttributesLength) {
+        return hydrateAttributes;
+    }
+    return hydrateDynamic;
 };
 
 const $hydrateFn = function(hydrateFunction, targetType, element, property) {
     if(!cloneBindingsDataCache.has(element)) {
-        // { classes, styles, attributes, value, attach }
-        cloneBindingsDataCache.set(element, {});
+        cloneBindingsDataCache.set(element, { attach: [] });
     }
     const hydrationState = cloneBindingsDataCache.get(element);
+
     if(targetType === 'value') {
         hydrationState.value = hydrateFunction;
         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) => {
-    if(!bindDingData.attach) {
-        return null;
-    }
-    for(const methodName in bindDingData.attach) {
-        node.nd[methodName](function(...args) {
-            bindDingData.attach[methodName].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, ...arguments, ...data);
         });
     }
 };
 
 
-const applyBindingTreePath = (root, target, data, path) => {
-    if(path.fn) {
-        if(typeof path.fn === 'string') {
-            ElementCreator.bindTextNode(target, data[0][path.fn]);
+const $applyBindingParents = [];
+const applyBindingTreePath = (root, data, paths, pathSize) => {
+    const rootPath = paths.at(-1);
+    $applyBindingParents[rootPath.id] = root;
+    const rootPathFn = rootPath.fn;
+    rootPathFn(data, root, root);
+
+
+    for(let i = 0; i < pathSize; i++) {
+        const path = paths[i];
+        const target = $applyBindingParents[path.parentId].childNodes[path.index];
+
+        $applyBindingParents[path.id] = target;
+        const pathFn = path.fn;
+        pathFn(data, target, root);
+    }
+    $applyBindingParents.length = 0;
+};
+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 = [];
+
+    if(bindDingData.attributes) {
+        for (const attr in bindDingData.attributes) {
+            attributes.push({
+                name: attr,
+                value: bindDingData.attributes[attr]
+            });
         }
-        else {
-            path.fn(data, target, root);
+    }
+
+    if(bindDingData.classes) {
+        for (const className in bindDingData.classes) {
+            classAndStyles.push({
+                name: 'class',
+                key: className,
+                value: bindDingData.classes[className]
+            });
         }
     }
-    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);
+
+    if(bindDingData.styles) {
+        for (const property in bindDingData.styles) {
+            classAndStyles.push({
+                name: 'style',
+                key: property,
+                value: bindDingData.styles[property]
+            });
         }
     }
+
+    bindDingData._flatAttributes = attributes;
+    bindDingData._flatAttributesLength = attributes.length;
+    bindDingData._flatDynamique = classAndStyles;
+    bindDingData._flatDynamiqueLength = classAndStyles.length;
+    bindDingData._attachLength = bindDingData.attach.length;
+};
+
+const optimizeBindingData = (bindDingData) => {
+    if(!bindDingData) {
+        return;
+    }
+    buildAttributesCache(bindDingData);
+    prepareBindingMetadata(bindDingData);
 };
 
+const noUpdate = () => {};
 export function TemplateCloner($fn) {
     let $node = null;
     let $hasBindingData = false;
 
-    const $bindingTreePath = {
-        fn: null,
-        children: [],
-    };
+    let $bindingTreePathSize = 0;
+    const $bindingTreePath = [
+        {
+            id: 0,
+            parentId: null,
+            fn: noUpdate,
+        }
+    ];
 
+    let pathCounter = 0;
     const clone = (node, data, currentPath) => {
         const bindDingData = cloneBindingsDataCache.get(node);
+        optimizeBindingData(bindDingData);
         if(node.nodeType === 3) {
             if(bindDingData && bindDingData.value) {
                 currentPath.fn = bindDingData.value;
@@ -107,35 +194,51 @@ export function TemplateCloner($fn) {
         }
         const nodeCloned = node.cloneNode();
         if(bindDingData) {
-            bindAttributes(nodeCloned, bindDingData, data);
+            const hydrator = getHydrator(bindDingData);
+            hydrator(nodeCloned, bindDingData, data);
             bindAttachMethods(nodeCloned, bindDingData, data);
-            currentPath.fn = (data, targetNode) => {
-                bindAttributes(targetNode, bindDingData, data);
-                bindAttachMethods(targetNode, bindDingData, data);
-            };
+
+            const hasAttributes = bindDingData.classes || bindDingData.styles || bindDingData.attributes;
+            const hasAttachMethods = bindDingData.attach.length;
+
+            currentPath.fn = noUpdate;
+            if(hasAttributes && hasAttachMethods) {
+                currentPath.fn = (data, targetNode) => {
+                    hydrator(targetNode, bindDingData, data);
+                    bindAttachMethods(targetNode, bindDingData, data);
+                };
+            }
+            else if(hasAttributes) {
+                currentPath.fn = (data, targetNode) => {
+                    hydrator(targetNode, bindDingData, data);
+                };
+            }
+            else if(hasAttachMethods) {
+                currentPath.fn = (data, targetNode) => {
+                    bindAttachMethods(targetNode, bindDingData, data);
+                };
+            }
         }
         const childNodes = node.childNodes;
-        const bindingPathChildren = [];
+        const parentId = currentPath.id;
+
         for(let i = 0, length = childNodes.length; i < length; i++) {
             const childNode = childNodes[i];
-            const path = { index: i, fn: null };
+            const path = { parentId, id: ++pathCounter,  index: i, fn: noUpdate };
             const childNodeCloned = clone(childNode, data, path);
-            if(path.children || path.fn) {
-                bindingPathChildren.push(path);
+            if(path.hasChildren || path.fn !== noUpdate) {
+                $bindingTreePath.push(path);
+                currentPath.hasChildren = true;
             }
             nodeCloned.appendChild(childNodeCloned);
         }
-        if(bindingPathChildren.length) {
-            currentPath.children = currentPath.children || [];
-            currentPath.children = bindingPathChildren;
-        }
         return nodeCloned;
     };
 
     const cloneWithBindingPaths = (data) => {
         let root = $node.cloneNode(true);
 
-        applyBindingTreePath(root, root, data, $bindingTreePath);
+        applyBindingTreePath(root, data, $bindingTreePath, $bindingTreePathSize);
         return root;
     };
 
@@ -146,7 +249,10 @@ export function TemplateCloner($fn) {
             return $node.cloneNode(true);
         }
 
-        const firstClone = clone($node, data, $bindingTreePath);
+        const firstClone = clone($node, data, $bindingTreePath[0]);
+        $bindingTreePath.reverse();
+        $bindingTreePathSize = $bindingTreePath.length - 1;
+
         this.clone = cloneWithBindingPaths;
         return firstClone;
     };
@@ -170,7 +276,9 @@ export function TemplateCloner($fn) {
     }
     this.value = (callbackOrProperty) => {
         if(typeof callbackOrProperty !== 'function') {
-            return createBinding(callbackOrProperty, 'value');
+            return createBinding((data, textNode) => {
+                ElementCreator.bindTextNode(textNode, data[0][callbackOrProperty]);
+            }, 'value');
         }
         return createBinding((data, textNode) => {
             ElementCreator.bindTextNode(textNode, callbackOrProperty(...data));
@@ -183,16 +291,18 @@ export function TemplateCloner($fn) {
     this.attach = (fn) => {
         return createBinding(fn, 'attach');
     };
+    this.callback = this.attach;
 
 }
 
 export function useCache(fn) {
     let $cache = null;
 
-    const wrapper = function(args) {
-        if(!$cache) {
-            $cache = new TemplateCloner(fn);
-        }
+    let wrapper = function(args) {
+        $cache = new TemplateCloner(fn);
+        wrapper = function(args) {
+            return $cache.clone(args);
+        };
         return $cache.clone(args);
     };
 

package/src/core/wrappers/prototypes/nd-element-extensions.js

@@ -3,7 +3,6 @@ import {NDElement} from "../NDElement";
 import TemplateBinding from "../TemplateBinding";
 import {ElementCreator} from "../ElementCreator";
 import PluginsManager from "../../utils/plugins-manager";
-import Validator from "../../utils/validator";
 import ObservableChecker from "../../data/ObservableChecker";
 
 String.prototype.toNdElement = function () {

package/src/core/wrappers/prototypes/nd-element.transition.extensions.js

@@ -36,10 +36,11 @@ const waitForVisualEnd = (el, timeout = 1000) => {
 
 NDElement.prototype.transitionOut = function(transitionName) {
     const exitClass = transitionName + '-exit';
+    const el = this.$element;
     this.beforeUnmount('transition-exit', async function() {
-        this.$element.classes.add(exitClass);
-        await waitForVisualEnd(this.$element);
-        this.$element.classes.remove(exitClass);
+        el.classes.add(exitClass);
+        await waitForVisualEnd(el);
+        el.classes.remove(exitClass);
     });
     return this;
 };
@@ -48,16 +49,18 @@ NDElement.prototype.transitionIn = function(transitionName) {
     const startClass = transitionName + '-enter-from';
     const endClass = transitionName + '-enter-to';
 
-    this.$element.classes.add(startClass);
+    const el = this.$element;
+
+    el.classes.add(startClass);
 
     this.mounted(() => {
         requestAnimationFrame(() => {
             requestAnimationFrame(() => {
-                this.$element.classes.remove(startClass);
-                this.$element.classes.add(endClass);
+                el.classes.remove(startClass);
+                el.classes.add(endClass);
 
-                waitForVisualEnd(this.$element).then(() => {
-                    this.$element.classes.remove(endClass);
+                waitForVisualEnd(el).then(() => {
+                    el.classes.remove(endClass);
                 });
             });
         });
@@ -73,10 +76,11 @@ NDElement.prototype.transition = function (transitionName) {
 };
 
 NDElement.prototype.animate = function(animationName) {
-    this.$element.classes.add(animationName);
+    const el = this.$element;
+    el.classes.add(animationName);
 
-    waitForVisualEnd(this.$element).then(() => {
-        this.$element.classes.remove(animationName);
+    waitForVisualEnd(el).then(() => {
+        el.classes.remove(animationName);
     });
 
     return this;

package/src/router/Router.js

@@ -268,3 +268,14 @@ Router.forward = function(name = null) {
 Router.back = function(name = null) {
     return Router.get(name).back();
 };
+
+Router.redirectTo = function(pathOrRouteName, params = null, name = null) {
+    let target = pathOrRouteName;
+    const router = Router.get(name);
+    const route = router.resolve({ name: pathOrRouteName, params });
+    if(route) {
+        target = { name: pathOrRouteName, params}
+    }
+    console.log(target);
+    return router.push(target);
+};

package/src/router/RouterComponent.js

@@ -1,5 +1,6 @@
 import Validator from "../core/utils/validator";
 import {Anchor} from "../../elements";
+import {ElementCreator} from "../core/wrappers/ElementCreator";
 
 /**
  *
@@ -73,7 +74,7 @@ export function RouterComponent(router, container) {
         cleanContainer();
         const anchor = getNodeAnchorForLayout(nodeToInsert, path);
 
-        $currentLayout = layout(anchor);
+        $currentLayout = ElementCreator.getChild(layout(anchor));
         $layoutCache.set(nodeToInsert, $currentLayout);
         container.appendChild($currentLayout);
     }

package/types/template-cloner.ts

@@ -37,6 +37,7 @@ export declare class TemplateCloner {
     property(fn: (...data: any[]) => any): BindingHydrator;
 
     attach(fn: (element: Element, ...data: any[]) => void): BindingHydrator;
+    callback(fn: (element: Element, ...data: any[]) => void): BindingHydrator;
 }
 
 export declare function useCache(fn: TemplateBuilder): CachedTemplateFunction;