@twobirds/microcomponents 0.0.51 → 0.0.52

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/public/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.add(this, name, instance);
+				}
+
+				static get observedAttributes() {
+					return observedAttributes;
+				}
+			}
+		)
+	);
+}
+
+export function getCE(tagName: string): CustomElementConstructor | undefined {
+	return customElements.get(tagName);
+}

package/public/src/formValues.ts

@@ -0,0 +1,250 @@
+'use strict';
+
+import { LooseObject, copyGettersSetters } from './helpers.js';
+import { DC, addListener } from './MC.js';
+import { observe } from './observables.js';
+
+type inputTypes = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+
+const getInputName = (
+	e: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+): string => {
+	return e.tagName.toLowerCase();
+};
+
+abstract class InputBase {
+	constructor(e: inputTypes) {}
+
+	abstract get val(): any;
+
+	abstract set val(value: any);
+}
+
+class RadioHandler extends InputBase {
+	#e: HTMLInputElement;
+	#form: HTMLFormElement;
+
+	constructor(e: HTMLInputElement, form: HTMLFormElement) {
+		super(e);
+		this.#e = e;
+		this.#form = form;
+	}
+
+	get val(): string {
+		let ret = new FormData(this.#form).get(this.#e.name);
+
+		//console.log('radio[', this.#e.name, '] = "' + ret + '"');
+		return ret as string;
+	}
+
+	set val(value: string) {
+		let arr = [
+			...this.#form.querySelectorAll(
+				`input[type="radio][name="${this.#e.name}"]`
+			),
+		] as HTMLInputElement[];
+
+		(
+			arr
+				.filter((e) => e.getAttribute('value') === value)
+				.shift() as HTMLInputElement
+		).checked = true;
+	}
+}
+
+class CheckboxHandler extends InputBase {
+	#e: HTMLInputElement;
+
+	constructor(e: HTMLInputElement) {
+		super(e);
+		this.#e = e;
+	}
+
+	get val(): boolean {
+		return this.#e.checked;
+	}
+
+	set val(value: boolean) {
+		this.#e.checked = value;
+	}
+}
+
+class InputHandler extends InputBase {
+	#e: HTMLInputElement;
+
+	constructor(e: HTMLInputElement) {
+		super(e);
+		this.#e = e;
+	}
+
+	get val(): string {
+		return this.#e.value;
+	}
+
+	set val(value: string) {
+		this.#e.value = value;
+	}
+}
+
+class SelectHandler extends InputBase {
+	#e: HTMLSelectElement;
+	#multi: boolean = false;
+
+	constructor(e: HTMLSelectElement) {
+		super(e);
+		this.#e = e;
+		this.#multi = e.multiple;
+	}
+
+	get val(): string[] | string {
+		const that = this,
+			ret: string[] = [];
+
+		// get all options
+		const options = [...that.#e.querySelectorAll('option')]
+			.filter((o) => o.selected)
+			.forEach((o) => {
+				if (o.selected) ret.push(o.value);
+			});
+
+		if (this.#multi) return ret;
+		return ret.length ? ret[0] : '';
+	}
+
+	set val(value: string[] | string) {
+		const that = this;
+
+		value = typeof value === 'string' ? [value] : value;
+
+		// set all options
+		const options = [...that.#e.querySelectorAll('option')].forEach((o) => {
+			if (value.indexOf(o.value) > -1) {
+				o.setAttribute('selected', 'selected');
+				o.selected = true;
+			} else {
+				o.removeAttribute('selected');
+				o.selected = false;
+			}
+		});
+
+		return;
+	}
+}
+
+class TextAreaHandler extends InputBase {
+	#e: HTMLTextAreaElement;
+	constructor(e: HTMLTextAreaElement) {
+		super(e);
+		this.#e = e;
+	}
+
+	get val(): string {
+		return this.#e.value || '';
+	}
+
+	set val(value: string) {
+		this.#e.value = value;
+		return;
+	}
+}
+
+const getInputHandlers = (e: HTMLElement | ShadowRoot): LooseObject => {
+	let inputList = [
+			...(e || document).querySelectorAll('input,select,textarea'),
+		],
+		handlers: LooseObject = {};
+
+	inputList.forEach((i) => {
+		const name: string = (i as inputTypes).getAttribute('name') || 'undefined';
+		// console.log(name);
+		if (name) {
+			let h: InputBase,
+				type = (i as HTMLInputElement).type,
+				handler: any = false;
+			switch (getInputName(i as inputTypes)) {
+				case 'input':
+					switch (type) {
+						case 'radio':
+							handler = new RadioHandler(
+								i as HTMLInputElement,
+								(e.constructor === HTMLFormElement
+									? e
+									: e.querySelector('form')) as HTMLFormElement
+							);
+							break;
+						case 'checkbox':
+							handler = new CheckboxHandler(i as HTMLInputElement);
+							break;
+						default:
+							handler = new InputHandler(i as HTMLInputElement);
+					}
+					break;
+				case 'select':
+					handler = new SelectHandler(i as HTMLSelectElement);
+					break;
+				case 'textarea':
+					handler = new TextAreaHandler(i as HTMLTextAreaElement);
+					break;
+				default:
+					console.warn(
+						'handler missing:',
+						name,
+						'for',
+						i.tagName.toLowerCase(),
+						i
+					);
+					break;
+			}
+
+			if (handler) {
+				DC.add(i, name, handler);
+				Object.defineProperty(handlers, name, {
+					enumerable: true,
+					configurable: true,
+					get: (): any => {
+						return handler.val;
+					},
+					set: (value: any) => {
+						if (handler.val !== value) {
+							handler.val = value;
+						}
+					},
+				});
+			}
+		}
+	});
+
+	return handlers;
+};
+
+export class FormValues {
+	constructor(
+		targetObject: LooseObject,
+		propertyName: string,
+		dom: HTMLElement | ShadowRoot
+	) {
+		let that = this,
+			handlers = getInputHandlers(dom);
+
+		targetObject[propertyName] = Object.assign({}, handlers);
+
+		observe(targetObject, propertyName);
+
+		copyGettersSetters(handlers, targetObject[propertyName]);
+
+		[...dom.querySelectorAll('input, textarea, select')].forEach((input) => {
+			addListener(input as inputTypes, 'keyup', (ev: Event) => {
+				//console.log('keyup', ev);
+				targetObject[propertyName].notify();
+			});
+			addListener(input as HTMLElement, 'change', (ev: Event) => {
+				//console.log('change', ev);
+				targetObject[propertyName].notify();
+			});
+			addListener(input as inputTypes, 'select', (ev: Event) => {
+				//console.log('select', ev);
+				targetObject[propertyName].notify();
+			});
+		});
+	}
+}

package/public/src/helpers.ts

@@ -0,0 +1,149 @@
+'use strict';
+
+export interface LooseObject {
+	[key: string | symbol]: any;
+}
+
+export function isNativeObject(value: any): boolean {
+	return value && value['constructor'] && value.constructor === Object;
+}
+
+export function sortObject(o: LooseObject): LooseObject {
+	let result: LooseObject = {},
+		keys = [...Object.keys(o)].sort();
+
+	keys.forEach((key) => {
+		if (isNativeObject(o[key])) {
+			result[key] = sortObject(o[key]);
+		} else {
+			result[key] = o[key];
+		}
+	});
+
+	return result;
+}
+
+export function flattenObject(
+	o: LooseObject,
+	doSort: boolean = true
+): LooseObject {
+	let result: LooseObject = {};
+
+	[...Object.getOwnPropertyNames(o)].forEach((propName) => {
+		if (
+			o[propName] &&
+			o[propName]['constructor'] &&
+			o[propName].constructor === Object
+		) {
+			const temp = flattenObject(o[propName], false);
+			for (const j in temp) {
+				result[propName + '.' + j] = temp[j];
+			}
+		} else {
+			result[propName] = o[propName];
+		}
+	});
+
+	return doSort ? sortObject(result) : result;
+}
+
+export function deepEqual(o1: LooseObject, o2: LooseObject): boolean {
+	return (
+		JSON.stringify(flattenObject(o1)) === JSON.stringify(flattenObject(o2))
+	);
+}
+
+export function nameSpace(ns: string | string[], obj: LooseObject = {}): any {
+	let nsa = ns.constructor === String ? ns.split('.') : ns;
+
+	if (!obj || !nsa[0] || !obj[nsa[0]]) {
+		console.warn('ns', nsa[0], 'not in', obj);
+		return;
+	}
+	if (obj[nsa[0]].constructor === Object && nsa.length > 1) {
+		return nameSpace((nsa as string[]).splice(1), obj[nsa[0]]);
+	}
+	return obj[nsa[0]];
+}
+
+export function parse(what: string | Object | any[], parseThis: Object) {
+	var args = Array.from(arguments);
+
+	if (args.length > 2) {
+		while (args.length > 1) {
+			args[0] = parse(args[0], args[1]);
+			args.splice(1, 1);
+		}
+		return args[0];
+	}
+
+	if (typeof what === 'string') {
+		what.match(/\{[^\{\}]*\}/g)?.forEach(function (pPropname) {
+			var propname = pPropname.substring(1, pPropname.length - 1),
+				value = nameSpace(propname, parseThis);
+			//console.log(propname, value);
+			if (typeof value !== 'undefined') {
+				what = (what as string).replace(pPropname, value);
+			}
+		});
+	} else if (isNativeObject(what)) {
+		switch (what.constructor) {
+			case Object:
+				Object.keys(what).forEach(function (pKey) {
+					if (what.hasOwnProperty(pKey)) {
+						(what as LooseObject)[pKey] = parse(
+							(what as LooseObject)[pKey],
+							parseThis
+						);
+					}
+				});
+				break;
+			case Array:
+				(what as Array<any>).forEach(function (pValue, pKey, original) {
+					original[pKey] = parse((what as any)[pKey], parseThis);
+				});
+				break;
+		}
+	}
+
+	return what;
+}
+
+export function kebabToPascal(str: string) {
+	return str
+		.split('-') // Split by hyphens
+		.map((word) => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize each part
+		.join(''); // Join without spaces
+}
+
+export function debounce(func: Function, milliseconds: number): Function {
+	let timeout: any;
+	return () => {
+		clearTimeout(timeout);
+
+		timeout = setTimeout(function () {
+			func(...arguments);
+		}, milliseconds);
+	};
+}
+
+export function htmlToElements(html: string): HTMLElement[] {
+	let template = document.createElement('template');
+
+	html = html.replace(/<([A-Za-z0-9\-]*)([^>\/]*)(\/>)/gi, '<$1$2></$1>'); // replace XHTML closing tags by full closing tags
+
+	template.innerHTML = html;
+
+	template.content.normalize();
+
+	return Array.from(template.content.childNodes) as HTMLElement[];
+}
+
+export function copyGettersSetters(source: LooseObject, target: LooseObject) {
+	const descriptors = Object.getOwnPropertyDescriptors(source);
+	for (const [key, descriptor] of Object.entries(descriptors)) {
+		if ('get' in descriptor || 'set' in descriptor) {
+			Object.defineProperty(target, key, descriptor);
+		}
+	}
+}

package/public/src/microcomponents.ts

@@ -0,0 +1,8 @@
+"use strict";
+export * from './helpers.js';
+export * from './MC.js';
+export * from './McEvent.js';
+export * from './elements.js';
+export * from './observables.js';
+export * from './selectors.js';
+export * from './formValues.js';