@twobirds/microcomponents 0.0.83 → 0.0.85

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 (202) hide show
  1. package/README.md +22 -6
  2. package/assets/documentation/MC.md +60 -81
  3. package/assets/documentation/elements.md +6 -9
  4. package/assets/documentation/observables.md +97 -11
  5. package/assets/test/test.html +1 -1
  6. package/dist/MC.d.ts +14 -16
  7. package/dist/MC.d.ts.map +1 -1
  8. package/dist/MC.js +150 -218
  9. package/dist/MC.min.js +164 -308
  10. package/dist/MC.ts +213 -319
  11. package/dist/elements.d.ts.map +1 -1
  12. package/dist/elements.js +10 -4
  13. package/dist/elements.min.js +1 -1
  14. package/dist/elements.ts +17 -4
  15. package/dist/formValues.js +2 -2
  16. package/dist/formValues.min.js +1 -1
  17. package/dist/formValues.ts +3 -3
  18. package/dist/microcomponents.d.ts +0 -1
  19. package/dist/microcomponents.d.ts.map +1 -1
  20. package/dist/microcomponents.js +0 -1
  21. package/dist/microcomponents.min.js +1 -1
  22. package/dist/microcomponents.ts +1 -1
  23. package/dist/observables.d.ts.map +1 -1
  24. package/dist/observables.js +14 -12
  25. package/dist/observables.min.js +1 -1
  26. package/dist/observables.ts +32 -32
  27. package/package.json +1 -1
  28. package/public/MC.d.ts +14 -16
  29. package/public/MC.d.ts.map +1 -1
  30. package/public/MC.js +150 -218
  31. package/public/MC.js.map +1 -1
  32. package/public/MC.min.js +164 -308
  33. package/public/MC.ts +213 -319
  34. package/public/documentation/MC.md +60 -81
  35. package/public/documentation/elements.md +6 -9
  36. package/public/documentation/observables.md +97 -11
  37. package/public/elements.d.ts.map +1 -1
  38. package/public/elements.js +10 -4
  39. package/public/elements.js.map +1 -1
  40. package/public/elements.min.js +1 -1
  41. package/public/elements.ts +17 -4
  42. package/public/formValues.js +2 -2
  43. package/public/formValues.js.map +1 -1
  44. package/public/formValues.min.js +1 -1
  45. package/public/formValues.ts +3 -3
  46. package/public/microcomponents.d.ts +0 -1
  47. package/public/microcomponents.d.ts.map +1 -1
  48. package/public/microcomponents.js +0 -1
  49. package/public/microcomponents.js.map +1 -1
  50. package/public/microcomponents.min.js +1 -1
  51. package/public/microcomponents.ts +1 -1
  52. package/public/observables.d.ts.map +1 -1
  53. package/public/observables.js +14 -12
  54. package/public/observables.js.map +1 -1
  55. package/public/observables.min.js +1 -1
  56. package/public/observables.ts +32 -32
  57. package/public/src/MC.d.ts +14 -16
  58. package/public/src/MC.d.ts.map +1 -1
  59. package/public/src/MC.js +150 -218
  60. package/public/src/MC.js.map +1 -1
  61. package/public/src/MC.ts +213 -319
  62. package/public/src/elements.d.ts.map +1 -1
  63. package/public/src/elements.js +10 -4
  64. package/public/src/elements.js.map +1 -1
  65. package/public/src/elements.ts +17 -4
  66. package/public/src/formValues.js +2 -2
  67. package/public/src/formValues.js.map +1 -1
  68. package/public/src/formValues.ts +3 -3
  69. package/public/src/microcomponents.d.ts +0 -1
  70. package/public/src/microcomponents.d.ts.map +1 -1
  71. package/public/src/microcomponents.js +0 -1
  72. package/public/src/microcomponents.js.map +1 -1
  73. package/public/src/microcomponents.ts +1 -1
  74. package/public/src/observables.d.ts.map +1 -1
  75. package/public/src/observables.js +14 -12
  76. package/public/src/observables.js.map +1 -1
  77. package/public/src/observables.ts +32 -32
  78. package/public/src/test/test/grandparent.d.ts.map +1 -1
  79. package/public/src/test/test/grandparent.js +1 -1
  80. package/public/src/test/test/grandparent.js.map +1 -1
  81. package/public/src/test/test/grandparent.ts +12 -4
  82. package/public/src/test/test/testform.js +1 -1
  83. package/public/src/test/test/testform.js.map +1 -1
  84. package/public/src/test/test/testform.ts +6 -8
  85. package/public/src/test/test.js +6 -5
  86. package/public/src/test/test.js.map +1 -1
  87. package/public/src/test/test.ts +10 -9
  88. package/public/test/MC.d.ts +14 -16
  89. package/public/test/MC.d.ts.map +1 -1
  90. package/public/test/MC.js +150 -218
  91. package/public/test/MC.min.js +164 -308
  92. package/public/test/MC.ts +213 -319
  93. package/public/test/elements.d.ts.map +1 -1
  94. package/public/test/elements.js +10 -4
  95. package/public/test/elements.min.js +1 -1
  96. package/public/test/elements.ts +17 -4
  97. package/public/test/formValues.js +2 -2
  98. package/public/test/formValues.min.js +1 -1
  99. package/public/test/formValues.ts +3 -3
  100. package/public/test/microcomponents.d.ts +0 -1
  101. package/public/test/microcomponents.d.ts.map +1 -1
  102. package/public/test/microcomponents.js +0 -1
  103. package/public/test/microcomponents.min.js +1 -1
  104. package/public/test/microcomponents.ts +1 -1
  105. package/public/test/observables.d.ts.map +1 -1
  106. package/public/test/observables.js +14 -12
  107. package/public/test/observables.min.js +1 -1
  108. package/public/test/observables.ts +32 -32
  109. package/public/test/test/grandparent.d.ts.map +1 -1
  110. package/public/test/test/grandparent.js +1 -1
  111. package/public/test/test/grandparent.js.map +1 -1
  112. package/public/test/test/grandparent.ts +12 -4
  113. package/public/test/test/testform.js +1 -1
  114. package/public/test/test/testform.js.map +1 -1
  115. package/public/test/test/testform.ts +6 -8
  116. package/public/test/test.html +1 -1
  117. package/public/test/test.js +6 -5
  118. package/public/test/test.js.map +1 -1
  119. package/public/test/test.ts +10 -9
  120. package/public/typedoc/assets/navigation.js +1 -1
  121. package/public/typedoc/assets/search.js +1 -1
  122. package/public/typedoc/classes/MC.DC.html +7 -6
  123. package/public/typedoc/classes/MC.MC.html +3 -6
  124. package/public/typedoc/classes/MC.McBase.html +3 -4
  125. package/public/typedoc/functions/MC.autoload.html +1 -1
  126. package/public/typedoc/functions/MC.off.html +1 -0
  127. package/public/typedoc/functions/{selectors._d.html → MC.on.html} +1 -1
  128. package/public/typedoc/functions/MC.one.html +1 -0
  129. package/public/typedoc/functions/MC.trigger.html +1 -0
  130. package/public/typedoc/functions/elements.defineCE.html +1 -1
  131. package/public/typedoc/functions/elements.getCE.html +1 -1
  132. package/public/typedoc/functions/formValues.formValues.html +1 -1
  133. package/public/typedoc/functions/observables.observe.html +1 -1
  134. package/public/typedoc/index.html +21 -10
  135. package/public/typedoc/interfaces/MC.HTMLMcElement.html +2 -2
  136. package/public/typedoc/modules/MC.html +6 -5
  137. package/public/typedoc/modules/elements.html +1 -1
  138. package/public/typedoc/modules/formValues.html +1 -1
  139. package/public/typedoc/modules/observables.html +1 -1
  140. package/public/typedoc/modules.html +0 -1
  141. package/public/typedoc/types/observables.Observable.html +1 -1
  142. package/src/MC.ts +213 -319
  143. package/src/elements.ts +17 -4
  144. package/src/formValues.ts +3 -3
  145. package/src/microcomponents.ts +1 -1
  146. package/src/observables.ts +32 -32
  147. package/src/test/test/grandparent.ts +12 -4
  148. package/src/test/test/testform.ts +6 -8
  149. package/src/test/test.ts +10 -9
  150. package/tsconfig.json +2 -2
  151. package/typedoc.json +1 -1
  152. package/webpack.config.js +2 -2
  153. package/dist/McEvent.d.ts +0 -15
  154. package/dist/McEvent.d.ts.map +0 -1
  155. package/dist/McEvent.js +0 -71
  156. package/dist/selectors.d.ts +0 -106
  157. package/dist/selectors.d.ts.map +0 -1
  158. package/dist/selectors.js +0 -759
  159. package/dist/selectors.min.js +0 -1
  160. package/public/McEvent.d.ts +0 -15
  161. package/public/McEvent.d.ts.map +0 -1
  162. package/public/McEvent.js +0 -71
  163. package/public/McEvent.js.map +0 -1
  164. package/public/selectors.d.ts +0 -106
  165. package/public/selectors.d.ts.map +0 -1
  166. package/public/selectors.js +0 -759
  167. package/public/selectors.js.map +0 -1
  168. package/public/selectors.min.js +0 -1
  169. package/public/src/McEvent.d.ts +0 -15
  170. package/public/src/McEvent.d.ts.map +0 -1
  171. package/public/src/McEvent.js +0 -71
  172. package/public/src/McEvent.js.map +0 -1
  173. package/public/src/selectors.d.ts +0 -106
  174. package/public/src/selectors.d.ts.map +0 -1
  175. package/public/src/selectors.js +0 -759
  176. package/public/src/selectors.js.map +0 -1
  177. package/public/test/McEvent.d.ts +0 -15
  178. package/public/test/McEvent.d.ts.map +0 -1
  179. package/public/test/McEvent.js +0 -71
  180. package/public/test/McEvent.ts +0 -96
  181. package/public/test/selectors.d.ts +0 -106
  182. package/public/test/selectors.d.ts.map +0 -1
  183. package/public/test/selectors.js +0 -759
  184. package/public/test/selectors.min.js +0 -1
  185. package/public/test/selectors.ts +0 -1269
  186. package/public/typedoc/classes/MC.McEvent.html +0 -9
  187. package/public/typedoc/functions/MC.addListener.html +0 -1
  188. package/public/typedoc/functions/MC.removeListener.html +0 -1
  189. package/public/typedoc/functions/selectors._t.html +0 -1
  190. package/public/typedoc/interfaces/selectors.DSelector.html +0 -48
  191. package/public/typedoc/interfaces/selectors.TSelector.html +0 -34
  192. package/public/typedoc/modules/selectors.html +0 -7
  193. package/public/typedoc/types/selectors.selection.html +0 -1
  194. package/public/typedoc/types/selectors.singleSelector.html +0 -1
  195. package/src/McEvent.ts +0 -96
  196. package/src/selectors.ts +0 -1269
  197. /package/{dist/McEvent.ts → public/McEvent._ts} +0 -0
  198. /package/{dist/selectors.ts → public/selectors._ts} +0 -0
  199. /package/public/{McEvent.ts → src/McEvent._ts} +0 -0
  200. /package/public/{selectors.ts → src/selectors._ts} +0 -0
  201. /package/{public/src/McEvent.ts → src/McEvent._ts} +0 -0
  202. /package/{public/src/selectors.ts → src/selectors._ts} +0 -0
