@twobirds/microcomponents 0.0.48 → 0.0.51

package/src/MC.ts

@@ -411,3 +411,68 @@ class DC extends McBase {
 }
 
 export { addListener, removeListener, McBase, MC, DC, McEvent };
+
+let observer: MutationObserver | null = null;
+const unresolved = new Map();
+
+function loadit() {
+	document
+		.querySelectorAll(':not(:defined),[_mc]:not([_mc=""])')
+		.forEach((el) => {
+			const load: string[] = el.tagName.includes('-')
+				? [el.tagName.toLowerCase()]
+				: el.getAttribute('_mc')!.trim().split(' ');
+
+			load.forEach((elementName) => {
+				let fileName: any = elementName.toLowerCase().split('-'), // intentional any
+					lastElement = fileName[fileName.length - 1],
+					renameLastElement =
+						lastElement[0].toUpperCase() + lastElement.slice(1);
+				fileName[fileName.length - 1] = renameLastElement;
+				fileName = fileName.join('/') + '.js';
+
+				// autoload web components
+				// TBD: _mc components
+				if (
+					el.tagName.includes('-') &&
+					!unresolved.has(el.tagName.toLowerCase())
+				) {
+					const se: HTMLScriptElement = document.createElement('script');
+
+					unresolved.set(elementName, fileName);
+
+					se.setAttribute('src', fileName);
+					se.setAttribute('blocking', 'render');
+					se.setAttribute('type', 'module');
+					se.onload = () => {
+						// console.info('loaded', s);
+						unresolved.delete(elementName);
+						//console.log(unresolved);
+					};
+
+					document.head.append(se);
+				}
+			});
+			//console.log(unresolved);
+		});
+}
+
+let autoloadEnabled: boolean = false;
+
+export function autoload(enable: boolean = true): boolean {
+	if (!enable) {
+		observer?.disconnect();
+		observer = null;
+		return autoloadEnabled;
+	}
+
+	autoloadEnabled = enable;
+	observer = new MutationObserver(loadit);
+
+	setTimeout(() => {
+		observer!.observe(document.body, { childList: true, subtree: true });
+		loadit();
+	}, 5);
+
+	return autoloadEnabled;
+}

package/src/elements.ts

@@ -1,7 +1,7 @@
-"use strict";
+'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,19 +9,19 @@ 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 });
 	}
 }
 
