@twobirds/microcomponents 0.0.75 → 0.0.76

package/public/observables.ts

@@ -194,215 +194,207 @@ function makePlaceholders(
 export type Observable = {
 	observe: (cb: Callback) => void;
 	notify: () => void;
-	bind: (target: HTMLElement | DocumentFragment | ShadowRoot ) => void;
+	bind: (target: HTMLElement | DocumentFragment | ShadowRoot) => void;
 };
 
-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> = [];
+export const observe = (
+	target: LooseObject,
+	propertyName?: string
+): LooseObject => {
+	let keys = !propertyName
+		? [...Object.getOwnPropertyNames(target)]
+		: [propertyName];
 
-		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];
-				});
+	keys.forEach((key) => {
+		// console.log( 'co propname', key, typeof target[key], target[key] );
+		if (key[0] === '_' || target?.[key] === undefined) return target;
+		let val: any = target[key],
+			Constructor: any;
+
+		if (!val.prototype) {
+			switch (typeof val) {
+				case 'string':
+					Constructor = String;
+					break;
+				case 'number':
+					Constructor = Number;
+					break;
+				case 'boolean':
+					Constructor = Boolean;
+					break;
+				case 'object':
+					if (val instanceof Array) {
+						Constructor = Array;
+					} else {
+						Constructor = Object;
+					}
+					break;
+				default:
+					return;
 			}
 		}
 
-		observe(f: Function) {
-			//console.log('observe');
-			this.#callbacks.push(f);
-			return this;
-		}
+		let Observable = class extends Constructor {
+			#notify: boolean = true;
 
-		bind(target: HTMLElement | DocumentFragment | ShadowRoot) {
-			const that = this,
-				iso = isObservableObject(that.valueOf());
-			//console.log('bind', iso, target);
-
-			if (iso) {
-				makePlaceholders(target);
-				const placeholders: unknown = [
-					...target.querySelectorAll('[_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) => {
-						// console.log('trigger callback', e);
-						if (!e) return;
-						(e as any)._mc.trigger('data', d);
+			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];
 					});
-				};
-				(that as any).#callbacks.push(func);
-				that.notify();
-			} else {
-				console.warn(
-					'IGNORED - cannot bind a non-Object to the dom, IS:',
-					typeof that.valueOf(),
-					that
-				);
+				}
 			}
 
-			return this;
-		}
-
-		notify(notify?: boolean) {
-			let that = this,
-				data =
-					isObservableObject(that.valueOf()) &&
-					that.valueOf() instanceof Array === false
-						? structuredClone(Object.assign({}, that))
-						: that.valueOf();
-
-			if (notify !== undefined) {
-				that.#notify = notify;
-				// return;
+			observe(f: Function) {
+				//console.log('observe');
+				(this.constructor as any).callbacks.push(f);
+				return this;
 			}
 
-			//if (that.#notify) console.log('notify', this, data);
-			(that as any).#callbacks.forEach((f: Function) => {
-				// console.log(
-				// 	(this.constructor as any).callbacks,
-				// 	'notify: exec callback',
-				// 	f,
-				// 	data
-				// );
-				f(data);
-			});
+			bind(target: HTMLElement | DocumentFragment | ShadowRoot) {
+				const that = this,
+					iso = isObservableObject(that.valueOf());
+				//console.log('bind', iso, target);
+
+				if (iso) {
+					makePlaceholders(target);
+					const placeholders: unknown = [
+						...target.querySelectorAll('[_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) => {
+							// console.log('trigger callback', e);
+							if (!e) return;
+							(e as any)._mc.trigger('data', d);
+						});
+					};
+					(that.constructor as any).callbacks.push(func);
+					that.notify();
+				} else {
+					console.warn(
+						'IGNORED - cannot bind a non-Object to the dom, IS:',
+						typeof that.valueOf(),
+						that
+					);
+				}
 
-			return that;
-		}
-	};
+				return this;
+			}
 
-	(classRepo as any)[ConstructorName] = ObservableClass;
+			notify(notify?: boolean) {
+				let that = this,
+					data =
+						isObservableObject(that.valueOf()) &&
+						that.valueOf() instanceof Array === false
+							? structuredClone(Object.assign({}, that))
+							: that.valueOf();
+
+				if (notify !== undefined) {
+					that.#notify = notify;
+					// return;
+				}
 
-	// console.log( 'classRepo:', classRepo );
+				//if (that.#notify) console.log('notify', this, data);
+				(that.constructor as any).callbacks.forEach((f: Function) => {
+					// console.log(
+					// 	(this.constructor as any).callbacks,
+					// 	'notify: exec callback',
+					// 	f,
+					// 	data
+					// );
+					f(data);
+				});
 
-	return ObservableClass;
-}
+				return that;
+			}
+		};
 
-function getConstructor( val: any ): Class<typeof val> { 
-	let key: string = val.constructor.name;
-	return classRepo[key] || makeObservable( val );
-}
+		let o = new Observable(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 instanceof Observable === false) {
+							o = new Observable(structuredClone(Object.assign({}, val)));
+							copyGettersSetters(val, o);
+							o.seal();
+						}
+						Object.assign(o, val);
 
-export const observe = (
-	target: LooseObject,
-	propertyName?: string
-): LooseObject => {
-	let keys = !propertyName
-		? [...Object.getOwnPropertyNames(target)]
-		: [propertyName];
+						// console.log('after set o=', o, 'check', old);
+						// (o.constructor as LooseObject).callbacks = callbacks;
 
-	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(
+							// check for changes
 							debounce(function checkChanges() {
 								let state = structuredClone(Object.assign({}, o));
 								//console.log( 'check changes', state, check );
-								if (!deepEqual(state, check)) {
+								if (!deepEqual(state, old)) {
 									//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.constructor as LooseObject).callbacks;
-							o = o = new ( getConstructor(val) as Class<typeof val> )( val );
-							(o.constructor as LooseObject).callbacks = callbacks;
-							if (val !== old) {
-								o.notify();
-							}
-						}
 					} else {
-						console.warn(
-							'IGNORED - cannot change observable types, IS:',
-							typeof o.valueOf(),
-							o,
-							'- CANNOT BECOME:',
-							typeof val
-						);
+						// simple native var
+						let old = o.valueOf(),
+							callbacks = (o.constructor as LooseObject).callbacks;
+						o = new Observable(val);
+						(o.constructor as LooseObject).callbacks = callbacks;
+						if (val !== old) {
+							o.notify();
+						}
 					}
-				},
-			});
-
-			// replace old property with proxy (observable)
-			target[key] = val;
-		};
+				} 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;