@twobirds/microcomponents 0.0.12 → 0.0.15

package/src/test.js

@@ -134,16 +134,18 @@ class MC {
 	}
 }
 
-// create test page
-document.body.innerHTML = `<div class="level_1"><span><div class="level_2"><span><div class="level_3"><span><div class="level_4"><span><div class="level_5"></div></span></div></span></div></span></div></span></div>`;
+// create test page if necessary, otherwise test what is present
+if (window.location.hostname.indexOf("gitlab") > -1) {
+	document.body.innerHTML = `<div class="level_1"><span><div class="level_2"><span><div class="level_3"><span><div class="level_4"><span><div class="level_5"></div><div class="level_5"></div><div class="level_5"></div><div class="level_5"></div><div class="level_5"></div></span></div></span></div></span></div></span></div>`;
 
-let elements = [...document.querySelectorAll("div")].reverse();
-elements.forEach((e) => (e.innerHTML = e.innerHTML.repeat(5)));
+	let elements = [...document.querySelectorAll("div")].reverse();
+	elements.forEach((e) => (e.innerHTML = e.innerHTML.repeat(5)));
 
-document.body.innerHTML = document.body.innerHTML.repeat(5);
-document.body.innerHTML =
-	document.body.innerHTML +
-	"<span>F12 opens the debugger, console has some manual tests...</span>";
+	document.body.innerHTML = document.body.innerHTML.repeat(5);
+	document.body.innerHTML =
+		document.body.innerHTML +
+		"<span>F12 opens the debugger, console has some manual tests...</span>";
+}
 
 // create an inner micro component class
 class MyInnerMC extends MC {
@@ -179,10 +181,10 @@ class MyMC extends MC {
 
 console.time("MC creation time");
 // get some element from the DOM
-const element = document.querySelector("div");
+const domElement = document.querySelector("div");
 
 // Add the custom micro component instance to the target element
-let topLevelMC = MC.add(element, "myFirstMC", new MyMC(element));
+MC.add(domElement, "myFirstMC", new MyMC(domElement));
 
 // Add the custom micro component instance to every div
 document.querySelectorAll("div").forEach((e) => {
@@ -201,20 +203,20 @@ console.info(
 	"\nnumber of top level micro components:",
 	c.length * 2 + 1, // TODO write reducer
 	"\nnumber of top level & inner micro components:",
-	c.length * 3 + 2 // TODO write reducer
+	c.length * 6 + 2 // TODO write reducer
 );
 
-console.log("ROOT element", element);
-console.log("-> ._mc", element._mc);
-console.log("-> _mc.myMC", element._mc.myMC);
+console.warn("domElement = first DIV element:", domElement);
+console.log("domElement\n  ._mc", domElement._mc);
+console.log("domElement\n  ._mc\n  .myFirstMC", domElement._mc.myFirstMC);
 console.log(
-	"-> _mc.myFirstMC._mc (MC.debug = false)",
-	element._mc.myFirstMC._mc
+	"domElement\n  ._mc\n  .myFirstMC\n  ._mc (MC.debug = false)",
+	domElement._mc.myFirstMC._mc
 );
 MC.debug = true;
 console.log(
-	"-> _mc.myFirstMC._mc (MC.debug = true)",
-	element._mc.myFirstMC._mc
+	"domElement\n  ._mc\n .myFirstMC\n  ._mc  (MC.debug = true)",
+	domElement._mc.myFirstMC._mc
 );
 MC.debug = false;
 
@@ -223,7 +225,7 @@ test selectors
 */
 
 let sc = c[2]._mc.myPublicMC1; // 3rd level DIV micro component
-console.info("sc", sc);
+console.warn("sc = some div in the middle of the tree, level 3 of 5", sc);
 
 console.log("number of sc parents (expect 5)", sc.parents());
 console.log("number of sc parent (expect 2)", sc.parent());
@@ -242,4 +244,4 @@ console.log(
 );
 MC.debug = false;
 console.log("number of sc children (expect 10)", sc.children());
-console.log("number of sc descendants (expect 60)", sc.descendants());
+console.log("number of sc descendants (expect 260)", sc.descendants());

package/dist/test.d.ts

@@ -1,36 +0,0 @@
-declare function getMicroComponents(elements: any, search: any): any[];
-declare function traverseNodes(node: any, search: any, firstonly?: boolean): any[];
-declare function isDOM(element: any): any;
-declare class MC {
-    static add(target: any, key: any, element?: {}): {};
-    static remove(target: any, key: any): void;
-    static debug: boolean;
-    static siblings(target: any, search?: string): any;
-    constructor(target: any);
-    constructor(target: any);
-    get _mc(): {} | undefined;
-    get target(): {};
-    add(key: any, element: any, target: any): any;
-    remove(key: any, target: any): void;
-    siblings(search?: string): any[];
-    parent(search?: string): any[];
-    parents(search?: string): any[];
-    children(search?: string): any[];
-    descendants(search?: string): any[];
-    #private;
-}
-declare let elements: HTMLDivElement[];
-declare class MyInnerMC extends MC {
-    constructor(target: any);
-    doSomething(): void;
-}
-declare class MyMC extends MC {
-    constructor(target: any);
-    doSomething(): void;
-    #private;
-}
-declare const element: HTMLDivElement | null;
-declare let topLevelMC: {};
-declare let c: NodeListOf<Element>;
-declare let sc: any;
-//# sourceMappingURL=test.d.ts.map

package/dist/test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"test.d.ts","sourceRoot":"","sources":["../src/test.js"],"names":[],"mappings":"AAAA,uEAeC;AACD,mFAcC;AACD,0CAEC;AACD;IA0BC,oDAaC;IACD,2CAcC;IAnDD,sBAAqB;IAYrB,mDAUC;IArBD,yBAGC;;IACD,0BAGC;IACD,iBAEC;IAyCD,8CAOC;IACD,oCAOC;IACD,iCAKC;IACD,+BAGC;IACD,gCAGC;IACD,iCASC;IACD,oCAIC;;CACD;AAKD,uCAA+D;AAS/D;IACC,yBAEC;IAED,oBAGC;CACD;AAGD;IAGC,yBAQC;IAED,oBAGC;;CACD;AAID,6CAA8C;AAG9C,2BAAiE;AAUjE,mCAA2C;AA8B3C,oBAA8B"}

package/dist/test.js

@@ -1,214 +0,0 @@
-"use strict";
-function getMicroComponents(elements, search) {
-    let mcValues = [];
-    elements.forEach((e) => {
-        if (e) {
-            if (e instanceof HTMLElement) {
-                const _mc = e?._mc;
-                if (!search && _mc) {
-                    mcValues = mcValues.concat(Object.values(e._mc));
-                }
-                else if (search && _mc && _mc[search]) {
-                    mcValues.push(_mc[search]);
-                }
-            }
-        }
-    });
-    return mcValues;
-}
-function traverseNodes(node, search, firstonly = true) {
-    let mcValues = [];
-    while (node) {
-        if (node._mc) {
-            if (!search) {
-                mcValues = mcValues.concat(Object.values(node._mc));
-            }
-            else if (search && node._mc[search]) {
-                mcValues.push(node._mc[search]);
-            }
-            if (firstonly)
-                return mcValues;
-        }
-        node = node.parentNode;
-    }
-    return mcValues;
-}
-function isDOM(element) {
-    return element && element instanceof HTMLElement;
-}
-class MC {
-    #target = {};
-    #_mc = {};
-    static debug = false;
-    constructor(target) {
-        this.#target = target;
-        this.#_mc = {};
-    }
-    get _mc() {
-        if (!MC.debug)
-            return undefined;
-        return this.#_mc;
-    }
-    get target() {
-        return this.#target;
-    }
-    static siblings(target, search = "") {
-        const mc = target;
-        if (!mc._mc) {
-            return [];
-        }
-        const _mc = mc._mc;
-        if (search.length) {
-            return _mc?.[search] || [];
-        }
-        return [...Object.values(_mc)];
-    }
-    static add(target, key, element = {}) {
-        let node = target;
-        if (!node._mc) {
-            node._mc = new MC(target);
-        }
-        const _mc = node._mc;
-        if (key.length && !_mc[key]) {
-            _mc[key] = element;
-            if (target instanceof HTMLElement) {
-                target.setAttribute("_mc", "");
-            }
-        }
-        return element;
-    }
-    static 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("_mc")) {
-            target.removeAttribute("_mc");
-        }
-        return;
-    }
-    add(key, element, target) {
-        if (this.#_mc[key])
-            return;
-        if (target) {
-            MC.add(target, key, element);
-        }
-        this.#_mc[key] = element;
-        return element;
-    }
-    remove(key, target) {
-        const _mc = this.#_mc;
-        const t = target;
-        if (target) {
-            MC.remove(t, key);
-        }
-        delete _mc?.[key];
-    }
-    siblings(search = "") {
-        const _mc = this.#_mc;
-        if (!_mc)
-            return [];
-        const result = _mc[search || ""];
-        return search && result ? [result] : [...Object.values(_mc)];
-    }
-    parent(search = "") {
-        if (!isDOM(this.#target))
-            return [];
-        return traverseNodes(this.#target.parentNode, search, true);
-    }
-    parents(search = "") {
-        if (!isDOM(this.#target))
-            return [];
-        return traverseNodes(this.#target.parentNode, search, false);
-    }
-    children(search = "") {
-        if (!isDOM(this.#target))
-            return [];
-        const id = Math.random().toString().replace(".", "");
-        const selector = '[_mc]:not([temp_id="' + id + '"] [_mc] [_mc])';
-        this.#target.setAttribute("temp_id", id);
-        const myDomElements = this.#target.querySelectorAll(selector);
-        const mcValues = getMicroComponents([...myDomElements], search);
-        this.#target.removeAttribute("temp-id");
-        return mcValues;
-    }
-    descendants(search = "") {
-        if (!isDOM(this.#target))
-            return [];
-        const myDomElements = this.#target.querySelectorAll("*[_mc]");
-        return getMicroComponents([...myDomElements], search);
-    }
-}
-// create test page
-document.body.innerHTML = `<div class="level_1"><span><div class="level_2"><span><div class="level_3"><span><div class="level_4"><span><div class="level_5"></div></span></div></span></div></span></div></span></div>`;
-let elements = [...document.querySelectorAll("div")].reverse();
-elements.forEach((e) => (e.innerHTML = e.innerHTML.repeat(5)));
-document.body.innerHTML = document.body.innerHTML.repeat(5);
-document.body.innerHTML =
-    document.body.innerHTML +
-        "<span>F12 opens the debugger, console has some manual tests...</span>";
-// create an inner micro component class
-class MyInnerMC extends MC {
-    constructor(target) {
-        super(target);
-    }
-    doSomething() {
-        console.log(this, " myInnerMC something done");
-        console.log(this.siblings());
-    }
-}
-// create a custom micro component class
-class MyMC extends MC {
-    #myInner;
-    constructor(target) {
-        super(target);
-        //add a micro component
-        this.add("myInnerMC", new MyInnerMC(target));
-        // add a private MC
-        this.#myInner = new MyInnerMC(target);
-    }
-    doSomething() {
-        console.log(this, "myMC something done");
-        this.#myInner.doSomething();
-    }
-}
-console.time("MC creation time");
-// get some element from the DOM
-const element = document.querySelector("div");
-// Add the custom micro component instance to the target element
-let topLevelMC = MC.add(element, "myFirstMC", new MyMC(element));
-// Add the custom micro component instance to every div
-document.querySelectorAll("div").forEach((e) => {
-    MC.add(e, "myPublicMC1", new MyMC(e));
-    MC.add(e, "myPublicMC2", new MyMC(e));
-});
-console.timeEnd("MC creation time");
-let c = document.querySelectorAll("[_mc]");
-console.info("number of DOM nodes:", document.querySelectorAll("*").length, "\nnumber of DOM nodes containing micro components:", c.length, "\nnumber of top level micro components:", c.length * 2 + 1, // TODO write reducer
-"\nnumber of top level & inner micro components:", c.length * 3 + 2 // TODO write reducer
-);
-console.log("ROOT element", element);
-console.log("-> ._mc", element._mc);
-console.log("-> _mc.myMC", element._mc.myMC);
-console.log("-> _mc.myFirstMC._mc (MC.debug = false)", element._mc.myFirstMC._mc);
-MC.debug = true;
-console.log("-> _mc.myFirstMC._mc (MC.debug = true)", element._mc.myFirstMC._mc);
-MC.debug = false;
-/*
-test selectors
-*/
-let sc = c[2]._mc.myPublicMC1; // 3rd level DIV micro component
-console.info("sc", sc);
-console.log("number of sc parents (expect 5)", sc.parents());
-console.log("number of sc parent (expect 2)", sc.parent());
-console.log("sc PUBLIC siblings (expect 2)", sc.target.className, Object.keys(sc.target._mc), sc.target._mc);
-console.log("sc PRIVATE siblings (MC.debug = false, expect undefined)", sc._mc);
-MC.debug = true;
-console.log("sc PRIVATE siblings (MC.debug = true, expect 1)", Object.keys(sc._mc).length, sc._mc);
-MC.debug = false;
-console.log("number of sc children (expect 10)", sc.children());
-console.log("number of sc descendants (expect 60)", sc.descendants());