@twobirds/microcomponents 0.0.82 → 0.0.84

package/public/src/test/testform.css

@@ -0,0 +1,47 @@
+legend {
+    display: inherit;
+    margin:  inherit;
+    vertical-align:  inherit;
+}
+
+label {
+    display: inline;
+    margin-top: 5px;
+    margin-left: 5px;
+    vertical-align: top;
+    width: 10em;
+    text-align: right;
+}
+
+label::before {
+    content: ' ';
+    display: block;
+}
+
+form input,
+form select,
+form textarea {
+    margin-left: 5px;
+    margin-top: 0px;
+    display: inline;
+}
+
+form label + textarea {
+    display: inline-block;
+    margin-top: 3px;
+}
+
+form input + label {
+    width: inherit;
+    margin-top: 3px;
+    text-align: left;
+}
+
+body > form {
+    display: block;
+}
+
+form fieldset {
+    border: 1px solid darkslategrey;
+    border-radius: 3px;
+}

package/public/src/test/testform.html

@@ -0,0 +1,56 @@
+<!-- test form -->
+<fieldset>
+    <legend>Inputs</legend>
+    <label>text</label><input type="text" name="textInput" value="" />&nbsp;<strong>2wB:&nbsp;</strong>{textInput}
+    <label>color</label><input type="color" name="colorInput" value="" />
+    <label>date</label><input type="date" name="dateInput" value="" />
+    <label>datetime-local</label><input type="datetime-local" name="dtlInput" value="" />
+    <label>email</label><input type="email" name="email" value="" />
+    <label>file</label><input type="file" name="fileInput" value="" />
+    <label>hidden</label><input type="hidden" name="hiddenInput" value="hiddenVal" />
+    <label>month</label><input type="month" name="month" value="" />
+    <label>number</label><input type="number" name="number" value="" />
+    <label>password</label><input type="password" name="passInput" value="" />
+    <label>range</label><input type="range" name="rangeInput" value="" />
+    <label>search</label><input type="search" name="searchInput" value="" />
+    <label>tel</label><input type="tel" name="telInput" value="" />
+    <label>time</label><input type="time" name="timeInput" value="" />
+    <label>url</label><input type="url" name="urlInput" value="" />
+    <label>week</label><input type="week" name="weekInput" value="" />
+</fieldset>
+<fieldset>
+    <legend>Selects</legend>
+        <label>singleSelect</label>
+        <select name="singleSelect">
+            <option disabled selected value> -- select -- </option>
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+            <option value="3">Option 3</option>
+            <option value="4">Option 4</option>
+        </select>
+        <label>multiSelect</label>
+        <select name="multiSelect" multiple="multiple" type="select-multiple">
+            <option value="1">Option 1</option>
+            <option value="2" selected=true>Option 2</option>
+            <option value="3">Option 3</option>
+            <option value="4" selected=true>Option 4</option>
+        </select>
+</fieldset>
+<fieldset>
+    <legend>Radiobuttons&nbsp;<strong>2wB:&nbsp;</strong>{myRadio}</legend>
+    <label>radio1</label><input type="radio" name="myRadio" value="radio1">
+    <label>radio2</label><input type="radio" name="myRadio" value="radio2">
+    <label>radio3</label><input type="radio" name="myRadio" value="radio3">
+</fieldset>
+<fieldset>
+    <legend>Checkboxes</legend>
+    <label>cb1</label><input type="checkbox" name="cb1">
+    <label>cb2</label><input type="checkbox" name="cb2">
+    <label>cb3</label><input type="checkbox" name="cb3">
+    <label>cb4</label><input type="checkbox" name="cb4">
+    <label>cb5</label><input type="checkbox" name="cb5">
+</fieldset>
+<fieldset>
+    <legend>TextArea</legend>
+    <label>textArea</label><textarea name="textArea"></textarea>
+</fieldset>

package/public/src/test/testform.json

@@ -0,0 +1,27 @@
+{
+	"textInput":"Hallo Welt",
+	"colorInput":"#eaf8f8",
+	"dateInput":"",
+	"dtlInput":"",
+	"email":"",
+	"hiddenInput":"",
+	"hiddenVal":"",
+	"month":"",
+	"number":"",
+	"passInput":"",
+	"rangeInput":"30",
+	"searchInput":"",
+	"telInput":"",
+	"timeInput":"",
+	"urlInput":"",
+	"weekInput":"",
+	"myRadio":"radio3",
+	"cb1":true,
+	"cb2":false,
+	"cb3":true,
+	"cb4":false,
+	"cb5":false,
+	"singleSelect":"",
+	"multiSelect":["2","4"],
+	"textArea":"This is some example\rtext..."
+}

package/public/test/MC.d.ts

@@ -1,36 +1,37 @@
 import { LooseObject } from './helpers.js';
