native-document 1.0.94 → 1.0.98

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/utils/formatters.js

@@ -0,0 +1,91 @@
+const $parseDateParts = (value, locale) => {
+    const d = new Date(value);
+    return {
+        d,
+        parts: new Intl.DateTimeFormat(locale, {
+            year:   'numeric',
+            month:  'long',
+            day:    '2-digit',
+            hour:   '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+        }).formatToParts(d).reduce((acc, { type, value }) => {
+            acc[type] = value;
+            return acc;
+        }, {})
+    };
+};
+
+const $applyDatePattern = (pattern, d, parts) => {
+    const pad = n => String(n).padStart(2, '0');
+    return pattern
+        .replace('YYYY', parts.year)
+        .replace('YY',   parts.year.slice(-2))
+        .replace('MMMM', parts.month)
+        .replace('MMM',  parts.month.slice(0, 3))
+        .replace('MM',   pad(d.getMonth() + 1))
+        .replace('DD',   pad(d.getDate()))
+        .replace('D',    d.getDate())
+        .replace('HH',   parts.hour)
+        .replace('mm',   parts.minute)
+        .replace('ss',   parts.second);
+};
+
+export const Formatters = {
+
+    currency: (value, locale, { currency = 'XOF', notation, minimumFractionDigits, maximumFractionDigits } = {}) =>
+        new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency,
+            notation,
+            minimumFractionDigits,
+            maximumFractionDigits
+        }).format(value),
+
+    number: (value, locale, { notation, minimumFractionDigits, maximumFractionDigits } = {}) =>
+        new Intl.NumberFormat(locale, {
+            notation,
+            minimumFractionDigits,
+            maximumFractionDigits
+        }).format(value),
+
+    percent: (value, locale, { decimals = 1 } = {}) =>
+        new Intl.NumberFormat(locale, {
+            style:                'percent',
+            maximumFractionDigits: decimals
+        }).format(value),
+
+    date: (value, locale, { format, dateStyle = 'long' } = {}) => {
+        if (format) {
+            const { d, parts } = $parseDateParts(value, locale);
+            return $applyDatePattern(format, d, parts);
+        }
+        return new Intl.DateTimeFormat(locale, { dateStyle }).format(new Date(value));
+    },
+
+    time: (value, locale, { format, hour = '2-digit', minute = '2-digit', second } = {}) => {
+        if (format) {
+            const { d, parts } = $parseDateParts(value, locale);
+            return $applyDatePattern(format, d, parts);
+        }
+        return new Intl.DateTimeFormat(locale, { hour, minute, second }).format(new Date(value));
+    },
+
+    datetime: (value, locale, { format, dateStyle = 'long', hour = '2-digit', minute = '2-digit', second } = {}) => {
+        if (format) {
+            const { d, parts } = $parseDateParts(value, locale);
+            return $applyDatePattern(format, d, parts);
+        }
+        return new Intl.DateTimeFormat(locale, { dateStyle, hour, minute, second }).format(new Date(value));
+    },
+
+    relative: (value, locale, { unit = 'day', numeric = 'auto' } = {}) => {
+        const diff = Math.round((value - Date.now()) / (1000 * 60 * 60 * 24));
+        return new Intl.RelativeTimeFormat(locale, { numeric }).format(diff, unit);
+    },
+
+    plural: (value, locale, { singular, plural } = {}) => {
+        const rule = new Intl.PluralRules(locale).select(value);
+        return `${value} ${rule === 'one' ? singular : plural}`;
+    },
+};

package/src/core/utils/localstorage.js

@@ -0,0 +1,57 @@
+import NativeDocumentError from "../errors/NativeDocumentError";
+
+export const LocalStorage = {
+    getJson(key) {
+        let value = localStorage.getItem(key);
+        try {
+            return JSON.parse(value);
+        } catch (e) {
+            throw new NativeDocumentError('invalid_json:'+key);
+        }
+    },
+    getNumber(key) {
+        return Number(this.get(key));
+    },
+    getBool(key) {
+        const value = this.get(key);
+        return value === 'true' || value === '1';
+    },
+    setJson(key, value) {
+        localStorage.setItem(key, JSON.stringify(value));
+    },
+    setBool(key, value) {
+        localStorage.setItem(key, value ? 'true' : 'false');
+    },
+    get(key, defaultValue = null) {
+        return localStorage.getItem(key) || defaultValue;
+    },
+    set(key, value) {
+        return localStorage.setItem(key, value);
+    },
+    remove(key) {
+        localStorage.removeItem(key);
+    },
+    has(key) {
+        return localStorage.getItem(key) != null;
+    }
+}
+
+export const $getFromStorage = (key, value) => {
+    if(!LocalStorage.has(key)) {
+        return value;
+    }
+    switch (typeof value) {
+        case 'object': return LocalStorage.getJson(key) ?? value;
+        case 'boolean': return LocalStorage.getBool(key) ?? value;
+        case 'number': return LocalStorage.getNumber(key) ?? value;
+        default: return LocalStorage.get(key, value) ?? value;
+    }
+};
+
+export const $saveToStorage = (value) => {
+    switch (typeof value) {
+        case 'object': return LocalStorage.setJson;
+        case 'boolean': return LocalStorage.setBool;
+        default: return LocalStorage.set;
+    }
+};

package/src/core/utils/validator.js

@@ -1,9 +1,7 @@
-import ObservableItem from "../data/ObservableItem";
 import DebugManager from "./debug-manager";
 import NativeDocumentError from "../errors/NativeDocumentError";
 import ObservableChecker from "../data/ObservableChecker";
 import {NDElement} from "../wrappers/NDElement";
-import TemplateBinding from "../wrappers/TemplateBinding";
 
 const COMMON_NODE_TYPES = {
     ELEMENT: 1,

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;
+};

package/src/devtools.js

@@ -0,0 +1,9 @@
+import Devtools from './devtools';
+import NdViteDevtools from "../devtools/transformers/nd-vite-devtools.js";
+import transformComponentForHrm from "../devtools/transformers/src/transformComponentForHrm.js";
+
+export {
+    transformComponentForHrm,
+    NdViteDevtools,
+    Devtools,
+};

package/src/fetch/NativeFetch.js

@@ -36,11 +36,14 @@ export default function NativeFetch($baseUrl) {
                 configs.body = params;
             }
             else {
-                configs.headers['Content-Type'] = 'application/json';
                 if(method !== 'GET') {
+                    configs.headers['Content-Type'] = 'application/json';
                     configs.body = JSON.stringify(params);
                 } else {
-                    configs.params = params;
+                    const queryString = new URLSearchParams(params).toString();
+                    if (queryString) {
+                        endpoint = endpoint + (endpoint.includes('?') ? '&' : '?') + queryString;
+                    }
                 }
             }
         }