@twobirds/microcomponents 0.0.10 → 0.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/README.md +27 -47
  2. package/assets/documentation/ajaxian-1.png +0 -0
  3. package/assets/documentation/ajaxian-2.png +0 -0
  4. package/assets/documentation/ajaxian-3.png +0 -0
  5. package/assets/documentation/history.md +436 -0
  6. package/assets/documentation/how_tos.md +0 -0
  7. package/assets/documentation/introduction.md +0 -0
  8. package/{microcomponents_magic.md → assets/documentation/magic.md} +1 -1
  9. package/assets/documentation/rnd0023-1.jpg +0 -0
  10. package/assets/documentation/rnd0023-2.jpg +0 -0
  11. package/assets/documentation/rnd0023-3.jpg +0 -0
  12. package/assets/documentation/tB_react.md +369 -0
  13. package/assets/test.html +11 -0
  14. package/dist/microcomponents.d.ts +15 -231
  15. package/dist/microcomponents.d.ts.map +1 -1
  16. package/dist/microcomponents.es3.d.ts +5 -0
  17. package/dist/microcomponents.es3.d.ts.map +1 -1
  18. package/dist/microcomponents.js +143 -334
  19. package/dist/microcomponents.min.js +32 -29
  20. package/dist/microcomponents.ts +209 -395
  21. package/package.json +3 -4
  22. package/public/{docs/assets → assets}/highlight.css +29 -22
  23. package/public/assets/search.js +1 -0
  24. package/public/{docs/classes → classes}/microcomponents.MC.html +78 -241
  25. package/public/{docs/classes → classes}/microcomponents_es3.MC.html +12 -12
  26. package/public/documentation/ajaxian-1.png +0 -0
  27. package/public/documentation/ajaxian-2.png +0 -0
  28. package/public/documentation/ajaxian-3.png +0 -0
  29. package/public/documentation/functional_requirements.md +8 -0
  30. package/public/documentation/history.md +436 -0
  31. package/public/documentation/how_tos.md +0 -0
  32. package/public/documentation/introduction.md +0 -0
  33. package/public/documentation/magic.md +87 -0
  34. package/public/documentation/proposal_draft.md +37 -0
  35. package/public/documentation/rnd0023-1.jpg +0 -0
  36. package/public/documentation/rnd0023-2.jpg +0 -0
  37. package/public/documentation/rnd0023-3.jpg +0 -0
  38. package/public/documentation/tB_react.md +369 -0
  39. package/public/documentation/usage.md +142 -0
  40. package/public/documentation/why.md +25 -0
  41. package/public/{docs/functions → functions}/microcomponents_es3.__isEmpty.html +1 -1
  42. package/public/index.html +101 -11
  43. package/public/microcomponents.js +176 -0
  44. package/public/{docs/modules → modules}/microcomponents.html +2 -7
  45. package/public/test.html +11 -0
  46. package/public/test.js +216 -0
  47. package/src/microcomponents.ts +209 -395
  48. package/src/test.js +247 -0
  49. package/typedoc.json +1 -1
  50. package/assets/index.html +0 -11
  51. package/jsdoc.conf.json +0 -19
  52. package/public/docs/assets/search.js +0 -1
  53. package/public/docs/index.html +0 -97
  54. package/public/docs/interfaces/microcomponents.HTMLElementMc.html +0 -3605
  55. package/public/jsdoc/es3/files.html +0 -216
  56. package/public/jsdoc/es3/index.html +0 -210
  57. package/public/jsdoc/es3/symbols/_global_.html +0 -368
  58. package/public/jsdoc/es3/symbols/src/build_microcomponents.es3.js.html +0 -104
  59. package/public/jsdoc/es5+/files.html +0 -218
  60. package/public/jsdoc/es5+/index.html +0 -218
  61. package/public/jsdoc/es5+/symbols/MC.html +0 -621
  62. package/public/jsdoc/es5+/symbols/_global_.html +0 -720
  63. package/public/jsdoc/es5+/symbols/microcomponents.MC.html +0 -323
  64. package/public/jsdoc/es5+/symbols/src/build_microcomponents.js.html +0 -375
  65. /package/{microcomponents_functional_requirements.md → assets/documentation/functional_requirements.md} +0 -0
  66. /package/{MicroComponentProposal_draft.md → assets/documentation/proposal_draft.md} +0 -0
  67. /package/{microcomponents_usage.md → assets/documentation/usage.md} +0 -0
  68. /package/{microcomponents_why.md → assets/documentation/why.md} +0 -0
  69. /package/public/{docs/.nojekyll → .nojekyll} +0 -0
  70. /package/public/{docs/assets → assets}/main.js +0 -0
  71. /package/public/{docs/assets → assets}/style.css +0 -0
  72. /package/public/{docs/modules → modules}/microcomponents_es3.html +0 -0
  73. /package/public/{docs/modules.html → modules.html} +0 -0
