native-document 1.0.86 → 1.0.88

package/src/core/wrappers/AttributesWrapper.js

@@ -9,26 +9,6 @@ export function toggleElementClass(element, className, shouldAdd) {
     element.classes.toggle(className, shouldAdd);
 }
 
-export function toggleElementStyle(element, styleName, newValue) {
-    element.style[styleName] = newValue;
-}
-
-export function updateInputFromObserver(element, attributeName, newValue) {
-    if(Validator.isBoolean(newValue)) {
-        element[attributeName] = newValue;
-        return;
-    }
-    element[attributeName] = newValue === element.value;
-}
-
-export function updateObserverFromInput(element, attributeName, defaultValue, value) {
-    if(Validator.isBoolean(defaultValue)) {
-        value.set(element[attributeName]);
-        return;
-    }
-    value.set(element.value);
-}
-
 /**
  *
  * @param {HTMLElement} element
@@ -37,12 +17,12 @@ export function updateObserverFromInput(element, attributeName, defaultValue, va
 export function bindClassAttribute(element, data) {
     for(let className in data) {
         const value = data[className];
-        if(Validator.isObservable(value)) {
+        if(value.__$isObservable) {
             element.classes.toggle(className, value.val());
             value.subscribe(toggleElementClass.bind(null, element, className));
             continue;
         }
-        if(Validator.isObservableWhenResult(value)) {
+        if(value.__$isObservableWhen) {
             element.classes.toggle(className, value.isMath());
             value.subscribe(toggleElementClass.bind(null, element, className));
             continue;
@@ -64,9 +44,9 @@ export function bindClassAttribute(element, data) {
 export function bindStyleAttribute(element, data) {
     for(let styleName in data) {
         const value = data[styleName];
-        if(Validator.isObservable(value)) {
+        if(value.__$isObservable) {
             element.style[styleName] = value.val();
-            value.subscribe(toggleElementStyle.bind(null, element, styleName));
+            value.subscribe((newValue) => element.style[styleName] = newValue);
             continue;
         }
         element.style[styleName] = value;
@@ -80,18 +60,26 @@ export function bindStyleAttribute(element, data) {
  * @param {boolean|number|Observable} value
  */
 export function bindBooleanAttribute(element, attributeName, value) {
-    const defaultValue = Validator.isObservable(value) ? value.val() : value;
+    const isObservable = value.__$isObservable;
+    const defaultValue = isObservable? value.val() : value;
     if(Validator.isBoolean(defaultValue)) {
         element[attributeName] = defaultValue;
     }
     else {
         element[attributeName] = defaultValue === element.value;
     }
-    if(Validator.isObservable(value)) {
-        if(['checked'].includes(attributeName)) {
-            element.addEventListener('input', updateObserverFromInput.bind(null, element, attributeName, defaultValue, value));
+    if(isObservable) {
+        if(attributeName === 'checked') {
+            if(typeof defaultValue === 'boolean') {
+                element.addEventListener('input', () => value.set(element[attributeName]));
+            }
+            else {
+                element.addEventListener('input', () => value.set(element.value));
+            }
+            value.subscribe((newValue) => element[attributeName] = newValue);
+            return;
         }
-        value.subscribe(updateInputFromObserver.bind(null, element, attributeName));
+        value.subscribe((newValue) => element[attributeName] = (newValue === element.value));
     }
 }
 
@@ -103,19 +91,15 @@ export function bindBooleanAttribute(element, attributeName, value) {
  * @param {Observable} value
  */
 export function bindAttributeWithObservable(element, attributeName, value) {
-    const applyValue = (newValue) => {
-        if(attributeName === 'value') {
-            element.value = newValue;
-            return;
-        }
-        element.setAttribute(attributeName, newValue);
-    };
-    applyValue(value.val());
+    const applyValue = attributeName === 'value' ? (newValue) => element.value = newValue : (newValue) => element.setAttribute(attributeName, newValue);
     value.subscribe(applyValue);
 
     if(attributeName === 'value') {
+        element.value = value.val();
         element.addEventListener('input', () => value.set(element.value));
+        return;
     }
+    element.setAttribute(attributeName, value.val());
 }
 
 /**
@@ -127,10 +111,6 @@ export default function AttributesWrapper(element, attributes) {
 
     Validator.validateAttributes(attributes);
 
-    if(!Validator.isObject(attributes)) {
-        throw new NativeDocumentError('Attributes must be an object');
-    }
-
     for(let key in attributes) {
         const attributeName = key.toLowerCase();
         let value = attributes[attributeName];

package/src/core/wrappers/ElementCreator.js

@@ -69,6 +69,14 @@ export const ElementCreator = {
         }
         return Anchor('Fragment');
     },
+    bindTextNode(textNode, value) {
+        if(value?.__$isObservable) {
+            value.subscribe(newValue => textNode.nodeValue = newValue);
+            textNode.nodeValue = value.val();
+            return;
+        }
+        textNode.nodeValue = value;
+    },
     /**
      *
      * @param {*} children

package/src/core/wrappers/TemplateCloner.js

@@ -1,5 +1,4 @@
 import {ElementCreator} from "./ElementCreator";
-import {createTextNode} from "./HtmlElementWrapper";
 import TemplateBinding from "./TemplateBinding";
 
 const cloneBindingsDataCache = new WeakMap();
@@ -65,9 +64,8 @@ const bindAttachMethods = function(node, bindDingData, data) {
 
 
 const applyBindingTreePath = (root, target, data, path) => {
-    let newTarget = null;
     if(path.fn) {
-        newTarget = path.fn(data, target, root);
+        path.fn(data, target, root);
     }
     if(path.children) {
         for(let i = 0, length = path.children.length; i < length; i++) {
@@ -76,7 +74,6 @@ const applyBindingTreePath = (root, target, data, path) => {
             applyBindingTreePath(root, pathTargetNode, data, currentPath);
         }
     }
-    return newTarget;
 };
 
 export function TemplateCloner($fn) {
@@ -92,15 +89,10 @@ export function TemplateCloner($fn) {
         const bindDingData = cloneBindingsDataCache.get(node);
         if(node.nodeType === 3) {
             if(bindDingData && bindDingData.value) {
-                currentPath.fn = (data, targetNode, currentRoot) => {
-                    const newNode = bindDingData.value(data);
-                    if (targetNode === currentRoot) {
-                        return newNode;
-                    }
-                    targetNode.replaceWith(newNode);
-                    return null;
-                };
-                return bindDingData.value(data);
+                currentPath.fn = bindDingData.value;
+                const textNode = node.cloneNode();
+                bindDingData.value(data, textNode);
+                return textNode;
             }
             return node.cloneNode(true);
         }
@@ -137,11 +129,7 @@ export function TemplateCloner($fn) {
     const cloneWithBindingPaths = (data) => {
         let root = $node.cloneNode(true);
 
-        const newRoot = applyBindingTreePath(root, root, data, $bindingTreePath);
-        if(newRoot) {
-            root = newRoot;
-        }
-
+        applyBindingTreePath(root, root, data, $bindingTreePath);
         return root;
     };
 
@@ -176,13 +164,13 @@ export function TemplateCloner($fn) {
     }
     this.value = (callbackOrProperty) => {
         if(typeof callbackOrProperty !== 'function') {
-            return createBinding(function(data) {
+            return createBinding(function(data, textNode) {
                 const firstArgument = data[0];
-                return createTextNode(firstArgument[callbackOrProperty]);
+                ElementCreator.bindTextNode(textNode, firstArgument[callbackOrProperty]);
             }, 'value');
         }
-        return createBinding(function(data) {
-            return createTextNode(callbackOrProperty(...data));
+        return createBinding(function(data, textNode) {
+            ElementCreator.bindTextNode(textNode, callbackOrProperty(...data));
         }, 'value');
     };
     this.attr = (fn) => {

package/src/router/RouterComponent.js

@@ -1,4 +1,5 @@
 import Validator from "../core/utils/validator";
+import {Anchor} from "../../elements";
 
 /**
  *
@@ -8,22 +9,84 @@ import Validator from "../core/utils/validator";
 export function RouterComponent(router, container) {
 
     const $cache = new Map();
+    const $layoutCache = new WeakMap();
+    const $routeInstanceAnchors = new WeakMap();
+    let $currentLayout = null;
+
     let $lastNodeInserted  = null;
 
-    const updateContainer = function(node, route) {
-        container.innerHTML = '';
+    const getNodeAnchorForLayout = (node, path) => {
+        const existingAnchor = $routeInstanceAnchors.get(node);
+        if(existingAnchor) {
+            return existingAnchor;
+        }
+
+        let anchor = node;
+        if(!Validator.isAnchor(node)) {
+            anchor = Anchor(path);
+            anchor.appendChild(node);
+        }
+        $routeInstanceAnchors.set(node, anchor);
+        return anchor;
+    };
+
+    const removeLastNodeInserted = () => {
+        if(Validator.isAnchor($lastNodeInserted)) {
+            $lastNodeInserted.remove();
+        }
+    };
+    const cleanContainer = () => {
+        container.nodeValue = '';
+        removeLastNodeInserted();
+
+        if($currentLayout) {
+            $currentLayout.remove();
+        }
+    };
+
+    const getNodeToInsert = (node) => {
         let nodeToInsert = node;
-        const layout = route.layout();
         if(Validator.isNDElement(node)) {
             nodeToInsert = node.node();
         }
-        if(layout) {
-            container.appendChild(layout(nodeToInsert));
+        return nodeToInsert;
+    };
+
+    const updateContainerByLayout = (layout, node, route, path) => {
+        let nodeToInsert = getNodeToInsert(node);
+
+        const cachedLayout = $layoutCache.get(nodeToInsert);
+        if(cachedLayout) {
+            if(cachedLayout === $currentLayout) {
+                const layoutAnchor = getNodeAnchorForLayout(nodeToInsert, path);
+                removeLastNodeInserted();
+                layoutAnchor.replaceContent(nodeToInsert);
+                return;
+            }
+            cleanContainer();
+            $currentLayout = cachedLayout;
+            const layoutAnchor = getNodeAnchorForLayout(nodeToInsert, path);
+            layoutAnchor.replaceContent(nodeToInsert);
+            container.appendChild($currentLayout);
             return;
         }
-        if(Validator.isAnchor($lastNodeInserted)) {
-            $lastNodeInserted.remove();
+        cleanContainer();
+        const anchor = getNodeAnchorForLayout(nodeToInsert, path);
+
+        $currentLayout = layout(anchor);
+        $layoutCache.set(nodeToInsert, $currentLayout);
+        container.appendChild($currentLayout);
+    }
+
+    const updateContainer = function(node, route, path) {
+        const layout = route.layout();
+        if(layout) {
+            updateContainerByLayout(layout, node, route, path);
+            return;
         }
+        let nodeToInsert = getNodeToInsert(node);
+
+        cleanContainer();
         container.appendChild(nodeToInsert);
         $lastNodeInserted = node;
     };
@@ -41,7 +104,7 @@ export function RouterComponent(router, container) {
         const Component = route.component();
         const node = Component({ params, query });
         $cache.set(path, node);
-        updateContainer(node, route);
+        updateContainer(node, route, path);
     };
 
     router.subscribe(handleCurrentRouterState);