@twobirds/microcomponents 0.1.6 → 0.1.10

package/README.md

@@ -18,10 +18,14 @@ The distinguishing feature - compared to other frameworks - is its **minimalism*
 
 ## Status
 
+For a quick glance try [this](https://gitlab.com/twoBirds/mc_template_webcomponents)...
+
 In [manual testing](https://twobirds.gitlab.io/microcomponents/test/test.html) ( also a speed test).
 
 Check the [typedoc API reference](https://twobirds.gitlab.io/microcomponents/typedoc/index.html) if you want to drill into the source code.
 
+The progress of coding is being streamed on [twitch](https://twitch.tv/frankieth) and [youtube](https://www.youtube.com/@FrankieThu).
+
 ## Simple Usage Examples
 
 ### **Micro Components**

package/dist/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;AAM3C,MAAM,WAAW,aAAc,SAAQ,WAAW;IACjD,GAAG,EAAE,WAAW,CAAC;CACjB;AAmED,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,GAAI,kCAAkC,CAGtJ;AAED,iBAAS,GAAG,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,GAAI,kCAAkC,CAGhI;AAED,cAAM,gBAAgB;IACrB,OAAO,UAAS;;IAGhB,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;IAU3C,IAAI,MAAM,IAAI,GAAG,CAEhB;CAED;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,MAAM,CAAC,EAAE,GAAG;CAGxB;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,MAAM,EAAE,WAAW;IAI/B,MAAM,CAAC,GAAG,CAAE,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE,GAAQ,GAAI,aAAa;IAIhF,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM;IAK9C,GAAG,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAInE,EAAE,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,GAAI,kCAAkC;IAIxG,GAAG,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,GAAI,kCAAkC;IAIzG,OAAO,CAAE,SAAS,EAAE,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,GAAE,MAAY,EAAE,UAAU,CAAC,EAAE,gBAAgB;IAK/F,SAAS,IAAI,EAAE,EAAE,GAAG,IAAI;IAgBxB,OAAO,IAAI,EAAE,GAAG,IAAI;IAOpB,QAAQ,IAAI,EAAE,EAAE,GAAG,IAAI;IAMvB,WAAW,IAAI,EAAE,EAAE,GAAG,IAAI;CAS1B;AA4HD,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"}
+{"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["../src/MC.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAI3C,MAAM,WAAW,aAAc,SAAQ,WAAW;IAC9C,GAAG,EAAE,WAAW,CAAC;CACpB;AAmED,iBAAS,GAAG,CAAC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,QAEzF;AAED,iBAAS,EAAE,CACP,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,EAC3C,IAAI,GAAE,OAAe,GACtB,kCAAkC,CAGpC;AAED,iBAAS,GAAG,CACR,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GAC5C,kCAAkC,CAGpC;AAED,cAAM,gBAAgB;IAClB,OAAO,UAAS;;IAEhB,IAAI;CAGP;AAGD,iBAAS,OAAO,CACZ,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,MAAM,EACb,IAAI,GAAE,GAAQ,EACd,MAAM,GAAE,MAAY,EACpB,UAAU,CAAC,EAAE,gBAAgB,QA8ChC;AAkDD,cAAM,MAAM;IACR,OAAO,CAAC,OAAO,CAAe;gBAElB,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE;IAU3C,IAAI,MAAM,IAAI,GAAG,CAEhB;CACJ;AAED,cAAM,EAAG,SAAQ,MAAM;gBACP,MAAM,CAAC,EAAE,GAAG;CAG3B;AAED,cAAM,EAAG,SAAQ,MAAM;gBACP,MAAM,EAAE,WAAW;IAI/B,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE,GAAQ,GAAG,aAAa;IAI9E,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM;IAK9C,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAIlE,EAAE,CACE,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GAC5C,kCAAkC;IAIrC,GAAG,CACC,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GAC5C,kCAAkC;IAIrC,OAAO,CACH,SAAS,EAAE,MAAM,EACjB,IAAI,GAAE,GAAQ,EACd,MAAM,GAAE,MAAY,EACpB,UAAU,CAAC,EAAE,gBAAgB;IAMjC,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;CAQ7B;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

@@ -54,14 +54,16 @@ function one(domNode, eventName, handler) {
 }
 class BubbleController {
     stopped = false;
-    constructor() {
-    }
+    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 });
+    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)) {
@@ -77,13 +79,13 @@ function trigger(domNode, event, data = {}, bubble = 'l', controller) {
         setTimeout(() => {
             if (bubble.indexOf('u') > -1) {
                 let parentMc = domNode.parentElement?.closest('[data-mc]');
-                if (!!parentMc) {
+                if (parentMc) {
                     parentMc?._mc.trigger(eventName, data, bubble, bubbleController);
                 }
             }
             if (bubble.indexOf('d') > -1) {
                 let childNodes = domNode._mc.children();
-                if (!!childNodes) {
+                if (childNodes) {
                     childNodes.forEach((_mc) => _mc.trigger(eventName, data, bubble));
                 }
             }
@@ -101,7 +103,7 @@ function autoAttachListeners(element) {
             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) {
+            if ('on' + nativeEventName in target) {
                 let listener = (ev) => {
                     that[key](ev);
                 };
@@ -122,7 +124,7 @@ function getMcChildNodes(domNode) {
     domNode.setAttribute('temp_id', id);
     const mcArray = [...domNode.querySelectorAll(selector)]
         .filter((e) => !!e._mc)
-        .map(e => e._mc);
+        .map((e) => e._mc);
     domNode.removeAttribute('temp_id');
     return mcArray.length ? mcArray : null;
 }
@@ -150,7 +152,6 @@ class DC extends McBase {
     static add(target, key, element = {}) {
         return add(target, key, element);
     }
-    ;
     static remove(target, key) {
         remove(target, key);
     }
@@ -170,7 +171,7 @@ class DC extends McBase {
         let currentNode = this?.target, result = [];
         if (!isDOM(currentNode))
             return [];
-        while (currentNode = (currentNode.closest('[data-mc]'))) {
+        while ((currentNode = currentNode.closest('[data-mc]'))) {
             if (currentNode?._mc) {
                 result.push(currentNode?._mc);
             }
@@ -195,16 +196,14 @@ class DC extends McBase {
             return [];
         const mcArray = [...target.querySelectorAll('[data-mc]')]
             .filter((e) => !!e._mc)
-            .map(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);
+        const elements = Array.from(document.querySelectorAll(`[data-mc*="${element}"]`)).filter((element) => element instanceof HTMLElement);
         if (elements.length === 0)
             return;
         const Klass = customElements.get(element);
@@ -213,14 +212,14 @@ function attachDC(element) {
                 DC.add(node, Klass.name, new Klass(node));
             }
             catch (error) {
-                if (!!Klass['create']) {
+                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.`);
+                    throw `Class ${Klass.name} doesn't have a callable constructor AND class doesn't have a static .create() method.`;
                 }
             }
             const new_mc = node
@@ -233,7 +232,6 @@ function attachDC(element) {
         });
     };
 }
-;
 function makeLoadScript(element) {
     if (loadingDCs.has(element))
         return;
@@ -259,17 +257,20 @@ function makeLoadScript(element) {
 }
 function loadUndefinedMCs() {
     [...document.querySelectorAll(':not(:defined)')]
-        .filter((element) => !!element
-        && !customElements.get(element.tagName.toLowerCase())
-        && !loadingDCs.has(element.tagName.toLowerCase()))
+        .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 _mc = el
+            .getAttribute('data-mc')
+            ?.split(' ')
+            .filter((name) => name !== '');
+        _mc?.forEach((element) => {
             const isDefined = customElements.get(element);
             if (!loadingDCs.has(element) && !isDefined) {
                 makeLoadScript(element);

package/dist/MC.min.js

@@ -87,14 +87,16 @@ function one(domNode, eventName, handler) {
 }
 class BubbleController {
     stopped = false;
-    constructor() {
-    }
+    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 });
+    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)) {
@@ -110,13 +112,13 @@ function trigger(domNode, event, data = {}, bubble = 'l', controller) {
         setTimeout(() => {
             if (bubble.indexOf('u') > -1) {
                 let parentMc = domNode.parentElement?.closest('[data-mc]');
-                if (!!parentMc) {
+                if (parentMc) {
                     parentMc?._mc.trigger(eventName, data, bubble, bubbleController);
                 }
             }
             if (bubble.indexOf('d') > -1) {
                 let childNodes = domNode._mc.children();
-                if (!!childNodes) {
+                if (childNodes) {
                     childNodes.forEach((_mc) => _mc.trigger(eventName, data, bubble));
                 }
             }
@@ -134,7 +136,7 @@ function autoAttachListeners(element) {
             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) {
+            if ('on' + nativeEventName in target) {
                 let listener = (ev) => {
                     that[key](ev);
                 };
@@ -155,7 +157,7 @@ function getMcChildNodes(domNode) {
     domNode.setAttribute('temp_id', id);
     const mcArray = [...domNode.querySelectorAll(selector)]
         .filter((e) => !!e._mc)
-        .map(e => e._mc);
+        .map((e) => e._mc);
     domNode.removeAttribute('temp_id');
     return mcArray.length ? mcArray : null;
 }
@@ -183,7 +185,6 @@ class DC extends McBase {
     static add(target, key, element = {}) {
         return add(target, key, element);
     }
-    ;
     static remove(target, key) {
         remove(target, key);
     }
@@ -203,7 +204,7 @@ class DC extends McBase {
         let currentNode = this?.target, result = [];
         if (!isDOM(currentNode))
             return [];
-        while (currentNode = (currentNode.closest('[data-mc]'))) {
+        while ((currentNode = currentNode.closest('[data-mc]'))) {
             if (currentNode?._mc) {
                 result.push(currentNode?._mc);
             }
@@ -228,16 +229,14 @@ class DC extends McBase {
             return [];
         const mcArray = [...target.querySelectorAll('[data-mc]')]
             .filter((e) => !!e._mc)
-            .map(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);
+        const elements = Array.from(document.querySelectorAll(`[data-mc*="${element}"]`)).filter((element) => element instanceof HTMLElement);
         if (elements.length === 0)
             return;
         const Klass = customElements.get(element);
@@ -246,14 +245,14 @@ function attachDC(element) {
                 DC.add(node, Klass.name, new Klass(node));
             }
             catch (error) {
-                if (!!Klass['create']) {
+                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.`);
+                    throw `Class ${Klass.name} doesn't have a callable constructor AND class doesn't have a static .create() method.`;
                 }
             }
             const new_mc = node
@@ -266,7 +265,6 @@ function attachDC(element) {
         });
     };
 }
-;
 function makeLoadScript(element) {
     if (loadingDCs.has(element))
         return;
@@ -292,17 +290,20 @@ function makeLoadScript(element) {
 }
 function loadUndefinedMCs() {
     [...document.querySelectorAll(':not(:defined)')]
-        .filter((element) => !!element
-        && !customElements.get(element.tagName.toLowerCase())
-        && !loadingDCs.has(element.tagName.toLowerCase()))
+        .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 _mc = el
+            .getAttribute('data-mc')
+            ?.split(' ')
+            .filter((name) => name !== '');
+        _mc?.forEach((element) => {
             const isDefined = customElements.get(element);
             if (!loadingDCs.has(element) && !isDefined) {
                 makeLoadScript(element);