@twobirds/microcomponents 0.0.3 → 0.0.6

package/public/docs/classes/microcomponents_es3.MC.html

@@ -21,9 +21,9 @@
 <ul class="tsd-hierarchy">
 <li><span class="target">MC</span></li></ul></section><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/e2e23f7/src/microcomponents.es3.js#L13">src/microcomponents.es3.js:13</a></li>
-<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/e2e23f7/src/microcomponents.es3.js#L18">src/microcomponents.es3.js:18</a></li>
-<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/e2e23f7/src/microcomponents.es3.js#L26">src/microcomponents.es3.js:26</a></li></ul></aside>
+<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/cb1aec4/src/microcomponents.es3.js#L13">src/microcomponents.es3.js:13</a></li>
+<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/cb1aec4/src/microcomponents.es3.js#L18">src/microcomponents.es3.js:18</a></li>
+<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/cb1aec4/src/microcomponents.es3.js#L26">src/microcomponents.es3.js:26</a></li></ul></aside>
 <section class="tsd-panel-group tsd-index-group">
 <section class="tsd-panel tsd-index-panel">
 <details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary">
@@ -61,14 +61,14 @@
 <h5>target: <span class="tsd-signature-type">any</span></h5></li></ul></div>
 <h4 class="tsd-returns-title">Returns <a href="microcomponents_es3.MC.html" class="tsd-signature-type" data-tsd-kind="Class">MC</a></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/e2e23f7/src/microcomponents.es3.js#L13">src/microcomponents.es3.js:13</a></li></ul></aside></li></ul></section></section>
+<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/cb1aec4/src/microcomponents.es3.js#L13">src/microcomponents.es3.js:13</a></li></ul></aside></li></ul></section></section>
 <section class="tsd-panel-group tsd-member-group">
 <h2>Properties</h2>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="_target" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>_target</span><a href="#_target" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">_target<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/e2e23f7/src/microcomponents.es3.js#L14">src/microcomponents.es3.js:14</a></li></ul></aside></section></section>
+<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/cb1aec4/src/microcomponents.es3.js#L14">src/microcomponents.es3.js:14</a></li></ul></aside></section></section>
 <section class="tsd-panel-group tsd-member-group">
 <h2>Methods</h2>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="children" class="tsd-anchor"></a>
@@ -83,7 +83,7 @@
 <h5>search: <span class="tsd-signature-type">any</span></h5></li></ul></div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/e2e23f7/src/microcomponents.es3.js#L75">src/microcomponents.es3.js:75</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/cb1aec4/src/microcomponents.es3.js#L75">src/microcomponents.es3.js:75</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="descendants" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>descendants</span><a href="#descendants" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
@@ -96,7 +96,7 @@
 <h5>search: <span class="tsd-signature-type">any</span></h5></li></ul></div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/e2e23f7/src/microcomponents.es3.js#L92">src/microcomponents.es3.js:92</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/cb1aec4/src/microcomponents.es3.js#L92">src/microcomponents.es3.js:92</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="parent" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>parent</span><a href="#parent" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
@@ -109,7 +109,7 @@
 <h5>search: <span class="tsd-signature-type">any</span></h5></li></ul></div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/e2e23f7/src/microcomponents.es3.js#L51">src/microcomponents.es3.js:51</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/cb1aec4/src/microcomponents.es3.js#L51">src/microcomponents.es3.js:51</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="parents" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>parents</span><a href="#parents" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
@@ -122,7 +122,7 @@
 <h5>search: <span class="tsd-signature-type">any</span></h5></li></ul></div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/e2e23f7/src/microcomponents.es3.js#L63">src/microcomponents.es3.js:63</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/cb1aec4/src/microcomponents.es3.js#L63">src/microcomponents.es3.js:63</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="siblings" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>siblings</span><a href="#siblings" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
@@ -135,7 +135,7 @@
 <h5>search: <span class="tsd-signature-type">any</span></h5></li></ul></div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/e2e23f7/src/microcomponents.es3.js#L35">src/microcomponents.es3.js:35</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/cb1aec4/src/microcomponents.es3.js#L35">src/microcomponents.es3.js:35</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="add" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <span>add</span><a href="#add" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
@@ -152,7 +152,7 @@
 <h5>element: <span class="tsd-signature-type">any</span></h5></li></ul></div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-symbol">typeof </span><a href="microcomponents_es3.MC.html" class="tsd-signature-type" data-tsd-kind="Class">MC</a></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/e2e23f7/src/microcomponents.es3.js#L18">src/microcomponents.es3.js:18</a></li></ul></aside></li></ul></section>
+<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/cb1aec4/src/microcomponents.es3.js#L18">src/microcomponents.es3.js:18</a></li></ul></aside></li></ul></section>
 <section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="remove" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <span>remove</span><a href="#remove" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
