@twobirds/microcomponents 0.0.26 → 0.0.28

package/src/MC.ts

@@ -128,7 +128,8 @@ function remove( target: HTMLMcElement, key: string) {
 function trigger( target: unknown, ev: McEvent | string, data: any = {}) {
 	let _mc = (target as any)?._mc;
 	if ( !_mc ) return;
-	[ ...Object.values( _mc ) ].forEach( (mc) => {
+	[ ...Object.values( _mc ) ].forEach( (mc: any) => {
+		//console.log( 'mc [', mc.constructor.name, ']', mc.constructor.prototype?.oneInit );
 		if ( (mc as any)?.trigger && typeof (mc as any)?.trigger === 'function' ){
 			(mc as any)?.trigger( ev, data );
 		}
@@ -136,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 {
@@ -162,22 +235,18 @@ class McBase {
 
 class MC extends McBase {
 
+	_mc: { [key:string]: any } = {};
+
 	constructor(target: any) {
 		super(target);
-		let that = this;
-
-		setTimeout(
-			() => {
-				that.trigger('init');
-			}
-			,0
-		);
 	}
 
+    static trigger = trigger;
+
 	trigger( ev: McEvent | string, data: any = {}, bubble?: string ) {
 		let that = this;
 
-		// console.log( that, '.trigger(', ev, data, bubble, ')' );
+		//console.log( that, '.trigger(', ev, data, bubble, ')' );
 		bubble = bubble || 'l';
 
 		// run all triggers
@@ -259,17 +328,10 @@ class MC extends McBase {
 
 class DC extends McBase {
 
+	protected __mc: { [key:string]: any } = {};
+
 	constructor(target: HTMLElement ) {
 		super(target);
-
-		let that = this;
-
-		setTimeout(
-			() => {
-				that.trigger('init');
-			}
-			,0
-		);
 	}
 
 	static debug: boolean = false;
@@ -279,7 +341,7 @@ 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 ) {
@@ -317,51 +379,6 @@ class DC extends McBase {
 		return getMicroComponents([...myDomElements], search);
 	}
 
-	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 ); };
-					;
-
-					// console.log('autoAttach', nativeEventName, withoutOnOne, once, listener);
-
-					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 );
-					}
-				});
-		}
-	}
-
 };
 
 export { addListener, removeListener, McBase, MC, DC, McEvent };

package/src/test.ts

@@ -1,8 +1,9 @@
 "use strict";
 
-import { MC, DC, McEvent } from "./MC.js";
-import { defineCE, getCE } from "./customElements.js";
-import { makeCO } from "./customObservables.js";
+import { MC, DC, McEvent, defineCE, getCE, makeCO } from "./microcomponents.js";
+//import { MC, DC, McEvent } from "./MC.js";
+//import { defineCE, getCE } from "./customElements.js";
+//import { makeCO } from "./customObservables.js";
 
 //MC.debug = true;
 
@@ -14,6 +15,17 @@ class Adder {
 	}
 }
 
+class DeeplyNestedEvTarget extends MC {
+	constructor(target: any) {
+		super(target);
+	}
+
+	oneInit(ev: McEvent) {
+		let logger = this.target?.target?.target?._mc?.logger;
+		logger?.warn("DeeplyNestedEvTarget .oneInit(ev)", ev);
+	}
+}
+
 class EvTarget extends MC {
 	constructor(target: any) {
 		super(target);
@@ -25,8 +37,13 @@ class EvTarget extends MC {
 	}
 
 	oneInit(ev: McEvent) {
-		let logger = this.target?.target?._mc?.logger;
+		let that = this,
+			_mc = that._mc!,
+			logger = this.target?.target?._mc?.logger;
+
 		logger?.warn("EvTarget .oneInit(ev)", ev);
+
+		_mc.deeplyNestedEvTarget = new DeeplyNestedEvTarget( that );
 	}
 }
 
@@ -85,9 +102,6 @@ defineCE(
 
 			// render
 			target.innerHTML = "Click Me";
-
-			// automatically attach native DOM event handlers
-			that.autoAttachListeners();
 		}
 
 		/*