@twobirds/microcomponents 0.0.76 → 0.0.77

package/public/observables.ts

@@ -194,207 +194,227 @@ function makePlaceholders(
 export type Observable = {
 	observe: (cb: Callback) => void;
 	notify: () => void;
-	bind: (target: HTMLElement | DocumentFragment | ShadowRoot) => void;
+	bind: (target: HTMLElement | DocumentFragment | ShadowRoot ) => void;
+	callbacks: Array<Function>;
 };
 
-export const observe = (
-	target: LooseObject,
-	propertyName?: string
-): LooseObject => {
-	let keys = !propertyName
-		? [...Object.getOwnPropertyNames(target)]
-		: [propertyName];
+type Class<T> = new (...args: any[]) => T;
 
-	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;
+// 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];
+				});
 			}
 		}
 
-		let Observable = class extends Constructor {
-			#notify: boolean = true;
+		get callbacks(): Array<Function> {
+			return this.#callbacks
+		}
+
+		set callbacks( callbacks: Array<Function> ){
+			this.#callbacks = callbacks
+		}
+
+		observe(f: Function) {
+			//console.log('observe');
+			this.#callbacks.push(f);
+			return this;
+		}
 
-			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];
+		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 as any).#callbacks.push(func);
+				that.notify();
+			} else {
+				console.warn(
+					'IGNORED - cannot bind a non-Object to the dom, IS:',
+					typeof that.valueOf(),
+					that
+				);
 			}
 
-			observe(f: Function) {
-				//console.log('observe');
-				(this.constructor as any).callbacks.push(f);
-				return this;
+			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;
 			}
 
-			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
-					);
-				}
+			//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);
+			});
 
-				return this;
-			}
+			return that;
+		}
+	};
 
-			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;
-				}
+	(classRepo as any)[ConstructorName] = ObservableClass;
 
-				//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);
-				});
+	// console.log( 'classRepo:', classRepo );
 
-				return that;
-			}
-		};
+	return ObservableClass;
+}
 
-		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);
+function getConstructor( val: any ): Class<typeof val> { 
+	let key: string = val.constructor.name;
+	return classRepo[key] || makeObservable( val );
+}
 
-						// console.log('after set o=', o, 'check', old);
-						// (o.constructor as LooseObject).callbacks = callbacks;
+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(
-							// check for changes
 							debounce(function checkChanges() {
 								let state = structuredClone(Object.assign({}, o));
 								//console.log( 'check changes', state, check );
-								if (!deepEqual(state, old)) {
+								if (!deepEqual(state, check)) {
 									//console.log( '-> not equal!' );
 									o.notify();
 								}
 							}, 0),
 							0
 						);
-					} else {
-						// 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();
+					}
+					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
+						);
 					}
-				} 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;
+		};
 
-		// replace old property with proxy (observable)
-		target[key] = val;
 	});
 
 	return target;