native-document 1.0.94 → 1.0.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.94",
+  "version": "1.0.95",
   "main": "index.js",
   "type": "module",
   "scripts": {

package/src/core/elements/anchor.js

@@ -15,6 +15,7 @@ export default function Anchor(name, isUniqueChild = false) {
 
     anchorFragment.nativeInsertBefore = anchorFragment.insertBefore;
     anchorFragment.nativeAppendChild = anchorFragment.appendChild;
+    anchorFragment.nativeAppend = anchorFragment.append;
 
     const isParentUniqueChild = (parent) => (isUniqueChild || (parent.firstChild === anchorStart && parent.lastChild === anchorEnd))
 
@@ -50,59 +51,66 @@ export default function Anchor(name, isUniqueChild = false) {
         before = before ?? anchorEnd;
         insertBefore(parent, child, before);
     };
+
     anchorFragment.append = function(...args ) {
         return anchorFragment.appendChild(args);
-    }
+    };
 
-    anchorFragment.removeChildren = function() {
+    anchorFragment.removeChildren = async function() {
         const parent = anchorEnd.parentNode;
         if(parent === anchorFragment) {
             return;
         }
-        if(isParentUniqueChild(parent)) {
-            parent.replaceChildren(anchorStart, anchorEnd);
-            return;
-        }
+        // if(isParentUniqueChild(parent)) {
+        //     parent.replaceChildren(anchorStart, anchorEnd);
+        //     return;
+        // }
 
         let itemToRemove = anchorStart.nextSibling, tempItem;
-        const fragment = document.createDocumentFragment();
+        const removes = [];
         while(itemToRemove && itemToRemove !== anchorEnd) {
             tempItem = itemToRemove.nextSibling;
-            fragment.append(itemToRemove);
+            removes.push(itemToRemove.remove());
             itemToRemove =  tempItem;
         }
-        fragment.replaceChildren();
-    }
-    anchorFragment.remove = function() {
+        await Promise.all(removes);
+    };
+
+    anchorFragment.remove = async function() {
         const parent = anchorEnd.parentNode;
         if(parent === anchorFragment) {
             return;
         }
         let itemToRemove = anchorStart.nextSibling, tempItem;
+        const allItemToRemove = [];
+        const removes = [];
         while(itemToRemove && itemToRemove !== anchorEnd) {
             tempItem = itemToRemove.nextSibling;
-            anchorFragment.nativeAppendChild(itemToRemove);
+            allItemToRemove.push(itemToRemove);
+            removes.push(itemToRemove.remove());
             itemToRemove = tempItem;
         }
+        await Promise.all(removes);
+        anchorFragment.nativeAppend(...allItemToRemove);
     };
 
-    anchorFragment.removeWithAnchors = function() {
-        anchorFragment.removeChildren();
+    anchorFragment.removeWithAnchors = async function() {
+        await anchorFragment.removeChildren();
         anchorStart.remove();
         anchorEnd.remove();
     };
 
-    anchorFragment.replaceContent = function(child) {
+    anchorFragment.replaceContent = async function(child) {
         const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
         const parent = anchorEnd.parentNode;
         if(!parent) {
             return;
         }
-        if(isParentUniqueChild(parent)) {
-            parent.replaceChildren(anchorStart, childElement, anchorEnd);
-            return;
-        }
-        anchorFragment.removeChildren();
+        // if(isParentUniqueChild(parent)) {
+        //     parent.replaceChildren(anchorStart, childElement, anchorEnd);
+        //     return;
+        // }
+        await anchorFragment.removeChildren();
         parent.insertBefore(childElement, anchorEnd);
     };
 

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

@@ -50,7 +50,7 @@ export function ForEach(data, callback, key, { shouldKeepItemsInCache = false }
             }
             const child = cacheItem.child?.deref();
             if(parent && child) {
-                parent.removeChild(child);
+                child.remove();
             }
             cacheItem.indexObserver?.cleanup();
             cacheItem.child = null;

package/src/core/wrappers/DocumentObserver.js

@@ -1,97 +1,167 @@
-
 const DocumentObserver = {
     mounted: new WeakMap(),
+    beforeUnmount: new WeakMap(),
     mountedSupposedSize: 0,
     unmounted: new WeakMap(),
     unmountedSupposedSize: 0,
     observer: null,
+
     executeMountedCallback(node) {
         const data = DocumentObserver.mounted.get(node);
         if(!data) {
             return;
         }
         data.inDom = true;
-        data.mounted && data.mounted(node);
+        if(!data.mounted) {
+            return;
+        }
+        if(Array.isArray(data.mounted)) {
+            for(const cb of data.mounted) {
+                cb(node);
+            }
+            return;
+        }
+        data.mounted(node);
     },
+
     executeUnmountedCallback(node) {
         const data = DocumentObserver.unmounted.get(node);
         if(!data) {
             return;
         }
-
         data.inDom = false;
-        if(data.unmounted && data.unmounted(node) === true) {
+        if(!data.unmounted) {
+            return;
+        }
+
+        let shouldRemove = false;
+        if(Array.isArray(data.unmounted)) {
+            for(const cb of data.unmounted) {
+                if(cb(node) === true) {
+                    shouldRemove = true;
+                }
+            }
+        } else {
+            shouldRemove = data.unmounted(node) === true;
+        }
+
+        if(shouldRemove) {
             data.disconnect();
             node.nd?.remove();
         }
     },
+
     checkMutation: function(mutationsList) {
-        let i = 0;
         for(const mutation of mutationsList) {
-            if(DocumentObserver.mountedSupposedSize > 0 ) {
+            if(DocumentObserver.mountedSupposedSize > 0) {
                 for(const node of mutation.addedNodes) {
                     DocumentObserver.executeMountedCallback(node);
                     if(!node.querySelectorAll) {
-                        return;
+                        continue;
                     }
                     const children = node.querySelectorAll('[data--nd-mounted]');
-                    if(!children.length) {
-                        return;
-                    }
-                    for(const node of children) {
-                        DocumentObserver.executeMountedCallback(node);
+                    for(const child of children) {
+                        DocumentObserver.executeMountedCallback(child);
                     }
                 }
             }
 
-            if(DocumentObserver.unmountedSupposedSize > 0 ) {
-                for(const node of mutation.removedNodes) {
+            if (DocumentObserver.unmountedSupposedSize > 0) {
+                for (const node of mutation.removedNodes) {
                     DocumentObserver.executeUnmountedCallback(node);
                     if(!node.querySelectorAll) {
-                        return;
+                        continue;
                     }
                     const children = node.querySelectorAll('[data--nd-unmounted]');
-                    if(!children.length) {
-                        return;
-                    }
-                    for(const node of children) {
-                        DocumentObserver.executeUnmountedCallback(node);
+                    for(const child of children) {
+                        DocumentObserver.executeUnmountedCallback(child);
                     }
                 }
             }
         }
     },
+
     /**
-     *
      * @param {HTMLElement} element
      * @param {boolean} inDom
-     * @returns {{watch: (function(): Map<any, any>), disconnect: (function(): boolean), mounted: (function(*): Set<any>), unmounted: (function(*): Set<any>)}}
+     * @returns {{ disconnect: Function, mounted: Function, unmounted: Function, off: Function }}
      */
     watch: function(element, inDom = false) {
+        let mountedRegistered   = false;
+        let unmountedRegistered = false;
+
         let data = {
             inDom,
             mounted: null,
             unmounted: null,
             disconnect: () => {
-                DocumentObserver.mounted.delete(element);
-                DocumentObserver.unmounted.delete(element);
-                DocumentObserver.mountedSupposedSize--;
-                DocumentObserver.unmountedSupposedSize--;
+                if (mountedRegistered) {
+                    DocumentObserver.mounted.delete(element);
+                    DocumentObserver.mountedSupposedSize--;
+                }
+                if (unmountedRegistered) {
+                    DocumentObserver.unmounted.delete(element);
+                    DocumentObserver.unmountedSupposedSize--;
+                }
                 data = null;
             }
         };
 
+        const addListener = (type, callback) => {
+            if (!data[type]) {
+                data[type] = callback;
+                return;
+            }
+            if (!Array.isArray(data[type])) {
+                data[type] = [data[type], callback];
+                return;
+            }
+            data[type].push(callback);
+        };
+
+        const removeListener = (type, callback) => {
+            if(!data?.[type]) {
+                return;
+            }
+            if(Array.isArray(data[type])) {
+                const index = data[type].indexOf(callback);
+                if(index > -1) {
+                    data[type].splice(index, 1);
+                }
+                if(data[type].length === 1) {
+                    data[type] = data[type][0];
+                }
+                if(data[type].length === 0) {
+                    data[type] = null;
+                }
+                return;
+            }
+            data[type] = null;
+        };
+
         return {
-            disconnect: data.disconnect,
+            disconnect: () => data?.disconnect(),
+
             mounted: (callback) => {
-                data.mounted = callback;
+                addListener('mounted', callback);
                 DocumentObserver.mounted.set(element, data);
-                DocumentObserver.mountedSupposedSize++;
+                if (!mountedRegistered) {
+                    DocumentObserver.mountedSupposedSize++;
+                    mountedRegistered = true;
+                }
             },
+
             unmounted: (callback) => {
-                data.unmounted = callback;
+                addListener('unmounted', callback);
                 DocumentObserver.unmounted.set(element, data);
-                DocumentObserver.unmountedSupposedSize++;
+                if (!unmountedRegistered) {
+                    DocumentObserver.unmountedSupposedSize++;
+                    unmountedRegistered = true;
+                }
+            },
+
+            off: (type, callback) => {
+                removeListener(type, callback);
             }
         };
     }
@@ -102,4 +172,5 @@ DocumentObserver.observer.observe(document.body, {
     childList: true,
     subtree: true,
 });
+
 export default DocumentObserver;

package/src/core/wrappers/ElementCreator.js

@@ -3,6 +3,7 @@ import Validator from "../utils/validator";
 import AttributesWrapper from "./AttributesWrapper";
 import PluginsManager from "../utils/plugins-manager";
 import './prototypes/nd-element-extensions';
+import './prototypes/nd-element.transition.extensions';
 import './prototypes/attributes-extensions';
 
 const $nodeCache = new Map();
@@ -95,6 +96,10 @@ export const ElementCreator = {
             PluginsManager.emit('AfterProcessChildren', parent);
         }
     },
+    async safeRemove(element) {
+        await element.remove();
+
+    },
     getChild(child) {
         if(child == null) {
             return null;

package/src/core/wrappers/NDElement.js

@@ -73,6 +73,37 @@ NDElement.prototype.unmounted = function(callback) {
     return this.lifecycle({ unmounted: callback });
 };
 
+NDElement.prototype.beforeUnmount = function(id, callback) {
+    const el = this.$element;
+
+    if(!DocumentObserver.beforeUnmount.has(el)) {
+        DocumentObserver.beforeUnmount.set(el, new Map());
+        const originalRemove = el.remove.bind(el);
+
+        let  $isUnmounting = false
+
+        el.remove = async () => {
+            if($isUnmounting) {
+                return;
+            }
+            $isUnmounting = true;
+
+            try {
+                const callbacks = DocumentObserver.beforeUnmount.get(el);
+                for (const cb of callbacks.values()) {
+                    await cb.call(this, el);
+                }
+            } finally {
+                originalRemove();
+                $isUnmounting = false;
+            }
+        };
+    }
+
+    DocumentObserver.beforeUnmount.get(el).set(id, callback);
+    return this;
+};
+
 NDElement.prototype.htmlElement = function() {
     return this.$element;
 };
@@ -160,7 +191,7 @@ NDElement.prototype.with = function(methods) {
     }
 
     return this;
-}
+};
 
 /**
  * Extends the NDElement prototype with new methods available to all NDElement instances.

package/src/core/wrappers/prototypes/nd-element.transition.extensions.js

@@ -0,0 +1,83 @@
+import {NDElement} from "../NDElement";
+
+/**
+ * @param {HTMLElement} el
+ * @param {number} timeout
+ */
+const waitForVisualEnd = (el, timeout = 1000) => {
+    return new Promise((resolve) => {
+        let isResolved = false;
+
+        const cleanupAndResolve = (e) => {
+            if (e && e.target !== el) return;
+            if (isResolved) return;
+
+            isResolved = true;
+            el.removeEventListener('transitionend', cleanupAndResolve);
+            el.removeEventListener('animationend', cleanupAndResolve);
+            clearTimeout(timer);
+            resolve();
+        };
+
+        el.addEventListener('transitionend', cleanupAndResolve);
+        el.addEventListener('animationend', cleanupAndResolve);
+
+        const timer = setTimeout(cleanupAndResolve, timeout);
+
+        const style = window.getComputedStyle(el);
+        const hasTransition = style.transitionDuration !== '0s';
+        const hasAnimation = style.animationDuration !== '0s';
+
+        if (!hasTransition && !hasAnimation) {
+            cleanupAndResolve();
+        }
+    });
+};
+
+NDElement.prototype.transitionOut = function(transitionName) {
+    const exitClass = transitionName + '-exit';
+    this.beforeUnmount('transition-exit', async function() {
+        this.$element.classes.add(exitClass);
+        await waitForVisualEnd(this.$element);
+        this.$element.classes.remove(exitClass);
+    });
+    return this;
+};
+
+NDElement.prototype.transitionIn = function(transitionName) {
+    const startClass = transitionName + '-enter-from';
+    const endClass = transitionName + '-enter-to';
+
+    this.$element.classes.add(startClass);
+
+    this.mounted(() => {
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                this.$element.classes.remove(startClass);
+                this.$element.classes.add(endClass);
+
+                waitForVisualEnd(this.$element).then(() => {
+                    this.$element.classes.remove(endClass);
+                });
+            });
+        });
+    });
+    return this;
+};
+
+
+NDElement.prototype.transition = function (transitionName) {
+    this.transitionIn(transitionName);
+    this.transitionOut(transitionName);
+    return this;
+};
+
+NDElement.prototype.animate = function(animationName) {
+    this.$element.classes.add(animationName);
+
+    waitForVisualEnd(this.$element).then(() => {
+        this.$element.classes.remove(animationName);
+    });
+
+    return this;
+};