@twobirds/microcomponents 0.0.83 → 0.0.85

package/src/MC.ts

@@ -1,108 +1,37 @@
 'use strict';
 
 import { LooseObject } from './helpers.js';
-import { McEvent } from './McEvent.js';
 
-var isBrowser = new Function(
+const isBrowser = new Function(
 	'try {return this===window;}catch(e){ return false;}'
 );
 
-let nativeEventNames: Set<string> = new Set();
-
-// HTMLElement native event names
-if (isBrowser()) {
-	Object.keys(HTMLElement.prototype)
-		.filter((key) => /^on/.test(key))
-		.forEach((eventName) => nativeEventNames.add(eventName));
+// get HTMLElement native event names
+function getNativeEventNames( domNode: HTMLElement ): string[] {
+	let nativeEventNames: Array<string> = [];
+	if (isBrowser()) {
+		Object.keys(HTMLElement.prototype)
+			.filter((key) => /^on/.test(key))
+			.forEach((eventName) => nativeEventNames.push(eventName));
+	}
+	return nativeEventNames;
 }
 
 export interface HTMLMcElement extends HTMLElement {
 	_mc: LooseObject;
 }
 
-// get all microcomponents from a list of HTMLElements
-function getMicroComponents(elements: any[], search: string): any[] {
-	let mcValues: any[] = [];
-
-	elements.forEach((e) => {
-		if (e) {
-			if (e instanceof HTMLElement) {
-				const _mc = (e as any)?._mc;
-				if (!search && _mc) {
-					mcValues = mcValues.concat(Object.values((e as any)._mc));
-				} else if (search && _mc && _mc[search]) {
-					mcValues.push(_mc[search]);
-				}
-			}
-		}
-	});
-	return mcValues;
-}
-
-// get all ancestor DOM nodes up to the document root
-function traverseNodes(
-	node: { [key: string]: any },
-	search: string,
-	firstonly = true
-): any[] {
-	let mcValues: any[] = [];
-	while (node) {
-		if (node._mc) {
-			if (!search) {
-				mcValues = mcValues.concat(Object.values(node._mc));
-			} else if (search && node._mc[search]) {
-				mcValues.push(node._mc[search]);
-			}
-			if (firstonly) return mcValues;
-		}
-		node = node.parentNode;
-	}
-	return mcValues;
-}
-
 function isDOM(element: { [key: string]: any }) {
 	return element && element instanceof HTMLElement;
 }
 
-function addListener(
-	domNode: Node,
-	eventName: string,
-	handler: EventListenerOrEventListenerObject | null,
-	capture: boolean = false,
-	once: boolean = false
-) {
-	let options: EventListenerOptions & { once: boolean } = { once: false };
-	if (capture) {
-		options.capture = capture;
-	}
-
-	if (once) {
-		options.once = once;
-	}
-
-	//console.log( 'addEventListener', eventName, ( handler as Function ).name, options );
-	domNode.addEventListener(eventName, handler, options);
-}
-
-function removeListener(
-	domNode: Node,
-	eventName: string,
-	handler: EventListenerOrEventListenerObject | null
-) {
-	domNode.removeEventListener(eventName, handler);
-}
-
 // add a microcomponent to a target DOM node
-function add(target: HTMLElement, key: string, element = {}): any {
+function add( target: HTMLElement, key: string, element: any = {} ): HTMLMcElement {
 	let node = target as HTMLMcElement;
 
 	// create the _mc property if necessary
 	if (!node._mc) {
-		let debug = (DC as any)?.debug;
-		(DC as any).debug = false;
 		node._mc = new (DC as any)(target);
-		(DC as any).debug = debug;
-		delete node._mc._mc; // NOT NEEDED on the top level _mc property of a DOM HTMLElement
 	}
 
 	const _mc = node._mc;
@@ -111,11 +40,12 @@ function add(target: HTMLElement, key: string, element = {}): any {
 	if (key.length && !_mc[key]) {
 		_mc[key] = element;
 		// add attribute if HTMLElement
-		if (target instanceof HTMLElement && ! target.getAttribute('_mc') ) {
-			target.setAttribute('_mc', '');
+		if (target instanceof HTMLElement && ! target.getAttribute('data-mc') ) {
+			target.setAttribute('data-mc', '');
 		}
 	}
-	return element;
+
+	return node;
 }
 
 // remove a micro component from the DOM
@@ -133,63 +63,90 @@ function remove(target: HTMLMcElement, key: string) {
 	if (
 		!Object.keys(_mc).length &&
 		target instanceof HTMLElement &&
-		target.hasAttribute('_mc')
+		target.hasAttribute('data-mc')
 	) {
-		target.removeAttribute('_mc');
+		target.removeAttribute('data-mc');
 	}
 	return;
 }
 
-// trigger an event
-function trigger(
-	target: HTMLElement,
-	ev: McEvent | string,
-	data: any = {},
-	bubble: string = 'l'
-) {
-	let _mc = (target as any)?._mc;
-	if (!_mc) return;
-
-	let event =
-			ev instanceof McEvent
-				? new McEvent(ev.type, ev.data, 'l')
-				: new McEvent(ev, data, 'l'),
-		mcEvent: McEvent =
-			typeof ev !== 'string' ? (ev as McEvent) : new McEvent(ev, data, bubble);
-
-	[...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(event);
-		}
-	});
+// run the "init" lifecycle event on the complete _mc structure
+function init(element: DC) {
+	setTimeout(() => {
+		if (element.constructor === DC) return;
+		element.trigger('Init');
+	}, 0);
+}
 
-	if (/[ud]/.test(mcEvent.bubble)) {
-		bubbleEvent(target, mcEvent);
-	}
+// 'eventName' => '_mcEventName'
+function getMcEventName( eventName: string ): string {
+	return '_mc' + eventName[0].toUpperCase() + eventName.substring(1);
+}
 
-	return;
+/*
+CustomEvent Section...
+*/
+function off( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject ){
+	domNode.removeEventListener( getMcEventName(eventName), handler );
 }
 
-// run the "init" lifecycle event on the complete _mc structure
-function init(element: MC | DC) {
-	if (element.constructor === DC) return;
+function on( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject, once: boolean = false ) {
+	domNode.addEventListener( getMcEventName(eventName), handler, { capture: false, once });
+}
+
+function one( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject ) {
+	on(domNode, eventName, handler, true );
+}
+
+// create and dispatch custom event
+function trigger( 
+	domNode: HTMLElement,
+	event: CustomEvent | string,
+	data: any = {},
+	bubble: string = 'l'
+){
+	const ev = typeof event === 'string'
+		? new CustomEvent( getMcEventName( event ), { detail: {data, bubble} } )
+		: event;
+	
+	// execute locally if 'l' or nothing is given as bubble
+	if( bubble.length && bubble.indexOf('l') > -1 ){
+		domNode.dispatchEvent( ev );
+	}
+	
+	// bubble if up or down is indicated
+	if( /[u|d]/.test( bubble ) ){
+		bubbleEvent( domNode, ev );
+	}	
+}
 
+function bubbleEvent( domNode: HTMLElement, ev: CustomEvent) {
+	// at this point, either 'u' or 'd' bubbling should be indicated
+	// event bubbling is asynchronous!
 	setTimeout(() => {
-		element.trigger('Init');
-		/*
-			let keys = Object.keys( ( element as any)?._mc );
-			if ( keys.length ){
-				//console.log( 'inner Inits on [', mc.constructor.name, ']', keys );
-				keys?.forEach( (key: string) => {
-					let mc = ( element as any)?._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') );
-					}
-				});
-			};
-			*/
+
+		// add missing 'l', or else no handlers are executed
+		if (ev.detail.bubble.indexOf('l') === -1) {
+			ev.detail.bubble += 'l';
+		}
+
+		// bubble up towards root
+		if (ev.detail.bubble.indexOf('u') > -1 ) {
+			domNode.closest('[data-mc]')?.dispatchEvent( ev );
+		}
+
+		// bubble down
+		if (ev.detail.bubble.indexOf('d') > -1) {
+			let targets = new Set<HTMLMcElement>(
+				(domNode as HTMLMcElement)._mc
+					.children()
+					.map((c: unknown) => (c as any)?.target)
+			);
+			targets.forEach((target: HTMLMcElement) => {
+				if (target) target._mc.trigger(target, ev);
+			});
+		}
+
 	}, 0);
 }
 
@@ -209,74 +166,46 @@ function autoAttachListeners(element: MC | DC) {
 			.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);
-						},
-					});
-				}
+					nativeEventName = withoutOnOne.toLowerCase();  // lowercase for native event names
 
-				if (nativeEventNames.has('on' + nativeEventName)) {
-					// native event defined in HTMLElement
-					// console.log('added as native listener', target, nativeEventName );
-					addListener(target, nativeEventName, listener, false, once);
+				let listener = (ev: Event | CustomEvent) => {
+					that[key]( ev );
+				}
+					
+				if ( !!( target as any )['on' + nativeEventName] ) {
+					// it is a native HTML event
+					//console.log( 'AAL: attach native event listener', nativeEventName, 'to', target );
+					target.addEventListener( nativeEventName, listener);
+				} else {
+					// it is a customEvent
+					//console.log( 'AAL: attach custom event listener', '_mc' + withoutOnOne , 'to key', key, 'in', element );
+					on( target, withoutOnOne, listener, once );
 				}
 			});
 	}
 }
 
