@twobirds/microcomponents 0.0.34 → 0.0.39

package/src/MC.ts

@@ -1,34 +1,37 @@
-"use strict";
+'use strict';
 
 import { LooseObject } from './helpers.js';
 import { McEvent } from './McEvent.js';
 
-var isBrowser=new Function("try {return this===window;}catch(e){ return false;}");
+var 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 ) );
+if (isBrowser()) {
+	Object.keys(HTMLElement.prototype)
+		.filter((key) => /^on/.test(key))
+		.forEach((eventName) => nativeEventNames.add(eventName));
 }
 
-export interface HTMLMcElement extends HTMLElement{
+export interface HTMLMcElement extends HTMLElement {
 	_mc: LooseObject;
 }
 
 // get all microcomponents from a list of HTMLElements
-function getMicroComponents( elements: any[], search: string): any[] {
+function getMicroComponents(elements: any[], search: string): any[] {
 	let mcValues: any[] = [];
 
-	elements.forEach( e => {
+	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] );
+				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]);
 				}
 			}
 		}
@@ -37,70 +40,78 @@ function getMicroComponents( elements: any[], search: string): any[] {
 }
 
 // get all ancestor DOM nodes up to the document root
-function traverseNodes(node: { [key:string]: any }, search: string, firstonly = true): any[] {
+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]) {
+			} else if (search && node._mc[search]) {
 				mcValues.push(node._mc[search]);
 			}
-			if (firstonly)
-				return mcValues;
+			if (firstonly) return mcValues;
 		}
 		node = node.parentNode;
 	}
 	return mcValues;
 }
 
-function isDOM(element: { [key:string]: any } ) {
+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 ){
+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 ){
+	if (once) {
 		options.once = once;
 	}
 
 	//console.log( 'addEventListener', eventName, ( handler as Function ).name, options );
-	domNode.addEventListener( eventName, handler, options );
+	domNode.addEventListener(eventName, handler, options);
 }
 
-function removeListener( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject | null ){
-	domNode.removeEventListener( eventName, handler );
+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 {
 	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;
+		(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;
 
 	// add the element with the given property key to the _mc property
-	if ( key.length && !_mc[key]) {
+	if (key.length && !_mc[key]) {
 		_mc[key] = element;
 		// add attribute if HTMLElement
-		if ( target instanceof HTMLElement ) {
+		if (target instanceof HTMLElement) {
 			target.setAttribute('_mc', '');
 		}
 	}
@@ -108,239 +119,264 @@ function add( target: HTMLElement, key: string, element = {} ): any {
 }
 
 // remove a micro component from the DOM
-function remove( target: HTMLMcElement, key: string) {
-	if ( !key ) return; // silent fail
+function remove(target: HTMLMcElement, key: string) {
+	if (!key) return; // silent fail
 
 	const _mc = target?._mc || {};
 
 	// delete the property from the HTMLElement _mc collection
-	if ( _mc && _mc[key] ) {
+	if (_mc && _mc[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: unknown, ev: McEvent | string, data: any = {}) {
+function trigger(
+	target: HTMLElement,
+	ev: McEvent | string,
+	data: any = {},
+	bubble: string = 'l'
+) {
 	let _mc = (target as any)?._mc;
-	if ( !_mc ) return;
-	[ ...Object.values( _mc ) ].forEach( (mc: any) => {
+	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( ev, data );
+		if ((mc as any)?.trigger && typeof (mc as any)?.trigger === 'function') {
+			(mc as any)?.trigger(event);
 		}
 	});
+
+	if (/[ud]/.test(mcEvent.bubble)) {
+		bubbleEvent(target, mcEvent);
+	}
+
 	return;
 }
 
-// run the "init" lifecycle event on the completemcr structure
-function init( element: MC | DC ){
-	if ( element.constructor === DC ) return;
-
-	setTimeout(
-		() => {
-			element.trigger('Init');
-			setTimeout(
-				() => {
-					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') );
-							}
-						});
-					};
-				}
-				, 0
-			);
-		}
-		, 0
-	);
-
+// run the "init" lifecycle event on the complete _mc structure
+function init(element: MC | DC) {
+	if (element.constructor === DC) return;
+
+	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') );
+					}
+				});
+			};
+			*/
+	}, 0);
 }
 
-function autoAttachListeners( element: MC | DC ){
-	if ( !isBrowser() || element.constructor === DC ) return;
+function autoAttachListeners(element: MC | DC) {
+	if (!isBrowser() || element.constructor === DC) return;
 
 	const target = element.target;
 
-	if ( target instanceof HTMLElement ){
+	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
+		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 ){
+					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);
-							}
-						}
-					);
+					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
+				if (nativeEventNames.has('on' + nativeEventName)) {
+					// native event defined in HTMLElement
 					// console.log('added as native listener', target, nativeEventName );
-					addListener( target, nativeEventName, listener, false, once );
+					addListener(target, nativeEventName, listener, false, once);
 				}
 			});
 	}
 }
 
