aberdeen 1.18.2 → 1.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (152) hide show
  1. package/README.md +9 -0
  2. package/dist/src/aberdeen.d.ts +27 -0
  3. package/{dist-docs/assets/aberdeen/aberdeen.js → dist/src/aberdeen.dev.js} +776 -15
  4. package/dist/src/aberdeen.dev.js.map +12 -0
  5. package/dist/src/aberdeen.js +59 -13
  6. package/dist/src/aberdeen.js.map +3 -3
  7. package/dist/src/devtools.d.ts +26 -0
  8. package/html-to-aberdeen +9 -5
  9. package/package.json +17 -10
  10. package/skill/A.md +127 -0
  11. package/skill/Dispatcher.md +51 -0
  12. package/skill/OPAQUE.md +15 -0
  13. package/skill/PromiseProxy.md +25 -0
  14. package/skill/Route.md +50 -0
  15. package/skill/SKILL.md +272 -156
  16. package/skill/applyCanon.md +20 -0
  17. package/skill/applyPrediction.md +15 -0
  18. package/skill/back.md +11 -0
  19. package/skill/clean.md +43 -0
  20. package/skill/clone.md +15 -0
  21. package/skill/copy.md +40 -0
  22. package/skill/count.md +32 -0
  23. package/skill/cssVars.md +15 -0
  24. package/skill/darkMode.md +26 -0
  25. package/skill/derive.md +56 -0
  26. package/skill/developer-tools.md +23 -0
  27. package/skill/disableCreateDestroy.md +11 -0
  28. package/skill/dump.md +37 -0
  29. package/skill/freeze.md +20 -0
  30. package/skill/full-example-multi-page-app.md +146 -0
  31. package/skill/go.md +25 -0
  32. package/skill/grow.md +13 -0
  33. package/skill/html-to-aberdeen.md +9 -0
  34. package/skill/insertCss.md +79 -0
  35. package/skill/insertGlobalCss.md +68 -0
  36. package/skill/interceptLinks.md +19 -0
  37. package/skill/invertString.md +32 -0
  38. package/skill/isEmpty.md +38 -0
  39. package/skill/map.md +16 -0
  40. package/skill/matchCurrent.md +27 -0
  41. package/skill/merge.md +27 -0
  42. package/skill/mount.md +48 -0
  43. package/skill/multiMap.md +15 -0
  44. package/skill/onEach.md +14 -0
  45. package/skill/partition.md +15 -0
  46. package/skill/peek.md +36 -0
  47. package/skill/persistScroll.md +13 -0
  48. package/skill/proxy.md +11 -0
  49. package/skill/push.md +13 -0
  50. package/skill/ref.md +39 -0
  51. package/skill/runQueue.md +34 -0
  52. package/skill/setErrorHandler.md +48 -0
  53. package/skill/setLog.md +9 -0
  54. package/skill/setSpacingCssVars.md +31 -0
  55. package/skill/shrink.md +13 -0
  56. package/skill/unmountAll.md +9 -0
  57. package/skill/unproxy.md +43 -0
  58. package/skill/up.md +13 -0
  59. package/src/aberdeen.ts +194 -73
  60. package/src/devtools.ts +685 -0
  61. package/dist-docs/.nojekyll +0 -1
  62. package/dist-docs/Tutorial/index.html +0 -305
  63. package/dist-docs/aberdeen/A/index.html +0 -116
  64. package/dist-docs/aberdeen/CUSTOM_DUMP/index.html +0 -7
  65. package/dist-docs/aberdeen/NO_COPY/index.html +0 -2
  66. package/dist-docs/aberdeen/OPAQUE/index.html +0 -12
  67. package/dist-docs/aberdeen/PromiseProxy/index.html +0 -8
  68. package/dist-docs/aberdeen/clean/index.html +0 -11
  69. package/dist-docs/aberdeen/clone/index.html +0 -5
  70. package/dist-docs/aberdeen/copy/index.html +0 -22
  71. package/dist-docs/aberdeen/count/index.html +0 -7
  72. package/dist-docs/aberdeen/cssVars/index.html +0 -11
  73. package/dist-docs/aberdeen/darkMode/index.html +0 -9
  74. package/dist-docs/aberdeen/default/index.html +0 -342
  75. package/dist-docs/aberdeen/derive/index.html +0 -18
  76. package/dist-docs/aberdeen/disableCreateDestroy/index.html +0 -6
  77. package/dist-docs/aberdeen/dump/index.html +0 -11
  78. package/dist-docs/aberdeen/index.html +0 -54
  79. package/dist-docs/aberdeen/insertCss/index.html +0 -30
  80. package/dist-docs/aberdeen/insertGlobalCss/index.html +0 -19
  81. package/dist-docs/aberdeen/invertString/index.html +0 -13
  82. package/dist-docs/aberdeen/isEmpty/index.html +0 -12
  83. package/dist-docs/aberdeen/map/index.html +0 -26
  84. package/dist-docs/aberdeen/merge/index.html +0 -11
  85. package/dist-docs/aberdeen/mount/index.html +0 -17
  86. package/dist-docs/aberdeen/multiMap/index.html +0 -28
  87. package/dist-docs/aberdeen/onEach/index.html +0 -19
  88. package/dist-docs/aberdeen/partition/index.html +0 -36
  89. package/dist-docs/aberdeen/peek/index.html +0 -40
  90. package/dist-docs/aberdeen/proxy/index.html +0 -35
  91. package/dist-docs/aberdeen/ref/index.html +0 -13
  92. package/dist-docs/aberdeen/runQueue/index.html +0 -13
  93. package/dist-docs/aberdeen/setErrorHandler/index.html +0 -16
  94. package/dist-docs/aberdeen/setSpacingCssVars/index.html +0 -8
  95. package/dist-docs/aberdeen/unmountAll/index.html +0 -5
  96. package/dist-docs/aberdeen/unproxy/index.html +0 -11
  97. package/dist-docs/assets/aberdeen/aberdeen.d.ts +0 -963
  98. package/dist-docs/assets/aberdeen/aberdeen.js.map +0 -11
  99. package/dist-docs/assets/aberdeen/dispatcher.d.ts +0 -57
  100. package/dist-docs/assets/aberdeen/dispatcher.js +0 -66
  101. package/dist-docs/assets/aberdeen/dispatcher.js.map +0 -10
  102. package/dist-docs/assets/aberdeen/helpers/reverseSortedSet.d.ts +0 -96
  103. package/dist-docs/assets/aberdeen/prediction.d.ts +0 -33
  104. package/dist-docs/assets/aberdeen/prediction.js +0 -112
  105. package/dist-docs/assets/aberdeen/prediction.js.map +0 -10
  106. package/dist-docs/assets/aberdeen/route.d.ts +0 -137
  107. package/dist-docs/assets/aberdeen/route.js +0 -287
  108. package/dist-docs/assets/aberdeen/route.js.map +0 -10
  109. package/dist-docs/assets/aberdeen/transitions.d.ts +0 -18
  110. package/dist-docs/assets/aberdeen/transitions.js +0 -47
  111. package/dist-docs/assets/aberdeen/transitions.js.map +0 -10
  112. package/dist-docs/assets/custom.js +0 -573
  113. package/dist-docs/assets/favicon.png +0 -0
  114. package/dist-docs/assets/hierarchy.js +0 -1
  115. package/dist-docs/assets/highlight.css +0 -134
  116. package/dist-docs/assets/icons.js +0 -18
  117. package/dist-docs/assets/icons.svg +0 -1
  118. package/dist-docs/assets/main.js +0 -60
  119. package/dist-docs/assets/navigation.js +0 -1
  120. package/dist-docs/assets/search.js +0 -1
  121. package/dist-docs/assets/style.css +0 -1640
  122. package/dist-docs/dispatcher/Dispatcher/index.html +0 -21
  123. package/dist-docs/dispatcher/MATCH_FAILED/index.html +0 -2
  124. package/dist-docs/dispatcher/MATCH_REST/index.html +0 -2
  125. package/dist-docs/dispatcher/index.html +0 -4
  126. package/dist-docs/hierarchy.html +0 -1
  127. package/dist-docs/index.html +0 -61
  128. package/dist-docs/media/CHANGELOG.md +0 -266
  129. package/dist-docs/modules.html +0 -1
  130. package/dist-docs/prediction/applyCanon/index.html +0 -13
  131. package/dist-docs/prediction/applyPrediction/index.html +0 -8
  132. package/dist-docs/prediction/index.html +0 -9
  133. package/dist-docs/route/Route/index.html +0 -23
  134. package/dist-docs/route/back/index.html +0 -4
  135. package/dist-docs/route/current/index.html +0 -2
  136. package/dist-docs/route/go/index.html +0 -14
  137. package/dist-docs/route/index.html +0 -15
  138. package/dist-docs/route/interceptLinks/index.html +0 -8
  139. package/dist-docs/route/matchCurrent/index.html +0 -10
  140. package/dist-docs/route/persistScroll/index.html +0 -6
  141. package/dist-docs/route/push/index.html +0 -6
  142. package/dist-docs/route/setLog/index.html +0 -3
  143. package/dist-docs/route/up/index.html +0 -5
  144. package/dist-docs/sitemap.xml +0 -239
  145. package/dist-docs/transitions/grow/index.html +0 -6
  146. package/dist-docs/transitions/index.html +0 -5
  147. package/dist-docs/transitions/shrink/index.html +0 -6
  148. package/skill/aberdeen.md +0 -4586
  149. package/skill/dispatcher.md +0 -129
  150. package/skill/prediction.md +0 -73
  151. package/skill/route.md +0 -322
  152. package/skill/transitions.md +0 -59
