@twobirds/microcomponents 0.0.33 → 0.0.37

package/src/helpers.ts

@@ -1,173 +1,140 @@
-"use strict";
-
-export function isObject( value: any ): boolean {
-  return value != null && typeof value === 'object';
-}
+'use strict';
 
 export interface LooseObject {
 	[key: string | symbol]: any;
 }
 
-export function kebabToPascal(str: string) {
-	return str
-		.split('-') // Split by hyphens
-		.map(word => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize each part
-		.join(''); // Join without spaces
+export function isNativeObject(value: any): boolean {
+	return value && value['constructor'] && value.constructor === Object;
 }
 
-export function debounce( func: Function, milliseconds: number ): Function {
-	let timeout: any;
-	return () => {
+export function sortObject(o: LooseObject): LooseObject {
+	let result: LooseObject = {},
+		keys = [...Object.keys(o)].sort();
 
-		clearTimeout( timeout );
+	keys.forEach((key) => {
+		if (isNativeObject(o[key])) {
+			result[key] = sortObject(o[key]);
+		} else {
+			result[key] = o[key];
+		}
+	});
 
-		timeout = setTimeout(
-			function(){
-				func( ...arguments );
-			},
-			milliseconds
-		);
-	};
-};
+	return result;
+}
 
-export function deepEqual( o1: any, o2:any): boolean {
-	const k1 = Object.keys(o1);
-	const k2 = Object.keys(o2);
-	if (k1.length !== k2.length) {
-		return false;
-	}
-	for (const key of k1) {
-		const
-			v1 = o1[key],
-			v2 = o2[key],
-			recurse = isObject(v1) && isObject(v2);
-		;
+export function flattenObject(
+	o: LooseObject,
+	doSort: boolean = true
+): LooseObject {
+	let result: LooseObject = {};
+
+	[...Object.getOwnPropertyNames(o)].forEach((propName) => {
 		if (
-			( recurse && !deepEqual(v1, v2) )
-			|| (!recurse && v1 !== v2)
+			o[propName] &&
+			o[propName]['constructor'] &&
+			o[propName].constructor === Object
 		) {
-			return false;
+			const temp = flattenObject(o[propName], false);
+			for (const j in temp) {
+				result[propName + '.' + j] = temp[j];
+			}
+		} else {
+			result[propName] = o[propName];
 		}
-	}
-	return true;
-}
-
-export function nameSpace( ns: string, obj: LooseObject, val: any = null, orig?: any ): any {
-	let leftOver: Array<any> = ns.split('.');
-
-	if ( !orig ){
-		orig = obj;
-	}
-
-	// console.log( 'start', ns, obj, val, leftOver );
+	});
 
-	let
-		last: string = leftOver.shift(),	// this property name
-		lns: string = leftOver.join('.')	// the leftover namespace
-	;
-
-	if ( val !== null && last.length && obj[last] === undefined ){ // extend if val given and ns leftover...
-		// console.log( 'add prop', last );
-		obj[last] = {};
-	}
+	return doSort ? sortObject(result) : result;
+}
 
-	let
-		lob: any = obj[last]	// the leftover value or obj
-	;
+export function deepEqual(o1: LooseObject, o2: LooseObject): boolean {
+	return (
+		JSON.stringify(flattenObject(o1)) === JSON.stringify(flattenObject(o2))
+	);
+}
 
-	// console.log( 'lob', lob, 'last:', last, 'lns:', lns, 'obj:', obj );
+export function nameSpace(ns: string | string[], obj: LooseObject = {}): any {
+	let nsa = ns.constructor === String ? ns.split('.') : ns;
 
-	if ( lns.length === 0 ){ // this should be the value to set or get
-		if ( val !== null ){
-			obj[last] = val;
-			return orig;
-		}
-		return obj[last];
+	if (!obj || !nsa[0] || !obj[nsa[0]]) {
+		console.warn('ns', nsa[0], 'not in', obj);
+		return;
 	}
-
-	if ( isObject( obj[last] ) ){
-		return nameSpace( lns, obj[last], val, orig );
-	} else {
-		if (val){
-			return orig;
-		}
-
-		return lob[last];
+	if (obj[nsa[0]].constructor === Object && nsa.length > 1) {
+		return nameSpace((nsa as string[]).splice(1), obj[nsa[0]]);
 	}
-
+	return obj[nsa[0]];
 }
 
-export function parse( what: string | Object | any[], parseThis: Object ){
+export function parse(what: string | Object | any[], parseThis: Object) {
 	var args = Array.from(arguments);
 
-	if (!args.length){
-		console.error('no arguments give to parse');
-		return;
-	}
-
-	if (args.length === 1){
-		return args[1];
-	} else if (args.length > 2) {
-		while (args.length > 1){
-			args[0] = parse( args[0], args[1]);
+	if (args.length > 2) {
+		while (args.length > 1) {
+			args[0] = parse(args[0], args[1]);
 			args.splice(1, 1);
 		}
 		return args[0];
 	}
 
-	// implicit else: exactly 2 arguments
-	if ( typeof what === 'string' ){
-		var vars = what.match( /\{[^\{\}]*\}/g );
-
-		if ( !!vars ) {
-			vars
-				.forEach(
-					function (pPropname) {
-						var propname = pPropname.substr(1, pPropname.length - 2),
-							value = nameSpace( propname, parseThis );
-
-						if ( typeof value !== 'undefined' ){
-							what = (what as string).replace( pPropname, value );
-						}
-					}
-				);
-		}
-	} else if ( isObject(what) ){
-		switch ( what.constructor ){
+	if (typeof what === 'string') {
+		what.match(/\{[^\{\}]*\}/g)?.forEach(function (pPropname) {
+			var propname = pPropname.substring(1, pPropname.length - 1),
+				value = nameSpace(propname, parseThis);
+			//console.log(propname, value);
+			if (typeof value !== 'undefined') {
+				what = (what as string).replace(pPropname, value);
+			}
+		});
+	} else if (isNativeObject(what)) {
+		switch (what.constructor) {
 			case Object:
-				Object
-					.keys( what )
-					.forEach(
-						function( pKey ){
-							if ( what.hasOwnProperty( pKey ) ){
-								( what as LooseObject )[ pKey ] = parse( ( what as LooseObject )[ pKey ], parseThis );
-							}
-						}
-					);
+				Object.keys(what).forEach(function (pKey) {
+					if (what.hasOwnProperty(pKey)) {
+						(what as LooseObject)[pKey] = parse(
+							(what as LooseObject)[pKey],
+							parseThis
+						);
+					}
+				});
 				break;
 			case Array:
-				( what as Array<any> )
-					.forEach(
-						function( pValue, pKey, original ){
-							original[ pKey ] = parse( (what as any)[ pKey ], parseThis );
-						}
-					);
+				(what as Array<any>).forEach(function (pValue, pKey, original) {
+					original[pKey] = parse((what as any)[pKey], parseThis);
+				});
 				break;
 		}
 	}
 
 	return what;
-};
+}
+
+export function kebabToPascal(str: string) {
+	return str
+		.split('-') // Split by hyphens
+		.map((word) => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize each part
+		.join(''); // Join without spaces
+}
+
+export function debounce(func: Function, milliseconds: number): Function {
+	let timeout: any;
+	return () => {
+		clearTimeout(timeout);
+
+		timeout = setTimeout(function () {
+			func(...arguments);
+		}, milliseconds);
+	};
+}
 
-export function htmlToElements( html: string ): HTMLElement[]{
+export function htmlToElements(html: string): HTMLElement[] {
 	let template = document.createElement('template');
 
-	html = html
-		.replace( /<([A-Za-z0-9\-]*)([^>\/]*)(\/>)/gi, "<$1$2></$1>"); // replace XHTML closing tags by full closing tags
+	html = html.replace(/<([A-Za-z0-9\-]*)([^>\/]*)(\/>)/gi, '<$1$2></$1>'); // replace XHTML closing tags by full closing tags
 
 	template.innerHTML = html;
 
 	template.content.normalize();
 
-	return ( Array.from(template.content.childNodes) as HTMLElement[] );
+	return Array.from(template.content.childNodes) as HTMLElement[];
 }

package/src/microcomponents.ts

@@ -2,7 +2,7 @@
 export * from './helpers.js';
 export * from './MC.js';
 export * from './McEvent.js';
-export * from './customElements.js';
-export * from './customObservables.js';
-export * from './customSelectors.js';
+export * from './elements.js';
+export * from './observables.js';
+export * from './selectors.js';
 export * from './formValues.js';

package/src/observables.ts

@@ -0,0 +1,354 @@
+'use strict';
+
+import {
+	LooseObject,
+	parse,
+	debounce,
+	deepEqual,
+	nameSpace,
+	flattenObject,
+} from './helpers.js';
+
+import { DC, HTMLMcElement, McEvent } 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();
+
+	// scan attributes
+	target
+		.getAttributeNames()
+		.filter((attr) => target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g)) // extract placeholder(s)
+		.forEach((attr) => {
+			let phs: Set<string> = new Set(
+				target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g)
+			);
+			phs.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(/\{[^\{\}]*\}/g)
+			);
+		})
+		.forEach((childNode) => {
+			((childNode as any).nodeValue || '')
+				.match(/\{[^\{\}]*\}/g)
+				.forEach((placeholder: string) => {
+					placeholders.add(placeholder.replace(/[\{\}]/g, ''));
+				});
+		});
+
+	// extract {}
+	let result: string[] = [...placeholders].map((placeholder) =>
+		placeholder.replace(/[\{\}]/g, '')
+	);
+
+	//console.log('getPlaceholders()', target, result);
+
+	return [...placeholders];
+}
+
+class Placeholders extends DC {
+	data: LooseObject = {};
+	placeholders: string[] = [];
+
+	constructor(target: HTMLElement) {
+		super(target);
+		let that = this;
+		getPlaceholders(target).forEach((property) => (that.data[property] = ''));
+		observe(that);
+		that.#attachCallbacks();
+	}
+
+	#attachCallbacks() {
+		let that = this,
+			target = that.target;
+
+		// console.log('attachCallbacks', that.target);
+
+		// scan attributes
+		target
+			.getAttributeNames()
+			.filter((attr: string) =>
+				target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g)
+			) // extract placeholder(s)
+			.forEach((attr: string) => {
+				let phs: Set<string> = new Set(
+					target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g)
+				);
+				// attach callback
+				that.data.observe(
+					((template: string) => (data: LooseObject) => {
+						let result: string = template;
+						phs.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 any).nodeValue || '').match(/\{[^\{\}]*\}/g)
+				);
+			})
+			.forEach((childNode) => {
+				let phs: Set<string> = new Set(
+					childNode.nodeValue.match(/\{[^\{\}]*\}/g)
+				);
+
+				// attach callback
+				that.data.observe(
+					((template: string) => (data: LooseObject) => {
+						let result: string = template;
+						phs.forEach((placeholder) => {
+							result = result.replace(
+								placeholder,
+								data[placeholder.replace(/[\{\}]/g, '')]
+							);
+						});
+						//console.log('cb nodeValue', phs, data, template, childNode, result);
+						childNode.nodeValue = result;
+					})(childNode.nodeValue)
+				);
+			});
+	}
+
+	onData(ev: McEvent) {
+		let that = this,
+			data: LooseObject = {};
+		Object.keys(ev.data).forEach((key) => {
+			if (that.data.hasOwnProperty(key)) data[key] = ev.data[key];
+		});
+		// console.log('onData()', ev, data, that.data);
+		if (JSON.stringify(data) !== JSON.stringify(that.data))
+			Object.assign(that.data, data); // will trigger callbacks
+	}
+}
+
+function getPlaceholderElements(
+	target: HTMLElement | DocumentFragment | ShadowRoot
+): HTMLElement[] {
+	let elements: Array<HTMLElement | DocumentFragment | ShadowRoot> = [target]
+		.concat([...(target.querySelectorAll('*') as unknown as HTMLElement[])])
+		.filter((e) => !!getPlaceholders(e as HTMLElement).length);
+	return elements as HTMLElement[];
+}
+
+function makePlaceHolders(
+	element: HTMLElement | DocumentFragment | ShadowRoot
+): void {
+	getPlaceholderElements(element).forEach((e) =>
+		DC.add(e, '_placeholders', new Placeholders(e))
+	);
+}
+
+export type Observable = {
+	observe: (cb: Callback) => void;
+	notify: () => void;
+	bind: (target: HTMLElement | DocumentFragment | ShadowRoot) => void;
+};
+
+export const observe = (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 (isObservableObject(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 | DocumentFragment | ShadowRoot) {
+				const that = this,
+					iso = isObservableObject(that.valueOf()),
+					bound = (that.constructor as any).bound;
+				//console.log('bind', iso, target);
+
+				if (iso) {
+					makePlaceHolders(target);
+					(this.constructor as any).callbacks.push((data: LooseObject) => {
+						DC.trigger(target, 'data', flattenObject(data), 'ld');
+					});
+					that.notify();
+				} else {
+					console.warn(
+						'IGNORED - cannot bind a non-Object to the dom, IS:',
+						typeof that.valueOf(),
+						that
+					);
+				}
+
+				return this;
+			}
+
+			notify() {
+				let that = this,
+					data =
+						isObservableObject(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 (isObservableObject(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 (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;
+					//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(),
+						o,
+						'- CANNOT BECOME:',
+						typeof val
+					);
+				}
+			},
+		});
+
+		// replace old property with proxy (observable)
+		target[key] = val;
+	});
+};