package/public/typedoc/functions/observables.observe.html CHANGED
@@ -1 +1 @@
1
- <!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>observe | Micro Components</title><meta name="description" content="Documentation for Micro Components"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Micro Components</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Micro Components</a></li><li><a href="../modules/observables.html">observables</a></li><li><a href="observables.observe.html">observe</a></li></ul><h1>Function observe</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="observe" class="tsd-anchor"></a><span class="tsd-kind-call-signature">observe</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">target</span>, <span class="tsd-kind-parameter">propertyName</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">LooseObject</span><a href="#observe" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">target</span>: <span class="tsd-signature-type">LooseObject</span></span></li><li><span><code class="tsd-tag">Optional</code><span class="tsd-kind-parameter">propertyName</span>: <span class="tsd-signature-type">string</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">LooseObject</span></h4><aside class="tsd-sources"><ul><li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/ccac2b590950e9a31c1189c5c494a10768bc260d/src/observables.ts#L310">src/observables.ts:310</a></li></ul></aside></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>Micro Components</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
1
+ <!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>observe | Micro Components</title><meta name="description" content="Documentation for Micro Components"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Micro Components</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Micro Components</a></li><li><a href="../modules/observables.html">observables</a></li><li><a href="observables.observe.html">observe</a></li></ul><h1>Function observe</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="observe" class="tsd-anchor"></a><span class="tsd-kind-call-signature">observe</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">target</span>, <span class="tsd-kind-parameter">propertyName</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">LooseObject</span><a href="#observe" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">target</span>: <span class="tsd-signature-type">LooseObject</span></span></li><li><span><code class="tsd-tag">Optional</code><span class="tsd-kind-parameter">propertyName</span>: <span class="tsd-signature-type">string</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">LooseObject</span></h4><aside class="tsd-sources"><ul><li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/fde30282de14661e652edfa56104b9706ab40e0f/src/observables.ts#L310">src/observables.ts:310</a></li></ul></aside></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>Micro Components</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
package/public/typedoc/index.html CHANGED
@@ -41,28 +41,39 @@
41
41
  <p>Also there is a bundle file that contains all of the above.</p>
