@twobirds/microcomponents 0.0.34 → 0.0.39

package/dist/MC.min.js

@@ -136,16 +136,18 @@ function traverseNodes(node, search, firstonly = true) {
 ;// ./build/MC.js
 
 
-var MC_isBrowser = new Function("try {return this===window;}catch(e){ return false;}");
+var MC_isBrowser = new Function('try {return this===window;}catch(e){ return false;}');
 let MC_nativeEventNames = new Set();
 // HTMLElement native event names
 if (MC_isBrowser()) {
-    Object.keys(HTMLElement.prototype).filter(key => /^on/.test(key)).forEach(eventName => MC_nativeEventNames.add(eventName));
+    Object.keys(HTMLElement.prototype)
+        .filter((key) => /^on/.test(key))
+        .forEach((eventName) => MC_nativeEventNames.add(eventName));
 }
 // get all microcomponents from a list of HTMLElements
 function MC_getMicroComponents(elements, search) {
     let mcValues = [];
-    elements.forEach(e => {
+    elements.forEach((e) => {
         if (e) {
             if (e instanceof HTMLElement) {
                 const _mc = e?._mc;
@@ -227,44 +229,51 @@ function remove(target, key) {
         delete _mc[key];
     }
     // remove the _mc attribute if the DOM collection is empty
-    if (!Object.keys(_mc).length && target instanceof HTMLElement && target.hasAttribute('_mc')) {
+    if (!Object.keys(_mc).length &&
+        target instanceof HTMLElement &&
+        target.hasAttribute('_mc')) {
         target.removeAttribute('_mc');
     }
     return;
 }
 // trigger an event
-function trigger(target, ev, data = {}) {
+function trigger(target, ev, data = {}, bubble = 'l') {
     let _mc = target?._mc;
     if (!_mc)
         return;
+    let event = ev instanceof McEvent
+        ? new McEvent(ev.type, ev.data, 'l')
+        : new McEvent(ev, data, 'l'), mcEvent = typeof ev !== 'string' ? ev : new McEvent(ev, data, bubble);
     [...Object.values(_mc)].forEach((mc) => {
         //console.log( 'mc [', mc.constructor.name, ']', mc.constructor.prototype?.oneInit );
         if (mc?.trigger && typeof mc?.trigger === 'function') {
-            mc?.trigger(ev, data);
+            mc?.trigger(event);
         }
     });
+    if (/[ud]/.test(mcEvent.bubble)) {
+        bubbleEvent(target, mcEvent);
+    }
     return;
 }
-// run the "init" lifecycle event on the completemcr structure
+// run the "init" lifecycle event on the complete _mc structure
 function init(element) {
     if (element.constructor === DC)
         return;
     setTimeout(() => {
         element.trigger('Init');
-        setTimeout(() => {
-            let keys = Object.keys(element?._mc);
-            if (keys.length) {
+        /*
+            let keys = Object.keys( ( element as any)?._mc );
+            if ( keys.length ){
                 //console.log( 'inner Inits on [', mc.constructor.name, ']', keys );
-                keys?.forEach((key) => {
-                    let mc = element?._mc?.[key];
+                keys?.forEach( (key: string) => {
+                    let mc = ( element as any)?._mc?.[key];
                     //console.log( key, typeof mc?.oneInit, mc );
-                    if (mc['oneInit'] && typeof mc.oneInit == 'function') {
-                        mc.oneInit(new McEvent('Init'));
+                    if ( ( mc as any )['oneInit'] &&  typeof ( mc as any ).oneInit == 'function' ){
+                        ( mc as any ).oneInit( new McEvent('Init') );
                     }
                 });
-            }
-            ;
-        }, 0);
+            };
+            */
     }, 0);
 }
 function autoAttachListeners(element) {
@@ -273,13 +282,14 @@ function autoAttachListeners(element) {
     const target = element.target;
     if (target instanceof HTMLElement) {
         let that = element;
-        Object
-            .getOwnPropertyNames(that.constructor.prototype)
-            .filter(key => /^on[A-Z]|one[A-Z]/.test(key) && typeof that.constructor.prototype[key] === 'function')
-            .forEach(key => {
+        Object.getOwnPropertyNames(that.constructor.prototype)
+            .filter((key) => /^on[A-Z]|one[A-Z]/.test(key) &&
+            typeof that.constructor.prototype[key] === 'function')
+            .forEach((key) => {
             let once = /^one/.test(key), withoutOnOne = key.replace(/^on[e]{0,1}/, ''), // preserves upper/lowercase for non-native events
-            nativeEventName = withoutOnOne.toLowerCase(), listener = (ev) => { that.trigger(withoutOnOne, ev); };
-            ;
+            nativeEventName = withoutOnOne.toLowerCase(), listener = (ev) => {
+                that.trigger(withoutOnOne, ev);
+            };
             if (once) {
                 // console.log( '...is only called once', that.constructor.prototype[key] );
                 Object.defineProperty(element, 'on' + withoutOnOne, {
@@ -288,20 +298,49 @@ function autoAttachListeners(element) {
                     writable: true,
                     value: (ev) => {
                         // console.log( 'onceHandler execute:', that.constructor.prototype[key] );
-                        (that.constructor.prototype[key]).bind(that)(ev);
-                    }
+                        that.constructor.prototype[key].bind(that)(ev);
+                    },
                 });
             }
-            if (MC_nativeEventNames.has('on' + nativeEventName)) { // native event defined in HTMLElement
+            if (MC_nativeEventNames.has('on' + nativeEventName)) {
+                // native event defined in HTMLElement
                 // console.log('added as native listener', target, nativeEventName );
                 addListener(target, nativeEventName, listener, false, once);
             }
         });
     }
 }
+function bubbleEvent(target, ev) {
+    // at this point, either 'u' or 'd' bubbling should be indicated
+    // mcEvent bubbling is asynchronous, and the order of target MC execution in case of multiple matches is not guaranteed!
+    if (/[ud]/.test(ev.bubble)) {
+        setTimeout(() => {
+            // bubbling must include 'l' for local, or else no handlers are executed'
+            if (ev.bubble.indexOf('l') === -1) {
+                ev.bubble += 'l';
+            }
+            // bubble up towards root
+            if (ev.bubble.indexOf('u') > -1) {
+                let parent = MC_traverseNodes(target, '', true)?.[0].target;
+                if (parent)
+                    DC.trigger(parent, ev);
+            }
+            // bubble down
+            if (ev.bubble.indexOf('d') > -1) {
+                let targets = new Set(target._mc
+                    .children()
+                    .map((c) => c?.target));
+                targets.forEach((target) => {
+                    if (target)
+                        DC.trigger(target, ev);
+                });
+            }
+        }, 0);
+    }
+}
 class McBase {
     #target; // avoid circular reference
-    constructor(target) {
+    constructor(target, debug = false) {
         let that = this, element = that;
         this.#target = new WeakRef(target || {});
         init(element); // async lifecycle event
@@ -317,30 +356,40 @@ class MC extends McBase {
         super(target);
     }
     static trigger = trigger;
-    trigger(ev, data = {}, bubble) {
+    trigger(ev, data = {}, bubble = 'l') {
         let that = this;
         //console.log( that, '.trigger(', ev, data, bubble, ')' );
-        bubble = bubble || 'l';
         // run all triggers
         if (that.constructor === MC || that.constructor === DC) {
+            let event = ev instanceof McEvent
+                ? new McEvent(ev.type, ev.data, 'l')
+                : new McEvent(ev, data, 'l'), mcEvent = typeof ev !== 'string'
+                ? ev
+                : new McEvent(ev, data, bubble);
             [...Object.getOwnPropertyNames(that)].forEach((mc) => {
-                if (that[mc]?.trigger && typeof that[mc]?.trigger === 'function') {
-                    that[mc]?.trigger(ev, data, bubble);
+                if (that[mc]?.trigger &&
+                    typeof that[mc]?.trigger === 'function') {
+                    that[mc]?.trigger(event);
                 }
             });
+            if (/[ud]/.test(mcEvent.bubble)) {
+                bubbleEvent(that.target, mcEvent);
+            }
             return; // must return here!
         }
         // only this instance
         if (that instanceof MC || that instanceof DC) {
-            const that = this, mcEvent = typeof ev !== 'string' ? ev : new McEvent(ev, data, bubble), handlerName = 'on' + mcEvent.type[0].toUpperCase() + mcEvent.type.slice(1);
-            ;
+            const that = this, mcEvent = typeof ev !== 'string'
+                ? ev
+                : new McEvent(ev, data, bubble), handlerName = 'on' + mcEvent.type[0].toUpperCase() + mcEvent.type.slice(1);
             // console.log('trigger', handlerName, mcEvent, data, bubble );
             if (mcEvent.bubble.indexOf('l') > -1) {
-                if (!mcEvent.immediateStopped
-                    && typeof that[handlerName] === 'function') {
+                if (!mcEvent.immediateStopped &&
+                    typeof that[handlerName] === 'function') {
                     // console.log( 'execute handler:', handlerName );
                     that[handlerName](mcEvent);
-                    if (that.hasOwnProperty(handlerName)) { // it is a once handler
+                    if (that.hasOwnProperty(handlerName)) {
+                        // it is a once handler
                         delete that[handlerName]; // remove after first execution
                     }
                 }
@@ -349,49 +398,24 @@ class MC extends McBase {
             if (mcEvent.stopped || mcEvent.bubble === 'l') {
                 return that;
             }
-            // at this point, either 'u' or 'd' bubbling should be indicated
-            // mcEvent bubbling is asynchronous, and the order of target MC execution in case of multiple matches is not guaranteed!
-            if (MC_isBrowser() && /[ud]/.test(mcEvent.bubble) && that instanceof MC) {
-                setTimeout(() => {
-                    // bubbling must include 'l' for local, or else no handlers are executed'
-                    if (mcEvent.bubble.indexOf('l') === -1) {
-                        mcEvent.bubble += 'l';
-                    }
-                    // bubble up towards root
-                    if (mcEvent.bubble.indexOf('u') > -1) {
-                        that
-                            .parent()
-                            .forEach((mc) => {
-                            mc instanceof MC ? mc.trigger(mcEvent) : null;
-                        });
-                    }
-                    // bubble down
-                    if (mcEvent.bubble.indexOf('d') > -1) {
-                        that
-                            .children()
-                            .forEach((mc) => {
-                            mc instanceof MC ? mc.trigger(mcEvent) : null;
-                        });
-                    }
-                }, 0);
+            //console.log('bubble', mcEvent);
+            if (/[ud]/.test(mcEvent.bubble)) {
+                bubbleEvent(that.target, mcEvent);
             }
         }
     }
 }
-;
 class DC extends McBase {
     _mc = {};
-    constructor(target) {
+    constructor(target, debug = false) {
         super(target);
     }
-    static debug = false;
     static add = add;
     static remove = remove;
     static trigger = trigger;
     trigger(ev, data = {}, bubble) {
         MC.prototype.trigger.call(this, ev, data, bubble);
     }
-    ;
     parent(search = '') {
         let target = this.target;
         if (!MC_isDOM(target))
@@ -424,7 +448,6 @@ class DC extends McBase {
         return MC_getMicroComponents([...myDomElements], search);
     }
 }
-;
 
 
 /******/ 	return __webpack_exports__;