@@ -167,7 +167,7 @@
 <h5>key: <span class="tsd-signature-type">any</span></h5></li></ul></div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-symbol">typeof </span><a href="microcomponents_es3.MC.html" class="tsd-signature-type" data-tsd-kind="Class">MC</a></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/e2e23f7/src/microcomponents.es3.js#L26">src/microcomponents.es3.js:26</a></li></ul></aside></li></ul></section></section></div>
+<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/cb1aec4/src/microcomponents.es3.js#L26">src/microcomponents.es3.js:26</a></li></ul></aside></li></ul></section></section></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">

package/public/docs/functions/microcomponents_es3.__isEmpty.html

@@ -27,7 +27,7 @@
 <h5>obj: <span class="tsd-signature-type">any</span></h5></li></ul></div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/e2e23f7/src/microcomponents.es3.js#L3">src/microcomponents.es3.js:3</a></li></ul></aside></li></ul></section></div>
+<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/cb1aec4/src/microcomponents.es3.js#L3">src/microcomponents.es3.js:3</a></li></ul></aside></li></ul></section></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">

package/public/docs/index.html

@@ -17,46 +17,22 @@
   <h2>MICRO COMPONENTS</h2>
 </a>
 <p><img src="https://gitlab.com/twoBirds/microcomponents/-/raw/main/MicroComponents.svg" alt="Micro Components Logo"></p>
-<p>This code aims at <strong>improving Javascript modularity</strong>. It does not describe a specific Micro Component itself but rather describes they way they are <strong>organized</strong>. A typical example of a <strong>Micro Component</strong> can be found in &quot;additional concepts&quot; below.</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.</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.</p>
-<p>For an overview, continue reading.</p>
-<p>For a detailed functional description goto <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/main/microcomponents_usage.md?ref_type=heads">Micro Component Usage</a> and check the <a href="http://twobirds.gitlab.io/microcomponents/docs/modules.html">typedoc API documentation</a>.</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 delve a little deeper into how to use it, and what it already has been used for.</p>
 
-<a href="#why-would-i-give-this-a-try-in-my-company" id="why-would-i-give-this-a-try-in-my-company" style="color: inherit; text-decoration: none;">
-  <h2>Why would I give this a try in my company?</h2>
+<a href="#status" id="status" style="color: inherit; text-decoration: none;">
+  <h2>Status</h2>
 </a>
-<p>It is lightweight, proven and can yield positive results immediatly.</p>
+<p>WIP. Should be tested and done soon.</p>
 
-<a href="#as-the-cto" id="as-the-cto" style="color: inherit; text-decoration: none;">
-  <h3><strong>As the CTO</strong>:</h3>
+<a href="#general" id="general" style="color: inherit; text-decoration: none;">
+  <h2>General</h2>
 </a>
-<ul>
-<li><strong>Reusability</strong>: this works with every Javascript framework that allows for DOM access, and it will work as long as the DOM exists in browsers. That is, forever.</li>
-<li><strong>Scalability</strong>: scales perfectly by design.</li>
-<li><strong>Interoperability</strong>: where many teams in different projects should share specific business or UI logic, you want to have something that works in any JS framework you use.</li>
-</ul>
-
-<a href="#as-a-project-manager" id="as-a-project-manager" style="color: inherit; text-decoration: none;">
-  <h3><strong>As a Project Manager</strong>:</h3>
-</a>
-<ul>
-<li><strong>Separation of Concerns</strong>: since this is a modular approach you can <strong>split UI logic from Business logic</strong> and let diffent teams work on each.</li>
-<li>using this, you can <strong>work with external developers without the need to give them access to your projects code repository</strong>.</li>
-<li>you will find out that this allows your project to <strong>become independent from the &quot;tools hell&quot;</strong>. You tend to use <strong>DIY</strong> modules where you had tools before.</li>
-</ul>
-
-<a href="#as-a-javascript-developer" id="as-a-javascript-developer" style="color: inherit; text-decoration: none;">
-  <h3><strong>As a Javascript Developer</strong>:</h3>
-</a>
-<ul>
-<li>The learning curve to use this is more than shallow. 1 hour should be enough.</li>
-<li>This is based on <strong>plain Javascript/Typescript, HTML and CSS</strong>. There is no abstraction layer.</li>
-<li>From the very start <strong>it is fun to work with</strong>. You are back in control of your code without bigger frameworks, but you are able to interact with them.</li>
-<li>You can <strong>work for any customer right away</strong>. <strong>No training on their system required</strong>, just fulfill their micro component requirements.</li>
-<li>Over time, you can <strong>build your own framework or functional libraries</strong> from scratch.</li>
-</ul>
+<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>
@@ -78,33 +54,13 @@
 <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">import</span><span class="hl-3"> </span><span class="hl-4">&#39;MC&#39;</span><span class="hl-3"> </span><span class="hl-2">from</span><span class="hl-3"> </span><span class="hl-4">&#39;@twobirds/microcomponents&#39;</span><span class="hl-3">;</span><br/><span class="hl-2">import</span><span class="hl-3"> </span><span class="hl-4">&#39;Button&#39;</span><span class="hl-3"> </span><span class="hl-2">from</span><span class="hl-3"> </span><span class="hl-4">&#39;tb/ui&#39;</span><span class="hl-3">; </span><span class="hl-5">// made-up example library</span><br/><br/><span class="hl-5">// select first button element in DOM</span><br/><span class="hl-6">let</span><span class="hl-3"> </span><span class="hl-7">myButton</span><span class="hl-3"> = </span><span class="hl-7">document</span><span class="hl-3">.</span><span class="hl-8">querySelector</span><span class="hl-3">(</span><span class="hl-4">&#39;button&#39;</span><span class="hl-3">);</span><br/><br/><span class="hl-5">// this will add the micro component to the myButton._mc property:</span><br/><span class="hl-9">MC</span><span class="hl-3">.</span><span class="hl-8">add</span><span class="hl-3">( </span><span class="hl-7">myButton</span><span class="hl-3">, </span><span class="hl-4">&#39;tb_ui_button&#39;</span><span class="hl-3">, </span><span class="hl-6">new</span><span class="hl-3"> </span><span class="hl-8">Button</span><span class="hl-3">( </span><span class="hl-7">myButton</span><span class="hl-3">, { ...</span><span class="hl-7">config</span><span class="hl-3"> </span><span class="hl-7">data</span><span class="hl-3"> } ) );</span>