-class McBase {
+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);
+	}
+}
+
+class McBase {
 	#target: WeakRef<any>; // avoid circular reference
 
-	constructor( target?: { [key:string]: any } ) {
+	constructor(target?: { [key: string]: any }, debug: boolean = false) {
 		let that: unknown = this,
-			element  = (that as MC | DC );
+			element = that as MC | DC;
 
-		this.#target = new WeakRef( target || {} );
+		this.#target = new WeakRef(target || {});
 
-		init( element ); // async lifecycle event
+		init(element); // async lifecycle event
 
-		autoAttachListeners( element );
+		autoAttachListeners(element);
 	}
 
 	get target(): any {
 		return this.#target.deref();
 	}
-
 }
 
 class MC extends McBase {
-
-	_mc: { [key:string]: any } = {};
+	_mc: { [key: string]: any } = {};
 
 	constructor(target?: any) {
 		super(target);
 	}
 
-    static trigger = trigger;
+	static trigger = trigger;
 
-	trigger( ev: McEvent | string, data: any = {}, bubble?: string ) {
+	trigger(ev: McEvent | string, data: any = {}, bubble: string = 'l') {
 		let that = this;
 
 		//console.log( that, '.trigger(', ev, data, bubble, ')' );
-		bubble = bubble || 'l';
 
 		// run all triggers
-		if ( that.constructor === MC || that.constructor === DC){
-			[ ...Object.getOwnPropertyNames( that ) ].forEach( (mc) => {
-				if ( (that as any)[mc]?.trigger && typeof (that as any)[mc]?.trigger === 'function' ){
-					(that as any)[mc]?.trigger( ev, data, bubble );
+		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);
-			;
-
+		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'
-				){
+			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
+					(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') {
+			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 ( isBrowser() && /[ud]/.test( mcEvent.bubble ) && (that as any) 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 as any)
-								.parent()
-								.forEach( (mc: any) => {
-									mc instanceof MC ? ( mc as any ).trigger(mcEvent) : null;
-								});
-						}
-
-						// bubble down
-						if ( mcEvent.bubble.indexOf('d') > -1 ){
-							(that as any)
-								.children()
-								.forEach( (mc: any) => {
-									mc instanceof MC ? ( mc as any ).trigger(mcEvent) : null;
-								});
-						}
-
-					},
-					0
-				);
+			//console.log('bubble', mcEvent);
+			if (/[ud]/.test(mcEvent.bubble)) {
+				bubbleEvent(that.target, mcEvent);
 			}
-
 		}
-
 	}
-
-};
+}
 
 class DC extends McBase {
+	_mc: { [key: string]: any } = {};
 
-	_mc: { [key:string]: any } = {};
-
-	constructor(target: HTMLElement ) {
+	constructor(target: HTMLElement, debug: boolean = false) {
 		super(target);
 	}
 
-	static debug: boolean = false;
-
 	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 );
-	};
+	trigger(ev: McEvent | string, data: any = {}, bubble?: string) {
+		MC.prototype.trigger.call(this, ev, data, bubble);
+	}
 
 	parent(search: string = ''): any[] {
 		let target: HTMLElement = (this as any).target;
@@ -372,7 +408,6 @@ class DC extends McBase {
 		const myDomElements = target.querySelectorAll('*[_mc]');
 		return getMicroComponents([...myDomElements], search);
 	}
-
-};
+}
 
 export { addListener, removeListener, McBase, MC, DC, McEvent };

package/src/autoloader.ts

@@ -1,6 +1,6 @@
 "use strict";
 
-import { getCE } from './customElements.js'
+import { getCE } from './elements.js'
 
 // set of currently loading scripts
 const loadingScripts: Set<string> = new Set();

package/src/elements.ts

@@ -0,0 +1,76 @@
+"use strict";
+
+import { DC } from "./MC.js";
+import { kebabToPascal } from "./helpers.js";
+
+class CeBaseClass extends HTMLElement {
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+		(DC as any).trigger(this, "Connected");
+	}
+
+	disconnectedCallback() {
+		(DC as any).trigger(this, "Disconnected");
+	}
+
+	adoptedCallback() {
+		(DC as any).trigger(this, "Adopted");
+	}
+
+	attributeChangedCallback(name: string, oldValue: any, newValue: any) {
+		(DC as any).trigger(this, "AttributeChanged", { name, oldValue, newValue });
+	}
+}
+
+function createNamedClass(
+	name: string,
+	ClassBody: { new (...args: any[]): any }
+) {
+	return Object.defineProperty(ClassBody, "name", { value: name });
+}
+
+export function defineCE(
+	tagName: string,
+	DefinitionClass: { new (...args: any[]): any },
+	observedAttributes: string[] = []
+) {
+	if (customElements.get(tagName)) {
+		console.warn(`IGNORED: Custom element "${tagName}" is already defined!`);
+		return;
+	}
+
+	if (!tagName.includes("-")) {
+		throw new Error(
+			'createCustomElement: tagName must contain at least one hyphen ("-").'
+		);
+	}
+
+	let name = kebabToPascal(tagName);
+
+	customElements.define(
+		tagName,
+		createNamedClass(
+			name,
+			class extends CeBaseClass {
+				instance: any;
+
+				constructor(data?: any) {
+					super();
+					let instance = new DefinitionClass(this, data);
+					(DC as any).add(this, name, instance);
+				}
+
+				static get observedAttributes() {
+					return observedAttributes;
+				}
+			}
+		)
+	);
+}
+
+export function getCE(tagName: string): CustomElementConstructor | undefined {
+	return customElements.get(tagName);
+}