aberdeen 1.18.2 → 1.19.0

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 (152) hide show
  1. package/README.md +9 -0
  2. package/dist/src/aberdeen.d.ts +27 -0
  3. package/{dist-docs/assets/aberdeen/aberdeen.js → dist/src/aberdeen.dev.js} +776 -15
  4. package/dist/src/aberdeen.dev.js.map +12 -0
  5. package/dist/src/aberdeen.js +59 -13
  6. package/dist/src/aberdeen.js.map +3 -3
  7. package/dist/src/devtools.d.ts +26 -0
  8. package/html-to-aberdeen +9 -5
  9. package/package.json +17 -10
  10. package/skill/A.md +127 -0
  11. package/skill/Dispatcher.md +51 -0
  12. package/skill/OPAQUE.md +15 -0
  13. package/skill/PromiseProxy.md +25 -0
  14. package/skill/Route.md +50 -0
  15. package/skill/SKILL.md +272 -156
  16. package/skill/applyCanon.md +20 -0
  17. package/skill/applyPrediction.md +15 -0
  18. package/skill/back.md +11 -0
  19. package/skill/clean.md +43 -0
  20. package/skill/clone.md +15 -0
  21. package/skill/copy.md +40 -0
  22. package/skill/count.md +32 -0
  23. package/skill/cssVars.md +15 -0
  24. package/skill/darkMode.md +26 -0
  25. package/skill/derive.md +56 -0
  26. package/skill/developer-tools.md +23 -0
  27. package/skill/disableCreateDestroy.md +11 -0
  28. package/skill/dump.md +37 -0
  29. package/skill/freeze.md +20 -0
  30. package/skill/full-example-multi-page-app.md +146 -0
  31. package/skill/go.md +25 -0
  32. package/skill/grow.md +13 -0
  33. package/skill/html-to-aberdeen.md +9 -0
  34. package/skill/insertCss.md +79 -0
  35. package/skill/insertGlobalCss.md +68 -0
  36. package/skill/interceptLinks.md +19 -0
  37. package/skill/invertString.md +32 -0
  38. package/skill/isEmpty.md +38 -0
  39. package/skill/map.md +16 -0
  40. package/skill/matchCurrent.md +27 -0
  41. package/skill/merge.md +27 -0
  42. package/skill/mount.md +48 -0
  43. package/skill/multiMap.md +15 -0
  44. package/skill/onEach.md +14 -0
  45. package/skill/partition.md +15 -0
  46. package/skill/peek.md +36 -0
  47. package/skill/persistScroll.md +13 -0
  48. package/skill/proxy.md +11 -0
  49. package/skill/push.md +13 -0
  50. package/skill/ref.md +39 -0
  51. package/skill/runQueue.md +34 -0
  52. package/skill/setErrorHandler.md +48 -0
  53. package/skill/setLog.md +9 -0
  54. package/skill/setSpacingCssVars.md +31 -0
  55. package/skill/shrink.md +13 -0
  56. package/skill/unmountAll.md +9 -0
  57. package/skill/unproxy.md +43 -0
  58. package/skill/up.md +13 -0
  59. package/src/aberdeen.ts +194 -73
  60. package/src/devtools.ts +685 -0
  61. package/dist-docs/.nojekyll +0 -1
  62. package/dist-docs/Tutorial/index.html +0 -305
  63. package/dist-docs/aberdeen/A/index.html +0 -116
  64. package/dist-docs/aberdeen/CUSTOM_DUMP/index.html +0 -7
  65. package/dist-docs/aberdeen/NO_COPY/index.html +0 -2
  66. package/dist-docs/aberdeen/OPAQUE/index.html +0 -12
  67. package/dist-docs/aberdeen/PromiseProxy/index.html +0 -8
  68. package/dist-docs/aberdeen/clean/index.html +0 -11
  69. package/dist-docs/aberdeen/clone/index.html +0 -5
  70. package/dist-docs/aberdeen/copy/index.html +0 -22
  71. package/dist-docs/aberdeen/count/index.html +0 -7
  72. package/dist-docs/aberdeen/cssVars/index.html +0 -11
  73. package/dist-docs/aberdeen/darkMode/index.html +0 -9
  74. package/dist-docs/aberdeen/default/index.html +0 -342
  75. package/dist-docs/aberdeen/derive/index.html +0 -18
  76. package/dist-docs/aberdeen/disableCreateDestroy/index.html +0 -6
  77. package/dist-docs/aberdeen/dump/index.html +0 -11
  78. package/dist-docs/aberdeen/index.html +0 -54
  79. package/dist-docs/aberdeen/insertCss/index.html +0 -30
  80. package/dist-docs/aberdeen/insertGlobalCss/index.html +0 -19
  81. package/dist-docs/aberdeen/invertString/index.html +0 -13
  82. package/dist-docs/aberdeen/isEmpty/index.html +0 -12
  83. package/dist-docs/aberdeen/map/index.html +0 -26
  84. package/dist-docs/aberdeen/merge/index.html +0 -11
  85. package/dist-docs/aberdeen/mount/index.html +0 -17
  86. package/dist-docs/aberdeen/multiMap/index.html +0 -28
  87. package/dist-docs/aberdeen/onEach/index.html +0 -19
  88. package/dist-docs/aberdeen/partition/index.html +0 -36
  89. package/dist-docs/aberdeen/peek/index.html +0 -40
  90. package/dist-docs/aberdeen/proxy/index.html +0 -35
  91. package/dist-docs/aberdeen/ref/index.html +0 -13
  92. package/dist-docs/aberdeen/runQueue/index.html +0 -13
  93. package/dist-docs/aberdeen/setErrorHandler/index.html +0 -16
  94. package/dist-docs/aberdeen/setSpacingCssVars/index.html +0 -8
  95. package/dist-docs/aberdeen/unmountAll/index.html +0 -5
  96. package/dist-docs/aberdeen/unproxy/index.html +0 -11
  97. package/dist-docs/assets/aberdeen/aberdeen.d.ts +0 -963
  98. package/dist-docs/assets/aberdeen/aberdeen.js.map +0 -11
  99. package/dist-docs/assets/aberdeen/dispatcher.d.ts +0 -57
  100. package/dist-docs/assets/aberdeen/dispatcher.js +0 -66
  101. package/dist-docs/assets/aberdeen/dispatcher.js.map +0 -10
  102. package/dist-docs/assets/aberdeen/helpers/reverseSortedSet.d.ts +0 -96
  103. package/dist-docs/assets/aberdeen/prediction.d.ts +0 -33
  104. package/dist-docs/assets/aberdeen/prediction.js +0 -112
  105. package/dist-docs/assets/aberdeen/prediction.js.map +0 -10
  106. package/dist-docs/assets/aberdeen/route.d.ts +0 -137
  107. package/dist-docs/assets/aberdeen/route.js +0 -287
  108. package/dist-docs/assets/aberdeen/route.js.map +0 -10
  109. package/dist-docs/assets/aberdeen/transitions.d.ts +0 -18
  110. package/dist-docs/assets/aberdeen/transitions.js +0 -47
  111. package/dist-docs/assets/aberdeen/transitions.js.map +0 -10
  112. package/dist-docs/assets/custom.js +0 -573
  113. package/dist-docs/assets/favicon.png +0 -0
  114. package/dist-docs/assets/hierarchy.js +0 -1
  115. package/dist-docs/assets/highlight.css +0 -134
  116. package/dist-docs/assets/icons.js +0 -18
  117. package/dist-docs/assets/icons.svg +0 -1
  118. package/dist-docs/assets/main.js +0 -60
  119. package/dist-docs/assets/navigation.js +0 -1
  120. package/dist-docs/assets/search.js +0 -1
  121. package/dist-docs/assets/style.css +0 -1640
  122. package/dist-docs/dispatcher/Dispatcher/index.html +0 -21
  123. package/dist-docs/dispatcher/MATCH_FAILED/index.html +0 -2
  124. package/dist-docs/dispatcher/MATCH_REST/index.html +0 -2
  125. package/dist-docs/dispatcher/index.html +0 -4
  126. package/dist-docs/hierarchy.html +0 -1
  127. package/dist-docs/index.html +0 -61
  128. package/dist-docs/media/CHANGELOG.md +0 -266
  129. package/dist-docs/modules.html +0 -1
  130. package/dist-docs/prediction/applyCanon/index.html +0 -13
  131. package/dist-docs/prediction/applyPrediction/index.html +0 -8
  132. package/dist-docs/prediction/index.html +0 -9
  133. package/dist-docs/route/Route/index.html +0 -23
  134. package/dist-docs/route/back/index.html +0 -4
  135. package/dist-docs/route/current/index.html +0 -2
  136. package/dist-docs/route/go/index.html +0 -14
  137. package/dist-docs/route/index.html +0 -15
  138. package/dist-docs/route/interceptLinks/index.html +0 -8
  139. package/dist-docs/route/matchCurrent/index.html +0 -10
  140. package/dist-docs/route/persistScroll/index.html +0 -6
  141. package/dist-docs/route/push/index.html +0 -6
  142. package/dist-docs/route/setLog/index.html +0 -3
  143. package/dist-docs/route/up/index.html +0 -5
  144. package/dist-docs/sitemap.xml +0 -239
  145. package/dist-docs/transitions/grow/index.html +0 -6
  146. package/dist-docs/transitions/index.html +0 -5
  147. package/dist-docs/transitions/shrink/index.html +0 -6
  148. package/skill/aberdeen.md +0 -4586
  149. package/skill/dispatcher.md +0 -129
  150. package/skill/prediction.md +0 -73
  151. package/skill/route.md +0 -322
  152. package/skill/transitions.md +0 -59