+<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-3"> </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>
+<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>
-<pre><code class="language-javascript"><span class="hl-7">console</span><span class="hl-3">.</span><span class="hl-8">log</span><span class="hl-3">( </span><span class="hl-7">myButton</span><span class="hl-3">.</span><span class="hl-7">_mc</span><span class="hl-3"> );</span><br/><span class="hl-5">// { tb_ui_button: { target: &lt;button&gt;, onClick: &lt;function&gt; } }</span>
-</code></pre>
-<p>For detailed information jump to <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/main/microcomponents_usage.md?ref_type=heads">Micro Component Usage</a>;</p>
-
-<a href="#history" id="history" style="color: inherit; text-decoration: none;">
-  <h2>History</h2>
-</a>
-<p>I have been working with this since 2004. I used this as core principle inside my twoBirds framework.</p>
-<p>This functionality has been used in very big and complicated data processing projects:</p>
-<ul>
-<li>to allow for web component like programming (as early as 2004)</li>
-<li>to encapsule UI handling</li>
-<li>to represent business processes and their tasks</li>
-<li>and lately to compose very complex native web components from distinct modular functionality.</li>
-</ul>
-<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.</p>
-
-<a href="#useful-links" id="useful-links" style="color: inherit; text-decoration: none;">
-  <h2>Useful Links</h2>
-</a>
-<p><a href="http://twobirds.gitlab.io/microcomponents/docs/modules.html">API documentation</a></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>

package/public/docs/interfaces/microcomponents.HTMLElementMc.html

@@ -23,7 +23,7 @@
 <ul class="tsd-hierarchy">
 <li><span class="target">HTMLElementMc</span></li></ul></li></ul></section><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/e2e23f7/src/microcomponents.ts#L210">src/microcomponents.ts:210</a></li></ul></aside>
+<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/cb1aec4/src/microcomponents.ts#L398">src/microcomponents.ts:398</a></li></ul></aside>
 <section class="tsd-panel-group tsd-index-group">
 <section class="tsd-panel tsd-index-panel">
 <details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary">
@@ -469,7 +469,7 @@
 <h3 class="tsd-anchor-link"><span>_mc</span><a href="#_mc" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">_mc<span class="tsd-signature-symbol">:</span> <a href="../classes/microcomponents.MC.html" class="tsd-signature-type" data-tsd-kind="Class">MC</a></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/e2e23f7/src/microcomponents.ts#L211">src/microcomponents.ts:211</a></li></ul></aside></section>
+<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/cb1aec4/src/microcomponents.ts#L399">src/microcomponents.ts:399</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface tsd-is-inherited tsd-is-external"><a id="accessKey" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>access<wbr/>Key</span><a href="#accessKey" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">access<wbr/>Key<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div><aside class="tsd-sources">

package/public/docs/modules/microcomponents.html

@@ -16,7 +16,7 @@
 <li><a href="microcomponents.html">microcomponents</a></li></ul>
 <h1>Module microcomponents</h1></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/e2e23f7/src/microcomponents.ts#L1">src/microcomponents.ts:1</a></li></ul></aside>