42
42
  <p>Check the <a href="https://twobirds.gitlab.io/microcomponents/typedoc/index.html" target="_blank" class="external">typedoc API reference</a> if you want to drill into the source code.</p>
43
43
  <p>To see what can be done, go to <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/magic.md?ref_type=heads" target="_blank" class="external">additional concepts</a> which shows what it already has been used for.</p>
44
- <a id="md:simple-usage-example" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Simple Usage Example<a href="#md:simple-usage-example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p><strong>Micro Components</strong> can be added to to a DOM element like this:</p>
44
+ <a id="md:simple-usage-example" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Simple Usage Example<a href="#md:simple-usage-example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p><strong>Hint:</strong> this only shows how Micro Components are stored in the DOM structure, for details about functionality refer to above links!</p>
45
+ <p><strong>Micro Components</strong> can be added to to a DOM element like this:</p>
45
46
  <p>before:</p>
46
47
  <pre><code class="HTML"><span class="hl-0">&lt;</span><span class="hl-1">div</span><span class="hl-0">&gt;&lt;/</span><span class="hl-1">div</span><span class="hl-0">&gt;</span>
47
48
  </code><button type="button">Copy</button></pre>
48
49
 
49
50
  <p>code:</p>
50
- <pre><code class="typescript"><span class="hl-2">// create a custom micro component class</span><br/><span class="hl-3">class</span><span class="hl-4"> </span><span class="hl-5">MyMC</span><span class="hl-4"> </span><span class="hl-3">extends</span><span class="hl-4"> </span><span class="hl-5">DC</span><span class="hl-4">{</span><br/><br/><span class="hl-4"> </span><span class="hl-3">constructor</span><span class="hl-4">( </span><span class="hl-6">target</span><span class="hl-4"> ){</span><br/><span class="hl-4"> </span><span class="hl-3">super</span><span class="hl-4">( </span><span class="hl-6">target</span><span class="hl-4"> );</span><br/><span class="hl-4"> }</span><br/><br/><span class="hl-4"> </span><span class="hl-7">helloWorld</span><span class="hl-4">(){</span><br/><span class="hl-4"> </span><span class="hl-6">console</span><span class="hl-4">.</span><span class="hl-7">log</span><span class="hl-4">( </span><span class="hl-8">&#39;Hello World&#39;</span><span class="hl-4"> );</span><br/><span class="hl-4"> }</span><br/><br/><span class="hl-4">}</span><br/><br/><span class="hl-2">// get some element from the DOM</span><br/><span class="hl-3">const</span><span class="hl-4"> </span><span class="hl-9">element</span><span class="hl-4"> = </span><span class="hl-6">document</span><span class="hl-4">.</span><span class="hl-7">querySelector</span><span class="hl-4">(</span><span class="hl-8">&#39;div&#39;</span><span class="hl-4">)</span><br/><br/><span class="hl-2">// Add the custom micro component instance to the target element</span><br/><span class="hl-9">DC</span><span class="hl-4">.</span><span class="hl-7">add</span><span class="hl-4">(</span><br/><span class="hl-4"> </span><span class="hl-6">element</span><span class="hl-4">,</span><br/><span class="hl-4"> </span><span class="hl-8">&#39;myMC&#39;</span><span class="hl-4">,</span><br/><span class="hl-4"> </span><span class="hl-3">new</span><span class="hl-4"> </span><span class="hl-7">MyMC</span><span class="hl-4">( </span><span class="hl-6">element</span><span class="hl-4"> )</span><br/><span class="hl-4">);</span><br/><br/><span class="hl-2">// Hello World</span><br/><span class="hl-6">element</span><br/><span class="hl-4"> .</span><span class="hl-6">_mc</span><br/><span class="hl-4"> .</span><span class="hl-6">myMC</span><br/><span class="hl-4"> .</span><span class="hl-7">helloWorld</span><span class="hl-4">();</span>
51
+ <pre><code class="javascript"><span class="hl-2">// create a custom micro component class</span><br/><span class="hl-3">class</span><span class="hl-4"> </span><span class="hl-5">MyMC</span><span class="hl-4"> </span><span class="hl-3">extends</span><span class="hl-4"> </span><span class="hl-5">DC</span><span class="hl-4">{</span><br/><br/><span class="hl-4"> </span><span class="hl-3">constructor</span><span class="hl-4">( </span><span class="hl-6">target</span><span class="hl-4"> ){</span><br/><span class="hl-4"> </span><span class="hl-3">super</span><span class="hl-4">( </span><span class="hl-6">target</span><span class="hl-4"> );</span><br/><span class="hl-4"> }</span><br/><br/><span class="hl-4"> </span><span class="hl-7">helloWorld</span><span class="hl-4">(){</span><br/><span class="hl-4"> </span><span class="hl-6">console</span><span class="hl-4">.</span><span class="hl-7">log</span><span class="hl-4">( </span><span class="hl-8">&#39;Hello World&#39;</span><span class="hl-4"> );</span><br/><span class="hl-4"> }</span><br/><br/><span class="hl-4">}</span><br/><br/><span class="hl-2">// get some element from the DOM</span><br/><span class="hl-3">const</span><span class="hl-4"> </span><span class="hl-9">element</span><span class="hl-4"> = </span><span class="hl-6">document</span><span class="hl-4">.</span><span class="hl-7">querySelector</span><span class="hl-4">(</span><span class="hl-8">&#39;div&#39;</span><span class="hl-4">);</span><br/><br/><span class="hl-2">// Add the custom micro component instance to the target element</span><br/><span class="hl-9">DC</span><span class="hl-4">.</span><span class="hl-7">add</span><span class="hl-4">(</span><br/><span class="hl-4"> </span><span class="hl-6">element</span><span class="hl-4">,</span><br/><span class="hl-4"> </span><span class="hl-8">&#39;myMC&#39;</span><span class="hl-4">,</span><br/><span class="hl-4"> </span><span class="hl-3">new</span><span class="hl-4"> </span><span class="hl-7">MyMC</span><span class="hl-4">( </span><span class="hl-6">element</span><span class="hl-4"> )</span><br/><span class="hl-4">);</span><br/><br/><span class="hl-2">// Hello World</span><br/><span class="hl-6">element</span><br/><span class="hl-4"> .</span><span class="hl-6">_mc</span><br/><span class="hl-4"> .</span><span class="hl-6">myMC</span><br/><span class="hl-4"> .</span><span class="hl-7">helloWorld</span><span class="hl-4">();</span>
51
52
  </code><button type="button">Copy</button></pre>