package/dist-docs/dispatcher/Dispatcher/index.html DELETED
@@ -1,21 +0,0 @@
1
- <!DOCTYPE html><html class="default" lang="en" data-base="../../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Dispatcher | Aberdeen - v1.18.2</title><link rel="icon" href="../../assets/favicon.png" type="image/png"/><meta name="description" content="Documentation for Aberdeen"/><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 defer src="../../assets/custom.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(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../../index.html" class="title">Aberdeen - v1.18.2</a><div id="tsd-toolbar-links"><a href="https://aberdeenjs.org/">What&#39;s this?</a><a href="https://aberdeenjs.org/Tutorial/">Tutorial</a><a href="https://github.com/vanviegen/aberdeen">GitHub</a></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../">dispatcher</a></li><li><a href="" aria-current="page">Dispatcher</a></li></ul><h1>Class Dispatcher</h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>Simple route matcher and dispatcher.</p>
2
- <p>Example usage:</p>
3
- <pre><code class="ts"><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-5">*</span><span class="hl-1"> </span><span class="hl-0">as</span><span class="hl-1"> </span><span class="hl-2">route</span><span class="hl-1"> </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">&#39;aberdeen/route&#39;</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">Dispatcher</span><span class="hl-1">, </span><span class="hl-2">MATCH_REST</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">&#39;aberdeen/dispatcher&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">dispatcher</span><span class="hl-1"> = </span><span class="hl-5">new</span><span class="hl-1"> </span><span class="hl-7">Dispatcher</span><span class="hl-1">();</span><br/><br/><span class="hl-2">dispatcher</span><span class="hl-1">.</span><span class="hl-7">addRoute</span><span class="hl-1">(</span><span class="hl-3">&quot;user&quot;</span><span class="hl-1">, </span><span class="hl-2">Number</span><span class="hl-1">, </span><span class="hl-3">&quot;stream&quot;</span><span class="hl-1">, </span><span class="hl-2">String</span><span class="hl-1">, (</span><span class="hl-2">id</span><span class="hl-1">, </span><span class="hl-2">stream</span><span class="hl-1">) </span><span class="hl-5">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">console</span><span class="hl-1">.</span><span class="hl-7">log</span><span class="hl-1">(</span><span class="hl-3">`User </span><span class="hl-5">${</span><span class="hl-2">id</span><span class="hl-5">}</span><span class="hl-3">, stream </span><span class="hl-5">${</span><span class="hl-2">stream</span><span class="hl-5">}</span><span class="hl-3">`</span><span class="hl-1">);</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-2">dispatcher</span><span class="hl-1">.</span><span class="hl-7">dispatch</span><span class="hl-1">([</span><span class="hl-3">&quot;user&quot;</span><span class="hl-1">, </span><span class="hl-3">&quot;42&quot;</span><span class="hl-1">, </span><span class="hl-3">&quot;stream&quot;</span><span class="hl-1">, </span><span class="hl-3">&quot;music&quot;</span><span class="hl-1">]);</span><br/><span class="hl-4">// Logs: User 42, stream music</span><br/><br/><span class="hl-2">dispatcher</span><span class="hl-1">.</span><span class="hl-7">addRoute</span><span class="hl-1">(</span><span class="hl-3">&quot;search&quot;</span><span class="hl-1">, </span><span class="hl-6">MATCH_REST</span><span class="hl-1">, (</span><span class="hl-2">terms</span><span class="hl-1">: </span><span class="hl-10">string</span><span class="hl-1">[]) </span><span class="hl-5">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">console</span><span class="hl-1">.</span><span class="hl-7">log</span><span class="hl-1">(</span><span class="hl-3">&quot;Search terms:&quot;</span><span class="hl-1">, </span><span class="hl-2">terms</span><span class="hl-1">);</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-2">dispatcher</span><span class="hl-1">.</span><span class="hl-7">dispatch</span><span class="hl-1">([</span><span class="hl-3">&quot;search&quot;</span><span class="hl-1">, </span><span class="hl-3">&quot;classical&quot;</span><span class="hl-1">, </span><span class="hl-3">&quot;piano&quot;</span><span class="hl-1">]);</span><br/><span class="hl-4">// Logs: Search terms: [ &#39;classical&#39;, &#39;piano&#39; ]</span>
4
- </code><button type="button">Copy</button></pre>
5
-
6
- </div><div class="tsd-comment tsd-typography"></div></section><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/ae96ee5d2bf101de8d04c7efc61a03e8fe8fe6f7/src/dispatcher.ts#L61">dispatcher.ts:61</a></li></ul></aside><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-accordion" open><summary class="tsd-accordion-summary tsd-index-summary"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronSmall"></use></svg><h5 class="tsd-index-heading uppercase">Index</h5></summary><div class="tsd-accordion-details"><section class="tsd-index-section"><h3 class="tsd-index-heading">Constructors</h3><div class="tsd-index-list"><a href="#constructor" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Constructor"><use href="../../assets/icons.svg#icon-512"></use></svg><span>constructor</span></a>
7
- </div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Methods</h3><div class="tsd-index-list"><a href="#addroute" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>add<wbr/>Route</span></a>
8
- <a href="#dispatch" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>dispatch</span></a>
9
- </div></section></div></details></section></section><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Constructors"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg><h2>Constructors</h2></summary><section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="constructor"><span>constructor</span><a href="#constructor" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="constructordispatcher"><span class="tsd-signature-keyword">new</span> <span class="tsd-kind-constructor-signature">Dispatcher</span><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <a href="" class="tsd-signature-type tsd-kind-class">Dispatcher</a><a href="#constructordispatcher" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><h4 class="tsd-returns-title">Returns <a href="" class="tsd-signature-type tsd-kind-class">Dispatcher</a></h4></div></li></ul></section></section></details><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Methods"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg><h2>Methods</h2></summary><section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="addroute"><span>add<wbr/>Route</span><a href="#addroute" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="addroute-1"><span class="tsd-kind-call-signature">addRoute</span><span class="tsd-signature-symbol">&lt;</span><br/>    <a class="tsd-signature-type tsd-kind-type-parameter" href="#addroutet">T</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">Matcher</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">,</span><br/>    <a class="tsd-signature-type tsd-kind-type-parameter" href="#addrouteh">H</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">...</span><span class="tsd-kind-parameter">args</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">ParamsFromMatchers</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#addroutet">T</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=&gt;</span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><br/>    <span class="tsd-signature-symbol">...</span><span class="tsd-kind-parameter">args</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">[</span><span class="tsd-signature-symbol">...</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#addroutet">T</a><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#addrouteh">H</a><span class="tsd-signature-symbol">]</span><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><a href="#addroute-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Add a route with matchers and a handler function.</p>
10
- </div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="addroutet"><span class="tsd-kind-type-parameter">T</span> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">Matcher</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>Array of matcher types.</p>
11
- </div><div class="tsd-comment tsd-typography"></div></li><li><span id="addrouteh"><span class="tsd-kind-type-parameter">H</span> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">...</span><span class="tsd-kind-parameter">args</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">ParamsFromMatchers</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#addroutet">T</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=&gt;</span> <span class="tsd-signature-type">void</span></span><div class="tsd-comment tsd-typography"><p>Handler function type, inferred from the matchers.</p>
12
- </div><div class="tsd-comment tsd-typography"></div></li></ul></section><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-signature-symbol">...</span><span class="tsd-kind-parameter">args</span>: <span class="tsd-signature-symbol">[</span><span class="tsd-signature-symbol">...</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#addroutet">T</a><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#addrouteh">H</a><span class="tsd-signature-symbol">]</span></span><div class="tsd-comment tsd-typography"><p>An array of matchers followed by a handler function. Each matcher can be:</p>
13
- <ul>
14
- <li>A string: matches exactly that string.</li>
15
- <li>A function: takes a string segment and returns a value (of any type) if it matches, or <a href="../MATCH_FAILED/" class="tsd-kind-variable">MATCH_FAILED</a> if it doesn't match. The return value (if not <code>MATCH_FAILED</code> and not <code>NaN</code>) is passed as a parameter to the handler function. The standard JavaScript functions <code>Number</code> and <code>String</code> can be used to match numeric and string segments respectively.</li>
16
- <li>The special <a href="../MATCH_REST/" class="tsd-kind-variable">MATCH_REST</a> symbol: matches the rest of the segments as an array of strings. Only one <code>MATCH_REST</code> is allowed.</li>
17
- </ul>
18
- </div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/ae96ee5d2bf101de8d04c7efc61a03e8fe8fe6f7/src/dispatcher.ts#L73">dispatcher.ts:73</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="dispatch"><span>dispatch</span><a href="#dispatch" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="dispatch-1"><span class="tsd-kind-call-signature">dispatch</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">segments</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><a href="#dispatch-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Dispatches the given segments to the first route handler that matches.</p>
19
- </div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">segments</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>Array of string segments to match against the added routes. When using this class with the Aberdeen <code>route</code> module, one would typically pass <code>route.current.p</code>.</p>
20
- </div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4><p>True if a matching route was found and handled, false otherwise.</p>
21
- <div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/ae96ee5d2bf101de8d04c7efc61a03e8fe8fe6f7/src/dispatcher.ts#L94">dispatcher.ts:94</a></li></ul></aside></div></li></ul></section></section></details></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg><h3>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><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Constructors"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg>Constructors</summary><div><a href="#constructor"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Constructor"><use href="../../assets/icons.svg#icon-512"></use></svg><span>constructor</span></a></div></details><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Methods"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg>Methods</summary><div><a href="#addroute"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>add<wbr/>Route</span></a><a href="#dispatch"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>dispatch</span></a></div></details></div></details></div><div class="site-menu"><nav id="tsd-sidebar-links" class="tsd-navigation"><a href="https://aberdeenjs.org/" class="tsd-nav-link">What&#39;s this?</a><a href="https://aberdeenjs.org/Tutorial/" class="tsd-nav-link">Tutorial</a><a href="https://github.com/vanviegen/aberdeen" class="tsd-nav-link">GitHub</a></nav><nav class="tsd-navigation"><a href="../../modules.html">Aberdeen - v1.18.2</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>
package/dist-docs/dispatcher/MATCH_FAILED/index.html DELETED
@@ -1,2 +0,0 @@
1
- <!DOCTYPE html><html class="default" lang="en" data-base="../../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>MATCH_FAILED | Aberdeen - v1.18.2</title><link rel="icon" href="../../assets/favicon.png" type="image/png"/><meta name="description" content="Documentation for Aberdeen"/><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 defer src="../../assets/custom.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(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../../index.html" class="title">Aberdeen - v1.18.2</a><div id="tsd-toolbar-links"><a href="https://aberdeenjs.org/">What&#39;s this?</a><a href="https://aberdeenjs.org/Tutorial/">Tutorial</a><a href="https://github.com/vanviegen/aberdeen">GitHub</a></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../">dispatcher</a></li><li><a href="" aria-current="page">MATCH_FAILED</a></li></ul><h1>Variable MATCH_FAILED<code class="tsd-tag">Const</code></h1></div><div class="tsd-signature"><span class="tsd-kind-variable">MATCH_FAILED</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-keyword">unique</span> <span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol"> = ...</span></div><div class="tsd-comment tsd-typography"><p>Symbol to return when a custom <a href="../Dispatcher/#addroute" class="tsd-kind-method">Dispatcher.addRoute</a> matcher cannot match a segment.</p>
2
- </div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/ae96ee5d2bf101de8d04c7efc61a03e8fe8fe6f7/src/dispatcher.ts#L4">dispatcher.ts:4</a></li></ul></aside></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg><h3>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 id="tsd-sidebar-links" class="tsd-navigation"><a href="https://aberdeenjs.org/" class="tsd-nav-link">What&#39;s this?</a><a href="https://aberdeenjs.org/Tutorial/" class="tsd-nav-link">Tutorial</a><a href="https://github.com/vanviegen/aberdeen" class="tsd-nav-link">GitHub</a></nav><nav class="tsd-navigation"><a href="../../modules.html">Aberdeen - v1.18.2</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>
package/dist-docs/dispatcher/MATCH_REST/index.html DELETED
@@ -1,2 +0,0 @@
1
- <!DOCTYPE html><html class="default" lang="en" data-base="../../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>MATCH_REST | Aberdeen - v1.18.2</title><link rel="icon" href="../../assets/favicon.png" type="image/png"/><meta name="description" content="Documentation for Aberdeen"/><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 defer src="../../assets/custom.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(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../../index.html" class="title">Aberdeen - v1.18.2</a><div id="tsd-toolbar-links"><a href="https://aberdeenjs.org/">What&#39;s this?</a><a href="https://aberdeenjs.org/Tutorial/">Tutorial</a><a href="https://github.com/vanviegen/aberdeen">GitHub</a></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../">dispatcher</a></li><li><a href="" aria-current="page">MATCH_REST</a></li></ul><h1>Variable MATCH_REST<code class="tsd-tag">Const</code></h1></div><div class="tsd-signature"><span class="tsd-kind-variable">MATCH_REST</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-keyword">unique</span> <span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol"> = ...</span></div><div class="tsd-comment tsd-typography"><p>Special <a href="../Dispatcher/#addroute" class="tsd-kind-method">Dispatcher.addRoute</a> matcher that matches the rest of the segments as an array of strings.</p>
2
- </div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/ae96ee5d2bf101de8d04c7efc61a03e8fe8fe6f7/src/dispatcher.ts#L9">dispatcher.ts:9</a></li></ul></aside></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg><h3>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 id="tsd-sidebar-links" class="tsd-navigation"><a href="https://aberdeenjs.org/" class="tsd-nav-link">What&#39;s this?</a><a href="https://aberdeenjs.org/Tutorial/" class="tsd-nav-link">Tutorial</a><a href="https://github.com/vanviegen/aberdeen" class="tsd-nav-link">GitHub</a></nav><nav class="tsd-navigation"><a href="../../modules.html">Aberdeen - v1.18.2</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>
package/dist-docs/dispatcher/index.html DELETED
@@ -1,4 +0,0 @@
1
- <!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>dispatcher | Aberdeen - v1.18.2</title><link rel="icon" href="../assets/favicon.png" type="image/png"/><meta name="description" content="Documentation for Aberdeen"/><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 defer src="../assets/custom.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(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">Aberdeen - v1.18.2</a><div id="tsd-toolbar-links"><a href="https://aberdeenjs.org/">What&#39;s this?</a><a href="https://aberdeenjs.org/Tutorial/">Tutorial</a><a href="https://github.com/vanviegen/aberdeen">GitHub</a></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="" aria-current="page">dispatcher</a></li></ul><h1>Module dispatcher</h1></div><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Classes"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Classes</h2></summary><dl class="tsd-member-summaries"><dt class="tsd-member-summary" id="dispatcher"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Class"><use href="../assets/icons.svg#icon-128"></use></svg><a href="Dispatcher/">Dispatcher</a><a href="#dispatcher" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>Simple route matcher and dispatcher.</p>
2
- </div></dd></dl></details><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Variables"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Variables</h2></summary><dl class="tsd-member-summaries"><dt class="tsd-member-summary" id="match_failed"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Variable"><use href="../assets/icons.svg#icon-32"></use></svg><a href="MATCH_FAILED/">MATCH_FAILED</a><a href="#match_failed" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>Symbol to return when a custom <a href="Dispatcher/#addroute" class="tsd-kind-method">Dispatcher.addRoute</a> matcher cannot match a segment.</p>
3
- </div></dd><dt class="tsd-member-summary" id="match_rest"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Variable"><use href="../assets/icons.svg#icon-32"></use></svg><a href="MATCH_REST/">MATCH_REST</a><a href="#match_rest" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>Special <a href="Dispatcher/#addroute" class="tsd-kind-method">Dispatcher.addRoute</a> matcher that matches the rest of the segments as an array of strings.</p>
4
- </div></dd></dl></details></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>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><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Classes"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Classes</summary><div><a href="#dispatcher"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Class"><use href="../assets/icons.svg#icon-128"></use></svg><span>Dispatcher</span></a></div></details><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Variables"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Variables</summary><div><a href="#match_failed"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Variable"><use href="../assets/icons.svg#icon-32"></use></svg><span>MATCH_<wbr/>FAILED</span></a><a href="#match_rest"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Variable"><use href="../assets/icons.svg#icon-32"></use></svg><span>MATCH_<wbr/>REST</span></a></div></details></div></details></div><div class="site-menu"><nav id="tsd-sidebar-links" class="tsd-navigation"><a href="https://aberdeenjs.org/" class="tsd-nav-link">What&#39;s this?</a><a href="https://aberdeenjs.org/Tutorial/" class="tsd-nav-link">Tutorial</a><a href="https://github.com/vanviegen/aberdeen" class="tsd-nav-link">GitHub</a></nav><nav class="tsd-navigation"><a href="../modules.html">Aberdeen - v1.18.2</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>
package/dist-docs/hierarchy.html DELETED
@@ -1 +0,0 @@
1
- <!DOCTYPE html><html class="default" lang="en" data-base="./"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Aberdeen - v1.18.2</title><link rel="icon" href="assets/favicon.png" type="image/png"/><meta name="description" content="Documentation for Aberdeen"/><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 defer src="assets/custom.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(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="index.html" class="title">Aberdeen - v1.18.2</a><div id="tsd-toolbar-links"><a href="https://aberdeenjs.org/">What&#39;s this?</a><a href="https://aberdeenjs.org/Tutorial/">Tutorial</a><a href="https://github.com/vanviegen/aberdeen">GitHub</a></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><h1>Aberdeen - v1.18.2</h1></div><h2>Hierarchy Summary</h2></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-chevronDown"></use></svg><h3>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 id="tsd-sidebar-links" class="tsd-navigation"><a href="https://aberdeenjs.org/" class="tsd-nav-link">What&#39;s this?</a><a href="https://aberdeenjs.org/Tutorial/" class="tsd-nav-link">Tutorial</a><a href="https://github.com/vanviegen/aberdeen" class="tsd-nav-link">GitHub</a></nav><nav class="tsd-navigation"><a href="modules.html">Aberdeen - v1.18.2</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>
package/dist-docs/index.html DELETED
@@ -1,61 +0,0 @@
1
- <!DOCTYPE html><html class="default" lang="en" data-base="./"><head><meta charset="utf-8"/><link rel="canonical" href="https://aberdeenjs.org/"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Aberdeen - v1.18.2</title><link rel="icon" href="assets/favicon.png" type="image/png"/><script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","name":"Aberdeen","url":"https://aberdeenjs.org/"}</script><meta name="description" content="Documentation for Aberdeen"/><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 defer src="assets/custom.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(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="index.html" class="title">Aberdeen - v1.18.2</a><div id="tsd-toolbar-links"><a href="https://aberdeenjs.org/">What&#39;s this?</a><a href="https://aberdeenjs.org/Tutorial/">Tutorial</a><a href="https://github.com/vanviegen/aberdeen">GitHub</a></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"></div><div class="tsd-panel tsd-typography"><h1 id="aberdeen" class="tsd-anchor-link"><a href="https://aberdeenjs.org/">Aberdeen</a> <a href="https://github.com/vanviegen/aberdeen/blob/master/LICENSE.txt" target="_blank" class="external"><img src="https://img.shields.io/badge/license-ISC-blue.svg" alt=""></a> <a href="https://badge.fury.io/js/aberdeen" target="_blank" class="external"><img src="https://badge.fury.io/js/aberdeen.svg" alt=""></a> <img src="https://img.shields.io/bundlejs/size/aberdeen" alt=""> <a href="https://github.com/vanviegen/aberdeen" target="_blank" class="external"><img src="https://img.shields.io/github/last-commit/vanviegen/aberdeen" alt=""></a><a href="#aberdeen" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h1><p>Reactive UIs in plain TypeScript. Simple to learn, fast to ship.</p>
2
- <p>Aberdeen wraps your state in ES6 <code>Proxy</code> objects for fine-grained property access tracking, then automatically re-executes only the DOM-building closures that depend on changed data. So we get precise DOM updates with neither virtual DOM diffing nor compiler magic.</p>
3
- <h2 id="why-use-aberdeen" class="tsd-anchor-link">Why use Aberdeen?<a href="#why-use-aberdeen" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><ul>
4
- <li><strong>Simple:</strong> Express UIs naturally in JavaScript/TypeScript, without requiring build steps or JSX, and with a minimal amount of concepts you need to learn.</li>
5
- <li><strong>Type-safe:</strong> Your reactive state can be regular TypeScript objects and arrays, with full type safety and autocompletion.</li>
6
- <li><strong>Fast:</strong> No virtual DOM. Aberdeen intelligently updates only the minimal, necessary parts of your UI when proxied data changes.</li>
7
- <li><strong>Awesome lists</strong>: It's very easy and performant to reactively display data sorted by whatever you like.</li>
8
- <li><strong>Tiny:</strong> Around 7KB (minimized and gzipped) for the core system. Zero runtime dependencies.</li>
9
- <li><strong>Batteries included</strong>: Comes with...
10
- <ul>
11
- <li>Browser history management</li>
12
- <li>Routing</li>
13
- <li>Revertible patches for optimistic user-interface updates</li>
14
- <li>Component-local CSS with Tailwind-like shorthands</li>
15
- <li>SVG support</li>
16
- <li>Helper functions for transforming reactive data (mapping, partitioning, filtering, etc)</li>
17
- <li>Hide/unhide transition effects</li>
18
- </ul>
19
- </li>
20
- </ul>
21
- <h2 id="why-not-use-aberdeen" class="tsd-anchor-link">Why <em>not</em> use Aberdeen?<a href="#why-not-use-aberdeen" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><ul>
22
- <li><strong>Lack of community:</strong> There are not many of us -Aberdeen developers- yet, so don't expect terribly helpful Stack Overflow/AI answers.</li>
23
- <li><strong>Lack of ecosystem:</strong> You'd have to code things yourself, instead of duct-taping together a gazillion React ecosystem libraries.</li>
24
- </ul>
25
- <h2 id="examples" class="tsd-anchor-link">Examples<a href="#examples" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>First, let's start with the obligatory reactive counter example. If you're reading this on <a href="https://aberdeenjs.org">the official website</a> you should see a working demo below the code, and an 'edit' button in the top-right corner of the code, to play around.</p>
26
- <pre><code class="javascript"><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-2">A</span><span class="hl-1"> </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">&#39;aberdeen&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-4">// Define some state as a proxied (observable) object</span><br/><span class="hl-4">// The &#39;$&#39; prefix is just a convention to make reactive objects stand out</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$state</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">proxy</span><span class="hl-1">({</span><span class="hl-2">question:</span><span class="hl-1"> </span><span class="hl-3">&quot;How many roads must a man walk down?&quot;</span><span class="hl-1">, </span><span class="hl-2">answer:</span><span class="hl-1"> </span><span class="hl-8">42</span><span class="hl-1">});</span><br/><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;h3&#39;</span><span class="hl-1">, () </span><span class="hl-5">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-4">// This function reruns whenever the question or the answer changes</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;text=&#39;</span><span class="hl-1">, </span><span class="hl-3">`</span><span class="hl-5">${</span><span class="hl-2">$state</span><span class="hl-9">.</span><span class="hl-2">question</span><span class="hl-5">}</span><span class="hl-3"> ↪ </span><span class="hl-5">${</span><span class="hl-2">$state</span><span class="hl-9">.</span><span class="hl-2">answer</span><span class="hl-9"> </span><span class="hl-1">||</span><span class="hl-9"> </span><span class="hl-3">&#39;Blowing in the wind&#39;</span><span class="hl-5">}</span><span class="hl-3">`</span><span class="hl-1">)</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-4">// Two-way bind $state.question to an &lt;input&gt;</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;input placeholder=Question bind=&#39;</span><span class="hl-1">, </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">ref</span><span class="hl-1">(</span><span class="hl-2">$state</span><span class="hl-1">, </span><span class="hl-3">&#39;question&#39;</span><span class="hl-1">))</span><br/><br/><span class="hl-4">// Allow $state.answer to be modified using both an &lt;input&gt; and buttons</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;div.row margin-top:1em&#39;</span><span class="hl-1">, () </span><span class="hl-5">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;button text=- click=&#39;</span><span class="hl-1">, () </span><span class="hl-5">=&gt;</span><span class="hl-1"> </span><span class="hl-2">$state</span><span class="hl-1">.</span><span class="hl-2">answer</span><span class="hl-1">--);</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;input type=number bind=&#39;</span><span class="hl-1">, </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">ref</span><span class="hl-1">(</span><span class="hl-2">$state</span><span class="hl-1">, </span><span class="hl-3">&#39;answer&#39;</span><span class="hl-1">))</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;button text=+ click=&#39;</span><span class="hl-1">, () </span><span class="hl-5">=&gt;</span><span class="hl-1"> </span><span class="hl-2">$state</span><span class="hl-1">.</span><span class="hl-2">answer</span><span class="hl-1">++);</span><br/><span class="hl-1">});</span>
27
- </code><button type="button">Copy</button></pre>
28
-
29
- <p>Okay, next up is a somewhat more complex app - a todo-list with the following behavior:</p>
30
- <ul>
31
- <li>New items open in an 'editing state'.</li>
32
- <li>Items that are in 'editing state' show a text input, a save button and a cancel button. Done status cannot be toggled while editing.</li>
33
- <li>Pressing one of the buttons, or pressing enter will transition from 'editing state' to 'viewing state', saving the new label text unless cancel was pressed.</li>
34
- <li>In 'viewing state', the label is shown as non-editable. There's an 'Edit' link, that will transition the item to 'editing state'. Clicking anywhere else will toggle the done status.</li>
35
- <li>The list of items is sorted alphabetically by label. Items move when 'save' changes their label.</li>
36
- <li>Items that are created, moved or deleted grow and shrink as appropriate.</li>
37
- </ul>
38
- <p>Pfew.. now let's look at the code:</p>
39
- <pre><code class="typescript"><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-2">A</span><span class="hl-1"> </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">&quot;aberdeen&quot;</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> {</span><span class="hl-2">grow</span><span class="hl-1">, </span><span class="hl-2">shrink</span><span class="hl-1">} </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">&quot;aberdeen/transitions&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-4">// We&#39;ll use a simple class to store our data.</span><br/><span class="hl-5">class</span><span class="hl-1"> </span><span class="hl-10">TodoItem</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-5">constructor</span><span class="hl-1">(</span><span class="hl-5">public</span><span class="hl-1"> </span><span class="hl-2">label</span><span class="hl-1">: </span><span class="hl-10">string</span><span class="hl-1"> = </span><span class="hl-3">&#39;&#39;</span><span class="hl-1">, </span><span class="hl-5">public</span><span class="hl-1"> </span><span class="hl-2">done</span><span class="hl-1">: </span><span class="hl-10">boolean</span><span class="hl-1"> = </span><span class="hl-5">false</span><span class="hl-1">) {}</span><br/><span class="hl-1"> </span><span class="hl-7">toggle</span><span class="hl-1">() { </span><span class="hl-5">this</span><span class="hl-1">.</span><span class="hl-2">done</span><span class="hl-1"> = !</span><span class="hl-5">this</span><span class="hl-1">.</span><span class="hl-2">done</span><span class="hl-1">; }</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-4">// The top-level user interface.</span><br/><span class="hl-5">function</span><span class="hl-1"> </span><span class="hl-7">drawMain</span><span class="hl-1">() {</span><br/><span class="hl-1"> </span><span class="hl-4">// Add some initial items. We&#39;ll wrap a A.proxy() around it!</span><br/><span class="hl-1"> </span><span class="hl-5">let</span><span class="hl-1"> </span><span class="hl-2">$items</span><span class="hl-1">: </span><span class="hl-10">TodoItem</span><span class="hl-1">[] = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">proxy</span><span class="hl-1">([</span><br/><span class="hl-1"> </span><span class="hl-5">new</span><span class="hl-1"> </span><span class="hl-7">TodoItem</span><span class="hl-1">(</span><span class="hl-3">&#39;Make todo-list demo&#39;</span><span class="hl-1">, </span><span class="hl-5">true</span><span class="hl-1">),</span><br/><span class="hl-1"> </span><span class="hl-5">new</span><span class="hl-1"> </span><span class="hl-7">TodoItem</span><span class="hl-1">(</span><span class="hl-3">&#39;Learn Aberdeen&#39;</span><span class="hl-1">, </span><span class="hl-5">false</span><span class="hl-1">),</span><br/><span class="hl-1"> ]);</span><br/><span class="hl-1"> </span><br/><span class="hl-1"> </span><span class="hl-4">// Draw the list, ordered by label.</span><br/><span class="hl-1"> </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">onEach</span><span class="hl-1">(</span><span class="hl-2">$items</span><span class="hl-1">, </span><span class="hl-2">drawItem</span><span class="hl-1">, </span><span class="hl-2">$item</span><span class="hl-1"> </span><span class="hl-5">=&gt;</span><span class="hl-1"> </span><span class="hl-2">$item</span><span class="hl-1">.</span><span class="hl-2">label</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-4">// Add item and delete checked buttons.</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;div.row&#39;</span><span class="hl-1">, () </span><span class="hl-5">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;button text=+ click=&#39;</span><span class="hl-1">, () </span><span class="hl-5">=&gt;</span><span class="hl-1"> </span><span class="hl-2">$items</span><span class="hl-1">.</span><span class="hl-7">push</span><span class="hl-1">(</span><span class="hl-5">new</span><span class="hl-1"> </span><span class="hl-7">TodoItem</span><span class="hl-1">(</span><span class="hl-3">&quot;&quot;</span><span class="hl-1">)));</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;button.outline text=&quot;Delete checked&quot; click=&#39;</span><span class="hl-1">, () </span><span class="hl-5">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-0">for</span><span class="hl-1">(</span><span class="hl-5">let</span><span class="hl-1"> </span><span class="hl-2">idx</span><span class="hl-1"> </span><span class="hl-5">in</span><span class="hl-1"> </span><span class="hl-2">$items</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-0">if</span><span class="hl-1"> (</span><span class="hl-2">$items</span><span class="hl-1">[</span><span class="hl-2">idx</span><span class="hl-1">].</span><span class="hl-2">done</span><span class="hl-1">) </span><span class="hl-5">delete</span><span class="hl-1"> </span><span class="hl-2">$items</span><span class="hl-1">[</span><span class="hl-2">idx</span><span class="hl-1">];</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> });</span><br/><span class="hl-1"> });</span><br/><span class="hl-1">};</span><br/><br/><span class="hl-4">// Called for each todo list item.</span><br/><span class="hl-5">function</span><span class="hl-1"> </span><span class="hl-7">drawItem</span><span class="hl-1">(</span><span class="hl-2">$item</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-4">// Items without a label open in editing state.</span><br/><span class="hl-1"> </span><span class="hl-4">// Note that we&#39;re creating this A.proxy outside the `div.row` scope</span><br/><span class="hl-1"> </span><span class="hl-4">// create below, so that it will persist when that state reruns.</span><br/><span class="hl-1"> </span><span class="hl-5">let</span><span class="hl-1"> </span><span class="hl-2">$editing</span><span class="hl-1">: {</span><span class="hl-2">value</span><span class="hl-1">: </span><span class="hl-10">boolean</span><span class="hl-1">} = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">proxy</span><span class="hl-1">(</span><span class="hl-2">$item</span><span class="hl-1">.</span><span class="hl-2">label</span><span class="hl-1"> == </span><span class="hl-3">&#39;&#39;</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;div.row&#39;</span><span class="hl-1">, </span><span class="hl-2">todoItemStyle</span><span class="hl-1">, </span><span class="hl-3">&#39;create=&#39;</span><span class="hl-1">, </span><span class="hl-2">grow</span><span class="hl-1">, </span><span class="hl-3">&#39;destroy=&#39;</span><span class="hl-1">, </span><span class="hl-2">shrink</span><span class="hl-1">, () </span><span class="hl-5">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-4">// Conditionally add a class to `div.row`, based on item.done</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">({</span><span class="hl-3">&quot;.done&quot;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">ref</span><span class="hl-1">(</span><span class="hl-2">$item</span><span class="hl-1">,</span><span class="hl-3">&#39;done&#39;</span><span class="hl-1">)});</span><br/><br/><span class="hl-1"> </span><span class="hl-4">// The checkmark is hidden using CSS</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;div.checkmark text=✅&#39;</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-0">if</span><span class="hl-1"> (</span><span class="hl-2">$editing</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-4">// Proxied string to hold label while being edited.</span><br/><span class="hl-1"> </span><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$labelCopy</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">proxy</span><span class="hl-1">(</span><span class="hl-2">$item</span><span class="hl-1">.</span><span class="hl-2">label</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-5">function</span><span class="hl-1"> </span><span class="hl-7">save</span><span class="hl-1">() {</span><br/><span class="hl-1"> </span><span class="hl-2">$editing</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1"> = </span><span class="hl-5">false</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-2">$item</span><span class="hl-1">.</span><span class="hl-2">label</span><span class="hl-1"> = </span><span class="hl-2">$labelCopy</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1">;</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> </span><span class="hl-4">// Label &lt;input&gt;. Save using enter or button.</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;input placeholder=Label bind=&#39;</span><span class="hl-1">, </span><span class="hl-2">$labelCopy</span><span class="hl-1">, </span><span class="hl-3">&#39;keydown=&#39;</span><span class="hl-1">, </span><span class="hl-2">e</span><span class="hl-1"> </span><span class="hl-5">=&gt;</span><span class="hl-1"> </span><span class="hl-2">e</span><span class="hl-1">.</span><span class="hl-2">key</span><span class="hl-1">===</span><span class="hl-3">&#39;Enter&#39;</span><span class="hl-1"> &amp;&amp; </span><span class="hl-7">save</span><span class="hl-1">());</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;button.outline text=Cancel click=&#39;</span><span class="hl-1">, () </span><span class="hl-5">=&gt;</span><span class="hl-1"> </span><span class="hl-2">$editing</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1"> = </span><span class="hl-5">false</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;button text=Save click=&#39;</span><span class="hl-1">, </span><span class="hl-2">save</span><span class="hl-1">);</span><br/><span class="hl-1"> } </span><span class="hl-0">else</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-4">// Label as text. </span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;p text=&#39;</span><span class="hl-1">, </span><span class="hl-2">$item</span><span class="hl-1">.</span><span class="hl-2">label</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-4">// Edit icon, if not done.</span><br/><span class="hl-1"> </span><span class="hl-0">if</span><span class="hl-1"> (!</span><span class="hl-2">$item</span><span class="hl-1">.</span><span class="hl-2">done</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;a text=Edit click=&#39;</span><span class="hl-1">, </span><span class="hl-2">e</span><span class="hl-1"> </span><span class="hl-5">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">$editing</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1"> = </span><span class="hl-5">true</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-2">e</span><span class="hl-1">.</span><span class="hl-7">stopPropagation</span><span class="hl-1">(); </span><span class="hl-4">// We don&#39;t want to toggle as well.</span><br/><span class="hl-1"> });</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> </span><br/><span class="hl-1"> </span><span class="hl-4">// Clicking a row toggles done.</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;cursor:pointer click=&#39;</span><span class="hl-1">, () </span><span class="hl-5">=&gt;</span><span class="hl-1"> </span><span class="hl-2">$item</span><span class="hl-1">.</span><span class="hl-2">done</span><span class="hl-1"> = !</span><span class="hl-2">$item</span><span class="hl-1">.</span><span class="hl-2">done</span><span class="hl-1">);</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> });</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-4">// Insert some component-local CSS, specific for this demo.</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">todoItemStyle</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">insertCss</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-3">&quot;&amp;&quot;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">&quot;mb:0.5rem&quot;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">&quot;.checkmark&quot;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">&quot;opacity:0.2&quot;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">&quot;&amp;.done&quot;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">&quot;text-decoration:line-through&quot;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">&quot;&amp;.done .checkmark&quot;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">&quot;opacity:1&quot;</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-4">// Go!</span><br/><span class="hl-7">drawMain</span><span class="hl-1">();</span>
40
- </code><button type="button">Copy</button></pre>
41
-
42
- <p>Some further examples:</p>
43
- <ul>
44
- <li><a href="https://aberdeenjs.org/examples/input/">Input demo</a> - <a href="https://github.com/vanviegen/aberdeen/tree/master/examples/input" target="_blank" class="external">Source</a></li>
45
- <li><a href="https://aberdeenjs.org/examples/tictactoe/">Tic Tac Toe demo</a> - <a href="https://github.com/vanviegen/aberdeen/tree/master/examples/tictactoe" target="_blank" class="external">Source</a></li>
46
- <li><a href="https://aberdeenjs.org/examples/list/">List demo</a> - <a href="https://github.com/vanviegen/aberdeen/tree/master/examples/list" target="_blank" class="external">Source</a></li>
47
- <li><a href="https://aberdeenjs.org/examples/route/">Routing demo</a> - <a href="https://github.com/vanviegen/aberdeen/tree/master/examples/route" target="_blank" class="external">Source</a></li>
48
- <li><a href="https://aberdeenjs.org/examples/js-framework-benchmark/">JS Framework Benchmark demo</a> - <a href="https://github.com/vanviegen/aberdeen/tree/master/examples/js-framework-benchmark" target="_blank" class="external">Source</a></li>
49
- </ul>
50
- <h2 id="learning-aberdeen" class="tsd-anchor-link">Learning Aberdeen<a href="#learning-aberdeen" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><ul>
51
- <li><a href="https://aberdeenjs.org/Tutorial/">Tutorial</a></li>
52
- <li><a href="https://aberdeenjs.org/modules.html">Reference documentation</a></li>
53
- </ul>
54
- <p>And you may want to study the examples above, of course!</p>
55
- <h2 id="ai-integration" class="tsd-anchor-link">AI Integration<a href="#ai-integration" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>If you use Claude Code, GitHub Copilot or another AI agents that supports Skills, Aberdeen includes a <code>skill/</code> directory that provides specialized knowledge to the AI about how to use the library effectively.</p>
56
- <p>To use this, it is recommended to symlink the skill into your project's <code>.claude/skills</code> directory:</p>
57
- <pre><code class="bash"><span class="hl-7">mkdir</span><span class="hl-1"> </span><span class="hl-5">-p</span><span class="hl-1"> </span><span class="hl-3">.claude/skills</span><br/><span class="hl-7">ln</span><span class="hl-1"> </span><span class="hl-5">-s</span><span class="hl-1"> </span><span class="hl-3">../../node_modules/aberdeen/skill</span><span class="hl-1"> </span><span class="hl-3">.claude/skills/aberdeen</span>
58
- </code><button type="button">Copy</button></pre>
59
-
60
- <h2 id="changelog" class="tsd-anchor-link">Changelog<a href="#changelog" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>See <a href="media/CHANGELOG.md">CHANGELOG.md</a> for a full history of changes.</p>
61
- </div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-chevronDown"></use></svg><h3>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><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#aberdeen"><span>Aberdeen </span></a><ul><li><a href="#why-use-aberdeen"><span>Why use <wbr/>Aberdeen?</span></a></li><li><a href="#why-not-use-aberdeen"><span>Why not use <wbr/>Aberdeen?</span></a></li><li><a href="#examples"><span>Examples</span></a></li><li><a href="#learning-aberdeen"><span>Learning <wbr/>Aberdeen</span></a></li><li><a href="#ai-integration"><span>AI <wbr/>Integration</span></a></li><li><a href="#changelog"><span>Changelog</span></a></li></ul></div></details></div><div class="site-menu"><nav id="tsd-sidebar-links" class="tsd-navigation"><a href="https://aberdeenjs.org/" class="tsd-nav-link">What&#39;s this?</a><a href="https://aberdeenjs.org/Tutorial/" class="tsd-nav-link">Tutorial</a><a href="https://github.com/vanviegen/aberdeen" class="tsd-nav-link">GitHub</a></nav><nav class="tsd-navigation"><a href="modules.html">Aberdeen - v1.18.2</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>