@twobirds/microcomponents 0.0.10 → 0.0.12

package/src/test.js

@@ -0,0 +1,245 @@
+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/typedoc.json

@@ -1,6 +1,6 @@
 {
 	"entryPoints": ["src/microcomponents.ts","src/microcomponents.es3.js"],
-	"out": "./public/docs/",
+	"out": "./public/",
 	"readme": "README.md",
 	"name": "Micro Components",
 	"tsconfig": "./tsconfig.json"

package/assets/index.html

@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Micro Components</title>
-</head>
-<body>
-    <a href="http://twobirds.gitlab.io/microcomponents/docs/modules.html" target="_blank">API</a>
-</body>
-</html>

package/jsdoc.conf.json

@@ -1,19 +0,0 @@
-{
-  "source": {
-    "include": ["src/microcomponents.js"],
-    "includePattern": ".+\\.js(doc|x)?$",
-    "excludePattern": "(^|\\/|\\\\)_"
-  },
-  "opts": {
-    "destination": "./public/jsdoc/es5+",
-    "recurse": false,
-    "template": "default"
-  },
-  "plugins": [
-    "plugins/markdown"
-  ],
-  "templates": {
-    "cleverLinks": true,
-    "monospaceLinks": true
-  }
-}

package/public/docs/assets/search.js

@@ -1 +0,0 @@
-window.searchData = JSON.parse("{\"kinds\":{\"2\":\"Module\",\"64\":\"Function\",\"128\":\"Class\",\"256\":\"Interface\",\"512\":\"Constructor\",\"1024\":\"Property\",\"2048\":\"Method\",\"65536\":\"Type literal\"},\"rows\":[{\"kind\":2,\"name\":\"microcomponents\",\"url\":\"modules/microcomponents.html\",\"classes\":\"tsd-kind-module\"},{\"kind\":256,\"name\":\"HTMLElementMc\",\"url\":\"interfaces/microcomponents.HTMLElementMc.html\",\"classes\":\"tsd-kind-interface tsd-parent-kind-module\",\"parent\":\"microcomponents\"},{\"kind\":1024,\"name\":\"_mc\",\"url\":\"interfaces/microcomponents.HTMLElementMc.html#_mc\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"microcomponents.HTMLElementMc\"},{\"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\":1024,\"name\":\"privateMCs\",\"url\":\"classes/microcomponents.MC.html#privateMCs\",\"classes\":\"tsd-kind-property tsd-parent-kind-class tsd-is-private\",\"parent\":\"microcomponents.MC\"},{\"kind\":65536,\"name\":\"__type\",\"url\":\"classes/microcomponents.MC.html#privateMCs.__type-1\",\"classes\":\"tsd-kind-type-literal tsd-parent-kind-property\",\"parent\":\"microcomponents.MC.privateMCs\"},{\"kind\":1024,\"name\":\"_mc\",\"url\":\"classes/microcomponents.MC.html#_mc\",\"classes\":\"tsd-kind-property tsd-parent-kind-class\",\"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\":2048,\"name\":\"getMicroComponents\",\"url\":\"classes/microcomponents.MC.html#getMicroComponents\",\"classes\":\"tsd-kind-method tsd-parent-kind-class tsd-is-private\",\"parent\":\"microcomponents.MC\"},{\"kind\":2048,\"name\":\"traverseNodes\",\"url\":\"classes/microcomponents.MC.html#traverseNodes\",\"classes\":\"tsd-kind-method tsd-parent-kind-class tsd-is-private\",\"parent\":\"microcomponents.MC\"},{\"kind\":2048,\"name\":\"isDOM\",\"url\":\"classes/microcomponents.MC.html#isDOM\",\"classes\":\"tsd-kind-method tsd-parent-kind-class tsd-is-private\",\"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,32.055]],[\"comment/0\",[]],[\"name/1\",[1,32.055]],[\"comment/1\",[]],[\"name/2\",[2,26.946]],[\"comment/2\",[]],[\"name/3\",[3,26.946]],[\"comment/3\",[]],[\"name/4\",[4,32.055]],[\"comment/4\",[]],[\"name/5\",[5,23.582]],[\"comment/5\",[]],[\"name/6\",[6,23.582]],[\"comment/6\",[]],[\"name/7\",[7,23.582]],[\"comment/7\",[]],[\"name/8\",[8,26.946]],[\"comment/8\",[]],[\"name/9\",[9,32.055]],[\"comment/9\",[]],[\"name/10\",[10,32.055]],[\"comment/10\",[]],[\"name/11\",[11,26.946]],[\"comment/11\",[]],[\"name/12\",[2,26.946]],[\"comment/12\",[]],[\"name/13\",[11,26.946]],[\"comment/13\",[]],[\"name/14\",[12,32.055]],[\"comment/14\",[]],[\"name/15\",[13,32.055]],[\"comment/15\",[]],[\"name/16\",[14,32.055]],[\"comment/16\",[]],[\"name/17\",[6,23.582]],[\"comment/17\",[]],[\"name/18\",[7,23.582]],[\"comment/18\",[]],[\"name/19\",[5,23.582]],[\"comment/19\",[]],[\"name/20\",[15,26.946]],[\"comment/20\",[]],[\"name/21\",[16,26.946]],[\"comment/21\",[]],[\"name/22\",[17,26.946]],[\"comment/22\",[]],[\"name/23\",[18,26.946]],[\"comment/23\",[]],[\"name/24\",[19,32.055]],[\"comment/24\",[]],[\"name/25\",[20,32.055]],[\"comment/25\",[]],[\"name/26\",[3,26.946]],[\"comment/26\",[]],[\"name/27\",[6,23.582]],[\"comment/27\",[]],[\"name/28\",[7,23.582]],[\"comment/28\",[]],[\"name/29\",[8,26.946]],[\"comment/29\",[]],[\"name/30\",[21,32.055]],[\"comment/30\",[]],[\"name/31\",[5,23.582]],[\"comment/31\",[]],[\"name/32\",[15,26.946]],[\"comment/32\",[]],[\"name/33\",[16,26.946]],[\"comment/33\",[]],[\"name/34\",[17,26.946]],[\"comment/34\",[]],[\"name/35\",[18,26.946]],[\"comment/35\",[]]],\"invertedIndex\":[[\"__isempty\",{\"_index\":20,\"name\":{\"25\":{}},\"comment\":{}}],[\"__type\",{\"_index\":11,\"name\":{\"11\":{},\"13\":{}},\"comment\":{}}],[\"_mc\",{\"_index\":2,\"name\":{\"2\":{},\"12\":{}},\"comment\":{}}],[\"_target\",{\"_index\":21,\"name\":{\"30\":{}},\"comment\":{}}],[\"add\",{\"_index\":6,\"name\":{\"6\":{},\"17\":{},\"27\":{}},\"comment\":{}}],[\"children\",{\"_index\":17,\"name\":{\"22\":{},\"34\":{}},\"comment\":{}}],[\"constructor\",{\"_index\":8,\"name\":{\"8\":{},\"29\":{}},\"comment\":{}}],[\"debug\",{\"_index\":4,\"name\":{\"4\":{}},\"comment\":{}}],[\"descendants\",{\"_index\":18,\"name\":{\"23\":{},\"35\":{}},\"comment\":{}}],[\"getmicrocomponents\",{\"_index\":12,\"name\":{\"14\":{}},\"comment\":{}}],[\"htmlelementmc\",{\"_index\":1,\"name\":{\"1\":{}},\"comment\":{}}],[\"isdom\",{\"_index\":14,\"name\":{\"16\":{}},\"comment\":{}}],[\"mc\",{\"_index\":3,\"name\":{\"3\":{},\"26\":{}},\"comment\":{}}],[\"microcomponents\",{\"_index\":0,\"name\":{\"0\":{}},\"comment\":{}}],[\"microcomponents.es3\",{\"_index\":19,\"name\":{\"24\":{}},\"comment\":{}}],[\"parent\",{\"_index\":15,\"name\":{\"20\":{},\"32\":{}},\"comment\":{}}],[\"parents\",{\"_index\":16,\"name\":{\"21\":{},\"33\":{}},\"comment\":{}}],[\"privatemcs\",{\"_index\":10,\"name\":{\"10\":{}},\"comment\":{}}],[\"remove\",{\"_index\":7,\"name\":{\"7\":{},\"18\":{},\"28\":{}},\"comment\":{}}],[\"siblings\",{\"_index\":5,\"name\":{\"5\":{},\"19\":{},\"31\":{}},\"comment\":{}}],[\"target\",{\"_index\":9,\"name\":{\"9\":{}},\"comment\":{}}],[\"traversenodes\",{\"_index\":13,\"name\":{\"15\":{}},\"comment\":{}}]],\"pipeline\":[]}}");

package/public/docs/index.html

@@ -1,97 +0,0 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Micro Components</title><meta name="description" content="Documentation for Micro Components"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script async src="assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
-<div class="tsd-toolbar-contents container">
-<div class="table-cell" id="tsd-search" data-base=".">
-<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
-<div class="field">
-<div id="tsd-toolbar-links"></div></div>
-<ul class="results">
-<li class="state loading">Preparing search index...</li>
-<li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">Micro Components</a></div>
-<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
-<div class="container container-main">
-<div class="col-8 col-content">
-<div class="tsd-page-title">
-<h2>Micro Components</h2></div>
-<div class="tsd-panel tsd-typography">
-<a href="#micro-components" id="micro-components" style="color: inherit; text-decoration: none;">
-  <h2>MICRO COMPONENTS</h2>
-</a>
-<p><img src="https://gitlab.com/twoBirds/microcomponents/-/raw/main/MicroComponents.svg" alt="Micro Components Logo"></p>
-
-<a href="#status" id="status" style="color: inherit; text-decoration: none;">
-  <h2>Status</h2>
-</a>
-<p>WIP. Should be tested and done soon.</p>
-
-<a href="#general" id="general" style="color: inherit; text-decoration: none;">
-  <h2>General</h2>
-</a>
-<p>This code aims at improving Javascript modularity. It does not describe a specific Micro Component itself but rather describes they way they are <strong>organized</strong>.</p>
-<p>Using micro components enforces <strong>DRY, KISS and SOLID</strong> principles in Javascript programming. Read this <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/main/MicroComponentProposal_draft.md?ref_type=heads">RFC</a> for the shortest info, and <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/main/microcomponents_why.md?ref_type=heads">click here to see why you may want to use it</a>.</p>
-<p>This is a low-level approach. It consists of a single class with 3 static methods and 5 selector methods, and weights in at ~2 kB. Also there is an ES3 version to help e.g. <a href="https://en.wikipedia.org/wiki/Hybrid_Broadcast_Broadband_TV">hbbtv</a> modular JS coding, or any other device that relies on ES3. The latter is WIP, backporting is currently last on my list.</p>
-<p>For a short usage description goto <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/main/microcomponents_usage.md?ref_type=heads">Micro Component Usage</a>.</p>
-<p>Check the <a href="http://twobirds.gitlab.io/microcomponents/docs/modules.html">typedoc API reference</a> if you want to drill into the source code.</p>
-<p>Or read the more detailed <a href="http://twobirds.gitlab.io/microcomponents/jsdoc/es5+/index.html">jsdoc API documentation</a> which contains <strong>examples</strong>.</p>
-<p>To see what can be done, go to <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/main/microcomponents_magic.md?ref_type=heads">additional concepts</a> which shows what it already has been used for.</p>
-
-<a href="#functional-requirements" id="functional-requirements" style="color: inherit; text-decoration: none;">
-  <h2>Functional Requirements</h2>
-</a>
-<ul>
-<li>I want to <strong>enrich a standard HTMLElement instance with encapsuled and modular javascript</strong>, without having to resort to web components or big frameworks.</li>
-<li>I want to have an <strong>interface</strong> into this functionality that I can both tight and loosely couple.</li>
-<li>I want to <strong>import and use Micro Components in any framework</strong> that allows for direct DOM access.</li>
-<li>I want <strong>a single location</strong> in an HTMLElement instance where all this functionality is <strong>stored and sufficiently organized</strong>.</li>
-<li>I want to be able to use <strong>selectors</strong> to find those instances in the DOM.</li>
-<li>All this must stricly follow <strong>web standards</strong>.</li>
-</ul>
-
-<a href="#simple-usage" id="simple-usage" style="color: inherit; text-decoration: none;">
-  <h2>Simple Usage:</h2>
-</a>
-<p><strong>Micro Components</strong> can be added to to a DOM element like this:</p>
-<p>before:</p>
-<pre><code class="language-HTML"><span class="hl-0">&lt;</span><span class="hl-1">button</span><span class="hl-0">&gt;&lt;/</span><span class="hl-1">button</span><span class="hl-0">&gt;</span>
-</code></pre>
-<p>code: (assume &quot;Button&quot; is some class in a library)</p>
-<pre><code class="language-javascript"><span class="hl-2">// create the micro component class</span><br/><span class="hl-3">class</span><span class="hl-4"> </span><span class="hl-5">MyMC</span><span class="hl-4"> </span><span class="hl-3">extends</span><span class="hl-4"> </span><span class="hl-5">MC</span><span class="hl-4">{</span><br/><br/><span class="hl-4">    </span><span class="hl-3">constructor</span><span class="hl-4">( </span><span class="hl-6">target</span><span class="hl-4"> ){</span><br/><span class="hl-4">        </span><span class="hl-3">super</span><span class="hl-4">( </span><span class="hl-6">target</span><span class="hl-4"> );</span><br/><span class="hl-4">        </span><span class="hl-3">this</span><span class="hl-4">.</span><span class="hl-6">target</span><span class="hl-4"> = </span><span class="hl-6">target</span><span class="hl-4">;</span><br/><span class="hl-4">    }</span><br/><span class="hl-4">}</span><br/><br/><span class="hl-3">const</span><span class="hl-4"> </span><span class="hl-7">element</span><span class="hl-4"> = </span><span class="hl-6">document</span><span class="hl-4">.</span><span class="hl-8">querySelector</span><span class="hl-4">(</span><span class="hl-9">&#39;div&#39;</span><span class="hl-4">)</span><br/><br/><span class="hl-2">// Add the top level microcomponent to the target element</span><br/><span class="hl-3">let</span><span class="hl-4"> </span><span class="hl-6">mcc</span><span class="hl-4"> = </span><span class="hl-7">MC</span><span class="hl-4">.</span><span class="hl-8">add</span><span class="hl-4">(</span><br/><span class="hl-4">    </span><span class="hl-6">element</span><span class="hl-4">,</span><br/><span class="hl-4">    </span><span class="hl-9">&#39;myMC&#39;</span><span class="hl-4">,</span><br/><span class="hl-4">    </span><span class="hl-3">new</span><span class="hl-4"> </span><span class="hl-8">MyMC</span><span class="hl-4">( </span><span class="hl-6">element</span><span class="hl-4"> )</span><br/><span class="hl-4">);</span><br/><br/><span class="hl-2">// Add an inner (private) microcomponent to mcc</span><br/><span class="hl-3">let</span><span class="hl-4"> </span><span class="hl-6">mcc</span><span class="hl-4">.add(</span><br/><span class="hl-4">    </span><span class="hl-9">&#39;myInnerMC&#39;</span><span class="hl-4">,</span><br/><span class="hl-4">    </span><span class="hl-3">new</span><span class="hl-4"> </span><span class="hl-8">MyMC</span><span class="hl-4">( </span><span class="hl-6">element</span><span class="hl-4"> )</span><br/><span class="hl-4">);</span><br/><br/><span class="hl-6">console</span><span class="hl-4">.</span><span class="hl-8">log</span><span class="hl-4">( </span><span class="hl-6">element</span><span class="hl-4">.</span><span class="hl-6">_mc</span><span class="hl-4"> );</span><br/><span class="hl-2">// { &#39;myMC&#39;: { target: (element) } }</span><br/><br/><span class="hl-6">console</span><span class="hl-4">.</span><span class="hl-8">log</span><span class="hl-4">( </span><span class="hl-6">element</span><span class="hl-4">.</span><span class="hl-6">_mc</span><span class="hl-4">.</span><span class="hl-6">myMC</span><span class="hl-4"> );</span><br/><span class="hl-2">// { target: (element) }</span><br/><br/><span class="hl-6">console</span><span class="hl-4">.</span><span class="hl-8">log</span><span class="hl-4">( </span><span class="hl-6">mcc</span><span class="hl-4">.</span><span class="hl-8">siblings</span><span class="hl-4">() );</span><br/><span class="hl-2">// [ { target: (element) } ]</span>
-</code></pre>
-<p>after:</p>
-<pre><code class="language-HTML"><span class="hl-0">&lt;</span><span class="hl-1">button</span><span class="hl-4"> </span><span class="hl-10">_mc</span><span class="hl-0">&gt;&lt;/</span><span class="hl-1">button</span><span class="hl-0">&gt;</span>
-</code></pre>
-<p>_mc indicates that this HTML element contains at least one micro component. This is needed for the <strong>selectors</strong>.</p>
-<p>I decided to extract this functionality from the <a href="https://www.npmjs.com/package/twobirds-core">twoBirds framework</a>, since it is framework agnostic, and relies solely on the standard DOM and native javascript or typescript, and is a useful tool in itself. Also this will be a dependency in twoBirds then.</p>
-
-<a href="#contact" id="contact" style="color: inherit; text-decoration: none;">
-  <h2>Contact</h2>
-</a>
-<p>Feel free to contact me for any questions or inquiries:</p>
-<p>email <a href="mailto:fthuerigen@gmail.com?subject=Micro%20Components">Frank Thürigen</a> or <a href="skype:frank.thuerigen">Skype</a></p>
-<p>And yes, you can <a href="https://gofund.me/076c614c">fund this</a>.</p>
-</div></div>
-<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-<div class="tsd-navigation settings">
-<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
-<div class="tsd-accordion-details">
-<div class="tsd-filter-visibility">
-<h4 class="uppercase">Member Visibility</h4><form>
-<ul id="tsd-filter-options">
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
-<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
-<div class="tsd-theme-toggle">
-<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
-<nav class="tsd-navigation primary">
-<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
-<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
-<div class="tsd-accordion-details">
-<ul>
-<li class="current selected"><a href="modules.html">Micro <wbr/>Components</a>
-<ul>
-<li class="tsd-kind-module"><a href="modules/microcomponents.html">microcomponents</a></li>
-<li class="tsd-kind-module"><a href="modules/microcomponents_es3.html">microcomponents.es3</a></li></ul></li></ul></div></details></nav></div></div>
-<div class="container tsd-generator">
-<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
-<div class="overlay"></div><script src="assets/main.js"></script></body></html>