52
53
 
53
54
  <p>after:</p>
54
- <pre><code class="HTML"><span class="hl-0">&lt;</span><span class="hl-1">div</span><span class="hl-4"> </span><span class="hl-10">_mc</span><span class="hl-0">&gt;&lt;/</span><span class="hl-1">div</span><span class="hl-0">&gt;</span>
55
+ <pre><code class="HTML"><span class="hl-0">&lt;</span><span class="hl-1">div</span><span class="hl-4"> </span><span class="hl-10">data-mc</span><span class="hl-0">&gt;&lt;/</span><span class="hl-1">div</span><span class="hl-0">&gt;</span>
55
56
  </code><button type="button">Copy</button></pre>
56
57
 
57
- <p>The <code>_mc</code> <strong>attribute</strong> indicates that this <strong>HTML element contains at least one micro component</strong>. This is needed for the selectors.</p>
58
- <p>The <code>_mc</code> <strong>attribute</strong> and <strong>property</strong> are the only interference with the DOM, so any other system should be happy to work with this.</p>
58
+ <p>The <code>data-mc</code> <strong>attribute</strong> indicates that this <strong>HTML element contains at least one micro component</strong>. This is needed for the selectors.</p>
59
+ <p>The <code>_mc</code> <strong>property</strong> is the only interference with the DOM, so any other system should be happy to work with this.</p>
59
60
  <a id="md:distinct-differences-to-other-frameworks" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Distinct differences to other frameworks<a href="#md:distinct-differences-to-other-frameworks" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>There are a few potentially unique aspects of this micro components system that might differentiate it from other frameworks:</p>