-function bubbleEvent(target: HTMLElement, ev: McEvent) {
-	// 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 = traverseNodes(target, '', true)?.[0].target;
-				if (parent) DC.trigger(parent, ev);
-			}
-
-			// bubble down
-			if (ev.bubble.indexOf('d') > -1) {
-				let targets = new Set<HTMLMcElement>(
-					(target as HTMLMcElement)._mc
-						.children()
-						.map((c: unknown) => (c as any)?.target)
-				);
-				targets.forEach((target: HTMLMcElement) => {
-					if (target) DC.trigger(target, ev);
-				});
-			}
-		}, 0);
-	}
+function getMcChildNodes(domNode: HTMLElement): DC[] | null {
+	const id = Math.random().toString().replace('.', '');
+	const selector = '[data-mc]:not([temp_id="' + id + '"] [data-mc] [data-mc])';
+	domNode.setAttribute('temp_id', id);
+	const mcArray: unknown[] = 
+		( [ ...domNode.querySelectorAll(selector) ] as HTMLMcElement[])
+			.filter( (e) => !!e._mc )
+			.map( e => e._mc );
+	domNode.removeAttribute('temp_id');
+	return mcArray.length ? mcArray as DC[] : null;
 }
 
 class McBase {
 	private _target: WeakRef<any>; // avoid circular reference
-	private __mc: LooseObject = {};
 
-	constructor(target?: { [key: string]: any }, debug: boolean = false) {
-		let that: unknown = this,
-			element = that as MC | DC;
+	constructor(target?: { [key: string]: any } ) {
+		let element = this as unknown as MC | DC;
 
 		this._target = new WeakRef(target || {});
 
-		init(element); // async lifecycle event
+		init(element as DC); // async lifecycle event
 
 		autoAttachListeners(element);
 	}
@@ -285,85 +214,12 @@ class McBase {
 		return this._target.deref();
 	}
 
-	get _mc(): any {
-		return this.__mc;
-	}
 }
 
 class MC extends McBase {
 	constructor(target?: any) {
 		super(target);
 	}
-
-	static trigger = trigger;
-
-	trigger(ev: McEvent | string, data: any = {}, bubble: string = 'l') {
-		let that = this;
-
-		//console.log( that, '.trigger(', ev, data, bubble, ')' );
-
-		// 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: McEvent =
-					typeof ev !== 'string'
-						? (ev as McEvent)
-						: new McEvent(ev, data, bubble);
-			[...Object.getOwnPropertyNames(that)].forEach((mc) => {
-				if (
-					(that as any)[mc]?.trigger &&
-					typeof (that as any)[mc]?.trigger === 'function'
-				) {
-					(that as any)[mc]?.trigger(event);
-				}
-			});
-
-			if (/[ud]/.test(mcEvent.bubble)) {
-				bubbleEvent(that.target, mcEvent);
-			}
-
-			return; // must return here!
-		}
-
-		// only this instance
-		if ((that as any) instanceof MC || (that as any) instanceof DC) {
-			const that = this,
-				mcEvent: McEvent =
-					typeof ev !== 'string'
-						? (ev as McEvent)
-						: 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 as any)[handlerName] === 'function'
-				) {
-					// console.log( 'execute handler:', handlerName );
-					(that as any)[handlerName](mcEvent);
-					if ((that as any).hasOwnProperty(handlerName)) {
-						// it is a once handler
-						delete (that as any)[handlerName]; // remove after first execution
-					}
-				}
-			}
-
-			// if event stopped or local only, handling is cancelled
-			if (mcEvent.stopped || mcEvent.bubble === 'l') {
-				return that;
-			}
-
-			//console.log('bubble', mcEvent);
-			if (/[ud]/.test(mcEvent.bubble)) {
-				bubbleEvent(that.target, mcEvent);
-			}
-		}
-	}
 }
 
 class DC extends McBase {
@@ -373,69 +229,77 @@ class DC extends McBase {
 
 	static add: Function = add;
 	static remove: Function = remove;
-	static trigger: Function = trigger;
 
-	trigger(ev: McEvent | string, data: any = {}, bubble?: string) {
-		MC.prototype.trigger.call(this, ev, data, bubble);
+	/* event handling */
+	off( eventName: string, handler: EventListenerOrEventListenerObject ) {
+		off( this.target, eventName, handler );
 	}
 
-	parent(search: string = ''): any[] {
-		let target: HTMLElement = (this as any).target;
-		if (!isDOM(target)) return [];
-		return traverseNodes((target as any).parentNode, search, true);
+	on( eventName: string, handler: EventListenerOrEventListenerObject ) {
+		on( this.target, eventName, handler );
 	}
 
-	ancestors(search: string = ''): any[] {
-		let target: any = (this as any)?.target;
-		if (!isDOM(target)) return [];
-		return traverseNodes((this as any).target.parentNode, search, false);
+	one( eventName: string, handler: EventListenerOrEventListenerObject ) {
+		one( this.target, eventName, handler );
 	}
 
-	children(search: string = ''): any[] {
-		let target: any = (this as any)?.target;
-		if (!isDOM(target)) return [];
-		const id = Math.random().toString().replace('.', '');
-		const selector = '[_mc]:not([temp_id="' + id + '"] [_mc] [_mc])';
-		target.setAttribute('temp_id', id);
-		const myDomElements = target.querySelectorAll(selector);
-		const mcValues = getMicroComponents([...myDomElements], search);
-		target.removeAttribute('temp_id');
-		return mcValues;
+	trigger( eventName: string, data: any = {}, bubble: string = 'l') {
+		trigger( this.target, eventName, data, bubble);
 	}
 
-	descendants(search: string = ''): any[] {
-		let target: any = (this as any)?.target;
-		if (!isDOM(target)) return [];
-		const myDomElements = target.querySelectorAll('*[_mc]');
-		return getMicroComponents([...myDomElements], search);
+	/* DOM traversal */
+	parent(): DC | null {
+		let 
+			target: HTMLElement = (this as DC).target;
+		if (!isDOM(target)) return null;
+		return (target.closest('[data-mc]') as HTMLMcElement)?._mc as DC || null;
 	}
-}
 
-const loadingMCs = new Set<string>();
+	ancestors(): DC[] | null {
+		let 
+			currentNode: HTMLElement | null = (this as DC)?.target as HTMLMcElement,
+			result: DC[] = [];
 
-function makeLoadScript( element: string ) {
+		if (!isDOM( currentNode )) return [];
 
-	if ( loadingMCs.has( element ) ) return; // already loading
+		while ( currentNode = (currentNode.closest('[data-mc]') ) ){
+			if ( (currentNode as HTMLMcElement)?._mc ){
+				result.push( (currentNode as HTMLMcElement)?._mc as DC );
+			}
+		}
 
-	loadingMCs.add( element );
+		return result.length ? result : null;
+	}
 
-	//console.log( 'makeLoadScript:', element);
-	const fileName: string = './' + element.split('-').join('/')+'.js';	
+	children(): DC[] | null {
+		let target: any = (this as any)?.target;
+		if (!isDOM(target)) return null;
+		return getMcChildNodes(target);
+	}
 
-	const se: HTMLScriptElement = document.createElement('script');
+	descendants(): DC[] | null {
+		const target: any = (this as DC)?.target;
+		if (!isDOM(target)) return [];
+		const mcArray: unknown[] = 
+			( [ ...target.querySelectorAll( '[data-mc]' ) ] as HTMLMcElement[])
+				.filter( (e) => !!e._mc )
+				.map( e => e._mc );
+		return mcArray.length ? mcArray as DC[] : null;
+	}
+}
 
-	se.setAttribute('src', fileName);
-	se.setAttribute('blocking', 'render');
-	se.async = true;
-	se.setAttribute('type', 'module');
-	se.setAttribute( 'data-name', element);
-	se.setAttribute( 'loading', '');
+/*
+Autoload Section...
+*/
 
-	const loadedPromise = customElements.whenDefined( element );
+const loadingDCs = new Set<string>();
 
-	loadedPromise.then( () => {
+function attachDC(element: string): Function {
+
+	//@ts-ignore
+	return () => {
 		const elements: HTMLElement[] = Array
-					.from(document.querySelectorAll(`[_mc*="${element}"]`))
+					.from(document.querySelectorAll(`[data-mc*="${element}"]`))
 					.filter( element => element instanceof HTMLElement );
 
 		if ( elements.length === 0 ) return;
@@ -450,28 +314,53 @@ function makeLoadScript( element: string ) {
 
 			//@ts-ignore
 			const new_mc = node
-				.getAttribute( '_mc' )
+				.getAttribute( 'data-mc' )
 				.split(' ')
 				.filter( (name) => name !== element && name !== '' )
-				.join(' ');
+				.join(' ')
+				.trim();
 
 			//@ts-ignore
 			node.setAttribute( 
-				'_mc',
+				'data-mc',
 				//@ts-ignore
 				new_mc
 			)
 		});
+	};
+};
 
-		document.head.querySelector('script[data-name="${elementName}]"')?.remove();
-	});
+function makeLoadScript( element: string ) {
+
+	if ( loadingDCs.has( element ) ) return; // already loading
+
+	loadingDCs.add( element );
+
+	//console.log( 'makeLoadScript:', element);
+	const fileName: string = './' + element.split('-').join('/')+'.js';	
+
+	const se: HTMLScriptElement = document.createElement('script');
+
+	se.setAttribute('src', fileName);
+	se.setAttribute('blocking', 'render');
+	se.async = true;
+	se.setAttribute('type', 'module');
+	se.setAttribute( 'data-name', element);
+	se.setAttribute( 'loading', '');
+
+	const loadedPromise = customElements.whenDefined( element );
+
+	//@ts-ignore
+	loadedPromise.then( attachDC( element ) );
 
-	addListener( se, 'load', (ev) => {
-		loadingMCs.delete( element );
+	se.addEventListener( 'load', (ev: Event) => {
+		loadingDCs.delete( element );
+
+		document.head.querySelector(`script[data-name="${element}"]`)?.remove();
 	});
 
-	addListener( se, 'error', (ev) => {
-		console.error('could not load MC code from', fileName);
+	se.addEventListener( 'error', (ev: Event) => {
+		console.error('could not load DC code from', fileName);
 	});
 
 	document.head.append(se);
@@ -483,21 +372,26 @@ function loadUndefinedMCs() {
 	[ ...document.querySelectorAll(':not(:defined)') ]
 		.filter( (element) => !!element 
 			&& !customElements.get(element.tagName.toLowerCase()) // not in CustomElementsRegistry
-			&& !loadingMCs.has(element.tagName.toLowerCase()) // not in loading list
+			&& !loadingDCs.has(element.tagName.toLowerCase()) // not in loading list
 		)
 		.forEach((el) => {
 			//console.log( 'detected CE', el.tagName.toLowerCase() );
-			makeLoadScript( el.tagName.toLowerCase() );
+			makeLoadScript( el.tagName.toLowerCase() ); // will automatically be instanciated
 		});
 
-	// load unresolved  MCs defined in _mc attribute
-	[ ...document.querySelectorAll('[_mc]:not([_mc=""]') ]
+	// if defined in _mc attribute: instanciate DCs, load if necessary
+	[ ...document.querySelectorAll('[data-mc]:not([data-mc=""]') ]
 		.filter( (element) => !!element )
 		.forEach((el) => {
-			const _mc = el.getAttribute('_mc')?.split(' ').filter( name => name !== '' );
-			_mc?.forEach( dc => {
+			const _mc = el.getAttribute('data-mc')?.split(' ').filter( name => name !== '' );
+			_mc?.forEach( element => {
 				//console.log( 'detected DC', dc );
-				makeLoadScript( dc );
+				const isDefined = customElements.get(element);
+				if ( !loadingDCs.has(element) && !isDefined ) {
+					makeLoadScript( element );
+				} else if ( isDefined ) {
+					attachDC(element)();
+				}
 			});
 		});
 }
@@ -526,7 +420,7 @@ function autoload(enable: boolean = true): boolean {
 	return autoloadEnabled;
 }
 
-(autoload as LooseObject).state = { loadingMCs };
+(autoload as LooseObject).state = loadingDCs;
 
-export { addListener, removeListener, McBase, MC, DC, McEvent, autoload };
+export { McBase, MC, DC, autoload, on, one, off, trigger };