@twobirds/microcomponents 0.1.6 → 0.1.10

package/dist/observables.ts

@@ -1,191 +1,173 @@
 'use strict';
 
-import {
-	LooseObject,
-	debounce,
-	deepEqual,
-	flattenObject,
-	copyGettersSetters,
-} from './helpers.js';
+import { LooseObject, debounce, deepEqual, flattenObject, copyGettersSetters } from './helpers.js';
 
 import { DC, HTMLMcElement, trigger } from './MC.js';
 
 function isObservableObject(value: any): boolean {
-	return value != null && typeof value === 'object';
+    return value != null && typeof value === 'object';
 }
 
 type Callback = (value: any) => void;
 
 function getPlaceholders(target: HTMLElement): string[] {
-	let placeholders: Set<string> = new Set(),
-		regEx = /\{[^\{\}]*\}/g;
-
-	// scan attributes
-	( !!target.getAttributeNames ? target.getAttributeNames() : [] )
-		.filter((attr) => target.getAttribute(attr)?.match(regEx)) // extract placeholder(s)
-		.forEach((attr) => {
-			let placeholders: Set<string> = new Set(target.getAttribute(attr)?.match(regEx));
-			placeholders.forEach((placeholder) =>
-				placeholders.add(placeholder.replace(/[\{\}]/g, ''))
-			);
-		});
-
-	// scan children text nodes
-	[...target.childNodes]
-		.filter((childNode) => {
-			return (
-				// is text node and has placeholders
-				childNode.nodeType === 3 &&
-				((childNode as any).nodeValue || '').match(regEx)
-			);
-		})
-		.forEach((childNode) => {
-			((childNode as any).nodeValue || '')
-				.match(regEx)
-				.forEach((placeholder: string) => {
-					placeholders.add(placeholder.replace(/[\{\}]/g, ''));
-				});
-		});
-	
-	// extract {} and return result
-	return [...placeholders].map((placeholder) =>
-		placeholder.replace(/[\{\}]/g, '')
-	);
+    let placeholders: Set<string> = new Set(),
+        regEx = /\{[^\{\}]*\}/g;
+
+    // scan attributes
+    (target.getAttributeNames ? target.getAttributeNames() : [])
+        .filter((attr) => target.getAttribute(attr)?.match(regEx)) // extract placeholder(s)
+        .forEach((attr) => {
+            let placeholders: Set<string> = new Set(target.getAttribute(attr)?.match(regEx));
+            placeholders.forEach((placeholder) =>
+                placeholders.add(placeholder.replace(/[\{\}]/g, ''))
+            );
+        });
+
+    // scan children text nodes
+    [...target.childNodes]
+        .filter((childNode) => {
+            return (
+                // is text node and has placeholders
+                childNode.nodeType === 3 && ((childNode as any).nodeValue || '').match(regEx)
+            );
+        })
+        .forEach((childNode) => {
+            ((childNode as any).nodeValue || '').match(regEx).forEach((placeholder: string) => {
+                placeholders.add(placeholder.replace(/[\{\}]/g, ''));
+            });
+        });
+
+    // extract {} and return result
+    return [...placeholders].map((placeholder) => placeholder.replace(/[\{\}]/g, ''));
 }
 
 const inputs = [HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement];
 
 class Placeholders extends DC {
-	data: LooseObject = {};
-	oldDisplay?: string = '';
-
-	constructor(target: HTMLElement) {
-		super(target);
-		getPlaceholders(target).forEach((property) => (this.data[property] = ''));
-		observe(this);
-		this.#attachCallbacks();
-	}
-
-	#attachCallbacks() {
-		let target = this.target,
-			hide: boolean = false;
-
-		//console.log('attachCallbacks', this.target);
-
-		// scan attributes
-		( !!target.getAttributeNames ? target.getAttributeNames() : [] )
-			.filter((attr: string) =>
-				target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g)
-			) // extract placeholder(s)
-			.forEach((attr: string) => {
-				let placeholders: Set<string> = new Set(
-					target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g)
-				);
-				// attach callback
-				this.data.observe(
-					((template: string) => (data: LooseObject) => {
-						let result: string = template;
-						placeholders.forEach((placeholder) => {
-							result = result.replace(
-								placeholder,
-								data[placeholder.replace(/[\{\}]/g, '')]
-							);
-						});
-						target.setAttribute(attr, result);
-						//console.log('cb setAttribute()', data, template, attr, result);
-					})(target.getAttribute(attr))
-				);
-			});
-
-		// scan children text nodes
-		[...target.childNodes]
-			.filter((childNode) => {
-				return (
-					// is text node and has placeholders
-					childNode.nodeType === 3 &&
-					((childNode as Node).nodeValue || '').match(/\{[^\{\}]*\}/g)
-				);
-			})
-			.forEach((childNode) => {
-				hide = true;
-				let placeholders: Set<string> = new Set(
-					childNode.nodeValue.match(/\{[^\{\}]*\}/g)
-				);
-
-				// attach callback
-				this.data.observe(
-					((template: string) => (data: LooseObject) => {
-						let result: string = template;
-						//console.log('text node "', template, '" callback data:', data);
-						placeholders.forEach((placeholder) => {
-							result = result.replace(
-								placeholder,
-								data[placeholder.replace(/[\{\}]/g, '')]
-							);
-						});
-
-						if (!!this.oldDisplay) {
-							target.style = this.oldDisplay;
-						} else {
-							target.removeAttribute('style');
-						}
-						delete this.oldDisplay;
-
-						childNode.nodeValue = result;
-					})(childNode.nodeValue)
-				);
-
-				// hide for now
-				this.oldDisplay = target.getAttribute('style') || ''; // TBD allow null to indicate there was no old style attribute
-
-				if (
-					hide &&
-					!inputs.includes((target as any).constructor) &&
-					target.tagName !== 'FIELDSET'
-				) {
-					target.style.display = 'none';
-				}
-			});
-	}
-
-	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( 'Placeholder onData', ev, data );
-		if (JSON.stringify(data) !== JSON.stringify(this.data))
-			Object.assign(this.data, data); // will trigger callbacks
-	}
+    data: LooseObject = {};
+    oldDisplay?: string = '';
+
+    constructor(target: HTMLElement) {
+        super(target);
+        getPlaceholders(target).forEach((property) => (this.data[property] = ''));
+        observe(this);
+        this.#attachCallbacks();
+    }
+
+    #attachCallbacks() {
+        let target = this.target,
+            hide: boolean = false;
+
+        //console.log('attachCallbacks', this.target);
+
+        // scan attributes
+        (target.getAttributeNames ? target.getAttributeNames() : [])
+            .filter((attr: string) => target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g)) // extract placeholder(s)
+            .forEach((attr: string) => {
+                let placeholders: Set<string> = new Set(
+                    target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g)
+                );
+                // attach callback
+                this.data.observe(
+                    ((template: string) => (data: LooseObject) => {
+                        let result: string = template;
+                        placeholders.forEach((placeholder) => {
+                            result = result.replace(
+                                placeholder,
+                                data[placeholder.replace(/[\{\}]/g, '')]
+                            );
+                        });
+                        target.setAttribute(attr, result);
+                        //console.log('cb setAttribute()', data, template, attr, result);
+                    })(target.getAttribute(attr))
+                );
+            });
+
+        // scan children text nodes
+        [...target.childNodes]
+            .filter((childNode) => {
+                return (
+                    // is text node and has placeholders
+                    childNode.nodeType === 3 &&
+                    ((childNode as Node).nodeValue || '').match(/\{[^\{\}]*\}/g)
+                );
+            })
+            .forEach((childNode) => {
+                hide = true;
+                let placeholders: Set<string> = new Set(childNode.nodeValue.match(/\{[^\{\}]*\}/g));
+
+                // attach callback
+                this.data.observe(
+                    ((template: string) => (data: LooseObject) => {
+                        let result: string = template;
+                        //console.log('text node "', template, '" callback data:', data);
+                        placeholders.forEach((placeholder) => {
+                            result = result.replace(
+                                placeholder,
+                                data[placeholder.replace(/[\{\}]/g, '')]
+                            );
+                        });
+
+                        if (this.oldDisplay) {
+                            target.style = this.oldDisplay;
+                        } else {
+                            target.removeAttribute('style');
+                        }
+                        delete this.oldDisplay;
+
+                        childNode.nodeValue = result;
+                    })(childNode.nodeValue)
+                );
+
+                // hide for now
+                this.oldDisplay = target.getAttribute('style') || ''; // TBD allow null to indicate there was no old style attribute
+
+                if (
+                    hide &&
+                    !inputs.includes((target as any).constructor) &&
+                    target.tagName !== 'FIELDSET'
+                ) {
+                    target.style.display = 'none';
+                }
+            });
+    }
+
+    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( '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
+    target: HTMLElement | DocumentFragment | ShadowRoot
 ): HTMLElement[] {
-	let elements: Array<Node> = [target]
-		.concat([...(target.querySelectorAll('*') as unknown as HTMLElement[])])
-		.filter((e) => !!getPlaceholders(e as HTMLElement).length)
-		.filter((e) => (e as HTMLElement)?.tagName !== 'STYLE')
-		.reverse(); // to start with inner elements
-	//console.log('getPlaceholderElements', elements);
-	return elements as HTMLElement[];
+    let elements: Array<Node> = [target]
+        .concat([...(target.querySelectorAll('*') as unknown as HTMLElement[])])
+        .filter((e) => !!getPlaceholders(e as HTMLElement).length)
+        .filter((e) => (e as HTMLElement)?.tagName !== 'STYLE')
+        .reverse(); // to start with inner elements
+    //console.log('getPlaceholderElements', elements);
+    return elements as HTMLElement[];
 }
 