@@ -1,18 +0,0 @@
1
- <!DOCTYPE html><html class="default" lang="en" data-base="../../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>derive | Aberdeen - v1.18.2</title><link rel="icon" href="../../assets/favicon.png" type="image/png"/><meta name="description" content="Documentation for Aberdeen"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../../assets/style.css"/><link rel="stylesheet" href="../../assets/highlight.css"/><script defer src="../../assets/main.js"></script><script defer src="../../assets/custom.js"></script><script async src="../../assets/icons.js" id="tsd-icons-script"></script><script async src="../../assets/search.js" id="tsd-search-script"></script><script async src="../../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../../index.html" class="title">Aberdeen - v1.18.2</a><div id="tsd-toolbar-links"><a href="https://aberdeenjs.org/">What&#39;s this?</a><a href="https://aberdeenjs.org/Tutorial/">Tutorial</a><a href="https://github.com/vanviegen/aberdeen">GitHub</a></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../">aberdeen</a></li><li><a href="" aria-current="page">derive</a></li></ul><h1>Function derive</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="derive"><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> <span class="tsd-signature-type">ValueRef</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><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></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Creates a reactive scope that automatically re-executes the provided function
2
- whenever any proxied data (created by <a href="../proxy/" class="tsd-kind-function">proxy</a>) read during its last execution changes, storing
3
- its return value in an observable.</p>
4
- <p>Updates are batched and run asynchronously shortly after the changes occur.
5
- Use <a href="../clean/" class="tsd-kind-function">clean</a> to register cleanup logic for the scope.
6
- Use <a href="../peek/" class="tsd-kind-function">peek</a> or <a href="../unproxy/" class="tsd-kind-function">unproxy</a> within the function to read proxied data without subscribing to it.</p>
7
- </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
8
- be done using <a href="../A/" class="tsd-kind-function">A</a> within this function. Its return value will be made available as an
9
- observable returned by the <code>derive()</code> function.</p>
10
- </div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">ValueRef</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></h4><p>An observable object, with its <code>value</code> property containing whatever the last run of <code>func</code> returned.</p>
11
- <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>
12
- </code><button type="button">Copy</button></pre>
13
-
14
- <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>
15
- </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>
16
- </code><button type="button">Copy</button></pre>
17
-
18
- </div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/ae96ee5d2bf101de8d04c7efc61a03e8fe8fe6f7/src/aberdeen.ts#L3017">aberdeen.ts:3017</a></li></ul></aside></div></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav id="tsd-sidebar-links" class="tsd-navigation"><a href="https://aberdeenjs.org/" class="tsd-nav-link">What&#39;s this?</a><a href="https://aberdeenjs.org/Tutorial/" class="tsd-nav-link">Tutorial</a><a href="https://github.com/vanviegen/aberdeen" class="tsd-nav-link">GitHub</a></nav><nav class="tsd-navigation"><a href="../../modules.html">Aberdeen - v1.18.2</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>
@@ -1,6 +0,0 @@
1
- <!DOCTYPE html><html class="default" lang="en" data-base="../../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>disableCreateDestroy | Aberdeen - v1.18.2</title><link rel="icon" href="../../assets/favicon.png" type="image/png"/><meta name="description" content="Documentation for Aberdeen"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../../assets/style.css"/><link rel="stylesheet" href="../../assets/highlight.css"/><script defer src="../../assets/main.js"></script><script defer src="../../assets/custom.js"></script><script async src="../../assets/icons.js" id="tsd-icons-script"></script><script async src="../../assets/search.js" id="tsd-search-script"></script><script async src="../../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../../index.html" class="title">Aberdeen - v1.18.2</a><div id="tsd-toolbar-links"><a href="https://aberdeenjs.org/">What&#39;s this?</a><a href="https://aberdeenjs.org/Tutorial/">Tutorial</a><a href="https://github.com/vanviegen/aberdeen">GitHub</a></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../">aberdeen</a></li><li><a href="" aria-current="page">disableCreateDestroy</a></li></ul><h1>Function disableCreateDestroy</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="disablecreatedestroy"><span class="tsd-kind-call-signature">disableCreateDestroy</span><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><a href="#disablecreatedestroy" 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>Make the <code>create</code> and <code>destroy</code> special properties no-ops.</p>
2
- <p>This is useful from within automated testing environments, where the transitioning
3
- new and lingering old elements may make writing reliable selectors difficult.</p>
4
- <p>As this is only intended for testing, there's no way to re-enable the special properties
5
- once disabled.</p>
6
- </div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/ae96ee5d2bf101de8d04c7efc61a03e8fe8fe6f7/src/aberdeen.ts#L2292">aberdeen.ts:2292</a></li></ul></aside></div></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav id="tsd-sidebar-links" class="tsd-navigation"><a href="https://aberdeenjs.org/" class="tsd-nav-link">What&#39;s this?</a><a href="https://aberdeenjs.org/Tutorial/" class="tsd-nav-link">Tutorial</a><a href="https://github.com/vanviegen/aberdeen" class="tsd-nav-link">GitHub</a></nav><nav class="tsd-navigation"><a href="../../modules.html">Aberdeen - v1.18.2</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>
@@ -1,11 +0,0 @@
1
- <!DOCTYPE html><html class="default" lang="en" data-base="../../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>dump | Aberdeen - v1.18.2</title><link rel="icon" href="../../assets/favicon.png" type="image/png"/><meta name="description" content="Documentation for Aberdeen"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../../assets/style.css"/><link rel="stylesheet" href="../../assets/highlight.css"/><script defer src="../../assets/main.js"></script><script defer src="../../assets/custom.js"></script><script async src="../../assets/icons.js" id="tsd-icons-script"></script><script async src="../../assets/search.js" id="tsd-search-script"></script><script async src="../../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../../index.html" class="title">Aberdeen - v1.18.2</a><div id="tsd-toolbar-links"><a href="https://aberdeenjs.org/">What&#39;s this?</a><a href="https://aberdeenjs.org/Tutorial/">Tutorial</a><a href="https://github.com/vanviegen/aberdeen">GitHub</a></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../">aberdeen</a></li><li><a href="" aria-current="page">dump</a></li></ul><h1>Function dump</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="dump"><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" 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)
2
- into the DOM at the current <a href="../A/" class="tsd-kind-function">A</a> insertion point.</p>
3
- <p>Uses <code>&lt;ul&gt;</code> and <code>&lt;li&gt;</code> elements to display object properties and array items.
4
- Updates reactively if the dumped data changes. Primarily intended for debugging purposes.</p>
5
- </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>
6
- </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>
7
- </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>
8
- <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>
9
- </code><button type="button">Copy</button></pre>
10
-
11
- </div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/ae96ee5d2bf101de8d04c7efc61a03e8fe8fe6f7/src/aberdeen.ts#L3438">aberdeen.ts:3438</a></li></ul></aside></div></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav id="tsd-sidebar-links" class="tsd-navigation"><a href="https://aberdeenjs.org/" class="tsd-nav-link">What&#39;s this?</a><a href="https://aberdeenjs.org/Tutorial/" class="tsd-nav-link">Tutorial</a><a href="https://github.com/vanviegen/aberdeen" class="tsd-nav-link">GitHub</a></nav><nav class="tsd-navigation"><a href="../../modules.html">Aberdeen - v1.18.2</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>
@@ -1,54 +0,0 @@
1
- <!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>aberdeen | Aberdeen - v1.18.2</title><link rel="icon" href="../assets/favicon.png" type="image/png"/><meta name="description" content="Documentation for Aberdeen"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script defer src="../assets/custom.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">Aberdeen - v1.18.2</a><div id="tsd-toolbar-links"><a href="https://aberdeenjs.org/">What&#39;s this?</a><a href="https://aberdeenjs.org/Tutorial/">Tutorial</a><a href="https://github.com/vanviegen/aberdeen">GitHub</a></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="" aria-current="page">aberdeen</a></li></ul><h1>Module aberdeen</h1></div><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Interfaces"><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>Interfaces</h2></summary><dl class="tsd-member-summaries"><dt class="tsd-member-summary" id="promiseproxy"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Interface"><use href="../assets/icons.svg#icon-256"></use></svg><a href="PromiseProxy/">PromiseProxy</a><a href="#promiseproxy" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>When <code>proxy</code> is called with a Promise, the returned object has this shape.</p>
2
- </div></dd></dl></details><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Variables"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Variables</h2></summary><dl class="tsd-member-summaries"><dt class="tsd-member-summary" id="cssvars"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Variable"><use href="../assets/icons.svg#icon-32"></use></svg><a href="cssVars/">cssVars</a><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></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>A reactive object containing CSS variable definitions.</p>
3
- </div></dd><dt class="tsd-member-summary" id="custom_dump"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Variable"><use href="../assets/icons.svg#icon-32"></use></svg><a href="CUSTOM_DUMP/">CUSTOM_DUMP</a><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></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>When set on an object or its prototype chain, <a href="dump/" class="tsd-kind-function">dump</a> calls this as a render function
4
- (with the object as <code>this</code>) instead of its default recursive rendering. If the value is not
5
- a function, it's treated as a string to display.</p>
6
- </div></dd><dt class="tsd-member-summary" id="default"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Variable"><use href="../assets/icons.svg#icon-32"></use></svg><a href="default/">default</a><a href="#default" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>The main Aberdeen API. <code>A</code> is itself a callable function for building reactive DOM trees
7
- (creating elements, setting attributes, adding content). All other Aberdeen functions and
8
- values are available as properties on <code>A</code>.</p>
9
- </div></dd><dt class="tsd-member-summary" id="no_copy"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Variable"><use href="../assets/icons.svg#icon-32"></use></svg><a class="deprecated" href="NO_COPY/">NO_COPY</a><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></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>Use <a href="OPAQUE/" class="tsd-kind-variable">OPAQUE</a> instead. This is an alias kept for backward compatibility.</p>
10
- </div></dd><dt class="tsd-member-summary" id="opaque"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Variable"><use href="../assets/icons.svg#icon-32"></use></svg><a href="OPAQUE/">OPAQUE</a><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></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>A symbol that controls how Aberdeen handles an object in copy operations and proxy wrapping.</p>
11
- </div></dd></dl></details><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Functions"><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>Functions</h2></summary><dl class="tsd-member-summaries"><dt class="tsd-member-summary" id="a"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="A/">A</a><a href="#a" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>The core function for building reactive user interfaces in Aberdeen. It creates and inserts new DOM elements
12
- and sets attributes/properties/event listeners on DOM elements. It does so in a reactive way, meaning that
13
- changes will be (mostly) undone when the current <em>scope</em> is destroyed or will be re-execute.</p>
14
- </div></dd><dt class="tsd-member-summary" id="clean"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="clean/">clean</a><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></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>Registers a cleanup function to be executed just before the current reactive scope
15
- is destroyed or redraws.</p>
16
- </div></dd><dt class="tsd-member-summary" id="clone"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="clone/">clone</a><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></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>Clone an (optionally proxied) object or array.</p>
17
- </div></dd><dt class="tsd-member-summary" id="copy"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="copy/">copy</a><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></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>Recursively copies properties or array items from <code>src</code> to <code>dst</code>.
18
- It's designed to work efficiently with reactive proxies created by <a href="proxy/" class="tsd-kind-function">proxy</a>.</p>
19
- </div></dd><dt class="tsd-member-summary" id="count"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="count/">count</a><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></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>Reactively counts the number of properties in an object.</p>
20
- </div></dd><dt class="tsd-member-summary" id="darkmode"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="darkMode/">darkMode</a><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></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>Returns whether the user's browser prefers a dark color scheme.</p>
21
- </div></dd><dt class="tsd-member-summary" id="derive"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="derive/">derive</a><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></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>Creates a reactive scope that automatically re-executes the provided function
22
- whenever any proxied data (created by <a href="proxy/" class="tsd-kind-function">proxy</a>) read during its last execution changes, storing
23
- its return value in an observable.</p>
24
- </div></dd><dt class="tsd-member-summary" id="disablecreatedestroy"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="disableCreateDestroy/">disableCreateDestroy</a><a href="#disablecreatedestroy" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>Make the <code>create</code> and <code>destroy</code> special properties no-ops.</p>
25
- </div></dd><dt class="tsd-member-summary" id="dump"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="dump/">dump</a><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></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>Renders a live, recursive dump of a proxied data structure (or any value)
26
- into the DOM at the current <a href="A/" class="tsd-kind-function">A</a> insertion point.</p>
27
- </div></dd><dt class="tsd-member-summary" id="insertcss"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="insertCss/">insertCss</a><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></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>Inserts CSS rules into the document, scoping them with a unique class name.</p>
28
- </div></dd><dt class="tsd-member-summary" id="insertglobalcss"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="insertGlobalCss/">insertGlobalCss</a><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></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>Inserts CSS rules globally (unscoped).</p>
29
- </div></dd><dt class="tsd-member-summary" id="invertstring"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="invertString/">invertString</a><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></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>Creates a new string that has the opposite sort order compared to the input string.</p>
30
- </div></dd><dt class="tsd-member-summary" id="isempty"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="isEmpty/">isEmpty</a><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></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>Reactively checks if an observable array, object, Map, or Set is empty.</p>
31
- </div></dd><dt class="tsd-member-summary" id="map"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="map/">map</a><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></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>Reactively maps/filters items from a proxied source array or object to a new proxied array or object.</p>
32
- </div></dd><dt class="tsd-member-summary" id="merge"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="merge/">merge</a><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></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>Like <a href="copy/" class="tsd-kind-function">copy</a>, but uses merge semantics. Properties in <code>dst</code> not present in <code>src</code> are kept.
33
- <code>null</code>/<code>undefined</code> in <code>src</code> delete properties in <code>dst</code>.</p>
34
- </div></dd><dt class="tsd-member-summary" id="mount"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="mount/">mount</a><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></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>Attaches a reactive Aberdeen UI fragment to an existing DOM element. Without the use of
35
- this function, <a href="A/" class="tsd-kind-function">A</a> will assume <code>document.body</code> as its root.</p>
36
- </div></dd><dt class="tsd-member-summary" id="multimap"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="multiMap/">multiMap</a><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></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>Reactively maps items from a source proxy (array or object) to a target proxied object,
37
- where each source item can contribute multiple key-value pairs to the target.</p>
38
- </div></dd><dt class="tsd-member-summary" id="oneach"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="onEach/">onEach</a><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></span></dt><dd class="tsd-member-summary"><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>
39
- </div></dd><dt class="tsd-member-summary" id="partition"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="partition/">partition</a><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></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>Reactively partitions items from a source proxy (array or object) into multiple &quot;bucket&quot; proxies
40
- based on keys determined by a classifier function.</p>
41
- </div></dd><dt class="tsd-member-summary" id="peek"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="peek/">peek</a><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></span></dt><dd class="tsd-member-summary"><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>
42
- </div></dd><dt class="tsd-member-summary" id="proxy"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="proxy/">proxy</a><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></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>Creates a reactive proxy around the given data.</p>
43
- </div></dd><dt class="tsd-member-summary" id="ref"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="ref/">ref</a><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></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>Creates a reactive reference (<code>{ value: T }</code>-like object) to a specific value
44
- within a proxied object or array.</p>
45
- </div></dd><dt class="tsd-member-summary" id="runqueue"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="runQueue/">runQueue</a><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></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>Forces the immediate and synchronous execution of all pending reactive updates.</p>
46
- </div></dd><dt class="tsd-member-summary" id="seterrorhandler"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="setErrorHandler/">setErrorHandler</a><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></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>Sets a custom error handler function for errors that occur asynchronously
47
- within reactive scopes (e.g., during updates triggered by proxy changes in
48
- <a href="derive/" class="tsd-kind-function">derive</a> or <a href="A/" class="tsd-kind-function">A</a> render functions).</p>
49
- </div></dd><dt class="tsd-member-summary" id="setspacingcssvars"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="setSpacingCssVars/">setSpacingCssVars</a><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></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>Initializes <code>cssVars[0]</code> through <code>cssVars[12]</code> with an exponential spacing scale.</p>
50
- </div></dd><dt class="tsd-member-summary" id="unmountall"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="unmountAll/">unmountAll</a><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></span></dt><dd class="tsd-member-summary"><div class="tsd-comment tsd-typography"><p>Removes all Aberdeen-managed DOM nodes and stops all active reactive scopes
51
- (created by <a href="mount/" class="tsd-kind-function">mount</a>, <a href="derive/" class="tsd-kind-function">derive</a>, <a href="A/" class="tsd-kind-function">A</a> with functions, etc.).</p>
52
- </div></dd><dt class="tsd-member-summary" id="unproxy"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="unproxy/">unproxy</a><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></span></dt><dd class="tsd-member-summary"><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-function">proxy</a>.
53
- If the input <code>target</code> is not a proxy, it is returned directly.</p>
54
- </div></dd></dl></details></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Interfaces"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Interfaces</summary><div><a href="#promiseproxy"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Interface"><use href="../assets/icons.svg#icon-256"></use></svg><span>Promise<wbr/>Proxy</span></a></div></details><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Variables"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Variables</summary><div><a href="#cssvars"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Variable"><use href="../assets/icons.svg#icon-32"></use></svg><span>css<wbr/>Vars</span></a><a href="#custom_dump"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Variable"><use href="../assets/icons.svg#icon-32"></use></svg><span>CUSTOM_<wbr/>DUMP</span></a><a href="#default"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Variable"><use href="../assets/icons.svg#icon-32"></use></svg><span>default</span></a><a href="#no_copy"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Variable"><use href="../assets/icons.svg#icon-32"></use></svg><span>NO_<wbr/>COPY</span></a><a href="#opaque"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Variable"><use href="../assets/icons.svg#icon-32"></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-Functions"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Functions</summary><div><a href="#a"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>A</span></a><a href="#clean"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>clean</span></a><a href="#clone"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>clone</span></a><a href="#copy"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>copy</span></a><a href="#count"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>count</span></a><a href="#darkmode"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>dark<wbr/>Mode</span></a><a href="#derive"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>derive</span></a><a href="#disablecreatedestroy"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>disable<wbr/>Create<wbr/>Destroy</span></a><a href="#dump"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>dump</span></a><a href="#insertcss"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>insert<wbr/>Css</span></a><a href="#insertglobalcss"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></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="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>invert<wbr/>String</span></a><a href="#isempty"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>is<wbr/>Empty</span></a><a href="#map"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>map</span></a><a href="#merge"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>merge</span></a><a href="#mount"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>mount</span></a><a href="#multimap"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>multi<wbr/>Map</span></a><a href="#oneach"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>on<wbr/>Each</span></a><a href="#partition"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>partition</span></a><a href="#peek"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>peek</span></a><a href="#proxy"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>proxy</span></a><a href="#ref"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>ref</span></a><a href="#runqueue"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>run<wbr/>Queue</span></a><a href="#seterrorhandler"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></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="Function"><use href="../assets/icons.svg#icon-64"></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="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>unmount<wbr/>All</span></a><a href="#unproxy"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></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 - v1.18.2</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>
@@ -1,30 +0,0 @@
1
- <!DOCTYPE html><html class="default" lang="en" data-base="../../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>insertCss | Aberdeen - v1.18.2</title><link rel="icon" href="../../assets/favicon.png" type="image/png"/><meta name="description" content="Documentation for Aberdeen"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../../assets/style.css"/><link rel="stylesheet" href="../../assets/highlight.css"/><script defer src="../../assets/main.js"></script><script defer src="../../assets/custom.js"></script><script async src="../../assets/icons.js" id="tsd-icons-script"></script><script async src="../../assets/search.js" id="tsd-search-script"></script><script async src="../../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../../index.html" class="title">Aberdeen - v1.18.2</a><div id="tsd-toolbar-links"><a href="https://aberdeenjs.org/">What&#39;s this?</a><a href="https://aberdeenjs.org/Tutorial/">Tutorial</a><a href="https://github.com/vanviegen/aberdeen">GitHub</a></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../">aberdeen</a></li><li><a href="" aria-current="page">insertCss</a></li></ul><h1>Function insertCss</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="insertcss"><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" 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>
2
- <p>The <code>style</code> parameter can be either:</p>
3
- <ul>
4
- <li>A <strong>concise style string</strong> (for rules applying to the root class).</li>
5
- <li>An <strong>object</strong> where keys are selectors (with <code>&amp;</code> representing the root class)
6
- and values are concise style strings or nested objects. When the key does not contain <code>&amp;</code>,
7
- 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>
8
- </ul>
9
- <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 href="../A/" class="tsd-kind-function">A</a>):</p>
10
- <ul>
11
- <li><strong>Short form</strong> <code>key:value</code> (no space after colon): The value ends at the next whitespace.
12
- Example: <code>'m:$3 bg:red r:8px'</code></li>
13
- <li><strong>Long form</strong> <code>key: value;</code> (space after colon): The value continues until a semicolon.
14
- Example: <code>'box-shadow: 2px 0 6px black; transition: all 0.3s ease;'</code></li>
15
- </ul>
16
- <p>Both forms can be mixed: <code>'m:$3 box-shadow: 0 2px 4px rgba(0,0,0,0.2); bg:$cardBg'</code></p>
17
- <p>Supports the same CSS shortcuts as <a href="../A/" class="tsd-kind-function">A</a> and CSS variable references with <code>$</code> (e.g., <code>$primary</code>, <code>$3</code>).</p>
18
- </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>
19
- </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>).
20
- Use this prefix with <a href="../A/" class="tsd-kind-function">A</a> to apply the styles.</p>
21
- <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>
22
- </code><button type="button">Copy</button></pre>
23
-
24
- </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>
25
- </code><button type="button">Copy</button></pre>
26
-
27
- </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>
28
- </code><button type="button">Copy</button></pre>
29
-
30
- </div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/ae96ee5d2bf101de8d04c7efc61a03e8fe8fe6f7/src/aberdeen.ts#L2616">aberdeen.ts:2616</a></li></ul></aside></div></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#concise-style-strings"><span>Concise <wbr/>Style <wbr/>Strings</span></a></div></details></div><div class="site-menu"><nav id="tsd-sidebar-links" class="tsd-navigation"><a href="https://aberdeenjs.org/" class="tsd-nav-link">What&#39;s this?</a><a href="https://aberdeenjs.org/Tutorial/" class="tsd-nav-link">Tutorial</a><a href="https://github.com/vanviegen/aberdeen" class="tsd-nav-link">GitHub</a></nav><nav class="tsd-navigation"><a href="../../modules.html">Aberdeen - v1.18.2</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>
@@ -1,19 +0,0 @@
1
- <!DOCTYPE html><html class="default" lang="en" data-base="../../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>insertGlobalCss | Aberdeen - v1.18.2</title><link rel="icon" href="../../assets/favicon.png" type="image/png"/><meta name="description" content="Documentation for Aberdeen"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../../assets/style.css"/><link rel="stylesheet" href="../../assets/highlight.css"/><script defer src="../../assets/main.js"></script><script defer src="../../assets/custom.js"></script><script async src="../../assets/icons.js" id="tsd-icons-script"></script><script async src="../../assets/search.js" id="tsd-search-script"></script><script async src="../../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../../index.html" class="title">Aberdeen - v1.18.2</a><div id="tsd-toolbar-links"><a href="https://aberdeenjs.org/">What&#39;s this?</a><a href="https://aberdeenjs.org/Tutorial/">Tutorial</a><a href="https://github.com/vanviegen/aberdeen">GitHub</a></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../">aberdeen</a></li><li><a href="" aria-current="page">insertGlobalCss</a></li></ul><h1>Function insertGlobalCss</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="insertglobalcss"><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" 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>
2
- <p>Works exactly like <a href="../insertCss/" class="tsd-kind-function">insertCss</a>, but without prefixing selectors with a unique class name.
3
- This is useful for global resets, base styles, or styles that need to apply to the entire document.</p>
4
- <p>Accepts the same concise style string syntax and CSS shortcuts as <a href="../insertCss/" class="tsd-kind-function">insertCss</a>.
5
- See <a href="../insertCss/" class="tsd-kind-function">insertCss</a> for detailed documentation on syntax and shortcuts.</p>
6
- </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>
7
- </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>
8
- </code><button type="button">Copy</button></pre>
9
-
10
- </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>
11
- </code><button type="button">Copy</button></pre>
12
-
13
- <p>At-rules such as <code>@media</code> and <code>@keyframes</code> should use nested objects. For keyframes,
14
- the step selectors (<code>0%</code>, <code>50%</code>, <code>100%</code>, etc.) become the nested keys and each value
15
- should be a concise CSS declaration string.</p>
16
- </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>
17
- </code><button type="button">Copy</button></pre>
18
-
19
- </div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/ae96ee5d2bf101de8d04c7efc61a03e8fe8fe6f7/src/aberdeen.ts#L2768">aberdeen.ts:2768</a></li></ul></aside></div></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav id="tsd-sidebar-links" class="tsd-navigation"><a href="https://aberdeenjs.org/" class="tsd-nav-link">What&#39;s this?</a><a href="https://aberdeenjs.org/Tutorial/" class="tsd-nav-link">Tutorial</a><a href="https://github.com/vanviegen/aberdeen" class="tsd-nav-link">GitHub</a></nav><nav class="tsd-navigation"><a href="../../modules.html">Aberdeen - v1.18.2</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>
@@ -1,13 +0,0 @@
1
- <!DOCTYPE html><html class="default" lang="en" data-base="../../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>invertString | Aberdeen - v1.18.2</title><link rel="icon" href="../../assets/favicon.png" type="image/png"/><meta name="description" content="Documentation for Aberdeen"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../../assets/style.css"/><link rel="stylesheet" href="../../assets/highlight.css"/><script defer src="../../assets/main.js"></script><script defer src="../../assets/custom.js"></script><script async src="../../assets/icons.js" id="tsd-icons-script"></script><script async src="../../assets/search.js" id="tsd-search-script"></script><script async src="../../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../../index.html" class="title">Aberdeen - v1.18.2</a><div id="tsd-toolbar-links"><a href="https://aberdeenjs.org/">What&#39;s this?</a><a href="https://aberdeenjs.org/Tutorial/">Tutorial</a><a href="https://github.com/vanviegen/aberdeen">GitHub</a></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../">aberdeen</a></li><li><a href="" aria-current="page">invertString</a></li></ul><h1>Function invertString</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="invertstring"><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" 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>
2
- <p>This is achieved by flipping the bits of each character code in the input string.
3
- The resulting string is intended for use as a sort key, particularly with the
4
- <code>makeKey</code> function in <a href="../onEach/" class="tsd-kind-function">onEach</a>, to achieve a descending sort order.</p>
5
- <p><strong>Warning:</strong> The output string will likely contain non-printable characters or
6
- appear as gibberish and should not be displayed to the user.</p>
7
- </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>
8
- </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>
9
- <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="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>
10
- </code><button type="button">Copy</button></pre>
11
-
12
- </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-function">onEach</a> for usage with sorting.</p>
13
- </div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/ae96ee5d2bf101de8d04c7efc61a03e8fe8fe6f7/src/aberdeen.ts#L195">aberdeen.ts:195</a></li></ul></aside></div></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav id="tsd-sidebar-links" class="tsd-navigation"><a href="https://aberdeenjs.org/" class="tsd-nav-link">What&#39;s this?</a><a href="https://aberdeenjs.org/Tutorial/" class="tsd-nav-link">Tutorial</a><a href="https://github.com/vanviegen/aberdeen" class="tsd-nav-link">GitHub</a></nav><nav class="tsd-navigation"><a href="../../modules.html">Aberdeen - v1.18.2</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>
@@ -1,12 +0,0 @@
1
- <!DOCTYPE html><html class="default" lang="en" data-base="../../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>isEmpty | Aberdeen - v1.18.2</title><link rel="icon" href="../../assets/favicon.png" type="image/png"/><meta name="description" content="Documentation for Aberdeen"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../../assets/style.css"/><link rel="stylesheet" href="../../assets/highlight.css"/><script defer src="../../assets/main.js"></script><script defer src="../../assets/custom.js"></script><script async src="../../assets/icons.js" id="tsd-icons-script"></script><script async src="../../assets/search.js" id="tsd-search-script"></script><script async src="../../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../../index.html" class="title">Aberdeen - v1.18.2</a><div id="tsd-toolbar-links"><a href="https://aberdeenjs.org/">What&#39;s this?</a><a href="https://aberdeenjs.org/Tutorial/">Tutorial</a><a href="https://github.com/vanviegen/aberdeen">GitHub</a></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../">aberdeen</a></li><li><a href="" aria-current="page">isEmpty</a></li></ul><h1>Function isEmpty</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="isempty"><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> <span class="tsd-signature-type">TargetType</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</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></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>
2
- <p>This function not only returns the current emptiness state but also establishes
3
- a reactive dependency. If the emptiness state of the <code>proxied</code> object or array
4
- changes later (e.g., an item is added to an empty array, or the last property
5
- is deleted from an object), the scope that called <code>isEmpty</code> will be automatically
6
- scheduled for re-evaluation.</p>
7
- </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>: <span class="tsd-signature-type">TargetType</span></span><div class="tsd-comment tsd-typography"><p>The observable array, object, Map, or Set to check.</p>
8
- </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>
9
- <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="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>
10
- </code><button type="button">Copy</button></pre>
11
-
12
- </div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/ae96ee5d2bf101de8d04c7efc61a03e8fe8fe6f7/src/aberdeen.ts#L1098">aberdeen.ts:1098</a></li></ul></aside></div></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav id="tsd-sidebar-links" class="tsd-navigation"><a href="https://aberdeenjs.org/" class="tsd-nav-link">What&#39;s this?</a><a href="https://aberdeenjs.org/Tutorial/" class="tsd-nav-link">Tutorial</a><a href="https://github.com/vanviegen/aberdeen" class="tsd-nav-link">GitHub</a></nav><nav class="tsd-navigation"><a href="../../modules.html">Aberdeen - v1.18.2</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>