@twobirds/microcomponents 0.1.19 → 0.1.20

package/dist/MC.d.ts

@@ -0,0 +1,39 @@
+import { LooseObject } from './helpers.js';
+export interface HTMLMcElement extends HTMLElement {
+    _mc: LooseObject;
+}
+declare function off(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject): void;
+declare function on(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject, once?: boolean): EventListenerOrEventListenerObject;
+declare function one(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject): EventListenerOrEventListenerObject;
+declare class BubbleController {
+    stopped: boolean;
+    constructor();
+    stop(): void;
+}
+declare function trigger(domNode: HTMLElement, event: string, data?: any, bubble?: string, controller?: BubbleController): void;
+declare class McBase {
+    private _target;
+    constructor(target?: {
+        [key: string]: any;
+    });
+    get target(): any;
+}
+declare class MC extends McBase {
+    constructor(target?: any);
+}
+declare class DC extends McBase {
+    constructor(target: HTMLElement);
+    static add(target: HTMLElement, key: string, element?: any): HTMLMcElement;
+    static remove(target: HTMLElement, key: string): void;
+    off(eventName: string, handler: EventListenerOrEventListenerObject): void;
+    on(eventName: string, handler: EventListenerOrEventListenerObject): EventListenerOrEventListenerObject;
+    one(eventName: string, handler: EventListenerOrEventListenerObject): EventListenerOrEventListenerObject;
+    trigger(eventName: string, data?: any, bubble?: string, controller?: BubbleController): void;
+    ancestors(): DC[] | null;
+    closest(): DC | null;
+    children(): DC[] | null;
+    descendants(): DC[] | null;
+}
+declare function autoload(enable?: boolean): boolean;
+export { McBase, MC, DC, autoload, on, one, off, trigger };
+//# sourceMappingURL=MC.d.ts.map

package/dist/MC.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["MC.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAI3C,MAAM,WAAW,aAAc,SAAQ,WAAW;IACjD,GAAG,EAAE,WAAW,CAAC;CACjB;AAkED,iBAAS,GAAG,CAAC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,QAEzF;AAED,iBAAS,EAAE,CACV,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,EAC3C,IAAI,GAAE,OAAe,GACnB,kCAAkC,CAGpC;AAED,iBAAS,GAAG,CACX,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GACzC,kCAAkC,CAGpC;AAED,cAAM,gBAAgB;IACrB,OAAO,UAAS;;IAEhB,IAAI;CAGJ;AAGD,iBAAS,OAAO,CACf,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,MAAM,EACb,IAAI,GAAE,GAAQ,EACd,MAAM,GAAE,MAAY,EACpB,UAAU,CAAC,EAAE,gBAAgB,QA8C7B;AAiDD,cAAM,MAAM;IACX,OAAO,CAAC,OAAO,CAAe;gBAElB,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE;IAY3C,IAAI,MAAM,IAAI,GAAG,CAEhB;CACD;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,MAAM,CAAC,EAAE,GAAG;CAGxB;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,MAAM,EAAE,WAAW;IAK/B,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE,GAAQ,GAAG,aAAa;IAK9E,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM;IAK9C,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAIlE,EAAE,CACD,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GACzC,kCAAkC;IAIrC,GAAG,CACF,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GACzC,kCAAkC;IAIrC,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,GAAE,MAAY,EAAE,UAAU,CAAC,EAAE,gBAAgB;IAO9F,SAAS,IAAI,EAAE,EAAE,GAAG,IAAI;IAexB,OAAO,IAAI,EAAE,GAAG,IAAI;IAMpB,QAAQ,IAAI,EAAE,EAAE,GAAG,IAAI;IAMvB,WAAW,IAAI,EAAE,EAAE,GAAG,IAAI;CAQ1B;AA8HD,iBAAS,QAAQ,CAAC,MAAM,GAAE,OAAc,GAAG,OAAO,CAkBjD;AAID,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC"}

