@twobirds/microcomponents 0.0.82 → 0.0.83

package/dist/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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@twobirds/microcomponents",
-	"version": "0.0.82",
+	"version": "0.0.83",
 	"description": "Micro Components Organization Class",
 	"main": "./dist/microcomponents.ts",
 	"types": "./dist/microcomponents.d.ts",
@@ -9,10 +9,11 @@
 		"typedoc": "typedoc",
 		"webpack": "webpack",
 		"clean": "rm -rf build/*; rm -rf dist/*; rm -rf public/*;",
-		"prep": "cp src/* build || true;  mkdir public || true;",
-		"copyToDist1": "cp -R assets/* public || true; cp dist/*.js public; cp -R build/* public; cp build/* public/test; cp build/*.js dist; cp public/microcomponents.min.js public/test; mv public/test.* public/test;",
-		"copyToDist2": "mkdir public/src || true; cp -R src/*.ts public/src || true; cp -R assets/* public || true; cp -R build/*.ts* dist; cp *.svg dist; cp *.svg public/fiddle; cp dist/MicroComponents.svg public; cp public/MicroComponents.svg public/test; npm run typedoc;",
-		"build": "npm run clean; npm run prep; tsc; npm run webpack; npm run copyToDist1; npm run copyToDist2;"
+		"prep": "cp -R src/* build || true;  mkdir public || true; npm run typedoc;",
+		"copyToDist": "cp build/*.js dist; cp public/microcomponents.min.js public/test; cp -R build/*.ts* dist; cp *.svg dist;",
+		"copyToPublic1": "cp -R assets/* public || true; cp dist/*.* public; cp dist/*.* public/test; mkdir public/src || true; cp -R build/* public/src || true; cp -R build/* public || true;",
+		"copyToPublic2": "cp -R build/test/* public/test; cp dist/MicroComponents.svg public; cp public/MicroComponents.svg public/test;",
+		"build": "npm run clean; npm run prep; tsc; npm run webpack; npm run copyToDist; npm run copyToPublic1; npm run copyToPublic2;"
 	},
 	"author": "",
 	"license": "ISC",

package/public/MC.d.ts

