native-document 1.0.16 → 1.0.17

package/src/wrappers/NDElement.js

@@ -0,0 +1,81 @@
+import DocumentObserver from "./DocumentObserver";
+import { EVENTS } from "../utils/events";
+
+export function NDElement(element) {
+    this.$element = element;
+    this.$observer = null;
+}
+
+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(event);
+        });
+        return this;
+    };
+    NDElement.prototype['onStop'+event] = function(callback) {
+        this.$element.addEventListener(eventName, function(event) {
+            event.stopPropagation();
+            callback(event);
+        });
+        return this;
+    };
+    NDElement.prototype['onPreventStop'+event] = function(callback) {
+        this.$element.addEventListener(eventName, function(event) {
+            event.stopPropagation();
+            event.preventDefault();
+            callback(event);
+        });
+        return this;
+    };
+}
+
+NDElement.prototype.ref = function(target, name) {
+    target[name] = element;
+    return this;
+};
+
+NDElement.prototype.unmountChildren = function() {
+    let element = this.$element;
+    for(let i = 0, length = element.children.length; i < length; i++) {
+        let elementchildren = element.children[i];
+        if(!elementchildren.$ndProx) {
+            elementchildren.nd?.remove();
+        }
+        elementchildren = null;
+    }
+    element = null;
+    return this;
+};
+
+NDElement.prototype.remove = function() {
+    let element = this.$element;
+    element.nd.unmountChildren();
+    element.$ndProx = null;
+    delete element.nd?.on?.prevent;
+    delete element.nd?.on;
+    delete element.nd;
+    element = null;
+    return this;
+};
+
+NDElement.prototype.lifecycle = function(states) {
+    this.$observer = this.$observer || DocumentObserver.watch(this.$element);
+
+    states.mounted && this.$observer.mounted(states.mounted);
+    states.unmounted && this.$observer.unmounted(states.unmounted);
+    return this;
+};
+NDElement.prototype.mounted = function(callback) {
+    return this.lifecycle({ mounted: callback });
+};
+
+NDElement.prototype.mounted = function(callback) {
+    return this.lifecycle({ unmounted: callback });
+};

package/src/wrappers/NdPrototype.js

@@ -1,106 +1,13 @@
-import DocumentObserver from "./DocumentObserver";
+import { NDElement } from "./NDElement";
 
 Object.defineProperty(HTMLElement.prototype, 'nd', {
     get() {
-        if(this.$ndProx) {
-            return this.$ndProx;
+        if(this.$nd) {
+            return this.$nd;
         }
-        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') {
-                    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;
+        this.$nd = new NDElement(this);
+        this.$nd.nd = this.$nd;
+        return this.$nd;
     }
 });