@twobirds/microcomponents 0.0.27 → 0.0.29

package/assets/3d.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>3D Positioned Image with CSS</title>
+    <style>
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background-color: #222;
+            perspective: 800px; /* Depth effect */
+        }
+
+        .container {
+            width: 300px;
+            height: 200px;
+            transform-style: preserve-3d; /* Needed for 3D transformations */
+        }
+
+        .image3d {
+            width: 100%;
+            height: 100%;
+            transform: rotateY(20deg) rotateX(10deg) translateZ(50px);
+            transition: transform 0.5s ease-in-out;
+            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
+        }
+
+        /* Hover effect */
+        .container:hover .image3d {
+            transform: rotateY(-20deg) rotateX(-10deg) translateZ(100px);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <img class="image3d" src="https://via.placeholder.com/300x200" alt="3D Image">
+    </div>
+</body>
+</html>

package/assets/documentation/MicroComponents.md

@@ -27,16 +27,27 @@ As an application programmer you should understand **MC** and **DC** methods and
 - **DC** use observables and formValues to provide 1-way and 2-way binding to the DOM.
 - **DC** have selectors to find other DCs in the DOM.
 
-## MC() Class overview
+## McBase() Superclass (not exported), Overview
 
   **Instance Properties**
   - `.target`: readonly, a getter returning the DOM element or parent MC instance your instance resides in
+
+  **Constructor:**
+  - calls `init()`: triggers the 'init' lifecycle event, also recursively into the inner '._mc' structure.
+  - calls `autoAttachListeners()`: methods in your MC that start with "on[A-Z]" or "one[A-Z]" and describe native DOM events (e.g. "onClick") will be added to the DOM Element as listeners.
+
+# Exported:
+
+## MC() Class, extends McBase
+
+  **Instance Properties**
+  - `.target`: (inherited from McBase)
   - `._mc`: a hash object that contains inner micro components
 
 - **Instance Methods:**
-  - `.trigger( eventName, data )`: trigger an event on this instance
+  - `.trigger( eventName, data )`: (inherited from McBase)
 
-## DC() Class Overview
+## DC() Class, extends McBase
 
 - **Static Methods:**
   - `DC.add( DomElement, key, mc)`: Add a DC to an HTMLElement.
@@ -44,27 +55,24 @@ As an application programmer you should understand **MC** and **DC** methods and
   - `DC.trigger( eventName, DomElement, data, bubble )`: trigger an event, handles directional traversal in the DOM.
 
   **Instance Properties**
-
-    ( inherited from MC )
-  - `.target`: readonly, a getter returning the DOM element the instance resides in
-  - `._mc`: a hash object that contains inner MCs
+  - `.target`: (inherited from McBase)
+  - `._mc`: a hash object that contains inner micro components
 
 - **Instance Methods:**
   - `.parent(search?)`: Get parent DCs.
   - `.ancestors(search?)`: Get ancestor DCs.
   - `.children(search?)`: Get child DCs.
   - `.descendants(search?)`: Get descendant DCs.
-  - `.autoAttachListeners()`: methods in your MC that start with "on[A-Z]" or "one[A-Z]" and describe native DOM events (e.g. "onClick") will be added to the DOM Element as listeners.
-
-    (inherited from MC )
   - `.trigger( eventName, data, bubble )`: trigger an event on "this", handles directional bubbling in the DOM.
 
-### Typical Workflow
+# Usage
+
+## Typical Workflow
 
 1. **Attach DCs** to HTMLElements using `DC.add()`.
 2. **Access** other DCs by their property key or navigating through DOM (e.g., `ancestors()`, `children()`, etc.) **and use their inner functionality**.
 
-# Attaching Micro Components to a DOM element
+### Attach Micro Components to a DOM element
 
 To attach a micro component to an HTML element, use the `DC.add()` static function.
 
@@ -96,7 +104,7 @@ DC.add( myElement, 'myDcComponent', new MyClass( myElement ) );
 - After you added a micro component using this function, the **HTMLElement will contain a property `_mc`** which contains the external MC instances.
 - Also the **HTMLElement then has an attribute '_mc'** which will indicate that at least one micro component is attached to this dom element.
 
-# Removing a top level Micro Component from a DOM element
+### Remove a top level Micro Component from a DOM element
 
 Micro components can be removed using the `DC.remove()` static method.
 
@@ -106,7 +114,7 @@ DC.remove( myDomElement, 'myComponent');
 
 **When all micro components are removed** (the _mc object has no more properties), the **`_mc` attribute is also removed** from the HTML element.
 
-# Retrieve all top level Micro Components from a DOM element
+### Retrieve Micro Components from a DOM element
 
 ```javascript
 const target = document.querySelector( 'div' );
@@ -120,7 +128,7 @@ const specificInstance = target._mc?.myPublicComponent;
 console.log(specificInstance);
 ```
 
-### Trigger an Event on all DCs
+### Trigger an Event
 
 ```javascript
 const target = document.querySelector( 'div' );
@@ -132,7 +140,7 @@ DC.trigger( target, '<eventName>', data | null, bubble );
 
 # Methods you can use in your Micro Component Instances
 
-## Retrieving Inner Micro Components
+## Retrieve Inner Micro Components
 
 You can retrieve an inner micro component by using the ._mc property.
 
@@ -144,7 +152,7 @@ console.log(innerComponent);
 **The following methods hop over HTMLElements that DO NOT contain micro components.**
 
 
-## Navigating Parent and Ancestor Micro Components
+## Navigate Parent and Ancestor Micro Components
 
 The `.parent()` and `.ancestors()` methods allow you to retrieve micro components attached to parent elements.
 
@@ -161,7 +169,7 @@ To retrieve specific micro component(s) attached to ancestors:
 const specificAncestorMc = this.ancestors('myComponent');
 ```
 
-## Retrieving Child and Descendant Micro Components
+## Retrieve Child and Descendant Micro Components
 
 The `.children()` and `.descendants()` methods retrieve micro components attached to child elements or any descendants.
 ```javascript
@@ -175,7 +183,7 @@ console.log(descendantComponents);  // an array of all descendant micro componen
 const specificMcs = this.descenants('specificMc');
 ```
 
-### Trigger Events on MCs
+## Trigger an Event
 ```javascript
 // trigger an event on yourself
 this
@@ -206,7 +214,7 @@ this
 
 ## Automatically attach Listener Methods to the DOM
 
-On any **DC** instance, you can call **.autoAttachListeners()** in the constructor.
+On any **MC** and **DC** instance, the Superclass McBase calls **autoAttachListeners()** in the constructor.
 
 Any methods you define in your code that start with **"on"** or **"one"**, and also match DOM event names, will be called accordingly:
 
@@ -226,3 +234,14 @@ let myFirstDiv = document.querySelector('div');
 DC.add( myFirstDiv, 'myEventTarget', new MyEventTarget( myFirstDiv ) );
 // now wait for somebody to click on that <div>
 ```
+# Lifecycle Events on **MC** and **DC**
+
+## Init
+- "this" first
+- traverses recursively into the _mc structure
+- requires **method .oneInit()** to be present in your class definition.
+
+## Destroy ( TBD )
+- recursive "_mc" first
+- then "this"
+- requires **method .oneDestroy()** to be present in your class definition.

package/assets/test.html

@@ -7,7 +7,6 @@
             <link rel="icon" type="image/svg+xml" sizes="any" href="MicroComponents.svg" />
             <link href="./my-tag.css" rel="stylesheet" />
             <script type="module" src="./test.js"></script>
-            <script src="./customSelectors.min.js"></script>
         </head>
     <body>
         Open the debugger, read console, then:&nbsp;

package/dist/MC.d.ts

@@ -14,12 +14,17 @@ declare class McBase {
     get target(): any;
 }
 declare class MC extends McBase {
+    _mc: {
+        [key: string]: any;
+    };
     constructor(target: any);
     static trigger: typeof trigger;
     trigger(ev: McEvent | string, data?: any, bubble?: string): this | undefined;
-    autoAttachListeners(): void;
 }
 declare class DC extends McBase {
+    protected __mc: {
+        [key: string]: any;
+    };
     constructor(target: HTMLElement);
     static debug: boolean;
     static add: Function;
@@ -29,7 +34,6 @@ declare class DC extends McBase {
         [key: string]: any;
     };
     trigger(ev: McEvent | string, data?: any, bubble?: string): void;
-    autoAttachListeners(): void;
     parent(search?: string): any[];
     ancestors(search?: string): any[];
     children(search?: string): any[];

package/dist/MC.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["../src/MC.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAWvC,MAAM,WAAW,aAAc,SAAQ,WAAW;IACjD,GAAG,EAAE,WAAW,CAAC;CACjB;AA6CD,iBAAS,WAAW,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,GAAG,IAAI,EAAE,OAAO,GAAE,OAAe,EAAE,IAAI,GAAE,OAAe,QAe1J;AAED,iBAAS,cAAc,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,GAAG,IAAI,QAE5G;AA+CD,iBAAS,OAAO,CAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,QAUtE;AAED,cAAM,MAAM;;gBAME,MAAM,EAAE;QAAE,CAAC,GAAG,EAAC,MAAM,GAAG,GAAG,CAAA;KAAE;IAY1C,IAAI,MAAM,IAAI,GAAG,CAEhB;CAED;AAED,cAAM,EAAG,SAAQ,MAAM;gBAEV,MAAM,EAAE,GAAG;IA8BpB,MAAM,CAAC,OAAO,iBAAW;IAE5B,OAAO,CAAE,EAAE,EAAE,OAAO,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,CAAC,EAAE,MAAM;IAiF9D,mBAAmB;CA2CnB;AAED,cAAM,EAAG,SAAQ,MAAM;gBAEV,MAAM,EAAE,WAAW;IAkC/B,MAAM,CAAC,KAAK,EAAE,OAAO,CAAS;IAE9B,MAAM,CAAC,GAAG,EAAE,QAAQ,CAAO;IAC3B,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAU;IACjC,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAW;IAEnC,IAAI,GAAG,IAAI;QAAE,CAAC,GAAG,EAAC,MAAM,GAAG,GAAG,CAAA;KAAE,CAE/B;IAED,OAAO,CAAE,EAAE,EAAE,OAAO,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,CAAC,EAAE,MAAM;IAI9D,mBAAmB;IAInB,MAAM,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMlC,SAAS,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMrC,QAAQ,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAYpC,WAAW,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;CAOvC;AAED,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["../src/MC.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAWvC,MAAM,WAAW,aAAc,SAAQ,WAAW;IACjD,GAAG,EAAE,WAAW,CAAC;CACjB;AA6CD,iBAAS,WAAW,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,GAAG,IAAI,EAAE,OAAO,GAAE,OAAe,EAAE,IAAI,GAAE,OAAe,QAe1J;AAED,iBAAS,cAAc,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,GAAG,IAAI,QAE5G;AA+CD,iBAAS,OAAO,CAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,QAUtE;AA4ED,cAAM,MAAM;;gBAIE,MAAM,EAAE;QAAE,CAAC,GAAG,EAAC,MAAM,GAAG,GAAG,CAAA;KAAE;IAY1C,IAAI,MAAM,IAAI,GAAG,CAEhB;CAED;AAED,cAAM,EAAG,SAAQ,MAAM;IAEtB,GAAG,EAAE;QAAE,CAAC,GAAG,EAAC,MAAM,GAAG,GAAG,CAAA;KAAE,CAAM;gBAEpB,MAAM,EAAE,GAAG;IAIpB,MAAM,CAAC,OAAO,iBAAW;IAE5B,OAAO,CAAE,EAAE,EAAE,OAAO,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,CAAC,EAAE,MAAM;CAiF9D;AAED,cAAM,EAAG,SAAQ,MAAM;IAEtB,SAAS,CAAC,IAAI,EAAE;QAAE,CAAC,GAAG,EAAC,MAAM,GAAG,GAAG,CAAA;KAAE,CAAM;gBAE/B,MAAM,EAAE,WAAW;IAI/B,MAAM,CAAC,KAAK,EAAE,OAAO,CAAS;IAE9B,MAAM,CAAC,GAAG,EAAE,QAAQ,CAAO;IAC3B,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAU;IACjC,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAW;IAEnC,IAAI,GAAG,IAAI;QAAE,CAAC,GAAG,EAAC,MAAM,GAAG,GAAG,CAAA;KAAE,CAE/B;IAED,OAAO,CAAE,EAAE,EAAE,OAAO,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,CAAC,EAAE,MAAM;IAI9D,MAAM,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMlC,SAAS,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMrC,QAAQ,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAYpC,WAAW,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;CAOvC;AAED,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC"}

package/dist/MC.min.js

@@ -244,45 +244,77 @@ function trigger(target, ev, data = {}) {
     });
     return;
 }
+// run the "init" lifecycle event on the completemcr structure
+function init(element) {
+    let isDomMcInstance = element.constructor === DC;
+    setTimeout(() => {
+        element.trigger('Init');
+        if (!isDomMcInstance) {
+            setTimeout(() => {
+                let keys = Object.keys(element?._mc);
+                if (keys.length) {
+                    //console.log( 'inner Inits on [', mc.constructor.name, ']', keys );
+                    keys?.forEach((key) => {
+                        let mc = element?._mc?.[key];
+                        //console.log( key, typeof mc?.oneInit, mc );
+                        if (mc['oneInit'] && typeof mc.oneInit == 'function') {
+                            mc.oneInit(new McEvent('Init'));
+                        }
+                    });
+                }
+                ;
+            }, 0);
+        }
+    }, 0);
+}
+function autoAttachListeners(element) {
+    if (!MC_isBrowser() || element.constructor === DC)
+        return;
+    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 => {
+            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); };
+            ;
+            if (once) {
+                // console.log( '...is only called once', that.constructor.prototype[key] );
+                Object.defineProperty(element, 'on' + withoutOnOne, {
+                    configurable: true,
+                    enumerable: false,
+                    writable: true,
+                    value: (ev) => {
+                        // console.log( 'onceHandler execute:', that.constructor.prototype[key] );
+                        (that.constructor.prototype[key]).bind(that)(ev);
+                    }
+                });
+            }
+            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);
+            }
+        });
+    }
+}
 class McBase {
     #target; // avoid circular reference
-    #_mc = {};
     constructor(target) {
-        let that = this;
+        let that = this, element = that;
         this.#target = new WeakRef(target);
-        if (this.constructor !== DC) {
-            Object.defineProperty(this, "_mc", {
-                get() { return this.#_mc; }
-            });
-        }
-        ;
+        init(element); // async lifecycle event
+        autoAttachListeners(element);
     }
     get target() {
         return this.#target.deref();
     }
 }
 class MC extends McBase {
+    _mc = {};
     constructor(target) {
         super(target);
-        let that = this;
-        setTimeout(() => {
-            that.trigger('Init');
-            setTimeout(() => {
-                let keys = Object.keys(that?._mc);
-                if (keys.length) {
-                    //console.log( 'inner Inits on [', that.constructor.name, ']', keys );
-                    keys?.forEach((key) => {
-                        let mc = that?._mc?.[key];
-                        //console.log( key, typeof mc?.oneInit, mc );
-                        if (mc?.oneInit && typeof mc?.oneInit == 'function') {
-                            mc.oneInit(new McEvent('Init'));
-                        }
-                    });
-                }
-                ;
-            }, 0);
-        }, 0);
-        this.autoAttachListeners();
     }
     static trigger = trigger;
     trigger(ev, data = {}, bubble) {
@@ -345,80 +377,24 @@ class MC extends McBase {
             }
         }
     }
-    autoAttachListeners() {
-        if (!MC_isBrowser())
-            return;
-        const target = this.target;
-        if (target instanceof HTMLElement) {
-            let that = this;
-            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); };
-                ;
-                if (once) {
-                    // console.log( '...is only called once', that.constructor.prototype[key] );
-                    Object.defineProperty(this, 'on' + withoutOnOne, {
-                        configurable: true,
-                        enumerable: false,
-                        writable: true,
-                        value: (ev) => {
-                            // console.log( 'onceHandler execute:', that.constructor.prototype[key] );
-                            (that.constructor.prototype[key]).bind(that)(ev);
-                        }
-                    });
-                }
-                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);
-                }
-            });
-        }
-    }
 }
 ;
 class DC extends McBase {
+    __mc = {};
     constructor(target) {
         super(target);
-        let that = this, isDomMcInstance = that.constructor === DC;
-        setTimeout(() => {
-            that.trigger('Init');
-            if (!isDomMcInstance) {
-                setTimeout(() => {
-                    let keys = Object.keys(that?._mc);
-                    if (keys.length) {
-                        //console.log( 'inner Inits on [', that.constructor.name, ']', keys );
-                        keys?.forEach((key) => {
-                            let mc = that?._mc?.[key];
-                            //console.log( key, typeof mc?.oneInit, mc );
-                            if (mc?.oneInit && typeof mc?.oneInit == 'function') {
-                                mc.oneInit(new McEvent('Init'));
-                            }
-                        });
-                    }
-                    ;
-                }, 0);
-            }
-        }, 0);
-        this.autoAttachListeners();
     }
     static debug = false;
     static add = add;
     static remove = remove;
     static trigger = trigger;
     get _mc() {
-        return this._mc;
+        return this.__mc;
     }
     trigger(ev, data = {}, bubble) {
         MC.prototype.trigger.call(this, ev, data, bubble);
     }
     ;
-    autoAttachListeners() {
-        MC.prototype.autoAttachListeners.call(this);
-    }
-    ;
     parent(search = '') {
         let target = this.target;
         if (!MC_isDOM(target))

package/dist/MC.ts

@@ -137,22 +137,94 @@ function trigger( target: unknown, ev: McEvent | string, data: any = {}) {
 	return;
 }
 
+// run the "init" lifecycle event on the completemcr structure
+function init( element: MC | DC ){
+	let isDomMcInstance = element.constructor === DC;
+
+	setTimeout(
+		() => {
+			element.trigger('Init');
+			if ( !isDomMcInstance ) {
+				setTimeout(
+					() => {
+						let keys = Object.keys( element?._mc );
+						if ( keys.length ){
+							//console.log( 'inner Inits on [', mc.constructor.name, ']', keys );
+							keys?.forEach( (key: string) => {
+								let mc = element?._mc?.[key];
+								//console.log( key, typeof mc?.oneInit, mc );
+								if ( ( mc as any )['oneInit'] &&  typeof ( mc as any ).oneInit == 'function' ){
+									( mc as any ).oneInit( new McEvent('Init') );
+								}
+							});
+						};
+					}
+					, 0
+				);
+			}
+		}
+		, 0
+	);
+
+}
+
+function autoAttachListeners( element: MC | DC ){
+	if ( !isBrowser() || element.constructor === DC ) return;
+
+	const target = element.target;
+
+	if ( target instanceof HTMLElement ){
+		let that: LooseObject = element;
+		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: McEvent | Event | CustomEvent ) => { that.trigger( withoutOnOne, ev ); };
+				;
+
+				if ( once ){
+					// console.log( '...is only called once', that.constructor.prototype[key] );
+					Object.defineProperty(
+						element,
+						'on' + withoutOnOne,
+						{
+							configurable: true,
+							enumerable: false,
+							writable: true,
+							value: (ev: any) => {
+								// console.log( 'onceHandler execute:', that.constructor.prototype[key] );
+								( that.constructor.prototype[key] ).bind(that)(ev);
+							}
+						}
+					);
+				}
+
+				if ( nativeEventNames.has( 'on' + nativeEventName ) ){ // native event defined in HTMLElement
+					// console.log('added as native listener', target, nativeEventName );
+					addListener( target, nativeEventName, listener, false, once );
+				}
+			});
+	}
+}
+
 class McBase {
 
 	#target: WeakRef<any>; // avoid circular reference
 
-	#_mc: { [key:string]: any } = {};
-
 	constructor( target: { [key:string]: any } ) {
-		let that = this;
+		let that: unknown = this,
+			element  = (that as MC | DC );
 
 		this.#target = new WeakRef( target );
 
-		if ( this.constructor !== DC){
-			Object.defineProperty( this, "_mc", {
-				get(){ return this.#_mc }
-			});
-		};
+
+		init( element ); // async lifecycle event
+
+		autoAttachListeners( element );
 	}
 
 	get target(): any {
@@ -163,34 +235,10 @@ class McBase {
 
 class MC extends McBase {
 
+	_mc: { [key:string]: any } = {};
+
 	constructor(target: any) {
 		super(target);
-		let that = this;
-
-		setTimeout(
-			() => {
-				that.trigger('Init');
-				setTimeout(
-					() => {
-						let keys = Object.keys( (that as any)?._mc );
-						if ( keys.length ){
-							//console.log( 'inner Inits on [', that.constructor.name, ']', keys );
-							keys?.forEach( (key: string) => {
-								let mc = (that as any)?._mc?.[key];
-								//console.log( key, typeof mc?.oneInit, mc );
-								if ( mc?.oneInit &&  typeof mc?.oneInit == 'function' ){
-									mc.oneInit( new McEvent('Init') );
-								}
-							});
-						};
-					}
-					, 0
-				);
-			}
-			,0
-		);
-
-		this.autoAttachListeners();
 	}
 
     static trigger = trigger;
@@ -276,85 +324,14 @@ class MC extends McBase {
 
 	}
 
-	autoAttachListeners(){
-		if ( !isBrowser() ) return;
-
-		const target = this.target;
-
-		if ( target instanceof HTMLElement ){
-			let that: LooseObject = this;
-			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: McEvent | Event | CustomEvent ) => { that.trigger( withoutOnOne, ev ); };
-					;
-
-					if ( once ){
-						// console.log( '...is only called once', that.constructor.prototype[key] );
-						Object.defineProperty(
-							this,
-							'on' + withoutOnOne,
-							{
-								configurable: true,
-								enumerable: false,
-								writable: true,
-								value: (ev: any) => {
-									// console.log( 'onceHandler execute:', that.constructor.prototype[key] );
-									( that.constructor.prototype[key] ).bind(that)(ev);
-								}
-							}
-						);
-					}
-
-					if ( nativeEventNames.has( 'on' + nativeEventName ) ){ // native event defined in HTMLElement
-						// console.log('added as native listener', target, nativeEventName );
-						addListener( target, nativeEventName, listener, false, once );
-					}
-				});
-		}
-	}
-
 };
 
 class DC extends McBase {
 
+	protected __mc: { [key:string]: any } = {};
+
 	constructor(target: HTMLElement ) {
 		super(target);
-
-		let that = this,
-			isDomMcInstance = that.constructor === DC;
-
-		setTimeout(
-			() => {
-				that.trigger('Init');
-				if ( !isDomMcInstance ) {
-					setTimeout(
-						() => {
-							let keys = Object.keys( (that as any)?._mc );
-							if ( keys.length ){
-								//console.log( 'inner Inits on [', that.constructor.name, ']', keys );
-								keys?.forEach( (key: string) => {
-									let mc = (that as any)?._mc?.[key];
-									//console.log( key, typeof mc?.oneInit, mc );
-									if ( mc?.oneInit &&  typeof mc?.oneInit == 'function' ){
-										mc.oneInit( new McEvent('Init') );
-									}
-								});
-							};
-						}
-						, 0
-					);
-				}
-			}
-			, 0
-		);
-
-		this.autoAttachListeners();
 	}
 
 	static debug: boolean = false;
@@ -364,17 +341,13 @@ class DC extends McBase {
 	static trigger: Function = trigger;
 
 	get _mc(): { [key:string]: any } {
-		return this._mc;
+		return this.__mc;
 	}
 
 	trigger( ev: McEvent | string, data: any = {}, bubble?: string ) {
 		MC.prototype.trigger.call( this, ev, data, bubble );
 	};
 
-	autoAttachListeners() {
-		MC.prototype.autoAttachListeners.call( this );
-	};
-
 	parent(search: string = ''): any[] {
 		let target: HTMLElement = (this as any).target;
 		if (!isDOM(target)) return [];