@@ -7,20 +7,20 @@ declare function addListener(domNode: Node, eventName: string, handler: EventLis
 declare function removeListener(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject | null): void;
 declare function trigger(target: HTMLElement, ev: McEvent | string, data?: any, bubble?: string): void;
 declare class McBase {
-    #private;
+    private _target;
+    private __mc;
     constructor(target?: {
         [key: string]: any;
     }, debug?: boolean);
     get target(): any;
+    get _mc(): any;
 }
 declare class MC extends McBase {
-    _mc?: LooseObject;
     constructor(target?: any);
     static trigger: typeof trigger;
     trigger(ev: McEvent | string, data?: any, bubble?: string): this | undefined;
 }
 declare class DC extends McBase {
-    _mc?: LooseObject;
     constructor(target: HTMLElement, debug?: boolean);
     static add: Function;
     static remove: Function;

package/public/MC.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["../src/MC.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAevC,MAAM,WAAW,aAAc,SAAQ,WAAW;IACjD,GAAG,EAAE,WAAW,CAAC;CACjB;AA8CD,iBAAS,WAAW,CACnB,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GAAG,IAAI,EAClD,OAAO,GAAE,OAAe,EACxB,IAAI,GAAE,OAAe,QAarB;AAED,iBAAS,cAAc,CACtB,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GAAG,IAAI,QAGlD;AAmDD,iBAAS,OAAO,CACf,MAAM,EAAE,WAAW,EACnB,EAAE,EAAE,OAAO,GAAG,MAAM,EACpB,IAAI,GAAE,GAAQ,EACd,MAAM,GAAE,MAAY,QAwBpB;AAiGD,cAAM,MAAM;;gBAGC,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,KAAK,GAAE,OAAe;IAWnE,IAAI,MAAM,IAAI,GAAG,CAEhB;CACD;AAED,cAAM,EAAG,SAAQ,MAAM;IACtB,GAAG,CAAC,EAAE,WAAW,CAAM;gBAEX,MAAM,CAAC,EAAE,GAAG;IAIxB,MAAM,CAAC,OAAO,iBAAW;IAEzB,OAAO,CAAC,EAAE,EAAE,OAAO,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,GAAE,MAAY;CAmElE;AAED,cAAM,EAAG,SAAQ,MAAM;IACtB,GAAG,CAAC,EAAE,WAAW,CAAM;gBAEX,MAAM,EAAE,WAAW,EAAE,KAAK,GAAE,OAAe;IAIvD,MAAM,CAAC,GAAG,EAAE,QAAQ,CAAO;IAC3B,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAU;IACjC,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAW;IAEnC,OAAO,CAAC,EAAE,EAAE,OAAO,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,CAAC,EAAE,MAAM;IAI7D,MAAM,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMlC,SAAS,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMrC,QAAQ,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAYpC,WAAW,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;CAMvC;AA6KD,iBAAS,QAAQ,CAAC,MAAM,GAAE,OAAc,GAAG,OAAO,CAmBjD;AAID,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["../src/MC.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAevC,MAAM,WAAW,aAAc,SAAQ,WAAW;IACjD,GAAG,EAAE,WAAW,CAAC;CACjB;AA8CD,iBAAS,WAAW,CACnB,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GAAG,IAAI,EAClD,OAAO,GAAE,OAAe,EACxB,IAAI,GAAE,OAAe,QAarB;AAED,iBAAS,cAAc,CACtB,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GAAG,IAAI,QAGlD;AAmDD,iBAAS,OAAO,CACf,MAAM,EAAE,WAAW,EACnB,EAAE,EAAE,OAAO,GAAG,MAAM,EACpB,IAAI,GAAE,GAAQ,EACd,MAAM,GAAE,MAAY,QAwBpB;AAiGD,cAAM,MAAM;IACX,OAAO,CAAC,OAAO,CAAe;IAC9B,OAAO,CAAC,IAAI,CAAmB;gBAEnB,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,KAAK,GAAE,OAAe;IAWnE,IAAI,MAAM,IAAI,GAAG,CAEhB;IAED,IAAI,GAAG,IAAI,GAAG,CAEb;CACD;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,MAAM,CAAC,EAAE,GAAG;IAIxB,MAAM,CAAC,OAAO,iBAAW;IAEzB,OAAO,CAAC,EAAE,EAAE,OAAO,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,GAAE,MAAY;CAmElE;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,MAAM,EAAE,WAAW,EAAE,KAAK,GAAE,OAAe;IAIvD,MAAM,CAAC,GAAG,EAAE,QAAQ,CAAO;IAC3B,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAU;IACjC,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAW;IAEnC,OAAO,CAAC,EAAE,EAAE,OAAO,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,CAAC,EAAE,MAAM;IAI7D,MAAM,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMlC,SAAS,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMrC,QAAQ,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAYpC,WAAW,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;CAMvC;AAgGD,iBAAS,QAAQ,CAAC,MAAM,GAAE,OAAc,GAAG,OAAO,CAmBjD;AAID,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/public/MC.js

@@ -166,19 +166,22 @@ function bubbleEvent(target, ev) {
     }
 }
 class McBase {
-    #target;
+    _target;
+    __mc = {};
     constructor(target, debug = false) {
         let that = this, element = that;
-        this.#target = new WeakRef(target || {});
+        this._target = new WeakRef(target || {});
         init(element);
         autoAttachListeners(element);
     }
     get target() {
-        return this.#target.deref();
+        return this._target.deref();
+    }
+    get _mc() {
+        return this.__mc;
     }
 }
 class MC extends McBase {
-    _mc = {};
     constructor(target) {
         super(target);
     }
@@ -225,7 +228,6 @@ class MC extends McBase {
     }
 }
 class DC extends McBase {
-    _mc = {};
     constructor(target, debug = false) {
         super(target);
     }
@@ -267,93 +269,60 @@ class DC extends McBase {
         return getMicroComponents([...myDomElements], search);
     }
 }
-const CEs = new Map();
-const MCs = new Map();
+const loadingMCs = new Set();
 function makeLoadScript(element) {
+    if (loadingMCs.has(element))
+        return;
+    loadingMCs.add(element);
     const fileName = './' + element.split('-').join('/') + '.js';
     const se = document.createElement('script');
     se.setAttribute('src', fileName);
     se.setAttribute('blocking', 'render');
     se.async = true;
     se.setAttribute('type', 'module');
-    se.setAttribute('name', element);
+    se.setAttribute('data-name', element);
     se.setAttribute('loading', '');
+    const loadedPromise = customElements.whenDefined(element);
+    loadedPromise.then(() => {
+        const elements = Array
+            .from(document.querySelectorAll(`[_mc*="${element}"]`))
+            .filter(element => element instanceof HTMLElement);
+        if (elements.length === 0)
+            return;
+        const klass = customElements.get(element);
+        elements.forEach((node) => {
+            DC.add(node, klass.name, new klass(node));
+            const new_mc = node
+                .getAttribute('_mc')
+                .split(' ')
+                .filter((name) => name !== element && name !== '')
+                .join(' ');
+            node.setAttribute('_mc', new_mc);
+        });
+        document.head.querySelector('script[data-name="${elementName}]"')?.remove();
+    });
     addListener(se, 'load', (ev) => {
-        se.removeAttribute('loading');
-        se.setAttribute('loaded', '');
+        loadingMCs.delete(element);
     });
     addListener(se, 'error', (ev) => {
-        console.error('could not load Custom Element code from', fileName);
+        console.error('could not load MC code from', fileName);
     });
-    return se;
+    document.head.append(se);
 }
-function onLoadCallback(script) {
-    setTimeout(function () {
-        const importFileName = script.getAttribute('src');
-        const elementName = script.getAttribute('name');
-        const se = document.createElement('script');
-        se.async = true;
-        se.setAttribute('type', 'module');
-        const code = `
-
-			import _ from "${importFileName}";
-			import { DC } from "./microcomponents.js";
-
-			const elements = Array.from(document.querySelectorAll('[_mc*="${elementName}"]')).filter( element => element instanceof HTMLElement );
-
-			elements.forEach((element) => {
-				// add class to MCs repository
-				autoload.state.MCs.set( '${elementName}', _ );
-				// add instance to HTMLElement 
-				DC.add(element, _.name, new _(element));
-				// remove instance name from elements "_mc" attribute
-				element.setAttribute('_mc', element.getAttribute('_mc').replace('${elementName}', '').replace( /\w\w/g, ' ').trim()); 
-			});
-
-			setTimeout( () => {
-				document.body.querySelector('script[name="${elementName}]"')?.remove();
-			},0);
-
-		`;
-        se.innerHTML = code;
-        document.body.append(se);
-    }, 0);
-}
-function loadUndefinedMicroComponents() {
+function loadUndefinedMCs() {
     [...document.querySelectorAll(':not(:defined)')]
         .filter((element) => !!element
         && !customElements.get(element.tagName.toLowerCase())
-        && !CEs.has(element.tagName.toLowerCase()))
+        && !loadingMCs.has(element.tagName.toLowerCase()))
         .forEach((el) => {
-        const elementName = el.tagName.toLowerCase(), fileName = './' + elementName.split('-').join('/') + '.js';
-        const se = makeLoadScript(elementName);
-        addListener(se, 'load', () => {
-            CEs.set(elementName, customElements.get(el.tagName.toLowerCase()));
-        });
-        CEs.set(elementName, 'loading');
-        document.head.append(se);
+        makeLoadScript(el.tagName.toLowerCase());
     });
     [...document.querySelectorAll('[_mc]:not([_mc=""]')]
         .filter((element) => !!element)
         .forEach((el) => {
-        const elements = el.getAttribute('_mc')?.split(' ').filter(m => !!m) || [];
-        const elementsToBeLoaded = elements.filter(m => !MCs.has(m));
-        elementsToBeLoaded?.forEach(elementName => {
-            const se = makeLoadScript(elementName);
-            addListener(se, 'load', () => onLoadCallback(document.head.querySelector(`script[name="${elementName}"]`)));
-            MCs.set(elementName, 'loading');
-            document.head.append(se);
-        });
-        const elementsAlreadyLoaded = elements.filter(m => MCs.has(m) && !MCs.get(m).length);
-        elementsAlreadyLoaded?.forEach(elementName => {
-            setTimeout(() => {
-                DC.add(el, elementName, new (autoload.state.MCs.get(elementName))(el));
-                const newAttribute = el.getAttribute('_mc')
-                    .replace('${elementName}', '')
-                    .replace(/\w\w/g, ' ')
-                    .trim() || '_mc';
-                el.setAttribute('_mc');
-            }, 5);
+        const _mc = el.getAttribute('_mc')?.split(' ').filter(name => name !== '');
+        _mc?.forEach(dc => {
+            makeLoadScript(dc);
         });
     });
 }
@@ -366,14 +335,14 @@ function autoload(enable = true) {
         return autoloadEnabled;
     }
     autoloadEnabled = enable;
-    observer = new MutationObserver(loadUndefinedMicroComponents);
+    observer = new MutationObserver(loadUndefinedMCs);
     setTimeout(() => {
         observer.observe(document.body, { childList: true, subtree: true });
-        loadUndefinedMicroComponents();
+        loadUndefinedMCs();
     }, 5);
     window.autoload = window.autoload || autoload;
     return autoloadEnabled;
 }
-autoload.state = { CEs, MCs };
+autoload.state = { loadingMCs };
 export { addListener, removeListener, McBase, MC, DC, McEvent, autoload };
 //# sourceMappingURL=MC.js.map