native-document 1.0.35 → 1.0.36

package/src/elements/control/for-each.js

@@ -1,19 +1,20 @@
-import ObservableItem from "../../data/ObservableItem";
 import {Observable} from "../../data/Observable";
 import Validator from "../../utils/validator";
 import Anchor from "../anchor";
 import DebugManager from "../../utils/debug-manager";
 import {getKey} from "../../utils/helpers";
 import { ElementCreator } from "../../wrappers/ElementCreator";
+import NativeDocumentError from "../../errors/NativeDocumentError";
 
 /**
  *
  * @param {Array|Object|ObservableItem} data
  * @param {Function} callback
- * @param {?Function} key
+ * @param {?Function|?string} key
+ * @param {{shouldKeepItemsInCache: boolean}?} configs
  * @returns {DocumentFragment}
  */
-export function ForEach(data, callback, key) {
+export function ForEach(data, callback, key, { shouldKeepItemsInCache = false } = {}) {
     const element = new Anchor('ForEach');
     const blockEnd = element.endElement();
     const blockStart = element.startElement();
@@ -28,6 +29,9 @@ export function ForEach(data, callback, key) {
     };
 
     const cleanCache = (parent) => {
+        if(shouldKeepItemsInCache) {
+            return;
+        }
         for(const [keyId, cacheItem] of cache.entries()) {
             if(keyIds.has(keyId)) {
                 continue;
@@ -59,7 +63,10 @@ export function ForEach(data, callback, key) {
 
         try {
             const indexObserver = callback.length >= 2 ? Observable(indexKey) : null;
-            let child = ElementCreator.getChild(callback(item, indexObserver))
+            let child = ElementCreator.getChild(callback(item, indexObserver));
+            if(!child || Validator.isFragment(child)) {
+                throw new NativeDocumentError("ForEachArray child can't be null or undefined!");
+            }
             cache.set(keyId, { keyId, isNew: true, child: new WeakRef(child), indexObserver});
         } catch (e) {
             DebugManager.error('ForEach', `Error creating element for key ${keyId}` , e);
@@ -114,7 +121,7 @@ export function ForEach(data, callback, key) {
         keyIds.clear();
         if(Array.isArray(items)) {
             for(let i = 0, length = items.length; i < length; i++) {
-                const keyId= handleContentItem(items[i], i);
+                const keyId = handleContentItem(items[i], i);
                 keyIds.add(keyId);
             }
         } else {

package/src/elements/control/show-if.js

@@ -9,10 +9,10 @@ import {ElementCreator} from "../../wrappers/ElementCreator";
  *
  * @param {ObservableItem|ObservableChecker} condition
  * @param {*} child
- * @param {string|null} comment
+ * @param {{comment?: string|null, shouldKeepInCache?: Boolean}} comment
  * @returns {DocumentFragment}
  */
-export const ShowIf = function(condition, child, comment = null) {
+export const ShowIf = function(condition, child, { comment = null, shouldKeepInCache = true} = {}) {
     if(!(Validator.isObservable(condition))) {
         return DebugManager.warn('ShowIf', "ShowIf : condition must be an Observable / "+comment, condition);
     }
@@ -20,10 +20,13 @@ export const ShowIf = function(condition, child, comment = null) {
 
     let childElement = null;
     const getChildElement = () => {
-        if(childElement) {
+        if(childElement && shouldKeepInCache) {
             return childElement;
         }
         childElement = ElementCreator.getChild(child);
+        if(Validator.isFragment(childElement)) {
+            childElement = Array.from(childElement.children);
+        }
         return childElement;
     };
 

package/src/elements/control/switch.js

@@ -30,6 +30,9 @@ export const Match = function($condition, values, shouldKeepInCache = true) {
             return null;
         }
         item = ElementCreator.getChild(item);
+        if(Validator.isFragment(item)) {
+            item = Array.from(item.children);
+        }
         shouldKeepInCache && cache.set(key, item);
         return item;
     }

package/src/utils/helpers.js

@@ -52,7 +52,7 @@ export const getKey = (item, defaultKey, key) => {
     if(!Validator.isObject(item)) {
         return item;
     }
-    return item[key] ?? defaultKey;
+    return item[key]?.val?.() ??  item[key] ?? defaultKey;
 };
 
 export const trim = function(str, char) {

package/src/utils/plugins-manager.js

@@ -24,10 +24,11 @@ const PluginsManager = (function() {
             }
             for(const methodName in plugin) {
                 if(/^on[A-Z]/.test(methodName)) {
-                    if(!$pluginByEvents.has(methodName)) {
-                        $pluginByEvents.set(methodName, new Set());
+                    const eventName = methodName.replace(/^on/, '');
+                    if(!$pluginByEvents.has(eventName)) {
+                        $pluginByEvents.set(eventName, new Set());
                     }
-                    $pluginByEvents.get(methodName).add(plugin);
+                    $pluginByEvents.get(eventName).add(plugin);
                 }
             }
         },
@@ -49,20 +50,19 @@ const PluginsManager = (function() {
             }
             $plugins.delete(pluginName);
         },
-        emit(event, ...data) {
-            const eventMethodName = 'on'+event
-            if(!$pluginByEvents.has(eventMethodName)) {
+        emit(eventName, ...data) {
+            if(!$pluginByEvents.has(eventName)) {
                 return;
             }
-            const plugins = $pluginByEvents.get(eventMethodName);
+            const plugins = $pluginByEvents.get(eventName);
 
             for(const plugin of plugins) {
-                const callback = plugin[eventMethodName];
+                const callback = plugin[eventName];
                 if(typeof callback === 'function') {
                     try{
                         callback.call(plugin, ...data);
                     } catch (error) {
-                        DebugManager.error('Plugin Manager', `Error in plugin ${plugin.$name} for event ${eventMethodName}`, error);
+                        DebugManager.error('Plugin Manager', `Error in plugin ${plugin.$name} for event ${eventName}`, error);
                     }
                 }
             }

package/src/utils/validator.js

@@ -4,15 +4,23 @@ import NativeDocumentError from "../errors/NativeDocumentError";
 import ObservableChecker from "../data/ObservableChecker";
 import {NDElement} from "../wrappers/NDElement";
 
+const COMMON_NODE_TYPES = {
+    ELEMENT: 1,
+    TEXT: 3,
+    COMMENT: 8,
+    DOCUMENT: 9,
+    DOCUMENT_FRAGMENT: 11
+};
+
 const Validator = {
     isObservable(value) {
-        return value instanceof ObservableItem || value instanceof ObservableChecker || value?.__$isObservable;
+        return  value?.__$isObservable || value instanceof ObservableItem || value instanceof ObservableChecker;
     },
     isProxy(value) {
         return value?.__isProxy__
     },
     isObservableChecker(value) {
-        return value instanceof ObservableChecker || value?.__$isObservableChecker;
+        return value?.__$isObservableChecker || value instanceof ObservableChecker;
     },
     isArray(value) {
         return Array.isArray(value);
@@ -36,13 +44,17 @@ const Validator = {
         return typeof value === 'object';
     },
     isJson(value) {
-        return typeof value === 'object' && value !== null && value.constructor.name === 'Object' && !Array.isArray(value);
+        return typeof value === 'object' && value !== null && !Array.isArray(value) && value.constructor.name === 'Object';
     },
     isElement(value) {
-        return value instanceof HTMLElement || value instanceof DocumentFragment  || value instanceof Text;
+        return value && (
+            value.nodeType === COMMON_NODE_TYPES.ELEMENT ||
+            value.nodeType === COMMON_NODE_TYPES.TEXT ||
+            value.nodeType === COMMON_NODE_TYPES.DOCUMENT_FRAGMENT
+        );
     },
     isFragment(value) {
-        return value instanceof DocumentFragment;
+        return value?.nodeType === COMMON_NODE_TYPES.DOCUMENT_FRAGMENT;
     },
     isStringOrObservable(value) {
         return this.isString(value) || this.isObservable(value);
@@ -55,7 +67,7 @@ const Validator = {
             ['string', 'number', 'boolean'].includes(typeof child);
     },
     isNDElement(child) {
-        return child instanceof NDElement || child?.constructor?.__$isNDElement;
+        return child?.__$isNDElement || child instanceof NDElement;
     },
     isValidChildren(children) {
         if (!Array.isArray(children)) {
@@ -100,7 +112,16 @@ const Validator = {
         }
         return /\{\{#ObItem::\([0-9]+\)\}\}/.test(data);
     },
-    validateAttributes(attributes) {
+    validateAttributes(attributes) {},
+
+    validateEventCallback(callback) {
+        if (typeof callback !== 'function') {
+            throw new NativeDocumentError('Event callback must be a function');
+        }
+    }
+};
+if(process.env.NODE_ENV === 'development') {
+    Validator.validateAttributes = function(attributes) {
         if (!attributes || typeof attributes !== 'object') {
             return attributes;
         }
@@ -113,13 +134,7 @@ const Validator = {
         }
 
         return attributes;
-    },
-
-    validateEventCallback(callback) {
-        if (typeof callback !== 'function') {
-            throw new NativeDocumentError('Event callback must be a function');
-        }
-    }
-};
+    };
+}
 
 export default Validator;

package/src/wrappers/AttributesWrapper.js

@@ -3,6 +3,27 @@ import NativeDocumentError from "../errors/NativeDocumentError";
 import {BOOLEAN_ATTRIBUTES} from "./constants.js";
 import {Observable} from "../data/Observable";
 
+
+function toggleElementClass(element, className, shouldAdd) {
+    element.classes.toggle(className, shouldAdd);
+}
+function toggleElementStyle(element, styleName, newValue) {
+    element.style[styleName] = newValue;
+}
+function updateInputFromObserver(element, attributeName, newValue) {
+    if(Validator.isBoolean(newValue)) {
+        element[attributeName] = newValue;
+        return;
+    }
+    element[attributeName] = newValue === element.value;
+}
+function updateObserverFromInput(element, attributeName, defaultValue, value) {
+    if(Validator.isBoolean(defaultValue)) {
+        value.set(element[attributeName]);
+        return;
+    }
+    value.set(element.value);
+}
 /**
  *
  * @param {HTMLElement} element
@@ -12,23 +33,22 @@ function bindClassAttribute(element, data) {
     for(let className in data) {
         const value = data[className];
         if(Validator.isObservable(value)) {
-            element.classList.toggle(className, value.val());
-            value.subscribe(newValue => element.classList.toggle(className, newValue));
+            element.classes.toggle(className, value.val());
+            value.subscribe(toggleElementClass.bind(null, element, className));
             continue;
         }
         if(value.$observer) {
-            element.classList.toggle(className, value.$observer.val() === value.$target);
-            value.$observer.on(value.$target, function(isTargetValue) {
-                element.classList.toggle(className, isTargetValue)
-            });
+            element.classes.toggle(className, value.$observer.val() === value.$target);
+            value.$observer.on(value.$target, toggleElementClass.bind(null, element, className));
             continue;
         }
         if(value.$hydrate) {
             value.$hydrate(element, className);
             continue;
         }
-        element.classList.toggle(className, value)
+        element.classes.toggle(className, value)
     }
+    data = null;
 }
 
 /**
@@ -41,9 +61,7 @@ function bindStyleAttribute(element, data) {
         const value = data[styleName];
         if(Validator.isObservable(value)) {
             element.style[styleName] = value.val();
-            value.subscribe(newValue => {
-                element.style[styleName] = newValue;
-            });
+            value.subscribe(toggleElementStyle.bind(null, element, styleName));
             continue;
         }
         element.style[styleName] = value;
@@ -66,21 +84,9 @@ function bindBooleanAttribute(element, attributeName, value) {
     }
     if(Validator.isObservable(value)) {
         if(['checked'].includes(attributeName)) {
-            element.addEventListener('input', () => {
-                if(Validator.isBoolean(defaultValue)) {
-                    value.set(element[attributeName]);
-                    return;
-                }
-                value.set(element.value);
-            });
+            element.addEventListener('input', updateObserverFromInput.bind(null, element, attributeName, defaultValue));
         }
-        value.subscribe(newValue => {
-            if(Validator.isBoolean(newValue)) {
-                element[attributeName] = newValue;
-                return;
-            }
-            element[attributeName] = newValue === element.value;
-        });
+        value.subscribe(updateInputFromObserver.bind(null, element, attributeName));
     }
 }
 
@@ -134,11 +140,11 @@ export default function AttributesWrapper(element, attributes) {
                 return value.map(item => Validator.isObservable(item) ? item.val() : item).join(' ') || ' ';
             }, observables);
         }
-        if(attributeName === 'class' && Validator.isJson(value)) {
+        if(attributeName === 'class' && Validator.isObject(value)) {
             bindClassAttribute(element, value);
             continue;
         }
-        if(attributeName === 'style' && Validator.isJson(value)) {
+        if(attributeName === 'style' && Validator.isObject(value)) {
             bindStyleAttribute(element, value);
             continue;
         }
@@ -150,6 +156,10 @@ export default function AttributesWrapper(element, attributes) {
             bindAttributeWithObservable(element, attributeName, value);
             continue;
         }
+        if(value.$hydrate) {
+            value.$hydrate(element, attributeName);
+            continue;
+        }
         element.setAttribute(attributeName, value);
 
     }

package/src/wrappers/ElementCreator.js

@@ -73,14 +73,19 @@ export const ElementCreator = {
      */
     processChildren(children, parent) {
         if(children === null) return;
-        const childrenArray = Array.isArray(children) ? children : [children];
-
         PluginsManager.emit('BeforeProcessChildren', parent);
-
-        for(let i = 0, length = childrenArray.length; i < length; i++) {
-            let child = this.getChild(childrenArray[i]);
-            if (child === null) continue;
-            parent.appendChild(child);
+        if(!Array.isArray(children)) {
+            let child = this.getChild(children);
+            if(child) {
+                parent.appendChild(child);
+            }
+        }
+        else {
+            for(let i = 0, length = children.length; i < length; i++) {
+                let child = this.getChild(children[i]);
+                if (child === null) continue;
+                parent.appendChild(child);
+            }
         }
 
         PluginsManager.emit('AfterProcessChildren', parent);

package/src/wrappers/HtmlElementWrapper.js

@@ -15,13 +15,17 @@ export const createTextNode = function(value) {
 };
 
 
-function createHtmlElement($tagName, _attributes, _children = null, customWrapper) {
-    const { props: attributes, children = null } = normalizeComponentArgs(_attributes, _children);
-    const element = ElementCreator.createElement($tagName);
-    const finalElement = (typeof customWrapper === 'function') ? customWrapper(element) : element;
+function createHtmlElement($tagName, customWrapper, _attributes, _children = null) {
+    let { props: attributes, children = null } = normalizeComponentArgs(_attributes, _children);
+    let element = ElementCreator.createElement($tagName);
+    let finalElement = (customWrapper && typeof customWrapper === 'function') ? customWrapper(element) : element;
 
-    ElementCreator.processAttributes(finalElement, attributes);
-    ElementCreator.processChildren(children, finalElement);
+    if(attributes) {
+        ElementCreator.processAttributes(finalElement, attributes);
+    }
+    if(children) {
+        ElementCreator.processChildren(children, finalElement);
+    }
 
     return ElementCreator.setup(finalElement, attributes, customWrapper);
 }
@@ -33,6 +37,6 @@ function createHtmlElement($tagName, _attributes, _children = null, customWrappe
  * @returns {Function}
  */
 export default function HtmlElementWrapper(name, customWrapper) {
-    return (_attributes, _children = null) => createHtmlElement(name.toLowerCase(), _attributes, _children, customWrapper);
+    return createHtmlElement.bind(null, name.toLowerCase(), customWrapper);
 };
 

package/src/wrappers/NDElement.js

@@ -9,35 +9,7 @@ export function NDElement(element) {
 }
 NDElement.prototype.__$isNDElement = true;
 
-for(const event of EVENTS) {
-    const eventName = event.toLowerCase();
-    NDElement.prototype['on'+event] = function(callback) {
-        this.$element.addEventListener(eventName, callback);
-        return this;
-    };
-    NDElement.prototype['onPrevent'+event] = function(callback) {
-        this.$element.addEventListener(eventName, function(event) {
-            event.preventDefault();
-            callback && callback(event);
-        });
-        return this;
-    };
-    NDElement.prototype['onStop'+event] = function(callback) {
-        this.$element.addEventListener(eventName, function(event) {
-            event.stopPropagation();
-            callback && callback(event);
-        });
-        return this;
-    };
-    NDElement.prototype['onPreventStop'+event] = function(callback) {
-        this.$element.addEventListener(eventName, function(event) {
-            event.stopPropagation();
-            event.preventDefault();
-            callback && callback(event);
-        });
-        return this;
-    };
-}
+
 
 NDElement.prototype.valueOf = function() {
     return this.$element;
@@ -93,7 +65,7 @@ NDElement.prototype.htmlElement = function() {
 
 NDElement.prototype.node = NDElement.prototype.htmlElement;
 
-NDElement.prototype.attach = function(methodName, bindingHydrator) {
-    bindingHydrator.$hydrate(this.$element, methodName);
+NDElement.prototype.attach = function(bindingHydrator) {
+    bindingHydrator.$hydrate(this.$element);
     return this.$element;
 };

package/src/wrappers/NDElementEventPrototypes.js

@@ -0,0 +1,116 @@
+import {EVENTS} from "../utils/events";
+import {NDElement} from "./NDElement";
+import Validator from "../utils/validator";
+
+(function() {
+    const DelegatedEventsCallbackStore = {};
+
+    const addCallbackToCallbacksStore = function(element, eventName, callback) {
+        if(!element) return;
+        if(!DelegatedEventsCallbackStore[eventName]) {
+            const eventStore = new WeakMap();
+            DelegatedEventsCallbackStore[eventName] = eventStore;
+            eventStore.set(element, callback);
+            return;
+        }
+        const eventStore = DelegatedEventsCallbackStore[eventName];
+
+        if(!eventStore.has(element)) {
+            eventStore.set(element, callback);
+            return;
+        }
+        const existingCallbacks = eventStore.get(element);
+        if(!Validator.isArray(existingCallbacks)) {
+            eventStore.set(element, [store[eventName], callback]);
+            return;
+        }
+        existingCallbacks.push(callback);
+    }
+
+    const handleDelegatedCallbacks = function(container, eventName) {
+        container.addEventListener(eventName, (event) => {
+            const eventStore = DelegatedEventsCallbackStore[eventName];
+            if(!eventStore) {
+                return;
+            }
+            let target = event.target;
+            while(target && target !== container) {
+                const callback = eventStore.get(target);
+                if(!callback) {
+                    target = target.parentElement;
+                    continue;
+                }
+
+                if(Validator.isFunction(callback)) {
+                    callback.call(target, event);
+                }
+                else {
+                    for(let i = 0; i < callback.length; i++) {
+                        callback[i].call(target, event);
+                    }
+                }
+                return;
+            }
+        });
+    };
+
+
+    const preventDefaultWrapper = function(element, eventName, callback) {
+        element.addEventListener(eventName, (event) => {
+            event.preventDefault();
+            callback && callback.call(element, event);
+        });
+        return this;
+    }
+    const stopPropagationWrapper = function(element, eventName, callback) {
+        element.addEventListener(eventName, (event) => {
+            event.stopPropagation();
+            callback && callback.call(element, event);
+        });
+        return this;
+    };
+    const preventDefaultAndStopPropagationWrapper = function(element, eventName, callback) {
+        element.addEventListener(eventName, (event) => {
+            event.stopPropagation();
+            event.preventDefault();
+            callback && callback.call(element, event);
+        });
+        return this;
+    };
+    const captureEventWrapper = function(element, eventName, directHandler) {
+        if(directHandler) {
+            element.addEventListener(eventName, directHandler);
+            return this;
+        }
+        handleDelegatedCallbacks(element, eventName);
+        return this;
+    }
+
+    for(const event of EVENTS) {
+        const eventName = event.toLowerCase();
+        NDElement.prototype['on'+event] = function(callback) {
+            this.$element.addEventListener(eventName, callback);
+            return this;
+        };
+        NDElement.prototype['onPrevent'+event] = function(callback) {
+            return preventDefaultWrapper(this.$element, eventName, callback);
+        };
+        NDElement.prototype['onStop'+event] = function(callback) {
+            return stopPropagationWrapper(this.$element, eventName, callback);
+        };
+        NDElement.prototype['onPreventStop'+event] = function(callback) {
+            return preventDefaultAndStopPropagationWrapper(this.$element, eventName, callback);
+        };
+
+        NDElement.prototype['when'+event] = function(callback) {
+            addCallbackToCallbacksStore(this.$element, eventName, callback);
+            return this;
+        };
+
+        NDElement.prototype['capture'+event] = function(directHandler) {
+            captureEventWrapper(this.$element, eventName, directHandler);
+            return this;
+        };
+    };
+
+}())

package/src/wrappers/NdPrototype.js

@@ -3,12 +3,59 @@ import { NDElement } from "./NDElement";
 Object.defineProperty(HTMLElement.prototype, 'nd', {
     configurable: true,
     get() {
-        if(this.$nd) {
-            return this.$nd;
+        return new NDElement(this);
+    }
+});
+
+const classListMethods = {
+    getClasses() {
+        return this.$element.className?.split(' ').filter(Boolean);
+    },
+    add(value) {
+        const classes = this.getClasses();
+        if(classes.indexOf(value) >= 0) {
+            return;
+        }
+        classes.push(value);
+        this.$element.className = classes.join(' ');
+    },
+    remove(value) {
+        const classes = this.getClasses();
+        const index = classes.indexOf(value);
+        if(index < 0) {
+            return;
+        }
+        classes.splice(index, 1);
+        this.$element.className = classes.join(' ');
+    },
+    toggle(value, force = undefined) {
+        const classes = this.getClasses();
+        const index = classes.indexOf(value);
+        if(index >= 0) {
+            if(force === true) {
+                return;
+            }
+            classes.splice(index, 1);
         }
+        else {
+            if(force === false) {
+                return;
+            }
+            classes.push(value);
+        }
+        this.$element.className = classes.join(' ');
+    },
+    contains(value) {
+        return this.getClasses().indexOf(value) >= 0;
+    }
+}
 
-        this.$nd = new NDElement(this);
-        this.$nd.nd = this.$nd;
-        return this.$nd;
+Object.defineProperty(HTMLElement.prototype, 'classes', {
+    configurable: true,
+    get() {
+        return {
+            $element: this,
+            ...classListMethods
+        };
     }
 });