@twobirds/microcomponents 0.1.16 → 0.1.19

package/dist/elements.ts

@@ -3,108 +3,92 @@
 import { DC, McBase } from './MC.js';
 import { kebabToPascal } from './helpers.js';
 
-class CeBaseClass extends HTMLElement {
-    constructor() {
-        super();
-    }
-
-    connectedCallback() {
-        this.dispatchEvent(new CustomEvent('_mcConnected'));
-    }
-
-    connectedMoveCallback() {
-        this.dispatchEvent(new CustomEvent('_mcConnectedMove'));
-    }
-
-    disconnectedCallback() {
-        this.dispatchEvent(new CustomEvent('_mcDisconnected'));
-    }
-
-    adoptedCallback() {
-        this.dispatchEvent(new CustomEvent('_mcAdopted'));
-    }
-
-    attributeChangedCallback(name: string, oldValue: any, newValue: any) {
-        this.dispatchEvent(
-            new CustomEvent('_mcAttributeChanged', { detail: { name, oldValue, newValue } })
-        );
-    }
-
-    formResetCallback() {
-        this.dispatchEvent(new CustomEvent('_mcFormReset'));
-    }
-}
-
 function createNamedClass(name: string, ClassBody: { new (...args: any[]): any }) {
-    return Object.defineProperty(ClassBody, 'name', { value: name });
-}
-
-function isClass(func: any) {
-    return typeof func === 'function' && /^class\s/.test(Function.prototype.toString.call(func));
+	return Object.defineProperty(ClassBody, 'name', { value: name });
 }
 
 export function defineCE(
-    tagName: string,
-    DefinitionClass: { new (...args: any[]): any } | Function,
-    observedAttributes: string[] = []
+	tagName: string,
+	DefinitionClass: { new (...args: any[]): any } | Function,
+	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);
-
-    // not a class, but a pure function
-    if (!isClass(DefinitionClass.prototype.constructor)) {
-        customElements.define(
-            tagName,
-            // @ts-ignore
-            DefinitionClass
-        );
-        return;
-    }
-
-    // a class, but not a MC
-    if (!(DefinitionClass.prototype instanceof McBase)) {
-        customElements.define(
-            tagName,
-            // @ts-ignore
-            DefinitionClass
-        );
-        return;
-    }
-
-    // a MC
-    customElements.define(
-        tagName,
-        createNamedClass(
-            name,
-            class extends CeBaseClass {
-                instance: any;
-
-                constructor(data?: any) {
-                    super();
-                    // @ts-ignore
-                    const instance = isClass(DefinitionClass)
-                        ? // @ts-ignore
-                          new DefinitionClass(this, data)
-                        : DefinitionClass;
-                    DC.add(this, name, instance);
-                }
-
-                static get observedAttributes() {
-                    return observedAttributes;
-                }
-            }
-        )
-    );
+	//console.warn('defineCE args', arguments);
+
+	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);
+
+	// a class, but not a MC
+	if (!(DefinitionClass.prototype instanceof McBase)) {
+		//console.warn('pure class', tagName, DefinitionClass);
+		customElements.define(
+			tagName,
+			// @ts-ignore
+			DefinitionClass
+		);
+		return;
+	}
+
+	//console.warn('MC class', tagName, DefinitionClass);
+	// a MC
+	customElements.define(
+		tagName,
+		createNamedClass(
+			name,
+			class extends HTMLElement {
+				constructor(data?: any) {
+					super();
+					// console.log('[named class constructor]', tagName, name, this, data);
+					// @ts-ignore
+					DC.add(this, name, new DefinitionClass(this, data));
+				}
+
+				connectedCallback() {
+					//console.warn('onConnected', this);
+					this.dispatchEvent(new CustomEvent('_mcConnected'));
+				}
+
+				connectedMoveCallback() {
+					//console.warn('onConnectedMove', this);
+					this.dispatchEvent(new CustomEvent('_mcConnectedMove'));
+				}
+
+				disconnectedCallback() {
+					//console.warn('onDisconnected', this);
+					this.dispatchEvent(new CustomEvent('_mcDisconnected'));
+				}
+
+				adoptedCallback() {
+					//console.warn('onAdopted', this);
+					this.dispatchEvent(new CustomEvent('_mcAdopted'));
+				}
+
+				attributeChangedCallback(name: string, oldValue: any, newValue: any) {
+					//console.warn('onAttributeChanged', this);
+					this.dispatchEvent(
+						new CustomEvent('_mcAttributeChanged', { detail: { name, oldValue, newValue } })
+					);
+				}
+
+				formResetCallback() {
+					this.dispatchEvent(new CustomEvent('_mcFormReset'));
+				}
+
+				static get observedAttributes() {
+					return observedAttributes;
+				}
+			}
+		)
+	);
 }
 
 export function getCE(tagName: string): CustomElementConstructor | undefined {
-    return customElements.get(tagName);
+	return customElements.get(tagName);
 }

