native-document 1.0.107 → 1.0.109

package/dist/native-document.components.min.js

@@ -643,7 +643,6 @@ var NativeComponents = (function (exports) {
 
     function NDElement(element) {
         this.$element = element;
-        this.$observer = null;
     }
 
     NDElement.prototype.__$isNDElement = true;
@@ -658,7 +657,7 @@ var NativeComponents = (function (exports) {
     };
 
     NDElement.prototype.refSelf = function(target, name) {
-        target[name] = this;
+        target[name] = new NDElement(this.$element);
         return this;
     };
 
@@ -679,23 +678,28 @@ var NativeComponents = (function (exports) {
         let element = this.$element;
         element.nd.unmountChildren();
         element.$ndProx = null;
-        delete element.nd?.on?.prevent;
-        delete element.nd?.on;
-        delete element.nd;
+
+        $lifeCycleObservers.delete(element);
+
         element = null;
         return this;
     };
 
+    const $lifeCycleObservers = new WeakMap();
     NDElement.prototype.lifecycle = function(states) {
-        this.$observer = this.$observer || DocumentObserver.watch(this.$element);
+        const el = this.$element;
+        if (!$lifeCycleObservers.has(el)) {
+            $lifeCycleObservers.set(el, DocumentObserver.watch(el));
+        }
+        const observer = $lifeCycleObservers.get(el);
 
         if(states.mounted) {
             this.$element.setAttribute('data--nd-mounted', '1');
-            this.$observer.mounted(states.mounted);
+            observer.mounted(states.mounted);
         }
         if(states.unmounted) {
             this.$element.setAttribute('data--nd-unmounted', '1');
-            this.$observer.unmounted(states.unmounted);
+            observer.unmounted(states.unmounted);
         }
         return this;
     };
@@ -2727,10 +2731,11 @@ var NativeComponents = (function (exports) {
 
     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;
     };
@@ -2739,16 +2744,18 @@ var NativeComponents = (function (exports) {
         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);
                     });
                 });
             });
