native-document 1.0.14 → 1.0.15

package/src/wrappers/DocumentObserver.js

@@ -1,44 +1,73 @@
-import {throttle} from "../utils/helpers";
+import {debounce} from "../utils/helpers";
 
 const DocumentObserver = {
-    elements: new Map(),
+    mounted: new WeakMap(),
+    mountedSupposedSize: 0,
+    unmounted: new WeakMap(),
+    unmountedSupposedSize: 0,
     observer: null,
-    checkMutation: throttle(function() {
-        for(const [element, data] of DocumentObserver.elements.entries()) {
-            const isCurrentlyInDom = document.body.contains(element);
-            if(isCurrentlyInDom && !data.inDom) {
-                data.inDom = true;
-                data.mounted.forEach(callback => callback(element));
-            } else if(!isCurrentlyInDom && data.inDom) {
-                data.inDom = false;
-                data.unmounted.forEach(callback => callback(element));
+    checkMutation: debounce(function(mutationsList) {
+        let i = 0;
+        for(const mutation of mutationsList) {
+            if(DocumentObserver.mountedSupposedSize > 0 ) {
+                for(const node of mutation.addedNodes) {
+                    const data = DocumentObserver.mounted.get(node);
+                    if(!data) {
+                        continue;
+                    }
+                    data.inDom = true;
+                    data.mounted && data.mounted(node);
+                }
+            }
+
+            if(DocumentObserver.unmountedSupposedSize > 0 ) {
+                for(const node of mutation.removedNodes) {
+                    const data = DocumentObserver.unmounted.get(node);
+                    if(!data) {
+                        continue;
+                    }
+
+                    data.inDom = false;
+                    if(data.unmounted && data.unmounted(node) === true) {
+                        data.disconnect();
+                        node.nd?.remove();
+                    }
+                }
             }
         }
-    }, 10, { debounce: true }),
+    }, 16),
     /**
      *
      * @param {HTMLElement} element
+     * @param {boolean} inDom
      * @returns {{watch: (function(): Map<any, any>), disconnect: (function(): boolean), mounted: (function(*): Set<any>), unmounted: (function(*): Set<any>)}}
      */
-    watch: function(element) {
-        let data = {};
-        if(DocumentObserver.elements.has(element)) {
-            data = DocumentObserver.elements.get(element);
-        } else {
-            const inDom = document.body.contains(element);
-            data = {
-                inDom,
-                mounted: new Set(),
-                unmounted: new Set(),
-            };
-            DocumentObserver.elements.set(element, data);
-        }
+    watch: function(element, inDom = false) {
+        let data = {
+            inDom,
+            mounted: null,
+            unmounted: null,
+            disconnect: () => {
+                DocumentObserver.mounted.delete(element);
+                DocumentObserver.unmounted.delete(element);
+                DocumentObserver.mountedSupposedSize--;
+                DocumentObserver.unmountedSupposedSize--;
+                data = null;
+            }
+        };
 
         return {
-            watch: () => DocumentObserver.elements.set(element, data),
-            disconnect: () => DocumentObserver.elements.delete(element),
-            mounted: (callback) => data.mounted.add(callback),
-            unmounted: (callback) => data.unmounted.add(callback)
+            disconnect: data.disconnect,
+            mounted: (callback) => {
+                data.mounted = callback;
+                DocumentObserver.mounted.set(element, data);
+                DocumentObserver.mountedSupposedSize++;
+            },
+            unmounted: (callback) => {
+                data.unmounted = callback;
+                DocumentObserver.unmounted.set(element, data);
+                DocumentObserver.unmountedSupposedSize++;
+            }
         };
     }
 };

package/src/wrappers/ElementCreator.js

@@ -0,0 +1,114 @@
+import Anchor from "../elements/anchor";
+import Validator from "../utils/validator";
+import AttributesWrapper from "./AttributesWrapper";
+
+const $nodeCache = new Map();
+let $textNodeCache = null;
+
+export const ElementCreator = {
+    createTextNode() {
+        if(!$textNodeCache) {
+            $textNodeCache = document.createTextNode('');
+        }
+        return $textNodeCache.cloneNode();
+    },
+    /**
+     *
+     * @param {HTMLElement|DocumentFragment} parent
+     * @param {ObservableItem} observable
+     * @returns {Text}
+     */
+    createObservableNode(parent, observable) {
+        const text = ElementCreator.createTextNode();
+        observable.subscribe(value => text.nodeValue = String(value));
+        text.nodeValue = observable.val();
+        parent && parent.appendChild(text);
+        return text;
+    },
+
+    /**
+     *
+     * @param {HTMLElement|DocumentFragment} parent
+     * @param {*} value
+     * @returns {Text}
+     */
+    createStaticTextNode(parent, value) {
+        let text = ElementCreator.createTextNode();
+        text.nodeValue = String(value);
+        parent && parent.appendChild(text);
+        return text;
+    },
+    /**
+     *
+     * @param {string} name
+     * @returns {HTMLElement|DocumentFragment}
+     */
+    createElement(name)  {
+        if(name) {
+            if($nodeCache.has(name)) {
+                return $nodeCache.get(name).cloneNode();
+            }
+            const node = document.createElement(name);
+            $nodeCache.set(name, node);
+            return node.cloneNode();
+        }
+        return new Anchor('Fragment');
+    },
+    /**
+     *
+     * @param {*} children
+     * @param {HTMLElement|DocumentFragment} parent
+     */
+    processChildren(children, parent) {
+        if(children === null) return;
+        const childrenArray = Array.isArray(children) ? children : [children];
+
+        for(let i = 0, length = childrenArray.length; i < length; i++) {
+            let child = childrenArray[i];
+            if (child === null) continue;
+            if(Validator.isString(child) && Validator.isFunction(child.resolveObservableTemplate)) {
+                child = child.resolveObservableTemplate();
+            }
+            if(Validator.isFunction(child)) {
+                this.processChildren(child(), parent);
+                continue;
+            }
+            if(Validator.isArray(child)) {
+                this.processChildren(child, parent);
+                continue;
+            }
+            if (Validator.isElement(child)) {
+                parent.appendChild(child);
+                continue;
+            }
+            if (Validator.isObservable(child)) {
+                ElementCreator.createObservableNode(parent, child);
+                continue;
+            }
+            if (child) {
+                ElementCreator.createStaticTextNode(parent, child);
+            }
+        }
+    },
+    /**
+     *
+     * @param {HTMLElement} element
+     * @param {Object} attributes
+     */
+    processAttributes(element, attributes) {
+        if(Validator.isFragment(element)) return;
+        if (attributes) {
+            AttributesWrapper(element, attributes);
+        }
+    },
+    /**
+     *
+     * @param {HTMLElement} element
+     * @param {Object} attributes
+     * @param {?Function} customWrapper
+     * @returns {HTMLElement|DocumentFragment}
+     */
+    setup(element, attributes, customWrapper) {
+        return element;
+    }
+};

package/src/wrappers/HtmlElementEventsWrapper.js

@@ -1,6 +1,32 @@
-function eventWrapper(element, name, callback) {
-    element.addEventListener(name, callback);
-    return element;
+
+
+/**
+ *
+ * @param {HTMLElement} element
+ * @returns {HTMLElement}
+ */
+function HtmlElementPreventEventsWrapper(element) {
+    const events = {};
+    return new Proxy(events, {
+        get(target, property) {
+            if(events[property]) {
+                return events[property];
+            }
+            events[property] = function(callback) {
+                element.addEventListener(property.toLowerCase(), function(event) {
+                    event.preventDefault();
+                    callback.apply(this, [event]);
+                });
+                return element
+            };
+            return events[property];
+        },
+        set(target, property, newValue, receiver) {
+            //...
+            this.get(target, property)(newValue);
+            return element;
+        }
+    });
 }
 
 /**
@@ -9,69 +35,30 @@ function eventWrapper(element, name, callback) {
  * @returns {HTMLElement}
  */
 export default function HtmlElementEventsWrapper(element) {
+    const events = {};
+    return new Proxy(events, {
+        get(target, property) {
+            if(events[property]) {
+                return events[property];
+            }
+            if(property === 'prevent') {
+                events[property] = HtmlElementPreventEventsWrapper(element);
+                return events[property];
+            }
+            if(property === 'removeAll') {
 
-    if(!element.nd) {
-        element.nd = {};
-    }
-
-    /**
-     * @param {Object<string,Function>} events
-     */
-    element.nd.on = function(events) {
-        for(const event in events) {
-            const callback = events[event];
-            eventWrapper(element, event, callback);
-        }
-        return element;
-    };
-    element.nd.on.prevent = function(events) {
-        for(const event in events) {
-            const callback = events[event];
-            eventWrapper(element, event, (event) => {
-                event.preventDefault();
-                callback && callback(event);
-                return element;
-            });
-        }
-        return element;
-    };
-    const events = {
-        click: (callback) => eventWrapper(element, 'click', callback),
-        focus: (callback) => eventWrapper(element, 'focus', callback),
-        blur: (callback) => eventWrapper(element, 'blur', callback),
-        input: (callback) => eventWrapper(element, 'input', callback),
-        change: (callback) => eventWrapper(element, 'change', callback),
-        keyup: (callback) => eventWrapper(element, 'keyup', callback),
-        keydown: (callback) => eventWrapper(element, 'keydown', callback),
-        beforeInput: (callback) => eventWrapper(element, 'beforeinput', callback),
-        mouseOver: (callback) => eventWrapper(element, 'mouseover', callback),
-        mouseOut: (callback) => eventWrapper(element, 'mouseout', callback),
-        mouseDown: (callback) => eventWrapper(element, 'mousedown', callback),
-        mouseUp: (callback) => eventWrapper(element, 'mouseup', callback),
-        mouseMove: (callback) => eventWrapper(element, 'mousemove', callback),
-        hover: (mouseInCallback, mouseOutCallback) => {
-            element.addEventListener('mouseover', mouseInCallback);
-            element.addEventListener('mouseout', mouseOutCallback);
+                return;
+            }
+            events[property] = function(callback) {
+                element.addEventListener(property.toLowerCase(), callback);
+                return element
+            };
+            return events[property];
         },
-        dropped: (callback) => eventWrapper(element, 'drop', callback),
-        submit: (callback) => eventWrapper(element, 'submit', callback),
-        dragEnd: (callback) => eventWrapper(element, 'dragend', callback),
-        dragStart: (callback) => eventWrapper(element, 'dragstart', callback),
-        drop: (callback) => eventWrapper(element, 'drop', callback),
-        dragOver: (callback) => eventWrapper(element, 'dragover', callback),
-        dragEnter: (callback) => eventWrapper(element, 'dragenter', callback),
-        dragLeave: (callback) => eventWrapper(element, 'dragleave', callback),
-    };
-    for(let event in events) {
-        element.nd.on[event] = events[event];
-        element.nd.on.prevent[event] = function(callback) {
-            eventWrapper(element, event.toLowerCase(), (event) => {
-                event.preventDefault();
-                callback && callback(event);
-            });
+        set(target, property, newValue, receiver) {
+            //...
+            this.get(target, property)(newValue);
             return element;
-        };
-    }
-
-    return element;
+        }
+    });
 }

package/src/wrappers/HtmlElementWrapper.js

@@ -1,91 +1,7 @@
-import HtmlElementEventsWrapper from "./HtmlElementEventsWrapper";
-import AttributesWrapper from "./AttributesWrapper";
-import NativeDocumentError from "../errors/NativeDocumentError";
-import DocumentObserver from "./DocumentObserver";
 import Validator from "../utils/validator";
 import DebugManager from "../utils/debug-manager";
-import Anchor from "../elements/anchor";
-import PluginsManager from "../utils/plugins-manager";
-
-/**
- *
- * @param {HTMLElement|DocumentFragment} parent
- * @param {ObservableItem} observable
- * @returns {Text}
- */
-const createObservableNode = function(parent, observable) {
-    const text = document.createTextNode('');
-    observable.subscribe(value => text.textContent = String(value));
-    text.textContent = observable.val();
-    parent && parent.appendChild(text);
-    return text;
-}
-
-/**
- *
- * @param {HTMLElement|DocumentFragment} parent
- * @param {*} value
- * @returns {Text}
- */
-const createStaticTextNode = function(parent, value) {
-    const text = document.createTextNode('');
-    text.textContent = String(value);
-    parent && parent.appendChild(text);
-    return text;
-}
-
-/**
- *
- * @param {HTMLElement} element
- */
-const addUtilsMethods = function(element) {
-    element.nd.wrap = (callback) => {
-        if(!Validator.isFunction(callback)) {
-            throw new NativeDocumentError('Callback must be a function');
-        }
-        callback && callback(element);
-        return element;
-    };
-    element.nd.ref = (target, name) => {
-        target[name] = element;
-        return element;
-    };
-
-    let $observer = null;
-
-    element.nd.appendChild = function(child) {
-        if(Validator.isArray(child)) {
-            ElementCreator.processChildren(child, element);
-            return;
-        }
-        if(Validator.isFunction(child)) {
-            child = child();
-            ElementCreator.processChildren(child(), element);
-        }
-        if(Validator.isElement(child)) {
-            ElementCreator.processChildren(child, element);
-        }
-    };
-
-    element.nd.lifecycle = function(states) {
-        $observer = $observer || DocumentObserver.watch(element);
-
-        states.mounted && $observer.mounted(states.mounted);
-        states.unmounted && $observer.unmounted(states.unmounted);
-        return element;
-    };
-
-    element.nd.mounted = (callback) => {
-        $observer = $observer || DocumentObserver.watch(element);
-        $observer.mounted(callback);
-        return element;
-    };
-    element.nd.unmounted = (callback) => {
-        $observer = $observer || DocumentObserver.watch(element);
-        $observer.unmounted(callback);
-        return element;
-    };
-};
+import {ElementCreator} from "./ElementCreator";
+import './NdPrototype';
 
 /**
  *
@@ -94,84 +10,10 @@ const addUtilsMethods = function(element) {
  */
 export const createTextNode = function(value) {
     return (Validator.isObservable(value))
-        ? createObservableNode(null, value)
-        : createStaticTextNode(null, value);
+        ? ElementCreator.createObservableNode(null, value)
+        : ElementCreator.createStaticTextNode(null, value);
 };
 
-export const ElementCreator = {
-    /**
-     *
-     * @param {string} name
-     * @returns {HTMLElement|DocumentFragment}
-     */
-    createElement(name)  {
-        return name ? document.createElement(name) : new Anchor('Fragment');
-    },
-    /**
-     *
-     * @param {*} children
-     * @param {HTMLElement|DocumentFragment} parent
-     */
-    processChildren(children, parent) {
-        if(children === null) return;
-        const childrenArray = Array.isArray(children) ? children : [children];
-        childrenArray.forEach(child => {
-            if (child === null) return;
-            if(Validator.isString(child) && Validator.isFunction(child.resolveObservableTemplate)) {
-                child = child.resolveObservableTemplate();
-            }
-            if(Validator.isFunction(child)) {
-                this.processChildren(child(), parent);
-                return;
-            }
-            if(Validator.isArray(child)) {
-                this.processChildren(child, parent);
-                return;
-            }
-            if (Validator.isElement(child)) {
-                parent.appendChild(child);
-                return;
-            }
-            if (Validator.isObservable(child)) {
-                createObservableNode(parent, child);
-                return;
-            }
-            if (child) {
-                createStaticTextNode(parent, child);
-            }
-        });
-    },
-    /**
-     *
-     * @param {HTMLElement} element
-     * @param {Object} attributes
-     */
-    processAttributes(element, attributes) {
-        if(Validator.isFragment(element)) return;
-        if (attributes) {
-            AttributesWrapper(element, attributes);
-        }
-    },
-    /**
-     *
-     * @param {HTMLElement} element
-     * @param {Object} attributes
-     * @param {?Function} customWrapper
-     * @returns {HTMLElement|DocumentFragment}
-     */
-    setup(element, attributes, customWrapper) {
-        element.nd = {};
-        HtmlElementEventsWrapper(element);
-        const item = (typeof customWrapper === 'function') ? customWrapper(element) : element;
-        addUtilsMethods(item);
-
-        PluginsManager.list().forEach(plugin => {
-            plugin?.element?.setup && plugin.element.setup(item, attributes);
-        });
-
-        return item;
-    }
-};
 
 /**
  *
@@ -180,7 +22,7 @@ export const ElementCreator = {
  * @returns {Function}
  */
 export default function HtmlElementWrapper(name, customWrapper) {
-    const $tagName = name.toLowerCase().trim();
+    const $tagName = name.toLowerCase();
 
     const builder = function(attributes, children = null) {
         try {
@@ -190,11 +32,12 @@ export default function HtmlElementWrapper(name, customWrapper) {
                 attributes = tempChildren;
             }
             const element = ElementCreator.createElement($tagName);
+            const finalElement = (typeof customWrapper === 'function') ? customWrapper(element) : element;
 
-            ElementCreator.processAttributes(element, attributes);
-            ElementCreator.processChildren(children, element);
+            ElementCreator.processAttributes(finalElement, attributes);
+            ElementCreator.processChildren(children, finalElement);
 
-            return ElementCreator.setup(element, attributes, customWrapper);
+            return ElementCreator.setup(finalElement, attributes, customWrapper);
         } catch (error) {
             DebugManager.error('ElementCreation', `Error creating ${$tagName}`, error);
         }
@@ -203,4 +46,5 @@ export default function HtmlElementWrapper(name, customWrapper) {
     builder.hold = (children, attributes) => (() => builder(children, attributes));
 
     return builder;
-}
+}
+

package/src/wrappers/NdPrototype.js

@@ -0,0 +1,109 @@
+import DocumentObserver from "./DocumentObserver";
+
+Object.defineProperty(HTMLElement.prototype, 'nd', {
+    get() {
+        if(this.$ndProx) {
+            return this.$ndProx;
+        }
+        let element = this;
+        let lifecycle = null;
+
+        this.$ndProx = new Proxy({}, {
+            get(target, property) {
+                if(/^on[A-Z]/.test(property)) {
+                    const event = property.replace(/^on/, '').toLowerCase();
+                    const shouldPrevent = event.toLowerCase().startsWith('prevent');
+                    let eventName = event.replace(/^prevent/i, '');
+                    const shouldStop = event.toLowerCase().startsWith('stop');
+                    eventName = eventName.replace(/^stop/i, '');
+
+                    return function(callback) {
+                        if(shouldPrevent && !shouldStop) {
+                            element.addEventListener(eventName, function(event) {
+                                event.preventDefault();
+                                callback(event);
+                            });
+                            return element;
+                        }
+                        if(!shouldPrevent && shouldStop) {
+                            element.addEventListener(eventName, function(event) {
+                                event.stopPropagation();
+                                callback(event);
+                            });
+                            return element;
+                        }
+                        if(shouldPrevent && shouldStop) {
+                            element.addEventListener(eventName, function(event) {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                callback(event);
+                            });
+                            return element;
+                        }
+                        element.addEventListener(eventName, callback);
+                        return element;
+                    };
+                    return fn;
+                }
+                if(property === 'ref') {
+                    if(ref) {
+                        return ref;
+                    }
+                    return function(target, name) {
+                        target[name] = element;
+                        return element;
+                    };
+                }
+                if(property === 'unmountChildren') {
+                    return () => {
+                        for(let i = 0, length = element.children.length; i < length; i++) {
+                            let elementchildren = element.children[i];
+                            if(!elementchildren.$ndProx) {
+                                elementchildren.nd?.remove();
+                            }
+                            elementchildren = null;
+                        }
+                    };
+                }
+                if(property === 'remove') {
+                    return function() {
+                        element.nd.unmountChildren();
+                        lifecycle = null;
+                        element.$ndProx = null;
+                        delete element.nd?.on?.prevent;
+                        delete element.nd?.on;
+                        delete element.nd;
+                    };
+                }
+                if(property === 'hasLifecycle') {
+                    return lifecycle !== null;
+                }
+                if(property === 'lifecycle') {
+                    if(lifecycle) {
+                        return lifecycle;
+                    }
+                    let $observer = null;
+                    lifecycle = function(states) {
+                        $observer = $observer || DocumentObserver.watch(element);
+
+                        states.mounted && $observer.mounted(states.mounted);
+                        states.unmounted && $observer.unmounted(states.unmounted);
+                        return element;
+                    };
+                    return lifecycle;
+                }
+                if(property === 'mounted' || property === 'unmounted') {
+                    return function(callback) {
+                        element.nd.lifecycle({ [property]: callback});
+                        return element;
+                    };
+                }
+            },
+            set(target, p, newValue, receiver) {
+
+            },
+            configurable: true
+        });
+        return this.$ndProx;
+    }
+});