@twobirds/microcomponents 0.0.34 → 0.0.39

package/public/src/MC.ts

@@ -0,0 +1,413 @@
+'use strict';
+
+import { LooseObject } from './helpers.js';
+import { McEvent } from './McEvent.js';
+
+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));
+}
+
+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 {
+	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;
+
+	// add the element with the given property key to the _mc property
+	if (key.length && !_mc[key]) {
+		_mc[key] = element;
+		// add attribute if HTMLElement
+		if (target instanceof HTMLElement) {
+			target.setAttribute('_mc', '');
+		}
+	}
+	return element;
+}
+
+// remove a micro component from the DOM
+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]) {
+		delete _mc[key];
+	}
+
+	// remove the _mc attribute if the DOM collection is empty
+	if (
+		!Object.keys(_mc).length &&
+		target instanceof HTMLElement &&
+		target.hasAttribute('_mc')
+	) {
+		target.removeAttribute('_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);
+		}
+	});
+
+	if (/[ud]/.test(mcEvent.bubble)) {
+		bubbleEvent(target, mcEvent);
+	}
+
+	return;
+}
+
+// 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;
+
+	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);
+				}
+			});
+	}
+}
+
+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 }, debug: boolean = false) {
+		let that: unknown = this,
+			element = that as MC | DC;
+
+		this.#target = new WeakRef(target || {});
+
+		init(element); // async lifecycle event
+
+		autoAttachListeners(element);
+	}
+
+	get target(): any {
+		return this.#target.deref();
+	}
+}
+
+class MC extends McBase {
+	_mc: { [key: string]: any } = {};
+
+	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 {
+	_mc: { [key: string]: any } = {};
+
+	constructor(target: HTMLElement, debug: boolean = false) {
+		super(target);
+	}
+
+	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);
+	}
+
+	parent(search: string = ''): any[] {
+		let target: HTMLElement = (this as any).target;
+		if (!isDOM(target)) return [];
+		return traverseNodes((target as any).parentNode, search, true);
+	}
+
+	ancestors(search: string = ''): any[] {
+		let target: any = (this as any)?.target;
+		if (!isDOM(target)) return [];
+		return traverseNodes((this as any).target.parentNode, search, false);
+	}
+
+	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;
+	}
+
+	descendants(search: string = ''): any[] {
+		let target: any = (this as any)?.target;
+		if (!isDOM(target)) return [];
+		const myDomElements = target.querySelectorAll('*[_mc]');
+		return getMicroComponents([...myDomElements], search);
+	}
+}
+
+export { addListener, removeListener, McBase, MC, DC, McEvent };

package/public/src/McEvent.ts

@@ -0,0 +1,96 @@
+"use strict";
+
+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 ) );
+}
+
+function isDOM(element: { [key:string]: any } ) {
+	return element && element instanceof HTMLElement;
+}
+
+interface McEvent {
+	data: any;
+	bubble: string;
+}
+
+class McEvent{
+
+	#type: string;
+	#stopped: boolean = false;
+	#immediateStopped: boolean = false;
+
+	constructor( type: string, data: any = {}, bubble: string = 'l' ){
+		// bubble standard = local only, options = any combination of'uld' characters: up to root, local, down
+		this.#type = type;
+		this.data = data;
+		this.bubble = bubble;
+	}
+
+	get type(): string {
+		return this.#type;
+	}
+
+	get stopped(): boolean {
+		return this.#stopped;
+	}
+
+	get immediateStopped(): boolean {
+		return this.#immediateStopped;
+	}
+
+	stopPropagation(){
+		this.#stopped = true;
+	}
+
+	stopImmediatePropagation(){
+		this.stopPropagation();
+		this.#immediateStopped = true;
+	}
+
+}
+
+// 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;
+}
+
+export { McEvent };

package/public/src/autoloader.ts

