@twobirds/microcomponents 0.1.16 → 0.1.18

package/dist/observables.ts

@@ -5,169 +5,151 @@ import { LooseObject, debounce, deepEqual, flattenObject, copyGettersSetters } f
 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;
+
+		// 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);
+					})(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;
+						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];
+		});
+		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
+	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));
-    });
+	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;
@@ -177,192 +159,172 @@ 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) {
-                (this as any).#callbacks.forEach((f: Function) => {
-                    f(data);
-                });
-            }
-
-            return this;
-        }
-    };
-
-    (classRepo as any)[ConstructorName] = ObservableClass;
-
-    // console.log( 'classRepo:', classRepo );
-
-    return ObservableClass;
+	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) {
+			this.#callbacks.push(callback);
+			return this;
+		}
+
+		bind(target: HTMLElement | DocumentFragment | ShadowRoot) {
+			const iso = isObservableObject(this.valueOf());
+
+			if (iso) {
+				makePlaceholders(target);
+				const placeholders: unknown = [target, ...target.querySelectorAll('[data-mc]')].filter(
+					(e) => !!(e as LooseObject)?._mc?._placeholders
+				);
+
+				const func = function callback(data: LooseObject) {
+					// avoid bubbling for speed
+					let flattenedData = flattenObject(data);
+					(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;
+
+	return ObservableClass;
 }
 
 function getConstructor(val: any): Class<typeof val> {
-    let key: string = val.constructor.name;
-    return classRepo[key] || makeObservable(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
-        ) {
-            if (key[0] === '_' || target?.[key] === undefined) return target;
-            let val: any = target[key];
-
-            let o = new (getConstructor(val) as Class<typeof val>)(val);
-
-            let debouncedNotify: Function = debounce(function debouncedNotify() {
-                o.notify();
-            }, 0);
-
-            Object.defineProperty(target, key, {
-                enumerable: true,
-                get() {
-                    if (isObservableObject(o.valueOf())) {
-                        let check = structuredClone(Object.assign({}, o));
-                        setTimeout(function checkChanges() {
-                            let state = structuredClone(Object.assign({}, o));
-                            console.log(
-                                'compare',
-                                check,
-                                'to',
-                                state,
-                                'with',
-                                o.callbacks,
-                                'isChanged:',
-                                !deepEqual(state, check)
-                            );
-                            if (!deepEqual(state, check)) {
-                                debouncedNotify();
-                            }
-                        }, 0);
-                    }
-                    return o;
-                },
-                set(val: any) {
-                    if (typeof val === typeof o.valueOf()) {
-                        let iso =
-                            isObservableObject(o.valueOf()) &&
-                            o.valueOf() instanceof Array === false;
-                        if (iso) {
-                            // is observable object
-                            if (o?.constructor?.prototype?.observe === undefined) {
-                                // not observed yet
-                                o = new (getConstructor(val) as Class<typeof val>)(
-                                    structuredClone(Object.assign({}, val))
-                                );
-                                copyGettersSetters(val, o);
-                                //o.seal();
-                            }
-                            Object.assign(o, val); // mixin set object into observable object
-                            o.notify();
-                        } else {
-                            // simple native var
-                            let old = o.valueOf(),
-                                callbacks = (o as Observable).callbacks;
-
-                            if (val !== old) {
-                                o = new (getConstructor(val) as Class<typeof val>)(val);
-                                (o as Observable).callbacks = callbacks;
-                                debouncedNotify();
-                            }
-                        }
-                    } else {
-                        // set type is not stored type
-                        console.warn(
-                            'IGNORED - cannot change observable types, IS:',
-                            typeof o.valueOf(),
-                            o,
-                            '- CANNOT BECOME:',
-                            typeof val
-                        );
-                    }
-                },
-            });
-            target[key] = val; // replace old property with proxy (observable)
-        }
-    });
-
-    return target;
+	let keys = !propertyName ? [...Object.getOwnPropertyNames(target)] : [propertyName];
+
+	keys.forEach((key) => {
+		if (
+			target.hasOwnProperty(key) &&
+			typeof target[key] !== 'function' &&
+			!target?.[key]?.constructor?.prototype?.observe
+		) {
+			if (key[0] === '_' || target?.[key] === undefined) return target;
+			let val: any = target[key];
+
+			let o = new (getConstructor(val) as Class<typeof val>)(val);
+
+			let debouncedNotify: Function = debounce(function debouncedNotify() {
+				o.notify();
+			}, 0);
+
+			Object.defineProperty(target, key, {
+				enumerable: true,
+				get() {
+					if (isObservableObject(o.valueOf())) {
+						let check = structuredClone(Object.assign({}, o));
+						setTimeout(function checkChanges() {
+							let state = structuredClone(Object.assign({}, o));
+							if (!deepEqual(state, check)) {
+								debouncedNotify();
+							}
+						}, 0);
+					}
+					return o;
+				},
+				set(val: any) {
+					if (typeof val === typeof o.valueOf()) {
+						let iso = isObservableObject(o.valueOf()) && o.valueOf() instanceof Array === false;
+						if (iso) {
+							// is observable object
+							if (o?.constructor?.prototype?.observe === undefined) {
+								// not observed yet
+								o = new (getConstructor(val) as Class<typeof val>)(
+									structuredClone(Object.assign({}, val))
+								);
+								copyGettersSetters(val, o);
+								//o.seal();
+							}
+							Object.assign(o, val); // mixin set object into observable object
+							o.notify(); // dont test, just assume "changed" status
+						} else {
+							// simple native var
+							let old = o.valueOf(),
+								callbacks = (o as Observable).callbacks;
+
+							if (val !== old) {
+								o = new (getConstructor(val) as Class<typeof val>)(val);
+								(o as Observable).callbacks = callbacks;
+								debouncedNotify();
+							}
+						}
+					} else {
+						// set type is not stored type
+						console.warn(
+							'IGNORED - cannot change observable types, IS:',
+							typeof o.valueOf(),
+							o,
+							'- CANNOT BECOME:',
+							typeof val
+						);
+					}
+				},
+			});
+			target[key] = val; // replace old property with proxy (observable)
+		}
+	});
+
+	return target;
 };