package/dist/MC.js

@@ -0,0 +1,299 @@
+'use strict';
+const isBrowser = new Function('try {return this===window;}catch(e){ return false;}');
+function isDOM(element) {
+    return element && element instanceof HTMLElement;
+}
+function add(target, key, element = {}) {
+    let node = target;
+    if (!node._mc) {
+        node._mc = new DC(target);
+    }
+    const _mc = node._mc;
+    if (key.length && !_mc[key]) {
+        _mc[key] = element;
+        if (target instanceof HTMLElement && !target.getAttribute('data-mc')) {
+            target.setAttribute('data-mc', '');
+        }
+    }
+    return node;
+}
+function remove(target, key) {
+    if (!key)
+        return;
+    const _mc = target?._mc || {};
+    if (_mc && _mc[key]) {
+        delete _mc[key];
+    }
+    if (!Object.keys(_mc).length && target instanceof HTMLElement && target.hasAttribute('data-mc')) {
+        target.removeAttribute('data-mc');
+    }
+    return;
+}
+function init(element) {
+    setTimeout(() => {
+        if (element.constructor === DC)
+            return;
+        element.trigger('Init');
+    }, 0);
+}
+function getMcEventName(eventName) {
+    return '_mc' + eventName[0].toUpperCase() + eventName.substring(1);
+}
+function off(domNode, eventName, handler) {
+    domNode.removeEventListener(getMcEventName(eventName), handler);
+}
+function on(domNode, eventName, handler, once = false) {
+    domNode.addEventListener(getMcEventName(eventName), handler, { capture: false, once });
+    return handler;
+}
+function one(domNode, eventName, handler) {
+    on(domNode, eventName, handler, true);
+    return handler;
+}
+class BubbleController {
+    stopped = false;
+    constructor() { }
+    stop() {
+        this.stopped = true;
+    }
+}
+function trigger(domNode, event, data = {}, bubble = 'l', controller) {
+    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;
+    }
+    if (/[ud]/.test(bubble)) {
+        if (bubble.indexOf('l') === -1) {
+            bubble += 'l';
+        }
+        setTimeout(() => {
+            if (bubble.indexOf('u') > -1) {
+                let parentMc = domNode.parentElement?.closest('[data-mc]');
+                if (parentMc) {
+                    parentMc?._mc.trigger(eventName, data, bubble, bubbleController);
+                }
+            }
+            if (bubble.indexOf('d') > -1) {
+                let childNodes = domNode._mc.children();
+                if (childNodes) {
+                    childNodes.forEach((_mc) => _mc.trigger(eventName, data, bubble));
+                }
+            }
+        }, 0);
+    }
+}
+function autoAttachListeners(element) {
+    if (!isBrowser() || element.constructor === DC)
+        return;
+    const target = element.target;
+    if (target instanceof HTMLElement) {
+        let that = 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}/, ''), nativeEventName = withoutOnOne.toLowerCase();
+            if ('on' + nativeEventName in target) {
+                let listener = (ev) => {
+                    that[key](ev);
+                };
+                target.addEventListener(nativeEventName, listener);
+            }
+            else {
+                let listener = (ev) => {
+                    that[key](ev);
+                };
+                on(target, withoutOnOne, listener, once);
+            }
+        });
+    }
+}
+function getMcChildNodes(domNode) {
+    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 = [...domNode.querySelectorAll(selector)]
+        .filter((e) => !!e._mc)
+        .map((e) => e._mc);
+    domNode.removeAttribute('temp_id');
+    return mcArray.length ? mcArray : null;
+}
+class McBase {
+    _target;
+    constructor(target) {
+        let element = this;
+        this._target = new WeakRef(target || {});
+        autoAttachListeners(element);
+        init(element);
+    }
+    get target() {
+        return this._target.deref();
+    }
+}
+class MC extends McBase {
+    constructor(target) {
+        super(target);
+    }
+}
+class DC extends McBase {
+    constructor(target) {
+        super(target);
+    }
+    static add(target, key, element = {}) {
+        return add(target, key, element);
+    }
+    static remove(target, key) {
+        remove(target, key);
+    }
+    off(eventName, handler) {
+        off(this.target, eventName, handler);
+    }
+    on(eventName, handler) {
+        return on(this.target, eventName, handler);
+    }
+    one(eventName, handler) {
+        return one(this.target, eventName, handler);
+    }
+    trigger(eventName, data = {}, bubble = 'l', controller) {
+        trigger(this.target, eventName, data, bubble, controller);
+    }
+    ancestors() {
+        let currentNode = this?.target, result = [];
+        if (!isDOM(currentNode))
+            return [];
+        while ((currentNode = currentNode.closest('[data-mc]'))) {
+            if (currentNode?._mc) {
+                result.push(currentNode?._mc);
+            }
+        }
+        return result.length ? result : null;
+    }
+    closest() {
+        let target = this.target;
+        if (!isDOM(target))
+            return null;
+        return target.closest('[data-mc]')?._mc || null;
+    }
+    children() {
+        let target = this?.target;
+        if (!isDOM(target))
+            return null;
+        return getMcChildNodes(target);
+    }
+    descendants() {
+        const target = this?.target;
+        if (!isDOM(target))
+            return [];
+        const mcArray = [...target.querySelectorAll('[data-mc]')]
+            .filter((e) => !!e._mc)
+            .map((e) => e._mc);
+        return mcArray.length ? mcArray : null;
+    }
+}
+const loadingDCs = new Set();
+function attachDC(element) {
+    return () => {
+        const elements = Array.from(document.querySelectorAll(`[data-mc*="${element}"]`)).filter((element) => element instanceof HTMLElement);
+        if (elements.length === 0)
+            return;
+        const Klass = customElements.get(element);
+        elements.forEach((node) => {
+            try {
+                DC.add(node, Klass.name, new Klass(node));
+            }
+            catch (error) {
+                if (Klass['create']) {
+                    let element = Klass.create(node);
+                    element.setAttribute('data-mc', node.getAttribute('data-mc'));
+                    node.replaceWith(element);
+                    node = element;
+                }
+                else {
+                    throw `Class ${Klass.name} doesn't have a callable constructor AND class doesn't have a static .create() method.`;
+                }
+            }
+            const new_mc = node
+                .getAttribute('data-mc')
+                .split(' ')
+                .filter((name) => name !== element && name !== '')
+                .join(' ')
+                .trim();
+            node.setAttribute('data-mc', new_mc);
+        });
+    };
+}
+function makeLoadScript(element) {
+    if (loadingDCs.has(element))
+        return;
+    loadingDCs.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('data-name', element);
+    se.setAttribute('loading', '');
+    const loadedPromise = customElements.whenDefined(element);
+    loadedPromise.then(attachDC(element));
+    se.addEventListener('load', (ev) => {
+        loadingDCs.delete(element);
+        document.head.querySelector(`script[data-name="${element}"]`)?.remove();
+    });
+    se.addEventListener('error', (ev) => {
+        console.error('could not load DC code from', fileName);
+    });
+    document.head.append(se);
+}
+function loadUndefinedMCs() {
+    [...document.querySelectorAll(':not(:defined)')]
+        .filter((element) => !!element &&
+        !customElements.get(element.tagName.toLowerCase()) &&
+        !loadingDCs.has(element.tagName.toLowerCase()))
+        .forEach((el) => {
+        makeLoadScript(el.tagName.toLowerCase());
+    });
+    [...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) => {
+            const isDefined = customElements.get(element);
+            if (!loadingDCs.has(element) && !isDefined) {
+                makeLoadScript(element);
+            }
+            else if (isDefined) {
+                attachDC(element)();
+            }
+        });
+    });
+}
+let autoloadEnabled = false;
+let observer = null;
+function autoload(enable = true) {
+    if (!enable) {
+        observer?.disconnect();
+        observer = null;
+        return autoloadEnabled;
+    }
+    autoloadEnabled = enable;
+    observer = new MutationObserver(loadUndefinedMCs);
+    setTimeout(() => {
+        observer.observe(document.body, { childList: true, subtree: true });
+        loadUndefinedMCs();
+    }, 5);
+    window.autoload = window.autoload || autoload;
+    return autoloadEnabled;
+}
+autoload.state = loadingDCs;
+export { McBase, MC, DC, autoload, on, one, off, trigger };

