@twobirds/microcomponents 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/.gitlab-ci.yml +16 -0
  2. package/MicroComponentProposal_draft.md +10 -7
  3. package/README.md +10 -6
  4. package/assets/fiddle/MicroComponents.svg +15 -0
  5. package/assets/fiddle/fiddle.css +0 -0
  6. package/assets/fiddle/fiddle.js +0 -0
  7. package/assets/fiddle/index.html +0 -0
  8. package/assets/index.html +11 -0
  9. package/dist/microcomponents.d.ts +8 -3
  10. package/dist/microcomponents.d.ts.map +1 -1
  11. package/dist/microcomponents.js +87 -47
  12. package/dist/microcomponents.min.js +23 -16
  13. package/dist/microcomponents.ts +212 -0
  14. package/package.json +27 -6
  15. package/public/docs/assets/search.js +1 -0
  16. package/{docs → public/docs}/classes/microcomponents.MC.html +73 -31
  17. package/{docs → public/docs}/classes/microcomponents_es3.MC.html +16 -16
  18. package/{docs → public/docs}/functions/microcomponents_es3.__isEmpty.html +5 -5
  19. package/{docs → public/docs}/index.html +17 -12
  20. package/{docs → public/docs}/interfaces/microcomponents.HTMLElementMc.html +6 -6
  21. package/{docs → public/docs}/modules/microcomponents.html +5 -5
  22. package/{docs → public/docs}/modules/microcomponents_es3.html +4 -4
  23. package/{docs → public/docs}/modules.html +5 -5
  24. package/public/fiddle/MicroComponents.svg +15 -0
  25. package/public/fiddle/fiddle.css +0 -0
  26. package/public/fiddle/fiddle.js +0 -0
  27. package/public/fiddle/index.html +0 -0
  28. package/public/index.html +11 -0
  29. package/src/microcomponents.ts +97 -54
  30. package/typedoc.json +3 -3
  31. package/docs/assets/search.js +0 -1
  32. /package/{docs → public/docs}/.nojekyll +0 -0
  33. /package/{docs → public/docs}/assets/highlight.css +0 -0
  34. /package/{docs → public/docs}/assets/main.js +0 -0
  35. /package/{docs → public/docs}/assets/style.css +0 -0
@@ -1,4 +1,4 @@
1
- <!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>__isEmpty | microcomponents</title><meta name="description" content="Documentation for microcomponents"/><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">
1
+ <!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>__isEmpty | 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">
2
2
  <div class="tsd-toolbar-contents container">
3
3
  <div class="table-cell" id="tsd-search" data-base="..">
4
4
  <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>
@@ -6,13 +6,13 @@
6
6
  <div id="tsd-toolbar-links"></div></div>
7
7
  <ul class="results">
8
8
  <li class="state loading">Preparing search index...</li>
9
- <li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">microcomponents</a></div>
9
+ <li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Micro Components</a></div>
10
10
  <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>
11
11
  <div class="container container-main">
12
12
  <div class="col-8 col-content">
13
13
  <div class="tsd-page-title">
14
14
  <ul class="tsd-breadcrumb">
15
- <li><a href="../modules.html">microcomponents</a></li>
15
+ <li><a href="../modules.html">Micro Components</a></li>
16
16
  <li><a href="../modules/microcomponents_es3.html">microcomponents.es3</a></li>
17
17
  <li><a href="microcomponents_es3.__isEmpty.html">__isEmpty</a></li></ul>
18
18
  <h1>Function __isEmpty</h1></div>
@@ -27,7 +27,7 @@
27
27
  <h5>obj: <span class="tsd-signature-type">any</span></h5></li></ul></div>
28
28
  <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4><aside class="tsd-sources">
29
29
  <ul>
30
- <li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/1c55793/src/microcomponents.es3.js#L3">src/microcomponents.es3.js:3</a></li></ul></aside></li></ul></section></div>
30
+ <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>
31
31
  <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
