@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.
- package/.gitlab-ci.yml +16 -0
- package/MicroComponentProposal_draft.md +10 -7
- package/README.md +10 -6
- package/assets/fiddle/MicroComponents.svg +15 -0
- package/assets/fiddle/fiddle.css +0 -0
- package/assets/fiddle/fiddle.js +0 -0
- package/assets/fiddle/index.html +0 -0
- package/assets/index.html +11 -0
- package/dist/microcomponents.d.ts +8 -3
- package/dist/microcomponents.d.ts.map +1 -1
- package/dist/microcomponents.js +87 -47
- package/dist/microcomponents.min.js +23 -16
- package/dist/microcomponents.ts +212 -0
- package/package.json +27 -6
- package/public/docs/assets/search.js +1 -0
- package/{docs → public/docs}/classes/microcomponents.MC.html +73 -31
- package/{docs → public/docs}/classes/microcomponents_es3.MC.html +16 -16
- package/{docs → public/docs}/functions/microcomponents_es3.__isEmpty.html +5 -5
- package/{docs → public/docs}/index.html +17 -12
- package/{docs → public/docs}/interfaces/microcomponents.HTMLElementMc.html +6 -6
- package/{docs → public/docs}/modules/microcomponents.html +5 -5
- package/{docs → public/docs}/modules/microcomponents_es3.html +4 -4
- package/{docs → public/docs}/modules.html +5 -5
- package/public/fiddle/MicroComponents.svg +15 -0
- package/public/fiddle/fiddle.css +0 -0
- package/public/fiddle/fiddle.js +0 -0
- package/public/fiddle/index.html +0 -0
- package/public/index.html +11 -0
- package/src/microcomponents.ts +97 -54
- package/typedoc.json +3 -3
- package/docs/assets/search.js +0 -1
- /package/{docs → public/docs}/.nojekyll +0 -0
- /package/{docs → public/docs}/assets/highlight.css +0 -0
- /package/{docs → public/docs}/assets/main.js +0 -0
- /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 |
|
|
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">
|
|
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">
|
|
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/
|
|
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">
|
|
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>
|
|
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">
|
|
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>
|
|
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="
|
|
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 "additional concepts" below.</p>
|
|
21
|
-
<p>Using micro components enforces <strong>DRY, KISS and SOLID</strong> principles in Javascript programming. Read this <a href="
|
|
22
|
-
<p>This is a low-level approach. It consists of a single class with
|
|
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"><</span><span class="hl-1">button</span><span class="hl-0">></</span><span class="hl-1">button</span><span class="hl-0">></span>
|
|
79
79
|
</code></pre>
|
|
80
80
|
<p>code: (assume "Button" 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">'MC'</span><span class="hl-3"> </span><span class="hl-2">from</span><span class="hl-3"> </span><span class="hl-4">'
|
|
81
|
+
<pre><code class="language-javascript"><span class="hl-2">import</span><span class="hl-3"> </span><span class="hl-4">'MC'</span><span class="hl-3"> </span><span class="hl-2">from</span><span class="hl-3"> </span><span class="hl-4">'@twobirds/microcomponents'</span><span class="hl-3">;</span><br/><span class="hl-2">import</span><span class="hl-3"> </span><span class="hl-4">'Button'</span><span class="hl-3"> </span><span class="hl-2">from</span><span class="hl-3"> </span><span class="hl-4">'tb/ui'</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">'button'</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">'tb_ui_button'</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"><</span><span class="hl-1">button</span><span class="hl-3"> </span><span class="hl-10">_mc</span><span class="hl-0">></</span><span class="hl-1">button</span><span class="hl-0">></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">
|
|
135
|
+
<li class="current selected"><a href="modules.html">Micro <wbr/>Components</a>
|
|
131
136
|
<ul>
|
|
132
|
-
<li class="
|
|
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 |
|
|
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">
|
|
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">
|
|
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/
|
|
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/
|
|
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">
|
|
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
|
|
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">
|
|
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">
|
|
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/
|
|
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">
|
|
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 |
|
|
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">
|
|
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">
|
|
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">
|
|
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>
|
|
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">
|
|
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>
|
|
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">
|
|
42
|
+
<li class="current selected"><a href="modules.html">Micro <wbr/>Components</a>
|
|
43
43
|
<ul>
|
|
44
|
-
<li class="
|
|
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>
|
package/src/microcomponents.ts
CHANGED
|
@@ -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(
|
|
29
|
+
static add( target: HTMLElement, key: string, element: any = {} ): any[] {
|
|
17
30
|
|
|
18
31
|
const mc = target as any;
|
|
19
32
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
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
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
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
|
|
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 (
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
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
|
|
157
|
+
// all private collection members
|
|
130
158
|
siblings(search?: string): any[] {
|
|
131
|
-
|
|
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
|
-
|
|
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
|
|
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": "
|
|
5
|
-
"name": "
|
|
3
|
+
"out": "./public/docs/",
|
|
4
|
+
"readme": "README.md",
|
|
5
|
+
"name": "Micro Components",
|
|
6
6
|
"tsconfig": "./tsconfig.json"
|
|
7
7
|
}
|