@twobirds/microcomponents 0.0.10 → 0.0.12

package/dist/test.js

@@ -0,0 +1,214 @@
+"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());

package/package.json

@@ -1,17 +1,16 @@
 {
   "name": "@twobirds/microcomponents",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "Micro Components Organization Class",
   "main": "microcomponents.js",
   "sideEffects": false,
   "scripts": {
     "typedoc": "typedoc",
-    "jsdoc": "jsdoc -v -a -p -d=public/jsdoc/es3 ./build/microcomponents.es3.js; jsdoc -v -c=jsdoc.conf.json -d=public/jsdoc/es5+ ./build/microcomponents.js",
-    "clean": "rm -rf build/*; rm -rf public/docs/*; rm -rf dist/*;",
+    "clean": "rm -rf build/*; rm -rf dist/*;",
     "prep": "cp -R assets/* public || true; cp src/* build || true;",
     "build": "npm run clean; npm run prep; tsc; npm run minify; npm run copyToDist;",
     "minify": "jsmin -o build/microcomponents.es3.min.js ./src/microcomponents.es3.js;jsmin -o build/microcomponents.min.js build/microcomponents.js;",
-    "copyToDist": "cp build/* dist; cp MicroComponents.svg dist; cp MicroComponents.svg public/fiddle;"
+    "copyToDist": "cp -R assets/* public || true; cp build/* dist; cp build/microcomponents.js public; cp build/test.js public; cp MicroComponents.svg dist; cp MicroComponents.svg public/fiddle;"
   },
   "author": "",
   "license": "ISC",

package/public/{docs/assets → assets}/highlight.css

@@ -1,26 +1,28 @@
 :root {
-    --light-hl-0: #800000;
-    --dark-hl-0: #808080;
-    --light-hl-1: #800000;
-    --dark-hl-1: #569CD6;
-    --light-hl-2: #008000;
-    --dark-hl-2: #6A9955;
-    --light-hl-3: #0000FF;
-    --dark-hl-3: #569CD6;
-    --light-hl-4: #000000;
-    --dark-hl-4: #D4D4D4;
-    --light-hl-5: #267F99;
-    --dark-hl-5: #4EC9B0;
-    --light-hl-6: #001080;
-    --dark-hl-6: #9CDCFE;
-    --light-hl-7: #0070C1;
-    --dark-hl-7: #4FC1FF;
-    --light-hl-8: #795E26;
-    --dark-hl-8: #DCDCAA;
-    --light-hl-9: #A31515;
-    --dark-hl-9: #CE9178;
-    --light-hl-10: #E50000;
-    --dark-hl-10: #9CDCFE;
+    --light-hl-0: #AF00DB;
+    --dark-hl-0: #C586C0;
+    --light-hl-1: #000000;
+    --dark-hl-1: #D4D4D4;
+    --light-hl-2: #001080;
+    --dark-hl-2: #9CDCFE;
+    --light-hl-3: #A31515;
+    --dark-hl-3: #CE9178;
+    --light-hl-4: #800000;
+    --dark-hl-4: #808080;
+    --light-hl-5: #800000;
+    --dark-hl-5: #569CD6;
+    --light-hl-6: #008000;
+    --dark-hl-6: #6A9955;
+    --light-hl-7: #0000FF;
+    --dark-hl-7: #569CD6;
+    --light-hl-8: #267F99;
+    --dark-hl-8: #4EC9B0;
+    --light-hl-9: #795E26;
+    --dark-hl-9: #DCDCAA;
+    --light-hl-10: #0070C1;
+    --dark-hl-10: #4FC1FF;
+    --light-hl-11: #E50000;
+    --dark-hl-11: #9CDCFE;
     --light-code-background: #FFFFFF;
     --dark-code-background: #1E1E1E;
 }
@@ -37,6 +39,7 @@
     --hl-8: var(--light-hl-8);
     --hl-9: var(--light-hl-9);
     --hl-10: var(--light-hl-10);
+    --hl-11: var(--light-hl-11);
     --code-background: var(--light-code-background);
 } }
 