32
32
  <div class="tsd-navigation settings">
33
33
  <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
@@ -47,7 +47,7 @@
47
47
  <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>
48
48
  <div class="tsd-accordion-details">
49
49
  <ul>
50
- <li class="current"><a href="../modules.html">microcomponents</a>
50
+ <li class="current"><a href="../modules.html">Micro <wbr/>Components</a>
51
51
  <ul>
52
52
  <li class="tsd-kind-module"><a href="../modules/microcomponents.html">microcomponents</a></li>
53
53
  <li class="current tsd-kind-module"><a href="../modules/microcomponents_es3.html">microcomponents.es3</a></li></ul></li></ul></div></details></nav>
@@ -1,4 +1,4 @@
1
- <!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>microcomponents</title><meta name="description" content="Documentation for microcomponents"/><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">
1
+ <!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">
2
2
  <div class="tsd-toolbar-contents container">
3
3
  <div class="table-cell" id="tsd-search" data-base=".">
4
4
  <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>
@@ -6,22 +6,22 @@
6
6
  <div id="tsd-toolbar-links"></div></div>
7
7
  <ul class="results">
8
8
  <li class="state loading">Preparing search index...</li>
9
- <li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">microcomponents</a></div>
9
+ <li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">Micro Components</a></div>
10
10
  <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>
11
11
  <div class="container container-main">
12
12
  <div class="col-8 col-content">
13
13
  <div class="tsd-page-title">
14
- <h2>microcomponents</h2></div>
14
+ <h2>Micro Components</h2></div>
15
15
  <div class="tsd-panel tsd-typography">
16
16
  <a href="#micro-components" id="micro-components" style="color: inherit; text-decoration: none;">
17
17
  <h2>MICRO COMPONENTS</h2>
18
18
  </a>
19
- <p><img src="./MicroComponents.svg" alt="Micro Components Logo"></p>
19
+ <p><img src="https://gitlab.com/twoBirds/microcomponents/-/raw/main/MicroComponents.svg" alt="Micro Components Logo"></p>
20
20
  <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>
21
- <p>Using micro components enforces <strong>DRY, KISS and SOLID</strong> principles in Javascript programming. Read this <a href="./MicroComponentProposal_draft.md?ref_type=heads">RFC</a> for the shortest info.</p>
22
- <p>This is a low-level approach. It consists of a single class with 2 static methods and 5 selector methods, and weights less than 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>
21
+ <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>
22
+ <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>
23
23
  <p>For an overview, continue reading.</p>
24
- <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>.</p>
24
+ <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>
25
25
  <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>
26
26
 
27
27
  <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;">
@@ -33,7 +33,7 @@
33
33
  <h3><strong>As the CTO</strong>:</h3>
34
34
  </a>
35
35
  <ul>
36
- <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.</li>
36
+ <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>
37
37
  <li><strong>Scalability</strong>: scales perfectly by design.</li>
38
38
  <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>
39
39
  </ul>
@@ -78,7 +78,7 @@
78
78
  <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>
79
79
  </code></pre>
80
80
  <p>code: (assume &quot;Button&quot; is some class in a library)</p>
81
- <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>
81
+ <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>
82
82
  </code></pre>
83
83
  <p>after:</p>
84
84
  <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>
@@ -99,7 +99,12 @@
99
99
  <li>to represent business processes and their tasks</li>
100
100
  <li>and lately to compose very complex native web components from distinct modular functionality.</li>
101
101
  </ul>
102
- <p>I decided extract this 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.</p>
102
+ <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>
103
+
104
+ <a href="#useful-links" id="useful-links" style="color: inherit; text-decoration: none;">
105
+ <h2>Useful Links</h2>
106
+ </a>
107
+ <p><a href="http://twobirds.gitlab.io/microcomponents/docs/modules.html">API documentation</a></p>
103
108
 
