native-document 1.0.87 → 1.0.89

package/src/core/data/ObservableWhen.js

@@ -6,8 +6,8 @@ export const ObservableWhen = function(observer, value) {
 
 ObservableWhen.prototype.__$isObservableWhen = true;
 
-ObservableWhen.prototype.subscribe = function(callback) {
-    return this.$observer.on(this.$target, callback);
+ObservableWhen.prototype.subscribe = function(callback, context = null) {
+    return this.$observer.on(this.$target, callback, context);
 };
 
 ObservableWhen.prototype.val = function() {

package/src/core/utils/callback-handler.js

@@ -0,0 +1,21 @@
+
+
+export function CallbackHandler(callback) {
+
+    if(!(this instanceof CallbackHandler)) {
+        return new CallbackHandler(callback);
+    }
+
+    const $contextSore = new WeakMap();
+
+    this.set = (target, context) => {
+        $contextSore.set(target, context);
+    };
+
+    this.callback = function() {
+        const context = $contextSore.get(this);
+        if(context) {
+            callback(context, ...arguments);
+        }
+    };
+}

package/src/core/wrappers/AttributesWrapper.js

@@ -1,50 +1,30 @@
 import Validator from "../utils/validator";
-import NativeDocumentError from "../errors/NativeDocumentError";
 import {BOOLEAN_ATTRIBUTES} from "./constants.js";
 import {Observable} from "../data/Observable";
-import './prototypes/bind-class-extensions';
-
-
-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);
-}
 
+export const handleElementAttributeClass = function(shouldAdd, _, __, context) {
+    context.element.classes.toggle(context.className, shouldAdd);
+};
 /**
  *
  * @param {HTMLElement} element
  * @param {Object} data
  */
 export function bindClassAttribute(element, data) {
-    for(let className in data) {
+    const classNames = Object.keys(data);
+
+    for(let i = 0, length = classNames.length; i < length; i++) {
+        const className = classNames[i];
         const value = data[className];
-        if(Validator.isObservable(value)) {
+        if(value.__$isObservable) {
             element.classes.toggle(className, value.val());
-            value.subscribe(toggleElementClass.bind(null, element, className));
+            value.subscribe(handleElementAttributeClass, { element, className });
+            // value.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
             continue;
         }
-        if(Validator.isObservableWhenResult(value)) {
+        if(value.__$isObservableWhen) {
             element.classes.toggle(className, value.isMath());
-            value.subscribe(toggleElementClass.bind(null, element, className));
+            value.subscribe(handleElementAttributeClass, { element, className });
             continue;
         }
         if(value.$hydrate) {
@@ -53,7 +33,6 @@ export function bindClassAttribute(element, data) {
         }
         element.classes.toggle(className, value)
     }
-    data = null;
 }
 
 /**
@@ -62,11 +41,13 @@ export function bindClassAttribute(element, data) {
  * @param {Object} data
  */
 export function bindStyleAttribute(element, data) {
-    for(let styleName in data) {
+    const keys = Object.keys(data)
+    for(let i = 0, length = keys.length; i < length; i++) {
+        const styleName = keys[i];
         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 +61,27 @@ export function bindStyleAttribute(element, data) {
  * @param {boolean|number|Observable} value
  */
 export function bindBooleanAttribute(element, attributeName, value) {
-    const defaultValue = Validator.isObservable(value) ? value.val() : value;
-    if(Validator.isBoolean(defaultValue)) {
+    const isObservable = value.__$isObservable;
+    const defaultValue = isObservable? value.val() : value;
+    const isBoolValue = typeof defaultValue === "boolean";
+    if(isBoolValue) {
         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(isBoolValue) {
+                element.addEventListener('input', () => value.set(element[attributeName]));
+                value.subscribe((newValue) => element[attributeName] = newValue);
+                return;
+            }
+            element.addEventListener('input', () => value.set(element.value));
+            value.subscribe((newValue) => element[attributeName] = (newValue === element.value));
+            return;
         }
-        value.subscribe(updateInputFromObserver.bind(null, element, attributeName));
+        value.subscribe((newValue) => element[attributeName] = (newValue === element.value));
     }
 }
 
@@ -103,19 +93,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());
-    value.subscribe(applyValue);
-
     if(attributeName === 'value') {
+        value.subscribe((newValue) => element.value = newValue);
+        element.value = value.val();
         element.addEventListener('input', () => value.set(element.value));
+        return;
     }
+
+    value.subscribe((newValue) => element.setAttribute(attributeName, newValue));
+    element.setAttribute(attributeName, value.val());
 }
 
 /**
@@ -125,15 +111,15 @@ export function bindAttributeWithObservable(element, attributeName, value) {
  */
 export default function AttributesWrapper(element, attributes) {
 
-    Validator.validateAttributes(attributes);
-
-    if(!Validator.isObject(attributes)) {
-        throw new NativeDocumentError('Attributes must be an object');
+    if(process.env.NODE_ENV === 'development') {
+        Validator.validateAttributes(attributes);
     }
+    const attributeNames = Object.keys(attributes);
 
-    for(let key in attributes) {
-        const attributeName = key.toLowerCase();
-        let value = attributes[attributeName];
+    for(let i = 0, length = attributeNames.length; i < length; i++) {
+        const originalAttributeName = attributeNames[i];
+        const attributeName = originalAttributeName.toLowerCase();
+        let value = attributes[originalAttributeName];
         if(value == null) {
             continue;
         }
@@ -156,6 +142,10 @@ export default function AttributesWrapper(element, attributes) {
             continue;
         }
 
+        if(attributeName === 'value') {
+            element.value = value;
+            continue;
+        }
         element.setAttribute(attributeName, value);
     }
     return element;

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/core/wrappers/prototypes/bind-class-extensions.js

@@ -1,16 +1,20 @@
 import ObservableItem from "../../../core/data/ObservableItem";
-import {toggleElementClass} from "../AttributesWrapper";
 import {ObservableWhen} from "../../data/ObservableWhen";
 import TemplateBinding from "../../../core/wrappers/TemplateBinding";
 
+
+export const handleElementAttributeClass = function(shouldAdd, _, __, context) {
+    context.element.classes.toggle(context.className, shouldAdd);
+};
+
 ObservableItem.prototype.bindNdClass = function(element, className) {
     element.classes.toggle(className, this.val());
-    this.subscribe(toggleElementClass.bind(null, element, className));
+    this.subscribe(handleElementAttributeClass, { element, className });
 };
 
 ObservableWhen.prototype.bindNdClass = function(element, className) {
     element.classes.toggle(className, this.isMath());
-    this.subscribe(toggleElementClass.bind(null, element, className));
+    this.subscribe(handleElementAttributeClass, { element, className });
 };
 
 TemplateBinding.prototype.bindNdClass = function(element, className) {