@twobirds/microcomponents 0.0.82 → 0.0.84

package/src/elements.ts

@@ -1,6 +1,6 @@
 'use strict';
 
-import { DC } from './MC.js';
+import { DC, McBase } from './MC.js';
 import { kebabToPascal } from './helpers.js';
 
 class CeBaseClass extends HTMLElement {
@@ -9,19 +9,32 @@ class CeBaseClass extends HTMLElement {
 	}
 
 	connectedCallback() {
-		(DC as any).trigger(this, 'Connected');
+		this.dispatchEvent( new CustomEvent('_mcConnected') );
+	}
+
+	connectedMoveCallback() {
+		this.dispatchEvent( new CustomEvent('_mcConnectedMove') );
 	}
 
 	disconnectedCallback() {
-		(DC as any).trigger(this, 'Disconnected');
+		this.dispatchEvent( new CustomEvent('_mcDisconnected') );
 	}
 
 	adoptedCallback() {
-		(DC as any).trigger(this, 'Adopted');
+		this.dispatchEvent( new CustomEvent('_mcAdopted') );
 	}
 
 	attributeChangedCallback(name: string, oldValue: any, newValue: any) {
-		(DC as any).trigger(this, 'AttributeChanged', { name, oldValue, newValue });
+		this.dispatchEvent( 
+			new CustomEvent(
+				'_mcAttributeChanged', 
+				{ detail: { name, oldValue, newValue } } 
+			) 
+		);
+	}
+
+	formResetCallback(){
+		this.dispatchEvent( new CustomEvent('_mcFormReset') );
 	}
 }
 
@@ -32,9 +45,14 @@ function createNamedClass(
 	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 },