104
109
  <a href="#contact" id="contact" style="color: inherit; text-decoration: none;">
105
110
  <h2>Contact</h2>
@@ -127,9 +132,9 @@
127
132
  <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>
128
133
  <div class="tsd-accordion-details">
129
134
  <ul>
130
- <li class="current selected"><a href="modules.html">microcomponents</a>
135
+ <li class="current selected"><a href="modules.html">Micro <wbr/>Components</a>
131
136
  <ul>
132
- <li class="selected tsd-kind-module"><a href="modules/microcomponents.html">microcomponents</a></li>
137
+ <li class="tsd-kind-module"><a href="modules/microcomponents.html">microcomponents</a></li>
133
138
  <li class="tsd-kind-module"><a href="modules/microcomponents_es3.html">microcomponents.es3</a></li></ul></li></ul></div></details></nav></div></div>
134
139
  <div class="container tsd-generator">
135
140
  <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
@@ -1,4 +1,4 @@
1
- <!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>HTMLElementMc | microcomponents</title><meta name="description" content="Documentation for microcomponents"/><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">
1
+ <!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>HTMLElementMc | 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">
2
2
  <div class="tsd-toolbar-contents container">
3
3
  <div class="table-cell" id="tsd-search" data-base="..">
4
4
  <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>
@@ -6,13 +6,13 @@
6
6
  <div id="tsd-toolbar-links"></div></div>
7
7
  <ul class="results">
8
8
  <li class="state loading">Preparing search index...</li>
9
- <li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">microcomponents</a></div>
9
+ <li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Micro Components</a></div>
10
10
  <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>
11
11
  <div class="container container-main">
12
12
  <div class="col-8 col-content">
13
13
  <div class="tsd-page-title">
14
14
  <ul class="tsd-breadcrumb">
15
- <li><a href="../modules.html">microcomponents</a></li>
15
+ <li><a href="../modules.html">Micro Components</a></li>
16
16
  <li><a href="../modules/microcomponents.html">microcomponents</a></li>
17
17
  <li><a href="microcomponents.HTMLElementMc.html">HTMLElementMc</a></li></ul>
18
18
  <h1>Interface HTMLElementMc</h1></div>
@@ -23,7 +23,7 @@
23
23
  <ul class="tsd-hierarchy">
24
24
  <li><span class="target">HTMLElementMc</span></li></ul></li></ul></section><aside class="tsd-sources">
25
25
  <ul>
26
- <li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/1c55793/src/microcomponents.ts#L167">src/microcomponents.ts:167</a></li></ul></aside>
26
+ <li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/e2e23f7/src/microcomponents.ts#L210">src/microcomponents.ts:210</a></li></ul></aside>
27
27
  <section class="tsd-panel-group tsd-index-group">
28
28
  <section class="tsd-panel tsd-index-panel">
29
29
  <details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary">
@@ -469,7 +469,7 @@
469
469
  <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>
470
470
  <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">
471
471
  <ul>
472
- <li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/1c55793/src/microcomponents.ts#L168">src/microcomponents.ts:168</a></li></ul></aside></section>
472
+ <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>
473
473
  <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>
474
474
  <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>
475
475
  <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">
@@ -3298,7 +3298,7 @@
3298
3298
  <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>
3299
3299
  <div class="tsd-accordion-details">
3300
3300
  <ul>
3301
- <li class="current"><a href="../modules.html">microcomponents</a>
3301
+ <li class="current"><a href="../modules.html">Micro <wbr/>Components</a>
3302
3302
  <ul>
3303
3303
  <li class="current tsd-kind-module"><a href="../modules/microcomponents.html">microcomponents</a></li>
3304
3304
  <li class="tsd-kind-module"><a href="../modules/microcomponents_es3.html">microcomponents.es3</a></li></ul></li></ul></div></details></nav>
