@twobirds/microcomponents 0.1.0 → 0.1.2

package/src/elements.ts

@@ -1,119 +0,0 @@
-'use strict';
-
-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));
-}
-
-export function defineCE(
-	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 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;
-				}
-			}
-		)
-	);
-}
-
-export function getCE(tagName: string): CustomElementConstructor | undefined {
-	return customElements.get(tagName);
-}

package/src/formValues.ts

@@ -1,225 +0,0 @@
-'use strict';
-
-import { LooseObject, copyGettersSetters } from './helpers.js';
-import { DC, on } 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;
-
-	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;
-
-	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
-		[...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;
-	}
-}
-
-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;
-};
-
-export function formValues(
-	targetObject: LooseObject,
-	propertyName: string,
-	dom: HTMLElement | ShadowRoot
-) {
-	let handlers = getInputHandlers(dom);
-
-	targetObject[propertyName] = Object.assign({}, handlers);
-
-	observe(targetObject, propertyName);
-
-	copyGettersSetters(handlers, targetObject[propertyName]);
-
-	[...dom.querySelectorAll('input, textarea, select')].forEach((input) => {
-		input.addEventListener('input', (ev) => {
-			//console.log('input event', input, ev);
-			targetObject[propertyName].notify();
-		});
-	});
-}
-

package/src/helpers.ts

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