@twobirds/microcomponents 0.1.16 → 0.1.19

package/dist/MC.ts

@@ -5,308 +5,307 @@ import { LooseObject } from './helpers.js';
 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;
+	let node = target as HTMLMcElement;
 
-    // create the _mc property if necessary
-    if (!node._mc) {
-        node._mc = new (DC as any)(target);
-    }
+	// create the _mc property if necessary
+	if (!node._mc) {
+		node._mc = new (DC as any)(target);
+	}
 
-    const _mc = node._mc;
+	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', '');
-        }
-    }
+	// 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;
+	//console.warn('add() args: target, key, element', arguments, node);
+
+	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);
+	//console.warn('init(): args', ...arguments);
+	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);
+	return '_mc' + eventName[0].toUpperCase() + eventName.substring(1);
 }
 
 /*
 CustomEvent Section...
 */
 function off(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject) {
-    domNode.removeEventListener(getMcEventName(eventName), handler);
+	domNode.removeEventListener(getMcEventName(eventName), handler);
 }
 
 function on(
-    domNode: Node,
-    eventName: string,
-    handler: EventListenerOrEventListenerObject,
-    once: boolean = false
+	domNode: Node,
+	eventName: string,
+	handler: EventListenerOrEventListenerObject,
+	once: boolean = false
 ): EventListenerOrEventListenerObject {
-    domNode.addEventListener(getMcEventName(eventName), handler, { capture: false, once });
-    return handler;
+	domNode.addEventListener(getMcEventName(eventName), handler, { capture: false, once });
+	return handler;
 }
 
 function one(
-    domNode: Node,
-    eventName: string,
-    handler: EventListenerOrEventListenerObject
+	domNode: Node,
+	eventName: string,
+	handler: EventListenerOrEventListenerObject
 ): EventListenerOrEventListenerObject {
-    on(domNode, eventName, handler, true);
-    return handler;
+	on(domNode, eventName, handler, true);
+	return handler;
 }
 
 class BubbleController {
-    stopped = false;
-    constructor() {}
-    stop() {
-        this.stopped = true;
-    }
+	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
+	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);
-    }
+	//console.warn('trigger args', ...arguments);
+
+	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)) {
+		// 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 || {});
+		//console.warn('McBase: this, element, args', target, this, element, arguments);
 
-        autoAttachListeners(element);
+		autoAttachListeners(element);
 
-        init(element as DC); // async lifecycle event
-    }
+		init(element as DC); // async lifecycle event
+	}
 
-    get target(): any {
-        return this._target.deref();
-    }
+	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);
+		//console.warn('DC constructor:', arguments);
+	}
+
+	static add(target: HTMLElement, key: string, element: any = {}): HTMLMcElement {
+		//console.warn('static DC.add() args', arguments);
+		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) {
+		//console.warn('MC.trigger args', ...arguments, this);
+
+		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;
+	}
 }
 
 /*
@@ -316,141 +315,141 @@ 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
-            );
-        });
-    };
+	//@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
+	if (loadingDCs.has(element)) return; // already loading
 
-    loadingDCs.add(element);
+	loadingDCs.add(element);
 
-    //console.log( 'makeLoadScript:', element);
-    const fileName: string = './' + element.split('-').join('/') + '.js';
+	//console.log( 'makeLoadScript:', element);
+	const fileName: string = './' + element.split('-').join('/') + '.js';
 
-    const se: HTMLScriptElement = document.createElement('script');
+	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', '');
+	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);
+	const loadedPromise = customElements.whenDefined(element);
 
-    //@ts-ignore
-    loadedPromise.then(attachDC(element));
+	//@ts-ignore
+	loadedPromise.then(attachDC(element));
 
-    se.addEventListener('load', (ev: Event) => {
-        loadingDCs.delete(element);
+	se.addEventListener('load', (ev: Event) => {
+		loadingDCs.delete(element);
 
-        document.head.querySelector(`script[data-name="${element}"]`)?.remove();
-    });
+		document.head.querySelector(`script[data-name="${element}"]`)?.remove();
+	});
 
-    se.addEventListener('error', (ev: Event) => {
-        console.error('could not load DC code from', fileName);
-    });
+	se.addEventListener('error', (ev: Event) => {
+		console.error('could not load DC code from', fileName);
+	});
 
-    document.head.append(se);
+	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;