@@ -1,4 +1,4 @@
1
- <!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>microcomponents</title><meta name="description" content="Documentation for microcomponents"/><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">
1
+ <!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>microcomponents | 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">
2
2
  <div class="tsd-toolbar-contents container">
3
3
  <div class="table-cell" id="tsd-search" data-base="..">
4
4
  <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>
@@ -6,17 +6,17 @@
6
6
  <div id="tsd-toolbar-links"></div></div>
7
7
  <ul class="results">
8
8
  <li class="state loading">Preparing search index...</li>
9
- <li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">microcomponents</a></div>
9
+ <li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Micro Components</a></div>
10
10
  <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>
11
11
  <div class="container container-main">
12
12
  <div class="col-8 col-content">
13
13
  <div class="tsd-page-title">
14
14
  <ul class="tsd-breadcrumb">
15
- <li><a href="../modules.html">microcomponents</a></li>
15
+ <li><a href="../modules.html">Micro Components</a></li>
16
16
  <li><a href="microcomponents.html">microcomponents</a></li></ul>
17
17
  <h1>Module microcomponents</h1></div><aside class="tsd-sources">
18
18
  <ul>
19
- <li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/1c55793/src/microcomponents.ts#L1">src/microcomponents.ts:1</a></li></ul></aside>
19
+ <li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/e2e23f7/src/microcomponents.ts#L1">src/microcomponents.ts:1</a></li></ul></aside>
20
20
  <section class="tsd-panel-group">
21
21
  <section class="tsd-panel tsd-typography"></section></section>
22
22
  <section class="tsd-panel-group tsd-index-group">
@@ -49,7 +49,7 @@
49
49
  <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>
50
50
  <div class="tsd-accordion-details">
51
51
  <ul>
52
- <li class="current"><a href="../modules.html">microcomponents</a>
52
+ <li class="current"><a href="../modules.html">Micro <wbr/>Components</a>
53
53
  <ul>
54
54
  <li class="current selected tsd-kind-module"><a href="microcomponents.html">microcomponents</a></li>
55
55
  <li class="tsd-kind-module"><a href="microcomponents_es3.html">microcomponents.es3</a></li></ul></li></ul></div></details></nav>
@@ -1,4 +1,4 @@
1
- <!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>microcomponents.es3 | microcomponents</title><meta name="description" content="Documentation for microcomponents"/><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">
1
+ <!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>microcomponents.es3 | 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">
2
2
  <div class="tsd-toolbar-contents container">
3
3
  <div class="table-cell" id="tsd-search" data-base="..">
4
4
  <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>
@@ -6,13 +6,13 @@
6
6
  <div id="tsd-toolbar-links"></div></div>
7
7
  <ul class="results">
8
8
  <li class="state loading">Preparing search index...</li>
9
- <li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">microcomponents</a></div>
9
+ <li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Micro Components</a></div>
10
10
  <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>
11
11
  <div class="container container-main">
12
12
  <div class="col-8 col-content">
13
13
  <div class="tsd-page-title">
14
14
  <ul class="tsd-breadcrumb">
15
- <li><a href="../modules.html">microcomponents</a></li>
15
+ <li><a href="../modules.html">Micro Components</a></li>
16
16
  <li><a href="microcomponents_es3.html">microcomponents.es3</a></li></ul>
17
17
  <h1>Module microcomponents.es3</h1></div>
18
18
  <section class="tsd-panel-group">
@@ -47,7 +47,7 @@
47
47
  <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>
48
48
  <div class="tsd-accordion-details">
49
49
  <ul>
50
- <li class="current"><a href="../modules.html">microcomponents</a>
50
+ <li class="current"><a href="../modules.html">Micro <wbr/>Components</a>
51
51
  <ul>
52
52
  <li class="tsd-kind-module"><a href="microcomponents.html">microcomponents</a></li>
53
53
  <li class="current selected tsd-kind-module"><a href="microcomponents_es3.html">microcomponents.es3</a></li></ul></li></ul></div></details></nav>