-import { McEvent } from './McEvent.js';
 export interface HTMLMcElement extends HTMLElement {
     _mc: LooseObject;
 }
-declare function addListener(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject | null, capture?: boolean, once?: boolean): void;
-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 function off(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject): void;
+declare function on(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject, once?: boolean): void;
+declare function one(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject): void;
+declare function trigger(domNode: HTMLElement, event: CustomEvent | string, data?: any, bubble?: string): void;
 declare class McBase {
-    #private;
+    private _target;
     constructor(target?: {
         [key: string]: any;
     }, debug?: boolean);
     get target(): 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;
+    trigger(ev: string, data?: any, bubble?: string): void;
 }
 declare class DC extends McBase {
-    _mc?: LooseObject;
     constructor(target: HTMLElement, debug?: boolean);
     static add: Function;
     static remove: Function;
     static trigger: Function;
-    trigger(ev: McEvent | string, data?: any, bubble?: string): void;
+    off(eventName: string, handler: EventListenerOrEventListenerObject): void;
+    on(eventName: string, handler: EventListenerOrEventListenerObject): void;
+    one(eventName: string, handler: EventListenerOrEventListenerObject): void;
+    trigger(ev: CustomEvent | string, data?: any, bubble?: string): void;
     parent(search?: string): any[];
     ancestors(search?: string): any[];
     children(search?: string): any[];
     descendants(search?: string): any[];
 }
 declare function autoload(enable?: boolean): boolean;
-export { addListener, removeListener, McBase, MC, DC, McEvent, autoload };
+export { McBase, MC, DC, autoload, on, one, off, trigger };
 //# sourceMappingURL=MC.d.ts.map

package/public/test/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;AAiB3C,MAAM,WAAW,aAAc,SAAQ,WAAW;IACjD,GAAG,EAAE,WAAW,CAAC;CACjB;AA2HD,iBAAS,GAAG,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,QAE1F;AAED,iBAAS,EAAE,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,EAAE,IAAI,GAAE,OAAe,QAEhH;AAED,iBAAS,GAAG,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,QAE1F;AAGD,iBAAS,OAAO,CACf,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,WAAW,GAAG,MAAM,EAC3B,IAAI,GAAE,GAAQ,EACd,MAAM,GAAE,MAAY,QAepB;AA4ED,cAAM,MAAM;IACX,OAAO,CAAC,OAAO,CAAe;gBAElB,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,KAAK,GAAE,OAAe;IAUnE,IAAI,MAAM,IAAI,GAAG,CAEhB;CAED;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,MAAM,CAAC,EAAE,GAAG;IAIxB,MAAM,CAAC,OAAO,iBAAW;IAEzB,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,GAAE,MAAY;CAGxD;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,GAAG,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAInE,EAAE,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAIlE,GAAG,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAInE,OAAO,CAAC,EAAE,EAAE,WAAW,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,GAAE,MAAY;IAOtE,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;IAQpC,WAAW,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;CAMvC;AA+GD,iBAAS,QAAQ,CAAC,MAAM,GAAE,OAAc,GAAG,OAAO,CAmBjD;AAID,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC"}

package/public/test/MC.js

@@ -1,11 +1,13 @@
 'use strict';
-import { McEvent } from './McEvent.js';
 var isBrowser = new Function('try {return this===window;}catch(e){ return false;}');
