aberdeen 1.17.1 → 2.0.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 (139) hide show
  1. package/dist/src/aberdeen.d.ts +928 -944
  2. package/dist/src/aberdeen.js +1693 -1705
  3. package/dist/src/aberdeen.js.map +3 -3
  4. package/dist/src/index.d.ts +12 -0
  5. package/dist/src/index.js +11 -0
  6. package/dist/src/index.js.map +10 -0
  7. package/dist/src/prediction.d.ts +7 -4
  8. package/dist/src/prediction.js +18 -23
  9. package/dist/src/prediction.js.map +3 -3
  10. package/dist/src/route.d.ts +112 -99
  11. package/dist/src/route.js +254 -254
  12. package/dist/src/route.js.map +3 -3
  13. package/dist/src/server-dom.d.ts +158 -0
  14. package/dist/src/server-dom.js +458 -0
  15. package/dist/src/server-dom.js.map +10 -0
  16. package/dist/src/server.d.ts +55 -0
  17. package/dist/src/server.js +25 -0
  18. package/dist/src/server.js.map +10 -0
  19. package/dist/src/transitions.js +7 -4
  20. package/dist/src/transitions.js.map +3 -3
  21. package/dist/tests/environment.d.ts +24 -0
  22. package/dist/tests/{fakedom.js → environment.js} +239 -288
  23. package/dist/tests/environment.js.map +11 -0
  24. package/dist/tests/helpers.d.ts +15 -3
  25. package/dist/tests/helpers.js +277 -306
  26. package/dist/tests/helpers.js.map +6 -5
  27. package/dist-docs/Tutorial/index.html +30 -30
  28. package/dist-docs/aberdeen/Aberdeen/index.html +350 -0
  29. package/dist-docs/aberdeen/InitOptions/index.html +4 -0
  30. package/dist-docs/aberdeen/KeyToString/index.html +2 -0
  31. package/dist-docs/aberdeen/PromiseProxy/index.html +6 -6
  32. package/dist-docs/aberdeen/SortKeyType/index.html +2 -0
  33. package/dist-docs/aberdeen/TargetType/index.html +2 -0
  34. package/dist-docs/aberdeen/ValueRef/index.html +2 -0
  35. package/dist-docs/aberdeen/WindowLike/index.html +5 -0
  36. package/dist-docs/aberdeen/{clone → createA}/index.html +10 -5
  37. package/dist-docs/aberdeen/index.html +13 -54
  38. package/dist-docs/assets/aberdeen/aberdeen.d.ts +928 -944
  39. package/dist-docs/assets/aberdeen/aberdeen.js +1693 -1705
  40. package/dist-docs/assets/aberdeen/aberdeen.js.map +3 -3
  41. package/dist-docs/assets/aberdeen/index.d.ts +12 -0
  42. package/dist-docs/assets/aberdeen/index.js +11 -0
  43. package/dist-docs/assets/aberdeen/index.js.map +10 -0
  44. package/dist-docs/assets/aberdeen/prediction.d.ts +7 -4
  45. package/dist-docs/assets/aberdeen/prediction.js +18 -23
  46. package/dist-docs/assets/aberdeen/prediction.js.map +3 -3
  47. package/dist-docs/assets/aberdeen/route.d.ts +112 -99
  48. package/dist-docs/assets/aberdeen/route.js +254 -254
  49. package/dist-docs/assets/aberdeen/route.js.map +3 -3
  50. package/dist-docs/assets/aberdeen/server-dom.d.ts +158 -0
  51. package/dist-docs/assets/aberdeen/server-dom.js +458 -0
  52. package/dist-docs/assets/aberdeen/server-dom.js.map +10 -0
  53. package/dist-docs/assets/aberdeen/server.d.ts +55 -0
  54. package/dist-docs/assets/aberdeen/server.js +25 -0
  55. package/dist-docs/assets/aberdeen/server.js.map +10 -0
  56. package/dist-docs/assets/aberdeen/transitions.js +7 -4
  57. package/dist-docs/assets/aberdeen/transitions.js.map +3 -3
  58. package/dist-docs/assets/navigation.js +1 -1
  59. package/dist-docs/assets/search.js +1 -1
  60. package/dist-docs/dispatcher/Dispatcher/index.html +5 -6
  61. package/dist-docs/dispatcher/MATCH_FAILED/index.html +2 -2
  62. package/dist-docs/dispatcher/MATCH_REST/index.html +2 -2
  63. package/dist-docs/dispatcher/index.html +2 -2
  64. package/dist-docs/hierarchy.html +1 -1
  65. package/dist-docs/index-1/index.html +2 -0
  66. package/dist-docs/index.html +2 -2
  67. package/dist-docs/media/CHANGELOG.md +10 -1
  68. package/dist-docs/modules.html +1 -1
  69. package/dist-docs/prediction/applyCanon/index.html +4 -3
  70. package/dist-docs/prediction/applyPrediction/index.html +4 -3
  71. package/dist-docs/prediction/index.html +2 -2
  72. package/dist-docs/route/Route/index.html +9 -9
  73. package/dist-docs/route/RouteApi/index.html +60 -0
  74. package/dist-docs/route/index.html +6 -15
  75. package/dist-docs/route/init/index.html +5 -0
  76. package/dist-docs/server/RenderToStringOptions/index.html +6 -0
  77. package/dist-docs/server/RenderToStringResult/index.html +6 -0
  78. package/dist-docs/server/index.html +4 -0
  79. package/dist-docs/server/renderToString/index.html +6 -0
  80. package/dist-docs/sitemap.xml +51 -155
  81. package/dist-docs/transitions/grow/index.html +2 -2
  82. package/dist-docs/transitions/index.html +2 -2
  83. package/dist-docs/transitions/shrink/index.html +2 -2
  84. package/package.json +17 -7
  85. package/skill/SKILL.md +28 -28
  86. package/skill/aberdeen.md +471 -3448
  87. package/skill/dispatcher.md +6 -16
  88. package/skill/prediction.md +17 -5
  89. package/skill/route.md +95 -77
  90. package/skill/transitions.md +3 -3
  91. package/src/aberdeen.ts +1224 -741
  92. package/src/index.ts +13 -0
  93. package/src/prediction.ts +25 -24
  94. package/src/route.ts +192 -142
  95. package/src/server-dom.ts +508 -0
  96. package/src/server.ts +74 -0
  97. package/src/transitions.ts +9 -3
  98. package/dist/tests/fakedom.d.ts +0 -9
  99. package/dist/tests/fakedom.js.map +0 -10
  100. package/dist-docs/aberdeen/A/index.html +0 -115
  101. package/dist-docs/aberdeen/CUSTOM_DUMP/index.html +0 -7
  102. package/dist-docs/aberdeen/NO_COPY/index.html +0 -2
  103. package/dist-docs/aberdeen/OPAQUE/index.html +0 -12
  104. package/dist-docs/aberdeen/clean/index.html +0 -11
  105. package/dist-docs/aberdeen/copy/index.html +0 -22
  106. package/dist-docs/aberdeen/count/index.html +0 -7
  107. package/dist-docs/aberdeen/cssVars/index.html +0 -11
  108. package/dist-docs/aberdeen/darkMode/index.html +0 -9
  109. package/dist-docs/aberdeen/default/index.html +0 -341
  110. package/dist-docs/aberdeen/derive/index.html +0 -18
  111. package/dist-docs/aberdeen/disableCreateDestroy/index.html +0 -6
  112. package/dist-docs/aberdeen/dump/index.html +0 -11
  113. package/dist-docs/aberdeen/insertCss/index.html +0 -30
  114. package/dist-docs/aberdeen/insertGlobalCss/index.html +0 -19
  115. package/dist-docs/aberdeen/invertString/index.html +0 -13
  116. package/dist-docs/aberdeen/isEmpty/index.html +0 -12
  117. package/dist-docs/aberdeen/map/index.html +0 -26
  118. package/dist-docs/aberdeen/merge/index.html +0 -11
  119. package/dist-docs/aberdeen/mount/index.html +0 -17
  120. package/dist-docs/aberdeen/multiMap/index.html +0 -28
  121. package/dist-docs/aberdeen/onEach/index.html +0 -19
  122. package/dist-docs/aberdeen/partition/index.html +0 -36
  123. package/dist-docs/aberdeen/peek/index.html +0 -40
  124. package/dist-docs/aberdeen/proxy/index.html +0 -35
  125. package/dist-docs/aberdeen/ref/index.html +0 -13
  126. package/dist-docs/aberdeen/runQueue/index.html +0 -13
  127. package/dist-docs/aberdeen/setErrorHandler/index.html +0 -16
  128. package/dist-docs/aberdeen/setSpacingCssVars/index.html +0 -8
  129. package/dist-docs/aberdeen/unmountAll/index.html +0 -5
  130. package/dist-docs/aberdeen/unproxy/index.html +0 -11
  131. package/dist-docs/route/back/index.html +0 -4
  132. package/dist-docs/route/current/index.html +0 -2
  133. package/dist-docs/route/go/index.html +0 -14
  134. package/dist-docs/route/interceptLinks/index.html +0 -8
  135. package/dist-docs/route/matchCurrent/index.html +0 -10
  136. package/dist-docs/route/persistScroll/index.html +0 -6
  137. package/dist-docs/route/push/index.html +0 -6
  138. package/dist-docs/route/setLog/index.html +0 -3
  139. package/dist-docs/route/up/index.html +0 -5
