native-document 1.0.124 → 1.0.126

package/dist/native-document.components.min.js

@@ -14,7 +14,7 @@ var NativeComponents = (function (exports) {
             if(this.$element) {
                 return this.$element.nd;
             }
-            this.$storeElement(this.node());
+            this.$storeElement(this.toNdElement());
             return this.$element?.nd;
         }
     });
@@ -363,16 +363,16 @@ var NativeComponents = (function (exports) {
         // });
     };
 
-    let DebugManager$2 = {};
+    let DebugManager$1 = {};
     {
-        DebugManager$2 = {
+        DebugManager$1 = {
             log() {},
             warn() {},
             error() {},
             disable() {}
         };
     }
-    var DebugManager$1 = DebugManager$2;
+    var DebugManager$2 = DebugManager$1;
 
     /**
      *
@@ -474,6 +474,16 @@ var NativeComponents = (function (exports) {
         unmounted: new WeakMap(),
         unmountedSupposedSize: 0,
         observer: null,
+        initObserver: () => {
+            if(DocumentObserver.observer) {
+                return;
+            }
+            DocumentObserver.observer = new MutationObserver(DocumentObserver.checkMutation);
+            DocumentObserver.observer.observe(document.body, {
+                childList: true,
+                subtree: true,
+            });
+        },
 
         executeMountedCallback(node) {
             const data = DocumentObserver.mounted.get(node);
@@ -521,6 +531,7 @@ var NativeComponents = (function (exports) {
         },
 
         checkMutation: function(mutationsList) {
+            console.log('mutationsList', mutationsList);
             for(const mutation of mutationsList) {
                 if(DocumentObserver.mountedSupposedSize > 0) {
                     for(const node of mutation.addedNodes) {
@@ -559,6 +570,8 @@ var NativeComponents = (function (exports) {
             let mountedRegistered   = false;
             let unmountedRegistered = false;
 
+            DocumentObserver.initObserver();
+
             let data = {
                 inDom,
                 mounted: null,
@@ -636,12 +649,6 @@ var NativeComponents = (function (exports) {
         }
     };
 
-    DocumentObserver.observer = new MutationObserver(DocumentObserver.checkMutation);
-    DocumentObserver.observer.observe(document.body, {
-        childList: true,
-        subtree: true,
-    });
-
     function NDElement(element) {
         this.$element = element;
     }
@@ -847,17 +854,17 @@ var NativeComponents = (function (exports) {
             const method = methods[name];
 
             if (typeof method !== 'function') {
-                DebugManager$1.warn('NDElement.extend', `"${name}" is not a function, skipping`);
+                DebugManager$2.warn('NDElement.extend', `"${name}" is not a function, skipping`);
                 continue;
             }
 
             if (protectedMethods.has(name)) {
-                DebugManager$1.error('NDElement.extend', `Cannot override protected method "${name}"`);
+                DebugManager$2.error('NDElement.extend', `Cannot override protected method "${name}"`);
                 throw new NativeDocumentError(`Cannot override protected method "${name}"`);
             }
 
             if (NDElement.prototype[name]) {
-                DebugManager$1.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
+                DebugManager$2.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
             }
 
             NDElement.prototype[name] = method;
@@ -1082,7 +1089,7 @@ var NativeComponents = (function (exports) {
                     }
                 }
                 if (cleanedCount > 0) {
-                    DebugManager$1.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
+                    DebugManager$2.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
                 }
             }
         };
@@ -2354,9 +2361,11 @@ var NativeComponents = (function (exports) {
     function AnchorWithSentinel(name) {
         const instance = Reflect.construct(DocumentFragment, [], AnchorWithSentinel);
         const sentinel = document.createComment((name || '') + ' Anchor Sentinel');
+        const anchorStart = document.createComment('Anchor Start : '+name);
+        const anchorEnd = document.createComment('/ Anchor End '+name);
         const events = {};
 
-        instance.appendChild(sentinel);
+        instance.append(anchorStart, sentinel, anchorEnd);
 
         const observer = new MutationObserver(() => {
             if (sentinel.parentNode !== instance && !(sentinel.parentNode instanceof DocumentFragment)) {
@@ -2368,6 +2377,8 @@ var NativeComponents = (function (exports) {
 
 
         instance.$sentinel = sentinel;
+        instance.$start = anchorStart;
+        instance.$end = anchorEnd;
         instance.$observer = observer;
         instance.$events = events;
 
@@ -2456,13 +2467,6 @@ var NativeComponents = (function (exports) {
     function Anchor(name, isUniqueChild = false) {
         const anchorFragment = new AnchorWithSentinel(name);
 
-        /**
-         * State :
-         * 1. Not injected in the DOM
-         * 2. Injected in the DOM and should be the only child of parent
-         * 3. Injected in the DOM and the parent may have other children
-         */
-
         anchorFragment.onConnectedOnce((parent) => {
             if(isUniqueChild) {
                 oneChildAnchorOverwriting(anchorFragment, parent);
@@ -2471,11 +2475,8 @@ var NativeComponents = (function (exports) {
 
         anchorFragment.__Anchor__ = true;
 
-        const anchorStart = document.createComment('Anchor Start : '+name);
-        const anchorEnd = document.createComment('/ Anchor End '+name);
-
-        anchorFragment.appendChild(anchorStart);
-        anchorFragment.appendChild(anchorEnd);
+        const anchorStart = anchorFragment.$start;
+        const anchorEnd = anchorFragment.$end;
 
         anchorFragment.nativeInsertBefore = anchorFragment.insertBefore;
         anchorFragment.nativeAppendChild = anchorFragment.appendChild;
@@ -2572,7 +2573,7 @@ var NativeComponents = (function (exports) {
                 return;
             }
             if(isParentUniqueChild(parent)) {
-                anchorFragment.append.apply(anchorFragment, parent.childNodes);
+                anchorFragment.nativeAppend.apply(anchorFragment, parent.childNodes);
                 parent.replaceChildren(anchorStart, anchorEnd);
                 return;
             }
@@ -2601,11 +2602,11 @@ var NativeComponents = (function (exports) {
                 return;
             }
             if(isParentUniqueChild(parent)) {
-                parent.replaceChildren(anchorStart, childElement, anchorEnd);
+                parent.replaceChildren(anchorStart, child, anchorEnd);
                 return;
             }
             anchorFragment.removeChildren();
-            parent.insertBefore(childElement, anchorEnd);
+            parent.insertBefore(child, anchorEnd);
         };
 
         anchorFragment.setContent = anchorFragment.replaceContent;
@@ -2999,7 +3000,11 @@ var NativeComponents = (function (exports) {
 
             return (attr, children) => createElement(attr, children)
         }
-        return () => Anchor('');
+        return (children, name = '') => {
+            const anchor = Anchor(name);
+            anchor.append(children);
+            return anchor;
+        };
     }
 
     function NodeCloner($element) {
@@ -3940,7 +3945,7 @@ var NativeComponents = (function (exports) {
         const $getStoreOrThrow = (method, name) => {
             const item = $stores.get(name);
             if (!item) {
-                DebugManager$1.error('Store', `Store.${method}('${name}') : store not found. Did you call Store.create('${name}') first?`);
+                DebugManager$2.error('Store', `Store.${method}('${name}') : store not found. Did you call Store.create('${name}') first?`);
                 throw new NativeDocumentError(
                     `Store.${method}('${name}') : store not found.`
                 );
@@ -3953,7 +3958,7 @@ var NativeComponents = (function (exports) {
          */
         const $applyReadOnly = (observer, name, context) => {
             const readOnlyError = (method) => () => {
-                DebugManager$1.error('Store', `Store.${context}('${name}') is read-only. '${method}()' is not allowed.`);
+                DebugManager$2.error('Store', `Store.${context}('${name}') is read-only. '${method}()' is not allowed.`);
                 throw new NativeDocumentError(
                     `Store.${context}('${name}') is read-only.`
                 );
@@ -3984,7 +3989,7 @@ var NativeComponents = (function (exports) {
              */
             create(name, value) {
                 if ($stores.has(name)) {
-                    DebugManager$1.warn('Store', `Store.create('${name}') : a store with this name already exists. Use Store.get('${name}') to retrieve it.`);
+                    DebugManager$2.warn('Store', `Store.create('${name}') : a store with this name already exists. Use Store.get('${name}') to retrieve it.`);
                     throw new NativeDocumentError(
                         `Store.create('${name}') : a store with this name already exists.`
                     );
@@ -4005,7 +4010,7 @@ var NativeComponents = (function (exports) {
              */
             createResettable(name, value) {
                 if ($stores.has(name)) {
-                    DebugManager$1.warn('Store', `Store.createResettable('${name}') : a store with this name already exists.`);
+                    DebugManager$2.warn('Store', `Store.createResettable('${name}') : a store with this name already exists.`);
                     throw new NativeDocumentError(
                         `Store.createResettable('${name}') : a store with this name already exists.`
                     );
@@ -4041,7 +4046,7 @@ var NativeComponents = (function (exports) {
              */
             createComposed(name, computation, dependencies) {
                 if ($stores.has(name)) {
-                    DebugManager$1.warn('Store', `Store.createComposed('${name}') : a store with this name already exists.`);
+                    DebugManager$2.warn('Store', `Store.createComposed('${name}') : a store with this name already exists.`);
                     throw new NativeDocumentError(
                         `Store.createComposed('${name}') : a store with this name already exists.`
                     );
@@ -4064,7 +4069,7 @@ var NativeComponents = (function (exports) {
                     }
                     const depItem = $stores.get(depName);
                     if (!depItem) {
-                        DebugManager$1.error('Store', `Store.createComposed('${name}') : dependency '${depName}' not found. Create it first.`);
+                        DebugManager$2.error('Store', `Store.createComposed('${name}') : dependency '${depName}' not found. Create it first.`);
                         throw new NativeDocumentError(
                             `Store.createComposed('${name}') : dependency store '${depName}' not found.`
                         );
@@ -4098,13 +4103,13 @@ var NativeComponents = (function (exports) {
             reset(name) {
                 const item = $getStoreOrThrow('reset', name);
                 if (item.composed) {
-                    DebugManager$1.error('Store', `Store.reset('${name}') : composed stores cannot be reset. Their value is derived from dependencies.`);
+                    DebugManager$2.error('Store', `Store.reset('${name}') : composed stores cannot be reset. Their value is derived from dependencies.`);
                     throw new NativeDocumentError(
                         `Store.reset('${name}') : composed stores cannot be reset.`
                     );
                 }
                 if (!item.resettable) {
-                    DebugManager$1.error('Store', `Store.reset('${name}') : this store is not resettable. Use Store.createResettable('${name}', value) instead of Store.create().`);
+                    DebugManager$2.error('Store', `Store.reset('${name}') : this store is not resettable. Use Store.createResettable('${name}', value) instead of Store.create().`);
                     throw new NativeDocumentError(
                         `Store.reset('${name}') : this store is not resettable. Use Store.createResettable('${name}', value) instead of Store.create().`
                     );
@@ -4125,7 +4130,7 @@ var NativeComponents = (function (exports) {
                 const item = $getStoreOrThrow('use', name);
 
                 if (item.composed) {
-                    DebugManager$1.error('Store', `Store.use('${name}') : composed stores are read-only. Use Store.follow('${name}') instead.`);
+                    DebugManager$2.error('Store', `Store.use('${name}') : composed stores are read-only. Use Store.follow('${name}') instead.`);
                     throw new NativeDocumentError(
                         `Store.use('${name}') : composed stores are read-only. Use Store.follow('${name}') instead.`
                     );
@@ -4192,7 +4197,7 @@ var NativeComponents = (function (exports) {
             get(name) {
                 const item = $stores.get(name);
                 if (!item) {
-                    DebugManager$1.warn('Store', `Store.get('${name}') : store not found.`);
+                    DebugManager$2.warn('Store', `Store.get('${name}') : store not found.`);
                     return null;
                 }
                 return item.observer;
@@ -4214,7 +4219,7 @@ var NativeComponents = (function (exports) {
             delete(name) {
                 const item = $stores.get(name);
                 if (!item) {
-                    DebugManager$1.warn('Store', `Store.delete('${name}') : store not found, nothing to delete.`);
+                    DebugManager$2.warn('Store', `Store.delete('${name}') : store not found, nothing to delete.`);
                     return;
                 }
                 item.subscribers.forEach(follower => follower.destroy());
@@ -4316,7 +4321,7 @@ var NativeComponents = (function (exports) {
                 return undefined;
             },
             set(target, prop, value) {
-                DebugManager$1.error('Store', `Forbidden: You cannot overwrite the store key '${String(prop)}'. Use .use('${String(prop)}').set(value) instead.`);
+                DebugManager$2.error('Store', `Forbidden: You cannot overwrite the store key '${String(prop)}'. Use .use('${String(prop)}').set(value) instead.`);
                 throw new NativeDocumentError(`Store structure is immutable. Use .set() on the observable.`);
             },
             deleteProperty(target, prop) {
@@ -5800,7 +5805,7 @@ var NativeComponents = (function (exports) {
     };
 
     function MenuDivider() {
-        if(!this instanceof MenuDivider) {
+        if(!(this instanceof MenuDivider)) {
             return new MenuDivider();
         }
 
@@ -5882,6 +5887,11 @@ var NativeComponents = (function (exports) {
         Menu.defaultTemplate = template.menu;
     };
 
+    Menu.prototype.title = function(title) {
+        this.$description.title = title;
+        return this;
+    };
+
     Menu.prototype.orientation = function(orientation) {
         this.$description.orientation = orientation;
         return this;
@@ -5936,7 +5946,7 @@ var NativeComponents = (function (exports) {
 
     function ContextMenu(config = {}) {
         if(!(this instanceof ContextMenu)) {
-            return ContextMenu(config);
+            return new ContextMenu(config);
         }
         Menu.call(this, config);
 
@@ -5999,6 +6009,16 @@ var NativeComponents = (function (exports) {
 
         this.$description = {
             items: [],
+            link: null,
+            target: null,
+            label: null,
+            icon: null,
+            shortcut: null,
+            disabled: false,
+            selected: false,
+            value: null,
+            data: null,
+            render: null,
             ...config
         };
 
@@ -6018,6 +6038,16 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
+    MenuItem.prototype.link = function(link) {
+        this.$description.link = link;
+        return this;
+    };
+
+    MenuItem.prototype.target = function(target) {
+        this.$description.target = target;
+        return this;
+    };
+
     MenuItem.prototype.icon = function(icon) {
         this.$description.icon = icon;
         return this;