-function makePlaceholders(
-	element: HTMLElement | DocumentFragment | ShadowRoot
-): void {
-	//console.log('makePlaceholders', element);
-	getPlaceholderElements(element).forEach((e: HTMLElement) => {
-		if ((e as HTMLMcElement)?._mc?._placeholders) return;
-		DC.add(e, '_placeholders', new Placeholders(e));
-	});
+function makePlaceholders(element: HTMLElement | DocumentFragment | ShadowRoot): void {
+    //console.log('makePlaceholders', element);
+    getPlaceholderElements(element).forEach((e: HTMLElement) => {
+        if ((e as HTMLMcElement)?._mc?._placeholders) return;
+        DC.add(e, '_placeholders', new Placeholders(e));
+    });
 }
 
 export type Observable = {
-	observe: (cb: Callback) => void;
-	notify: () => void;
-	bind: (target: HTMLElement | DocumentFragment | ShadowRoot ) => void;
-	callbacks: Array<Function>;
+    observe: (cb: Callback) => void;
+    notify: () => void;
+    bind: (target: HTMLElement | DocumentFragment | ShadowRoot) => void;
+    callbacks: Array<Function>;
 };
 
 type Class<T> = new (...args: any[]) => T;
@@ -194,223 +176,207 @@ type Class<T> = new (...args: any[]) => T;
 const classRepo: LooseObject = {};
 
 // creates a new observable class wrapper
-function makeObservable(val: any): Class<typeof val>{
-
-	const Constructor = val.constructor,
-		ConstructorName: string = Constructor.name;
-
-	let ObservableClass = class extends Constructor {
-		#notify: boolean = true;
-		#callbacks: Array<Function> = [];
-
-		constructor(val: any) {
-			super(val);
-			(this.constructor as LooseObject).callbacks = [];
-			if (isObservableObject(val)) {
-				// you cannot bind native values to the dom
-				Object.getOwnPropertyNames(val).forEach((key) => {
-					this[key] = val[key];
-				});
-			}
-		}
-
-		get callbacks(): Array<Function> {
-			return this.#callbacks
-		}
-
-		set callbacks( callbacks: Array<Function> ){
-			this.#callbacks = callbacks
-		}
-
-		observe( callback: Function ) {
-			//console.log('observe');
-			this.#callbacks.push( callback );
-			return this;
-		}
-
-		bind(target: HTMLElement | DocumentFragment | ShadowRoot) {
-			const iso = isObservableObject(this.valueOf());
-			//console.log('bind', iso, target);
-
-			if (iso) {
-				makePlaceholders(target);
-				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 flattenedData = flattenObject(data);
-					//console.log('inside placeholder callback', target, flattenedData);
-					(placeholders as Node[]).forEach((node) => {
-						// console.log('trigger callback', e);
-						if (!node) return;
-						trigger(node as HTMLMcElement, 'data', flattenedData);
-					});
-				};
-				(this as any).#callbacks.push(func);
-				this.notify();
-			} else {
-				console.warn(
-					'IGNORED - cannot bind a non-Object to the dom, IS:',
-					typeof this.valueOf(),
-					this
-				);
-			}
-
-			return this;
-		}
-
-		notify(notify?: boolean) {
-			let data =
-					isObservableObject(this.valueOf()) &&
-					this.valueOf() instanceof Array === false
-						? structuredClone(Object.assign({}, this))
-						: this.valueOf();
-
-			if (notify !== undefined) {
-				this.#notify = notify;
-				// return;
-			}
-
-			//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',
-				// 	f,
-				// 	data
-				// );
-				f(data);
-			});
-
-			return this;
-		}
-	};
-
-	(classRepo as any)[ConstructorName] = ObservableClass;
-
-	// console.log( 'classRepo:', classRepo );
-
-	return ObservableClass;
+function makeObservable(val: any): Class<typeof val> {
+    const Constructor = val.constructor,
+        ConstructorName: string = Constructor.name;
+
+    let ObservableClass = class extends Constructor {
+        #notify: boolean = true;
+        #callbacks: Array<Function> = [];
+
+        constructor(val: any) {
+            super(val);
+            (this.constructor as LooseObject).callbacks = [];
+            if (isObservableObject(val)) {
+                // you cannot bind native values to the dom
+                Object.getOwnPropertyNames(val).forEach((key) => {
+                    this[key] = val[key];
+                });
+            }
+        }
+
+        get callbacks(): Array<Function> {
+            return this.#callbacks;
+        }
+
+        set callbacks(callbacks: Array<Function>) {
+            this.#callbacks = callbacks;
+        }
+
+        observe(callback: Function) {
+            //console.log('observe');
+            this.#callbacks.push(callback);
+            return this;
+        }
+
+        bind(target: HTMLElement | DocumentFragment | ShadowRoot) {
+            const iso = isObservableObject(this.valueOf());
+            //console.log('bind', iso, target);
+
+            if (iso) {
+                makePlaceholders(target);
+                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 flattenedData = flattenObject(data);
+                    //console.log('inside placeholder callback', target, flattenedData);
+                    (placeholders as Node[]).forEach((node) => {
+                        // console.log('trigger callback', e);
+                        if (!node) return;
+                        trigger(node as HTMLMcElement, 'data', flattenedData);
+                    });
+                };
+                (this as any).#callbacks.push(func);
+                this.notify();
+            } else {
+                console.warn(
+                    'IGNORED - cannot bind a non-Object to the dom, IS:',
+                    typeof this.valueOf(),
+                    this
+                );
+            }
+
+            return this;
+        }
+
+        notify(notify?: boolean) {
+            let data =
+                isObservableObject(this.valueOf()) && this.valueOf() instanceof Array === false
+                    ? structuredClone(Object.assign({}, this))
+                    : this.valueOf();
+
+            if (notify !== undefined) {
+                this.#notify = notify;
+                // return;
+            }
+
+            if (this.#notify) {
+                (this as any).#callbacks.forEach((f: Function) => {
+                    f(data);
+                });
+            }
+
+            return this;
+        }
+    };
+
+    (classRepo as any)[ConstructorName] = ObservableClass;
+
+    // console.log( 'classRepo:', classRepo );
+
+    return ObservableClass;
 }
 