@@ -52,6 +55,7 @@
     --hl-8: var(--dark-hl-8);
     --hl-9: var(--dark-hl-9);
     --hl-10: var(--dark-hl-10);
+    --hl-11: var(--dark-hl-11);
     --code-background: var(--dark-code-background);
 } }
 
@@ -67,6 +71,7 @@
     --hl-8: var(--light-hl-8);
     --hl-9: var(--light-hl-9);
     --hl-10: var(--light-hl-10);
+    --hl-11: var(--light-hl-11);
     --code-background: var(--light-code-background);
 }
 
@@ -82,6 +87,7 @@
     --hl-8: var(--dark-hl-8);
     --hl-9: var(--dark-hl-9);
     --hl-10: var(--dark-hl-10);
+    --hl-11: var(--dark-hl-11);
     --code-background: var(--dark-code-background);
 }
 
@@ -96,4 +102,5 @@
 .hl-8 { color: var(--hl-8); }
 .hl-9 { color: var(--hl-9); }
 .hl-10 { color: var(--hl-10); }
+.hl-11 { color: var(--hl-11); }
 pre, code { background: var(--code-background); }

package/public/assets/search.js

@@ -0,0 +1 @@
+window.searchData = JSON.parse("{\"kinds\":{\"2\":\"Module\",\"64\":\"Function\",\"128\":\"Class\",\"512\":\"Constructor\",\"1024\":\"Property\",\"2048\":\"Method\",\"65536\":\"Type literal\",\"262144\":\"Accessor\"},\"rows\":[{\"kind\":2,\"name\":\"microcomponents\",\"url\":\"modules/microcomponents.html\",\"classes\":\"tsd-kind-module\"},{\"kind\":128,\"name\":\"MC\",\"url\":\"classes/microcomponents.MC.html\",\"classes\":\"tsd-kind-class tsd-parent-kind-module\",\"parent\":\"microcomponents\"},{\"kind\":1024,\"name\":\"debug\",\"url\":\"classes/microcomponents.MC.html#debug\",\"classes\":\"tsd-kind-property tsd-parent-kind-class\",\"parent\":\"microcomponents.MC\"},{\"kind\":2048,\"name\":\"siblings\",\"url\":\"classes/microcomponents.MC.html#siblings-2\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.MC\"},{\"kind\":2048,\"name\":\"add\",\"url\":\"classes/microcomponents.MC.html#add-2\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.MC\"},{\"kind\":2048,\"name\":\"remove\",\"url\":\"classes/microcomponents.MC.html#remove-2\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.MC\"},{\"kind\":512,\"name\":\"constructor\",\"url\":\"classes/microcomponents.MC.html#constructor\",\"classes\":\"tsd-kind-constructor tsd-parent-kind-class\",\"parent\":\"microcomponents.MC\"},{\"kind\":1024,\"name\":\"#target\",\"url\":\"classes/microcomponents.MC.html#_target\",\"classes\":\"tsd-kind-property tsd-parent-kind-class tsd-is-private\",\"parent\":\"microcomponents.MC\"},{\"kind\":65536,\"name\":\"__type\",\"url\":\"classes/microcomponents.MC.html#_target.__type-1\",\"classes\":\"tsd-kind-type-literal tsd-parent-kind-property\",\"parent\":\"microcomponents.MC.#target\"},{\"kind\":1024,\"name\":\"#_mc\",\"url\":\"classes/microcomponents.MC.html#__mc\",\"classes\":\"tsd-kind-property tsd-parent-kind-class tsd-is-private\",\"parent\":\"microcomponents.MC\"},{\"kind\":65536,\"name\":\"__type\",\"url\":\"classes/microcomponents.MC.html#__mc.__type\",\"classes\":\"tsd-kind-type-literal tsd-parent-kind-property\",\"parent\":\"microcomponents.MC.#_mc\"},{\"kind\":262144,\"name\":\"_mc\",\"url\":\"classes/microcomponents.MC.html#_mc\",\"classes\":\"tsd-kind-accessor tsd-parent-kind-class\",\"parent\":\"microcomponents.MC\"},{\"kind\":262144,\"name\":\"target\",\"url\":\"classes/microcomponents.MC.html#target\",\"classes\":\"tsd-kind-accessor tsd-parent-kind-class\",\"parent\":\"microcomponents.MC\"},{\"kind\":2048,\"name\":\"add\",\"url\":\"classes/microcomponents.MC.html#add\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.MC\"},{\"kind\":2048,\"name\":\"remove\",\"url\":\"classes/microcomponents.MC.html#remove\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.MC\"},{\"kind\":2048,\"name\":\"siblings\",\"url\":\"classes/microcomponents.MC.html#siblings\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.MC\"},{\"kind\":2048,\"name\":\"parent\",\"url\":\"classes/microcomponents.MC.html#parent\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.MC\"},{\"kind\":2048,\"name\":\"parents\",\"url\":\"classes/microcomponents.MC.html#parents\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.MC\"},{\"kind\":2048,\"name\":\"children\",\"url\":\"classes/microcomponents.MC.html#children\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.MC\"},{\"kind\":2048,\"name\":\"descendants\",\"url\":\"classes/microcomponents.MC.html#descendants\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.MC\"},{\"kind\":2,\"name\":\"microcomponents.es3\",\"url\":\"modules/microcomponents_es3.html\",\"classes\":\"tsd-kind-module\"},{\"kind\":64,\"name\":\"__isEmpty\",\"url\":\"functions/microcomponents_es3.__isEmpty.html\",\"classes\":\"tsd-kind-function tsd-parent-kind-module\",\"parent\":\"microcomponents.es3\"},{\"kind\":128,\"name\":\"MC\",\"url\":\"classes/microcomponents_es3.MC.html\",\"classes\":\"tsd-kind-class tsd-parent-kind-module\",\"parent\":\"microcomponents.es3\"},{\"kind\":2048,\"name\":\"add\",\"url\":\"classes/microcomponents_es3.MC.html#add\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.es3.MC\"},{\"kind\":2048,\"name\":\"remove\",\"url\":\"classes/microcomponents_es3.MC.html#remove\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.es3.MC\"},{\"kind\":512,\"name\":\"constructor\",\"url\":\"classes/microcomponents_es3.MC.html#constructor\",\"classes\":\"tsd-kind-constructor tsd-parent-kind-class\",\"parent\":\"microcomponents.es3.MC\"},{\"kind\":1024,\"name\":\"_target\",\"url\":\"classes/microcomponents_es3.MC.html#_target\",\"classes\":\"tsd-kind-property tsd-parent-kind-class\",\"parent\":\"microcomponents.es3.MC\"},{\"kind\":2048,\"name\":\"siblings\",\"url\":\"classes/microcomponents_es3.MC.html#siblings\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.es3.MC\"},{\"kind\":2048,\"name\":\"parent\",\"url\":\"classes/microcomponents_es3.MC.html#parent\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.es3.MC\"},{\"kind\":2048,\"name\":\"parents\",\"url\":\"classes/microcomponents_es3.MC.html#parents\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.es3.MC\"},{\"kind\":2048,\"name\":\"children\",\"url\":\"classes/microcomponents_es3.MC.html#children\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.es3.MC\"},{\"kind\":2048,\"name\":\"descendants\",\"url\":\"classes/microcomponents_es3.MC.html#descendants\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.es3.MC\"}],\"index\":{\"version\":\"2.3.9\",\"fields\":[\"name\",\"comment\"],\"fieldVectors\":[[\"name/0\",[0,30.91]],[\"comment/0\",[]],[\"name/1\",[1,25.802]],[\"comment/1\",[]],[\"name/2\",[2,30.91]],[\"comment/2\",[]],[\"name/3\",[3,22.437]],[\"comment/3\",[]],[\"name/4\",[4,22.437]],[\"comment/4\",[]],[\"name/5\",[5,22.437]],[\"comment/5\",[]],[\"name/6\",[6,25.802]],[\"comment/6\",[]],[\"name/7\",[7,25.802]],[\"comment/7\",[]],[\"name/8\",[8,25.802]],[\"comment/8\",[]],[\"name/9\",[9,25.802]],[\"comment/9\",[]],[\"name/10\",[8,25.802]],[\"comment/10\",[]],[\"name/11\",[9,25.802]],[\"comment/11\",[]],[\"name/12\",[7,25.802]],[\"comment/12\",[]],[\"name/13\",[4,22.437]],[\"comment/13\",[]],[\"name/14\",[5,22.437]],[\"comment/14\",[]],[\"name/15\",[3,22.437]],[\"comment/15\",[]],[\"name/16\",[10,25.802]],[\"comment/16\",[]],[\"name/17\",[11,25.802]],[\"comment/17\",[]],[\"name/18\",[12,25.802]],[\"comment/18\",[]],[\"name/19\",[13,25.802]],[\"comment/19\",[]],[\"name/20\",[14,30.91]],[\"comment/20\",[]],[\"name/21\",[15,30.91]],[\"comment/21\",[]],[\"name/22\",[1,25.802]],[\"comment/22\",[]],[\"name/23\",[4,22.437]],[\"comment/23\",[]],[\"name/24\",[5,22.437]],[\"comment/24\",[]],[\"name/25\",[6,25.802]],[\"comment/25\",[]],[\"name/26\",[16,30.91]],[\"comment/26\",[]],[\"name/27\",[3,22.437]],[\"comment/27\",[]],[\"name/28\",[10,25.802]],[\"comment/28\",[]],[\"name/29\",[11,25.802]],[\"comment/29\",[]],[\"name/30\",[12,25.802]],[\"comment/30\",[]],[\"name/31\",[13,25.802]],[\"comment/31\",[]]],\"invertedIndex\":[[\"__isempty\",{\"_index\":15,\"name\":{\"21\":{}},\"comment\":{}}],[\"__type\",{\"_index\":8,\"name\":{\"8\":{},\"10\":{}},\"comment\":{}}],[\"_mc\",{\"_index\":9,\"name\":{\"9\":{},\"11\":{}},\"comment\":{}}],[\"_target\",{\"_index\":16,\"name\":{\"26\":{}},\"comment\":{}}],[\"add\",{\"_index\":4,\"name\":{\"4\":{},\"13\":{},\"23\":{}},\"comment\":{}}],[\"children\",{\"_index\":12,\"name\":{\"18\":{},\"30\":{}},\"comment\":{}}],[\"constructor\",{\"_index\":6,\"name\":{\"6\":{},\"25\":{}},\"comment\":{}}],[\"debug\",{\"_index\":2,\"name\":{\"2\":{}},\"comment\":{}}],[\"descendants\",{\"_index\":13,\"name\":{\"19\":{},\"31\":{}},\"comment\":{}}],[\"mc\",{\"_index\":1,\"name\":{\"1\":{},\"22\":{}},\"comment\":{}}],[\"microcomponents\",{\"_index\":0,\"name\":{\"0\":{}},\"comment\":{}}],[\"microcomponents.es3\",{\"_index\":14,\"name\":{\"20\":{}},\"comment\":{}}],[\"parent\",{\"_index\":10,\"name\":{\"16\":{},\"28\":{}},\"comment\":{}}],[\"parents\",{\"_index\":11,\"name\":{\"17\":{},\"29\":{}},\"comment\":{}}],[\"remove\",{\"_index\":5,\"name\":{\"5\":{},\"14\":{},\"24\":{}},\"comment\":{}}],[\"siblings\",{\"_index\":3,\"name\":{\"3\":{},\"15\":{},\"27\":{}},\"comment\":{}}],[\"target\",{\"_index\":7,\"name\":{\"7\":{},\"12\":{}},\"comment\":{}}]],\"pipeline\":[]}}");