@twobirds/microcomponents 0.0.20 → 0.0.22

package/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/src/autoloader.ts

@@ -0,0 +1,98 @@
+"use strict";
+
+import { getCE } from './customElements.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

@@ -0,0 +1,67 @@
+"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);
+}

package/src/customObservables.ts

@@ -0,0 +1,340 @@
+"use strict";
+
+import { LooseObject } from './helpers.js';
+import { isObject, parse, debounce, deepEqual } from './helpers.js';
+
+export const makeCO = ( target: LooseObject, propertyName?: string ) => {
+
+	let keys = !propertyName ? [ ...Object.getOwnPropertyNames(target) ] : [ propertyName ];
+
+	keys.forEach( (key) => {
+		// console.log( 'co propname', key, typeof target[key], target[key] );
+		if ( key[0] === '_' || target?.[key] === undefined ) return;
+		let
+			val: any = target[key],
+			Constructor: any
+		;
+
+		if ( !val.prototype ){
+			switch ( typeof val ){
+				case "string":
+					Constructor = String;
+					break;
+				case "number":
+					Constructor = Number;
+					break;
+				case "boolean":
+					Constructor = Boolean;
+					break;
+				case "object":
+					if ( val instanceof Array){
+						Constructor = Array;
+					} else {
+						Constructor = Object;
+					}
+					break;
+				default:
+					return;
+			}
+
+		}
+
+		let Observable = class extends Constructor{
+
+			constructor( val: any ){
+				super( val );
+				(this.constructor as LooseObject).callbacks = [];
+				if ( isObject(val) ){ // you cannot bind native values to the dom
+					(this.constructor as LooseObject).bound = [];
+					Object.getOwnPropertyNames( val ).forEach( (key) => {
+						this[key] = val[key];
+					});
+				}
+			}
+
+			observe( f: Function ){
+				//console.log('observe');
+				(this.constructor as any).callbacks.push( f );
+				return this;
+			}
+
+			bind( target: HTMLElement | ShadowRoot ){
+
+				const
+					that = this,
+					iso = isObject( that.valueOf() ),
+					bound = (that.constructor as any).bound
+				;
+
+				//console.log('bind', iso, target);
+
+				if ( iso ){
+					// console.log('bind...', that.valueOf(), target );
+
+					function walk( element: Node ){
+						//console.log('-walk:', element, element.childNodes );
+
+						if ( !!element['nodeType'] && element.nodeType === 3 ){ // text node
+							//console.log('--type: textNode(3)');
+
+							var placeholders = Array.from( element.nodeValue && element.nodeValue.match( /\{[^\{\}]*\}/g ) || []);
+
+							if ( placeholders.length > 0 ){
+								//console.log('--placeholders:', placeholders);
+								var f=(function( template: string ){
+									//console.log('template', template);
+									return function( values: any ){
+										var t,
+											changed = false;
+
+										//console.log( 'placeholders:', placeholders, 'values:', values);
+										if ( placeholders ){
+											if ( iso ){
+												placeholders.forEach(function(placeholder){
+													if ( ( f as LooseObject).values[placeholder] !== values[placeholder] ){
+														(f as LooseObject).values[placeholder] = values[placeholder];
+														changed = true;
+													}
+												});
+											} else { // it is a simple value
+												(f as LooseObject).values = values;
+												changed = true;
+											};
+										}
+										if (changed){ // only reflow if changed
+											t = template;
+											//console.log('--template parse', t, (f as LooseObject).values );
+											if ( iso ){
+													element.nodeValue = parse(
+														t,
+														(f as LooseObject).values
+													);
+											} else { // it is a simple value -> replace every placeholder whatever the name wi
+												element.nodeValue = t.replace( /\{.*\}/g ,(f as LooseObject).values );
+											};
+										}
+										return values;
+									};
+								})( element.nodeValue || '' );
+
+								(f as LooseObject).values = iso ? {} : undefined;
+								placeholders = Array.from( placeholders ).map((pKey) => pKey.replace(/[\{\}]/g, '').trim());
+
+								let initial: any = iso ? {} : undefined;
+								placeholders.forEach(function(pKey){
+									if ( iso ){
+										initial[pKey] = "";
+									}
+								});
+
+								bound.push(f);
+								// console.log( `--bound textNode`, placeholders, f );
+								//(observableFunction as Function)(initial);
+							}
+
+							//console.log('--childNodes:', element.childNodes );
+							Array.from( element.childNodes )
+								.forEach(function( childNode ){
+									walk( childNode );
+								});
+
+							that.notify();
+						}
+
+						if ( !!element['nodeType'] && element.nodeType === 1 ){ // HTML element
+							//console.log('--type: HTMLElement(1)');
+							Array.from( (element as HTMLElement).attributes )
+								.forEach(
+									function( attributeNode ){
+										var placeholders = Array.from( attributeNode.value && attributeNode.value.match( /\{[^\{\}]*\}/g ) || []);
+
+										if ( placeholders.length > 0 ){
+											//console.log( `--[${attributeNode.value}] placeholders:`, placeholders );
+
+											var f=(function( template: string ){
+												return function( values: any ){
+													var t,
+														changed = false;
+
+													//console.log( 'placeholders:', placeholders, 'values:', values);
+													if ( placeholders ){
+														placeholders.forEach(function(pKey){
+															if ( ( f as LooseObject).values[pKey] !== values[pKey] ){
+																(f as LooseObject).values[pKey] = values[pKey];
+																changed = true;
+															}
+														});
+													}
+													if (changed){ // only reflow if changed
+														t = template;
+														element.nodeValue = parse(
+															t,
+															(f as LooseObject).values
+														);
+													}
+													return values;
+												};
+											})( attributeNode.value || '' );
+
+											(f as LooseObject).values = {};
+											placeholders = Array.from( placeholders ).map((pKey) => pKey.replace(/[\{\}]/g, '').trim());
+											let initial: LooseObject = {};
+											placeholders.forEach(function(pKey){
+												initial[pKey] = "";
+											});
+
+											bound.push(f);
+											// console.log( `--bound element attribute`, placeholders, f );
+											// console.log( `--bound`, observableFunction.bound );
+											//(observableFunction as Function)(initial);
+										}
+									}
+								);
+
+							//console.log('--childNodes:', element.childNodes );
+							Array.from( element.childNodes )
+								.forEach(function( childNode ){
+									walk( childNode );
+								});
+
+							that.notify();
+
+						}
+
+						if ( !!element['nodeType'] && element.nodeType === 11 ){ // shadowRoot node
+							// console.log( element, element.childNodes );
+							Array.from( element.childNodes )
+								.forEach(function( childNode ){
+									walk( childNode );
+								});
+						}
+					}
+
+					walk( target );
+
+					if ( bound.length > 0 ){
+						that.notify();
+					}
+				} else {
+					console.warn( 'IGNORED - cannot bind a non-Object to the dom, IS:', typeof that.valueOf() );
+				}
+
+				return this;
+			}
+
+			notify(){
+				let
+					that = this,
+					data = isObject( that.valueOf() ) && ( that.valueOf() instanceof Array ) === false
+						? structuredClone( Object.assign({}, that) )
+						: that.valueOf()
+				;
+
+				// console.log('notify', that.constructor, (that.constructor as any).callbacks.length, (that.constructor as any)?.bound?.length, data );
+				(that.constructor as any).callbacks.forEach( (f: Function) => {
+					// console.log( 'callback', f, data);
+					f( data );
+				});
+				if ( isObject( that.valueOf() ) ){
+					// console.log('bound', this.constructor);
+					(that.constructor as any).bound.forEach( (f: Function) => {
+						// console.log( 'bound', f, data);
+						f( data );
+					});
+				}
+				return this;
+			}
+		}
+
+		//(Observable.constructor as LooseObject).callbacks = [];
+		let o = new Observable( val );
+
+		Object.defineProperty(
+			target,
+			key,
+			{
+				enumerable: true,
+				get(){
+					if ( isObject( o.valueOf() ) ){
+						let check = structuredClone( Object.assign( {}, o ) );
+						setTimeout(
+							debounce(
+								function checkChanges(){
+									let state = structuredClone( Object.assign( {}, o ) );
+									//console.log( 'check changes', state, check );
+									if ( !deepEqual( state, check ) ){
+										//console.log( '-> not equal!' );
+										o.notify();
+									}
+								},
+								0
+							),
+							0
+						);
+					}
+					return o;
+				},
+				set( val: any ){
+					//console.log( 'SET:', isObject( val.valueOf() ), 'set:', val, 'to', isObject( o.valueOf() ), o, );
+					if ( typeof val === typeof o.valueOf() ){
+
+						let iso = isObject( o.valueOf() ) && ( o.valueOf() instanceof Array ) === false;
+						//let iso = o.constructor.prototype.__proto__.constructor === Object;
+						//console.log('target iso:', iso);
+						if ( iso ){
+							let
+								old = structuredClone( Object.assign( {}, o ) )
+							;
+
+							val = structuredClone( Object.assign( {}, val ) );
+
+							let
+								hasFormHandler = (o.constructor as LooseObject)?.hasFormHandler ?? false,
+								callbacks = (o.constructor as LooseObject).callbacks,
+								bound = (o.constructor as LooseObject).bound
+							;
+
+							o = new Observable( structuredClone( Object.assign( {}, val ) ) );
+
+							//console.log('after set o=', o, 'check', old);
+							(o.constructor as LooseObject).callbacks = hasFormHandler;
+							(o.constructor as LooseObject).callbacks = callbacks;
+							(o.constructor as LooseObject).bound = bound;
+
+							setTimeout( // check for changes
+								debounce(
+									function checkChanges(){
+										let state = structuredClone( Object.assign( {}, o ) );
+										//console.log( 'check changes', state, check );
+										if ( !deepEqual( state, old ) ){
+											//console.log( '-> not equal!' );
+											o.notify();
+										}
+									},
+									0
+								),
+								0
+							);
+						} else { // simple native var
+							let
+								old = o.valueOf(),
+								callbacks = (o.constructor as LooseObject).callbacks
+							;
+							o = new Observable( val );
+							(o.constructor as LooseObject).callbacks = callbacks;
+							if ( val !== old ){
+								o.notify();
+							}
+						}
+					} else {
+						console.warn( 'IGNORED - cannot change observable types, IS:', typeof o.valueOf(), '- CANNOT BECOME:', typeof val );
+					}
+				}
+			}
+		);
+
+		target[key] = val;
+
+	});
+
+}