+<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/cb1aec4/src/microcomponents.ts#L1">src/microcomponents.ts:1</a></li></ul></aside>
 <section class="tsd-panel-group">
 <section class="tsd-panel tsd-typography"></section></section>
 <section class="tsd-panel-group tsd-index-group">

package/public/jsdoc/es3/files.html

@@ -0,0 +1,216 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+	<head>
+		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+		
+		<title>JsDoc Reference - File Index</title>
+		<meta name="generator" content="JsDoc Toolkit" />
+		
+		<style type="text/css">
+		/* default.css */
+body
+{
+	font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
+	width: 800px;
+}
+
+.header
+{
+	clear: both;
+	background-color: #ccc;
+	padding: 8px;
+}
+
+h1
+{
+	font-size: 150%;
+	font-weight: bold;
+	padding: 0;
+	margin: 1em 0 0 .3em;
+}
+
+hr
+{
+	border: none 0;
+	border-top: 1px solid #7F8FB1;
+	height: 1px;
+}
+
+pre.code
+{
+	display: block;
+	padding: 8px;
+	border: 1px dashed #ccc;
+}
+
+#index
+{
+	margin-top: 24px;
+	float: left;
+	width: 160px;
+	position: absolute;
+	left: 8px;
+	background-color: #F3F3F3;
+	padding: 8px;
+}
+
+#content
+{
+	margin-left: 190px;
+	width: 600px;
+}
+
+.classList
+{
+	list-style-type: none;
+	padding: 0;
+	margin: 0 0 0 8px;
+	font-family: arial, sans-serif;
+	font-size: 1em;
+	overflow: auto;
+}
+
+.classList li
+{
+	padding: 0;
+	margin: 0 0 8px 0;
+}
+
+.summaryTable { width: 100%; }
+
+h1.classTitle
+{
+	font-size:170%;
+	line-height:130%;
+}
+
+h2 { font-size: 110%; }
+caption, div.sectionTitle
+{
+	background-color: #7F8FB1;
+	color: #fff;
+	font-size:130%;
+	text-align: left;
+	padding: 2px 6px 2px 6px;
+	border: 1px #7F8FB1 solid;
+}
+
+div.sectionTitle { margin-bottom: 8px; }
+.summaryTable thead { display: none; }
+
+.summaryTable td
+{
+	vertical-align: top;
+	padding: 4px;
+	border-bottom: 1px #7F8FB1 solid;
+	border-right: 1px #7F8FB1 solid;
+}
+
+/*col#summaryAttributes {}*/
+.summaryTable td.attributes
+{
+	border-left: 1px #7F8FB1 solid;
+	width: 140px;
+	text-align: right;
+}
+
+td.attributes, .fixedFont
+{
+	line-height: 15px;
+	color: #002EBE;
+	font-family: "Courier New",Courier,monospace;
+	font-size: 13px;
+}
+
+.summaryTable td.nameDescription
+{
+	text-align: left;
+	font-size: 13px;
+	line-height: 15px;
+}
+
+.summaryTable td.nameDescription, .description
+{
+	line-height: 15px;
+	padding: 4px;
+	padding-left: 4px;
+}
+
+.summaryTable { margin-bottom: 8px; }
+
+ul.inheritsList
+{
+	list-style: square;
+	margin-left: 20px;
+	padding-left: 0;
+}
+
+.detailList {
+	margin-left: 20px; 
+	line-height: 15px;
+}
+.detailList dt { margin-left: 20px; }
+
+.detailList .heading
+{
+	font-weight: bold;
+	padding-bottom: 6px;
+	margin-left: 0;
+}
+
+.light, td.attributes, .light a:link, .light a:visited
+{
+	color: #777;
+	font-style: italic;
+}
+
+.fineprint
+{
+	text-align: right;
+	font-size: 10px;
+}
+		</style>
+	</head>
+	
+	<body>
+		<div id="header">
+</div>
+		
+		<div id="index">
+			<div align="center"><a href="index.html">Class Index</a>
+| <a href="files.html">File Index</a></div>
+<hr />
+<h2>Classes</h2>
+<ul class="classList">
+	
+	<li><i><a href="symbols/_global_.html">_global_</a></i></li>
+	
+</ul>
+<hr />
+		</div>
+		
+		<div id="content">
+			<h1 class="classTitle">File Index</h1>
+			
+			
+			<div>
+				<h2><a href="symbols/src/build_microcomponents.es3.js.html">./build/microcomponents.es3.js</a></h2>
+				
+				<dl>
+					
+					
+					
+					
+				</dl>
+			</div>
+			<hr />
+			
+			
+		</div>
+		<div class="fineprint" style="clear:both">
+			
+			Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Wed Oct 30 2024 23:18:46 GMT+0100 (MEZ)
+		</div>
+	</body>
+</html>