@@ -1,375 +0,0 @@
1
- <html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"> <style>
2
- .KEYW {color: #933;}
3
- .COMM {color: #bbb; font-style: italic;}
4
- .NUMB {color: #393;}
5
- .STRN {color: #393;}
6
- .REGX {color: #339;}
7
- .line {border-right: 1px dotted #666; color: #666; font-style: normal;}
8
- </style></head><body><pre><span class='line'> 1</span> <span class="STRN">'use strict'</span><span class="PUNC">;</span><span class="WHIT">
9
- <span class='line'> 2</span> </span><span class="COMM">/**
10
- <span class='line'> 3</span> * @module microcomponenents
11
- <span class='line'> 4</span> */</span><span class="WHIT">
12
- <span class='line'> 5</span> </span><span class="COMM">/**
13
- <span class='line'> 6</span> * A static flag to enable or disable debugging mode.
14
- <span class='line'> 7</span> * @name debug
15
- <span class='line'> 8</span> * @memberOf MC
16
- <span class='line'> 9</span> * @static
17
- <span class='line'> 10</span> * @type {boolean} A static flag to enable or disable debugging mode.
18
- <span class='line'> 11</span> */</span><span class="WHIT">
19
- <span class='line'> 12</span> </span><span class="COMM">/**
20
- <span class='line'> 13</span> * Retrieves all top-level microcomponents from a target HTMLElement.
21
- <span class='line'> 14</span> * @name siblings
22
- <span class='line'> 15</span> * @memberOf MC
23
- <span class='line'> 16</span> * @static
24
- <span class='line'> 17</span> * @function
25
- <span class='line'> 18</span> * @param {HTMLElement} target - The target DOM element.
26
- <span class='line'> 19</span> * @param {string} [search] - The key of the specific microcomponent to find.
27
- <span class='line'> 20</span> * @returns {Array&lt;any>} An array of microcomponents or an empty array if none found.
28
- <span class='line'> 21</span> * @example
29
- <span class='line'> 22</span> * const siblings = MC.siblings(
30
- <span class='line'> 23</span> * &nbsp;document.getElementById('myElement'),
31
- <span class='line'> 24</span> * &nbsp;'myComponent'
32
- <span class='line'> 25</span> * );
33
- <span class='line'> 26</span> */</span><span class="WHIT">
34
- <span class='line'> 27</span> </span><span class="COMM">/**
35
- <span class='line'> 28</span> * Adds a top level microcomponent to a target DOM node.
36
- <span class='line'> 29</span> * @name add
37
- <span class='line'> 30</span> * @memberOf MC
38
- <span class='line'> 31</span> * @static
39
- <span class='line'> 32</span> * @function
40
- <span class='line'> 33</span> * @param {HTMLElement} target - The target DOM element.
41
- <span class='line'> 34</span> * @param {string} key - The key to identify the microcomponent.
42
- <span class='line'> 35</span> * @param {any} [element={}] - The microcomponent to add.
43
- <span class='line'> 36</span> * @returns {any} The added microcomponent.
44
- <span class='line'> 37</span> * @example
45
- <span class='line'> 38</span> * const component = MC.add(
46
- <span class='line'> 39</span> * &nbsp;document.getElementById('myElement'),
47
- <span class='line'> 40</span> * &nbsp;'myComponent',
48
- <span class='line'> 41</span> * &nbsp;{}
49
- <span class='line'> 42</span> * );
50
- <span class='line'> 43</span> */</span><span class="WHIT">
51
- <span class='line'> 44</span> </span><span class="COMM">/**
52
- <span class='line'> 45</span> * Removes a top level microcomponent from the target DOM node.
53
- <span class='line'> 46</span> * @name remove
54
- <span class='line'> 47</span> * @memberOf MC
55
- <span class='line'> 48</span> * @static
56
- <span class='line'> 49</span> * @function
57
- <span class='line'> 50</span> * @param {HTMLElement} target - The target DOM element.
58
- <span class='line'> 51</span> * @param {string} key - The key identifying the microcomponent.
59
- <span class='line'> 52</span> * @example
60
- <span class='line'> 53</span> * MC.remove(
61
- <span class='line'> 54</span> * &nbsp;document.getElementById('myElement'),
62
- <span class='line'> 55</span> * &nbsp;'myComponent'
63
- <span class='line'> 56</span> * );
64
- <span class='line'> 57</span> */</span><span class="WHIT">
65
- <span class='line'> 58</span> </span><span class="COMM">/**
66
- <span class='line'> 59</span> * Manages microcomponents (MCs) attached to DOM elements, allowing for the
67
- <span class='line'> 60</span> * addition, removal, and traversal of microcomponents across siblings, parents,
68
- <span class='line'> 61</span> * children, and descendants.
69
- <span class='line'> 62</span> *
70
- <span class='line'> 63</span> * This class provides an API for interacting with microcomponents on DOM elements.
71
- <span class='line'> 64</span> * Public microcomponents are stored on the `_mc` attribute of the DOM element, while
72
- <span class='line'> 65</span> * private microcomponents are managed internally.
73
- <span class='line'> 66</span> *
74
- <span class='line'> 67</span> * @example
75
- <span class='line'> 68</span> * ```javascript
76
- <span class='line'> 69</span> *
77
- <span class='line'> 70</span> * // create the micro component class
78
- <span class='line'> 71</span> * class MyMC extends MC{
79
- <span class='line'> 72</span> *
80
- <span class='line'> 73</span> * &nbsp;constructor( target ){
81
- <span class='line'> 74</span> * &nbsp;&nbsp;super( target );
82
- <span class='line'> 75</span> * &nbsp;&nbsp;this.target = target;
83
- <span class='line'> 76</span> * &nbsp;}
84
- <span class='line'> 77</span> * }
85
- <span class='line'> 78</span> *
86
- <span class='line'> 79</span> * const element = document.querySelector('div')
87
- <span class='line'> 80</span> *
88
- <span class='line'> 81</span> * // Add the top level microcomponent to the target element
89
- <span class='line'> 82</span> * let mcc = MC.add(
90
- <span class='line'> 83</span> * &nbsp;element,
91
- <span class='line'> 84</span> * &nbsp;'myMC',
92
- <span class='line'> 85</span> * &nbsp;new MyMC( element )
93
- <span class='line'> 86</span> * );
94
- <span class='line'> 87</span> *
95
- <span class='line'> 88</span> * // Add an inner (private) microcomponent to mcc
96
- <span class='line'> 89</span> * let mcc.add(
97
- <span class='line'> 90</span> * &nbsp;'myInnerMC',
98
- <span class='line'> 91</span> * &nbsp;new MyMC( element )
99
- <span class='line'> 92</span> * );
100
- <span class='line'> 93</span> *
101
- <span class='line'> 94</span> * console.log( element._mc );
102
- <span class='line'> 95</span> * // { 'myMC': { target: (element) } }
103
- <span class='line'> 96</span> *
104
- <span class='line'> 97</span> * console.log( element._mc.myMC );
105
- <span class='line'> 98</span> * // { target: (element) }
106
- <span class='line'> 99</span> *
107
- <span class='line'>100</span> * console.log( mcc.siblings() );
108
- <span class='line'>101</span> * // [ { target: (element) } ]
109
- <span class='line'>102</span> *
110
- <span class='line'>103</span> * ```
111
- <span class='line'>104</span> * @class
112
- <span class='line'>105</span> * @name MC
113
- <span class='line'>106</span> */</span><span class="WHIT">
114
- <span class='line'>107</span> </span><span class="NAME">class</span><span class="WHIT"> </span><span class="NAME">MC</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
115
- <span class='line'>108</span> </span><span class="WHIT"> </span><span class="NAME">target</span><span class="PUNC">;</span><span class="WHIT">
116
- <span class='line'>109</span> </span><span class="WHIT"> </span><span class="NAME">privateMCs</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
117
- <span class='line'>110</span> </span><span class="WHIT"> </span><span class="NAME">_mc</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
118
- <span class='line'>111</span> </span><span class="WHIT"> </span><span class="NAME">static</span><span class="WHIT"> </span><span class="NAME">debug</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
119
- <span class='line'>112</span> </span><span class="WHIT"> </span><span class="COMM">/**
120
- <span class='line'>113</span> * Constructs an MC instance with a target DOM element.
121
- <span class='line'>114</span> * @constructor
122
- <span class='line'>115</span> * @param {HTMLElement | { [key: string]: any }} - The target DOM element or any object.
123
- <span class='line'>116</span> */</span><span class="WHIT">
124
- <span class='line'>117</span> </span><span class="WHIT"> </span><span class="NAME">constructor</span><span class="PUNC">(</span><span class="NAME">target</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
125
- <span class='line'>118</span> </span><span class="WHIT"> </span><span class="COMM">/**
126
- <span class='line'>119</span> * target is a DOM element or a parent MC
127
- <span class='line'>120</span> * @type {object}
128
- <span class='line'>121</span> * @public
129
- <span class='line'>122</span> */</span><span class="WHIT">
130
- <span class='line'>123</span> </span><span class="WHIT"> </span><span class="NAME">this.target</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">target</span><span class="PUNC">;</span><span class="WHIT">
131
- <span class='line'>124</span> </span><span class="WHIT"> </span><span class="COMM">/**
132
- <span class='line'>125</span> * The collection of private microcomponents.
133
- <span class='line'>126</span> * @private
134
- <span class='line'>127</span> * @type {Object.&lt;string, any>}
135
- <span class='line'>128</span> */</span><span class="WHIT">
136
- <span class='line'>129</span> </span><span class="WHIT"> </span><span class="NAME">this.privateMCs</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
137
- <span class='line'>130</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">MC.debug</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
138
- <span class='line'>131</span> </span><span class="WHIT"> </span><span class="COMM">/**
139
- <span class='line'>132</span> * exposes private microcomponents in debug mode.
140
- <span class='line'>133</span> * @public
141
- <span class='line'>134</span> * @type {Object.&lt;string, any>}
142
- <span class='line'>135</span> */</span><span class="WHIT">
143
- <span class='line'>136</span> </span><span class="WHIT"> </span><span class="NAME">this._mc</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.privateMCs</span><span class="PUNC">;</span><span class="WHIT">
144
- <span class='line'>137</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
145
- <span class='line'>138</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
146
- <span class='line'>139</span> </span><span class="WHIT"> </span><span class="NAME">static</span><span class="WHIT"> </span><span class="NAME">siblings</span><span class="PUNC">(</span><span class="NAME">target</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">search</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
147
- <span class='line'>140</span> </span><span class="WHIT"> </span><span class="NAME">let</span><span class="WHIT"> </span><span class="NAME">t</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">target</span><span class="PUNC">;</span><span class="WHIT">
148
- <span class='line'>141</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">t</span><span class="PUNC">?</span><span class="PUNC">.</span><span class="NAME">_mc</span><span class="PUNC">)</span><span class="WHIT">
149
- <span class='line'>142</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
150
- <span class='line'>143</span> </span><span class="WHIT"> </span><span class="NAME">let</span><span class="WHIT"> </span><span class="NAME">mc</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">t._mc</span><span class="PUNC">;</span><span class="WHIT">
151
- <span class='line'>144</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">search</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">mc</span><span class="PUNC">[</span><span class="NAME">search</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="NAME">mc</span><span class="PUNC">[</span><span class="NAME">search</span><span class="PUNC">]</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">.</span><span class="PUNC">.</span><span class="PUNC">.</span><span class="NAME">Object.entries</span><span class="PUNC">(</span><span class="NAME">t._mc</span><span class="PUNC">)</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
152
- <span class='line'>145</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
153
- <span class='line'>146</span> </span><span class="WHIT"> </span><span class="NAME">static</span><span class="WHIT"> </span><span class="NAME">add</span><span class="PUNC">(</span><span class="NAME">target</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">key</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">element</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
154
- <span class='line'>147</span> </span><span class="WHIT"> </span><span class="KEYW">const</span><span class="WHIT"> </span><span class="NAME">mc</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">target</span><span class="PUNC">;</span><span class="WHIT">
155
- <span class='line'>148</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">mc._mc</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
156
- <span class='line'>149</span> </span><span class="WHIT"> </span><span class="NAME">mc._mc</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">MC</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
157
- <span class='line'>150</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
158
- <span class='line'>151</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">key</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="PUNC">!</span><span class="NAME">mc._mc</span><span class="PUNC">[</span><span class="NAME">key</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
159
- <span class='line'>152</span> </span><span class="WHIT"> </span><span class="NAME">mc._mc</span><span class="PUNC">[</span><span class="NAME">key</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">element</span><span class="PUNC">;</span><span class="WHIT">
160
- <span class='line'>153</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">target</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
161
- <span class='line'>154</span> </span><span class="WHIT"> </span><span class="NAME">target.setAttribute</span><span class="PUNC">(</span><span class="STRN">'_mc'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">''</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
162
- <span class='line'>155</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
163
- <span class='line'>156</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
164
- <span class='line'>157</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">element</span><span class="PUNC">;</span><span class="WHIT">
165
- <span class='line'>158</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
166
- <span class='line'>159</span> </span><span class="WHIT"> </span><span class="NAME">static</span><span class="WHIT"> </span><span class="NAME">remove</span><span class="PUNC">(</span><span class="NAME">target</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">key</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
167
- <span class='line'>160</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">key</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="KEYW">typeof</span><span class="WHIT"> </span><span class="NAME">key</span><span class="WHIT"> </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="STRN">'string'</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">!</span><span class="NAME">target</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">!</span><span class="PUNC">(</span><span class="NAME">target</span><span class="WHIT"> </span><span class="KEYW">instanceof</span><span class="WHIT"> </span><span class="NAME">HTMLElement</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
168
- <span class='line'>161</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="PUNC">;</span><span class="WHIT">
169
- <span class='line'>162</span> </span><span class="WHIT"> </span><span class="KEYW">const</span><span class="WHIT"> </span><span class="NAME">mc</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">target</span><span class="PUNC">;</span><span class="WHIT">
170
- <span class='line'>163</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">mc._mc</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">mc._mc</span><span class="PUNC">[</span><span class="NAME">key</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
171
- <span class='line'>164</span> </span><span class="WHIT"> </span><span class="KEYW">delete</span><span class="WHIT"> </span><span class="NAME">mc._mc</span><span class="PUNC">[</span><span class="NAME">key</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
172
- <span class='line'>165</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
173
- <span class='line'>166</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">Object.keys</span><span class="PUNC">(</span><span class="NAME">mc._mc</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">length</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">target.hasAttribute</span><span class="PUNC">(</span><span class="STRN">'_mc'</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
174
- <span class='line'>167</span> </span><span class="WHIT"> </span><span class="NAME">target.removeAttribute</span><span class="PUNC">(</span><span class="STRN">'_mc'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
175
- <span class='line'>168</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
176
- <span class='line'>169</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
177
- <span class='line'>170</span> </span><span class="WHIT"> </span><span class="COMM">/**
178
- <span class='line'>171</span> * returns top level microcomponents from a list of HTMLElements.
179
- <span class='line'>172</span> * @name getMicroComponents
180
- <span class='line'>173</span> * @instance
181
- <span class='line'>174</span> * @function
182
- <span class='line'>175</span> * @private
183
- <span class='line'>176</span> * @param {Array&lt;any>} elements - The elements to search for microcomponents.
184
- <span class='line'>177</span> * @param {string} [search] - The key of the specific microcomponent.
185
- <span class='line'>178</span> * @returns {Array&lt;any>} An array of microcomponents.
186
- <span class='line'>179</span> */</span><span class="WHIT">
187
- <span class='line'>180</span> </span><span class="WHIT"> </span><span class="NAME">getMicroComponents</span><span class="PUNC">(</span><span class="NAME">elements</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">search</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
188
- <span class='line'>181</span> </span><span class="WHIT"> </span><span class="NAME">let</span><span class="WHIT"> </span><span class="NAME">mcValues</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
189
- <span class='line'>182</span> </span><span class="WHIT"> </span><span class="NAME">elements.forEach</span><span class="PUNC">(</span><span class="NAME">e</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="PUNC">></span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
190
- <span class='line'>183</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">e</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
191
- <span class='line'>184</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">e</span><span class="WHIT"> </span><span class="KEYW">instanceof</span><span class="WHIT"> </span><span class="NAME">HTMLElement</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
192
- <span class='line'>185</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">search</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">e._mc</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
193
- <span class='line'>186</span> </span><span class="WHIT"> </span><span class="NAME">mcValues</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">mcValues.concat</span><span class="PUNC">(</span><span class="NAME">Object.values</span><span class="PUNC">(</span><span class="NAME">e._mc</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
194
- <span class='line'>187</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
195
- <span class='line'>188</span> </span><span class="WHIT"> </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">search</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">e._mc</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">e._mc</span><span class="PUNC">[</span><span class="NAME">search</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
196
- <span class='line'>189</span> </span><span class="WHIT"> </span><span class="NAME">mcValues.push</span><span class="PUNC">(</span><span class="NAME">e._mc</span><span class="PUNC">[</span><span class="NAME">search</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
197
- <span class='line'>190</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
198
- <span class='line'>191</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
199
- <span class='line'>192</span> </span><span class="WHIT"> </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">e</span><span class="WHIT"> </span><span class="KEYW">instanceof</span><span class="WHIT"> </span><span class="NAME">MC</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
200
- <span class='line'>193</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">search</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
201
- <span class='line'>194</span> </span><span class="WHIT"> </span><span class="NAME">mcValues</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">mcValues.concat</span><span class="PUNC">(</span><span class="NAME">Object.values</span><span class="PUNC">(</span><span class="NAME">this.privateMCs</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
202
- <span class='line'>195</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
203
- <span class='line'>196</span> </span><span class="WHIT"> </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">search</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">this.privateMCs</span><span class="PUNC">[</span><span class="NAME">search</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
204
- <span class='line'>197</span> </span><span class="WHIT"> </span><span class="NAME">mcValues.push</span><span class="PUNC">(</span><span class="NAME">e._mc</span><span class="PUNC">[</span><span class="NAME">search</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
205
- <span class='line'>198</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
206
- <span class='line'>199</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
207
- <span class='line'>200</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
208
- <span class='line'>201</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
209
- <span class='line'>202</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">mcValues</span><span class="PUNC">;</span><span class="WHIT">
210
- <span class='line'>203</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
211
- <span class='line'>204</span> </span><span class="WHIT"> </span><span class="COMM">/**
212
- <span class='line'>205</span> * returns ancestor MCs
213
- <span class='line'>206</span> * @name traverseNodes
214
- <span class='line'>207</span> * @instance
215
- <span class='line'>208</span> * @function
216
- <span class='line'>209</span> * @private
217
- <span class='line'>210</span> * @param {Node | null} node - The starting DOM node.
218
- <span class='line'>211</span> * @param {string} [search] - The key of the specific microcomponent.
219
- <span class='line'>212</span> * @param {boolean} [firstonly=true] - If true, returns the first match only.
220
- <span class='line'>213</span> * @returns {Array&lt;any>} An array of matching microcomponents.
221
- <span class='line'>214</span> */</span><span class="WHIT">
222
- <span class='line'>215</span> </span><span class="WHIT"> </span><span class="NAME">traverseNodes</span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">search</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">firstonly</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
223
- <span class='line'>216</span> </span><span class="WHIT"> </span><span class="NAME">let</span><span class="WHIT"> </span><span class="NAME">mcValues</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
224
- <span class='line'>217</span> </span><span class="WHIT"> </span><span class="KEYW">while</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">node</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
225
- <span class='line'>218</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">node._mc</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
226
- <span class='line'>219</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">search</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
227
- <span class='line'>220</span> </span><span class="WHIT"> </span><span class="NAME">mcValues</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">mcValues.concat</span><span class="PUNC">(</span><span class="NAME">Object.values</span><span class="PUNC">(</span><span class="NAME">node._mc</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
228
- <span class='line'>221</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
229
- <span class='line'>222</span> </span><span class="WHIT"> </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">search</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">node._mc</span><span class="PUNC">[</span><span class="NAME">search</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
230
- <span class='line'>223</span> </span><span class="WHIT"> </span><span class="NAME">mcValues.push</span><span class="PUNC">(</span><span class="NAME">node._mc</span><span class="PUNC">[</span><span class="NAME">search</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
231
- <span class='line'>224</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
232
- <span class='line'>225</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">firstonly</span><span class="PUNC">)</span><span class="WHIT">
233
- <span class='line'>226</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">mcValues</span><span class="PUNC">;</span><span class="WHIT">
234
- <span class='line'>227</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
235
- <span class='line'>228</span> </span><span class="WHIT"> </span><span class="NAME">node</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">node.parentNode</span><span class="PUNC">;</span><span class="WHIT">
236
- <span class='line'>229</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
237
- <span class='line'>230</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">mcValues</span><span class="PUNC">;</span><span class="WHIT">
238
- <span class='line'>231</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
239
- <span class='line'>232</span> </span><span class="WHIT"> </span><span class="COMM">/**
240
- <span class='line'>233</span> * returns true if the element is an instance of HTMLElement.
241
- <span class='line'>234</span> * @instance
242
- <span class='line'>235</span> * @function
243
- <span class='line'>236</span> * @name isDOM
244
- <span class='line'>237</span> * @private
245
- <span class='line'>238</span> * @type {Function}
246
- <span class='line'>239</span> * @param {any} element - The element to check.
247
- <span class='line'>240</span> * @returns {boolean}
248
- <span class='line'>241</span> */</span><span class="WHIT">
249
- <span class='line'>242</span> </span><span class="WHIT"> </span><span class="NAME">isDOM</span><span class="PUNC">(</span><span class="NAME">element</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
250
- <span class='line'>243</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">element</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">element</span><span class="WHIT"> </span><span class="KEYW">instanceof</span><span class="WHIT"> </span><span class="NAME">HTMLElement</span><span class="PUNC">;</span><span class="WHIT">
251
- <span class='line'>244</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
252
- <span class='line'>245</span> </span><span class="WHIT"> </span><span class="COMM">/**
253
- <span class='line'>246</span> * adds a microcomponent to the private collection.
254
- <span class='line'>247</span> * @name add
255
- <span class='line'>248</span> * @instance
256
- <span class='line'>249</span> * @function
257
- <span class='line'>250</span> * @param {string} [key] - The key to identify the microcomponent.
258
- <span class='line'>251</span> * @param {any} [element={}] - The microcomponent to add.
259
- <span class='line'>252</span> * @returns {any} The added microcomponent.
260
- <span class='line'>253</span> * @example
261
- <span class='line'>254</span> * const privateComp = this.add('privateComponent', {});
262
- <span class='line'>255</span> */</span><span class="WHIT">
263
- <span class='line'>256</span> </span><span class="WHIT"> </span><span class="NAME">add</span><span class="PUNC">(</span><span class="NAME">key</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">element</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
264
- <span class='line'>257</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">key</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
265
- <span class='line'>258</span> </span><span class="WHIT"> </span><span class="NAME">this.privateMCs</span><span class="PUNC">[</span><span class="NAME">key</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">element</span><span class="PUNC">;</span><span class="WHIT">
266
- <span class='line'>259</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
267
- <span class='line'>260</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">element</span><span class="PUNC">;</span><span class="WHIT">
268
- <span class='line'>261</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
269
- <span class='line'>262</span> </span><span class="WHIT"> </span><span class="COMM">/**
270
- <span class='line'>263</span> * removes a microcomponent from the private collection.
271
- <span class='line'>264</span> * @name remove
272
- <span class='line'>265</span> * @instance
273
- <span class='line'>266</span> * @function
274
- <span class='line'>267</span> * @param {string} [key] - The key to identify the microcomponent.
275
- <span class='line'>268</span> * @example
276
- <span class='line'>269</span> * this.remove('privateComponent');
277
- <span class='line'>270</span> */</span><span class="WHIT">
278
- <span class='line'>271</span> </span><span class="WHIT"> </span><span class="NAME">remove</span><span class="PUNC">(</span><span class="NAME">key</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
279
- <span class='line'>272</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">key</span><span class="WHIT"> </span><span class="KEYW">in</span><span class="WHIT"> </span><span class="NAME">this.privateMCs</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
280
- <span class='line'>273</span> </span><span class="WHIT"> </span><span class="KEYW">delete</span><span class="WHIT"> </span><span class="NAME">this.privateMCs</span><span class="PUNC">[</span><span class="NAME">key</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
281
- <span class='line'>274</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
282
- <span class='line'>275</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
283
- <span class='line'>276</span> </span><span class="WHIT"> </span><span class="COMM">/**
284
- <span class='line'>277</span> * removes a microcomponent from the private collection.
285
- <span class='line'>278</span> * @name siblings
286
- <span class='line'>279</span> * @instance
287
- <span class='line'>280</span> * @function
288
- <span class='line'>281</span> * @param {string} [search] - The key of the specific microcomponent.
289
- <span class='line'>282</span> * @returns {Array&lt;any>} An array of matching sibling microcomponents.
290
- <span class='line'>283</span> * @example
291
- <span class='line'>284</span> * const siblings = this.siblings('siblingComponent');
292
- <span class='line'>285</span> */</span><span class="WHIT">
293
- <span class='line'>286</span> </span><span class="WHIT"> </span><span class="NAME">siblings</span><span class="PUNC">(</span><span class="NAME">search</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
294
- <span class='line'>287</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.target</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
295
- <span class='line'>288</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.target</span><span class="WHIT"> </span><span class="KEYW">instanceof</span><span class="WHIT"> </span><span class="NAME">HTMLElement</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
296
- <span class='line'>289</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">this.getMicroComponents</span><span class="PUNC">(</span><span class="PUNC">[</span><span class="NAME">this.target</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">search</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
297
- <span class='line'>290</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
298
- <span class='line'>291</span> </span><span class="WHIT"> </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
299
- <span class='line'>292</span> </span><span class="WHIT"> </span><span class="KEYW">const</span><span class="WHIT"> </span><span class="NAME">result</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.privateMCs</span><span class="PUNC">[</span><span class="NAME">search</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="STRN">''</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
300
- <span class='line'>293</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">search</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">result</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="NAME">result</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">Object.entries</span><span class="PUNC">(</span><span class="NAME">this.privateMCs</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
301
- <span class='line'>294</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
302
- <span class='line'>295</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
303
- <span class='line'>296</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
304
- <span class='line'>297</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
305
- <span class='line'>298</span> </span><span class="WHIT"> </span><span class="COMM">/**
306
- <span class='line'>299</span> * retrieves the first ancestor DOM node with a matching microcomponent.
307
- <span class='line'>300</span> * @name parent
308
- <span class='line'>301</span> * @instance
309
- <span class='line'>302</span> * @function
310
- <span class='line'>303</span> * @param {string} [search] - The key of the specific microcomponent.
311
- <span class='line'>304</span> * @returns {Array&lt;any>} An array with the matching microcomponent.
312
- <span class='line'>305</span> * @example
313
- <span class='line'>306</span> * const parent = mcInstance.parent('parentComponent');
314
- <span class='line'>307</span> */</span><span class="WHIT">
315
- <span class='line'>308</span> </span><span class="WHIT"> </span><span class="COMM">/**
316
- <span class='line'>309</span> */</span><span class="WHIT">
317
- <span class='line'>310</span> </span><span class="WHIT"> </span><span class="NAME">parent</span><span class="PUNC">(</span><span class="NAME">search</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
318
- <span class='line'>311</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">this.isDOM</span><span class="PUNC">(</span><span class="NAME">this.target</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
319
- <span class='line'>312</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
320
- <span class='line'>313</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">this.traverseNodes</span><span class="PUNC">(</span><span class="NAME">this.target.parentNode</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">search</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
321
- <span class='line'>314</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
322
- <span class='line'>315</span> </span><span class="WHIT"> </span><span class="COMM">/**
323
- <span class='line'>316</span> * retrieves the first ancestor DOM node with a matching microcomponent.
324
- <span class='line'>317</span> * @name parents
325
- <span class='line'>318</span> * @instance
326
- <span class='line'>319</span> * @function
327
- <span class='line'>320</span> * @param {string} [search] - The key of the specific microcomponent.
328
- <span class='line'>321</span> * @returns {Array&lt;any>} An array of matching ancestor microcomponents.
329
- <span class='line'>322</span> * @example
330
- <span class='line'>323</span> * const parents = mcInstance.parents('ancestorComponent');
331
- <span class='line'>324</span> */</span><span class="WHIT">
332
- <span class='line'>325</span> </span><span class="WHIT"> </span><span class="NAME">parents</span><span class="PUNC">(</span><span class="NAME">search</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
333
- <span class='line'>326</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">this.isDOM</span><span class="PUNC">(</span><span class="NAME">this.target</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
334
- <span class='line'>327</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
335
- <span class='line'>328</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">this.traverseNodes</span><span class="PUNC">(</span><span class="NAME">this.target.parentNode</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">search</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
336
- <span class='line'>329</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
337
- <span class='line'>330</span> </span><span class="WHIT"> </span><span class="COMM">/**
338
- <span class='line'>331</span> * retrieves nearest child _mc DOM nodes, gets their matching microcomponents, and stops there.
339
- <span class='line'>332</span> * @name children
340
- <span class='line'>333</span> * @instance
341
- <span class='line'>334</span> * @function
342
- <span class='line'>335</span> * @param {string} [search] - The key of the specific microcomponent.
343
- <span class='line'>336</span> * @returns {Array&lt;any>} An array of matching child microcomponents.
344
- <span class='line'>337</span> * @example
345
- <span class='line'>338</span> * const children = mcInstance.children('childComponent');
346
- <span class='line'>339</span> */</span><span class="WHIT">
347
- <span class='line'>340</span> </span><span class="WHIT"> </span><span class="NAME">children</span><span class="PUNC">(</span><span class="NAME">search</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
348
- <span class='line'>341</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">this.isDOM</span><span class="PUNC">(</span><span class="NAME">this.target</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
349
- <span class='line'>342</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
350
- <span class='line'>343</span> </span><span class="WHIT"> </span><span class="KEYW">const</span><span class="WHIT"> </span><span class="NAME">id</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">crypto.randomUUID</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
351
- <span class='line'>344</span> </span><span class="WHIT"> </span><span class="NAME">this.target.setAttribute</span><span class="PUNC">(</span><span class="STRN">'temp-id'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">id</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
352
- <span class='line'>345</span> </span><span class="WHIT"> </span><span class="KEYW">const</span><span class="WHIT"> </span><span class="NAME">myDomElements</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.target.querySelectorAll</span><span class="PUNC">(</span><span class="TOKN">`</span><span class="PUNC">*</span><span class="PUNC">[</span><span class="NAME">_mc</span><span class="PUNC">]</span><span class="PUNC">:</span><span class="NAME">not</span><span class="PUNC">(</span><span class="PUNC">[</span><span class="NAME">temp</span><span class="PUNC">-</span><span class="NAME">id</span><span class="PUNC">=</span><span class="STRN">"${id}"</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="NAME">_mc</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="NAME">_mc</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="TOKN">`</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
353
- <span class='line'>346</span> </span><span class="WHIT"> </span><span class="KEYW">const</span><span class="WHIT"> </span><span class="NAME">mcValues</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.getMicroComponents</span><span class="PUNC">(</span><span class="NAME">Array.from</span><span class="PUNC">(</span><span class="NAME">myDomElements</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">search</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
354
- <span class='line'>347</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">mcValues</span><span class="PUNC">;</span><span class="WHIT">
355
- <span class='line'>348</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
356
- <span class='line'>349</span> </span><span class="WHIT"> </span><span class="COMM">/**
357
- <span class='line'>350</span> * retrieves all decendant _mc DOM nodes and gets their matching microcomponents.
358
- <span class='line'>351</span> * @name children
359
- <span class='line'>352</span> * @instance
360
- <span class='line'>353</span> * @function
361
- <span class='line'>354</span> * @param {string} [search] - The key of the specific microcomponent.
362
- <span class='line'>355</span> * @returns {Array&lt;any>} An array of matching descendant microcomponents.
363
- <span class='line'>356</span> * @example
364
- <span class='line'>357</span> * const descendants = mcInstance.descendants('descendantComponent');
365
- <span class='line'>358</span> */</span><span class="WHIT">
366
- <span class='line'>359</span> </span><span class="WHIT"> </span><span class="NAME">descendants</span><span class="PUNC">(</span><span class="NAME">search</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
367
- <span class='line'>360</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">this.isDOM</span><span class="PUNC">(</span><span class="NAME">this.target</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
368
- <span class='line'>361</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
369
- <span class='line'>362</span> </span><span class="WHIT"> </span><span class="KEYW">const</span><span class="WHIT"> </span><span class="NAME">myDomElements</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.target.querySelectorAll</span><span class="PUNC">(</span><span class="STRN">'*[_mc]'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
370
- <span class='line'>363</span> </span><span class="WHIT"> </span><span class="KEYW">const</span><span class="WHIT"> </span><span class="NAME">mcValues</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.getMicroComponents</span><span class="PUNC">(</span><span class="NAME">Array.from</span><span class="PUNC">(</span><span class="NAME">myDomElements</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">search</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
371
- <span class='line'>364</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">mcValues</span><span class="PUNC">;</span><span class="WHIT">
372
- <span class='line'>365</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
373
- <span class='line'>366</span> </span><span class="PUNC">}</span><span class="WHIT">
374
- <span class='line'>367</span> </span><span class="NAME">export</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT"> </span><span class="NAME">MC</span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
375
- <span class='line'>368</span> </span></pre></body></html>
File without changes
File without changes
File without changes
File without changes