@@ -0,0 +1,98 @@
+"use strict";
+
+import { getCE } from './elements.js'
+
+// set of currently loading scripts
+const loadingScripts: Set<string> = new Set();
+
+const _makeLoadData = ( e: HTMLElement ): Array<any> | false => {
+
+		let
+			tagName = e?.localName ?? '',
+			isAttribute = e.getAttribute?.('is') || '',
+			isUBE = isAttribute ? true : false,
+			isCE = tagName.indexOf('-') !== -1 ? true : false,
+			ubeSelector = isUBE ? `${tagName}[is=\"${isAttribute}\"]:defined` : '',
+			ceSelector = isCE ? tagName + ':defined' : '',
+			fileBaseName = isUBE
+				? isAttribute
+				: isCE
+					? tagName
+					: '',
+			fileName = fileBaseName.length ? '/' + fileBaseName.split('-').join('/') + '.js' : '',
+			selector = isUBE
+				? ubeSelector
+				: isCE
+					? ceSelector
+					: ''
+		;
+
+		//console.log( 'makeLoadData()', tagName, isUBE, isCE, ubeSelector, ceSelector, fileBaseName, ' => ', (isUBE || isCE) ? [ e, selector, fileName ] : false );
+		return (isUBE || isCE) ? [ e, selector, fileName, fileBaseName ] : false;
+}
+
+const _loadRequirements = ( node: HTMLTemplateElement | HTMLElement ): Promise<any> => {
+
+	let
+		undefinedSet: Set<any> = new Set(),
+		element: any = node instanceof HTMLTemplateElement ? (node as HTMLTemplateElement).content : node,
+		head = document.head,
+		allPromises: Array<any> = [],
+		e: HTMLElement;
+	;
+
+	if ( element instanceof HTMLTemplateElement === false ){
+		// if node itself is undefined
+		let data: any = _makeLoadData(element);
+
+		if ( data && !data[0].matches( data[1] ) ){
+			undefinedSet.add( data );
+		}
+	}
+
+	// if some of the childNodes are undefined
+	Array.from( element.childNodes ).forEach(( node )=>{
+		let data: any = _makeLoadData(node as HTMLElement);
+
+		if ( data && !data[0].matches( data[1] ) ){
+			undefinedSet.add( data );
+		}
+	});
+
+	if ( !!undefinedSet.size ){ // there are requirements
+
+		undefinedSet.forEach( (data) => {
+			if ( !getCE( data[3] ) && !loadingScripts.has( data[2]) ){
+
+				loadingScripts.add( data[2] );
+
+				const se: HTMLScriptElement = document.createElement('script');
+
+				se.setAttribute( 'src', data[2] );
+				se.setAttribute( 'blocking', 'render' );
+				se.setAttribute( 'type', 'module' );
+				let s = (data as any)[2];
+				se.onload = () => {
+					// console.info('loaded', s);
+					loadingScripts.delete( s );
+				};
+
+				head.append( se );
+
+				let e = (data as Array<any>)[0];
+			} else {
+				return ;
+			}
+		});
+
+	}
+
+	return Promise.all( allPromises );
+}
+
+/*
+TBD
+	if ( template.content.childNodes.length ){
+		_loadRequirements(template);
+	}
+*/

package/{src/customElements.ts → public/src/elements.ts}

@@ -1,7 +1,7 @@
 "use strict";
 
-import { DC } from './MC.js';
-import { kebabToPascal } from './helpers.js';
+import { DC } from "./MC.js";
+import { kebabToPascal } from "./helpers.js";
 
 class CeBaseClass extends HTMLElement {
 	constructor() {
@@ -9,34 +9,43 @@ class CeBaseClass extends HTMLElement {
 	}
 
 	connectedCallback() {
-		(DC as any).trigger(this, 'Connected');
+		(DC as any).trigger(this, "Connected");
 	}
 
 	disconnectedCallback() {
-		(DC as any).trigger(this, 'Disconnected');
+		(DC as any).trigger(this, "Disconnected");
 	}
 
 	adoptedCallback() {
-		(DC as any).trigger(this, 'Adopted');
+		(DC as any).trigger(this, "Adopted");
 	}
 
 	attributeChangedCallback(name: string, oldValue: any, newValue: any) {
-		(DC as any).trigger(this, 'AttributeChanged', { name, oldValue, newValue });
+		(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 });
+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[] = []){
+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 ("-").');
+	if (!tagName.includes("-")) {
+		throw new Error(
+			'createCustomElement: tagName must contain at least one hyphen ("-").'
+		);
 	}
 
 	let name = kebabToPascal(tagName);
@@ -48,10 +57,10 @@ export function defineCE( tagName: string, DefinitionClass: { new (...args: any[
 			class extends CeBaseClass {
 				instance: any;
 
-				constructor( data?: any ) {
+				constructor(data?: any) {
 					super();
 					let instance = new DefinitionClass(this, data);
-					( DC as any ).add(this, name, instance );
+					(DC as any).add(this, name, instance);
 				}
 
 				static get observedAttributes() {
@@ -60,7 +69,7 @@ export function defineCE( tagName: string, DefinitionClass: { new (...args: any[
 			}
 		)
 	);
-};
+}
 
 export function getCE(tagName: string): CustomElementConstructor | undefined {
 	return customElements.get(tagName);