60
61
  <ul>
61
- <li><strong>Pure OOP Approach</strong>: The system explicitly positions itself as a strict object-oriented alternative to the functional approaches that dominate many modern frameworks.</li>
62
- <li><strong>Minimal Interference</strong>: The system has minimal DOM interference (only adding _mc attribute and property). This makes it unusually compatible with other frameworks or libraries.</li>
63
- <li><strong>Hierarchical Component Traversal</strong>: The built-in parent/child/ancestor/descendant traversal methods provide a clean way to navigate component relationships.</li>
64
- <li><strong>Direct DOM Integration</strong>: Unlike virtual DOM-based frameworks, this approach works directly with the actual DOM while still providing component encapsulation.</li>
65
- <li><strong>Outsourcing Potential</strong>: Your external coders do not need to access your code repository or your toolchain.</li>
62
+ <li>
63
+ <p><strong>Pure OOP Approach</strong>: The system explicitly positions itself as a strict object-oriented alternative to the functional approaches that dominate many modern frameworks.</p>
64
+ </li>
65
+ <li>
66
+ <p><strong>Minimal Interference</strong>: The system has minimal DOM interference, only adding _mc property to DOM nodes that contain code. This makes it unusually compatible with other frameworks or libraries.</p>
67
+ </li>
68
+ <li>
69
+ <p><strong>Hierarchical Component Traversal</strong>: The built-in parent/child/ancestor/descendant traversal methods provide a clean way to navigate component relationships.</p>
70
+ </li>
71
+ <li>
72
+ <p><strong>Direct DOM Integration</strong>: Unlike virtual DOM-based frameworks, this approach works directly with the actual DOM while still providing component encapsulation.</p>
73
+ </li>
74
+ <li>
75
+ <p><strong>Outsourcing Potential</strong>: Your external coders do not need to access your code repository or your toolchain.</p>
76
+ </li>
66
77
  </ul>
67
78
  <p>The strongest argument might be for developers who prefer OOP, want minimal framework lock-in, and need a lightweight solution that works well with existing code or other libraries.</p>
68
79
  <a id="md:contact" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Contact<a href="#md:contact" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Feel free to contact me for any questions or inquiries:</p>