@twobirds/microcomponents 0.1.9 → 0.1.10

package/dist/MC.ts

@@ -2,297 +2,311 @@
 
 import { LooseObject } from './helpers.js';
 
-const isBrowser = new Function(
-	'try {return this===window;}catch(e){ return false;}'
-);
+const isBrowser = new Function('try {return this===window;}catch(e){ return false;}');
 
 export interface HTMLMcElement extends HTMLElement {
-	_mc: LooseObject;
+    _mc: LooseObject;
 }
 
 function isDOM(element: { [key: string]: any }) {
-	return element && element instanceof HTMLElement;
+    return element && element instanceof HTMLElement;
 }
 
 // add a microcomponent to a target DOM node
-function add( target: HTMLElement, key: string, element: any = {} ): HTMLMcElement {
-	let node = target as HTMLMcElement;
-
-	// create the _mc property if necessary
-	if (!node._mc) {
-		node._mc = new (DC as any)(target);
-	}
-
-	const _mc = node._mc;
-
-	// add the element with the given property key to the _mc property
-	if (key.length && !_mc[key]) {
-		_mc[key] = element;
-		// add attribute if HTMLElement
-		if (target instanceof HTMLElement && ! target.getAttribute('data-mc') ) {
-			target.setAttribute('data-mc', '');
-		}
-	}
-
-	return node;
+function add(target: HTMLElement, key: string, element: any = {}): HTMLMcElement {
+    let node = target as HTMLMcElement;
+
+    // create the _mc property if necessary
+    if (!node._mc) {
+        node._mc = new (DC as any)(target);
+    }
+
+    const _mc = node._mc;
+
+    // add the element with the given property key to the _mc property
+    if (key.length && !_mc[key]) {
+        _mc[key] = element;
+        // add attribute if HTMLElement
+        if (target instanceof HTMLElement && !target.getAttribute('data-mc')) {
+            target.setAttribute('data-mc', '');
+        }
+    }
+
+    return node;
 }
 
 // remove a micro component from the DOM
 function remove(target: HTMLElement, key: string) {
-	if (!key) return; // silent fail
-
-	const _mc = (target as unknown as HTMLMcElement)?._mc || {};
-
-	// delete the property from the HTMLElement _mc collection
-	if (_mc && _mc[key]) {
-		delete _mc[key];
-	}
-
-	// remove the _mc attribute if the DOM collection is empty
-	if (
-		!Object.keys(_mc).length &&
-		target instanceof HTMLElement &&
-		target.hasAttribute('data-mc')
-	) {
-		target.removeAttribute('data-mc');
-	}
-	return;
+    if (!key) return; // silent fail
+
+    const _mc = (target as unknown as HTMLMcElement)?._mc || {};
+
+    // delete the property from the HTMLElement _mc collection
+    if (_mc && _mc[key]) {
+        delete _mc[key];
+    }
+
+    // remove the _mc attribute if the DOM collection is empty
+    if (
+        !Object.keys(_mc).length &&
+        target instanceof HTMLElement &&
+        target.hasAttribute('data-mc')
+    ) {
+        target.removeAttribute('data-mc');
+    }
+    return;
 }
 
 // run the "init" lifecycle event on the complete _mc structure
 function init(element: DC) {
-	setTimeout(() => {
-		if (element.constructor === DC) return;
-		element.trigger('Init');
-	}, 0);
+    setTimeout(() => {
+        if (element.constructor === DC) return;
+        element.trigger('Init');
+    }, 0);
 }
 
 // 'eventName' => '_mcEventName'
-function getMcEventName( eventName: string ): string {
-	return '_mc' + eventName[0].toUpperCase() + eventName.substring(1);
+function getMcEventName(eventName: string): string {
+    return '_mc' + eventName[0].toUpperCase() + eventName.substring(1);
 }
 
 /*
 CustomEvent Section...
 */
-function off( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject ){
-	domNode.removeEventListener( getMcEventName(eventName), handler );
+function off(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject) {
+    domNode.removeEventListener(getMcEventName(eventName), handler);
 }
 
-function on( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject, once: boolean = false ): EventListenerOrEventListenerObject {
-	domNode.addEventListener( getMcEventName(eventName), handler, { capture: false, once });
-	return handler;
+function on(
+    domNode: Node,
+    eventName: string,
+    handler: EventListenerOrEventListenerObject,
+    once: boolean = false
+): EventListenerOrEventListenerObject {
+    domNode.addEventListener(getMcEventName(eventName), handler, { capture: false, once });
+    return handler;
 }
 
-function one( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject ): EventListenerOrEventListenerObject {
-	on(domNode, eventName, handler, true );
-	return handler;
+function one(
+    domNode: Node,
+    eventName: string,
+    handler: EventListenerOrEventListenerObject
+): EventListenerOrEventListenerObject {
+    on(domNode, eventName, handler, true);
+    return handler;
 }
 
-class BubbleController{	
-	stopped = false;
-	constructor(){
-	}
-	stop(){
-		this.stopped = true;
-	}
+class BubbleController {
+    stopped = false;
+    constructor() {}
+    stop() {
+        this.stopped = true;
+    }
 }
 
 // create and dispatch custom event
-function trigger( 
-	domNode: HTMLElement,
-	event: string,
-	data: any = {},
-	bubble: string = 'l', // direction of bubbling
-	controller?: BubbleController
-){
-	const eventName = /^_mc/.test( event ) ? event : getMcEventName( event ),
-		bubbleController = !!controller ? controller : new BubbleController(),
-		ev = new CustomEvent( eventName, { detail: { data, control: bubbleController }, bubbles: false } );
-
-	if ( bubbleController.stopped ) return;
-
-	if ( /l/.test(bubble) ){
-		domNode.dispatchEvent( ev );
-		ev.stopImmediatePropagation();
-
-		if ( bubbleController.stopped ) return;
-	}
-
-	// bubble if up or down is indicated
-	if( /[ud]/.test( bubble ) ){
-		//console.log( 'bubble', bubble, domNode );
-
-		// add missing 'l', or else no handlers are executed
-		if (bubble.indexOf('l') === -1) {
-			bubble += 'l';
-		}
-
-		setTimeout(
-			() => {
-
-				// bubble up towards document.body
-				if ( bubble.indexOf('u') > -1 ) {
-					let parentMc: HTMLMcElement | null | undefined = domNode.parentElement?.closest('[data-mc]') ;
-					if ( !!parentMc ){
-						parentMc?._mc.trigger( eventName, data, bubble, bubbleController );
-					}
-				}
-
-				// bubble down towards DOM children
-				if (bubble.indexOf('d') > -1) {
-					let childNodes: DC[] | null = ( domNode as HTMLMcElement)._mc.children();
-					if( !!childNodes ){
-						childNodes.forEach( (_mc: DC) => _mc.trigger( eventName, data, bubble ) ); // event multiplex - dont carry bubble controller
-					}
-				}
-			},
-			0 
-		);
-	}
+function trigger(
+    domNode: HTMLElement,
+    event: string,
+    data: any = {},
+    bubble: string = 'l', // direction of bubbling
+    controller?: BubbleController
+) {
+    const eventName = /^_mc/.test(event) ? event : getMcEventName(event),
+        bubbleController = controller ? controller : new BubbleController(),
+        ev = new CustomEvent(eventName, {
+            detail: { data, control: bubbleController },
+            bubbles: false,
+        });
+
+    if (bubbleController.stopped) return;
+
+    if (/l/.test(bubble)) {
+        domNode.dispatchEvent(ev);
+        ev.stopImmediatePropagation();
+
+        if (bubbleController.stopped) return;
+    }
+
+    // bubble if up or down is indicated
+    if (/[ud]/.test(bubble)) {
+        //console.log( 'bubble', bubble, domNode );
+
+        // add missing 'l', or else no handlers are executed
+        if (bubble.indexOf('l') === -1) {
+            bubble += 'l';
+        }
+
+        setTimeout(() => {
+            // bubble up towards document.body
+            if (bubble.indexOf('u') > -1) {
+                let parentMc: HTMLMcElement | null | undefined =
+                    domNode.parentElement?.closest('[data-mc]');
+                if (parentMc) {
+                    parentMc?._mc.trigger(eventName, data, bubble, bubbleController);
+                }
+            }
+
+            // bubble down towards DOM children
+            if (bubble.indexOf('d') > -1) {
+                let childNodes: DC[] | null = (domNode as HTMLMcElement)._mc.children();
+                if (childNodes) {
+                    childNodes.forEach((_mc: DC) => _mc.trigger(eventName, data, bubble)); // event multiplex - dont carry bubble controller
+                }
+            }
+        }, 0);
+    }
 }
 
 function autoAttachListeners(element: MC | DC) {
-	if (!isBrowser() || element.constructor === DC) return;
-
-	const target = element.target;
-
-	if (target instanceof HTMLElement) {
-		let that: LooseObject = element;
-		Object.getOwnPropertyNames(that.constructor.prototype)
-			.filter(
-				(key) =>
-					/^(on[A-Z]|one[A-Z])/.test(key) &&
-					typeof that.constructor.prototype[key] === 'function'
-			)
-			.forEach((key) => {
-				let once = /^one/.test(key),
-					withoutOnOne = key.replace(/^on[e]{0,1}/, ''), // preserves upper/lowercase for non-native events
-					nativeEventName = withoutOnOne.toLowerCase();  // lowercase for native event names
-
-				if ( ('on' + nativeEventName) in target ) { // it is a native HTML event
-					let listener = (ev: Event) => {
-						that[key]( ev );
-					}
-					// console.log( 'AAL: attach native event listener', nativeEventName, 'to', target );
-					target.addEventListener( nativeEventName, listener );
-				} else { // it is a customEvent
-					// console.log( 'AAL: attach custom event listener', '_mc' + withoutOnOne , 'to key', key, 'in', element );
-					let listener = (ev: CustomEvent) => {
-						that[key]( ev );
-					}
-					on( target, withoutOnOne, listener as EventListenerOrEventListenerObject, once );
-				}
-			});
-	}
+    if (!isBrowser() || element.constructor === DC) return;
+
+    const target = element.target;
+
+    if (target instanceof HTMLElement) {
+        let that: LooseObject = element;
+        Object.getOwnPropertyNames(that.constructor.prototype)
+            .filter(
+                (key) =>
+                    /^(on[A-Z]|one[A-Z])/.test(key) &&
+                    typeof that.constructor.prototype[key] === 'function'
+            )
+            .forEach((key) => {
+                let once = /^one/.test(key),
+                    withoutOnOne = key.replace(/^on[e]{0,1}/, ''), // preserves upper/lowercase for non-native events
+                    nativeEventName = withoutOnOne.toLowerCase(); // lowercase for native event names
+
+                if ('on' + nativeEventName in target) {
+                    // it is a native HTML event
+                    let listener = (ev: Event) => {
+                        that[key](ev);
+                    };
+                    // console.log( 'AAL: attach native event listener', nativeEventName, 'to', target );
+                    target.addEventListener(nativeEventName, listener);
+                } else {
+                    // it is a customEvent
+                    // console.log( 'AAL: attach custom event listener', '_mc' + withoutOnOne , 'to key', key, 'in', element );
+                    let listener = (ev: CustomEvent) => {
+                        that[key](ev);
+                    };
+                    on(target, withoutOnOne, listener as EventListenerOrEventListenerObject, once);
+                }
+            });
+    }
 }
 
 function getMcChildNodes(domNode: HTMLElement): DC[] | null {
-	const id = Math.random().toString().replace('.', '');
-	const selector = '[data-mc]:not([temp_id="' + id + '"] [data-mc] [data-mc])';
-	domNode.setAttribute('temp_id', id);
-	const mcArray: unknown[] = 
-		( [ ...domNode.querySelectorAll(selector) ] as HTMLMcElement[])
-			.filter( (e) => !!e._mc )
-			.map( e => e._mc );
-	domNode.removeAttribute('temp_id');
-	return mcArray.length ? mcArray as DC[] : null;
+    const id = Math.random().toString().replace('.', '');
+    const selector = '[data-mc]:not([temp_id="' + id + '"] [data-mc] [data-mc])';
+    domNode.setAttribute('temp_id', id);
+    const mcArray: unknown[] = ([...domNode.querySelectorAll(selector)] as HTMLMcElement[])
+        .filter((e) => !!e._mc)
+        .map((e) => e._mc);
+    domNode.removeAttribute('temp_id');
+    return mcArray.length ? (mcArray as DC[]) : null;
 }
 
 class McBase {
-	private _target: WeakRef<any>; // avoid circular reference
+    private _target: WeakRef<any>; // avoid circular reference
 
-	constructor(target?: { [key: string]: any } ) {
-		let element = this as unknown as MC | DC;
+    constructor(target?: { [key: string]: any }) {
+        let element = this as unknown as MC | DC;
 
-		this._target = new WeakRef(target || {});
+        this._target = new WeakRef(target || {});
 
-		autoAttachListeners(element);
-		
-		init(element as DC); // async lifecycle event
-	}
+        autoAttachListeners(element);
 
-	get target(): any {
-		return this._target.deref();
-	}
+        init(element as DC); // async lifecycle event
+    }
 
+    get target(): any {
+        return this._target.deref();
+    }
 }
 
 class MC extends McBase {
-	constructor(target?: any) {
-		super(target);
-	}
+    constructor(target?: any) {
+        super(target);
+    }
 }
 
 class DC extends McBase {
-	constructor(target: HTMLElement) {
-		super(target);
-	}
-
-	static add( target: HTMLElement, key: string, element: any = {} ): HTMLMcElement {
-		return add( target, key, element );
-	};
-
-	static remove(target: HTMLElement, key: string) {
-		remove(target, key);
-	}
-
-	/* event handling */
-	off( eventName: string, handler: EventListenerOrEventListenerObject ) {
-		off( this.target, eventName, handler );
-	}
-
-	on( eventName: string, handler: EventListenerOrEventListenerObject ): EventListenerOrEventListenerObject {
-		return on( this.target, eventName, handler );
-	}
-
-	one( eventName: string, handler: EventListenerOrEventListenerObject ): EventListenerOrEventListenerObject {
-		return one( this.target, eventName, handler );
-	}
-
-	trigger( eventName: string, data: any = {}, bubble: string = 'l', controller?: BubbleController) {
-		trigger( this.target, eventName, data, bubble, controller);
-	}
-
-	/* DOM traversal */
-	ancestors(): DC[] | null {
-		let 
-			currentNode: HTMLElement | null = (this as DC)?.target as HTMLMcElement,
-			result: DC[] = [];
-
-		if (!isDOM( currentNode )) return [];
-
-		while ( currentNode = (currentNode.closest('[data-mc]') ) ){
-			if ( (currentNode as HTMLMcElement)?._mc ){
-				result.push( (currentNode as HTMLMcElement)?._mc as DC );
-			}
-		}
-
-		return result.length ? result : null;
-	}
-
-	closest(): DC | null {
-		let 
-			target: HTMLElement = (this as DC).target;
-		if (!isDOM(target)) return null;
-		return (target.closest('[data-mc]') as HTMLMcElement)?._mc as DC || null;
-	}
-
-	children(): DC[] | null {
-		let target: any = (this as any)?.target;
-		if (!isDOM(target)) return null;
-		return getMcChildNodes(target);
-	}
-
-	descendants(): DC[] | null {
-		const target: any = (this as DC)?.target;
-		if (!isDOM(target)) return [];
-		const mcArray: unknown[] = 
-			( [ ...target.querySelectorAll( '[data-mc]' ) ] as HTMLMcElement[])
-				.filter( (e) => !!e._mc )
-				.map( e => e._mc );
-		return mcArray.length ? mcArray as DC[] : null;
-	}
+    constructor(target: HTMLElement) {
+        super(target);
+    }
+
+    static add(target: HTMLElement, key: string, element: any = {}): HTMLMcElement {
+        return add(target, key, element);
+    }
+
+    static remove(target: HTMLElement, key: string) {
+        remove(target, key);
+    }
+
+    /* event handling */
+    off(eventName: string, handler: EventListenerOrEventListenerObject) {
+        off(this.target, eventName, handler);
+    }
+
+    on(
+        eventName: string,
+        handler: EventListenerOrEventListenerObject
+    ): EventListenerOrEventListenerObject {
+        return on(this.target, eventName, handler);
+    }
+
+    one(
+        eventName: string,
+        handler: EventListenerOrEventListenerObject
+    ): EventListenerOrEventListenerObject {
+        return one(this.target, eventName, handler);
+    }
+
+    trigger(
+        eventName: string,
+        data: any = {},
+        bubble: string = 'l',
+        controller?: BubbleController
+    ) {
+        trigger(this.target, eventName, data, bubble, controller);
+    }
+
+    /* DOM traversal */
+    ancestors(): DC[] | null {
+        let currentNode: HTMLElement | null = (this as DC)?.target as HTMLMcElement,
+            result: DC[] = [];
+
+        if (!isDOM(currentNode)) return [];
+
+        while ((currentNode = currentNode.closest('[data-mc]'))) {
+            if ((currentNode as HTMLMcElement)?._mc) {
+                result.push((currentNode as HTMLMcElement)?._mc as DC);
+            }
+        }
+
+        return result.length ? result : null;
+    }
+
+    closest(): DC | null {
+        let target: HTMLElement = (this as DC).target;
+        if (!isDOM(target)) return null;
+        return ((target.closest('[data-mc]') as HTMLMcElement)?._mc as DC) || null;
+    }
+
+    children(): DC[] | null {
+        let target: any = (this as any)?.target;
+        if (!isDOM(target)) return null;
+        return getMcChildNodes(target);
+    }
+
+    descendants(): DC[] | null {
+        const target: any = (this as DC)?.target;
+        if (!isDOM(target)) return [];
+        const mcArray: unknown[] = ([...target.querySelectorAll('[data-mc]')] as HTMLMcElement[])
+            .filter((e) => !!e._mc)
+            .map((e) => e._mc);
+        return mcArray.length ? (mcArray as DC[]) : null;
+    }
 }
 
 /*
@@ -302,143 +316,143 @@ Autoload Section...
 const loadingDCs = new Set<string>();
 
 function attachDC(element: string): Function {
+    //@ts-ignore
+    return () => {
+        const elements: HTMLElement[] = Array.from(
+            document.querySelectorAll(`[data-mc*="${element}"]`)
+        ).filter((element) => element instanceof HTMLElement);
+
+        if (elements.length === 0) return;
+
+        //console.log( 'loadedPromise elements', elements );
+
+        const Klass = customElements.get(element);
+
+        elements.forEach((node: HTMLElement) => {
+            try {
+                //console.log( 'add', klass!.name, 'to', node );
+                DC.add(node, Klass!.name, new Klass!(node));
+            } catch (error) {
+                if ((Klass as LooseObject)['create']) {
+                    let element: HTMLMcElement = (Klass as LooseObject).create(node);
+                    element.setAttribute('data-mc', node.getAttribute('data-mc')!);
+                    node.replaceWith(element);
+                    node = element;
+                } else {
+                    throw `Class ${(Klass as LooseObject).name} doesn't have a callable constructor AND class doesn't have a static .create() method.`;
+                }
+            }
+
+            //@ts-ignore
+            const new_mc = node
+                .getAttribute('data-mc')
+                .split(' ')
+                .filter((name) => name !== element && name !== '')
+                .join(' ')
+                .trim();
+
+            //@ts-ignore
+            node.setAttribute(
+                'data-mc',
+                //@ts-ignore
+                new_mc
+            );
+        });
+    };
+}
+
+function makeLoadScript(element: string) {
+    if (loadingDCs.has(element)) return; // already loading
+
+    loadingDCs.add(element);
+
+    //console.log( 'makeLoadScript:', element);
+    const fileName: string = './' + element.split('-').join('/') + '.js';
+
+    const se: HTMLScriptElement = document.createElement('script');
+
+    se.setAttribute('src', fileName);
+    se.setAttribute('blocking', 'render');
+    se.async = true;
+    se.setAttribute('type', 'module');
+    se.setAttribute('data-name', element);
+    se.setAttribute('loading', '');
+
+    const loadedPromise = customElements.whenDefined(element);
 
-	//@ts-ignore
-	return () => {
-		const elements: HTMLElement[] = Array
-					.from(document.querySelectorAll(`[data-mc*="${element}"]`))
-					.filter( element => element instanceof HTMLElement );
-
-		if ( elements.length === 0 ) return;
-
-		//console.log( 'loadedPromise elements', elements );
-
-		const Klass = customElements.get( element );
-
-		elements.forEach((node: HTMLElement) => {
-			try{
-				//console.log( 'add', klass!.name, 'to', node );
-				DC.add(node, Klass!.name, new Klass!(node));
-			} catch(error){
-				if ( !!(Klass as LooseObject)['create'] ){
-					let element: HTMLMcElement = (Klass as LooseObject).create( node ); 
-					element.setAttribute('data-mc', node.getAttribute('data-mc')! );
-					node.replaceWith( element );
-					node = element;
-				} else {
-					throw( `Class ${(Klass as LooseObject).name} doesn't have a callable constructor AND class doesn't have a static .create() method.` );
-				}
-			}
-
-			//@ts-ignore
-			const new_mc = node
-				.getAttribute( 'data-mc' )
-				.split(' ')
-				.filter( (name) => name !== element && name !== '' )
-				.join(' ')
-				.trim();
-
-			//@ts-ignore
-			node.setAttribute( 
-				'data-mc',
-				//@ts-ignore
-				new_mc
-			)
-		});
-	};
-};
-
-function makeLoadScript( element: string ) {
-
-	if ( loadingDCs.has( element ) ) return; // already loading
-
-	loadingDCs.add( element );
-
-	//console.log( 'makeLoadScript:', element);
-	const fileName: string = './' + element.split('-').join('/')+'.js';	
-
-	const se: HTMLScriptElement = document.createElement('script');
-
-	se.setAttribute('src', fileName);
-	se.setAttribute('blocking', 'render');
-	se.async = true;
-	se.setAttribute('type', 'module');
-	se.setAttribute( 'data-name', element);
-	se.setAttribute( 'loading', '');
-
-	const loadedPromise = customElements.whenDefined( element );
-
-	//@ts-ignore
-	loadedPromise.then( attachDC( element ) );
-
-	se.addEventListener( 'load', (ev: Event) => {
-		loadingDCs.delete( element );
-
-		document.head.querySelector(`script[data-name="${element}"]`)?.remove();
-	});
-
-	se.addEventListener( 'error', (ev: Event) => {
-		console.error('could not load DC code from', fileName);
-	});
-
-	document.head.append(se);
+    //@ts-ignore
+    loadedPromise.then(attachDC(element));
+
+    se.addEventListener('load', (ev: Event) => {
+        loadingDCs.delete(element);
+
+        document.head.querySelector(`script[data-name="${element}"]`)?.remove();
+    });
+
+    se.addEventListener('error', (ev: Event) => {
+        console.error('could not load DC code from', fileName);
+    });
+
+    document.head.append(se);
 }
 
 function loadUndefinedMCs() {
-
-	// load unresolved custom elements
-	[ ...document.querySelectorAll(':not(:defined)') ]
-		.filter( (element) => !!element 
-			&& !customElements.get(element.tagName.toLowerCase()) // not in CustomElementsRegistry
-			&& !loadingDCs.has(element.tagName.toLowerCase()) // not in loading list
-		)
-		.forEach((el) => {
-			//console.log( 'detected CE', el.tagName.toLowerCase() );
-			makeLoadScript( el.tagName.toLowerCase() ); // will automatically be instanciated
-		});
-
-	// if defined in _mc attribute: instanciate DCs, load if necessary
-	[ ...document.querySelectorAll('[data-mc]:not([data-mc=""]') ]
-		.filter( (element) => !!element )
-		.forEach((el) => {
-			const _mc = el.getAttribute('data-mc')?.split(' ').filter( name => name !== '' );
-			_mc?.forEach( element => {
-				//console.log( 'detected DC', dc );
-				const isDefined = customElements.get(element);
-				if ( !loadingDCs.has(element) && !isDefined ) {
-					makeLoadScript( element );
-				} else if ( isDefined ) {
-					attachDC(element)();
-				}
-			});
-		});
+    // load unresolved custom elements
+    [...document.querySelectorAll(':not(:defined)')]
+        .filter(
+            (element) =>
+                !!element &&
+                !customElements.get(element.tagName.toLowerCase()) && // not in CustomElementsRegistry
+                !loadingDCs.has(element.tagName.toLowerCase()) // not in loading list
+        )
+        .forEach((el) => {
+            //console.log( 'detected CE', el.tagName.toLowerCase() );
+            makeLoadScript(el.tagName.toLowerCase()); // will automatically be instanciated
+        });
+
+    // if defined in _mc attribute: instanciate DCs, load if necessary
+    [...document.querySelectorAll('[data-mc]:not([data-mc=""]')]
+        .filter((element) => !!element)
+        .forEach((el) => {
+            const _mc = el
+                .getAttribute('data-mc')
+                ?.split(' ')
+                .filter((name) => name !== '');
+            _mc?.forEach((element) => {
+                //console.log( 'detected DC', dc );
+                const isDefined = customElements.get(element);
+                if (!loadingDCs.has(element) && !isDefined) {
+                    makeLoadScript(element);
+                } else if (isDefined) {
+                    attachDC(element)();
+                }
+            });
+        });
 }
 
 let autoloadEnabled: boolean = false;
 let observer: MutationObserver | null = null;
 
 function autoload(enable: boolean = true): boolean {
-	
-	if (!enable) {
-		observer?.disconnect();
-		observer = null;
-		return autoloadEnabled;
-	}
+    if (!enable) {
+        observer?.disconnect();
+        observer = null;
+        return autoloadEnabled;
+    }
 
-	autoloadEnabled = enable;
-	observer = new MutationObserver(loadUndefinedMCs);
+    autoloadEnabled = enable;
+    observer = new MutationObserver(loadUndefinedMCs);
 
-	setTimeout(() => {
-		observer!.observe(document.body, { childList: true, subtree: true });
-		loadUndefinedMCs();
-	}, 5);
+    setTimeout(() => {
+        observer!.observe(document.body, { childList: true, subtree: true });
+        loadUndefinedMCs();
+    }, 5);
 
-	(window as LooseObject).autoload = (window as LooseObject).autoload || autoload;
+    (window as LooseObject).autoload = (window as LooseObject).autoload || autoload;
 
-	return autoloadEnabled;
+    return autoloadEnabled;
 }
 
 (autoload as LooseObject).state = loadingDCs;
 
 export { McBase, MC, DC, autoload, on, one, off, trigger };
-