@@ -29,7 +29,7 @@ function createNamedClass(
 	name: string,
 	ClassBody: { new (...args: any[]): any }
 ) {
-	return Object.defineProperty(ClassBody, "name", { value: name });
+	return Object.defineProperty(ClassBody, 'name', { value: name });
 }
 
 export function defineCE(
@@ -42,7 +42,7 @@ export function defineCE(
 		return;
 	}
 
-	if (!tagName.includes("-")) {
+	if (!tagName.includes('-')) {
 		throw new Error(
 			'createCustomElement: tagName must contain at least one hyphen ("-").'
 		);
@@ -60,7 +60,7 @@ export function defineCE(
 				constructor(data?: any) {
 					super();
 					let instance = new DefinitionClass(this, data);
-					(DC as any).add(this, name, instance);
+					DC.add(this, name, instance);
 				}
 
 				static get observedAttributes() {

package/src/formValues.ts

@@ -1,275 +1,277 @@
-"use strict";
+'use strict';
 
-import { LooseObject } from './helpers.js'
-import { MC, addListener } from './MC.js'
+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 => {
+const getInputName = (
+	e: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+): string => {
+	return e.tagName.toLowerCase();
+};
 
-	let ret = e instanceof HTMLInputElement
-		? 'input'
-		: e instanceof HTMLSelectElement
-			? 'select'
-			: e instanceof HTMLTextAreaElement
-				? 'textarea'
-				: ''
-		;
-
-	return ret;
-}
-
-abstract class InputBase{
-	constructor( e: any ){
-	}
+abstract class InputBase {
+	constructor(e: inputTypes) {}
 
 	abstract get val(): any;
 
-	abstract set val( value: 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 {
-
+class RadioHandler extends InputBase {
 	#e: HTMLInputElement;
-	#type: string;
-	#radioBase: any;
+	#form: HTMLFormElement;
 
-	constructor( e: HTMLInputElement, radioBase?: HTMLElement | ShadowRoot ){
-		super( e );
+	constructor(e: HTMLInputElement, form: HTMLFormElement) {
+		super(e);
 		this.#e = e;
-		this.#type = e.type;
-		this.#radioBase = radioBase;
+		this.#form = form;
 	}
 
-	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;
-		}
+	get val(): string {
+		let ret = new FormData(this.#form).get(this.#e.name);
 
-		return '';
+		//console.log('radio[', this.#e.name, '] = "' + ret + '"');
+		return ret as string;
 	}
 
-	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;
+	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;
+	}
+}
 
-				if ( value === '' ){ // uncheck all
-					radios.forEach( r => { if (r.checked) r.checked = false } );
-					//console.log('unset all radios', radios.array );
-					return;
-				}
+class CheckboxHandler extends InputBase {
+	#e: HTMLInputElement;
 
-				const setRadioElement = radios.filter( r => r.getAttribute('value') === value );
+	constructor(e: HTMLInputElement) {
+		super(e);
+		this.#e = e;
+	}
 
-				if ( !setRadioElement.length ) return;
+	get val(): boolean {
+		return this.#e.checked;
+	}
 
-				// console.log('set this radio', setRadioElement.array );
+	set val(value: boolean) {
+		this.#e.checked = value;
+	}
+}
 
-				(setRadioElement?.[0] as HTMLInputElement).checked = true;
+class InputHandler extends InputBase {
+	#e: HTMLInputElement;
 
-				// console.log('done', setRadioElement.array );
-				return;
-				break;
-			case 'checkbox':
-				that.#e.checked = value;
-				break;
-			default:
-				that.#e.value = value;
-				break;
-		}
+	constructor(e: HTMLInputElement) {
+		super(e);
+		this.#e = e;
+	}
 
-		return;
+	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 );
+	constructor(e: HTMLSelectElement) {
+		super(e);
 		this.#e = e;
-		this.#multi = e.type === 'select-multiple';
+		this.#multi = e.multiple;
 	}
 
-	get val(): string[] | string{
-		const
-			that = this,
+	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 ) } );
+		const options = [...that.#e.querySelectorAll('option')]
+			.filter((o) => o.selected)
+			.forEach((o) => {
+				if (o.selected) ret.push(o.value);
+			});
 
-		if ( this.#multi ) return ret;
+		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 val(value: string[] | string) {
+		const that = this;
 
-		//console.log('set values', value );
+		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;
-				}
-			});
+		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 ){
+	#e: HTMLTextAreaElement;
+	constructor(e: HTMLTextAreaElement) {
 		super(e);
 		this.#e = e;
 	}
 
-	get val(): string{
-		return this.#e.value;
+	get val(): string {
+		return this.#e.value || '';
 	}
 
-	set val( value: string ){
+	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, ')' );
+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;
+			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
+							);
+							DC.add(i, name, handler);
+							break;
+						case 'checkbox':
+							handler = new CheckboxHandler(i as HTMLInputElement);
+							DC.add(i, name, handler);
+							break;
+						default:
+							handler = new InputHandler(i as HTMLInputElement);
+							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;
+							}
+						},
+					});
+
+					break;
+				case 'select':
+					handler = new SelectHandler(i as HTMLSelectElement);
+					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;
+							}
+						},
+					});
+					break;
+				case 'textarea':
+					handler = new TextAreaHandler(i as HTMLTextAreaElement);
+					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;
+							}
+						},
+					});
+					break;
+				default:
+					console.warn(
+						'handler missing:',
+						name,
+						'for',
+						i.tagName.toLowerCase(),
+						i
+					);
+					break;
+			}
+		}
+	});
 
-	//console.log( 'values()', values );
-	let handlers = getInputHandlers( target );
+	return handlers;
+};
 
-	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];
-				}
-		});
-	}
+export class FormValues {
+	constructor(
+		targetObject: LooseObject,
+		propertyName: string,
+		dom: HTMLElement | ShadowRoot
+	) {
+		let that = this,
+			handlers = getInputHandlers(dom);
 
-	if ( Object.keys(values).length > 0 ){
-		updateForm( values );
-	}
+		targetObject[propertyName] = Object.assign({}, handlers);
 
-	//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 );
-		}
+		observe(targetObject, propertyName);
 
-		( mc as any)[observable].observe( () => { } );
+		copyGettersSetters(handlers, targetObject[propertyName]);
 
-		[ ...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 ) ) } );
-			};
+		[...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();
+			});
 		});
 	}
-
-	return observable ? ( mc as any)[observable] : Object.assign( {}, handlers );
 }

package/src/helpers.ts

@@ -138,3 +138,12 @@ export function htmlToElements(html: string): HTMLElement[] {
 
 	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);
+		}
+	}
+}