@twobirds/microcomponents 0.0.82 → 0.0.84

package/{dist/selectors.ts → 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/grandparent.ts

@@ -8,13 +8,21 @@ defineCE(
 			super(target);
 		}
 
-		onConnected() {
-			let that = this;
-
+		onConnected(ev:CustomEvent) {
 			for (let x = 0; x < 5; x++) {
-				that.target.append(new Parent!());
+				this.target.append(new Parent!());
 			}
 		}
+
+		onDisconnected(ev:CustomEvent) {
+		}
+
+		onAdopted(ev:CustomEvent) {
+		}
+
+		onAttributeChanged(ev:CustomEvent) {
+		}
+
 	}
 );
 

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',
@@ -10,22 +16,18 @@ defineCE(
 		constructor(target: HTMLElement) {
 			super(target);
 
-			const that = this;
+			let shadow = (this as DC).target.attachShadow({ mode: 'open' });
+			shadow.innerHTML = `<style>${this.css}</style>${this.template}`;
+            
+			formValues(this, 'data', shadow); // create this.data formdata observable
 
-			delete that._mc; // not needed
-
-			let shadow = (that as DC).target.attachShadow({ mode: 'open' });
-			shadow.innerHTML = `<style>${that.css}</style>${that.template}`;
-
-			formValues(that, 'data', shadow); // create this.data formdata observable
-
-			(that.data as Observable).bind(shadow); // 1 way bind formdata to the form DOM
+			(this.data as Observable).bind(shadow); // 1 way bind formdata to the form DOM
 
             // load and display data
             fetch('./testform.json')
                 .then( res => res.json())
                 .then( data => {
-                    that.data = data;
+                    this.data = data;
                 });
                 
 		}

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' );

package/src/test/test/testsimpleclass.ts

@@ -0,0 +1,15 @@
+import { defineCE, getCE, DC } from '../../microcomponents.js';
+
+defineCE(
+    'test-testsimpleclass',
+    class TestSimpleClass {
+        constructor(target: HTMLElement) {
+        }
+
+        oneInit() {
+            // console.log('testmc connected to DOM');
+        }
+    }
+);
+
+export default getCE( 'test-testsimpleclass' );

package/src/test/test.ts

@@ -1,15 +1,6 @@
-// 'use strict';
-
-/*
-let mc: unknown;
-import('../microcomponents.js').then( res => mc = res );
-const { LooseObject, DC, McEvent, defineCE, getCE, observe, Observable } = mc as any;
-*/
-
 import {
 	LooseObject,
 	DC,
-	McEvent,
 	defineCE,
 	getCE,
 	observe,
@@ -51,15 +42,14 @@ class Translator extends DC {
 		that.target.setAttribute('language', 'en');
 
 		(that.Language as Observable).notify();
-
-		delete that._mc; // cleanup, not needed
 	}
 
-	onAttributeChanged(ev: McEvent) {
-		if (!ev.data.newValue) return;
-		switch (ev.data.name) {
+	onAttributeChanged(ev: CustomEvent) {
+		let detail = ev.detail || {};
+		if (!detail.newValue) return;
+		switch (detail.name) {
 			case 'language':
-				this.Language = ev.data.newValue;
+				this.Language = detail.newValue;
 				break;
 		}
 	}
@@ -96,11 +86,9 @@ defineCE(
 				'translator',
 				new Translator(target, that.#languages, target)
 			);
-
-			delete that._mc; // cleanup, not needed
 		}
 
-		oneInit(ev: McEvent) {
+		oneInit(ev: CustomEvent) {
 			let that = this;
 
 			// state
@@ -113,10 +101,10 @@ defineCE(
 			(that.Dom as Observable).bind(that.target);
 		}
 
-		onClick(ev: McEvent) {
+		onClick(ev: CustomEvent) {
 			const that = this,
 				c = that.Dom.counter++;
-			(ev.data as PointerEvent).stopPropagation();
+			(ev.detail.data as PointerEvent).stopPropagation();
 			(that.target as HTMLElement).classList.remove('clicked');
 			(that.target as HTMLElement).classList.add(
 				that.Dom.counter > 9 ? 'overClicked' : 'clicked'

package/tasks.md

@@ -0,0 +1,36 @@
+## tasks / higher prio:
+
+[.] overhaul autoload to include _mc attribute defined MCs into customElements() repository
+
+[ ] move .trigger() to McBase class / ongoing
+
+[ ] overhaul McEvents, throw out object, implement functional
+
+## tasks / SW debts:
+
+[ ] autoload tutorial
+
+## backlog:
+
+[ ] make skeleton project for TS site w/ ESM import
+
+[ ] test ESM import functionality in VSCode
+
+[ ] make skeleton project for TS site w/ ESM import & webpack build
+
+[ ] test ESM import functionality in VSCode
+
+[ ] make monorepo test page 
+
+## done:
+
+[x] eliminate those pesky "that" constants, check for "const" being "let" variables
+
+[x] test: use customRegistry to carry non-"web components" / check .whenDefined()
+
+[x] HF placeholder handling
+
+[x] make skeleton project for build-less JS site w/ ESM import 
+
+[x] test ESM import functionality in VSCode and modular autoload
+

package/tsconfig.json

@@ -29,8 +29,8 @@
 		// "module": "commonjs",                                /* Specify what module code is generated. */
 		// "rootDir": "./",                                  /* Specify the root folder within your source files. */
 		// "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
-		"baseUrl": "/src",                                      /* Specify the base directory to resolve non-relative module names. */
-		"paths": { "@/": ["/*"] },                       /* Specify a set of entries that re-map imports to additional lookup locations. */
+		//"baseUrl": "/src",                                      /* Specify the base directory to resolve non-relative module names. */
+		"paths": { "@/": ["/src/*"] },                       /* Specify a set of entries that re-map imports to additional lookup locations. */
 		// "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
 		// "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
 		// "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */

package/typedoc.json

@@ -1,5 +1,5 @@
 {
-	"entryPoints": ["src/MC.ts","src/elements.ts","src/observables.ts","src/formValues.ts"],
+	"entryPoints": ["src/MC.ts","src/elements.ts","src/observables.ts","src/formValues.ts" /*,"src/selectors.ts"*/],
 	"out": "./public/typedoc",
 	"readme": "README.md",
 	"name": "Micro Components",

package/webpack.config.js

@@ -77,7 +77,7 @@ module.exports = [
 			minimize: true, // Enable minification
 		},
 	},
-	{
+	/*{
 		entry: './build/selectors.js',
 		mode: 'production',
 		output: {
@@ -114,7 +114,7 @@ module.exports = [
 		optimization: {
 			minimize: true, // Enable minification
 		},
-	},
+	},*/
 	{
 		entry: './build/formValues.js',
 		mode: 'production',

package/dist/McEvent.d.ts

@@ -1,15 +0,0 @@
-interface McEvent {
-    data: any;
-    bubble: string;
-}
-declare class McEvent {
-    #private;
-    constructor(type: string, data?: any, bubble?: string);
-    get type(): string;
-    get stopped(): boolean;
-    get immediateStopped(): boolean;
-    stopPropagation(): void;
-    stopImmediatePropagation(): void;
-}
-export { McEvent };
-//# sourceMappingURL=McEvent.d.ts.map

package/dist/McEvent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"McEvent.d.ts","sourceRoot":"","sources":["../src/McEvent.ts"],"names":[],"mappings":"AAeA,UAAU,OAAO;IAChB,IAAI,EAAE,GAAG,CAAC;IACV,MAAM,EAAE,MAAM,CAAC;CACf;AAED,cAAM,OAAO;;gBAMC,IAAI,EAAE,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,GAAE,MAAY;IAO/D,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,IAAI,gBAAgB,IAAI,OAAO,CAE9B;IAED,eAAe;IAIf,wBAAwB;CAKxB;AAyCD,OAAO,EAAE,OAAO,EAAE,CAAC"}