package/dist/MC.min.js

@@ -0,0 +1,342 @@
+/******/ // The require scope
+/******/ var __webpack_require__ = {};
+/******/ 
+/************************************************************************/
+/******/ /* webpack/runtime/define property getters */
+/******/ (() => {
+/******/ 	// define getter functions for harmony exports
+/******/ 	__webpack_require__.d = (exports, definition) => {
+/******/ 		for(var key in definition) {
+/******/ 			if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 				Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 			}
+/******/ 		}
+/******/ 	};
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ 	__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/ 
+/************************************************************************/
+var __webpack_exports__ = {};
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   AU: () => (/* binding */ off),
+/* harmony export */   DC: () => (/* binding */ DC),
+/* harmony export */   E_: () => (/* binding */ autoload),
+/* harmony export */   MC: () => (/* binding */ MC),
+/* harmony export */   Oc: () => (/* binding */ McBase),
+/* harmony export */   hZ: () => (/* binding */ trigger),
+/* harmony export */   on: () => (/* binding */ on),
+/* harmony export */   xH: () => (/* binding */ one)
+/* harmony export */ });
+
+const isBrowser = new Function('try {return this===window;}catch(e){ return false;}');
+function isDOM(element) {
+    return element && element instanceof HTMLElement;
+}
+function add(target, key, element = {}) {
+    let node = target;
+    if (!node._mc) {
+        node._mc = new DC(target);
+    }
+    const _mc = node._mc;
+    if (key.length && !_mc[key]) {
+        _mc[key] = element;
+        if (target instanceof HTMLElement && !target.getAttribute('data-mc')) {
+            target.setAttribute('data-mc', '');
+        }
+    }
+    return node;
+}
+function remove(target, key) {
+    if (!key)
+        return;
+    const _mc = target?._mc || {};
+    if (_mc && _mc[key]) {
+        delete _mc[key];
+    }
+    if (!Object.keys(_mc).length && target instanceof HTMLElement && target.hasAttribute('data-mc')) {
+        target.removeAttribute('data-mc');
+    }
+    return;
+}
+function init(element) {
+    setTimeout(() => {
+        if (element.constructor === DC)
+            return;
+        element.trigger('Init');
+    }, 0);
+}
+function getMcEventName(eventName) {
+    return '_mc' + eventName[0].toUpperCase() + eventName.substring(1);
+}
+function off(domNode, eventName, handler) {
+    domNode.removeEventListener(getMcEventName(eventName), handler);
+}
+function on(domNode, eventName, handler, once = false) {
+    domNode.addEventListener(getMcEventName(eventName), handler, { capture: false, once });
+    return handler;
+}
+function one(domNode, eventName, handler) {
+    on(domNode, eventName, handler, true);
+    return handler;
+}
+class BubbleController {
+    stopped = false;
+    constructor() { }
+    stop() {
+        this.stopped = true;
+    }
+}
+function trigger(domNode, event, data = {}, bubble = 'l', controller) {
+    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;
+    }
+    if (/[ud]/.test(bubble)) {
+        if (bubble.indexOf('l') === -1) {
+            bubble += 'l';
+        }
+        setTimeout(() => {
+            if (bubble.indexOf('u') > -1) {
+                let parentMc = domNode.parentElement?.closest('[data-mc]');
+                if (parentMc) {
+                    parentMc?._mc.trigger(eventName, data, bubble, bubbleController);
+                }
+            }
+            if (bubble.indexOf('d') > -1) {
+                let childNodes = domNode._mc.children();
+                if (childNodes) {
+                    childNodes.forEach((_mc) => _mc.trigger(eventName, data, bubble));
+                }
+            }
+        }, 0);
+    }
+}
+function autoAttachListeners(element) {
+    if (!isBrowser() || element.constructor === DC)
+        return;
+    const target = element.target;
+    if (target instanceof HTMLElement) {
+        let that = 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}/, ''), nativeEventName = withoutOnOne.toLowerCase();
+            if ('on' + nativeEventName in target) {
+                let listener = (ev) => {
+                    that[key](ev);
+                };
+                target.addEventListener(nativeEventName, listener);
+            }
+            else {
+                let listener = (ev) => {
+                    that[key](ev);
+                };
+                on(target, withoutOnOne, listener, once);
+            }
+        });
+    }
+}
+function getMcChildNodes(domNode) {
+    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 = [...domNode.querySelectorAll(selector)]
+        .filter((e) => !!e._mc)
+        .map((e) => e._mc);
+    domNode.removeAttribute('temp_id');
+    return mcArray.length ? mcArray : null;
+}
+class McBase {
+    _target;
+    constructor(target) {
+        let element = this;
+        this._target = new WeakRef(target || {});
+        autoAttachListeners(element);
+        init(element);
+    }
+    get target() {
+        return this._target.deref();
+    }
+}
+class MC extends McBase {
+    constructor(target) {
+        super(target);
+    }
+}
+class DC extends McBase {
+    constructor(target) {
+        super(target);
+    }
+    static add(target, key, element = {}) {
+        return add(target, key, element);
+    }
+    static remove(target, key) {
+        remove(target, key);
+    }
+    off(eventName, handler) {
+        off(this.target, eventName, handler);
+    }
+    on(eventName, handler) {
+        return on(this.target, eventName, handler);
+    }
+    one(eventName, handler) {
+        return one(this.target, eventName, handler);
+    }
+    trigger(eventName, data = {}, bubble = 'l', controller) {
+        trigger(this.target, eventName, data, bubble, controller);
+    }
+    ancestors() {
+        let currentNode = this?.target, result = [];
+        if (!isDOM(currentNode))
+            return [];
+        while ((currentNode = currentNode.closest('[data-mc]'))) {
+            if (currentNode?._mc) {
+                result.push(currentNode?._mc);
+            }
+        }
+        return result.length ? result : null;
+    }
+    closest() {
+        let target = this.target;
+        if (!isDOM(target))
+            return null;
+        return target.closest('[data-mc]')?._mc || null;
+    }
+    children() {
+        let target = this?.target;
+        if (!isDOM(target))
+            return null;
+        return getMcChildNodes(target);
+    }
+    descendants() {
+        const target = this?.target;
+        if (!isDOM(target))
+            return [];
+        const mcArray = [...target.querySelectorAll('[data-mc]')]
+            .filter((e) => !!e._mc)
+            .map((e) => e._mc);
+        return mcArray.length ? mcArray : null;
+    }
+}
+const loadingDCs = new Set();
+function attachDC(element) {
+    return () => {
+        const elements = Array.from(document.querySelectorAll(`[data-mc*="${element}"]`)).filter((element) => element instanceof HTMLElement);
+        if (elements.length === 0)
+            return;
+        const Klass = customElements.get(element);
+        elements.forEach((node) => {
+            try {
+                DC.add(node, Klass.name, new Klass(node));
+            }
+            catch (error) {
+                if (Klass['create']) {
+                    let element = Klass.create(node);
+                    element.setAttribute('data-mc', node.getAttribute('data-mc'));
+                    node.replaceWith(element);
+                    node = element;
+                }
+                else {
+                    throw `Class ${Klass.name} doesn't have a callable constructor AND class doesn't have a static .create() method.`;
+                }
+            }
+            const new_mc = node
+                .getAttribute('data-mc')
+                .split(' ')
+                .filter((name) => name !== element && name !== '')
+                .join(' ')
+                .trim();
+            node.setAttribute('data-mc', new_mc);
+        });
+    };
+}
+function makeLoadScript(element) {
+    if (loadingDCs.has(element))
+        return;
+    loadingDCs.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('data-name', element);
+    se.setAttribute('loading', '');
+    const loadedPromise = customElements.whenDefined(element);
+    loadedPromise.then(attachDC(element));
+    se.addEventListener('load', (ev) => {
+        loadingDCs.delete(element);
+        document.head.querySelector(`script[data-name="${element}"]`)?.remove();
+    });
+    se.addEventListener('error', (ev) => {
+        console.error('could not load DC code from', fileName);
+    });
+    document.head.append(se);
+}
+function loadUndefinedMCs() {
+    [...document.querySelectorAll(':not(:defined)')]
+        .filter((element) => !!element &&
+        !customElements.get(element.tagName.toLowerCase()) &&
+        !loadingDCs.has(element.tagName.toLowerCase()))
+        .forEach((el) => {
+        makeLoadScript(el.tagName.toLowerCase());
+    });
+    [...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) => {
+            const isDefined = customElements.get(element);
+            if (!loadingDCs.has(element) && !isDefined) {
+                makeLoadScript(element);
+            }
+            else if (isDefined) {
+                attachDC(element)();
+            }
+        });
+    });
+}
+let autoloadEnabled = false;
+let observer = null;
+function autoload(enable = true) {
+    if (!enable) {
+        observer?.disconnect();
+        observer = null;
+        return autoloadEnabled;
+    }
+    autoloadEnabled = enable;
+    observer = new MutationObserver(loadUndefinedMCs);
+    setTimeout(() => {
+        observer.observe(document.body, { childList: true, subtree: true });
+        loadUndefinedMCs();
+    }, 5);
+    window.autoload = window.autoload || autoload;
+    return autoloadEnabled;
+}
+autoload.state = loadingDCs;
+
+
+var __webpack_exports__DC = __webpack_exports__.DC;
+var __webpack_exports__MC = __webpack_exports__.MC;
+var __webpack_exports__McBase = __webpack_exports__.Oc;
+var __webpack_exports__autoload = __webpack_exports__.E_;
+var __webpack_exports__off = __webpack_exports__.AU;
+var __webpack_exports__on = __webpack_exports__.on;
+var __webpack_exports__one = __webpack_exports__.xH;
+var __webpack_exports__trigger = __webpack_exports__.hZ;
+export { __webpack_exports__DC as DC, __webpack_exports__MC as MC, __webpack_exports__McBase as McBase, __webpack_exports__autoload as autoload, __webpack_exports__off as off, __webpack_exports__on as on, __webpack_exports__one as one, __webpack_exports__trigger as trigger };

package/dist/MC.ts

@@ -319,7 +319,7 @@ function attachDC(element: string): Function {
 	return () => {
 		const elements: HTMLElement[] = Array.from(
 			document.querySelectorAll(`[data-mc*="${element}"]`)
-		).filter((element) => element instanceof HTMLElement);
+		).filter((element) => element instanceof HTMLElement) as HTMLElement[];
 
 		if (elements.length === 0) return;
 

package/dist/elements.d.ts

@@ -0,0 +1,5 @@
+export declare function defineCE(tagName: string, DefinitionClass: {
+    new (...args: any[]): any;
+} | Function, observedAttributes?: string[]): void;
+export declare function getCE(tagName: string): CustomElementConstructor | undefined;
+//# sourceMappingURL=elements.d.ts.map