package/dist/formValues.ts

@@ -7,213 +7,207 @@ import { observe } from './observables.js';
 type inputTypes = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 
 const getInputName = (e: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): string => {
-    return e.tagName.toLowerCase();
+	return e.tagName.toLowerCase();
 };
 
 abstract class InputBase {
-    constructor(e: inputTypes) {}
+	constructor(e: inputTypes) {}
 
-    abstract get val(): any;
+	abstract get val(): any;
 
-    abstract set val(value: any);
+	abstract set val(value: any);
 }
 
 class RadioHandler extends InputBase {
-    #e: HTMLInputElement;
-
-    constructor(e: HTMLInputElement) {
-        super(e);
-        this.#e = e;
-    }
-
-    get val(): string {
-        let ret = new FormData(this.#e.form as HTMLFormElement).get(this.#e.name);
-
-        //console.log('radio[', this.#e.name, '] = "' + ret + '"');
-        return ret as string;
-    }
-
-    set val(value: string) {
-        let arr = [
-            ...(this.#e.form as HTMLFormElement).querySelectorAll(
-                `input[type="radio"][name="${this.#e.name}"]`
-            ),
-        ] as HTMLInputElement[];
-
-        (arr.filter((e) => e.getAttribute('value') === value).shift() as HTMLInputElement).checked =
-            true;
-    }
+	#e: HTMLInputElement;
+
+	constructor(e: HTMLInputElement) {
+		super(e);
+		this.#e = e;
+	}
+
+	get val(): string {
+		let ret = new FormData(this.#e.form as HTMLFormElement).get(this.#e.name);
+
+		//console.log('radio[', this.#e.name, '] = "' + ret + '"');
+		return ret as string;
+	}
+
+	set val(value: string) {
+		let arr = [
+			...(this.#e.form as HTMLFormElement).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;
+	#e: HTMLInputElement;
 
-    constructor(e: HTMLInputElement) {
-        super(e);
-        this.#e = e;
-    }
+	constructor(e: HTMLInputElement) {
+		super(e);
+		this.#e = e;
+	}
 
-    get val(): boolean {
-        return this.#e.checked;
-    }
+	get val(): boolean {
+		return this.#e.checked;
+	}
 
-    set val(value: boolean) {
-        this.#e.checked = value;
-    }
+	set val(value: boolean) {
+		this.#e.checked = value;
+	}
 }
 
 class InputHandler extends InputBase {
-    #e: HTMLInputElement;
+	#e: HTMLInputElement;
 
-    constructor(e: HTMLInputElement) {
-        super(e);
-        this.#e = e;
-    }
+	constructor(e: HTMLInputElement) {
+		super(e);
+		this.#e = e;
+	}
 
-    get val(): string {
-        return this.#e.value;
-    }
+	get val(): string {
+		return this.#e.value;
+	}
 
-    set val(value: string) {
-        this.#e.value = 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
-        [...that.#e.querySelectorAll('option')]
-            .filter((o) => o.selected)
-            .forEach((o) => {
-                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
-        [...that.#e.querySelectorAll('option')].forEach((o) => {
-            if (value.indexOf(o.value) > -1) {
-                o.selected = true;
-            } else {
-                o.selected = false;
-            }
-        });
-    }
+	#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
+		[...that.#e.querySelectorAll('option')]
+			.filter((o) => o.selected)
+			.forEach((o) => {
+				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
+		[...that.#e.querySelectorAll('option')].forEach((o) => {
+			if (value.indexOf(o.value) > -1) {
+				o.selected = true;
+			} else {
+				o.selected = false;
+			}
+		});
+	}
 }
 
 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;
-    }
+	#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;
+	}
 }
 
 const getInputHandlers = (e: HTMLElement | ShadowRoot): LooseObject => {
-    let inputList = [...(e || document).querySelectorAll('input,select,textarea')],
-        handlers: LooseObject = {};
-
-    inputList.forEach((input) => {
-        const name: string | null = (input as inputTypes).getAttribute('name');
-        if (name) {
-            let handler: any = false;
-            switch (getInputName(input as inputTypes)) {
-                case 'input':
-                    switch ((input as HTMLInputElement).type) {
-                        case 'radio':
-                            handler = new RadioHandler(input as HTMLInputElement);
-                            break;
-                        case 'checkbox':
-                            handler = new CheckboxHandler(input as HTMLInputElement);
-                            break;
-                        default:
-                            handler = new InputHandler(input as HTMLInputElement);
-                    }
-                    break;
-                case 'select':
-                    handler = new SelectHandler(input as HTMLSelectElement);
-                    break;
-                case 'textarea':
-                    handler = new TextAreaHandler(input as HTMLTextAreaElement);
-                    break;
-                default:
-                    console.warn(
-                        'handler missing:',
-                        name,
-                        'for',
-                        input.tagName.toLowerCase(),
-                        input
-                    );
-                    break;
-            }
-
-            if (handler) {
-                DC.add(input as HTMLElement, 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;
+	let inputList = [...(e || document).querySelectorAll('input,select,textarea')],
+		handlers: LooseObject = {};
+
+	inputList.forEach((input) => {
+		const name: string | null = (input as inputTypes).getAttribute('name');
+		if (name) {
+			let handler: any = false;
+			switch (getInputName(input as inputTypes)) {
+				case 'input':
+					switch ((input as HTMLInputElement).type) {
+						case 'radio':
+							handler = new RadioHandler(input as HTMLInputElement);
+							break;
+						case 'checkbox':
+							handler = new CheckboxHandler(input as HTMLInputElement);
+							break;
+						default:
+							handler = new InputHandler(input as HTMLInputElement);
+					}
+					break;
+				case 'select':
+					handler = new SelectHandler(input as HTMLSelectElement);
+					break;
+				case 'textarea':
+					handler = new TextAreaHandler(input as HTMLTextAreaElement);
+					break;
+				default:
+					console.warn('handler missing:', name, 'for', input.tagName.toLowerCase(), input);
+					break;
+			}
+
+			if (handler) {
+				DC.add(input as HTMLElement, 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 function formValues(
-    targetObject: LooseObject,
-    propertyName: string,
-    dom: HTMLElement | ShadowRoot
+	targetObject: LooseObject,
+	propertyName: string,
+	dom: HTMLElement | ShadowRoot
 ) {
-    let handlers = getInputHandlers(dom);
+	let handlers = getInputHandlers(dom);
 
-    targetObject[propertyName] = Object.assign({}, handlers);
+	targetObject[propertyName] = Object.assign({}, handlers);
 
-    observe(targetObject, propertyName);
+	observe(targetObject, propertyName);
 
-    copyGettersSetters(handlers, targetObject[propertyName]);
+	copyGettersSetters(handlers, targetObject[propertyName]);
 
-    Object.seal(targetObject[propertyName]); // object structure may not be changed from now on
+	//Object.seal(targetObject[propertyName]); // object structure may not be changed from now on
 
-    [...dom.querySelectorAll('input, textarea, select')].forEach((input) => {
-        input.addEventListener('input', (ev) => {
-            //console.log('input event', input, ev);
-            targetObject[propertyName].notify();
-        });
-    });
+	[...dom.querySelectorAll('input, textarea, select')].forEach((input) => {
+		input.addEventListener('input', (ev) => {
+			//console.log('input event', input, ev);
+			targetObject[propertyName].notify();
+		});
+	});
 }