+	DefinitionClass: { new (...args: any[]): any } | Function,
 	observedAttributes: string[] = []
 ) {
 	if (customElements.get(tagName)) {
@@ -50,6 +68,27 @@ export function defineCE(
 
 	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(
@@ -59,7 +98,11 @@ export function defineCE(
 
 				constructor(data?: any) {
 					super();
-					let instance = new DefinitionClass(this, data);
+					// @ts-ignore
+					const instance = isClass( DefinitionClass ) 
+						// @ts-ignore
+						? new DefinitionClass(this, data)
+						: DefinitionClass;
 					DC.add(this, name, instance);
 				}
 

package/src/formValues.ts

@@ -1,7 +1,7 @@
 'use strict';
 
 import { LooseObject, copyGettersSetters } from './helpers.js';
-import { DC, addListener } from './MC.js';
+import { DC, on } from './MC.js';
 import { observe } from './observables.js';
 
 type inputTypes = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
@@ -216,8 +216,8 @@ export function formValues(
 	copyGettersSetters(handlers, targetObject[propertyName]);
 
 	[...dom.querySelectorAll('input, textarea, select')].forEach((input) => {
-		addListener(input as inputTypes, 'input', (ev: Event) => {
-			//console.log('keyup', ev);
+		input.addEventListener('input', (ev) => {
+			//console.log('input event', input, ev);
 			targetObject[propertyName].notify();
 		});
 	});

package/src/microcomponents.ts

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

package/src/observables.ts

@@ -8,7 +8,7 @@ import {
 	copyGettersSetters,
 } from './helpers.js';
 
-import { DC, HTMLMcElement, McEvent } from './MC.js';
+import { DC, HTMLMcElement, trigger } from './MC.js';
 
 function isObservableObject(value: any): boolean {
 	return value != null && typeof value === 'object';
@@ -21,12 +21,11 @@ function getPlaceholders(target: HTMLElement): string[] {
 		regEx = /\{[^\{\}]*\}/g;
 
 	// scan attributes
-	target
-		.getAttributeNames()
+	( !!target.getAttributeNames ? target.getAttributeNames() : [] )
 		.filter((attr) => target.getAttribute(attr)?.match(regEx)) // extract placeholder(s)
 		.forEach((attr) => {
-			let phs: Set<string> = new Set(target.getAttribute(attr)?.match(regEx));
-			phs.forEach((placeholder) =>
+			let placeholders: Set<string> = new Set(target.getAttribute(attr)?.match(regEx));
+			placeholders.forEach((placeholder) =>
 				placeholders.add(placeholder.replace(/[\{\}]/g, ''))
 			);
 		});
@@ -62,35 +61,31 @@ class Placeholders extends DC {
 
 	constructor(target: HTMLElement) {
 		super(target);
-		let that = this;
-		getPlaceholders(target).forEach((property) => (that.data[property] = ''));
-		observe(that);
-		that.#attachCallbacks();
-		delete that._mc; // cleanup, not needed
+		getPlaceholders(target).forEach((property) => (this.data[property] = ''));
+		observe(this);
+		this.#attachCallbacks();
 	}
 
 	#attachCallbacks() {
-		let that = this,
-			target = that.target,
+		let target = this.target,
 			hide: boolean = false;
 
-		//console.log('attachCallbacks', that.target);
+		//console.log('attachCallbacks', this.target);
 
 		// scan attributes
-		target
-			.getAttributeNames()
+		( !!target.getAttributeNames ? target.getAttributeNames() : [] )
 			.filter((attr: string) =>
 				target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g)
 			) // extract placeholder(s)
 			.forEach((attr: string) => {
-				let phs: Set<string> = new Set(
+				let placeholders: Set<string> = new Set(
 					target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g)
 				);
 				// attach callback
-				that.data.observe(
+				this.data.observe(
 					((template: string) => (data: LooseObject) => {
 						let result: string = template;
-						phs.forEach((placeholder) => {
+						placeholders.forEach((placeholder) => {
 							result = result.replace(
 								placeholder,
 								data[placeholder.replace(/[\{\}]/g, '')]
@@ -108,44 +103,41 @@ class Placeholders extends DC {
 				return (
 					// is text node and has placeholders
 					childNode.nodeType === 3 &&
-					((childNode as any).nodeValue || '').match(/\{[^\{\}]*\}/g)
+					((childNode as Node).nodeValue || '').match(/\{[^\{\}]*\}/g)
 				);
 			})
 			.forEach((childNode) => {
 				hide = true;
-				let phs: Set<string> = new Set(
+				let placeholders: Set<string> = new Set(
 					childNode.nodeValue.match(/\{[^\{\}]*\}/g)
 				);
 
 				// attach callback
-				that.data.observe(
+				this.data.observe(
 					((template: string) => (data: LooseObject) => {
 						let result: string = template;
-						//console.log('text node "', template, '" callbach data:', data);
-						phs.forEach((placeholder) => {
+						//console.log('text node "', template, '" callback data:', data);
+						placeholders.forEach((placeholder) => {
 							result = result.replace(
 								placeholder,
 								data[placeholder.replace(/[\{\}]/g, '')]
 							);
 						});
-						if (
-							Object.keys(data).some((key) => {
-								return !!data[key];
-							})
-						) {
-							if (!!that.oldDisplay) {
-								target.style = that.oldDisplay;
-							} else {
-								target.removeAttribute('style');
-							}
-							delete that.oldDisplay;
+
+						if (!!this.oldDisplay) {
+							target.style = this.oldDisplay;
+						} else {
+							target.removeAttribute('style');
 						}
+						delete this.oldDisplay;
+
 						childNode.nodeValue = result;
 					})(childNode.nodeValue)
 				);
 
 				// hide for now
-				that.oldDisplay = target.getAttribute('style)') || '';
+				this.oldDisplay = target.getAttribute('style') || ''; // TBD allow null to indicate there was no old style attribute
+
 				if (
 					hide &&
 					!inputs.includes((target as any).constructor) &&
@@ -156,27 +148,25 @@ class Placeholders extends DC {
 			});
 	}
 
-	onData(ev: McEvent) {
-		let that = this,
-			data: LooseObject = {};
-		Object.keys(ev.data).forEach((key) => {
-			if (that.data.hasOwnProperty(key)) data[key] = ev.data[key];
+	onData(ev: CustomEvent) {
+		let data: LooseObject = {};
+		Object.keys(ev.detail.data).forEach((key) => {
+			if (this.data.hasOwnProperty(key)) data[key] = ev.detail.data[key];
 		});
-		//console.log('onData()', ev, data, that.data);
-		if (JSON.stringify(data) !== JSON.stringify(that.data))
-			Object.assign(that.data, data); // will trigger callbacks
+		//console.log( 'Placeholder onData', ev, data );
+		if (JSON.stringify(data) !== JSON.stringify(this.data))
+			Object.assign(this.data, data); // will trigger callbacks
 	}
 }
 
 function getPlaceholderElements(
 	target: HTMLElement | DocumentFragment | ShadowRoot
 ): HTMLElement[] {
-	let elements: Array<HTMLElement> = (
-		target instanceof HTMLElement ? [target] : []
-	)
+	let elements: Array<Node> = [target]
 		.concat([...(target.querySelectorAll('*') as unknown as HTMLElement[])])
 		.filter((e) => !!getPlaceholders(e as HTMLElement).length)
-		.filter((e) => e.tagName !== 'STYLE');
+		.filter((e) => (e as HTMLElement)?.tagName !== 'STYLE')
+		.reverse(); // to start with inner elements
 	//console.log('getPlaceholderElements', elements);
 	return elements as HTMLElement[];
 }
@@ -232,40 +222,46 @@ function makeObservable(val: any): Class<typeof val>{
 			this.#callbacks = callbacks
 		}
 
-		observe(f: Function) {
+		observe( callback: Function ) {
 			//console.log('observe');
-			this.#callbacks.push(f);
+			this.#callbacks.push( callback );
 			return this;
 		}
 
 		bind(target: HTMLElement | DocumentFragment | ShadowRoot) {
-			const that = this,
-				iso = isObservableObject(that.valueOf());
+			const iso = isObservableObject(this.valueOf());
 			//console.log('bind', iso, target);
 
 			if (iso) {
 				makePlaceholders(target);
-				const placeholders: unknown = [
-					...target.querySelectorAll('[_mc]'),
-				].filter((e) => !!(e as LooseObject)?._mc?._placeholders);
+				const placeholders: unknown = 
+					[
+						target, 
+						...target.querySelectorAll('[data-mc]'), 
+					]
+					.filter(
+						(e) => !!(e as LooseObject)?._mc?._placeholders
+					);
+
 				//console.log('placeholders:', target, placeholders);
+				
 				const func = function callback(data: LooseObject) {
 					// avoid bubbling for speed
-					let d = flattenObject(data);
-					//console.log('inside callback', target, d);
-					(placeholders as DC[]).forEach((e) => {
+					let flattenedData = flattenObject(data);
+					//console.log('inside placeholder callback', target, flattenedData);
+					(placeholders as Node[]).forEach((node) => {
 						// console.log('trigger callback', e);
-						if (!e) return;
-						(e as any)._mc.trigger('data', d);
+						if (!node) return;
+						trigger(node as HTMLMcElement, 'data', flattenedData);
 					});
 				};
-				(that as any).#callbacks.push(func);
-				that.notify();
+				(this as any).#callbacks.push(func);
+				this.notify();
 			} else {
 				console.warn(
 					'IGNORED - cannot bind a non-Object to the dom, IS:',
-					typeof that.valueOf(),
-					that
+					typeof this.valueOf(),
+					this
 				);
 			}
 
@@ -273,20 +269,19 @@ function makeObservable(val: any): Class<typeof val>{
 		}
 
 		notify(notify?: boolean) {
-			let that = this,
-				data =
-					isObservableObject(that.valueOf()) &&
-					that.valueOf() instanceof Array === false
-						? structuredClone(Object.assign({}, that))
-						: that.valueOf();
+			let data =
+					isObservableObject(this.valueOf()) &&
+					this.valueOf() instanceof Array === false
+						? structuredClone(Object.assign({}, this))
+						: this.valueOf();
 
 			if (notify !== undefined) {
-				that.#notify = notify;
+				this.#notify = notify;
 				// return;
 			}
 
-			//if (that.#notify) console.log('notify', this, data);
-			(that as any).#callbacks.forEach((f: Function) => {
+			//if (this.#notify) console.log('notify', this, data);
+			(this as any).#callbacks.forEach((f: Function) => {
 				// console.log(
 				// 	(this.constructor as any).callbacks,
 				// 	'notify: exec callback',
@@ -296,7 +291,7 @@ function makeObservable(val: any): Class<typeof val>{
 				f(data);
 			});
 
-			return that;
+			return this;
 		}
 	};