-function getConstructor( val: any ): Class<typeof val> { 
-	let key: string = val.constructor.name;
-	return classRepo[key] || makeObservable( val );
+function getConstructor(val: any): Class<typeof val> {
+    let key: string = val.constructor.name;
+    return classRepo[key] || makeObservable(val);
 }
 
-export const observe = (
-	target: LooseObject,
-	propertyName?: string
-): LooseObject => {
-	let keys = !propertyName
-		? [...Object.getOwnPropertyNames(target)]
-		: [propertyName];
-
-	keys.forEach((key) => {
-		if ( 
-			target.hasOwnProperty(key) 
-			&&  typeof target[key] !== 'function' 
-			&& !target?.[key]?.constructor?.prototype?.observe 
-		) {
-
-			// console.log( 'co propname', key, typeof target[key], target[key] );
-			if (key[0] === '_' || target?.[key] === undefined) return target;
-			let val: any = target[key];
-
-			let o = new ( getConstructor(val) as Class<typeof val> )( val );
-
-			Object.defineProperty(target, key, {
-				enumerable: true,
-				get() {
-					if (isObservableObject(o.valueOf())) {
-						let check = structuredClone(Object.assign({}, o));
-						setTimeout(
-							debounce(function checkChanges() {
-								let state = structuredClone(Object.assign({}, o));
-								//console.log( 'check changes', state, check );
-								if (!deepEqual(state, check)) {
-									//console.log( '-> not equal!' );
-									o.notify();
-								}
-							}, 0),
-							0
-						);
-					}
-					return o;
-				},
-				set(val: any) {
-					//console.log( 'SET:', isObservableObject( val.valueOf() ), 'set:', val, 'to', isObservableObject( o.valueOf() ), o, );
-					if (typeof val === typeof o.valueOf()) {
-						let iso =
-							isObservableObject(o.valueOf()) &&
-							o.valueOf() instanceof Array === false;
-						//console.log('target iso:', iso);
-						if (iso) {
-							let old = structuredClone(Object.assign({}, o));
-							//val = structuredClone(Object.assign({}, val));
-
-							//let callbacks = (o.constructor as LooseObject).callbacks;
-							if (o?.constructor?.prototype?.observe === undefined ) {
-								o = new ( getConstructor(val) as Class<typeof val> )( structuredClone(Object.assign({}, val)) );
-								copyGettersSetters(val, o);
-								o.seal();
-							}
-							Object.assign(o, val);
-
-							// console.log('after set o=', o, 'check', old);
-							// (o.constructor as LooseObject).callbacks = callbacks;
-
-							setTimeout(
-								// check for changes
-								debounce(function checkChanges() {
-									let state = structuredClone(Object.assign({}, o));
-									//console.log( 'check changes', state, check );
-									if (!deepEqual(state, old)) {
-										//console.log( '-> not equal!' );
-										o.notify();
-									}
-								}, 0),
-								0
-							);
-						} else {
-							// simple native var
-							let old = o.valueOf(),
-								callbacks = (o as Observable).callbacks;
-
-							// console.log( 'sO', o, o.valueOf(), 'val', val );
-							if (val !== old) {
-								// console.log( '-> sO new val', val );
-								o = new ( getConstructor(val) as Class<typeof val> )( val );
-								(o as Observable).callbacks = callbacks;
-								o.notify();
-							}
-						}
-					} else {
-						console.warn(
-							'IGNORED - cannot change observable types, IS:',
-							typeof o.valueOf(),
-							o,
-							'- CANNOT BECOME:',
-							typeof val
-						);
-					}
-				},
-			});
-
-			// replace old property with proxy (observable)
-			target[key] = val;
-		};
-
-	});
-
-	return target;
+export const observe = (target: LooseObject, propertyName?: string): LooseObject => {
+    let keys = !propertyName ? [...Object.getOwnPropertyNames(target)] : [propertyName];
+
+    keys.forEach((key) => {
+        if (
+            target.hasOwnProperty(key) &&
+            typeof target[key] !== 'function' &&
+            !target?.[key]?.constructor?.prototype?.observe
+        ) {
+            // console.log( 'co propname', key, typeof target[key], target[key] );
+            if (key[0] === '_' || target?.[key] === undefined) return target;
+            let val: any = target[key];
+
+            let o = new (getConstructor(val) as Class<typeof val>)(val);
+
+            Object.defineProperty(target, key, {
+                enumerable: true,
+                get() {
+                    if (isObservableObject(o.valueOf())) {
+                        let check = structuredClone(Object.assign({}, o));
+                        setTimeout(
+                            debounce(function checkChanges() {
+                                let state = structuredClone(Object.assign({}, o));
+                                //console.log( 'check changes', state, check );
+                                if (!deepEqual(state, check)) {
+                                    //console.log( '-> not equal!' );
+                                    o.notify();
+                                }
+                            }, 0),
+                            0
+                        );
+                    }
+                    return o;
+                },
+                set(val: any) {
+                    //console.log( 'SET:', isObservableObject( val.valueOf() ), 'set:', val, 'to', isObservableObject( o.valueOf() ), o, );
+                    if (typeof val === typeof o.valueOf()) {
+                        let iso =
+                            isObservableObject(o.valueOf()) &&
+                            o.valueOf() instanceof Array === false;
+                        //console.log('target iso:', iso);
+                        if (iso) {
+                            let old = structuredClone(Object.assign({}, o));
+                            //val = structuredClone(Object.assign({}, val));
+
+                            //let callbacks = (o.constructor as LooseObject).callbacks;
+                            if (o?.constructor?.prototype?.observe === undefined) {
+                                o = new (getConstructor(val) as Class<typeof val>)(
+                                    structuredClone(Object.assign({}, val))
+                                );
+                                copyGettersSetters(val, o);
+                                o.seal();
+                            }
+                            Object.assign(o, val);
+
+                            // console.log('after set o=', o, 'check', old);
+                            // (o.constructor as LooseObject).callbacks = callbacks;
+
+                            setTimeout(
+                                // check for changes
+                                debounce(function checkChanges() {
+                                    let state = structuredClone(Object.assign({}, o));
+                                    //console.log( 'check changes' );
+                                    if (!deepEqual(state, old)) {
+                                        //console.log('-> not equal:', state, old);
+                                        o.notify();
+                                    }
+                                }, 0),
+                                0
+                            );
+                        } else {
+                            // simple native var
+                            let old = o.valueOf(),
+                                callbacks = (o as Observable).callbacks;
+
+                            // console.log( 'sO', o, o.valueOf(), 'val', val );
+                            if (val !== old) {
+                                // console.log( '-> sO new val', val );
+                                o = new (getConstructor(val) as Class<typeof val>)(val);
+                                (o as Observable).callbacks = callbacks;
+                                o.notify();
+                            }
+                        }
+                    } else {
+                        console.warn(
+                            'IGNORED - cannot change observable types, IS:',
+                            typeof o.valueOf(),
+                            o,
+                            '- CANNOT BECOME:',
+                            typeof val
+                        );
+                    }
+                },
+            });
+
+            // replace old property with proxy (observable)
+            target[key] = val;
+        }
+    });
+
+    return target;
 };