@@ -1,4 +1,4 @@
1
- <!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>microcomponents</title><meta name="description" content="Documentation for microcomponents"/><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">
1
+ <!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">
2
2
  <div class="tsd-toolbar-contents container">
3
3
  <div class="table-cell" id="tsd-search" data-base=".">
4
4
  <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>
@@ -6,12 +6,12 @@
6
6
  <div id="tsd-toolbar-links"></div></div>
7
7
  <ul class="results">
8
8
  <li class="state loading">Preparing search index...</li>
9
- <li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">microcomponents</a></div>
9
+ <li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">Micro Components</a></div>
10
10
  <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>
11
11
  <div class="container container-main">
12
12
  <div class="col-8 col-content">
13
13
  <div class="tsd-page-title">
14
- <h2>microcomponents</h2></div>
14
+ <h2>Micro Components</h2></div>
15
15
  <section class="tsd-panel-group tsd-index-group">
16
16
  <section class="tsd-panel tsd-index-panel">
17
17
  <h3 class="tsd-index-heading uppercase">Index</h3>
@@ -39,9 +39,9 @@
39
39
  <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>
40
40
  <div class="tsd-accordion-details">
41
41
  <ul>
42
- <li class="current selected"><a href="modules.html">microcomponents</a>
42
+ <li class="current selected"><a href="modules.html">Micro <wbr/>Components</a>
43
43
  <ul>
44
- <li class="selected tsd-kind-module"><a href="modules/microcomponents.html">microcomponents</a></li>
44
+ <li class="tsd-kind-module"><a href="modules/microcomponents.html">microcomponents</a></li>
45
45
  <li class="tsd-kind-module"><a href="modules/microcomponents_es3.html">microcomponents.es3</a></li></ul></li></ul></div></details></nav></div></div>
46
46
  <div class="container tsd-generator">
47
47
  <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
