@twobirds/microcomponents 0.0.48 → 0.0.51

package/public/src/autoloader.ts

@@ -1,98 +0,0 @@
-"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

@@ -1,76 +0,0 @@
-"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/public/src/formValues.ts

@@ -1,275 +0,0 @@
-"use strict";
-
-import { LooseObject } from './helpers.js'
-import { MC, addListener } from './MC.js'
-
-type inputTypes = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-
-const getInputName = ( e: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement ): string => {
-
-	let ret = e instanceof HTMLInputElement
-		? 'input'
-		: e instanceof HTMLSelectElement
-			? 'select'
-			: e instanceof HTMLTextAreaElement
-				? 'textarea'
-				: ''
-		;
-
-	return ret;
-}
-
-abstract class InputBase{
-	constructor( e: any ){
-	}
-
-	abstract get val(): any;
-
-	abstract set val( value: any );
-
-}
-
-const getInputHandlers = ( e: HTMLElement | ShadowRoot ): LooseObject => {
-
-		let
-			//inputList = ( Array.from( e.querySelectorAll('*') ) as HTMLElement[] ).filter( i => isInputElement(i) ),
-			inputList = [ ...( e || document).querySelectorAll('input,select,textarea') ],
-			handlers: LooseObject = {};
-
-		inputList.forEach( (i) => {
-			const
-				name: string = ( i as inputTypes ).getAttribute('name') || 'undefined';
-
-			if ( name ){
-				let h: InputBase;
-				switch ( getInputName( i as inputTypes ) ){
-					case 'input':
-						//console.log( i, 'is HTMLInputElement');
-						h = new InputHandler( i as HTMLInputElement, e ); // e = element to search radios in = radioBase
-						Object.defineProperty( handlers, name, {
-							enumerable: true,
-							configurable: true,
-							get: (): any => { return h.val },
-							set: ( value: any ) => { h.val = value }
-						});
-						break;
-					case 'select':
-						//console.log( i, 'is HTMLSelectElement');
-						h = new SelectHandler( i as HTMLSelectElement );
-						Object.defineProperty( handlers, name, {
-							enumerable: true,
-							configurable: true,
-							get: (): any => { return h.val },
-							set: ( value: any ) => { h.val = value }
-						});
-						break;
-					case 'textarea':
-						//console.log( i, 'is HTMLTextAreaElement');
-						h = new TextAreaHandler( i as HTMLTextAreaElement );
-						Object.defineProperty( handlers, name, {
-							enumerable: true,
-							configurable: true,
-							get: (): any => { return h.val },
-							set: ( value: any ) => { h.val = value }
-						});
-						break;
-					default:
-						console.warn('handler missing:', name, 'for', i);
-						break;
-				}
-			}
-		});
-
-		return handlers;
-}
-
-class InputHandler extends InputBase {
-
-	#e: HTMLInputElement;
-	#type: string;
-	#radioBase: any;
-
-	constructor( e: HTMLInputElement, radioBase?: HTMLElement | ShadowRoot ){
-		super( e );
-		this.#e = e;
-		this.#type = e.type;
-		this.#radioBase = radioBase;
-	}
-
-	get val(): any{
-		let that = this,
-			type = that.#type,
-			ret: any;
-
-		switch (type){
-			case 'radio':
-				const check = [ ...(this.#radioBase || document).querySelectorAll( `input[type="radio"][name="${ this.#e.getAttribute('name') }"]` ) ]
-					.filter( e => e.checked );
-				if ( !check.length ) return '';
-				ret = check?.[0];
-				return ret.value;
-			case 'checkbox':
-				return that.#e.checked;
-			default:
-				return that.#e.value;
-				break;
-		}
-
-		return '';
-	}
-
-	set val( value: any ){
-		let that = this,
-			type = that.#type,
-			ret: any;
-
-		switch (type){
-			case 'radio':
-				const
-					radios = [ ...(this.#radioBase || document).querySelectorAll(  `input[type="radio"][name="${ this.#e.getAttribute('name') }"]`  ) ];
-
-				// console.log('set radios', selection, this.#radioBase, radios.array );
-
-				if ( !radios.length ) return;
-
-				if ( value === '' ){ // uncheck all
-					radios.forEach( r => { if (r.checked) r.checked = false } );
-					//console.log('unset all radios', radios.array );
-					return;
-				}
-
-				const setRadioElement = radios.filter( r => r.getAttribute('value') === value );
-
-				if ( !setRadioElement.length ) return;
-
-				// console.log('set this radio', setRadioElement.array );
-
-				(setRadioElement?.[0] as HTMLInputElement).checked = true;
-
-				// console.log('done', setRadioElement.array );
-				return;
-				break;
-			case 'checkbox':
-				that.#e.checked = value;
-				break;
-			default:
-				that.#e.value = value;
-				break;
-		}
-
-		return;
-	}
-
-}
-
-class SelectHandler extends InputBase {
-
-	#e: HTMLSelectElement;
-	#multi: boolean = false;
-
-	constructor( e: HTMLSelectElement ){
-		super( e );
-		this.#e = e;
-		this.#multi = e.type === 'select-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;
-
-		//console.log('set values', 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;
-	}
-
-}
-
-export const formValues = ( target: HTMLElement | ShadowRoot, values: Object = {}, mc?: typeof MC, observable?: string ): LooseObject => {
-
-	//console.log( 'values(', target, ',', values, ',', observable, ')' );
-
-	//console.log( 'values()', values );
-	let handlers = getInputHandlers( target );
-
-	function updateForm( values: Object ){
-		Object
-			.keys( values )
-			.forEach( (key) => {
-				if ( handlers.hasOwnProperty(key) && values.hasOwnProperty(key) ) {
-					//console.log( 'set value', key, values[key] );
-					handlers[key] = (values as LooseObject)[key];
-				}
-		});
-	}
-
-	if ( Object.keys(values).length > 0 ){
-		updateForm( values );
-	}
-
-	//console.log( 'set observable on form change', observable );
-	if ( observable !== undefined ){
-		let obs = ( mc as LooseObject )[observable];
-		if ( !obs.constructor?.hasFormHandler ){
-			obs.constructor.hasFormHandler = true;
-			obs.observe( updateForm );
-		}
-
-		( mc as any)[observable].observe( () => { } );
-
-		[ ...target.querySelectorAll('input, textarea, select') ].forEach( ( e ) => {
-			addListener( (e as HTMLElement), 'keyup', () => { ( mc as any)[observable] = structuredClone( Object.assign( handlers ) ) } );
-			addListener( (e as HTMLElement), 'change', () => { ( mc as any)[observable] = structuredClone( Object.assign( handlers ) ) } );
-			if ( (e as HTMLElement) instanceof HTMLSelectElement ){
-				addListener( (e as HTMLElement), 'select', () => { ( mc as any)[observable] = structuredClone( Object.assign( handlers ) ) } );
-			};
-		});
-	}
-
-	return observable ? ( mc as any)[observable] : Object.assign( {}, handlers );
-}

package/public/src/helpers.ts

@@ -1,140 +0,0 @@
-'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[];
-}

package/public/src/microcomponents.ts

@@ -1,8 +0,0 @@
-"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';