@twobirds/microcomponents 0.0.21 → 0.0.23

package/src/customObservables.ts

@@ -0,0 +1,340 @@
+"use strict";
+
+import { LooseObject } from './helpers.js';
+import { isObject, parse, debounce, deepEqual } from './helpers.js';
+
+export const makeCO = ( target: LooseObject, propertyName?: string ) => {
+
+	let keys = !propertyName ? [ ...Object.getOwnPropertyNames(target) ] : [ propertyName ];
+
+	keys.forEach( (key) => {
+		// console.log( 'co propname', key, typeof target[key], target[key] );
+		if ( key[0] === '_' || target?.[key] === undefined ) return;
+		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;
+			}
+
+		}
+
+		let Observable = class extends Constructor{
+
+			constructor( val: any ){
+				super( val );
+				(this.constructor as LooseObject).callbacks = [];
+				if ( isObject(val) ){ // you cannot bind native values to the dom
+					(this.constructor as LooseObject).bound = [];
+					Object.getOwnPropertyNames( val ).forEach( (key) => {
+						this[key] = val[key];
+					});
+				}
+			}
+
+			observe( f: Function ){
+				//console.log('observe');
+				(this.constructor as any).callbacks.push( f );
+				return this;
+			}
+
+			bind( target: HTMLElement | ShadowRoot ){
+
+				const
+					that = this,
+					iso = isObject( that.valueOf() ),
+					bound = (that.constructor as any).bound
+				;
+
+				//console.log('bind', iso, target);
+
+				if ( iso ){
+					// console.log('bind...', that.valueOf(), target );
+
+					function walk( element: Node ){
+						//console.log('-walk:', element, element.childNodes );
+
+						if ( !!element['nodeType'] && element.nodeType === 3 ){ // text node
+							//console.log('--type: textNode(3)');
+
+							var placeholders = Array.from( element.nodeValue && element.nodeValue.match( /\{[^\{\}]*\}/g ) || []);
+
+							if ( placeholders.length > 0 ){
+								//console.log('--placeholders:', placeholders);
+								var f=(function( template: string ){
+									//console.log('template', template);
+									return function( values: any ){
+										var t,
+											changed = false;
+
+										//console.log( 'placeholders:', placeholders, 'values:', values);
+										if ( placeholders ){
+											if ( iso ){
+												placeholders.forEach(function(placeholder){
+													if ( ( f as LooseObject).values[placeholder] !== values[placeholder] ){
+														(f as LooseObject).values[placeholder] = values[placeholder];
+														changed = true;
+													}
+												});
+											} else { // it is a simple value
+												(f as LooseObject).values = values;
+												changed = true;
+											};
+										}
+										if (changed){ // only reflow if changed
+											t = template;
+											//console.log('--template parse', t, (f as LooseObject).values );
+											if ( iso ){
+													element.nodeValue = parse(
+														t,
+														(f as LooseObject).values
+													);
+											} else { // it is a simple value -> replace every placeholder whatever the name wi
+												element.nodeValue = t.replace( /\{.*\}/g ,(f as LooseObject).values );
+											};
+										}
+										return values;
+									};
+								})( element.nodeValue || '' );
+
+								(f as LooseObject).values = iso ? {} : undefined;
+								placeholders = Array.from( placeholders ).map((pKey) => pKey.replace(/[\{\}]/g, '').trim());
+
+								let initial: any = iso ? {} : undefined;
+								placeholders.forEach(function(pKey){
+									if ( iso ){
+										initial[pKey] = "";
+									}
+								});
+
+								bound.push(f);
+								// console.log( `--bound textNode`, placeholders, f );
+								//(observableFunction as Function)(initial);
+							}
+
+							//console.log('--childNodes:', element.childNodes );
+							Array.from( element.childNodes )
+								.forEach(function( childNode ){
+									walk( childNode );
+								});
+
+							that.notify();
+						}
+
+						if ( !!element['nodeType'] && element.nodeType === 1 ){ // HTML element
+							//console.log('--type: HTMLElement(1)');
+							Array.from( (element as HTMLElement).attributes )
+								.forEach(
+									function( attributeNode ){
+										var placeholders = Array.from( attributeNode.value && attributeNode.value.match( /\{[^\{\}]*\}/g ) || []);
+
+										if ( placeholders.length > 0 ){
+											//console.log( `--[${attributeNode.value}] placeholders:`, placeholders );
+
+											var f=(function( template: string ){
+												return function( values: any ){
+													var t,
+														changed = false;
+
+													//console.log( 'placeholders:', placeholders, 'values:', values);
+													if ( placeholders ){
+														placeholders.forEach(function(pKey){
+															if ( ( f as LooseObject).values[pKey] !== values[pKey] ){
+																(f as LooseObject).values[pKey] = values[pKey];
+																changed = true;
+															}
+														});
+													}
+													if (changed){ // only reflow if changed
+														t = template;
+														element.nodeValue = parse(
+															t,
+															(f as LooseObject).values
+														);
+													}
+													return values;
+												};
+											})( attributeNode.value || '' );
+
+											(f as LooseObject).values = {};
+											placeholders = Array.from( placeholders ).map((pKey) => pKey.replace(/[\{\}]/g, '').trim());
+											let initial: LooseObject = {};
+											placeholders.forEach(function(pKey){
+												initial[pKey] = "";
+											});
+
+											bound.push(f);
+											// console.log( `--bound element attribute`, placeholders, f );
+											// console.log( `--bound`, observableFunction.bound );
+											//(observableFunction as Function)(initial);
+										}
+									}
+								);
+
+							//console.log('--childNodes:', element.childNodes );
+							Array.from( element.childNodes )
+								.forEach(function( childNode ){
+									walk( childNode );
+								});
+
+							that.notify();
+
+						}
+
+						if ( !!element['nodeType'] && element.nodeType === 11 ){ // shadowRoot node
+							// console.log( element, element.childNodes );
+							Array.from( element.childNodes )
+								.forEach(function( childNode ){
+									walk( childNode );
+								});
+						}
+					}
+
+					walk( target );
+
+					if ( bound.length > 0 ){
+						that.notify();
+					}
+				} else {
+					console.warn( 'IGNORED - cannot bind a non-Object to the dom, IS:', typeof that.valueOf() );
+				}
+
+				return this;
+			}
+
+			notify(){
+				let
+					that = this,
+					data = isObject( that.valueOf() ) && ( that.valueOf() instanceof Array ) === false
+						? structuredClone( Object.assign({}, that) )
+						: that.valueOf()
+				;
+
+				// console.log('notify', that.constructor, (that.constructor as any).callbacks.length, (that.constructor as any)?.bound?.length, data );
+				(that.constructor as any).callbacks.forEach( (f: Function) => {
+					// console.log( 'callback', f, data);
+					f( data );
+				});
+				if ( isObject( that.valueOf() ) ){
+					// console.log('bound', this.constructor);
+					(that.constructor as any).bound.forEach( (f: Function) => {
+						// console.log( 'bound', f, data);
+						f( data );
+					});
+				}
+				return this;
+			}
+		}
+
+		//(Observable.constructor as LooseObject).callbacks = [];
+		let o = new Observable( val );
+
+		Object.defineProperty(
+			target,
+			key,
+			{
+				enumerable: true,
+				get(){
+					if ( isObject( 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:', isObject( val.valueOf() ), 'set:', val, 'to', isObject( o.valueOf() ), o, );
+					if ( typeof val === typeof o.valueOf() ){
+
+						let iso = isObject( o.valueOf() ) && ( o.valueOf() instanceof Array ) === false;
+						//let iso = o.constructor.prototype.__proto__.constructor === Object;
+						//console.log('target iso:', iso);
+						if ( iso ){
+							let
+								old = structuredClone( Object.assign( {}, o ) )
+							;
+
+							val = structuredClone( Object.assign( {}, val ) );
+
+							let
+								hasFormHandler = (o.constructor as LooseObject)?.hasFormHandler ?? false,
+								callbacks = (o.constructor as LooseObject).callbacks,
+								bound = (o.constructor as LooseObject).bound
+							;
+
+							o = new Observable( structuredClone( Object.assign( {}, val ) ) );
+
+							//console.log('after set o=', o, 'check', old);
+							(o.constructor as LooseObject).callbacks = hasFormHandler;
+							(o.constructor as LooseObject).callbacks = callbacks;
+							(o.constructor as LooseObject).bound = bound;
+
+							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 = new Observable( val );
+							(o.constructor as LooseObject).callbacks = callbacks;
+							if ( val !== old ){
+								o.notify();
+							}
+						}
+					} else {
+						console.warn( 'IGNORED - cannot change observable types, IS:', typeof o.valueOf(), '- CANNOT BECOME:', typeof val );
+					}
+				}
+			}
+		);
+
+		target[key] = val;
+
+	});
+
+}