@@ -2764,10 +2771,11 @@ var NativeComponents = (function (exports) {
     };
 
     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/dist/native-document.dev.js

@@ -395,7 +395,6 @@ var NativeDocument = (function (exports) {
 
     function NDElement(element) {
         this.$element = element;
-        this.$observer = null;
         {
             PluginsManager.emit('NDElementCreated', element, this);
         }
@@ -413,7 +412,7 @@ var NativeDocument = (function (exports) {
     };
 
     NDElement.prototype.refSelf = function(target, name) {
-        target[name] = this;
+        target[name] = new NDElement(this.$element);
         return this;
     };
 
@@ -434,23 +433,28 @@ var NativeDocument = (function (exports) {
         let element = this.$element;
         element.nd.unmountChildren();
         element.$ndProx = null;
-        delete element.nd?.on?.prevent;
-        delete element.nd?.on;
-        delete element.nd;
+
+        $lifeCycleObservers.delete(element);
+
         element = null;
         return this;
     };
 
+    const $lifeCycleObservers = new WeakMap();
     NDElement.prototype.lifecycle = function(states) {
-        this.$observer = this.$observer || DocumentObserver.watch(this.$element);
+        const el = this.$element;
+        if (!$lifeCycleObservers.has(el)) {
+            $lifeCycleObservers.set(el, DocumentObserver.watch(el));
+        }
+        const observer = $lifeCycleObservers.get(el);
 
         if(states.mounted) {
             this.$element.setAttribute('data--nd-mounted', '1');
-            this.$observer.mounted(states.mounted);
+            observer.mounted(states.mounted);
         }
         if(states.unmounted) {
             this.$element.setAttribute('data--nd-unmounted', '1');
-            this.$observer.unmounted(states.unmounted);
+            observer.unmounted(states.unmounted);
         }
         return this;
     };
@@ -2575,10 +2579,11 @@ var NativeDocument = (function (exports) {
 
     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;
     };
@@ -2587,16 +2592,18 @@ var NativeDocument = (function (exports) {
         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);
                     });
                 });
             });
@@ -2612,10 +2619,11 @@ var NativeDocument = (function (exports) {
     };
 
     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;
@@ -3239,56 +3247,66 @@ var NativeDocument = (function (exports) {
     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) {
+        for(let i = 0, length = bindDingData.attach.length; i < length; i++) {
+            const { methodName, fn } = bindDingData.attach[i];
             node.nd[methodName](function(...args) {
-                bindDingData.attach[methodName].apply(this, [...args, ...data]);
+                fn.apply(this, [...args, ...data]);
             });
         }
     };
 
 
-    const applyBindingTreePath = (root, target, data, path) => {
-        if(path.fn) {
-            if(typeof path.fn === 'string') {
-                ElementCreator.bindTextNode(target, data[0][path.fn]);
-            }
-            else {
-                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);
-            }
+    const applyBindingTreePath = (root, data, paths) => {
+        const rootPath = paths.at(-1);
+        const parents = [];
+        parents[rootPath.id] = root;
+        data[0];
+        const rootPathFn = rootPath.fn;
+        rootPathFn(data, root, root);
+
+
+        for(let i = 0, length = paths.length - 1; i < length; i++) {
+            const path = paths[i];
+            const target = parents[path.parentId].childNodes[path.index];
+
+            parents[path.id] = target;
+            const pathFn = path.fn;
+            pathFn(data, target, root);
         }
+        parents.length = 0;
     };
 
+    const noUpdate = () => {};
     function TemplateCloner($fn) {
         let $node = null;
         let $hasBindingData = false;
 
-        const $bindingTreePath = {
-            fn: null,
-            children: [],
-        };
+        const $bindingTreePath = [
+            {
+                id: 0,
+                parentId: null,
+                fn: noUpdate,
+            }
+        ];
 
+        let pathCounter = 0;
         const clone = (node, data, currentPath) => {
             const bindDingData = cloneBindingsDataCache.get(node);
             if(node.nodeType === 3) {
@@ -3308,33 +3326,47 @@ var NativeDocument = (function (exports) {
             if(bindDingData) {
                 bindAttributes(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;
+
+                if(hasAttributes && hasAttachMethods) {
+                    currentPath.fn = (data, targetNode) => {
+                        bindAttributes(targetNode, bindDingData, data);
+                        bindAttachMethods(targetNode, bindDingData, data);
+                    };
+                }
+                else if(hasAttributes) {
+                    currentPath.fn = (data, targetNode) => {
+                        bindAttributes(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) {
+                    $bindingTreePath.unshift(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);
             return root;
         };
 
@@ -3345,7 +3377,7 @@ var NativeDocument = (function (exports) {
                 return $node.cloneNode(true);
             }
 
-            const firstClone = clone($node, data, $bindingTreePath);
+            const firstClone = clone($node, data, $bindingTreePath[0]);
             this.clone = cloneWithBindingPaths;
             return firstClone;
         };
@@ -3369,7 +3401,9 @@ var NativeDocument = (function (exports) {
         };
         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));
@@ -3388,10 +3422,11 @@ var NativeDocument = (function (exports) {
     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);
         };
 
@@ -6714,7 +6749,7 @@ var NativeDocument = (function (exports) {
             cleanContainer();
             const anchor = getNodeAnchorForLayout(nodeToInsert, path);
 
-            $currentLayout = layout(anchor);
+            $currentLayout = ElementCreator.getChild(layout(anchor));
             $layoutCache.set(nodeToInsert, $currentLayout);
             container.appendChild($currentLayout);
         };
@@ -7014,6 +7049,17 @@ var NativeDocument = (function (exports) {
         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);
+    };
+
     function Link(options, children){
         const { to, href, ...attributes } = options;
         if(href) {