@@ -0,0 +1,15 @@
1
+ <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
2
+ <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
3
+ <title>test</title>
4
+ <rect fill="transparent" x="0" y="0" width="200" height="200" fill-opacity="1"/>
5
+ <g style="fill:transparent">
6
+ <title>first bird</title>
7
+ <path fill="#18829c" d="
8
+ m15,160
9
+ a30,75 45 1 0 160,-150
10
+ a20,50 225 1 1 -110,100
11
+ a12,25 45 1 1 60,-50
12
+ a20,50 225 1 0 -110,100
13
+ " />
14
+ </g>
15
+ </svg>
File without changes
File without changes
File without changes
@@ -0,0 +1,11 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Micro Components</title>
7
+ </head>
8
+ <body>
9
+ <a href="http://twobirds.gitlab.io/microcomponents/docs/modules.html" target="_blank">API</a>
10
+ </body>
11
+ </html>
@@ -5,56 +5,61 @@ export class MC {
5
5
 
6
6
  private privateMCs: { [key: string]: any } = {};
7
7
 
8
+ _mc?: { [key: string]: any } = {};
9
+
8
10
  static debug: boolean = false;
9
11
 
10
12
  constructor(target: HTMLElement | null = null) {
11
13
  this.target = target;
12
14
  this.privateMCs = {};
15
+ if ( MC?.debug ) {
16
+ this._mc = this.privateMCs;
17
+ };
18
+ }
19
+
20
+ // return all top-level micro components from an HTMLElement
21
+ static siblings( target: HTMLElement, search?: string ): any[] {
22
+ let t = target as HTMLElementMc;
23
+ if ( !t?._mc ) return [];
24
+ let mc: { [key: string]: any } = t._mc;
25
+ return search ? mc[search] ? [ mc[search] ] : [] : [ ...Object.entries( t._mc ) ];
13
26
  }
14
27
 
15
28
  // add a microcomponent to a target DOM node
16
- static add( element: any = {}, key?: string, target?: HTMLElement ): any {
29
+ static add( target: HTMLElement, key: string, element: any = {} ): any[] {
17
30
 
18
31
  const mc = target as any;
19
32
 
20
- if ( key && target ){
21
-
22
- // create the _mc property if necessary
23
- if ( !mc._mc ){
24
- mc._mc = new MC();
25
- }
33
+ // create the _mc property if necessary
34
+ if ( !mc._mc ){
35
+ mc._mc = new MC();
36
+ }
26
37
 
27
- // add the element with the given property key to the _mc property object
28
- if ( key && !mc._mc[ key ] ){
29
- mc._mc[ key ] = element;
30
- if ( target ) {
31
- target.setAttribute('_mc', '' );
32
- }
38
+ // add the element with the given property key to the _mc property object
39
+ if ( key && !mc._mc[ key ] ){
40
+ mc._mc[ key ] = element;
41
+ if ( target ) {
42
+ target.setAttribute('_mc', '' );
33
43
  }
34
44
  }
35
- return element;
36
- }
37
-
38
- // add a microcomponent to the DOM or to the private microcomponent collection
39
- add( element: any = {}, key?: string, target?: HTMLElement ): any {
40
45
 
41
- // add the element
42
- if ( target && key ){
43
- // ...to the DOM
44
- MC.add( element, key, target );
45
- } else if ( key ){
46
- // ... to the private element collection
47
- this.privateMCs[key] = element;
48
- }
49
46
  return element;
50
47
  }
51
48
 
52
- // remove a micro component from the DOM
53
- static remove(target: HTMLElement, key: string): void {
49
+ // remove a micro component from the target DOM node
50
+ static remove( target: HTMLElement, key: string ): void {
51
+
52
+ if ( //silent fail
53
+ !key
54
+ || typeof key !== 'string'
55
+ || !target
56
+ || target instanceof HTMLElement === false ) {
57
+ return;
58
+ };
54
59
 
55
60
  const mc = target as any;
56
61
 
57
- // delete the property from the DOM
62
+ // delete the property from the HTMLElement _mc collection
58
63
  if (mc._mc && mc._mc[key]) {
59
64
  delete mc._mc[key];
60
65
  }
@@ -67,19 +72,6 @@ export class MC {
67
72
  return;
68
73
  }
69
74
 
70
- // remove a micro component from the DOM or the private microcomponent collection
71
- remove(key: string): void {
72
-
73
- // remove the component from the private collection
74
- if (key in this.privateMCs) {
75
- delete this.privateMCs[key];
76
- }
77
-
78
- if ( MC.debug && this.target ){
79
- MC.remove(this.target, key);
80
- }
81
- }
82
-
83
75
  /*
84
76
  helper methods
85
77
  */
@@ -90,11 +82,19 @@ export class MC {
90
82
  let mcValues: any[] = [];
91
83
 
92
84
  elements.forEach(e => {
93
- if (e){
94
- if (!search && (e as HTMLElementMc)._mc) {
95
- mcValues = mcValues.concat(Object.values((e as any)._mc));
96
- } else if (search && (e as HTMLElementMc)._mc && (e as any)._mc[search]) {
97
- mcValues.push((e as any)._mc[search]);
85
+ if ( e ){
86
+ if ( e instanceof HTMLElement ){
87
+ if (!search && (e as HTMLElementMc)._mc) {
88
+ mcValues = mcValues.concat(Object.values((e as any)._mc));
89
+ } else if (search && (e as HTMLElementMc)._mc && (e as any)._mc[search]) {
90
+ mcValues.push((e as any)._mc[search]);
91
+ }
92
+ } else if (e instanceof MC ){
93
+ if ( !search ) {
94
+ mcValues = mcValues.concat(Object.values( this.privateMCs ));
95
+ } else if (search && this.privateMCs[search]) {
96
+ mcValues.push((e as any)._mc[search]);
97
+ }
98
98
  }
99
99
  }
100
100
  });
@@ -122,33 +122,73 @@ export class MC {
122
122
  return mcValues;
123
123
  }
124
124
 
125
+ private isDOM( element: any ): boolean {
126
+ return element && element instanceof HTMLElement;
127
+ }
128
+
129
+ /*
130
+ Methods to handle private MCs
131
+ */
132
+
133
+ // add a microcomponent to the private microcomponent collection
134
+ add( key?: string, element: any = {} ): any {
135
+
136
+ // add the element
137
+ if ( key ){
138
+ this.privateMCs[key] = element; // also the first element in the private MC collection
139
+ }
140
+ return element;
141
+ }
142
+
143
+ // remove a micro component from the private microcomponent collection
144
+ remove(key: string): void {
145
+
146
+ // remove the component from the private collection
147
+ if (key in this.privateMCs) {
148
+ delete this.privateMCs[key];
149
+ }
150
+
151
+ }
152
+
125
153
  /*
126
154
  selector methods, non-chainable
127
155
  */
128
156
 
129
- // all public _mc members and private collection members
157
+ // all private collection members
130
158
  siblings(search?: string): any[] {
131
- return this.getMicroComponents( [ this.target ], search ).concat( Object.entries( this.privateMCs ) );
159
+ if ( this.target ){
160
+ if ( this.target instanceof HTMLElement === true ){
161
+ return this.getMicroComponents( [ this.target ], search );
162
+ } else {
163
+ const result = this.privateMCs[search || ''];
164
+ return search && result ? [ result ] : Object.entries( this.privateMCs );
165
+ }
166
+ }
167
+ return []
132
168
  }
133
169
 
134
- // first anchestor DOM node, all puclic MCs
170
+
171
+ // first anchestor DOM node, all public MCs
135
172
  parent(search?: string): any[] {
136
173
 
137
- if ( !this.target ) return [];
174
+ if ( !this.isDOM( this.target) ) return [];
138
175
 
139
176
  return this.traverseNodes( ( this.target as HTMLElement).parentNode, search, true);
140
177
  }
141
178
 
142
- // all anchestor DOM nodes, beginning with the closest, all puclic MCs
179
+ // all anchestor DOM nodes, beginning with the closest, all public MCs
143
180
  parents(search?: string): any[] {
144
181
 
145
- if ( !this.target ) return [];
182
+ if ( !this.isDOM( this.target) ) return [];
146
183
 
147
- return this.traverseNodes(this.target.parentNode, search, false);
184
+ return this.traverseNodes( (this.target as HTMLElement ).parentNode, search, false);
148
185
  }
149
186
 
150
187
  // nearest child DOM nodes, all puclic MCs
151
188
  children(search?: string): any[] {
189
+
190
+ if ( !this.isDOM( this.target) ) return [];
191
+
152
192
  const id = crypto.randomUUID();
153
193
  (this.target as HTMLElement).setAttribute('temp-id', id);
154
194
  const myDomElements = (this.target as HTMLElement).querySelectorAll(`*[_mc]:not([temp-id="${id}"] [_mc] [_mc])`);
@@ -159,6 +199,9 @@ export class MC {
159
199
 
160
200
  // all descendant DOM nodes, all puclic MCs
161
201
  descendants(search?: string): any[] {
202
+
203
+ if ( !this.isDOM( this.target) ) return [];
204
+
162
205
  const myDomElements = (this.target as HTMLElement).querySelectorAll('*[_mc]');
163
206
  return this.getMicroComponents( [ ...myDomElements ], search);
164
207
  }
package/typedoc.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "entryPoints": ["src/microcomponents.ts","src/microcomponents.es3.js"],
3
- "out": "docs/",
4
- "readme": "readme.md",
5
- "name": "microcomponents",
3
+ "out": "./public/docs/",
4
+ "readme": "README.md",
5
+ "name": "Micro Components",
6
6
  "tsconfig": "./tsconfig.json"
7
7
  }