@twobirds/microcomponents 0.0.66 → 0.0.67

package/public/src/MC.ts

@@ -0,0 +1,605 @@
+'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.getAttribute('_mc') ) {
+			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?: LooseObject = {};
+
+	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?: LooseObject = {};
+
+	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);
+	}
+}
+
+/*
+unresolvedCEs (code below this comment):
+
+a repository (a hashmap) of undefined custom elements: 
+the name is the tagname of the micro component (like "my-custom-component")
+if they are loading, the value is a script element
+if they are loaded, the entry is deleted and the browser instanciates it automatically
+if they cannot be loaded, the browser will throw an error
+
+If the custom element ( defined by its tagname, like "my-custom-component") is not defined, it will be on-demand loaded:
+The file name is assumed to be "/my/custom/component.js"
+The file must define a custom element via the defineCE() function included in the "elements" module. 
+This function is a wrapper for customElementRegistry.define(), which you can also use directly in the imported code.
+
+In general this behaves like a custom runtime import for custom elements in the browser.
+The only difference is that the micro component is loaded only when needed, and not on page load.
+*/	
+
+const CEs = new Map();
+
+/*
+loadedMCs (code below this comment): 
+a repository (a hashmap) of micro components: 
+the name is the name of the micro component (like "my-mc")
+if they are loading, the value is a script element
+if they are loaded, the value is the micro component class itself
+
+This is mostly used for old style progressive enhancement:
+If the micro component ( defined in the HTMLElements "_mc" attribute, like "my-mc") is not defined, it will be on-demand loaded:
+The file name is assumed to be "/my/mc.js"
+The file needs to have a default export, and it should be a class that extends the DC class ( since it is in a HTMLElements attribute )
+
+In general this behaves like a custom runtime import for classes in the browser.
+The only difference is that the micro component is loaded only when needed, and not on page load.
+*/	
+const MCs = new Map(); 
+
+function makeLoadScript( element: string ): HTMLScriptElement {
+
+	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( 'name', element);
+	se.setAttribute( 'loading', '');
+
+	addListener( se, 'load', (ev) => {
+		// console.info('loaded MC', elementName);
+		se.removeAttribute( 'loading' );
+		se.setAttribute( 'loaded', '');
+	});
+
+	addListener( se, 'error', (ev) => {
+		console.error('could not load Custom Element code from', fileName);
+	});
+
+	return se;
+}
+
+function onLoadCallback( script: HTMLScriptElement ) {
+	// create callback script tag
+	// it is essential to do this in a timeout and via another script tag, 
+	// to force it to be a top level module allowing for the use of "import"
+	setTimeout( function(){
+		// create callback script tag
+		const importFileName = script.getAttribute('src');
+		const elementName = script.getAttribute('name');
+		
+		const se: HTMLScriptElement = document.createElement('script');
+
+		se.async = true;
+		se.setAttribute( 'type', 'module');
+
+		// --- autoload script
+		const code = /*javascript*/`
+
+			import _ from "${importFileName}";
+			import {DC} from "./microcomponents.js";
+
+			const elements = Array.from(document.querySelectorAll('[_mc*="${elementName}"]')).filter( element => element instanceof HTMLElement );
+
+			elements.forEach((element) => {
+				// add class to MCs repository
+				autoload.state.MCs.set( '${elementName}', _ );
+				// add instance to HTMLElement 
+				DC.add(element, _.name, new _(element));
+				// remove instance name from elements "_mc" attribute
+				element.setAttribute('_mc', element.getAttribute('_mc').replace('${elementName}', '').replace( /\w\w/g, ' ').trim()); 
+			});
+
+			setTimeout( () => {
+				document.body.querySelector('script[name="${elementName}]"')?.remove();
+			},0);
+
+		`;
+		// --- end autoload script
+
+		se.innerHTML = code;
+		document.body.append(se);
+	}, 0);
+}
+
+function loadUndefinedMicroComponents() {
+
+	// load unresolved custom eleents
+	[ ...document.querySelectorAll(':not(:defined)') ] // undefined custom elements
+		.filter( (element) => !!element 
+			&& !customElements.get(element.tagName.toLowerCase()) // not in CustomElementsRegistry
+			&& !CEs.has(element.tagName.toLowerCase()) // not in loading list
+		)
+		.forEach((el) => {
+			const elementName = el.tagName.toLowerCase(),
+				fileName: string = './'+elementName.split('-').join('/')+'.js';	
+
+			const se: HTMLScriptElement = makeLoadScript( elementName );
+
+			addListener( se, 'load', () => { 
+				CEs.set( elementName, customElements.get(el.tagName.toLowerCase()) );
+			});
+
+			CEs.set( elementName, 'loading');
+			document.head.append(se);
+
+			// instanciation of the micro component will be handled by the browser automatically
+			// module code must define the micro component class and add it to the customElementRegistry
+		});
+
+	[ ...document.querySelectorAll('[_mc]:not([_mc=""]') ] // undefined DOM components
+		.filter( (element) => !!element )
+		.forEach((el) => {
+			const elements = el.getAttribute('_mc')?.split(' ').filter( m => !!m ) || [];
+			const elementsToBeLoaded = elements.filter( m => !MCs.has( m ) );
+
+			// load MC components that do not exist yet
+			elementsToBeLoaded?.forEach( elementName => {
+				const se: HTMLScriptElement = makeLoadScript( elementName );
+
+				addListener( se, 'load', () => onLoadCallback( document.head.querySelector(`script[name="${elementName}"]`) as HTMLScriptElement) );
+			
+				MCs.set( elementName, 'loading');
+
+				document.head.append(se);
+			});
+
+			// loading MC components already have callbacks attached
+			const elementsAlreadyLoaded = elements.filter( m => MCs.has( m ) && !MCs.get( m )!.length); 
+
+			// MCs that are already loaded will trigger the onLoadCallback manually
+			elementsAlreadyLoaded?.forEach( elementName => {
+				setTimeout( ()=>{
+					//console.log('attaching', elementName, (autoload as any).state.MCs.get(elementName));
+					DC.add(el, elementName, new ( (autoload as any).state.MCs.get(elementName) as any)(el)); // add instance to DOM
+					
+					const newAttribute = (el as any).getAttribute('_mc')
+						.replace('${elementName}', '')
+						.replace( /\w\w/g, ' ')
+						.trim() || '_mc';
+
+					(el as any).setAttribute('_mc', ); // set new "_mc" attribute
+				}, 5);
+			});
+		});
+}
+
+let autoloadEnabled: boolean = false;
+let observer: MutationObserver | null = null;
+
+export function autoload(enable: boolean = true): boolean {
+	if (!enable) {
+		observer?.disconnect();
+		observer = null;
+		return autoloadEnabled;
+	}
+
+	autoloadEnabled = enable;
+	observer = new MutationObserver(loadUndefinedMicroComponents);
+
+	setTimeout(() => {
+		observer!.observe(document.body, { childList: true, subtree: true });
+		loadUndefinedMicroComponents();
+	}, 5);
+
+	return autoloadEnabled;
+}
+
+(autoload as LooseObject).state = { CEs, MCs };
+
+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 };