-let nativeEventNames = new Set();
-if (isBrowser()) {
-    Object.keys(HTMLElement.prototype)
-        .filter((key) => /^on/.test(key))
-        .forEach((eventName) => nativeEventNames.add(eventName));
+function getNativeEventNames(domNode) {
+    let nativeEventNames = [];
+    if (isBrowser()) {
+        Object.keys(HTMLElement.prototype)
+            .filter((key) => /^on/.test(key))
+            .forEach((eventName) => nativeEventNames.push(eventName));
+    }
+    return nativeEventNames;
 }
 function getMicroComponents(elements, search) {
     let mcValues = [];
@@ -44,19 +46,6 @@ function traverseNodes(node, search, firstonly = true) {
 function isDOM(element) {
     return element && element instanceof HTMLElement;
 }
-function addListener(domNode, eventName, handler, capture = false, once = false) {
-    let options = { once: false };
-    if (capture) {
-        options.capture = capture;
-    }
-    if (once) {
-        options.once = once;
-    }
-    domNode.addEventListener(eventName, handler, options);
-}
-function removeListener(domNode, eventName, handler) {
-    domNode.removeEventListener(eventName, handler);
-}
 function add(target, key, element = {}) {
     let node = target;
     if (!node._mc) {
@@ -69,8 +58,8 @@ function add(target, key, element = {}) {
     const _mc = node._mc;
     if (key.length && !_mc[key]) {
         _mc[key] = element;
-        if (target instanceof HTMLElement && !target.getAttribute('_mc')) {
-            target.setAttribute('_mc', '');
+        if (target instanceof HTMLElement && !target.getAttribute('data-mc')) {
+            target.setAttribute('data-mc', '');
         }
     }
     return element;
@@ -84,25 +73,8 @@ function remove(target, key) {
     }
     if (!Object.keys(_mc).length &&
         target instanceof HTMLElement &&
-        target.hasAttribute('_mc')) {
-        target.removeAttribute('_mc');
-    }
-    return;
-}
-function trigger(target, ev, data = {}, bubble = 'l') {
-    let _mc = target?._mc;
-    if (!_mc)
-        return;
-    let event = ev instanceof McEvent
-        ? new McEvent(ev.type, ev.data, 'l')
-        : new McEvent(ev, data, 'l'), mcEvent = typeof ev !== 'string' ? ev : new McEvent(ev, data, bubble);
-    [...Object.values(_mc)].forEach((mc) => {
-        if (mc?.trigger && typeof mc?.trigger === 'function') {
-            mc?.trigger(event);
-        }
-    });
-    if (/[ud]/.test(mcEvent.bubble)) {
-        bubbleEvent(target, mcEvent);
+        target.hasAttribute('data-mc')) {
+        target.removeAttribute('data-mc');
     }
     return;
 }
@@ -113,6 +85,48 @@ function init(element) {
         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 });
+}
+function one(domNode, eventName, handler) {
+    on(domNode, eventName, handler, true);
+}
+function trigger(domNode, event, data = {}, bubble = 'l') {
+    const ev = typeof event === 'string'
+        ? new CustomEvent(getMcEventName(event), { detail: { data, bubble } })
+        : event;
+    if (bubble.length && bubble.indexOf('l') > -1) {
+        domNode.dispatchEvent(ev);
+    }
+    if (/[u|d]/.test(bubble)) {
+        bubbleEvent(domNode, ev);
+    }
+}
+function bubbleEvent(domNode, ev) {
+    setTimeout(() => {
+        if (ev.detail.bubble.indexOf('l') === -1) {
+            ev.detail.bubble += 'l';
+        }
+        if (ev.detail.bubble.indexOf('u') > -1) {
+            domNode.closest('[data-mc]')?.dispatchEvent(ev);
+        }
+        if (ev.detail.bubble.indexOf('d') > -1) {
+            let targets = new Set(domNode._mc
+                .children()
+                .map((c) => c?.target));
+            targets.forEach((target) => {
+                if (target)
+                    DC.trigger(target, ev);
+            });
+        }
+    }, 0);
+}
 function autoAttachListeners(element) {
     if (!isBrowser() || element.constructor === DC)
         return;
@@ -123,117 +137,66 @@ function autoAttachListeners(element) {
             .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(), listener = (ev) => {
-                that.trigger(withoutOnOne, ev);
+            let once = /^one/.test(key), withoutOnOne = key.replace(/^on[e]{0,1}/, ''), nativeEventName = withoutOnOne.toLowerCase();
+            let listener = (ev) => {
+                that[key](ev);
             };
-            if (once) {
-                Object.defineProperty(element, 'on' + withoutOnOne, {
-                    configurable: true,
-                    enumerable: false,
-                    writable: true,
-                    value: (ev) => {
-                        that.constructor.prototype[key].bind(that)(ev);
-                    },
-                });
+            if (!!target['on' + nativeEventName]) {
+                target.addEventListener(nativeEventName, listener);
             }
-            if (nativeEventNames.has('on' + nativeEventName)) {
-                addListener(target, nativeEventName, listener, false, once);
+            else {
+                on(target, withoutOnOne, listener, once);
             }
         });
     }
 }
-function bubbleEvent(target, ev) {
-    if (/[ud]/.test(ev.bubble)) {
-        setTimeout(() => {
-            if (ev.bubble.indexOf('l') === -1) {
-                ev.bubble += 'l';
-            }
-            if (ev.bubble.indexOf('u') > -1) {
-                let parent = traverseNodes(target, '', true)?.[0].target;
-                if (parent)
-                    DC.trigger(parent, ev);
-            }
-            if (ev.bubble.indexOf('d') > -1) {
-                let targets = new Set(target._mc
-                    .children()
-                    .map((c) => c?.target));
-                targets.forEach((target) => {
-                    if (target)
-                        DC.trigger(target, ev);
-                });
-            }
-        }, 0);
-    }
+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 myDomElements = domNode.querySelectorAll(selector);
+    domNode.removeAttribute('temp_id');
+    return myDomElements;
 }
 class McBase {
-    #target;
+    _target;
     constructor(target, debug = false) {
-        let that = this, element = that;
-        this.#target = new WeakRef(target || {});
+        let element = this;
+        this._target = new WeakRef(target || {});
         init(element);
         autoAttachListeners(element);
     }
     get target() {
-        return this.#target.deref();
+        return this._target.deref();
     }
 }
 class MC extends McBase {
-    _mc = {};
     constructor(target) {
         super(target);
     }
     static trigger = trigger;
     trigger(ev, data = {}, bubble = 'l') {
-        let that = this;
-        if (that.constructor === MC || that.constructor === DC) {
-            let event = ev instanceof McEvent
-                ? new McEvent(ev.type, ev.data, 'l')
-                : new McEvent(ev, data, 'l'), mcEvent = typeof ev !== 'string'
-                ? ev
-                : new McEvent(ev, data, bubble);
-            [...Object.getOwnPropertyNames(that)].forEach((mc) => {
-                if (that[mc]?.trigger &&
-                    typeof that[mc]?.trigger === 'function') {
-                    that[mc]?.trigger(event);
-                }
-            });
-            if (/[ud]/.test(mcEvent.bubble)) {
-                bubbleEvent(that.target, mcEvent);
-            }
-            return;
-        }
-        if (that instanceof MC || that instanceof DC) {
-            const that = this, mcEvent = typeof ev !== 'string'
-                ? ev
-                : new McEvent(ev, data, bubble), handlerName = 'on' + mcEvent.type[0].toUpperCase() + mcEvent.type.slice(1);
-            if (mcEvent.bubble.indexOf('l') > -1) {
-                if (!mcEvent.immediateStopped &&
-                    typeof that[handlerName] === 'function') {
-                    that[handlerName](mcEvent);
-                    if (that.hasOwnProperty(handlerName)) {
-                        delete that[handlerName];
-                    }
-                }
-            }
-            if (mcEvent.stopped || mcEvent.bubble === 'l') {
-                return that;
-            }
-            if (/[ud]/.test(mcEvent.bubble)) {
-                bubbleEvent(that.target, mcEvent);
-            }
-        }
     }
 }
 class DC extends McBase {
-    _mc = {};
     constructor(target, debug = false) {
         super(target);
     }
     static add = add;
     static remove = remove;
     static trigger = trigger;
-    trigger(ev, data = {}, bubble) {
-        MC.prototype.trigger.call(this, ev, data, bubble);
+    off(eventName, handler) {
+        off(this.target, eventName, handler);
+    }
+    on(eventName, handler) {
+        on(this.target, eventName, handler);
+    }
+    one(eventName, handler) {
+        one(this.target, eventName, handler);
+    }
+    trigger(ev, data = {}, bubble = 'l') {
+        if (typeof ev === 'string') {
+        }
     }
     parent(search = '') {
         let target = this.target;
@@ -251,109 +214,83 @@ class DC extends McBase {
         let target = this?.target;
         if (!isDOM(target))
             return [];
-        const id = Math.random().toString().replace('.', '');
-        const selector = '[_mc]:not([temp_id="' + id + '"] [_mc] [_mc])';
-        target.setAttribute('temp_id', id);
-        const myDomElements = target.querySelectorAll(selector);
+        const myDomElements = getMcChildNodes(target);
         const mcValues = getMicroComponents([...myDomElements], search);
-        target.removeAttribute('temp_id');
         return mcValues;
     }
     descendants(search = '') {
         let target = this?.target;
         if (!isDOM(target))
             return [];
-        const myDomElements = target.querySelectorAll('*[_mc]');
+        const myDomElements = target.querySelectorAll('*[data-mc]');
         return getMicroComponents([...myDomElements], search);
     }
 }
-const CEs = new Map();
-const MCs = new Map();
+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) => {
+            DC.add(node, klass.name, new klass(node));
+            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('name', element);
+    se.setAttribute('data-name', element);
     se.setAttribute('loading', '');
-    addListener(se, 'load', (ev) => {
-        se.removeAttribute('loading');
-        se.setAttribute('loaded', '');
+    const loadedPromise = customElements.whenDefined(element);
+    loadedPromise.then(attachDC(element));
+    se.addEventListener('load', (ev) => {
+        loadingDCs.delete(element);
+        document.head.querySelector(`script[data-name="${element}"]`)?.remove();
     });
-    addListener(se, 'error', (ev) => {
-        console.error('could not load Custom Element code from', fileName);
+    se.addEventListener('error', (ev) => {
+        console.error('could not load DC 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()))
+        && !loadingDCs.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=""]')]
+    [...document.querySelectorAll('[data-mc]:not([data-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('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)();
+            }
         });
     });
 }
@@ -366,14 +303,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 };
-export { addListener, removeListener, McBase, MC, DC, McEvent, autoload };
+autoload.state = loadingDCs;
+export { McBase, MC, DC, autoload, on, one, off, trigger };
 //# sourceMappingURL=MC.js.map