package/dist-docs/aberdeen/Aberdeen/index.html ADDED
@@ -0,0 +1,350 @@
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 | Aberdeen - v2.0.0</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 - v2.0.0</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="../">aberdeen</a></li><li><a href="" aria-current="page">Aberdeen</a></li></ul><h1>Interface Aberdeen</h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>The Aberdeen instance returned by <a href="../createA/" class="tsd-kind-function">createA</a>: a callable element-builder with every
2
+ Aberdeen function attached as a method. <code>import A from 'aberdeen'</code> gives you one of these.</p>
3
+ </div><div class="tsd-comment tsd-typography"></div></section><div class="tsd-signature"><span class="tsd-signature-keyword">interface</span> <span class="tsd-kind-interface">Aberdeen</span> <span class="tsd-signature-symbol">{</span><br/>    <a class="tsd-kind-property" href="#cssvars">cssVars</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Record</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-property" href="#custom_dump">CUSTOM_DUMP</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-property" href="#no_copy">NO_COPY</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-property" href="#opaque">OPAQUE</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-call-signature" href="#clean-1">clean</a><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">cleaner</span><span class="tsd-signature-symbol">:</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><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-call-signature" href="#clone-1">clone</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#clonet">T</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">src</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#clonet">T</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#clonet">T</a><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-call-signature" href="#copy-1">copy</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#copyt">T</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">dst</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#copyt">T</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">src</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#copyt">T</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-call-signature" href="#count-1">count</a><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">proxied</span><span class="tsd-signature-symbol">:</span> <a href="../TargetType/" class="tsd-signature-type tsd-kind-type-alias">TargetType</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a href="../ValueRef/" class="tsd-signature-type tsd-kind-interface">ValueRef</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-call-signature" href="#darkmode-1">darkMode</a><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-call-signature" href="#derive-1">derive</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#derivet">T</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">func</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">()</span> <span class="tsd-signature-symbol">=&gt;</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#derivet">T</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a href="../ValueRef/" class="tsd-signature-type tsd-kind-interface">ValueRef</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#derivet">T</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-call-signature" href="#dump-1">dump</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#dumpt">T</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">data</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#dumpt">T</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#dumpt">T</a><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-call-signature" href="#insertcss-1">insertCss</a><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">style</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-call-signature" href="#insertglobalcss-1">insertGlobalCss</a><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">style</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-call-signature" href="#invertstring-1">invertString</a><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">input</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-type">string</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-call-signature" href="#isempty-1">isEmpty</a><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">proxied</span><span class="tsd-signature-symbol">:</span> <a href="../TargetType/" class="tsd-signature-type tsd-kind-type-alias">TargetType</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-call-signature" href="#map-1">map</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#mapk">K</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapin">IN</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapout">OUT</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><br/>        <span class="tsd-kind-parameter">source</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#mapk">K</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapin">IN</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">,</span><br/>        <span class="tsd-kind-parameter">func</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapin">IN</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">key</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapk">K</a><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=&gt;</span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapout">OUT</a><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#mapk">K</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapout">OUT</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-call-signature" href="#merge-1">merge</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#merget">T</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">dst</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#merget">T</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#merget">T</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-call-signature" href="#mount-1">mount</a><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">parentElement</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Element</span><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">func</span><span class="tsd-signature-symbol">:</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><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-call-signature" href="#multimap-1">multiMap</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapin">IN</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapout">OUT</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-symbol">{</span> <span class="tsd-signature-symbol">[</span><span class="tsd-kind-index-signature">key</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol">]:</span> <span class="tsd-signature-type">any</span> <span class="tsd-signature-symbol">}</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><br/>        <span class="tsd-kind-parameter">source</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapin">IN</a><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">,</span><br/>        <span class="tsd-kind-parameter">func</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapin">IN</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">index</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=&gt;</span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapout">OUT</a><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapout">OUT</a><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-call-signature" href="#oneach-1">onEach</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#oneachk">K</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneacht">T</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><br/>        <span class="tsd-kind-parameter">target</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#oneachk">K</a><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneacht">T</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">,</span><br/>        <span class="tsd-kind-parameter">render</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneacht">T</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">key</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneachk">K</a><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-kind-parameter">makeKey</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneacht">T</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">key</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneachk">K</a><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=&gt;</span> <a href="../SortKeyType/" class="tsd-signature-type tsd-kind-type-alias">SortKeyType</a><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><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-call-signature" href="#partition-1">partition</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionout_k">OUT_K</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">number</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionin_v">IN_V</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><br/>        <span class="tsd-kind-parameter">source</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionin_v">IN_V</a><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">,</span><br/>        <span class="tsd-kind-parameter">func</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionin_v">IN_V</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">key</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=&gt;</span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionout_k">OUT_K</a> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionout_k">OUT_K</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">Record</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionout_k">OUT_K</a><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">Record</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionin_v">IN_V</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-call-signature" href="#peek-1">peek</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#peekt">T</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#peekk">K</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">number</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><br/>        <span class="tsd-kind-parameter">target</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#peekt">T</a><span class="tsd-signature-symbol">,</span><br/>        <span class="tsd-kind-parameter">key</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#peekk">K</a><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#peekt">T</a><span class="tsd-signature-symbol">[</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#peekk">K</a><span class="tsd-signature-symbol">]</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-call-signature" href="#proxy-1">proxy</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#proxyt">T</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">unknown</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">target</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#proxyt">T</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a href="../PromiseProxy/" class="tsd-signature-type tsd-kind-interface">PromiseProxy</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#proxyt">T</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-call-signature" href="#ref-1">ref</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#reft">T</a> <span class="tsd-signature-keyword">extends</span> <a href="../TargetType/" class="tsd-signature-type tsd-kind-type-alias">TargetType</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#refk">K</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">number</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><br/>        <span class="tsd-kind-parameter">target</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#reft">T</a><span class="tsd-signature-symbol">,</span><br/>        <span class="tsd-kind-parameter">index</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#refk">K</a><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a href="../ValueRef/" class="tsd-signature-type tsd-kind-interface">ValueRef</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#reft">T</a><span class="tsd-signature-symbol">[</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#refk">K</a><span class="tsd-signature-symbol">]</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-call-signature" href="#runqueue-1">runQueue</a><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-call-signature" href="#seterrorhandler-1">setErrorHandler</a><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">handler</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">error</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Error</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=&gt;</span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-call-signature" href="#setspacingcssvars-1">setSpacingCssVars</a><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">base</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">unit</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-type">void</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-call-signature" href="#unmountall-1">unmountAll</a><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-call-signature" href="#unproxy-1">unproxy</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#unproxyt">T</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">target</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#unproxyt">T</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#unproxyt">T</a><span class="tsd-signature-symbol">;</span><br/>    <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">any</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">Element</span><span class="tsd-signature-symbol">;</span><br/><span class="tsd-signature-symbol">}</span></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="aberdeen"><span class="tsd-kind-call-signature">Aberdeen</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">any</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">Element</span><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></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Build reactive DOM: create elements, set attributes/properties/event listeners, add content. See the tutorial for the full mini-language.</p>
4
+ </div><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-type">any</span><span class="tsd-signature-symbol">[]</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">Element</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/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L53">aberdeen.ts:53</a></li></ul></aside></div></li></ul></section><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">Properties</h3><div class="tsd-index-list"><a href="#cssvars" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../../assets/icons.svg#icon-1024"></use></svg><span>css<wbr/>Vars</span></a>
5
+ <a href="#custom_dump" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../../assets/icons.svg#icon-1024"></use></svg><span>CUSTOM_<wbr/>DUMP</span></a>
6
+ <a href="#no_copy" class="tsd-index-link deprecated"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../../assets/icons.svg#icon-1024"></use></svg><span>NO_<wbr/>COPY</span></a>
7
+ <a href="#opaque" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../../assets/icons.svg#icon-1024"></use></svg><span>OPAQUE</span></a>
8
+ </div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Methods</h3><div class="tsd-index-list"><a href="#clean" 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>clean</span></a>
9
+ <a href="#clone" 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>clone</span></a>
10
+ <a href="#copy" 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>copy</span></a>
11
+ <a href="#count" 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>count</span></a>
12
+ <a href="#darkmode" 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>dark<wbr/>Mode</span></a>
13
+ <a href="#derive" 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>derive</span></a>
14
+ <a href="#dump" 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>dump</span></a>
15
+ <a href="#insertcss" 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>insert<wbr/>Css</span></a>
16
+ <a href="#insertglobalcss" 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>insert<wbr/>Global<wbr/>Css</span></a>
17
+ <a href="#invertstring" 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>invert<wbr/>String</span></a>
18
+ <a href="#isempty" 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>is<wbr/>Empty</span></a>
19
+ <a href="#map" 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>map</span></a>
20
+ <a href="#merge" 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>merge</span></a>
21
+ <a href="#mount" 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>mount</span></a>
22
+ <a href="#multimap" 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>multi<wbr/>Map</span></a>
23
+ <a href="#oneach" 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>on<wbr/>Each</span></a>
24
+ <a href="#partition" 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>partition</span></a>
25
+ <a href="#peek" 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>peek</span></a>
26
+ <a href="#proxy" 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>proxy</span></a>
27
+ <a href="#ref" 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>ref</span></a>
28
+ <a href="#runqueue" 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>run<wbr/>Queue</span></a>
29
+ <a href="#seterrorhandler" 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>set<wbr/>Error<wbr/>Handler</span></a>
30
+ <a href="#setspacingcssvars" 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>set<wbr/>Spacing<wbr/>Css<wbr/>Vars</span></a>
31
+ <a href="#unmountall" 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>unmount<wbr/>All</span></a>
32
+ <a href="#unproxy" 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>unproxy</span></a>
33
+ </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-Properties"><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>Properties</h2></summary><section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="cssvars"><span>css<wbr/>Vars</span><a href="#cssvars" 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><div class="tsd-signature"><span class="tsd-kind-property">cssVars</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Record</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">&gt;</span></div><div class="tsd-comment tsd-typography"><p>A reactive object containing CSS variable definitions.</p>
34
+ <p>Any property you assign to <code>cssVars</code> becomes available as a CSS custom property throughout your application.</p>
35
+ <p>Use <a href="#setspacingcssvars" class="tsd-kind-method">Aberdeen.setSpacingCssVars</a> to optionally initialize <code>cssVars[1]</code> through <code>cssVars[12]</code> with an exponential spacing scale.</p>
36
+ <p>When you reference a CSS variable in Aberdeen using the <code>$</code> prefix (e.g., <code>$primary</code>), it automatically resolves to <code>var(--primary)</code>.
37
+ For numeric keys (which can't be used directly as CSS custom property names), Aberdeen prefixes them with <code>m</code> (e.g., <code>$3</code> becomes <code>var(--m3)</code>).</p>
38
+ <p>When you add the first property to cssVars, Aberdeen automatically creates a reactive <code>&lt;style&gt;</code> tag in <code>&lt;head&gt;</code>
39
+ containing the <code>:root</code> CSS custom property declarations. The style tag is automatically removed if cssVars becomes empty.</p>
40
+ </div><div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example">Example<a href="#example" 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></h4><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">// Optionally initialize spacing scale</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">setSpacingCssVars</span><span class="hl-1">(); </span><span class="hl-4">// Uses defaults: base=1, unit=&#39;rem&#39;</span><br/><br/><span class="hl-4">// Define custom colors - style tag is automatically created</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-2">cssVars</span><span class="hl-1">.</span><span class="hl-2">primary</span><span class="hl-1"> = </span><span class="hl-3">&#39;#3b82f6&#39;</span><span class="hl-1">;</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-2">cssVars</span><span class="hl-1">.</span><span class="hl-2">danger</span><span class="hl-1"> = </span><span class="hl-3">&#39;#ef4444&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-4">// Use in elements with the $ prefix</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;button bg:$primary fg:white #I&#39;</span><span class="hl-2">m</span><span class="hl-1"> </span><span class="hl-2">a</span><span class="hl-1"> </span><span class="hl-2">primary</span><span class="hl-1"> </span><span class="hl-2">button</span><span class="hl-3">&#39;)</span><span class="hl-15">;</span><br/><br/><span class="hl-4">// Use spacing (if setSpacingCssVars() was called)</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;hr mt:$3&#39;</span><span class="hl-1">); </span><span class="hl-4">// Sets margin-top to var(--m3)</span>
41
+ </code><button type="button">Copy</button></pre>
42
+
43
+ </div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L192">aberdeen.ts:192</a></li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="custom_dump"><span>CUSTOM_<wbr/>DUMP</span><a href="#custom_dump" 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><div class="tsd-signature"><span class="tsd-kind-property">CUSTOM_DUMP</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span></div><div class="tsd-comment tsd-typography"><p>When set on an object or its prototype chain, <a href="#dump" class="tsd-kind-method">Aberdeen.dump</a> calls this as a render function
44
+ (with the object as <code>this</code>) instead of its default recursive rendering. If the value is not
45
+ a function, it's treated as a string to display.</p>
46
+ </div><div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-1">Example<a href="#example-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></h4><pre><code class="typescript"><span class="hl-5">class</span><span class="hl-1"> </span><span class="hl-10">Color</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">r</span><span class="hl-1">: </span><span class="hl-10">number</span><span class="hl-1">, </span><span class="hl-5">public</span><span class="hl-1"> </span><span class="hl-2">g</span><span class="hl-1">: </span><span class="hl-10">number</span><span class="hl-1">, </span><span class="hl-5">public</span><span class="hl-1"> </span><span class="hl-2">b</span><span class="hl-1">: </span><span class="hl-10">number</span><span class="hl-1">) {}</span><br/><span class="hl-1"> [</span><span class="hl-6">CUSTOM_DUMP</span><span class="hl-1">]() { </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">`#rgb(</span><span class="hl-5">${</span><span class="hl-5">this</span><span class="hl-9">.</span><span class="hl-2">r</span><span class="hl-5">}</span><span class="hl-3">, </span><span class="hl-5">${</span><span class="hl-5">this</span><span class="hl-9">.</span><span class="hl-2">g</span><span class="hl-5">}</span><span class="hl-3">, </span><span class="hl-5">${</span><span class="hl-5">this</span><span class="hl-9">.</span><span class="hl-2">b</span><span class="hl-5">}</span><span class="hl-3">)`</span><span class="hl-1">); }</span><br/><span class="hl-1">}</span>
47
+ </code><button type="button">Copy</button></pre>
48
+
49
+ </div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L207">aberdeen.ts:207</a></li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="no_copy"><span class="deprecated">NO_<wbr/>COPY</span><a href="#no_copy" 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><div class="tsd-signature"><span class="tsd-kind-property">NO_COPY</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span></div><div class="tsd-comment tsd-typography"><p>Use <a href="#opaque" class="tsd-kind-property">Aberdeen.OPAQUE</a> instead. This is an alias kept for backward compatibility.</p>
50
+ </div><div class="tsd-comment tsd-typography"><div class="tsd-tag-deprecated"><h4 class="tsd-anchor-link" id="deprecated">Deprecated<a href="#deprecated" 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></h4></div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L618">aberdeen.ts:618</a></li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="opaque"><span>OPAQUE</span><a href="#opaque" 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><div class="tsd-signature"><span class="tsd-kind-property">OPAQUE</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span></div><div class="tsd-comment tsd-typography"><p>A symbol that controls how Aberdeen handles an object in copy operations and proxy wrapping.</p>
51
+ <p>The <strong>presence</strong> of this symbol (regardless of its value) prevents deep-copying: the object is
52
+ stored and passed by reference in <a href="#clone" class="tsd-kind-method">Aberdeen.clone</a> and <a href="#copy" class="tsd-kind-method">Aberdeen.copy</a>.</p>
53
+ <p>The <strong>value</strong> of the symbol controls proxy wrapping when the object is read from reactive state:</p>
54
+ <ul>
55
+ <li><strong>Truthy</strong> (e.g. <code>true</code>): the object is fully opaque — it is not wrapped in a proxy, so its
56
+ properties are not observable. Use this for objects that break when proxied (e.g. class instances
57
+ with internal slots, Promises) or that must be invisible to Aberdeen's reactive system.</li>
58
+ <li><strong>Falsy</strong> (e.g. <code>false</code>): the object is still wrapped in a proxy, so reads on its properties
59
+ create reactive dependencies as normal — only deep-copying is suppressed.</li>
60
+ </ul>
61
+ </div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L611">aberdeen.ts:611</a></li></ul></aside></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="clean"><span>clean</span><a href="#clean" 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="clean-1"><span class="tsd-kind-call-signature">clean</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">cleaner</span><span class="tsd-signature-symbol">:</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><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><a href="#clean-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>Registers a cleanup function to be executed just before the current reactive scope
62
+ is destroyed or redraws.</p>
63
+ <p>This is useful for releasing resources, removing manual event listeners, or cleaning up
64
+ side effects associated with the scope. Cleaners are run in reverse order of registration.</p>
65
+ <p>Scopes are created by functions like <a href="#derive" class="tsd-kind-method">Aberdeen.derive</a>, <a href="#mount" class="tsd-kind-method">Aberdeen.mount</a>, A (when given a render function),
66
+ and internally by constructs like <a href="#oneach" class="tsd-kind-method">Aberdeen.onEach</a>.</p>
67
+ </div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">cleaner</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>The function to execute during cleanup.</p>
68
+ </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 class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-maintaing-a-sum-for-a-changing-array">Example: Maintaing a sum for a changing array<a href="#example-maintaing-a-sum-for-a-changing-array" 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></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$numbers</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-8">3</span><span class="hl-1">, </span><span class="hl-8">5</span><span class="hl-1">, </span><span class="hl-8">10</span><span class="hl-1">]);</span><br/><span class="hl-5">let</span><span class="hl-1"> </span><span class="hl-2">$sum</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-8">0</span><span class="hl-1">);</span><br/><br/><span class="hl-4">// Show the array items and maintain the sum</span><br/><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">$numbers</span><span class="hl-1">, (</span><span class="hl-2">item</span><span class="hl-1">, </span><span class="hl-2">index</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">`code#</span><span class="hl-5">${</span><span class="hl-2">index</span><span class="hl-5">}</span><span class="hl-3">→</span><span class="hl-5">${</span><span class="hl-2">item</span><span class="hl-5">}</span><span class="hl-3">`</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-4">// We&#39;ll update $sum.value using peek, as += first does a read, but</span><br/><span class="hl-1"> </span><span class="hl-4">// we don&#39;t want to subscribe.</span><br/><span class="hl-1"> </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">peek</span><span class="hl-1">(() </span><span class="hl-5">=&gt;</span><span class="hl-1"> </span><span class="hl-2">$sum</span><span class="hl-1">.</span><span class="hl-2">value</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">// Clean gets called before each rerun for a certain item index</span><br/><span class="hl-1"> </span><span class="hl-4">// No need for peek here, as the clean code doesn&#39;t run in an</span><br/><span class="hl-1"> </span><span class="hl-4">// observer scope.</span><br/><span class="hl-1"> </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">clean</span><span class="hl-1">(() </span><span class="hl-5">=&gt;</span><span class="hl-1"> </span><span class="hl-2">$sum</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1"> -= </span><span class="hl-2">item</span><span class="hl-1">);</span><br/><span class="hl-1">})</span><br/><br/><span class="hl-4">// Show the sum</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;h1 text=&#39;</span><span class="hl-1">, </span><span class="hl-2">$sum</span><span class="hl-1">);</span><br/><br/><span class="hl-4">// Make random changes to the array</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-7">rnd</span><span class="hl-1"> = () </span><span class="hl-5">=&gt;</span><span class="hl-1"> </span><span class="hl-8">0</span><span class="hl-1">|(</span><span class="hl-2">Math</span><span class="hl-1">.</span><span class="hl-7">random</span><span class="hl-1">()*</span><span class="hl-8">20</span><span class="hl-1">);</span><br/><span class="hl-7">setInterval</span><span class="hl-1">(() </span><span class="hl-5">=&gt;</span><span class="hl-1"> </span><span class="hl-2">$numbers</span><span class="hl-1">[</span><span class="hl-7">rnd</span><span class="hl-1">()] = </span><span class="hl-7">rnd</span><span class="hl-1">(), </span><span class="hl-8">1000</span><span class="hl-1">);</span>
69
+ </code><button type="button">Copy</button></pre>
70
+
71
+ </div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L92">aberdeen.ts:92</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="clone"><span>clone</span><a href="#clone" 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="clone-1"><span class="tsd-kind-call-signature">clone</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#clonet">T</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">src</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#clonet">T</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#clonet">T</a><a href="#clone-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>Clone an (optionally proxied) object or array.</p>
72
+ </div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="clonet"><span class="tsd-kind-type-parameter">T</span> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span></span><div class="tsd-comment tsd-typography"><p>The type of the objects being copied.</p>
73
+ </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-kind-parameter">src</span>: <a class="tsd-signature-type tsd-kind-type-parameter" href="#clonet">T</a></span><div class="tsd-comment tsd-typography"><p>The object or array to clone. If it is proxied, <code>clone</code> will subscribe to any changes to the (nested) data structure.</p>
74
+ </div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <a class="tsd-signature-type tsd-kind-type-parameter" href="#clonet">T</a></h4><p>A new unproxied array or object (of the same type as <code>src</code>), containing a deep copy of <code>src</code>.</p>
75
+ <div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L101">aberdeen.ts:101</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="copy"><span>copy</span><a href="#copy" 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="copy-1"><span class="tsd-kind-call-signature">copy</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#copyt">T</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">dst</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#copyt">T</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">src</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#copyt">T</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><a href="#copy-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>Recursively copies properties or array items from <code>src</code> to <code>dst</code>.
76
+ It's designed to work efficiently with reactive proxies created by <a href="#proxy" class="tsd-kind-method">Aberdeen.proxy</a>.</p>
77
+ <ul>
78
+ <li><strong>Minimizes Updates:</strong> When copying between objects/arrays (proxied or not), if a nested object
79
+ exists in <code>dst</code> with the same constructor as the corresponding object in <code>src</code>, <code>copy</code>
80
+ will recursively copy properties into the existing <code>dst</code> object instead of replacing it.
81
+ This minimizes change notifications for reactive (proxied) destinations.</li>
82
+ <li><strong>Fast with Proxies:</strong> When copying to/from proxied objects, <code>copy</code> uses Aberdeen internals
83
+ to speed things up (compared to a non-Aberdeen-aware deep copy).</li>
84
+ </ul>
85
+ </div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="copyt"><span class="tsd-kind-type-parameter">T</span> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span></span><div class="tsd-comment tsd-typography"><p>The type of the objects being copied.</p>
86
+ </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-kind-parameter">dst</span>: <a class="tsd-signature-type tsd-kind-type-parameter" href="#copyt">T</a></span><div class="tsd-comment tsd-typography"><p>The destination object/array/Map (proxied or unproxied).</p>
87
+ </div><div class="tsd-comment tsd-typography"></div></li><li><span><span class="tsd-kind-parameter">src</span>: <a class="tsd-signature-type tsd-kind-type-parameter" href="#copyt">T</a></span><div class="tsd-comment tsd-typography"><p>The source object/array/Map (proxied or unproxied). It won't be modified.</p>
88
+ </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><code>true</code> if any changes were made to <code>dst</code>, or <code>false</code> if not.</p>
89
+ <div class="tsd-comment tsd-typography"><div class="tsd-tag-throws"><h4 class="tsd-anchor-link" id="throws">Throws<a href="#throws" 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></h4><p>Error if attempting to copy an array into a non-array or vice versa.</p>
90
+ </div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-basic-copy">Example: Basic Copy<a href="#example-basic-copy" 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></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$source</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">a:</span><span class="hl-1"> </span><span class="hl-8">1</span><span class="hl-1">, </span><span class="hl-2">b:</span><span class="hl-1"> { </span><span class="hl-2">c:</span><span class="hl-1"> </span><span class="hl-8">2</span><span class="hl-1"> } });</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$dest</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">b:</span><span class="hl-1"> { </span><span class="hl-2">d:</span><span class="hl-1"> </span><span class="hl-8">3</span><span class="hl-1"> } });</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">copy</span><span class="hl-1">(</span><span class="hl-2">$dest</span><span class="hl-1">, </span><span class="hl-2">$source</span><span class="hl-1">);</span><br/><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-2">$dest</span><span class="hl-1">); </span><span class="hl-4">// proxy({ a: 1, b: { c: 2 } })</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">copy</span><span class="hl-1">(</span><span class="hl-2">$dest</span><span class="hl-1">, </span><span class="hl-3">&#39;b&#39;</span><span class="hl-1">, { </span><span class="hl-2">e:</span><span class="hl-1"> </span><span class="hl-8">4</span><span class="hl-1"> });</span><br/><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-2">$dest</span><span class="hl-1">); </span><span class="hl-4">// proxy({ a: 1, b: { e: 4 } })</span>
91
+ </code><button type="button">Copy</button></pre>
92
+
93
+ </div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L130">aberdeen.ts:130</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="count"><span>count</span><a href="#count" 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="count-1"><span class="tsd-kind-call-signature">count</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">proxied</span><span class="tsd-signature-symbol">:</span> <a href="../TargetType/" class="tsd-signature-type tsd-kind-type-alias">TargetType</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a href="../ValueRef/" class="tsd-signature-type tsd-kind-interface">ValueRef</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">&gt;</span><a href="#count-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>Reactively counts the number of properties in an object.</p>
94
+ </div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">proxied</span>: <a href="../TargetType/" class="tsd-signature-type tsd-kind-type-alias">TargetType</a></span><div class="tsd-comment tsd-typography"><p>The observable object to count. In case an <code>array</code>, <code>Map</code>, or <code>Set</code> is passed in, a <a href="#ref" class="tsd-kind-method">Aberdeen.ref</a> to its <code>.length</code> or <code>.size</code> will be returned.</p>
95
+ </div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <a href="../ValueRef/" class="tsd-signature-type tsd-kind-interface">ValueRef</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">&gt;</span></h4><p>an observable object for which the <code>value</code> property reflects the number of properties in <code>proxied</code> with a value other than <code>undefined</code>, or the collection size for arrays, Maps, and Sets.</p>
96
+ <div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-2">Example<a href="#example-2" 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></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$items</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">x:</span><span class="hl-1"> </span><span class="hl-8">3</span><span class="hl-1">, </span><span class="hl-2">y:</span><span class="hl-1"> </span><span class="hl-8">7</span><span class="hl-1">} </span><span class="hl-0">as</span><span class="hl-1"> </span><span class="hl-10">any</span><span class="hl-1">);</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$count</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">count</span><span class="hl-1">(</span><span class="hl-2">$items</span><span class="hl-1">);</span><br/><br/><span class="hl-4">// Create a DOM text node for the count:</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;div text=&#39;</span><span class="hl-1">, </span><span class="hl-2">$count</span><span class="hl-1">);</span><br/><span class="hl-4">// &lt;div&gt;2&lt;/div&gt;</span><br/><br/><span class="hl-4">// Or we can use it in an {@link Aberdeen.derive} function:</span><br/><span class="hl-7">A</span><span class="hl-1">(() </span><span class="hl-5">=&gt;</span><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;The count is now&quot;</span><span class="hl-1">, </span><span class="hl-2">$count</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1">));</span><br/><span class="hl-4">// The count is now 2</span><br/><br/><span class="hl-4">// Adding/removing items will update the count</span><br/><span class="hl-2">$items</span><span class="hl-1">.</span><span class="hl-2">z</span><span class="hl-1"> = </span><span class="hl-8">12</span><span class="hl-1">;</span><br/><span class="hl-4">// Asynchronously, after 0ms:</span><br/><span class="hl-4">// &lt;div&gt;3&lt;/div&gt;</span><br/><span class="hl-4">// The count is now 3</span>
97
+ </code><button type="button">Copy</button></pre>
98
+
99
+ </div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L159">aberdeen.ts:159</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="darkmode"><span>dark<wbr/>Mode</span><a href="#darkmode" 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="darkmode-1"><span class="tsd-kind-call-signature">darkMode</span><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><a href="#darkmode-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>Returns whether the user's browser prefers a dark color scheme.</p>
100
+ <p>This function is reactive - scopes that call it will re-execute when the
101
+ browser's color scheme preference changes (via the <code>prefers-color-scheme</code> media query).</p>
102
+ <p>Use this in combination with A and <a href="#cssvars" class="tsd-kind-property">Aberdeen.cssVars</a> to implement theme switching:</p>
103
+ </div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4><p><code>true</code> if the browser prefers dark mode, <code>false</code> if it prefers light mode.</p>
104
+ <div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-3">Example<a href="#example-3" 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></h4><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">// Reactively set colors based on browser preference</span><br/><span class="hl-7">A</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-6">A</span><span class="hl-1">.</span><span class="hl-2">cssVars</span><span class="hl-1">.</span><span class="hl-2">bg</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">darkMode</span><span class="hl-1">() ? </span><span class="hl-3">&#39;#1a1a1a&#39;</span><span class="hl-1"> : </span><span class="hl-3">&#39;#ffffff&#39;</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-2">cssVars</span><span class="hl-1">.</span><span class="hl-2">fg</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">darkMode</span><span class="hl-1">() ? </span><span class="hl-3">&#39;#e5e5e5&#39;</span><span class="hl-1"> : </span><span class="hl-3">&#39;#000000&#39;</span><span class="hl-1">;</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;div bg:$bg fg:$fg p:1rem #Colors change based on system dark mode preference&#39;</span><span class="hl-1">);</span>
105
+ </code><button type="button">Copy</button></pre>
106
+
107
+ </div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L232">aberdeen.ts:232</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="derive"><span>derive</span><a href="#derive" 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="derive-1"><span class="tsd-kind-call-signature">derive</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#derivet">T</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">func</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">()</span> <span class="tsd-signature-symbol">=&gt;</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#derivet">T</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a href="../ValueRef/" class="tsd-signature-type tsd-kind-interface">ValueRef</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#derivet">T</a><span class="tsd-signature-symbol">&gt;</span><a href="#derive-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>Creates a reactive scope that automatically re-executes the provided function
108
+ whenever any proxied data (created by <a href="#proxy" class="tsd-kind-method">Aberdeen.proxy</a>) read during its last execution changes, storing
109
+ its return value in an observable.</p>
110
+ <p>Updates are batched and run asynchronously shortly after the changes occur.
111
+ Use <a href="#clean" class="tsd-kind-method">Aberdeen.clean</a> to register cleanup logic for the scope.
112
+ Use <a href="#peek" class="tsd-kind-method">Aberdeen.peek</a> or <a href="#unproxy" class="tsd-kind-method">Aberdeen.unproxy</a> within the function to read proxied data without subscribing to it.</p>
113
+ </div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="derivet"><span class="tsd-kind-type-parameter">T</span></span></li></ul></section><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">func</span>: <span class="tsd-signature-symbol">()</span> <span class="tsd-signature-symbol">=&gt;</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#derivet">T</a></span><div class="tsd-comment tsd-typography"><p>The function to execute reactively. Any DOM manipulations should typically
114
+ be done using A within this function. Its return value will be made available as an
115
+ observable returned by the <code>derive()</code> function.</p>
116
+ </div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <a href="../ValueRef/" class="tsd-signature-type tsd-kind-interface">ValueRef</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#derivet">T</a><span class="tsd-signature-symbol">&gt;</span></h4><p>An observable object, with its <code>value</code> property containing whatever the last run of <code>func</code> returned.</p>
117
+ <div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-observation-creating-ui-components">Example: Observation creating UI components<a href="#example-observation-creating-ui-components" 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></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$data</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">user:</span><span class="hl-1"> </span><span class="hl-3">&#39;Frank&#39;</span><span class="hl-1">, </span><span class="hl-2">notifications:</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;main&#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-2">console</span><span class="hl-1">.</span><span class="hl-7">log</span><span class="hl-1">(</span><span class="hl-3">&#39;Welcome&#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;h3#Welcome, &#39;</span><span class="hl-1"> + </span><span class="hl-2">$data</span><span class="hl-1">.</span><span class="hl-2">user</span><span class="hl-1">); </span><span class="hl-4">// Reactive text</span><br/><br/><span class="hl-1"> </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">derive</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">// When $data.notifications changes, only this inner scope reruns,</span><br/><span class="hl-1"> </span><span class="hl-4">// leaving the `&lt;p&gt;Welcome, ..&lt;/p&gt;` untouched.</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">&#39;Notifications&#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;code.notification-badge text=&#39;</span><span class="hl-1">, </span><span class="hl-2">$data</span><span class="hl-1">.</span><span class="hl-2">notifications</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=Notify! click=&#39;</span><span class="hl-1">, () </span><span class="hl-5">=&gt;</span><span class="hl-1"> </span><span class="hl-2">$data</span><span class="hl-1">.</span><span class="hl-2">notifications</span><span class="hl-1">++);</span><br/><span class="hl-1"> });</span><br/><span class="hl-1">});</span>
118
+ </code><button type="button">Copy</button></pre>
119
+
120
+ <p><em><strong>Note</strong></em> that the above could just as easily be done using <code>A(func)</code> instead of <code>derive(func)</code>.</p>
121
+ </div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-observation-with-return-value">Example: Observation with return value<a href="#example-observation-with-return-value" 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></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$counter</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-8">0</span><span class="hl-1">);</span><br/><span class="hl-7">setInterval</span><span class="hl-1">(() </span><span class="hl-5">=&gt;</span><span class="hl-1"> </span><span class="hl-2">$counter</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1">++, </span><span class="hl-8">1000</span><span class="hl-1">);</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$double</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">derive</span><span class="hl-1">(() </span><span class="hl-5">=&gt;</span><span class="hl-1"> </span><span class="hl-2">$counter</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1"> * </span><span class="hl-8">2</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-7">A</span><span class="hl-1">(</span><span class="hl-3">`#counter=</span><span class="hl-5">${</span><span class="hl-2">$counter</span><span class="hl-9">.</span><span class="hl-2">value</span><span class="hl-5">}</span><span class="hl-3"> double=</span><span class="hl-5">${</span><span class="hl-2">$double</span><span class="hl-9">.</span><span class="hl-2">value</span><span class="hl-5">}</span><span class="hl-3">`</span><span class="hl-1">);</span><br/><span class="hl-1">})</span>
122
+ </code><button type="button">Copy</button></pre>
123
+
124
+ </div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L282">aberdeen.ts:282</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="dump"><span>dump</span><a href="#dump" 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="dump-1"><span class="tsd-kind-call-signature">dump</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#dumpt">T</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">data</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#dumpt">T</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#dumpt">T</a><a href="#dump-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>Renders a live, recursive dump of a proxied data structure (or any value)
125
+ into the DOM at the current A insertion point.</p>
126
+ <p>Uses <code>&lt;ul&gt;</code> and <code>&lt;li&gt;</code> elements to display object properties and array items.
127
+ Updates reactively if the dumped data changes. Primarily intended for debugging purposes.</p>
128
+ </div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="dumpt"><span class="tsd-kind-type-parameter">T</span></span><div class="tsd-comment tsd-typography"><p>The type of the data being dumped.</p>
129
+ </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-kind-parameter">data</span>: <a class="tsd-signature-type tsd-kind-type-parameter" href="#dumpt">T</a></span><div class="tsd-comment tsd-typography"><p>The proxied data structure (or any value) to display.</p>
130
+ </div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <a class="tsd-signature-type tsd-kind-type-parameter" href="#dumpt">T</a></h4><p>The original <code>data</code> argument, allowing for chaining.</p>
131
+ <div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-dumping-reactive-state">Example: Dumping reactive state<a href="#example-dumping-reactive-state" 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></h4><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">&#39;aberdeen&#39;</span><span class="hl-1">;</span><br/><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><br/><span class="hl-1"> </span><span class="hl-2">user:</span><span class="hl-1"> { </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">&#39;Frank&#39;</span><span class="hl-1">, </span><span class="hl-2">kids:</span><span class="hl-1"> </span><span class="hl-8">1</span><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-2">items:</span><span class="hl-1"> [</span><span class="hl-3">&#39;a&#39;</span><span class="hl-1">, </span><span class="hl-3">&#39;b&#39;</span><span class="hl-1">]</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;h2#Live State Dump&#39;</span><span class="hl-1">);</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">dump</span><span class="hl-1">(</span><span class="hl-2">$state</span><span class="hl-1">);</span><br/><br/><span class="hl-4">// Change state later, the dump in the DOM will update</span><br/><span class="hl-7">setTimeout</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">user</span><span class="hl-1">.</span><span class="hl-2">kids</span><span class="hl-1">++; </span><span class="hl-2">$state</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-3">&#39;c&#39;</span><span class="hl-1">); }, </span><span class="hl-8">2000</span><span class="hl-1">);</span>
132
+ </code><button type="button">Copy</button></pre>
133
+
134
+ </div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L311">aberdeen.ts:311</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="insertcss"><span>insert<wbr/>Css</span><a href="#insertcss" 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="insertcss-1"><span class="tsd-kind-call-signature">insertCss</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">style</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><a href="#insertcss-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>Inserts CSS rules into the document, scoping them with a unique class name.</p>
135
+ <p>The <code>style</code> parameter can be either:</p>
136
+ <ul>
137
+ <li>A <strong>concise style string</strong> (for rules applying to the root class).</li>
138
+ <li>An <strong>object</strong> where keys are selectors (with <code>&amp;</code> representing the root class)
139
+ and values are concise style strings or nested objects. When the key does not contain <code>&amp;</code>,
140
+ it is treated as a descendant selector. So <code>{p: &quot;color:red&quot;}</code> becomes <code>&quot;.AbdStlX p { color: red; }&quot;</code> with <code>AbdStlX</code> being the generated class name.</li>
141
+ </ul>
142
+ <h3 id="concise-style-strings" class="tsd-anchor-link">Concise Style Strings<a href="#concise-style-strings" 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><p>Concise style strings use two syntaxes (same as inline CSS in A):</p>
143
+ <ul>
144
+ <li><strong>Short form</strong> <code>key:value</code> (no space after colon): The value ends at the next whitespace.
145
+ Example: <code>'m:$3 bg:red r:8px'</code></li>
146
+ <li><strong>Long form</strong> <code>key: value;</code> (space after colon): The value continues until a semicolon.
147
+ Example: <code>'box-shadow: 2px 0 6px black; transition: all 0.3s ease;'</code></li>
148
+ </ul>
149
+ <p>Both forms can be mixed: <code>'m:$3 box-shadow: 0 2px 4px rgba(0,0,0,0.2); bg:$cardBg'</code></p>
150
+ <p>Supports the same CSS shortcuts as A and CSS variable references with <code>$</code> (e.g., <code>$primary</code>, <code>$3</code>).</p>
151
+ </div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">style</span>: <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">object</span></span><div class="tsd-comment tsd-typography"><p>A concise style string or a style object.</p>
152
+ </div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4><p>The unique class name prefix used for scoping (e.g., <code>.AbdStl1</code>).
153
+ Use this prefix with A to apply the styles.</p>
154
+ <div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-basic-usage-with-shortcuts-and-css-variables">Example: Basic Usage with Shortcuts and CSS Variables<a href="#example-basic-usage-with-shortcuts-and-css-variables" 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></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">cardClass</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">&#39;&amp;&#39;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">&#39;bg:white p:$4 r:8px transition: background-color 0.3s;&#39;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">&#39;&amp;:hover&#39;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">&#39;bg:#f5f5f5&#39;</span><span class="hl-1">,</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;section&#39;</span><span class="hl-1">, </span><span class="hl-2">cardClass</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;p#Card content&#39;</span><span class="hl-1">); </span><br/><span class="hl-1">});</span>
155
+ </code><button type="button">Copy</button></pre>
156
+
157
+ </div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-nested-selectors-and-media-queries">Example: Nested Selectors and Media Queries<a href="#example-nested-selectors-and-media-queries" 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></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">formClass</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">&#39;&amp;&#39;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">&#39;bg:#0004 p:$3 r:$2&#39;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">button:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-3">&#39;&amp;&#39;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">&#39;bg:$primary fg:white p:$2 r:4px cursor:pointer&#39;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">&#39;&amp;:hover&#39;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">&#39;bg:$primaryHover&#39;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">&#39;&amp;:disabled&#39;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">&#39;bg:#ccc cursor:not-allowed&#39;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">&#39;.icon&#39;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">&#39;display:inline-block mr:$1&#39;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">&#39;@media (max-width: 600px)&#39;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">&#39;p:$1 font-size:14px&#39;</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;form&#39;</span><span class="hl-1">, </span><span class="hl-2">formClass</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&#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;span.icon text=🔥&#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;#Click Me&#39;</span><span class="hl-1">);</span><br/><span class="hl-1"> });</span><br/><span class="hl-1">});</span>
158
+ </code><button type="button">Copy</button></pre>
159
+
160
+ </div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-complex-css-values">Example: Complex CSS Values<a href="#example-complex-css-values" 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></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">badge</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">&#39;&amp;::before&#39;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">&#39;content: &quot;★&quot;; color:gold mr:$1&#39;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">&#39;&amp;&#39;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">&#39;position:relative box-shadow: 0 2px 8px rgba(0,0,0,0.15);&#39;</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-2">badge</span><span class="hl-1"> + </span><span class="hl-3">&#39; span#Product Name&#39;</span><span class="hl-1">);</span>
161
+ </code><button type="button">Copy</button></pre>
162
+
163
+ </div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L381">aberdeen.ts:381</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="insertglobalcss"><span>insert<wbr/>Global<wbr/>Css</span><a href="#insertglobalcss" 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="insertglobalcss-1"><span class="tsd-kind-call-signature">insertGlobalCss</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">style</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><a href="#insertglobalcss-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>Inserts CSS rules globally (unscoped).</p>
164
+ <p>Works exactly like <a href="#insertcss" class="tsd-kind-method">Aberdeen.insertCss</a>, but without prefixing selectors with a unique class name.
165
+ This is useful for global resets, base styles, or styles that need to apply to the entire document.</p>
166
+ <p>Accepts the same concise style string syntax and CSS shortcuts as <a href="#insertcss" class="tsd-kind-method">Aberdeen.insertCss</a>.
167
+ See <a href="#insertcss" class="tsd-kind-method">Aberdeen.insertCss</a> for detailed documentation on syntax and shortcuts.</p>
168
+ </div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">style</span>: <span class="tsd-signature-type">object</span></span><div class="tsd-comment tsd-typography"><p>Object with selectors as keys and concise CSS strings as values.</p>
169
+ </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 class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-global-reset-and-base-styles">Example: Global Reset and Base Styles<a href="#example-global-reset-and-base-styles" 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></h4><pre><code class="typescript"><span class="hl-4">// Set up global styles using CSS shortcuts</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">insertGlobalCss</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-3">&quot;*&quot;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">&quot;m:0 p:0 box-sizing:border-box&quot;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">&quot;body&quot;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">&quot;font-family: system-ui, sans-serif; m:0 p:$3 bg:#434 fg:#d0dafa&quot;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">&quot;a&quot;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">&quot;text-decoration:none fg:#57f&quot;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">&quot;a:hover&quot;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">&quot;text-decoration:underline&quot;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">&quot;code&quot;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">&quot;font-family:monospace bg:#222 fg:#afc p:4px r:3px&quot;</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;h2#Title without margins&#39;</span><span class="hl-1">);</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;a#This is a link&#39;</span><span class="hl-1">);</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;code#const x = 42;&#39;</span><span class="hl-1">);</span>
170
+ </code><button type="button">Copy</button></pre>
171
+
172
+ </div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-responsive-global-styles">Example: Responsive Global Styles<a href="#example-responsive-global-styles" 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></h4><pre><code class="typescript"><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">insertGlobalCss</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-3">&quot;html&quot;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">&quot;font-size:16px&quot;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">&quot;body&quot;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">&quot;line-height:1.6&quot;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">&quot;h1, h2, h3&quot;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">&quot;font-weight:600 mt:$4 mb:$2&quot;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">&quot;@media (max-width: 768px)&quot;</span><span class="hl-2">:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-3">&quot;html&quot;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">&quot;font-size:14px&quot;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">&quot;body&quot;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">&quot;p:$2&quot;</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-3">&quot;@media (prefers-color-scheme: dark)&quot;</span><span class="hl-2">:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-3">&quot;body&quot;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">&quot;bg:#1a1a1a fg:#e5e5e5&quot;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">&quot;code&quot;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">&quot;bg:#2a2a2a&quot;</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
173
+ </code><button type="button">Copy</button></pre>
174
+
175
+ <p>At-rules such as <code>@media</code> and <code>@keyframes</code> should use nested objects. For keyframes,
176
+ the step selectors (<code>0%</code>, <code>50%</code>, <code>100%</code>, etc.) become the nested keys and each value
177
+ should be a concise CSS declaration string.</p>
178
+ </div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-animation-keyframes">Example: Animation Keyframes<a href="#example-animation-keyframes" 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></h4><pre><code class="typescript"><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">insertGlobalCss</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-3">&quot;@keyframes connection-pulse&quot;</span><span class="hl-2">:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-3">&quot;0%&quot;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">&quot;box-shadow: inset 0 0 0 0 rgba(255, 70, 70, 0.4);&quot;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">&quot;50%&quot;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">&quot;box-shadow: inset 0 0 0 6px rgba(255, 70, 70, 0.08);&quot;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">&quot;100%&quot;</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">&quot;box-shadow: inset 0 0 0 0 rgba(255, 70, 70, 0.4);&quot;</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
179
+ </code><button type="button">Copy</button></pre>
180
+
181
+ </div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L441">aberdeen.ts:441</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="invertstring"><span>invert<wbr/>String</span><a href="#invertstring" 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="invertstring-1"><span class="tsd-kind-call-signature">invertString</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">input</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-type">string</span><a href="#invertstring-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>Creates a new string that has the opposite sort order compared to the input string.</p>
182
+ <p>This is achieved by flipping the bits of each character code in the input string.
183
+ The resulting string is intended for use as a sort key, particularly with the
184
+ <code>makeKey</code> function in <a href="#oneach" class="tsd-kind-method">Aberdeen.onEach</a>, to achieve a descending sort order.</p>
185
+ <p><strong>Warning:</strong> The output string will likely contain non-printable characters or
186
+ appear as gibberish and should not be displayed to the user.</p>
187
+ </div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">input</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The string whose sort order needs to be inverted.</p>
188
+ </div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4><p>A new string that will sort in the reverse order of the input string.</p>
189
+ <div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-4">Example<a href="#example-4" 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></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$users</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-2">id:</span><span class="hl-1"> </span><span class="hl-8">1</span><span class="hl-1">, </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">&#39;Charlie&#39;</span><span class="hl-1">, </span><span class="hl-2">score:</span><span class="hl-1"> </span><span class="hl-8">95</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-2">id:</span><span class="hl-1"> </span><span class="hl-8">2</span><span class="hl-1">, </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">&#39;Alice&#39;</span><span class="hl-1">, </span><span class="hl-2">score:</span><span class="hl-1"> </span><span class="hl-8">100</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-2">id:</span><span class="hl-1"> </span><span class="hl-8">3</span><span class="hl-1">, </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">&#39;Bob&#39;</span><span class="hl-1">, </span><span class="hl-2">score:</span><span class="hl-1"> </span><span class="hl-8">90</span><span class="hl-1"> },</span><br/><span class="hl-1">]);</span><br/><br/><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">$users</span><span class="hl-1">, (</span><span class="hl-2">$user</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">`p#</span><span class="hl-5">${</span><span class="hl-2">$user</span><span class="hl-9">.</span><span class="hl-2">name</span><span class="hl-5">}</span><span class="hl-3">: </span><span class="hl-5">${</span><span class="hl-2">$user</span><span class="hl-9">.</span><span class="hl-2">score</span><span class="hl-5">}</span><span class="hl-3">`</span><span class="hl-1">);</span><br/><span class="hl-1">}, (</span><span class="hl-2">$user</span><span class="hl-1">) </span><span class="hl-5">=&gt;</span><span class="hl-1"> </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">invertString</span><span class="hl-1">(</span><span class="hl-2">$user</span><span class="hl-1">.</span><span class="hl-2">name</span><span class="hl-1">)); </span><span class="hl-4">// Reverse alphabetic order</span>
190
+ </code><button type="button">Copy</button></pre>
191
+
192
+ </div><div class="tsd-tag-see"><h4 class="tsd-anchor-link" id="see">See<a href="#see" 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></h4><p><a href="#oneach" class="tsd-kind-method">Aberdeen.onEach</a> for usage with sorting.</p>
193
+ </div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L470">aberdeen.ts:470</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="isempty"><span>is<wbr/>Empty</span><a href="#isempty" 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="isempty-1"><span class="tsd-kind-call-signature">isEmpty</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">proxied</span><span class="tsd-signature-symbol">:</span> <a href="../TargetType/" class="tsd-signature-type tsd-kind-type-alias">TargetType</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><a href="#isempty-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>Reactively checks if an observable array, object, Map, or Set is empty.</p>
194
+ <p>This function not only returns the current emptiness state but also establishes
195
+ a reactive dependency. If the emptiness state of the <code>proxied</code> object or array
196
+ changes later (e.g., an item is added to an empty array, or the last property
197
+ is deleted from an object), the scope that called <code>isEmpty</code> will be automatically
198
+ scheduled for re-evaluation.</p>
199
+ </div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">proxied</span>: <a href="../TargetType/" class="tsd-signature-type tsd-kind-type-alias">TargetType</a></span><div class="tsd-comment tsd-typography"><p>The observable array, object, Map, or Set to check.</p>
200
+ </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><code>true</code> if the array has length 0, the Map/Set has size 0, or the object has no own enumerable properties, <code>false</code> otherwise.</p>
201
+ <div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-5">Example<a href="#example-5" 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></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$items</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/><br/><span class="hl-4">// Reactively display a message if the items array is empty</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;div&#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">if</span><span class="hl-1"> (</span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">isEmpty</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-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;p i#No items yet!&#39;</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-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">item</span><span class="hl-1"> </span><span class="hl-5">=&gt;</span><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;p#&#39;</span><span class="hl-1">+</span><span class="hl-2">item</span><span class="hl-1">));</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-4">// Adding an item will automatically remove the &quot;No items yet!&quot; message</span><br/><span class="hl-7">setInterval</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">if</span><span class="hl-1"> (!</span><span class="hl-2">$items</span><span class="hl-1">.</span><span class="hl-2">length</span><span class="hl-1"> || </span><span class="hl-2">Math</span><span class="hl-1">.</span><span class="hl-7">random</span><span class="hl-1">()&gt;</span><span class="hl-8">0.5</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-3">&#39;Item&#39;</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-0">else</span><span class="hl-1"> </span><span class="hl-2">$items</span><span class="hl-1">.</span><span class="hl-2">length</span><span class="hl-1"> = </span><span class="hl-8">0</span><span class="hl-1">;</span><br/><span class="hl-1">}, </span><span class="hl-8">1000</span><span class="hl-1">)</span>
202
+ </code><button type="button">Copy</button></pre>
203
+
204
+ </div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L504">aberdeen.ts:504</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="map"><span>map</span><a href="#map" 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="map-1"><span class="tsd-kind-call-signature">map</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#mapk">K</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapin">IN</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapout">OUT</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><br/>    <span class="tsd-kind-parameter">source</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#mapk">K</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapin">IN</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-kind-parameter">func</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapin">IN</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">key</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapk">K</a><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=&gt;</span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapout">OUT</a><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#mapk">K</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapout">OUT</a><span class="tsd-signature-symbol">&gt;</span><a href="#map-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>When using a Map as <code>source</code>.</p>
205
+ </div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="mapk"><span class="tsd-kind-type-parameter">K</span></span></li><li><span id="mapin"><span class="tsd-kind-type-parameter">IN</span></span></li><li><span id="mapout"><span class="tsd-kind-type-parameter">OUT</span></span></li></ul></section><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">source</span>: <span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#mapk">K</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapin">IN</a><span class="tsd-signature-symbol">&gt;</span></span></li><li><span><span class="tsd-kind-parameter">func</span>: <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapin">IN</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">key</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapk">K</a><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=&gt;</span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapout">OUT</a></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#mapk">K</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapout">OUT</a><span class="tsd-signature-symbol">&gt;</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/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L507">aberdeen.ts:507</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="merge"><span>merge</span><a href="#merge" 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="merge-1"><span class="tsd-kind-call-signature">merge</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#merget">T</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">dst</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#merget">T</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#merget">T</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><a href="#merge-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>Like <a href="#copy" class="tsd-kind-method">Aberdeen.copy</a>, but uses merge semantics. Properties in <code>dst</code> not present in <code>src</code> are kept.
206
+ <code>null</code>/<code>undefined</code> in <code>src</code> delete properties in <code>dst</code>.</p>
207
+ </div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="merget"><span class="tsd-kind-type-parameter">T</span> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span></span></li></ul></section><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">dst</span>: <a class="tsd-signature-type tsd-kind-type-parameter" href="#merget">T</a></span></li><li><span><span class="tsd-kind-parameter">value</span>: <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#merget">T</a><span class="tsd-signature-symbol">&gt;</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4><div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-basic-merge">Example: Basic merge<a href="#example-basic-merge" 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></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">source</span><span class="hl-1"> = { </span><span class="hl-2">b:</span><span class="hl-1"> { </span><span class="hl-2">c:</span><span class="hl-1"> </span><span class="hl-8">99</span><span class="hl-1"> }, </span><span class="hl-2">d:</span><span class="hl-1"> </span><span class="hl-5">undefined</span><span class="hl-1"> }; </span><span class="hl-4">// d: undefined will delete</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$dest</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">a:</span><span class="hl-1"> </span><span class="hl-8">1</span><span class="hl-1">, </span><span class="hl-2">b:</span><span class="hl-1"> { </span><span class="hl-2">x:</span><span class="hl-1"> </span><span class="hl-8">5</span><span class="hl-1"> }, </span><span class="hl-2">d:</span><span class="hl-1"> </span><span class="hl-8">4</span><span class="hl-1"> });</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">merge</span><span class="hl-1">(</span><span class="hl-2">$dest</span><span class="hl-1">, </span><span class="hl-2">source</span><span class="hl-1">);</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">merge</span><span class="hl-1">(</span><span class="hl-2">$dest</span><span class="hl-1">, </span><span class="hl-3">&#39;b&#39;</span><span class="hl-1">, { </span><span class="hl-2">y:</span><span class="hl-1"> </span><span class="hl-8">6</span><span class="hl-1"> }); </span><span class="hl-4">// merge into $dest.b</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">merge</span><span class="hl-1">(</span><span class="hl-2">$dest</span><span class="hl-1">, </span><span class="hl-3">&#39;c&#39;</span><span class="hl-1">, { </span><span class="hl-2">z:</span><span class="hl-1"> </span><span class="hl-8">7</span><span class="hl-1"> }); </span><span class="hl-4">// $dest.c doesn&#39;t exist yet, so it will just be assigned</span><br/><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-2">$dest</span><span class="hl-1">); </span><span class="hl-4">// proxy({ a: 1, b: { c: 99, x: 5, y: 6 }, c: { z: 7 } })</span>
208
+ </code><button type="button">Copy</button></pre>
209
+
210
+ </div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L535">aberdeen.ts:535</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="mount"><span>mount</span><a href="#mount" 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="mount-1"><span class="tsd-kind-call-signature">mount</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">parentElement</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Element</span><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">func</span><span class="tsd-signature-symbol">:</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><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><a href="#mount-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>Attaches a reactive Aberdeen UI fragment to an existing DOM element. Without the use of
211
+ this function, A will assume <code>document.body</code> as its root.</p>
212
+ <p>It creates a top-level reactive scope associated with the <code>parentElement</code>. The provided
213
+ function <code>func</code> is executed immediately within this scope. Any proxied data read by <code>func</code>
214
+ will cause it to re-execute when the data changes, updating the DOM elements created within it.</p>
215
+ <p>Calls to A inside <code>func</code> will append nodes to <code>parentElement</code>.
216
+ You can nest <a href="#derive" class="tsd-kind-method">Aberdeen.derive</a> or other A scopes within <code>func</code>.
217
+ Use <a href="#unmountall" class="tsd-kind-method">Aberdeen.unmountAll</a> to clean up all mounted scopes and their DOM nodes.</p>
218
+ <p>Mounting scopes happens reactively, meaning that if this function is called from within another
219
+ (<a href="#derive" class="tsd-kind-method">Aberdeen.derive</a> or A or <a href="#mount" class="tsd-kind-method">Aberdeen.mount</a>) scope that gets cleaned up, so will the mount.</p>
220
+ </div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">parentElement</span>: <span class="tsd-signature-type">Element</span></span><div class="tsd-comment tsd-typography"><p>The native DOM <code>Element</code> to which the UI fragment will be appended.</p>
221
+ </div><div class="tsd-comment tsd-typography"></div></li><li><span><span class="tsd-kind-parameter">func</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>The function that defines the UI fragment, typically containing calls to A.</p>
222
+ </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 class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-basic-mount">Example: Basic Mount<a href="#example-basic-mount" 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></h4><pre><code class="javascript"><span class="hl-4">// Create a pre-existing DOM structure (without Aberdeen)</span><br/><span class="hl-2">document</span><span class="hl-1">.</span><span class="hl-2">body</span><span class="hl-1">.</span><span class="hl-2">innerHTML</span><span class="hl-1"> = </span><span class="hl-3">`&lt;h3&gt;Static content &lt;span id=&quot;title-extra&quot;&gt;&lt;/span&gt;&lt;/h3&gt;&lt;div class=&quot;box&quot; id=&quot;app-root&quot;&gt;&lt;/div&gt;`</span><span class="hl-1">;</span><br/><br/><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-5">const</span><span class="hl-1"> </span><span class="hl-6">$runTime</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-8">0</span><span class="hl-1">);</span><br/><span class="hl-7">setInterval</span><span class="hl-1">(() </span><span class="hl-5">=&gt;</span><span class="hl-1"> </span><span class="hl-2">$runTime</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1">++, </span><span class="hl-8">1000</span><span class="hl-1">);</span><br/><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">mount</span><span class="hl-1">(</span><span class="hl-2">document</span><span class="hl-1">.</span><span class="hl-7">getElementById</span><span class="hl-1">(</span><span class="hl-3">&#39;app-root&#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;h4#Aberdeen App&#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">`p#Run time: </span><span class="hl-5">${</span><span class="hl-2">$runTime</span><span class="hl-9">.</span><span class="hl-2">value</span><span class="hl-5">}</span><span class="hl-3">s`</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-4">// Conditionally render some content somewhere else in the static page</span><br/><span class="hl-1"> </span><span class="hl-0">if</span><span class="hl-1"> (</span><span class="hl-2">$runTime</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1">&amp;</span><span class="hl-8">1</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">mount</span><span class="hl-1">(</span><span class="hl-2">document</span><span class="hl-1">.</span><span class="hl-7">getElementById</span><span class="hl-1">(</span><span class="hl-3">&#39;title-extra&#39;</span><span class="hl-1">), () </span><span class="hl-5">=&gt;</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">`i#(</span><span class="hl-5">${</span><span class="hl-2">$runTime</span><span class="hl-9">.</span><span class="hl-2">value</span><span class="hl-5">}</span><span class="hl-3">s)`</span><span class="hl-1">)</span><br/><span class="hl-1"> );</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
223
+ </code><button type="button">Copy</button></pre>
224
+
225
+ <p>Note how the inner mount behaves reactively as well, automatically unmounting when it's parent observer scope re-runs.</p>
226
+ </div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L580">aberdeen.ts:580</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="multimap"><span>multi<wbr/>Map</span><a href="#multimap" 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="multimap-1"><span class="tsd-kind-call-signature">multiMap</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapin">IN</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapout">OUT</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-symbol">{</span> <span class="tsd-signature-symbol">[</span><span class="tsd-kind-index-signature">key</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol">]:</span> <span class="tsd-signature-type">any</span> <span class="tsd-signature-symbol">}</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><br/>    <span class="tsd-kind-parameter">source</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapin">IN</a><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-kind-parameter">func</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapin">IN</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">index</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=&gt;</span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapout">OUT</a><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapout">OUT</a><a href="#multimap-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>When using an array as <code>source</code>.</p>
227
+ </div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="multimapin"><span class="tsd-kind-type-parameter">IN</span></span></li><li><span id="multimapout"><span class="tsd-kind-type-parameter">OUT</span> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-symbol">{</span> <span class="tsd-signature-symbol">[</span><span class="tsd-kind-index-signature">key</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol">]:</span> <span class="tsd-signature-type">any</span> <span class="tsd-signature-symbol">}</span></span></li></ul></section><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">source</span>: <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapin">IN</a><span class="tsd-signature-symbol">[]</span></span></li><li><span><span class="tsd-kind-parameter">func</span>: <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapin">IN</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">index</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=&gt;</span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapout">OUT</a></span></li></ul></div><h4 class="tsd-returns-title">Returns <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapout">OUT</a></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L583">aberdeen.ts:583</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="oneach"><span>on<wbr/>Each</span><a href="#oneach" 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="oneach-1"><span class="tsd-kind-call-signature">onEach</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#oneachk">K</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneacht">T</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><br/>    <span class="tsd-kind-parameter">target</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#oneachk">K</a><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneacht">T</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-kind-parameter">render</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneacht">T</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">key</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneachk">K</a><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-kind-parameter">makeKey</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneacht">T</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">key</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneachk">K</a><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=&gt;</span> <a href="../SortKeyType/" class="tsd-signature-type tsd-kind-type-alias">SortKeyType</a><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="#oneach-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>Reactively iterates over the items of an observable array, object, Map, or Set, optionally rendering content for each item.</p>
228
+ <p>Automatically updates when items are added, removed, or modified.</p>
229
+ </div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="oneachk"><span class="tsd-kind-type-parameter">K</span></span></li><li><span id="oneacht"><span class="tsd-kind-type-parameter">T</span></span></li></ul></section><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">Map</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#oneachk">K</a><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneacht">T</a><span class="tsd-signature-symbol">&gt;</span></span><div class="tsd-comment tsd-typography"><p>The observable array, object, Map, or Set to iterate over. Values that are <code>undefined</code> are skipped.</p>
230
+ </div><div class="tsd-comment tsd-typography"></div></li><li><span><span class="tsd-kind-parameter">render</span>: <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneacht">T</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">key</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneachk">K</a><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>A function called for each item. It receives the item's (observable) value and its index/key. For Sets, only the value is provided. Any DOM elements created within this function will be associated with the item, placed at the right spot in the DOM, and cleaned up when redrawing/removing the item.</p>
231
+ </div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag">Optional</code><span class="tsd-kind-parameter">makeKey</span>: <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneacht">T</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">key</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneachk">K</a><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=&gt;</span> <a href="../SortKeyType/" class="tsd-signature-type tsd-kind-type-alias">SortKeyType</a></span><div class="tsd-comment tsd-typography"><p>An optional function to generate a sort key for each item. This controls the order in which items are rendered in the DOM. If omitted, arrays use index order, Sets use the item value itself, and objects/Maps use their natural key order. The returned key can be a number, string, or an array of numbers/strings for composite sorting. Use <a href="#invertstring" class="tsd-kind-method">Aberdeen.invertString</a> on string keys for descending order. Returning <code>null</code> or <code>undefined</code> from <code>makeKey</code> will prevent the item from being rendered.</p>
232
+ </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 class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-iterating-an-array">Example: Iterating an array<a href="#example-iterating-an-array" 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></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$items</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-3">&#39;apple&#39;</span><span class="hl-1">, </span><span class="hl-3">&#39;banana&#39;</span><span class="hl-1">, </span><span class="hl-3">&#39;cherry&#39;</span><span class="hl-1">]);</span><br/><br/><span class="hl-4">// Basic iteration</span><br/><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">item</span><span class="hl-1">, </span><span class="hl-2">index</span><span class="hl-1">) </span><span class="hl-5">=&gt;</span><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">`li#</span><span class="hl-5">${</span><span class="hl-2">item</span><span class="hl-5">}</span><span class="hl-3"> (#</span><span class="hl-5">${</span><span class="hl-2">index</span><span class="hl-5">}</span><span class="hl-3">)`</span><span class="hl-1">));</span><br/><br/><span class="hl-4">// Add a new item - the list updates automatically</span><br/><span class="hl-7">setTimeout</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-3">&#39;durian&#39;</span><span class="hl-1">), </span><span class="hl-8">2000</span><span class="hl-1">);</span><br/><span class="hl-4">// Same for updates and deletes</span><br/><span class="hl-7">setTimeout</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-8">1</span><span class="hl-1">] = </span><span class="hl-3">&#39;berry&#39;</span><span class="hl-1">, </span><span class="hl-8">4000</span><span class="hl-1">);</span><br/><span class="hl-7">setTimeout</span><span class="hl-1">(() </span><span class="hl-5">=&gt;</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-8">2</span><span class="hl-1">], </span><span class="hl-8">6000</span><span class="hl-1">);</span>
233
+ </code><button type="button">Copy</button></pre>
234
+
235
+ </div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-iterating-an-array-with-custom-ordering">Example: Iterating an array with custom ordering<a href="#example-iterating-an-array-with-custom-ordering" 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></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$users</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-2">id:</span><span class="hl-1"> </span><span class="hl-8">3</span><span class="hl-1">, </span><span class="hl-2">group:</span><span class="hl-1"> </span><span class="hl-8">1</span><span class="hl-1">, </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">&#39;Charlie&#39;</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-2">id:</span><span class="hl-1"> </span><span class="hl-8">1</span><span class="hl-1">, </span><span class="hl-2">group:</span><span class="hl-1"> </span><span class="hl-8">1</span><span class="hl-1">, </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">&#39;Alice&#39;</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-2">id:</span><span class="hl-1"> </span><span class="hl-8">2</span><span class="hl-1">, </span><span class="hl-2">group:</span><span class="hl-1"> </span><span class="hl-8">2</span><span class="hl-1">, </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">&#39;Bob&#39;</span><span class="hl-1"> },</span><br/><span class="hl-1">]);</span><br/><br/><span class="hl-4">// Sort by name alphabetically</span><br/><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">$users</span><span class="hl-1">, (</span><span class="hl-2">$user</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">`p#</span><span class="hl-5">${</span><span class="hl-2">$user</span><span class="hl-9">.</span><span class="hl-2">name</span><span class="hl-5">}</span><span class="hl-3"> (id=</span><span class="hl-5">${</span><span class="hl-2">$user</span><span class="hl-9">.</span><span class="hl-2">id</span><span class="hl-5">}</span><span class="hl-3">)`</span><span class="hl-1">);</span><br/><span class="hl-1">}, (</span><span class="hl-2">$user</span><span class="hl-1">) </span><span class="hl-5">=&gt;</span><span class="hl-1"> [</span><span class="hl-2">$user</span><span class="hl-1">.</span><span class="hl-2">group</span><span class="hl-1">, </span><span class="hl-2">$user</span><span class="hl-1">.</span><span class="hl-2">name</span><span class="hl-1">]); </span><span class="hl-4">// Sort by group, and within each group sort by name</span>
236
+ </code><button type="button">Copy</button></pre>
237
+
238
+ </div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-iterating-an-object">Example: Iterating an object<a href="#example-iterating-an-object" 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></h4><pre><code class="javascript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$config</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">theme:</span><span class="hl-1"> </span><span class="hl-3">&#39;dark&#39;</span><span class="hl-1">, </span><span class="hl-2">fontSize:</span><span class="hl-1"> </span><span class="hl-8">14</span><span class="hl-1">, </span><span class="hl-2">showTips:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1"> });</span><br/><br/><span class="hl-4">// Display configuration options</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;dl&#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-6">A</span><span class="hl-1">.</span><span class="hl-7">onEach</span><span class="hl-1">(</span><span class="hl-2">$config</span><span class="hl-1">, (</span><span class="hl-2">value</span><span class="hl-1">, </span><span class="hl-2">key</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">if</span><span class="hl-1"> (</span><span class="hl-2">key</span><span class="hl-1"> === </span><span class="hl-3">&#39;showTips&#39;</span><span class="hl-1">) </span><span class="hl-0">return</span><span class="hl-1">; </span><span class="hl-4">// Don&#39;t render this one</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;dt#&#39;</span><span class="hl-1">+</span><span class="hl-2">key</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;dd#&#39;</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><br/><br/><span class="hl-4">// Change a value - the display updates automatically</span><br/><span class="hl-7">setTimeout</span><span class="hl-1">(() </span><span class="hl-5">=&gt;</span><span class="hl-1"> </span><span class="hl-2">$config</span><span class="hl-1">.</span><span class="hl-2">fontSize</span><span class="hl-1"> = </span><span class="hl-8">16</span><span class="hl-1">, </span><span class="hl-8">2000</span><span class="hl-1">);</span>
239
+ </code><button type="button">Copy</button></pre>
240
+
241
+ </div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-iterating-a-set">Example: Iterating a Set<a href="#example-iterating-a-set" 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></h4><pre><code class="javascript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$tags</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-5">new</span><span class="hl-1"> </span><span class="hl-7">Set</span><span class="hl-1">([</span><span class="hl-3">&#39;ui&#39;</span><span class="hl-1">, </span><span class="hl-3">&#39;fast&#39;</span><span class="hl-1">, </span><span class="hl-3">&#39;tiny&#39;</span><span class="hl-1">]));</span><br/><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;ul&#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-6">A</span><span class="hl-1">.</span><span class="hl-7">onEach</span><span class="hl-1">(</span><span class="hl-2">$tags</span><span class="hl-1">, (</span><span class="hl-2">tag</span><span class="hl-1">) </span><span class="hl-5">=&gt;</span><span class="hl-1"> { </span><span class="hl-4">// Defaults to alphabetically ordering by tag</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">`li#</span><span class="hl-5">${</span><span class="hl-2">tag</span><span class="hl-5">}</span><span class="hl-3">`</span><span class="hl-1">);</span><br/><span class="hl-1"> });</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-7">setTimeout</span><span class="hl-1">(() </span><span class="hl-5">=&gt;</span><span class="hl-1"> </span><span class="hl-2">$tags</span><span class="hl-1">.</span><span class="hl-7">add</span><span class="hl-1">(</span><span class="hl-3">&#39;reactive&#39;</span><span class="hl-1">), </span><span class="hl-8">2000</span><span class="hl-1">);</span>
242
+ </code><button type="button">Copy</button></pre>
243
+
244
+ </div><div class="tsd-tag-see"><h4 class="tsd-anchor-link" id="see-1">See<a href="#see-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></h4><p><a href="#invertstring" class="tsd-kind-method">Aberdeen.invertString</a> To easily create keys for reverse sorting.</p>
245
+ </div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L688">aberdeen.ts:688</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="partition"><span>partition</span><a href="#partition" 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="partition-1"><span class="tsd-kind-call-signature">partition</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionout_k">OUT_K</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">number</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionin_v">IN_V</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><br/>    <span class="tsd-kind-parameter">source</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionin_v">IN_V</a><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-kind-parameter">func</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionin_v">IN_V</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">key</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=&gt;</span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionout_k">OUT_K</a> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionout_k">OUT_K</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">Record</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionout_k">OUT_K</a><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">Record</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionin_v">IN_V</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">&gt;</span><a href="#partition-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>When using an object as <code>array</code>.</p>
246
+ </div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="partitionout_k"><span class="tsd-kind-type-parameter">OUT_K</span> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">number</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">symbol</span></span></li><li><span id="partitionin_v"><span class="tsd-kind-type-parameter">IN_V</span></span></li></ul></section><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">source</span>: <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionin_v">IN_V</a><span class="tsd-signature-symbol">[]</span></span></li><li><span><span class="tsd-kind-parameter">func</span>: <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionin_v">IN_V</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">key</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=&gt;</span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionout_k">OUT_K</a> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionout_k">OUT_K</a><span class="tsd-signature-symbol">[]</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Record</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionout_k">OUT_K</a><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">Record</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionin_v">IN_V</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">&gt;</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/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L710">aberdeen.ts:710</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="peek"><span>peek</span><a href="#peek" 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="peek-1"><span class="tsd-kind-call-signature">peek</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#peekt">T</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#peekk">K</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">number</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><br/>    <span class="tsd-kind-parameter">target</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#peekt">T</a><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-kind-parameter">key</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#peekk">K</a><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#peekt">T</a><span class="tsd-signature-symbol">[</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#peekk">K</a><span class="tsd-signature-symbol">]</span><a href="#peek-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>Executes a function or retrieves a value <em>without</em> creating subscriptions in the current reactive scope, and returns its result.</p>
247
+ <p>This is useful when you need to access reactive data inside a reactive scope (like A)
248
+ but do not want changes to that specific data to trigger a re-execute of the scope.</p>
249
+ <p>Note: You may also use <a href="#unproxy" class="tsd-kind-method">Aberdeen.unproxy</a> to get to the raw underlying data structure, which can be used to similar effect.</p>
250
+ </div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="peekt"><span class="tsd-kind-type-parameter">T</span> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span></span></li><li><span id="peekk"><span class="tsd-kind-type-parameter">K</span> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">number</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">symbol</span></span></li></ul></section><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>: <a class="tsd-signature-type tsd-kind-type-parameter" href="#peekt">T</a></span><div class="tsd-comment tsd-typography"><p>Either a function to execute, or an object (which may also be an Array or a Map) to index.</p>
251
+ </div><div class="tsd-comment tsd-typography"></div></li><li><span><span class="tsd-kind-parameter">key</span>: <a class="tsd-signature-type tsd-kind-type-parameter" href="#peekk">K</a></span><div class="tsd-comment tsd-typography"><p>Optional key/index to use when <code>target</code> is an object.</p>
252
+ </div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <a class="tsd-signature-type tsd-kind-type-parameter" href="#peekt">T</a><span class="tsd-signature-symbol">[</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#peekk">K</a><span class="tsd-signature-symbol">]</span></h4><p>The result of the function call, or the value at <code>target[key]</code> when <code>target</code> is an object or <code>target.get(key)</code> when it's a Map.</p>
253
+ <div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-peeking-within-observer">Example: Peeking within observer<a href="#example-peeking-within-observer" 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></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$data</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">a:</span><span class="hl-1"> </span><span class="hl-8">1</span><span class="hl-1">, </span><span class="hl-2">b:</span><span class="hl-1"> </span><span class="hl-8">2</span><span class="hl-1"> });</span><br/><span class="hl-7">A</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">// re-executes only when $data.a changes, because $data.b is peeked.</span><br/><span class="hl-1"> </span><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">b</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">peek</span><span class="hl-1">(() </span><span class="hl-5">=&gt;</span><span class="hl-1"> </span><span class="hl-2">$data</span><span class="hl-1">.</span><span class="hl-2">b</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">`A is </span><span class="hl-5">${</span><span class="hl-2">$data</span><span class="hl-9">.</span><span class="hl-2">a</span><span class="hl-5">}</span><span class="hl-3">, B was </span><span class="hl-5">${</span><span class="hl-2">b</span><span class="hl-5">}</span><span class="hl-3"> when A changed.`</span><span class="hl-1">);</span><br/><span class="hl-1">});</span><br/><span class="hl-2">$data</span><span class="hl-1">.</span><span class="hl-2">b</span><span class="hl-1"> = </span><span class="hl-8">3</span><span class="hl-1">; </span><span class="hl-4">// Does not trigger console.log</span><br/><span class="hl-2">$data</span><span class="hl-1">.</span><span class="hl-2">a</span><span class="hl-1"> = </span><span class="hl-8">2</span><span class="hl-1">; </span><span class="hl-4">// Triggers console.log (logs &quot;A is 2, B was 3 when A changed.&quot;)</span>
254
+ </code><button type="button">Copy</button></pre>
255
+
256
+ </div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L756">aberdeen.ts:756</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="proxy"><span>proxy</span><a href="#proxy" 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="proxy-1"><span class="tsd-kind-call-signature">proxy</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#proxyt">T</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">unknown</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">target</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#proxyt">T</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a href="../PromiseProxy/" class="tsd-signature-type tsd-kind-interface">PromiseProxy</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#proxyt">T</a><span class="tsd-signature-symbol">&gt;</span><a href="#proxy-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>Creates a reactive proxy around the given data.</p>
257
+ <p>Reading properties from the returned proxy within a reactive scope (like one created by
258
+ A or <a href="#derive" class="tsd-kind-method">Aberdeen.derive</a>) establishes a subscription. Modifying properties <em>through</em>
259
+ the proxy will notify subscribed scopes, causing them to re-execute.</p>
260
+ <ul>
261
+ <li>Plain objects, arrays, Maps, and Sets are wrapped in a standard JavaScript <code>Proxy</code> that intercepts
262
+ property access and mutations, but otherwise works like the underlying data.</li>
263
+ <li>Primitives (string, number, boolean, null, undefined) are wrapped in an object
264
+ <code>{ value: T }</code> which is then proxied. Access the primitive via the <code>.value</code> property.</li>
265
+ <li>Promises are represented by proxied objects <code>{ busy: boolean, value?: T, error?: any }</code>.
266
+ Initially, <code>busy</code> is <code>true</code>. When the promise resolves, <code>value</code> is set and <code>busy</code>
267
+ is set to <code>false</code>. If the promise is rejected, <code>error</code> is set and <code>busy</code> is also
268
+ set to <code>false</code>.</li>
269
+ </ul>
270
+ <p>Use <a href="#unproxy" class="tsd-kind-method">Aberdeen.unproxy</a> to get the original underlying data back.
271
+ By convention in the examples below, local variables that hold proxied values are prefixed with <code>$</code>.</p>
272
+ </div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="proxyt"><span class="tsd-kind-type-parameter">T</span> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">unknown</span></span><div class="tsd-comment tsd-typography"><p>The type of the data being proxied.</p>
273
+ </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-kind-parameter">target</span>: <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#proxyt">T</a><span class="tsd-signature-symbol">&gt;</span></span><div class="tsd-comment tsd-typography"><p>The object, array, Map, Set, or primitive value to make reactive.</p>
274
+ </div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <a href="../PromiseProxy/" class="tsd-signature-type tsd-kind-interface">PromiseProxy</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#proxyt">T</a><span class="tsd-signature-symbol">&gt;</span></h4><p>A reactive proxy wrapping the target data.</p>
275
+ <div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-object">Example: Object<a href="#example-object" 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></h4><pre><code class="javascript"><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">count:</span><span class="hl-1"> </span><span class="hl-8">0</span><span class="hl-1">, </span><span class="hl-2">message:</span><span class="hl-1"> </span><span class="hl-3">&#39;Hello&#39;</span><span class="hl-1"> });</span><br/><span class="hl-7">A</span><span class="hl-1">(() </span><span class="hl-5">=&gt;</span><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-2">$state</span><span class="hl-1">.</span><span class="hl-2">message</span><span class="hl-1">)); </span><span class="hl-4">// Subscribes to message</span><br/><span class="hl-7">setTimeout</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">message</span><span class="hl-1"> = </span><span class="hl-3">&#39;World&#39;</span><span class="hl-1">, </span><span class="hl-8">1000</span><span class="hl-1">); </span><span class="hl-4">// Triggers the observing function</span><br/><span class="hl-7">setTimeout</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">count</span><span class="hl-1">++, </span><span class="hl-8">2000</span><span class="hl-1">); </span><span class="hl-4">// Triggers nothing</span>
276
+ </code><button type="button">Copy</button></pre>
277
+
278
+ </div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-array">Example: Array<a href="#example-array" 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></h4><pre><code class="javascript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$items</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-3">&#39;a&#39;</span><span class="hl-1">, </span><span class="hl-3">&#39;b&#39;</span><span class="hl-1">]);</span><br/><span class="hl-7">A</span><span class="hl-1">(() </span><span class="hl-5">=&gt;</span><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-2">$items</span><span class="hl-1">.</span><span class="hl-2">length</span><span class="hl-1">)); </span><span class="hl-4">// Subscribes to length</span><br/><span class="hl-7">setTimeout</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-3">&#39;c&#39;</span><span class="hl-1">), </span><span class="hl-8">2000</span><span class="hl-1">); </span><span class="hl-4">// Triggers the observing function</span>
279
+ </code><button type="button">Copy</button></pre>
280
+
281
+ </div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-primitive">Example: Primitive<a href="#example-primitive" 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></h4><pre><code class="javascript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$name</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-3">&#39;Aberdeen&#39;</span><span class="hl-1">);</span><br/><span class="hl-7">A</span><span class="hl-1">(() </span><span class="hl-5">=&gt;</span><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-2">$name</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1">)); </span><span class="hl-4">// Subscribes to value</span><br/><span class="hl-7">setTimeout</span><span class="hl-1">(() </span><span class="hl-5">=&gt;</span><span class="hl-1"> </span><span class="hl-2">$name</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1"> = </span><span class="hl-3">&#39;UI&#39;</span><span class="hl-1">, </span><span class="hl-8">2000</span><span class="hl-1">); </span><span class="hl-4">// Triggers the observing function</span>
282
+ </code><button type="button">Copy</button></pre>
283
+
284
+ </div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-set">Example: Set<a href="#example-set" 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></h4><pre><code class="javascript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$tags</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-5">new</span><span class="hl-1"> </span><span class="hl-7">Set</span><span class="hl-1">([</span><span class="hl-3">&#39;ui&#39;</span><span class="hl-1">, </span><span class="hl-3">&#39;tiny&#39;</span><span class="hl-1">]));</span><br/><span class="hl-7">A</span><span class="hl-1">(() </span><span class="hl-5">=&gt;</span><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-2">$tags</span><span class="hl-1">.</span><span class="hl-7">has</span><span class="hl-1">(</span><span class="hl-3">&#39;ui&#39;</span><span class="hl-1">), </span><span class="hl-2">$tags</span><span class="hl-1">.</span><span class="hl-2">size</span><span class="hl-1">));</span><br/><span class="hl-7">setTimeout</span><span class="hl-1">(() </span><span class="hl-5">=&gt;</span><span class="hl-1"> </span><span class="hl-2">$tags</span><span class="hl-1">.</span><span class="hl-7">add</span><span class="hl-1">(</span><span class="hl-3">&#39;fast&#39;</span><span class="hl-1">), </span><span class="hl-8">1000</span><span class="hl-1">);</span>
285
+ </code><button type="button">Copy</button></pre>
286
+
287
+ </div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-class-instance">Example: Class instance<a href="#example-class-instance" 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></h4><pre><code class="typescript"><span class="hl-5">class</span><span class="hl-1"> </span><span class="hl-10">Widget</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">name</span><span class="hl-1">: </span><span class="hl-10">string</span><span class="hl-1">, </span><span class="hl-5">public</span><span class="hl-1"> </span><span class="hl-2">width</span><span class="hl-1">: </span><span class="hl-10">number</span><span class="hl-1">, </span><span class="hl-5">public</span><span class="hl-1"> </span><span class="hl-2">height</span><span class="hl-1">: </span><span class="hl-10">number</span><span class="hl-1">) {}</span><br/><span class="hl-1"> </span><span class="hl-7">grow</span><span class="hl-1">() { </span><span class="hl-5">this</span><span class="hl-1">.</span><span class="hl-2">width</span><span class="hl-1"> *= </span><span class="hl-8">2</span><span class="hl-1">; }</span><br/><span class="hl-1"> </span><span class="hl-7">toString</span><span class="hl-1">() { </span><span class="hl-0">return</span><span class="hl-1"> </span><span class="hl-3">`</span><span class="hl-5">${</span><span class="hl-5">this</span><span class="hl-9">.</span><span class="hl-2">name</span><span class="hl-5">}</span><span class="hl-3">Widget (</span><span class="hl-5">${</span><span class="hl-5">this</span><span class="hl-9">.</span><span class="hl-2">width</span><span class="hl-5">}</span><span class="hl-3">x</span><span class="hl-5">${</span><span class="hl-5">this</span><span class="hl-9">.</span><span class="hl-2">height</span><span class="hl-5">}</span><span class="hl-3">)`</span><span class="hl-1">; }</span><br/><span class="hl-1">}</span><br/><span class="hl-5">let</span><span class="hl-1"> </span><span class="hl-2">$graph</span><span class="hl-1">: </span><span class="hl-10">Widget</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-5">new</span><span class="hl-1"> </span><span class="hl-7">Widget</span><span class="hl-1">(</span><span class="hl-3">&#39;Graph&#39;</span><span class="hl-1">, </span><span class="hl-8">200</span><span class="hl-1">, </span><span class="hl-8">100</span><span class="hl-1">));</span><br/><span class="hl-7">A</span><span class="hl-1">(() </span><span class="hl-5">=&gt;</span><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">&#39;&#39;</span><span class="hl-1">+</span><span class="hl-2">$graph</span><span class="hl-1">));</span><br/><span class="hl-7">setTimeout</span><span class="hl-1">(() </span><span class="hl-5">=&gt;</span><span class="hl-1"> </span><span class="hl-2">$graph</span><span class="hl-1">.</span><span class="hl-7">grow</span><span class="hl-1">(), </span><span class="hl-8">2000</span><span class="hl-1">);</span><br/><span class="hl-7">setTimeout</span><span class="hl-1">(() </span><span class="hl-5">=&gt;</span><span class="hl-1"> </span><span class="hl-2">$graph</span><span class="hl-1">.</span><span class="hl-7">grow</span><span class="hl-1">(), </span><span class="hl-8">4000</span><span class="hl-1">);</span>
288
+ </code><button type="button">Copy</button></pre>
289
+
290
+ </div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L826">aberdeen.ts:826</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="ref"><span>ref</span><a href="#ref" 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="ref-1"><span class="tsd-kind-call-signature">ref</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#reft">T</a> <span class="tsd-signature-keyword">extends</span> <a href="../TargetType/" class="tsd-signature-type tsd-kind-type-alias">TargetType</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#refk">K</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">number</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><br/>    <span class="tsd-kind-parameter">target</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#reft">T</a><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-kind-parameter">index</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#refk">K</a><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a href="../ValueRef/" class="tsd-signature-type tsd-kind-interface">ValueRef</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#reft">T</a><span class="tsd-signature-symbol">[</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#refk">K</a><span class="tsd-signature-symbol">]</span><span class="tsd-signature-symbol">&gt;</span><a href="#ref-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>Creates a reactive reference (<code>{ value: T }</code>-like object) to a specific value
291
+ within a proxied object or array.</p>
292
+ <p>This is primarily used for the <code>bind</code> property in A to create two-way data bindings
293
+ with form elements, and for passing a reactive property to any of the A key-value pairs.</p>
294
+ <p>Reading <code>ref.value</code> accesses the property from the underlying proxy (and subscribes the current scope).
295
+ Assigning to <code>ref.value</code> updates the property in the underlying proxy (triggering reactive updates).</p>
296
+ </div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="reft"><span class="tsd-kind-type-parameter">T</span> <span class="tsd-signature-keyword">extends</span> <a href="../TargetType/" class="tsd-signature-type tsd-kind-type-alias">TargetType</a></span></li><li><span id="refk"><span class="tsd-kind-type-parameter">K</span> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">number</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">symbol</span></span></li></ul></section><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>: <a class="tsd-signature-type tsd-kind-type-parameter" href="#reft">T</a></span><div class="tsd-comment tsd-typography"><p>The reactive proxy (created by <a href="#proxy" class="tsd-kind-method">Aberdeen.proxy</a>) containing the target property.</p>
297
+ </div><div class="tsd-comment tsd-typography"></div></li><li><span><span class="tsd-kind-parameter">index</span>: <a class="tsd-signature-type tsd-kind-type-parameter" href="#refk">K</a></span><div class="tsd-comment tsd-typography"><p>The key (for objects) or index (for arrays) of the property to reference.</p>
298
+ </div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <a href="../ValueRef/" class="tsd-signature-type tsd-kind-interface">ValueRef</a><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#reft">T</a><span class="tsd-signature-symbol">[</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#refk">K</a><span class="tsd-signature-symbol">]</span><span class="tsd-signature-symbol">&gt;</span></h4><p>A reference object with a <code>value</code> property linked to the specified proxy property.</p>
299
+ <div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-6">Example<a href="#example-6" 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></h4><pre><code class="javascript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$formData</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">color:</span><span class="hl-1"> </span><span class="hl-3">&#39;orange&#39;</span><span class="hl-1">, </span><span class="hl-2">velocity:</span><span class="hl-1"> </span><span class="hl-8">42</span><span class="hl-1"> });</span><br/><br/><span class="hl-4">// Usage with `bind`</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;input type=text 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">$formData</span><span class="hl-1">, </span><span class="hl-3">&#39;color&#39;</span><span class="hl-1">));</span><br/><br/><span class="hl-4">// Usage as a dynamic property, causes a TextNode with just the name to be created and live-updated</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;p text=&quot;Selected color: &quot; text=&#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">$formData</span><span class="hl-1">, </span><span class="hl-3">&#39;color&#39;</span><span class="hl-1">), </span><span class="hl-3">&#39;color:&#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">$formData</span><span class="hl-1">, </span><span class="hl-3">&#39;color&#39;</span><span class="hl-1">));</span><br/><br/><span class="hl-4">// Changes are actually stored in $formData - this causes logs like `{color: &quot;Blue&quot;, velocity 42}`</span><br/><span class="hl-7">A</span><span class="hl-1">(() </span><span class="hl-5">=&gt;</span><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-2">$formData</span><span class="hl-1">))</span>
300
+ </code><button type="button">Copy</button></pre>
301
+
302
+ </div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L859">aberdeen.ts:859</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="runqueue"><span>run<wbr/>Queue</span><a href="#runqueue" 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="runqueue-1"><span class="tsd-kind-call-signature">runQueue</span><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><a href="#runqueue-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>Forces the immediate and synchronous execution of all pending reactive updates.</p>
303
+ <p>Normally, changes to observed data sources (like proxied objects or arrays)
304
+ are processed asynchronously in a batch after a brief timeout (0ms). This function
305
+ allows you to bypass the timeout and process the update queue immediately.</p>
306
+ <p>This can be useful in specific scenarios where you need the DOM to be updated
307
+ synchronously.</p>
308
+ <p>This function is re-entrant, meaning it is safe to call <code>runQueue</code> from within
309
+ a function that is itself being executed as part of an update cycle triggered
310
+ by a previous (or the same) <code>runQueue</code> call.</p>
311
+ </div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-7">Example<a href="#example-7" 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></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$data</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-3">&quot;before&quot;</span><span class="hl-1">);</span><br/><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;#&#39;</span><span class="hl-1">, </span><span class="hl-2">$data</span><span class="hl-1">);</span><br/><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-8">1</span><span class="hl-1">, </span><span class="hl-2">document</span><span class="hl-1">.</span><span class="hl-2">body</span><span class="hl-1">.</span><span class="hl-2">innerHTML</span><span class="hl-1">); </span><span class="hl-4">// before</span><br/><br/><span class="hl-4">// Make an update that should cause the DOM to change.</span><br/><span class="hl-2">$data</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1"> = </span><span class="hl-3">&quot;after&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-4">// Normally, the DOM update would happen after a timeout.</span><br/><span class="hl-4">// But this causes an immediate update:</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">runQueue</span><span class="hl-1">();</span><br/><br/><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-8">2</span><span class="hl-1">, </span><span class="hl-2">document</span><span class="hl-1">.</span><span class="hl-2">body</span><span class="hl-1">.</span><span class="hl-2">innerHTML</span><span class="hl-1">); </span><span class="hl-4">// after</span>
312
+ </code><button type="button">Copy</button></pre>
313
+
314
+ </div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L895">aberdeen.ts:895</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="seterrorhandler"><span>set<wbr/>Error<wbr/>Handler</span><a href="#seterrorhandler" 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="seterrorhandler-1"><span class="tsd-kind-call-signature">setErrorHandler</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">handler</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">error</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Error</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=&gt;</span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><a href="#seterrorhandler-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>Sets a custom error handler function for errors that occur asynchronously
315
+ within reactive scopes (e.g., during updates triggered by proxy changes in
316
+ <a href="#derive" class="tsd-kind-method">Aberdeen.derive</a> or A render functions).</p>
317
+ <p>The default handler logs the error to <code>console.error</code> and adds a simple
318
+ 'Error' message div to the DOM at the location where the error occurred (if possible).</p>
319
+ <p>Your handler can provide custom logging, UI feedback, or suppress the default
320
+ error message.</p>
321
+ </div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><code class="tsd-tag">Optional</code><span class="tsd-kind-parameter">handler</span>: <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">error</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Error</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=&gt;</span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">boolean</span></span><div class="tsd-comment tsd-typography"><p>A function that accepts the <code>Error</code> object.</p>
322
+ <ul>
323
+ <li>Return <code>false</code> to prevent adding an error message to the DOM.</li>
324
+ <li>Return <code>true</code> or <code>undefined</code> (or throw) to allow the error messages to be added to the DOM.</li>
325
+ </ul>
326
+ </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 class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-custom-logging-and-suppressing-default-message">Example: Custom Logging and Suppressing Default Message<a href="#example-custom-logging-and-suppressing-default-message" 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></h4><pre><code class="typescript"><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">setErrorHandler</span><span class="hl-1">(</span><span class="hl-2">error</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">warn</span><span class="hl-1">(</span><span class="hl-3">&#39;Aberdeen render error:&#39;</span><span class="hl-1">, </span><span class="hl-2">error</span><span class="hl-1">.</span><span class="hl-2">message</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-4">// Log to error reporting service</span><br/><span class="hl-1"> </span><span class="hl-4">// myErrorReporter.log(error);</span><br/><br/><span class="hl-1"> </span><span class="hl-0">try</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-4">// Attempt to show a custom message in the UI</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;div#Oops, something went wrong!&#39;</span><span class="hl-1">, </span><span class="hl-2">errorClass</span><span class="hl-1">);</span><br/><span class="hl-1"> } </span><span class="hl-0">catch</span><span class="hl-1"> (</span><span class="hl-2">e</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-4">// Ignore errors during error handling itself</span><br/><span class="hl-1"> }</span><br/><br/><span class="hl-1"> </span><span class="hl-0">return</span><span class="hl-1"> </span><span class="hl-5">false</span><span class="hl-1">; </span><span class="hl-4">// Suppress default console log and DOM error message</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-4">// Styling for our custom error message</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">errorClass</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><span class="hl-3">&#39;background-color:#e31f00 display:inline-block color:white r:3px padding: 2px 4px;&#39;</span><span class="hl-1">);</span><br/><br/><span class="hl-4">// Cause an error within a render scope.</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">&#39;div.box&#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">// Will cause our error handler to insert an error message within the box</span><br/><span class="hl-1"> </span><span class="hl-7">noSuchFunction</span><span class="hl-1">();</span><br/><span class="hl-1">})</span>
327
+ </code><button type="button">Copy</button></pre>
328
+
329
+ </div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L939">aberdeen.ts:939</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="setspacingcssvars"><span>set<wbr/>Spacing<wbr/>Css<wbr/>Vars</span><a href="#setspacingcssvars" 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="setspacingcssvars-1"><span class="tsd-kind-call-signature">setSpacingCssVars</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">base</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">unit</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-type">void</span><a href="#setspacingcssvars-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>Initializes <code>cssVars[0]</code> through <code>cssVars[12]</code> with an exponential spacing scale.</p>
330
+ <p>The scale is calculated as <code>2^(n-3) * base</code>, providing values from <code>0.25 * base</code> to <code>512 * base</code>.</p>
331
+ </div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><code class="tsd-tag">Optional</code><span class="tsd-kind-parameter">base</span>: <span class="tsd-signature-type">number</span></span><div class="tsd-comment tsd-typography"><p>The base size for the spacing scale that will apply to <code>cssVars[3]</code>. Every step up the scale will double this, while every step down will halve it. Defaults to 1.</p>
332
+ </div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag">Optional</code><span class="tsd-kind-parameter">unit</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The CSS unit to use, like 'rem', 'em', or 'px'. Defaults to 'rem'.</p>
333
+ </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 class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-8">Example<a href="#example-8" 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></h4><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/><span class="hl-4">// Use default scale (0.25rem to 512rem)</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">setSpacingCssVars</span><span class="hl-1">();</span><br/><br/><span class="hl-4">// Use custom base size</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">setSpacingCssVars</span><span class="hl-1">(</span><span class="hl-8">16</span><span class="hl-1">, </span><span class="hl-3">&#39;px&#39;</span><span class="hl-1">); </span><span class="hl-4">// 4px to 8192px</span><br/><br/><span class="hl-4">// Use em units</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">setSpacingCssVars</span><span class="hl-1">(</span><span class="hl-8">1</span><span class="hl-1">, </span><span class="hl-3">&#39;em&#39;</span><span class="hl-1">); </span><span class="hl-4">// 0.25em to 512em</span><br/><br/><span class="hl-4">// Show the last generated spacing values</span><br/><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-6">A</span><span class="hl-1">.</span><span class="hl-2">cssVars</span><span class="hl-1">, (</span><span class="hl-2">value</span><span class="hl-1">, </span><span class="hl-2">key</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">`div #</span><span class="hl-5">${</span><span class="hl-2">key</span><span class="hl-5">}</span><span class="hl-3"> → </span><span class="hl-5">${</span><span class="hl-2">value</span><span class="hl-5">}</span><span class="hl-3">`</span><span class="hl-1">)</span><br/><span class="hl-1">}, (</span><span class="hl-2">value</span><span class="hl-1">, </span><span class="hl-2">key</span><span class="hl-1">) </span><span class="hl-5">=&gt;</span><span class="hl-1"> </span><span class="hl-7">parseInt</span><span class="hl-1">(</span><span class="hl-2">key</span><span class="hl-1">)); </span><span class="hl-4">// Numeric sort</span>
334
+ </code><button type="button">Copy</button></pre>
335
+
336
+ </div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L969">aberdeen.ts:969</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="unmountall"><span>unmount<wbr/>All</span><a href="#unmountall" 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="unmountall-1"><span class="tsd-kind-call-signature">unmountAll</span><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><a href="#unmountall-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>Removes all Aberdeen-managed DOM nodes and stops all active reactive scopes
337
+ (created by <a href="#mount" class="tsd-kind-method">Aberdeen.mount</a>, <a href="#derive" class="tsd-kind-method">Aberdeen.derive</a>, A with functions, etc.).</p>
338
+ <p>This effectively cleans up the entire Aberdeen application state. Aside from in
339
+ automated tests, there should probably be little reason to call this function.</p>
340
+ </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/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L978">aberdeen.ts:978</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="unproxy"><span>unproxy</span><a href="#unproxy" 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="unproxy-1"><span class="tsd-kind-call-signature">unproxy</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#unproxyt">T</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">target</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#unproxyt">T</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#unproxyt">T</a><a href="#unproxy-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>Returns the original, underlying data target from a reactive proxy created by <a href="#proxy" class="tsd-kind-method">Aberdeen.proxy</a>.
341
+ If the input <code>target</code> is not a proxy, it is returned directly.</p>
342
+ <p>This is useful when you want to avoid triggering subscriptions during read operations or
343
+ re-executes during write operations. Using <a href="#peek" class="tsd-kind-method">Aberdeen.peek</a> is an alternative way to achieve this.</p>
344
+ </div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="unproxyt"><span class="tsd-kind-type-parameter">T</span></span><div class="tsd-comment tsd-typography"><p>The type of the target.</p>
345
+ </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-kind-parameter">target</span>: <a class="tsd-signature-type tsd-kind-type-parameter" href="#unproxyt">T</a></span><div class="tsd-comment tsd-typography"><p>A proxied object, array, or any other value.</p>
346
+ </div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <a class="tsd-signature-type tsd-kind-type-parameter" href="#unproxyt">T</a></h4><p>The underlying (unproxied) data, or the input value if it wasn't a proxy.</p>
347
+ <div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-9">Example<a href="#example-9" 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></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$user</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">name:</span><span class="hl-1"> </span><span class="hl-3">&#39;Frank&#39;</span><span class="hl-1"> });</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">rawUser</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">unproxy</span><span class="hl-1">(</span><span class="hl-2">$user</span><span class="hl-1">);</span><br/><br/><span class="hl-4">// Log reactively</span><br/><span class="hl-7">A</span><span class="hl-1">(() </span><span class="hl-5">=&gt;</span><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">&#39;proxied&#39;</span><span class="hl-1">, </span><span class="hl-2">$user</span><span class="hl-1">.</span><span class="hl-2">name</span><span class="hl-1">));</span><br/><span class="hl-4">// The following will only ever log once, as we&#39;re not subscribing to any observable</span><br/><span class="hl-7">A</span><span class="hl-1">(() </span><span class="hl-5">=&gt;</span><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">&#39;unproxied&#39;</span><span class="hl-1">, </span><span class="hl-2">rawUser</span><span class="hl-1">.</span><span class="hl-2">name</span><span class="hl-1">));</span><br/><br/><span class="hl-4">// This cause the first log to run again:</span><br/><span class="hl-7">setTimeout</span><span class="hl-1">(() </span><span class="hl-5">=&gt;</span><span class="hl-1"> </span><span class="hl-2">$user</span><span class="hl-1">.</span><span class="hl-2">name</span><span class="hl-1"> += </span><span class="hl-3">&#39;!&#39;</span><span class="hl-1">, </span><span class="hl-8">1000</span><span class="hl-1">);</span><br/><br/><span class="hl-4">// This doesn&#39;t cause any new logs:</span><br/><span class="hl-7">setTimeout</span><span class="hl-1">(() </span><span class="hl-5">=&gt;</span><span class="hl-1"> </span><span class="hl-2">rawUser</span><span class="hl-1">.</span><span class="hl-2">name</span><span class="hl-1"> += </span><span class="hl-3">&#39;?&#39;</span><span class="hl-1">, </span><span class="hl-8">2000</span><span class="hl-1">);</span><br/><br/><span class="hl-4">// Both $user and rawUser end up as `{name: &#39;Frank!?&#39;}`</span><br/><span class="hl-7">setTimeout</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">&#39;final proxied&#39;</span><span class="hl-1">, </span><span class="hl-2">$user</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">&#39;final unproxied&#39;</span><span class="hl-1">, </span><span class="hl-2">rawUser</span><span class="hl-1">)</span><br/><span class="hl-1">}, </span><span class="hl-8">3000</span><span class="hl-1">);</span>
348
+ </code><button type="button">Copy</button></pre>
349
+
350
+ </div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/bb39ef2418f1368ed94a83b45dc3201369d991ca/src/aberdeen.ts#L1014">aberdeen.ts:1014</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-Properties"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg>Properties</summary><div><a href="#cssvars"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../../assets/icons.svg#icon-1024"></use></svg><span>css<wbr/>Vars</span></a><a href="#custom_dump"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../../assets/icons.svg#icon-1024"></use></svg><span>CUSTOM_<wbr/>DUMP</span></a><a href="#no_copy"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../../assets/icons.svg#icon-1024"></use></svg><span>NO_<wbr/>COPY</span></a><a href="#opaque"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../../assets/icons.svg#icon-1024"></use></svg><span>OPAQUE</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="#clean"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>clean</span></a><a href="#clone"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>clone</span></a><a href="#copy"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>copy</span></a><a href="#count"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>count</span></a><a href="#darkmode"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>dark<wbr/>Mode</span></a><a href="#derive"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>derive</span></a><a href="#dump"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>dump</span></a><a href="#insertcss"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>insert<wbr/>Css</span></a><ul><li><ul><li><ul><li><a href="#concise-style-strings"><span>Concise <wbr/>Style <wbr/>Strings</span></a></li></ul></li></ul></li></ul><a href="#insertglobalcss"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>insert<wbr/>Global<wbr/>Css</span></a><a href="#invertstring"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>invert<wbr/>String</span></a><a href="#isempty"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>is<wbr/>Empty</span></a><a href="#map"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>map</span></a><a href="#merge"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>merge</span></a><a href="#mount"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>mount</span></a><a href="#multimap"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>multi<wbr/>Map</span></a><a href="#oneach"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>on<wbr/>Each</span></a><a href="#partition"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>partition</span></a><a href="#peek"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>peek</span></a><a href="#proxy"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>proxy</span></a><a href="#ref"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>ref</span></a><a href="#runqueue"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>run<wbr/>Queue</span></a><a href="#seterrorhandler"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>set<wbr/>Error<wbr/>Handler</span></a><a href="#setspacingcssvars"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>set<wbr/>Spacing<wbr/>Css<wbr/>Vars</span></a><a href="#unmountall"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>unmount<wbr/>All</span></a><a href="#unproxy"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>unproxy</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 - v2.0.0</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>