@twobirds/microcomponents 0.0.3 → 0.0.4
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/README.md +2 -35
- package/microcomponents_why.md +25 -0
- package/package.json +1 -1
- package/public/docs/classes/microcomponents.MC.html +19 -19
- package/public/docs/classes/microcomponents_es3.MC.html +12 -12
- package/public/docs/functions/microcomponents_es3.__isEmpty.html +1 -1
- package/public/docs/index.html +2 -48
- package/public/docs/interfaces/microcomponents.HTMLElementMc.html +2 -2
- package/public/docs/modules/microcomponents.html +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|

|
|
4
4
|
|
|
5
|
-
This code aims at
|
|
5
|
+
This code aims at [improving Javascript modularity](https://gitlab.com/twoBirds/microcomponents/-/blob/main/microcomponents_why.md?ref_type=heads). It does not describe a specific Micro Component itself but rather describes they way they are **organized**. A typical example of a **Micro Component** can be found in "additional concepts" below.
|
|
6
6
|
|
|
7
7
|
Using micro components enforces **DRY, KISS and SOLID** principles in Javascript programming. Read this [RFC](https://gitlab.com/twoBirds/microcomponents/-/blob/main/MicroComponentProposal_draft.md?ref_type=heads) for the shortest info.
|
|
8
8
|
|
|
@@ -15,29 +15,6 @@ For a detailed functional description goto [Micro Component Usage](https://gitla
|
|
|
15
15
|
To see what can be done, go to [additional concepts](https://gitlab.com/twoBirds/microcomponents/-/blob/main/microcomponents_magic.md?ref_type=heads) which delve a little deeper into how to use it, and what it already has been used for.
|
|
16
16
|
|
|
17
17
|
|
|
18
|
-
## Why would I give this a try in my company?
|
|
19
|
-
|
|
20
|
-
It is lightweight, proven and can yield positive results immediatly.
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
### **As the CTO**:
|
|
24
|
-
- **Reusability**: 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.
|
|
25
|
-
- **Scalability**: scales perfectly by design.
|
|
26
|
-
- **Interoperability**: 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.
|
|
27
|
-
|
|
28
|
-
### **As a Project Manager**:
|
|
29
|
-
- **Separation of Concerns**: since this is a modular approach you can **split UI logic from Business logic** and let diffent teams work on each.
|
|
30
|
-
- using this, you can **work with external developers without the need to give them access to your projects code repository**.
|
|
31
|
-
- you will find out that this allows your project to **become independent from the "tools hell"**. You tend to use **DIY** modules where you had tools before.
|
|
32
|
-
|
|
33
|
-
### **As a Javascript Developer**:
|
|
34
|
-
- The learning curve to use this is more than shallow. 1 hour should be enough.
|
|
35
|
-
- This is based on **plain Javascript/Typescript, HTML and CSS**. There is no abstraction layer.
|
|
36
|
-
- From the very start **it is fun to work with**. You are back in control of your code without bigger frameworks, but you are able to interact with them.
|
|
37
|
-
- You can **work for any customer right away**. **No training on their system required**, just fulfill their micro component requirements.
|
|
38
|
-
- Over time, you can **build your own framework or functional libraries** from scratch.
|
|
39
|
-
|
|
40
|
-
|
|
41
18
|
## Functional Requirements
|
|
42
19
|
|
|
43
20
|
- I want to **enrich a standard HTMLElement instance with encapsuled and modular javascript**, without having to resort to web components or big frameworks.
|
|
@@ -83,17 +60,7 @@ console.log( myButton._mc );
|
|
|
83
60
|
|
|
84
61
|
For detailed information jump to [Micro Component Usage](https://gitlab.com/twoBirds/microcomponents/-/blob/main/microcomponents_usage.md?ref_type=heads);
|
|
85
62
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
I have been working with this since 2004. I used this as core principle inside my twoBirds framework.
|
|
89
|
-
|
|
90
|
-
This functionality has been used in very big and complicated data processing projects:
|
|
91
|
-
- to allow for web component like programming (as early as 2004)
|
|
92
|
-
- to encapsule UI handling
|
|
93
|
-
- to represent business processes and their tasks
|
|
94
|
-
- and lately to compose very complex native web components from distinct modular functionality.
|
|
95
|
-
|
|
96
|
-
I decided to extract this functionality from the [twoBirds framework](https://www.npmjs.com/package/twobirds-core), since it is framework agnostic, and relies solely on the standard DOM and native javascript or typescript, and is a useful tool in itself.
|
|
63
|
+
I decided to extract this functionality from the [twoBirds framework](https://www.npmjs.com/package/twobirds-core), since it is framework agnostic, and relies solely on the standard DOM and native javascript or typescript, and is a useful tool in itself. Also this will be a dependency in twoBirds then.
|
|
97
64
|
|
|
98
65
|
## Useful Links
|
|
99
66
|
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
|
|
2
|
+
## Why would I give this a try?
|
|
3
|
+
|
|
4
|
+
It is lightweight, proven and can yield positive results immediatly.
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
### **As the CTO**:
|
|
8
|
+
|
|
9
|
+
- **Reusability**: 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.
|
|
10
|
+
- **Scalability**: scales perfectly by design.
|
|
11
|
+
- **Interoperability**: 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.
|
|
12
|
+
|
|
13
|
+
### **As a Project Manager**:
|
|
14
|
+
|
|
15
|
+
- **Separation of Concerns**: since this is a modular approach you can **split UI logic from Business logic** and let diffent teams work on each.
|
|
16
|
+
- using this, you can **work with external developers without the need to give them access to your projects code repository**.
|
|
17
|
+
- you will find out that this allows your project to **become independent from the "tools hell"**. You tend to use **DIY** modules where you had tools before.
|
|
18
|
+
|
|
19
|
+
### **As a Javascript Developer**:
|
|
20
|
+
|
|
21
|
+
- The learning curve to use this is more than shallow. 1 hour should be enough.
|
|
22
|
+
- This is based on **plain Javascript/Typescript, HTML and CSS**. There is no abstraction layer.
|
|
23
|
+
- From the very start **it is fun to work with**. You are back in control of your code without bigger frameworks, but you are able to interact with them.
|
|
24
|
+
- You can **work for any customer right away**. **No training on their system required**, just fulfill their micro component requirements.
|
|
25
|
+
- Over time, you can **build your own framework or functional libraries** from scratch.
|
package/package.json
CHANGED
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
<ul class="tsd-hierarchy">
|
|
22
22
|
<li><span class="target">MC</span></li></ul></section><aside class="tsd-sources">
|
|
23
23
|
<ul>
|
|
24
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
24
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.ts#L2">src/microcomponents.ts:2</a></li></ul></aside>
|
|
25
25
|
<section class="tsd-panel-group tsd-index-group">
|
|
26
26
|
<section class="tsd-panel tsd-index-panel">
|
|
27
27
|
<details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary">
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
<h5>target: <span class="tsd-signature-type">null</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">HTMLElement</span><span class="tsd-signature-symbol"> = null</span></h5></li></ul></div>
|
|
69
69
|
<h4 class="tsd-returns-title">Returns <a href="microcomponents.MC.html" class="tsd-signature-type" data-tsd-kind="Class">MC</a></h4><aside class="tsd-sources">
|
|
70
70
|
<ul>
|
|
71
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
71
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.ts#L12">src/microcomponents.ts:12</a></li></ul></aside></li></ul></section></section>
|
|
72
72
|
<section class="tsd-panel-group tsd-member-group">
|
|
73
73
|
<h2>Properties</h2>
|
|
74
74
|
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="_mc" class="tsd-anchor"></a>
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
<li class="tsd-parameter-index-signature">
|
|
81
81
|
<h5><span class="tsd-signature-symbol">[</span>key: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">]: </span><span class="tsd-signature-type">any</span></h5></li></ul></div><aside class="tsd-sources">
|
|
82
82
|
<ul>
|
|
83
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
83
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.ts#L8">src/microcomponents.ts:8</a></li></ul></aside></section>
|
|
84
84
|
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="privateMCs" class="tsd-anchor"></a>
|
|
85
85
|
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <span>privateMCs</span><a href="#privateMCs" 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>
|
|
86
86
|
<div class="tsd-signature">privateMCs<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{ </span><br/><span> </span>[key: <span class="tsd-signature-type">string</span>]<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">; </span><br/><span class="tsd-signature-symbol">}</span><span class="tsd-signature-symbol"> = {}</span></div>
|
|
@@ -90,17 +90,17 @@
|
|
|
90
90
|
<li class="tsd-parameter-index-signature">
|
|
91
91
|
<h5><span class="tsd-signature-symbol">[</span>key: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">]: </span><span class="tsd-signature-type">any</span></h5></li></ul></div><aside class="tsd-sources">
|
|
92
92
|
<ul>
|
|
93
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
93
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.ts#L6">src/microcomponents.ts:6</a></li></ul></aside></section>
|
|
94
94
|
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-private"><a id="target" class="tsd-anchor"></a>
|
|
95
95
|
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <span>target</span><a href="#target" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
|
|
96
96
|
<div class="tsd-signature">target<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">null</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">HTMLElement</span></div><aside class="tsd-sources">
|
|
97
97
|
<ul>
|
|
98
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
98
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.ts#L4">src/microcomponents.ts:4</a></li></ul></aside></section>
|
|
99
99
|
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="debug" class="tsd-anchor"></a>
|
|
100
100
|
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <span>debug</span><a href="#debug" 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>
|
|
101
101
|
<div class="tsd-signature">debug<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> = false</span></div><aside class="tsd-sources">
|
|
102
102
|
<ul>
|
|
103
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
103
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.ts#L10">src/microcomponents.ts:10</a></li></ul></aside></section></section>
|
|
104
104
|
<section class="tsd-panel-group tsd-member-group">
|
|
105
105
|
<h2>Methods</h2>
|
|
106
106
|
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="add" class="tsd-anchor"></a>
|
|
@@ -117,7 +117,7 @@
|
|
|
117
117
|
<h5>element: <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol"> = {}</span></h5></li></ul></div>
|
|
118
118
|
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span></h4><aside class="tsd-sources">
|
|
119
119
|
<ul>
|
|
120
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
120
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.ts#L134">src/microcomponents.ts:134</a></li></ul></aside></li></ul></section>
|
|
121
121
|
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="children" class="tsd-anchor"></a>
|
|
122
122
|
<h3 class="tsd-anchor-link"><span>children</span><a href="#children" 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>
|
|
123
123
|
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
|
|
@@ -130,7 +130,7 @@
|
|
|
130
130
|
<h5><code class="tsd-tag ts-flagOptional">Optional</code> search: <span class="tsd-signature-type">string</span></h5></li></ul></div>
|
|
131
131
|
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span></h4><aside class="tsd-sources">
|
|
132
132
|
<ul>
|
|
133
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
133
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.ts#L188">src/microcomponents.ts:188</a></li></ul></aside></li></ul></section>
|
|
134
134
|
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="descendants" class="tsd-anchor"></a>
|
|
135
135
|
<h3 class="tsd-anchor-link"><span>descendants</span><a href="#descendants" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
|
|
136
136
|
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
|
|
@@ -143,7 +143,7 @@
|
|
|
143
143
|
<h5><code class="tsd-tag ts-flagOptional">Optional</code> search: <span class="tsd-signature-type">string</span></h5></li></ul></div>
|
|
144
144
|
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span></h4><aside class="tsd-sources">
|
|
145
145
|
<ul>
|
|
146
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
146
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.ts#L201">src/microcomponents.ts:201</a></li></ul></aside></li></ul></section>
|
|
147
147
|
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-private"><a id="getMicroComponents" class="tsd-anchor"></a>
|
|
148
148
|
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <span>get<wbr/>Micro<wbr/>Components</span><a href="#getMicroComponents" 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>
|
|
149
149
|
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-private">
|
|
@@ -158,7 +158,7 @@
|
|
|
158
158
|
<h5><code class="tsd-tag ts-flagOptional">Optional</code> search: <span class="tsd-signature-type">string</span></h5></li></ul></div>
|
|
159
159
|
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span></h4><aside class="tsd-sources">
|
|
160
160
|
<ul>
|
|
161
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
161
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.ts#L80">src/microcomponents.ts:80</a></li></ul></aside></li></ul></section>
|
|
162
162
|
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-private"><a id="isDOM" class="tsd-anchor"></a>
|
|
163
163
|
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <span>isDOM</span><a href="#isDOM" 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>
|
|
164
164
|
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-private">
|
|
@@ -171,7 +171,7 @@
|
|
|
171
171
|
<h5>element: <span class="tsd-signature-type">any</span></h5></li></ul></div>
|
|
172
172
|
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4><aside class="tsd-sources">
|
|
173
173
|
<ul>
|
|
174
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
174
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.ts#L125">src/microcomponents.ts:125</a></li></ul></aside></li></ul></section>
|
|
175
175
|
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="parent" class="tsd-anchor"></a>
|
|
176
176
|
<h3 class="tsd-anchor-link"><span>parent</span><a href="#parent" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
|
|
177
177
|
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
|
|
@@ -184,7 +184,7 @@
|
|
|
184
184
|
<h5><code class="tsd-tag ts-flagOptional">Optional</code> search: <span class="tsd-signature-type">string</span></h5></li></ul></div>
|
|
185
185
|
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span></h4><aside class="tsd-sources">
|
|
186
186
|
<ul>
|
|
187
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
187
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.ts#L172">src/microcomponents.ts:172</a></li></ul></aside></li></ul></section>
|
|
188
188
|
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="parents" class="tsd-anchor"></a>
|
|
189
189
|
<h3 class="tsd-anchor-link"><span>parents</span><a href="#parents" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
|
|
190
190
|
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
|
|
@@ -197,7 +197,7 @@
|
|
|
197
197
|
<h5><code class="tsd-tag ts-flagOptional">Optional</code> search: <span class="tsd-signature-type">string</span></h5></li></ul></div>
|
|
198
198
|
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span></h4><aside class="tsd-sources">
|
|
199
199
|
<ul>
|
|
200
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
200
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.ts#L180">src/microcomponents.ts:180</a></li></ul></aside></li></ul></section>
|
|
201
201
|
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="remove" class="tsd-anchor"></a>
|
|
202
202
|
<h3 class="tsd-anchor-link"><span>remove</span><a href="#remove" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
|
|
203
203
|
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
|
|
@@ -210,7 +210,7 @@
|
|
|
210
210
|
<h5>key: <span class="tsd-signature-type">string</span></h5></li></ul></div>
|
|
211
211
|
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
|
|
212
212
|
<ul>
|
|
213
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
213
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.ts#L144">src/microcomponents.ts:144</a></li></ul></aside></li></ul></section>
|
|
214
214
|
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="siblings" class="tsd-anchor"></a>
|
|
215
215
|
<h3 class="tsd-anchor-link"><span>siblings</span><a href="#siblings" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
|
|
216
216
|
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
|
|
@@ -223,7 +223,7 @@
|
|
|
223
223
|
<h5><code class="tsd-tag ts-flagOptional">Optional</code> search: <span class="tsd-signature-type">string</span></h5></li></ul></div>
|
|
224
224
|
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span></h4><aside class="tsd-sources">
|
|
225
225
|
<ul>
|
|
226
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
226
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.ts#L158">src/microcomponents.ts:158</a></li></ul></aside></li></ul></section>
|
|
227
227
|
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-private"><a id="traverseNodes" class="tsd-anchor"></a>
|
|
228
228
|
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <span>traverse<wbr/>Nodes</span><a href="#traverseNodes" 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>
|
|
229
229
|
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-private">
|
|
@@ -240,7 +240,7 @@
|
|
|
240
240
|
<h5>firstonly: <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> = true</span></h5></li></ul></div>
|
|
241
241
|
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span></h4><aside class="tsd-sources">
|
|
242
242
|
<ul>
|
|
243
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
243
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.ts#L106">src/microcomponents.ts:106</a></li></ul></aside></li></ul></section>
|
|
244
244
|
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="add-2" class="tsd-anchor"></a>
|
|
245
245
|
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <span>add</span><a href="#add-2" 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>
|
|
246
246
|
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
|
|
@@ -257,7 +257,7 @@
|
|
|
257
257
|
<h5>element: <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol"> = {}</span></h5></li></ul></div>
|
|
258
258
|
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span></h4><aside class="tsd-sources">
|
|
259
259
|
<ul>
|
|
260
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
260
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.ts#L29">src/microcomponents.ts:29</a></li></ul></aside></li></ul></section>
|
|
261
261
|
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="remove-2" class="tsd-anchor"></a>
|
|
262
262
|
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <span>remove</span><a href="#remove-2" 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>
|
|
263
263
|
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
|
|
@@ -272,7 +272,7 @@
|
|
|
272
272
|
<h5>key: <span class="tsd-signature-type">string</span></h5></li></ul></div>
|
|
273
273
|
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
|
|
274
274
|
<ul>
|
|
275
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
275
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.ts#L50">src/microcomponents.ts:50</a></li></ul></aside></li></ul></section>
|
|
276
276
|
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="siblings-2" class="tsd-anchor"></a>
|
|
277
277
|
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <span>siblings</span><a href="#siblings-2" 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>
|
|
278
278
|
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
|
|
@@ -287,7 +287,7 @@
|
|
|
287
287
|
<h5><code class="tsd-tag ts-flagOptional">Optional</code> search: <span class="tsd-signature-type">string</span></h5></li></ul></div>
|
|
288
288
|
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span></h4><aside class="tsd-sources">
|
|
289
289
|
<ul>
|
|
290
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
290
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.ts#L21">src/microcomponents.ts:21</a></li></ul></aside></li></ul></section></section></div>
|
|
291
291
|
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
|
|
292
292
|
<div class="tsd-navigation settings">
|
|
293
293
|
<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
|
|
@@ -21,9 +21,9 @@
|
|
|
21
21
|
<ul class="tsd-hierarchy">
|
|
22
22
|
<li><span class="target">MC</span></li></ul></section><aside class="tsd-sources">
|
|
23
23
|
<ul>
|
|
24
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
25
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
26
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
24
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.es3.js#L13">src/microcomponents.es3.js:13</a></li>
|
|
25
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.es3.js#L18">src/microcomponents.es3.js:18</a></li>
|
|
26
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.es3.js#L26">src/microcomponents.es3.js:26</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">
|
|
@@ -61,14 +61,14 @@
|
|
|
61
61
|
<h5>target: <span class="tsd-signature-type">any</span></h5></li></ul></div>
|
|
62
62
|
<h4 class="tsd-returns-title">Returns <a href="microcomponents_es3.MC.html" class="tsd-signature-type" data-tsd-kind="Class">MC</a></h4><aside class="tsd-sources">
|
|
63
63
|
<ul>
|
|
64
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
64
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.es3.js#L13">src/microcomponents.es3.js:13</a></li></ul></aside></li></ul></section></section>
|
|
65
65
|
<section class="tsd-panel-group tsd-member-group">
|
|
66
66
|
<h2>Properties</h2>
|
|
67
67
|
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="_target" class="tsd-anchor"></a>
|
|
68
68
|
<h3 class="tsd-anchor-link"><span>_target</span><a href="#_target" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
|
|
69
69
|
<div class="tsd-signature">_target<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span></div><aside class="tsd-sources">
|
|
70
70
|
<ul>
|
|
71
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
71
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.es3.js#L14">src/microcomponents.es3.js:14</a></li></ul></aside></section></section>
|
|
72
72
|
<section class="tsd-panel-group tsd-member-group">
|
|
73
73
|
<h2>Methods</h2>
|
|
74
74
|
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="children" class="tsd-anchor"></a>
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
<h5>search: <span class="tsd-signature-type">any</span></h5></li></ul></div>
|
|
84
84
|
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span></h4><aside class="tsd-sources">
|
|
85
85
|
<ul>
|
|
86
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
86
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.es3.js#L75">src/microcomponents.es3.js:75</a></li></ul></aside></li></ul></section>
|
|
87
87
|
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="descendants" class="tsd-anchor"></a>
|
|
88
88
|
<h3 class="tsd-anchor-link"><span>descendants</span><a href="#descendants" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
|
|
89
89
|
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
<h5>search: <span class="tsd-signature-type">any</span></h5></li></ul></div>
|
|
97
97
|
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span></h4><aside class="tsd-sources">
|
|
98
98
|
<ul>
|
|
99
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
99
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.es3.js#L92">src/microcomponents.es3.js:92</a></li></ul></aside></li></ul></section>
|
|
100
100
|
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="parent" class="tsd-anchor"></a>
|
|
101
101
|
<h3 class="tsd-anchor-link"><span>parent</span><a href="#parent" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
|
|
102
102
|
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
|
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
<h5>search: <span class="tsd-signature-type">any</span></h5></li></ul></div>
|
|
110
110
|
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span></h4><aside class="tsd-sources">
|
|
111
111
|
<ul>
|
|
112
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
112
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.es3.js#L51">src/microcomponents.es3.js:51</a></li></ul></aside></li></ul></section>
|
|
113
113
|
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="parents" class="tsd-anchor"></a>
|
|
114
114
|
<h3 class="tsd-anchor-link"><span>parents</span><a href="#parents" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
|
|
115
115
|
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
|
|
@@ -122,7 +122,7 @@
|
|
|
122
122
|
<h5>search: <span class="tsd-signature-type">any</span></h5></li></ul></div>
|
|
123
123
|
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span></h4><aside class="tsd-sources">
|
|
124
124
|
<ul>
|
|
125
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
125
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.es3.js#L63">src/microcomponents.es3.js:63</a></li></ul></aside></li></ul></section>
|
|
126
126
|
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="siblings" class="tsd-anchor"></a>
|
|
127
127
|
<h3 class="tsd-anchor-link"><span>siblings</span><a href="#siblings" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
|
|
128
128
|
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
<h5>search: <span class="tsd-signature-type">any</span></h5></li></ul></div>
|
|
136
136
|
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span></h4><aside class="tsd-sources">
|
|
137
137
|
<ul>
|
|
138
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
138
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.es3.js#L35">src/microcomponents.es3.js:35</a></li></ul></aside></li></ul></section>
|
|
139
139
|
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="add" class="tsd-anchor"></a>
|
|
140
140
|
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <span>add</span><a href="#add" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
|
|
141
141
|
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
|
|
@@ -152,7 +152,7 @@
|
|
|
152
152
|
<h5>element: <span class="tsd-signature-type">any</span></h5></li></ul></div>
|
|
153
153
|
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-symbol">typeof </span><a href="microcomponents_es3.MC.html" class="tsd-signature-type" data-tsd-kind="Class">MC</a></h4><aside class="tsd-sources">
|
|
154
154
|
<ul>
|
|
155
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
155
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.es3.js#L18">src/microcomponents.es3.js:18</a></li></ul></aside></li></ul></section>
|
|
156
156
|
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="remove" class="tsd-anchor"></a>
|
|
157
157
|
<h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <span>remove</span><a href="#remove" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
|
|
158
158
|
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
|
|
@@ -167,7 +167,7 @@
|
|
|
167
167
|
<h5>key: <span class="tsd-signature-type">any</span></h5></li></ul></div>
|
|
168
168
|
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-symbol">typeof </span><a href="microcomponents_es3.MC.html" class="tsd-signature-type" data-tsd-kind="Class">MC</a></h4><aside class="tsd-sources">
|
|
169
169
|
<ul>
|
|
170
|
-
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
170
|
+
<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/0bbe59f/src/microcomponents.es3.js#L26">src/microcomponents.es3.js:26</a></li></ul></aside></li></ul></section></section></div>
|
|
171
171
|
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
|
|
172
172
|
<div class="tsd-navigation settings">
|
|
173
173
|
<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
|
|
@@ -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/0bbe59f/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">
|
package/public/docs/index.html
CHANGED
|
@@ -17,47 +17,13 @@
|
|
|
17
17
|
<h2>MICRO COMPONENTS</h2>
|
|
18
18
|
</a>
|
|
19
19
|
<p><img src="https://gitlab.com/twoBirds/microcomponents/-/raw/main/MicroComponents.svg" alt="Micro Components Logo"></p>
|
|
20
|
-
<p>This code aims at <
|
|
20
|
+
<p>This code aims at <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/main/microcomponents_why.md?ref_type=heads">improving Javascript modularity</a>. 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
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
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
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
|
-
<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;">
|
|
28
|
-
<h2>Why would I give this a try in my company?</h2>
|
|
29
|
-
</a>
|
|
30
|
-
<p>It is lightweight, proven and can yield positive results immediatly.</p>
|
|
31
|
-
|
|
32
|
-
<a href="#as-the-cto" id="as-the-cto" style="color: inherit; text-decoration: none;">
|
|
33
|
-
<h3><strong>As the CTO</strong>:</h3>
|
|
34
|
-
</a>
|
|
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. That is, forever.</li>
|
|
37
|
-
<li><strong>Scalability</strong>: scales perfectly by design.</li>
|
|
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
|
-
</ul>
|
|
40
|
-
|
|
41
|
-
<a href="#as-a-project-manager" id="as-a-project-manager" style="color: inherit; text-decoration: none;">
|
|
42
|
-
<h3><strong>As a Project Manager</strong>:</h3>
|
|
43
|
-
</a>
|
|
44
|
-
<ul>
|
|
45
|
-
<li><strong>Separation of Concerns</strong>: since this is a modular approach you can <strong>split UI logic from Business logic</strong> and let diffent teams work on each.</li>
|
|
46
|
-
<li>using this, you can <strong>work with external developers without the need to give them access to your projects code repository</strong>.</li>
|
|
47
|
-
<li>you will find out that this allows your project to <strong>become independent from the "tools hell"</strong>. You tend to use <strong>DIY</strong> modules where you had tools before.</li>
|
|
48
|
-
</ul>
|
|
49
|
-
|
|
50
|
-
<a href="#as-a-javascript-developer" id="as-a-javascript-developer" style="color: inherit; text-decoration: none;">
|
|
51
|
-
<h3><strong>As a Javascript Developer</strong>:</h3>
|
|
52
|
-
</a>
|
|
53
|
-
<ul>
|
|
54
|
-
<li>The learning curve to use this is more than shallow. 1 hour should be enough.</li>
|
|
55
|
-
<li>This is based on <strong>plain Javascript/Typescript, HTML and CSS</strong>. There is no abstraction layer.</li>
|
|
56
|
-
<li>From the very start <strong>it is fun to work with</strong>. You are back in control of your code without bigger frameworks, but you are able to interact with them.</li>
|
|
57
|
-
<li>You can <strong>work for any customer right away</strong>. <strong>No training on their system required</strong>, just fulfill their micro component requirements.</li>
|
|
58
|
-
<li>Over time, you can <strong>build your own framework or functional libraries</strong> from scratch.</li>
|
|
59
|
-
</ul>
|
|
60
|
-
|
|
61
27
|
<a href="#functional-requirements" id="functional-requirements" style="color: inherit; text-decoration: none;">
|
|
62
28
|
<h2>Functional Requirements</h2>
|
|
63
29
|
</a>
|
|
@@ -87,19 +53,7 @@
|
|
|
87
53
|
<pre><code class="language-javascript"><span class="hl-7">console</span><span class="hl-3">.</span><span class="hl-8">log</span><span class="hl-3">( </span><span class="hl-7">myButton</span><span class="hl-3">.</span><span class="hl-7">_mc</span><span class="hl-3"> );</span><br/><span class="hl-5">// { tb_ui_button: { target: <button>, onClick: <function> } }</span>
|
|
88
54
|
</code></pre>
|
|
89
55
|
<p>For detailed information jump to <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/main/microcomponents_usage.md?ref_type=heads">Micro Component Usage</a>;</p>
|
|
90
|
-
|
|
91
|
-
<a href="#history" id="history" style="color: inherit; text-decoration: none;">
|
|
92
|
-
<h2>History</h2>
|
|
93
|
-
</a>
|
|
94
|
-
<p>I have been working with this since 2004. I used this as core principle inside my twoBirds framework.</p>
|
|
95
|
-
<p>This functionality has been used in very big and complicated data processing projects:</p>
|
|
96
|
-
<ul>
|
|
97
|
-
<li>to allow for web component like programming (as early as 2004)</li>
|
|
98
|
-
<li>to encapsule UI handling</li>
|
|
99
|
-
<li>to represent business processes and their tasks</li>
|
|
100
|
-
<li>and lately to compose very complex native web components from distinct modular functionality.</li>
|
|
101
|
-
</ul>
|
|
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>
|
|
56
|
+
<p>I decided to extract this functionality from the <a href="https://www.npmjs.com/package/twobirds-core">twoBirds framework</a>, since it is framework agnostic, and relies solely on the standard DOM and native javascript or typescript, and is a useful tool in itself. Also this will be a dependency in twoBirds then.</p>
|
|
103
57
|
|
|
104
58
|
<a href="#useful-links" id="useful-links" style="color: inherit; text-decoration: none;">
|
|
105
59
|
<h2>Useful Links</h2>
|
|
@@ -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/0bbe59f/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/0bbe59f/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">
|
|
@@ -16,7 +16,7 @@
|
|
|
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/0bbe59f/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">
|