@twobirds/microcomponents 0.0.81 → 0.0.83

package/src/observables.ts

@@ -21,12 +21,11 @@ function getPlaceholders(target: HTMLElement): string[] {
 		regEx = /\{[^\{\}]*\}/g;
 
 	// scan attributes
-	target
-		.getAttributeNames()
+	( !!target.getAttributeNames ? target.getAttributeNames() : [] )
 		.filter((attr) => target.getAttribute(attr)?.match(regEx)) // extract placeholder(s)
 		.forEach((attr) => {
-			let phs: Set<string> = new Set(target.getAttribute(attr)?.match(regEx));
-			phs.forEach((placeholder) =>
+			let placeholders: Set<string> = new Set(target.getAttribute(attr)?.match(regEx));
+			placeholders.forEach((placeholder) =>
 				placeholders.add(placeholder.replace(/[\{\}]/g, ''))
 			);
 		});
@@ -62,35 +61,31 @@ class Placeholders extends DC {
 
 	constructor(target: HTMLElement) {
 		super(target);
-		let that = this;
-		getPlaceholders(target).forEach((property) => (that.data[property] = ''));
-		observe(that);
-		that.#attachCallbacks();
-		delete that._mc; // cleanup, not needed
+		getPlaceholders(target).forEach((property) => (this.data[property] = ''));
+		observe(this);
+		this.#attachCallbacks();
 	}
 
 	#attachCallbacks() {
-		let that = this,
-			target = that.target,
+		let target = this.target,
 			hide: boolean = false;
 
-		//console.log('attachCallbacks', that.target);
+		//console.log('attachCallbacks', this.target);
 
 		// scan attributes
-		target
-			.getAttributeNames()
+		( !!target.getAttributeNames ? target.getAttributeNames() : [] )
 			.filter((attr: string) =>
 				target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g)
 			) // extract placeholder(s)
 			.forEach((attr: string) => {
-				let phs: Set<string> = new Set(
+				let placeholders: Set<string> = new Set(
 					target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g)
 				);
 				// attach callback
-				that.data.observe(
+				this.data.observe(
 					((template: string) => (data: LooseObject) => {
 						let result: string = template;
-						phs.forEach((placeholder) => {
+						placeholders.forEach((placeholder) => {
 							result = result.replace(
 								placeholder,
 								data[placeholder.replace(/[\{\}]/g, '')]
@@ -108,44 +103,48 @@ class Placeholders extends DC {
 				return (
 					// is text node and has placeholders
 					childNode.nodeType === 3 &&
-					((childNode as any).nodeValue || '').match(/\{[^\{\}]*\}/g)
+					((childNode as Node).nodeValue || '').match(/\{[^\{\}]*\}/g)
 				);
 			})
 			.forEach((childNode) => {
 				hide = true;
-				let phs: Set<string> = new Set(
+				let placeholders: Set<string> = new Set(
 					childNode.nodeValue.match(/\{[^\{\}]*\}/g)
 				);
 
 				// attach callback
-				that.data.observe(
+				this.data.observe(
 					((template: string) => (data: LooseObject) => {
 						let result: string = template;
-						//console.log('text node "', template, '" callbach data:', data);
-						phs.forEach((placeholder) => {
+						//console.log('text node "', template, '" callback data:', data);
+						placeholders.forEach((placeholder) => {
 							result = result.replace(
 								placeholder,
 								data[placeholder.replace(/[\{\}]/g, '')]
 							);
 						});
-						if (
-							Object.keys(data).some((key) => {
-								return !!data[key];
-							})
-						) {
-							if (!!that.oldDisplay) {
-								target.style = that.oldDisplay;
+						// TODO: find out why this doesnt work correctly ... maybe completely overhaul the whole thing
+						// TODO: check overlap with inner web components, possibly firewall them
+						// TODO: maybe include convention for plain DOM / ShadowDom handling
+
+						// if (
+						// 	Object.keys(data).some((key) => {
+						// 		return !!data[key];
+						// 	})
+						// ) {
+							if (!!this.oldDisplay) {
+								target.style = this.oldDisplay;
 							} else {
 								target.removeAttribute('style');
 							}
-							delete that.oldDisplay;
-						}
+							delete this.oldDisplay;
+						// }
 						childNode.nodeValue = result;
 					})(childNode.nodeValue)
 				);
 
 				// hide for now
-				that.oldDisplay = target.getAttribute('style)') || '';
+				this.oldDisplay = target.getAttribute('style)') || '';
 				if (
 					hide &&
 					!inputs.includes((target as any).constructor) &&
@@ -157,26 +156,24 @@ class Placeholders extends DC {
 	}
 
 	onData(ev: McEvent) {
-		let that = this,
-			data: LooseObject = {};
+		let data: LooseObject = {};
 		Object.keys(ev.data).forEach((key) => {
-			if (that.data.hasOwnProperty(key)) data[key] = ev.data[key];
+			if (this.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
+		//console.log('onData()', ev, data, this.data);
+		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<HTMLElement> = (
-		target instanceof HTMLElement ? [target] : []
-	)
+	let elements: Array<Node> = [target]
 		.concat([...(target.querySelectorAll('*') as unknown as HTMLElement[])])
 		.filter((e) => !!getPlaceholders(e as HTMLElement).length)
-		.filter((e) => e.tagName !== 'STYLE');
+		.filter((e) => (e as HTMLElement)?.tagName !== 'STYLE')
+		.reverse(); // to start with inner elements
 	//console.log('getPlaceholderElements', elements);
 	return elements as HTMLElement[];
 }
@@ -239,14 +236,13 @@ function makeObservable(val: any): Class<typeof val>{
 		}
 
 		bind(target: HTMLElement | DocumentFragment | ShadowRoot) {
-			const that = this,
-				iso = isObservableObject(that.valueOf());
+			const iso = isObservableObject(this.valueOf());
 			//console.log('bind', iso, target);
 
 			if (iso) {
 				makePlaceholders(target);
 				const placeholders: unknown = [
-					...target.querySelectorAll('[_mc]'),
+					target, ...target.querySelectorAll('[_mc]'), 
 				].filter((e) => !!(e as LooseObject)?._mc?._placeholders);
 				//console.log('placeholders:', target, placeholders);
 				const func = function callback(data: LooseObject) {
@@ -259,13 +255,13 @@ function makeObservable(val: any): Class<typeof val>{
 						(e as any)._mc.trigger('data', d);
 					});
 				};
-				(that as any).#callbacks.push(func);
-				that.notify();
+				(this as any).#callbacks.push(func);
+				this.notify();
 			} else {
 				console.warn(
 					'IGNORED - cannot bind a non-Object to the dom, IS:',
-					typeof that.valueOf(),
-					that
+					typeof this.valueOf(),
+					this
 				);
 			}
 
@@ -273,20 +269,19 @@ function makeObservable(val: any): Class<typeof val>{
 		}
 
 		notify(notify?: boolean) {
-			let that = this,
-				data =
-					isObservableObject(that.valueOf()) &&
-					that.valueOf() instanceof Array === false
-						? structuredClone(Object.assign({}, that))
-						: that.valueOf();
+			let data =
+					isObservableObject(this.valueOf()) &&
+					this.valueOf() instanceof Array === false
+						? structuredClone(Object.assign({}, this))
+						: this.valueOf();
 
 			if (notify !== undefined) {
-				that.#notify = notify;
+				this.#notify = notify;
 				// return;
 			}
 
-			//if (that.#notify) console.log('notify', this, data);
-			(that as any).#callbacks.forEach((f: Function) => {
+			//if (this.#notify) console.log('notify', this, data);
+			(this as any).#callbacks.forEach((f: Function) => {
 				// console.log(
 				// 	(this.constructor as any).callbacks,
 				// 	'notify: exec callback',
@@ -296,7 +291,7 @@ function makeObservable(val: any): Class<typeof val>{
 				f(data);
 			});
 
-			return that;
+			return this;
 		}
 	};
 

package/src/selectors.ts

@@ -29,249 +29,6 @@ const words = ( classes: Array<string> ): Array<string> => {
 	return classes;
 }
 
-type inputTypes = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-
-const getInputName = ( e: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement ): string => {
-
-	let ret = e instanceof HTMLInputElement
-		? 'input'
-		: e instanceof HTMLSelectElement
-			? 'select'
-			: e instanceof HTMLTextAreaElement
-				? 'textarea'
-				: ''
-		;
-
-	return ret;
-}
-
-
-const getInputHandlers = ( e: HTMLElement | ShadowRoot ): LooseObject => {
-
-		let
-			//inputList = ( Array.from( e.querySelectorAll('*') ) as HTMLElement[] ).filter( i => isInputElement(i) ),
-			inputList = $d('input,select,textarea', e).array,
-			handlers: LooseObject = {};
-
-		inputList.forEach( (i) => {
-			const
-				name: string = ( i as inputTypes ).getAttribute('name') || 'undefined';
-
-			if ( name ){
-				let h: InputBase;
-				switch ( getInputName( i as inputTypes ) ){
-					case 'input':
-						//console.log( i, 'is HTMLInputElement');
-						h = new InputHandler( i as HTMLInputElement, e ); // e = element to search radios in = radioBase
-						Object.defineProperty( handlers, name, {
-							enumerable: true,
-							configurable: true,
-							get: (): any => { return h.val },
-							set: ( value: any ) => { h.val = value }
-						});
-						break;
-					case 'select':
-						//console.log( i, 'is HTMLSelectElement');
-						h = new SelectHandler( i as HTMLSelectElement );
-						Object.defineProperty( handlers, name, {
-							enumerable: true,
-							configurable: true,
-							get: (): any => { return h.val },
-							set: ( value: any ) => { h.val = value }
-						});
-						break;
-					case 'textarea':
-						//console.log( i, 'is HTMLTextAreaElement');
-						h = new TextAreaHandler( i as HTMLTextAreaElement );
-						Object.defineProperty( handlers, name, {
-							enumerable: true,
-							configurable: true,
-							get: (): any => { return h.val },
-							set: ( value: any ) => { h.val = value }
-						});
-						break;
-					default:
-						console.warn('handler missing:', name, 'for', i);
-						break;
-				}
-			}
-		});
-
-		return handlers;
-}
-
-abstract class InputBase{
-	constructor( e: any ){
-	}
-
-	abstract get val(): any;
-
-	abstract set val( value: any );
-
-}
-
-class InputHandler extends InputBase {
-
-	#e: HTMLInputElement;
-	#type: string;
-	#radioBase: any;
-
-	constructor( e: HTMLInputElement, radioBase?: HTMLElement | ShadowRoot ){
-		super( e );
-		this.#e = e;
-		this.#type = e.type;
-		this.#radioBase = radioBase;
-	}
-
-	get val(): any{
-		let that = this,
-			type = that.#type,
-			ret: any;
-
-		switch (type){
-			case 'radio':
-				const check = $d( `input[type="radio"][name="${ this.#e.getAttribute('name') }"]`, this.#radioBase )
-					.filter( e => e.checked );
-				if ( !check.length ) return '';
-				ret = check.array[0];
-				return ret.value;
-			case 'checkbox':
-				return that.#e.checked;
-			default:
-				return that.#e.value;
-				break;
-		}
-
-		return '';
-	}
-
-	set val( value: any ){
-		let that = this,
-			type = that.#type,
-			ret: any;
-
-		switch (type){
-			case 'radio':
-				const
-					selection = `input[type="radio"][name="${ this.#e.getAttribute('name') }"]`,
-					radios = $d( selection, this.#radioBase );
-
-				// console.log('set radios', selection, this.#radioBase, radios.array );
-
-				if ( !radios.length ) return;
-
-				if ( value === '' ){ // uncheck all
-					radios.forEach( r => { if (r.checked) r.checked = false } );
-					//console.log('unset all radios', radios.array );
-					return;
-				}
-
-				const setRadioElement = radios.filter( r => r.getAttribute('value') === value );
-
-				if ( !setRadioElement.length ) return;
-
-				// console.log('set this radio', setRadioElement.array );
-
-				(setRadioElement.array[0] as HTMLInputElement).checked = true;
-
-				// console.log('done', setRadioElement.array );
-				return;
-				break;
-			case 'checkbox':
-				that.#e.checked = value;
-				break;
-			default:
-				that.#e.value = value;
-				break;
-		}
-
-		return;
-	}
-
-}
-
-class SelectHandler extends InputBase {
-
-	#e: HTMLSelectElement;
-	#multi: boolean = false;
-
-	constructor( e: HTMLSelectElement ){
-		super( e );
-		this.#e = e;
-		this.#multi = e.type === 'select-multiple';
-	}
-
-	get val(): string[] | string{
-		const
-			that = this,
-			ret: string[] = [];
-
-		// get all options
-		const options = $d( that.#e.querySelectorAll('option') )
-			.filter( o => o.selected )
-			.forEach( o => { if ( o.selected ) ret.push( o.value ) } );
-
-		if ( this.#multi ) return ret;
-		return ret.length ? ret[0] : '';
-	}
-
-	set val( value: string[] | string ){
-		const
-			that = this;
-
-		value = typeof value === 'string' ? [ value ] : value;
-
-		//console.log('set values', value );
-
-		// set all options
-		const options = $d( that.#e.querySelectorAll('option') )
-			.forEach( o => {
-				if ( value.indexOf( o.value ) > -1 ) {
-					o.setAttribute( 'selected', true )
-					o.selected = true;
-				} else {
-					o.removeAttribute( 'selected' )
-					o.selected = false;
-				}
-			});
-
-		/*
-		if (pOption.selected) {
-			if (
-				!pOption.disabled &&
-				(!pOption.parentNode.disabled ||
-					pOption.parentNode.nodeName !==
-						'optgroup')
-			) {
-				var value = pOption.value;
-
-				ret.push(value);
-			}
-		}
-		*/
-		return;
-	}
-
-}
-
-class TextAreaHandler extends InputBase {
-	#e: HTMLTextAreaElement
-	constructor( e: HTMLTextAreaElement ){
-		super(e);
-		this.#e = e;
-	}
-
-	get val(): string{
-		return this.#e.value;
-	}
-
-	set val( value: string ){
-		this.#e.value = value;
-		return;
-	}
-
-}
-
 /*
 selector classes
 */
@@ -303,28 +60,9 @@ class DomSelector{
 			that = this,
 			undefinedTags: Set<any> = new Set();
 
-		// // console.log('DomSelector constructor', ...arguments);
-
 		if ( !selection ) {
 			return that;
 		}
-
-		/* autoloading disabled !
-		if ( selection instanceof Array ){
-			selection.forEach( (select) => {
-				_getElementList( select, element ).forEach( (e) => {
-					if ( e.localName?.indexOf('-') !== -1 || e.getAttribute?.('is') ) _loadRequirements( e );
-					that.#set.add( e );
-				});
-			});
-		} else {
-			_getElementList( selection, element ).forEach( (e) => {
-				if ( e.localName?.indexOf('-') !== -1 || e.getAttribute?.('is') ) _loadRequirements( e );
-				that.#set.add( e );
-			});
-		}
-		*/
-
 	}
 
 	$t( nameSpace?: string ): TSelector {
@@ -652,20 +390,6 @@ class DomSelector{
 		return that;
 	}
 
-	/*
-	load(): DSelector{
-		let that = this;
-
-		if( !that.length ){
-			that.add( document.body );
-		}
-
-		that.forEach( e => _loadRequirements( e ) );
-
-		return that;
-	}
-	*/
-
 	next( selection?: selection, rootNode?: HTMLElement ): DSelector{
 		let
 			that: DomSelector = this,
@@ -805,7 +529,7 @@ class DomSelector{
 		return that;
 	}
 
-	parents( selection?: selection, rootNode?: HTMLElement ): DSelector {
+	ancestors( selection?: selection, rootNode?: HTMLElement ): DSelector {
 		let
 			that: DomSelector = this,
 			set: Set<HTMLElement> = new Set()
@@ -948,95 +672,6 @@ class DomSelector{
 		return that;
 	}
 
-	// INFO:
-	// val(): LooseObject; // no param: get all as LooseObject
-	// val( p1: string ): Array<string> | number | string; // get from input name
-	// val( p1: object ): DomSelector; // set from object
-	// val( p1: string, p2: any ): DomSelector; // set from name and value
-	val( p1?: any, p2?: any ): any {
-
-		if ( !this.length ) return this;
-
-		const
-			that = this
-		;
-
-		let result: any,
-			handlers: LooseObject = getInputHandlers( that.array[0] );
-
-		// work with it
-		if ( !p1 ){ // get all inputs as LooseObject
-			result = Object.assign( {}, handlers );
-			// Object.keys( handlers ).forEach( ( key ) => result[key] = handlers.hasOwnProperty(key) ? handlers[key].val : undefined );
-		} else {
-			if ( isObject(p1) ){ // set inputs from Object
-				Object.assign( handlers, p1 );
-				// Object.keys( p1 ).forEach( ( key ) => !!handlers[key] ? handlers[key].val = p1[key] : false );
-				result = that;
-			} else if ( typeof p1 === 'string' ){
-				if ( p2 === undefined ){ // get a single input
-					result = handlers[p1];
-				} else { // set a single input
-					handlers[p1] = p2;
-					result = that;
-				}
-			}
-		}
-
-		return result;
-	}
-
-	values( values?: LooseObject ): LooseObject {
-		const
-			that = this,
-			holder: LooseObject = {};
-
-		let
-			data: LooseObject = {};
-
-		//console.log( '$d().values()', values );
-
-		if ( !that.length ) {
-			console.warn('no dom selection to search inputs in');
-			return {};
-		}
-
-		let handlers = getInputHandlers( that.array[0] );
-
-		//console.log( 'handlers', Object.keys(handlers), handlers['cb1'] );
-
-		// let values = that.val();
-
-		// console.log( 'values', values );
-
-		Object.keys( handlers ).forEach( (key: string) => {
-			//console.log(key);
-			data[key] = handlers[key];
-		});
-
-		// data = Object.assign( {}, that.val() )
-		//console.log( 'data', that.array[0], data, Object.keys( data ) );
-
-		if ( Object.keys( data ).length === 0 ) {
-			console.warn('no inputs in this dom selection', that.array[0], data );
-		}
-
-		//console.log( '$d val()', data );
-		if (values) {
-			Object
-				.keys( values )
-				.forEach( key => {
-					if ( handlers.hasOwnProperty(key) ) {
-						console.log( 'key found', key );
-						handlers[key] = values[key];
-					}
-				});
-				// .forEach( key => handlers[key] = values[key] )
-		}
-
-		return structuredClone( Object.assign( handlers ) );
-	}
-
 	/*
 	array method mapping
 	*/
@@ -1434,7 +1069,7 @@ class TbSelector{
 		return that;
 	}
 
-	parents( nameSpace?: string ): TSelector {
+	ancestors( nameSpace?: string ): TSelector {
 
 		let
 			that: TbSelector = this,

package/src/test/test/testform.ts

@@ -1,5 +1,11 @@
 'use strict';
-import { DC, defineCE, Observable, formValues, LooseObject } from './../../microcomponents.js';
+import { 
+    DC, 
+    defineCE, 
+    Observable, 
+    formValues, 
+    LooseObject 
+} from '../../microcomponents.js';
 
 defineCE(
 	'test-testform',
@@ -12,8 +18,6 @@ defineCE(
 
 			const that = this;
 
-			delete that._mc; // not needed
-
 			let shadow = (that as DC).target.attachShadow({ mode: 'open' });
 			shadow.innerHTML = `<style>${that.css}</style>${that.template}`;
 

package/src/test/test/testfunction.ts

@@ -0,0 +1,12 @@
+import { defineCE, getCE } from '../../microcomponents.js';
+
+console.log( 'testfunction.ts' );
+
+defineCE(
+    'test-testfunction',
+    function testfunction( a: number, b:number ){
+        return a + b;
+    }
+);
+
+export default getCE( 'test-testfunction' );

package/src/test/test/testmc.ts

@@ -1,12 +1,16 @@
-import { DC } from './../../microcomponents.js';
+import { defineCE, getCE, DC } from '../../microcomponents.js';
 
-export default class testmc extends DC {
-    constructor(target: HTMLElement) {
-        super(target);
-        delete this._mc; // not needed
-    }
+defineCE(
+    'test-testmc',
+    class TestMc extends DC {
+        constructor(target: HTMLElement) {
+            super(target);
+        }
 
-    oneInit() {
-        // console.log('testmc connected to DOM');
+        oneInit() {
+            // console.log('testmc connected to DOM');
+        }
     }
-}
+);
+
+export default getCE( 'test-testmc' );