@twobirds/microcomponents 0.1.20 → 0.1.23

package/dist/observables.js

@@ -1,228 +0,0 @@
-'use strict';
-import { debounce, deepEqual, flattenObject, copyGettersSetters } from './helpers.js';
-import { DC, trigger } from './MC.js';
-function isObservableObject(value) {
-    return value != null && typeof value === 'object';
-}
-function getPlaceholders(target) {
-    let placeholders = new Set(), regEx = /\{[^\{\}]*\}/g;
-    (target.getAttributeNames ? target.getAttributeNames() : [])
-        .filter((attr) => target.getAttribute(attr)?.match(regEx))
-        .forEach((attr) => {
-        let placeholders = new Set(target.getAttribute(attr)?.match(regEx));
-        placeholders.forEach((placeholder) => placeholders.add(placeholder.replace(/[\{\}]/g, '')));
-    });
-    [...target.childNodes]
-        .filter((childNode) => {
-        return (childNode.nodeType === 3 && (childNode.nodeValue || '').match(regEx));
-    })
-        .forEach((childNode) => {
-        (childNode.nodeValue || '').match(regEx).forEach((placeholder) => {
-            placeholders.add(placeholder.replace(/[\{\}]/g, ''));
-        });
-    });
-    return [...placeholders].map((placeholder) => placeholder.replace(/[\{\}]/g, ''));
-}
-const inputs = [HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement];
-class Placeholders extends DC {
-    data = {};
-    oldDisplay = '';
-    constructor(target) {
-        super(target);
-        getPlaceholders(target).forEach((property) => (this.data[property] = ''));
-        observe(this);
-        this.#attachCallbacks();
-    }
-    #attachCallbacks() {
-        let target = this.target, hide = false;
-        (target.getAttributeNames ? target.getAttributeNames() : [])
-            .filter((attr) => target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g))
-            .forEach((attr) => {
-            let placeholders = new Set(target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g));
-            this.data.observe(((template) => (data) => {
-                let result = template;
-                placeholders.forEach((placeholder) => {
-                    result = result.replace(placeholder, data[placeholder.replace(/[\{\}]/g, '')]);
-                });
-                target.setAttribute(attr, result);
-            })(target.getAttribute(attr)));
-        });
-        [...target.childNodes]
-            .filter((childNode) => {
-            return (childNode.nodeType === 3 && (childNode.nodeValue || '').match(/\{[^\{\}]*\}/g));
-        })
-            .forEach((childNode) => {
-            hide = true;
-            let placeholders = new Set(childNode.nodeValue.match(/\{[^\{\}]*\}/g));
-            this.data.observe(((template) => (data) => {
-                let result = 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));
-            this.oldDisplay = target.getAttribute('style') || '';
-            if (hide &&
-                !inputs.includes(target.constructor) &&
-                target.tagName !== 'FIELDSET') {
-                target.style.display = 'none';
-            }
-        });
-    }
-    onData(ev) {
-        let data = {};
-        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);
-    }
-}
-function getPlaceholderElements(target) {
-    let elements = [target]
-        .concat([...target.querySelectorAll('*')])
-        .filter((e) => !!getPlaceholders(e).length)
-        .filter((e) => e?.tagName !== 'STYLE')
-        .reverse();
-    return elements;
-}
-function makePlaceholders(element) {
-    getPlaceholderElements(element).forEach((e) => {
-        if (e?._mc?._placeholders)
-            return;
-        DC.add(e, '_placeholders', new Placeholders(e));
-    });
-}
-const classRepo = {};
-function makeObservable(val) {
-    const Constructor = val.constructor, ConstructorName = Constructor.name;
-    let ObservableClass = class extends Constructor {
-        #notify = true;
-        #callbacks = [];
-        constructor(val) {
-            super(val);
-            this.constructor.callbacks = [];
-            if (isObservableObject(val)) {
-                Object.getOwnPropertyNames(val).forEach((key) => {
-                    this[key] = val[key];
-                });
-            }
-        }
-        get callbacks() {
-            return this.#callbacks;
-        }
-        set callbacks(callbacks) {
-            this.#callbacks = callbacks;
-        }
-        observe(callback) {
-            this.#callbacks.push(callback);
-            return this;
-        }
-        bind(target) {
-            const iso = isObservableObject(this.valueOf());
-            if (iso) {
-                makePlaceholders(target);
-                const placeholders = [target, ...target.querySelectorAll('[data-mc]')].filter((e) => !!e?._mc?._placeholders);
-                const func = function callback(data) {
-                    let flattenedData = flattenObject(data);
-                    placeholders.forEach((node) => {
-                        if (!node)
-                            return;
-                        trigger(node, 'data', flattenedData);
-                    });
-                };
-                this.#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) {
-            let data = isObservableObject(this.valueOf()) && this.valueOf() instanceof Array === false
-                ? structuredClone(Object.assign({}, this))
-                : this.valueOf();
-            if (notify !== undefined) {
-                this.#notify = notify;
-            }
-            if (this.#notify) {
-                this.#callbacks.forEach((f) => {
-                    f(data);
-                });
-            }
-            return this;
-        }
-    };
-    classRepo[ConstructorName] = ObservableClass;
-    return ObservableClass;
-}
-function getConstructor(val) {
-    let key = val.constructor.name;
-    return classRepo[key] || makeObservable(val);
-}
-export const observe = (target, propertyName) => {
-    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 = target[key];
-            let o = new (getConstructor(val))(val);
-            let debouncedNotify = 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) {
-                    if (typeof val === typeof o.valueOf()) {
-                        let iso = isObservableObject(o.valueOf()) && o.valueOf() instanceof Array === false;
-                        if (iso) {
-                            if (o?.constructor?.prototype?.observe === undefined) {
-                                o = new (getConstructor(val))(structuredClone(Object.assign({}, val)));
-                                copyGettersSetters(val, o);
-                            }
-                            Object.assign(o, val);
-                            o.notify();
-                        }
-                        else {
-                            let old = o.valueOf(), callbacks = o.callbacks;
-                            if (val !== old) {
-                                o = new (getConstructor(val))(val);
-                                o.callbacks = callbacks;
-                                debouncedNotify();
-                            }
-                        }
-                    }
-                    else {
-                        console.warn('IGNORED - cannot change observable types, IS:', typeof o.valueOf(), o, '- CANNOT BECOME:', typeof val);
-                    }
-                },
-            });
-            target[key] = val;
-        }
-    });
-    return target;
-};

package/dist/observables.ts

@@ -1,338 +0,0 @@
-'use strict';
-
-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';
-}
-
-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, ''));
-}
-
-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;
-
-		// 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,
-								// JSON.stringify(data[placeholder.replace(/[\{\}]/g, '')])
-								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,
-								// JSON.stringify(data[placeholder.replace(/[\{\}]/g, '')])
-								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
-): 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 {
-	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>;
-};
-
-type Class<T> = new (...args: any[]) => T;
-
-// repository for observable class wrappers
-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) {
-			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);
-}
-
-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));
-							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;
-};