aberdeen 2.0.0 → 2.0.1
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.
- package/dist/src/route.d.ts +8 -8
- package/dist/src/route.js +57 -64
- package/dist/src/route.js.map +3 -3
- package/dist/src/server.d.ts +2 -2
- package/dist/src/server.js.map +1 -1
- package/dist-docs/Tutorial/index.html +2 -2
- package/dist-docs/aberdeen/Aberdeen/index.html +31 -31
- package/dist-docs/aberdeen/InitOptions/index.html +3 -3
- package/dist-docs/aberdeen/KeyToString/index.html +2 -2
- package/dist-docs/aberdeen/PromiseProxy/index.html +5 -5
- package/dist-docs/aberdeen/SortKeyType/index.html +2 -2
- package/dist-docs/aberdeen/TargetType/index.html +2 -2
- package/dist-docs/aberdeen/ValueRef/index.html +2 -2
- package/dist-docs/aberdeen/WindowLike/index.html +3 -3
- package/dist-docs/aberdeen/createA/index.html +2 -2
- package/dist-docs/aberdeen/index.html +2 -2
- package/dist-docs/assets/aberdeen/route.d.ts +8 -8
- package/dist-docs/assets/aberdeen/route.js +57 -64
- package/dist-docs/assets/aberdeen/route.js.map +3 -3
- package/dist-docs/assets/aberdeen/server.d.ts +2 -2
- package/dist-docs/assets/aberdeen/server.js.map +1 -1
- package/dist-docs/assets/navigation.js +1 -1
- package/dist-docs/assets/search.js +1 -1
- package/dist-docs/dispatcher/Dispatcher/index.html +4 -4
- package/dist-docs/dispatcher/MATCH_FAILED/index.html +2 -2
- package/dist-docs/dispatcher/MATCH_REST/index.html +2 -2
- package/dist-docs/dispatcher/index.html +2 -2
- package/dist-docs/hierarchy.html +1 -1
- package/dist-docs/index-1/index.html +2 -2
- package/dist-docs/index.html +2 -2
- package/dist-docs/media/CHANGELOG.md +1 -1
- package/dist-docs/modules.html +1 -1
- package/dist-docs/prediction/applyCanon/index.html +2 -2
- package/dist-docs/prediction/applyPrediction/index.html +2 -2
- package/dist-docs/prediction/index.html +2 -2
- package/dist-docs/route/RouteApi/index.html +14 -14
- package/dist-docs/route/{Route → RouteState}/index.html +9 -9
- package/dist-docs/route/{init → createRoute}/index.html +2 -2
- package/dist-docs/route/index.html +4 -4
- package/dist-docs/server/RenderToStringOptions/index.html +4 -4
- package/dist-docs/server/RenderToStringResult/index.html +4 -4
- package/dist-docs/server/index.html +2 -2
- package/dist-docs/server/renderToString/index.html +2 -2
- package/dist-docs/sitemap.xml +36 -36
- package/dist-docs/transitions/grow/index.html +2 -2
- package/dist-docs/transitions/index.html +2 -2
- package/dist-docs/transitions/shrink/index.html +2 -2
- package/package.json +1 -1
- package/skill/aberdeen.md +45 -45
- package/skill/dispatcher.md +6 -6
- package/skill/prediction.md +3 -3
- package/skill/route.md +90 -90
- package/skill/transitions.md +3 -3
- package/src/route.ts +295 -319
- package/src/server.ts +2 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en" data-base="../../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Aberdeen | Aberdeen - v2.0.
|
|
1
|
+
<!DOCTYPE html><html class="default" lang="en" data-base="../../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Aberdeen | Aberdeen - v2.0.1</title><link rel="icon" href="../../assets/favicon.png" type="image/png"/><meta name="description" content="Documentation for Aberdeen"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../../assets/style.css"/><link rel="stylesheet" href="../../assets/highlight.css"/><script defer src="../../assets/main.js"></script><script defer src="../../assets/custom.js"></script><script async src="../../assets/icons.js" id="tsd-icons-script"></script><script async src="../../assets/search.js" id="tsd-search-script"></script><script async src="../../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../../index.html" class="title">Aberdeen - v2.0.1</a><div id="tsd-toolbar-links"><a href="https://aberdeenjs.org/">What's this?</a><a href="https://aberdeenjs.org/Tutorial/">Tutorial</a><a href="https://github.com/vanviegen/aberdeen">GitHub</a></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../">aberdeen</a></li><li><a href="" aria-current="page">Aberdeen</a></li></ul><h1>Interface Aberdeen</h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>The Aberdeen instance returned by <a href="../createA/" class="tsd-kind-function">createA</a>: a callable element-builder with every
|
|
2
2
|
Aberdeen function attached as a method. <code>import A from 'aberdeen'</code> gives you one of these.</p>
|
|
3
3
|
</div><div class="tsd-comment tsd-typography"></div></section><div class="tsd-signature"><span class="tsd-signature-keyword">interface</span> <span class="tsd-kind-interface">Aberdeen</span> <span class="tsd-signature-symbol">{</span><br/> <a class="tsd-kind-property" href="#cssvars">cssVars</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Record</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-property" href="#custom_dump">CUSTOM_DUMP</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-property" href="#no_copy">NO_COPY</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-property" href="#opaque">OPAQUE</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-call-signature" href="#clean-1">clean</a><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">cleaner</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">()</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-call-signature" href="#clone-1">clone</a><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#clonet">T</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">src</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#clonet">T</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#clonet">T</a><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-call-signature" href="#copy-1">copy</a><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#copyt">T</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">dst</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#copyt">T</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">src</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#copyt">T</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-call-signature" href="#count-1">count</a><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">proxied</span><span class="tsd-signature-symbol">:</span> <a href="../TargetType/" class="tsd-signature-type tsd-kind-type-alias">TargetType</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a href="../ValueRef/" class="tsd-signature-type tsd-kind-interface">ValueRef</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-call-signature" href="#darkmode-1">darkMode</a><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-call-signature" href="#derive-1">derive</a><span class="tsd-signature-symbol"><</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-kind-parameter">func</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">()</span> <span class="tsd-signature-symbol">=></span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#derivet">T</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a href="../ValueRef/" class="tsd-signature-type tsd-kind-interface">ValueRef</a><span class="tsd-signature-symbol"><</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><br/> <a class="tsd-kind-call-signature" href="#dump-1">dump</a><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><span class="tsd-kind-parameter">data</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#dumpt">T</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#dumpt">T</a><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-call-signature" href="#insertcss-1">insertCss</a><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">style</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-call-signature" href="#insertglobalcss-1">insertGlobalCss</a><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">style</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-call-signature" href="#invertstring-1">invertString</a><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">input</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-call-signature" href="#isempty-1">isEmpty</a><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">proxied</span><span class="tsd-signature-symbol">:</span> <a href="../TargetType/" class="tsd-signature-type tsd-kind-type-alias">TargetType</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-call-signature" href="#map-1">map</a><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#mapk">K</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapin">IN</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapout">OUT</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">(</span><br/> <span class="tsd-kind-parameter">source</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#mapk">K</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapin">IN</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-kind-parameter">func</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapin">IN</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">key</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapk">K</a><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapout">OUT</a><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#mapk">K</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapout">OUT</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-call-signature" href="#merge-1">merge</a><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#merget">T</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">dst</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#merget">T</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#merget">T</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-call-signature" href="#mount-1">mount</a><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">parentElement</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Element</span><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">func</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">()</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-call-signature" href="#multimap-1">multiMap</a><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapin">IN</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapout">OUT</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-symbol">{</span> <span class="tsd-signature-symbol">[</span><span class="tsd-kind-index-signature">key</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol">]:</span> <span class="tsd-signature-type">any</span> <span class="tsd-signature-symbol">}</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">(</span><br/> <span class="tsd-kind-parameter">source</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapin">IN</a><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-kind-parameter">func</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapin">IN</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">index</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapout">OUT</a><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapout">OUT</a><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-call-signature" href="#oneach-1">onEach</a><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#oneachk">K</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneacht">T</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">(</span><br/> <span class="tsd-kind-parameter">target</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#oneachk">K</a><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneacht">T</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-kind-parameter">render</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneacht">T</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">key</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneachk">K</a><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-kind-parameter">makeKey</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneacht">T</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">key</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneachk">K</a><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <a href="../SortKeyType/" class="tsd-signature-type tsd-kind-type-alias">SortKeyType</a><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-call-signature" href="#partition-1">partition</a><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionout_k">OUT_K</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">number</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionin_v">IN_V</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">(</span><br/> <span class="tsd-kind-parameter">source</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionin_v">IN_V</a><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-kind-parameter">func</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionin_v">IN_V</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">key</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionout_k">OUT_K</a> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionout_k">OUT_K</a><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Record</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionout_k">OUT_K</a><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">Record</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionin_v">IN_V</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-call-signature" href="#peek-1">peek</a><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#peekt">T</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#peekk">K</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">number</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">(</span><br/> <span class="tsd-kind-parameter">target</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#peekt">T</a><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-kind-parameter">key</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#peekk">K</a><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#peekt">T</a><span class="tsd-signature-symbol">[</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#peekk">K</a><span class="tsd-signature-symbol">]</span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-call-signature" href="#proxy-1">proxy</a><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#proxyt">T</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">unknown</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">target</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#proxyt">T</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a href="../PromiseProxy/" class="tsd-signature-type tsd-kind-interface">PromiseProxy</a><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#proxyt">T</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-call-signature" href="#ref-1">ref</a><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#reft">T</a> <span class="tsd-signature-keyword">extends</span> <a href="../TargetType/" class="tsd-signature-type tsd-kind-type-alias">TargetType</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#refk">K</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">number</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">(</span><br/> <span class="tsd-kind-parameter">target</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#reft">T</a><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-kind-parameter">index</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#refk">K</a><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a href="../ValueRef/" class="tsd-signature-type tsd-kind-interface">ValueRef</a><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#reft">T</a><span class="tsd-signature-symbol">[</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#refk">K</a><span class="tsd-signature-symbol">]</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-call-signature" href="#runqueue-1">runQueue</a><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-call-signature" href="#seterrorhandler-1">setErrorHandler</a><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">handler</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">error</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Error</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-call-signature" href="#setspacingcssvars-1">setSpacingCssVars</a><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">base</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">unit</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-call-signature" href="#unmountall-1">unmountAll</a><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-call-signature" href="#unproxy-1">unproxy</a><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#unproxyt">T</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">target</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#unproxyt">T</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#unproxyt">T</a><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">...</span><span class="tsd-kind-parameter">args</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">Element</span><span class="tsd-signature-symbol">;</span><br/><span class="tsd-signature-symbol">}</span></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="aberdeen"><span class="tsd-kind-call-signature">Aberdeen</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">...</span><span class="tsd-kind-parameter">args</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">Element</span><a href="#aberdeen" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Build reactive DOM: create elements, set attributes/properties/event listeners, add content. See the tutorial for the full mini-language.</p>
|
|
4
|
-
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-signature-symbol">...</span><span class="tsd-kind-parameter">args</span>: <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">Element</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/
|
|
4
|
+
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-signature-symbol">...</span><span class="tsd-kind-parameter">args</span>: <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">Element</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L53">aberdeen.ts:53</a></li></ul></aside></div></li></ul></section><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-accordion" open><summary class="tsd-accordion-summary tsd-index-summary"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronSmall"></use></svg><h5 class="tsd-index-heading uppercase">Index</h5></summary><div class="tsd-accordion-details"><section class="tsd-index-section"><h3 class="tsd-index-heading">Properties</h3><div class="tsd-index-list"><a href="#cssvars" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../../assets/icons.svg#icon-1024"></use></svg><span>css<wbr/>Vars</span></a>
|
|
5
5
|
<a href="#custom_dump" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../../assets/icons.svg#icon-1024"></use></svg><span>CUSTOM_<wbr/>DUMP</span></a>
|
|
6
6
|
<a href="#no_copy" class="tsd-index-link deprecated"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../../assets/icons.svg#icon-1024"></use></svg><span>NO_<wbr/>COPY</span></a>
|
|
7
7
|
<a href="#opaque" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../../assets/icons.svg#icon-1024"></use></svg><span>OPAQUE</span></a>
|
|
@@ -40,14 +40,14 @@ containing the <code>:root</code> CSS custom property declarations. The style ta
|
|
|
40
40
|
</div><div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example">Example<a href="#example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="javascript"><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-2">A</span><span class="hl-1"> </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'aberdeen'</span><span class="hl-1">;</span><br/><br/><span class="hl-4">// Optionally initialize spacing scale</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">setSpacingCssVars</span><span class="hl-1">(); </span><span class="hl-4">// Uses defaults: base=1, unit='rem'</span><br/><br/><span class="hl-4">// Define custom colors - style tag is automatically created</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-2">cssVars</span><span class="hl-1">.</span><span class="hl-2">primary</span><span class="hl-1"> = </span><span class="hl-3">'#3b82f6'</span><span class="hl-1">;</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-2">cssVars</span><span class="hl-1">.</span><span class="hl-2">danger</span><span class="hl-1"> = </span><span class="hl-3">'#ef4444'</span><span class="hl-1">;</span><br/><br/><span class="hl-4">// Use in elements with the $ prefix</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'button bg:$primary fg:white #I'</span><span class="hl-2">m</span><span class="hl-1"> </span><span class="hl-2">a</span><span class="hl-1"> </span><span class="hl-2">primary</span><span class="hl-1"> </span><span class="hl-2">button</span><span class="hl-3">')</span><span class="hl-15">;</span><br/><br/><span class="hl-4">// Use spacing (if setSpacingCssVars() was called)</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'hr mt:$3'</span><span class="hl-1">); </span><span class="hl-4">// Sets margin-top to var(--m3)</span>
|
|
41
41
|
</code><button type="button">Copy</button></pre>
|
|
42
42
|
|
|
43
|
-
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/
|
|
43
|
+
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L192">aberdeen.ts:192</a></li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="custom_dump"><span>CUSTOM_<wbr/>DUMP</span><a href="#custom_dump" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">CUSTOM_DUMP</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span></div><div class="tsd-comment tsd-typography"><p>When set on an object or its prototype chain, <a href="#dump" class="tsd-kind-method">Aberdeen.dump</a> calls this as a render function
|
|
44
44
|
(with the object as <code>this</code>) instead of its default recursive rendering. If the value is not
|
|
45
45
|
a function, it's treated as a string to display.</p>
|
|
46
46
|
</div><div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-1">Example<a href="#example-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-5">class</span><span class="hl-1"> </span><span class="hl-10">Color</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-5">constructor</span><span class="hl-1">(</span><span class="hl-5">public</span><span class="hl-1"> </span><span class="hl-2">r</span><span class="hl-1">: </span><span class="hl-10">number</span><span class="hl-1">, </span><span class="hl-5">public</span><span class="hl-1"> </span><span class="hl-2">g</span><span class="hl-1">: </span><span class="hl-10">number</span><span class="hl-1">, </span><span class="hl-5">public</span><span class="hl-1"> </span><span class="hl-2">b</span><span class="hl-1">: </span><span class="hl-10">number</span><span class="hl-1">) {}</span><br/><span class="hl-1"> [</span><span class="hl-6">CUSTOM_DUMP</span><span class="hl-1">]() { </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">`#rgb(</span><span class="hl-5">${</span><span class="hl-5">this</span><span class="hl-9">.</span><span class="hl-2">r</span><span class="hl-5">}</span><span class="hl-3">, </span><span class="hl-5">${</span><span class="hl-5">this</span><span class="hl-9">.</span><span class="hl-2">g</span><span class="hl-5">}</span><span class="hl-3">, </span><span class="hl-5">${</span><span class="hl-5">this</span><span class="hl-9">.</span><span class="hl-2">b</span><span class="hl-5">}</span><span class="hl-3">)`</span><span class="hl-1">); }</span><br/><span class="hl-1">}</span>
|
|
47
47
|
</code><button type="button">Copy</button></pre>
|
|
48
48
|
|
|
49
|
-
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/
|
|
50
|
-
</div><div class="tsd-comment tsd-typography"><div class="tsd-tag-deprecated"><h4 class="tsd-anchor-link" id="deprecated">Deprecated<a href="#deprecated" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4></div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/
|
|
49
|
+
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L207">aberdeen.ts:207</a></li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="no_copy"><span class="deprecated">NO_<wbr/>COPY</span><a href="#no_copy" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">NO_COPY</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span></div><div class="tsd-comment tsd-typography"><p>Use <a href="#opaque" class="tsd-kind-property">Aberdeen.OPAQUE</a> instead. This is an alias kept for backward compatibility.</p>
|
|
50
|
+
</div><div class="tsd-comment tsd-typography"><div class="tsd-tag-deprecated"><h4 class="tsd-anchor-link" id="deprecated">Deprecated<a href="#deprecated" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4></div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L618">aberdeen.ts:618</a></li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="opaque"><span>OPAQUE</span><a href="#opaque" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">OPAQUE</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span></div><div class="tsd-comment tsd-typography"><p>A symbol that controls how Aberdeen handles an object in copy operations and proxy wrapping.</p>
|
|
51
51
|
<p>The <strong>presence</strong> of this symbol (regardless of its value) prevents deep-copying: the object is
|
|
52
52
|
stored and passed by reference in <a href="#clone" class="tsd-kind-method">Aberdeen.clone</a> and <a href="#copy" class="tsd-kind-method">Aberdeen.copy</a>.</p>
|
|
53
53
|
<p>The <strong>value</strong> of the symbol controls proxy wrapping when the object is read from reactive state:</p>
|
|
@@ -58,7 +58,7 @@ with internal slots, Promises) or that must be invisible to Aberdeen's reactive
|
|
|
58
58
|
<li><strong>Falsy</strong> (e.g. <code>false</code>): the object is still wrapped in a proxy, so reads on its properties
|
|
59
59
|
create reactive dependencies as normal — only deep-copying is suppressed.</li>
|
|
60
60
|
</ul>
|
|
61
|
-
</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/
|
|
61
|
+
</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L611">aberdeen.ts:611</a></li></ul></aside></section></section></details><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Methods"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg><h2>Methods</h2></summary><section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="clean"><span>clean</span><a href="#clean" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="clean-1"><span class="tsd-kind-call-signature">clean</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">cleaner</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">()</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><a href="#clean-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Registers a cleanup function to be executed just before the current reactive scope
|
|
62
62
|
is destroyed or redraws.</p>
|
|
63
63
|
<p>This is useful for releasing resources, removing manual event listeners, or cleaning up
|
|
64
64
|
side effects associated with the scope. Cleaners are run in reverse order of registration.</p>
|
|
@@ -68,11 +68,11 @@ and internally by constructs like <a href="#oneach" class="tsd-kind-method">Aber
|
|
|
68
68
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-maintaing-a-sum-for-a-changing-array">Example: Maintaing a sum for a changing array<a href="#example-maintaing-a-sum-for-a-changing-array" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$numbers</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">proxy</span><span class="hl-1">([</span><span class="hl-8">3</span><span class="hl-1">, </span><span class="hl-8">5</span><span class="hl-1">, </span><span class="hl-8">10</span><span class="hl-1">]);</span><br/><span class="hl-5">let</span><span class="hl-1"> </span><span class="hl-2">$sum</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">proxy</span><span class="hl-1">(</span><span class="hl-8">0</span><span class="hl-1">);</span><br/><br/><span class="hl-4">// Show the array items and maintain the sum</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">onEach</span><span class="hl-1">(</span><span class="hl-2">$numbers</span><span class="hl-1">, (</span><span class="hl-2">item</span><span class="hl-1">, </span><span class="hl-2">index</span><span class="hl-1">) </span><span class="hl-5">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">`code#</span><span class="hl-5">${</span><span class="hl-2">index</span><span class="hl-5">}</span><span class="hl-3">→</span><span class="hl-5">${</span><span class="hl-2">item</span><span class="hl-5">}</span><span class="hl-3">`</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-4">// We'll update $sum.value using peek, as += first does a read, but</span><br/><span class="hl-1"> </span><span class="hl-4">// we don't want to subscribe.</span><br/><span class="hl-1"> </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">peek</span><span class="hl-1">(() </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">$sum</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1"> += </span><span class="hl-2">item</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-4">// Clean gets called before each rerun for a certain item index</span><br/><span class="hl-1"> </span><span class="hl-4">// No need for peek here, as the clean code doesn't run in an</span><br/><span class="hl-1"> </span><span class="hl-4">// observer scope.</span><br/><span class="hl-1"> </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">clean</span><span class="hl-1">(() </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">$sum</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1"> -= </span><span class="hl-2">item</span><span class="hl-1">);</span><br/><span class="hl-1">})</span><br/><br/><span class="hl-4">// Show the sum</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'h1 text='</span><span class="hl-1">, </span><span class="hl-2">$sum</span><span class="hl-1">);</span><br/><br/><span class="hl-4">// Make random changes to the array</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-7">rnd</span><span class="hl-1"> = () </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-8">0</span><span class="hl-1">|(</span><span class="hl-2">Math</span><span class="hl-1">.</span><span class="hl-7">random</span><span class="hl-1">()*</span><span class="hl-8">20</span><span class="hl-1">);</span><br/><span class="hl-7">setInterval</span><span class="hl-1">(() </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">$numbers</span><span class="hl-1">[</span><span class="hl-7">rnd</span><span class="hl-1">()] = </span><span class="hl-7">rnd</span><span class="hl-1">(), </span><span class="hl-8">1000</span><span class="hl-1">);</span>
|
|
69
69
|
</code><button type="button">Copy</button></pre>
|
|
70
70
|
|
|
71
|
-
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/
|
|
71
|
+
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L92">aberdeen.ts:92</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="clone"><span>clone</span><a href="#clone" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="clone-1"><span class="tsd-kind-call-signature">clone</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#clonet">T</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">src</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#clonet">T</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#clonet">T</a><a href="#clone-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Clone an (optionally proxied) object or array.</p>
|
|
72
72
|
</div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="clonet"><span class="tsd-kind-type-parameter">T</span> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span></span><div class="tsd-comment tsd-typography"><p>The type of the objects being copied.</p>
|
|
73
73
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></section><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">src</span>: <a class="tsd-signature-type tsd-kind-type-parameter" href="#clonet">T</a></span><div class="tsd-comment tsd-typography"><p>The object or array to clone. If it is proxied, <code>clone</code> will subscribe to any changes to the (nested) data structure.</p>
|
|
74
74
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <a class="tsd-signature-type tsd-kind-type-parameter" href="#clonet">T</a></h4><p>A new unproxied array or object (of the same type as <code>src</code>), containing a deep copy of <code>src</code>.</p>
|
|
75
|
-
<div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/
|
|
75
|
+
<div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L101">aberdeen.ts:101</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="copy"><span>copy</span><a href="#copy" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="copy-1"><span class="tsd-kind-call-signature">copy</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#copyt">T</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">dst</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#copyt">T</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">src</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#copyt">T</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><a href="#copy-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Recursively copies properties or array items from <code>src</code> to <code>dst</code>.
|
|
76
76
|
It's designed to work efficiently with reactive proxies created by <a href="#proxy" class="tsd-kind-method">Aberdeen.proxy</a>.</p>
|
|
77
77
|
<ul>
|
|
78
78
|
<li><strong>Minimizes Updates:</strong> When copying between objects/arrays (proxied or not), if a nested object
|
|
@@ -90,13 +90,13 @@ to speed things up (compared to a non-Aberdeen-aware deep copy).</li>
|
|
|
90
90
|
</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-basic-copy">Example: Basic Copy<a href="#example-basic-copy" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$source</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">proxy</span><span class="hl-1">({ </span><span class="hl-2">a:</span><span class="hl-1"> </span><span class="hl-8">1</span><span class="hl-1">, </span><span class="hl-2">b:</span><span class="hl-1"> { </span><span class="hl-2">c:</span><span class="hl-1"> </span><span class="hl-8">2</span><span class="hl-1"> } });</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$dest</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">proxy</span><span class="hl-1">({ </span><span class="hl-2">b:</span><span class="hl-1"> { </span><span class="hl-2">d:</span><span class="hl-1"> </span><span class="hl-8">3</span><span class="hl-1"> } });</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">copy</span><span class="hl-1">(</span><span class="hl-2">$dest</span><span class="hl-1">, </span><span class="hl-2">$source</span><span class="hl-1">);</span><br/><span class="hl-2">console</span><span class="hl-1">.</span><span class="hl-7">log</span><span class="hl-1">(</span><span class="hl-2">$dest</span><span class="hl-1">); </span><span class="hl-4">// proxy({ a: 1, b: { c: 2 } })</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">copy</span><span class="hl-1">(</span><span class="hl-2">$dest</span><span class="hl-1">, </span><span class="hl-3">'b'</span><span class="hl-1">, { </span><span class="hl-2">e:</span><span class="hl-1"> </span><span class="hl-8">4</span><span class="hl-1"> });</span><br/><span class="hl-2">console</span><span class="hl-1">.</span><span class="hl-7">log</span><span class="hl-1">(</span><span class="hl-2">$dest</span><span class="hl-1">); </span><span class="hl-4">// proxy({ a: 1, b: { e: 4 } })</span>
|
|
91
91
|
</code><button type="button">Copy</button></pre>
|
|
92
92
|
|
|
93
|
-
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/
|
|
93
|
+
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L130">aberdeen.ts:130</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="count"><span>count</span><a href="#count" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="count-1"><span class="tsd-kind-call-signature">count</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">proxied</span><span class="tsd-signature-symbol">:</span> <a href="../TargetType/" class="tsd-signature-type tsd-kind-type-alias">TargetType</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a href="../ValueRef/" class="tsd-signature-type tsd-kind-interface">ValueRef</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">></span><a href="#count-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Reactively counts the number of properties in an object.</p>
|
|
94
94
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">proxied</span>: <a href="../TargetType/" class="tsd-signature-type tsd-kind-type-alias">TargetType</a></span><div class="tsd-comment tsd-typography"><p>The observable object to count. In case an <code>array</code>, <code>Map</code>, or <code>Set</code> is passed in, a <a href="#ref" class="tsd-kind-method">Aberdeen.ref</a> to its <code>.length</code> or <code>.size</code> will be returned.</p>
|
|
95
95
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <a href="../ValueRef/" class="tsd-signature-type tsd-kind-interface">ValueRef</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">></span></h4><p>an observable object for which the <code>value</code> property reflects the number of properties in <code>proxied</code> with a value other than <code>undefined</code>, or the collection size for arrays, Maps, and Sets.</p>
|
|
96
96
|
<div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-2">Example<a href="#example-2" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$items</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">proxy</span><span class="hl-1">({</span><span class="hl-2">x:</span><span class="hl-1"> </span><span class="hl-8">3</span><span class="hl-1">, </span><span class="hl-2">y:</span><span class="hl-1"> </span><span class="hl-8">7</span><span class="hl-1">} </span><span class="hl-0">as</span><span class="hl-1"> </span><span class="hl-10">any</span><span class="hl-1">);</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$count</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">count</span><span class="hl-1">(</span><span class="hl-2">$items</span><span class="hl-1">);</span><br/><br/><span class="hl-4">// Create a DOM text node for the count:</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'div text='</span><span class="hl-1">, </span><span class="hl-2">$count</span><span class="hl-1">);</span><br/><span class="hl-4">// <div>2</div></span><br/><br/><span class="hl-4">// Or we can use it in an {@link Aberdeen.derive} function:</span><br/><span class="hl-7">A</span><span class="hl-1">(() </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">console</span><span class="hl-1">.</span><span class="hl-7">log</span><span class="hl-1">(</span><span class="hl-3">"The count is now"</span><span class="hl-1">, </span><span class="hl-2">$count</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1">));</span><br/><span class="hl-4">// The count is now 2</span><br/><br/><span class="hl-4">// Adding/removing items will update the count</span><br/><span class="hl-2">$items</span><span class="hl-1">.</span><span class="hl-2">z</span><span class="hl-1"> = </span><span class="hl-8">12</span><span class="hl-1">;</span><br/><span class="hl-4">// Asynchronously, after 0ms:</span><br/><span class="hl-4">// <div>3</div></span><br/><span class="hl-4">// The count is now 3</span>
|
|
97
97
|
</code><button type="button">Copy</button></pre>
|
|
98
98
|
|
|
99
|
-
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/
|
|
99
|
+
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L159">aberdeen.ts:159</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="darkmode"><span>dark<wbr/>Mode</span><a href="#darkmode" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="darkmode-1"><span class="tsd-kind-call-signature">darkMode</span><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><a href="#darkmode-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Returns whether the user's browser prefers a dark color scheme.</p>
|
|
100
100
|
<p>This function is reactive - scopes that call it will re-execute when the
|
|
101
101
|
browser's color scheme preference changes (via the <code>prefers-color-scheme</code> media query).</p>
|
|
102
102
|
<p>Use this in combination with A and <a href="#cssvars" class="tsd-kind-property">Aberdeen.cssVars</a> to implement theme switching:</p>
|
|
@@ -104,7 +104,7 @@ browser's color scheme preference changes (via the <code>prefers-color-scheme</c
|
|
|
104
104
|
<div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-3">Example<a href="#example-3" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="javascript"><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-2">A</span><span class="hl-1"> </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'aberdeen'</span><span class="hl-1">;</span><br/><br/><span class="hl-4">// Reactively set colors based on browser preference</span><br/><span class="hl-7">A</span><span class="hl-1">(() </span><span class="hl-5">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-2">cssVars</span><span class="hl-1">.</span><span class="hl-2">bg</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">darkMode</span><span class="hl-1">() ? </span><span class="hl-3">'#1a1a1a'</span><span class="hl-1"> : </span><span class="hl-3">'#ffffff'</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-2">cssVars</span><span class="hl-1">.</span><span class="hl-2">fg</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">darkMode</span><span class="hl-1">() ? </span><span class="hl-3">'#e5e5e5'</span><span class="hl-1"> : </span><span class="hl-3">'#000000'</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">'div bg:$bg fg:$fg p:1rem #Colors change based on system dark mode preference'</span><span class="hl-1">);</span>
|
|
105
105
|
</code><button type="button">Copy</button></pre>
|
|
106
106
|
|
|
107
|
-
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/
|
|
107
|
+
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L232">aberdeen.ts:232</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="derive"><span>derive</span><a href="#derive" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="derive-1"><span class="tsd-kind-call-signature">derive</span><span class="tsd-signature-symbol"><</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-kind-parameter">func</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">()</span> <span class="tsd-signature-symbol">=></span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#derivet">T</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a href="../ValueRef/" class="tsd-signature-type tsd-kind-interface">ValueRef</a><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#derivet">T</a><span class="tsd-signature-symbol">></span><a href="#derive-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Creates a reactive scope that automatically re-executes the provided function
|
|
108
108
|
whenever any proxied data (created by <a href="#proxy" class="tsd-kind-method">Aberdeen.proxy</a>) read during its last execution changes, storing
|
|
109
109
|
its return value in an observable.</p>
|
|
110
110
|
<p>Updates are batched and run asynchronously shortly after the changes occur.
|
|
@@ -121,7 +121,7 @@ observable returned by the <code>derive()</code> function.</p>
|
|
|
121
121
|
</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-observation-with-return-value">Example: Observation with return value<a href="#example-observation-with-return-value" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$counter</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">proxy</span><span class="hl-1">(</span><span class="hl-8">0</span><span class="hl-1">);</span><br/><span class="hl-7">setInterval</span><span class="hl-1">(() </span><span class="hl-5">=></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">=></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">'h3'</span><span class="hl-1">, () </span><span class="hl-5">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">`#counter=</span><span class="hl-5">${</span><span class="hl-2">$counter</span><span class="hl-9">.</span><span class="hl-2">value</span><span class="hl-5">}</span><span class="hl-3"> double=</span><span class="hl-5">${</span><span class="hl-2">$double</span><span class="hl-9">.</span><span class="hl-2">value</span><span class="hl-5">}</span><span class="hl-3">`</span><span class="hl-1">);</span><br/><span class="hl-1">})</span>
|
|
122
122
|
</code><button type="button">Copy</button></pre>
|
|
123
123
|
|
|
124
|
-
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/
|
|
124
|
+
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L282">aberdeen.ts:282</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="dump"><span>dump</span><a href="#dump" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="dump-1"><span class="tsd-kind-call-signature">dump</span><span class="tsd-signature-symbol"><</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><span class="tsd-kind-parameter">data</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#dumpt">T</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#dumpt">T</a><a href="#dump-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Renders a live, recursive dump of a proxied data structure (or any value)
|
|
125
125
|
into the DOM at the current A insertion point.</p>
|
|
126
126
|
<p>Uses <code><ul></code> and <code><li></code> elements to display object properties and array items.
|
|
127
127
|
Updates reactively if the dumped data changes. Primarily intended for debugging purposes.</p>
|
|
@@ -131,7 +131,7 @@ Updates reactively if the dumped data changes. Primarily intended for debugging
|
|
|
131
131
|
<div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-dumping-reactive-state">Example: Dumping reactive state<a href="#example-dumping-reactive-state" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-2">A</span><span class="hl-1"> </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'aberdeen'</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">'Frank'</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">'a'</span><span class="hl-1">, </span><span class="hl-3">'b'</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">'h2#Live State Dump'</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">=></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">'c'</span><span class="hl-1">); }, </span><span class="hl-8">2000</span><span class="hl-1">);</span>
|
|
132
132
|
</code><button type="button">Copy</button></pre>
|
|
133
133
|
|
|
134
|
-
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/
|
|
134
|
+
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L311">aberdeen.ts:311</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="insertcss"><span>insert<wbr/>Css</span><a href="#insertcss" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="insertcss-1"><span class="tsd-kind-call-signature">insertCss</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">style</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><a href="#insertcss-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Inserts CSS rules into the document, scoping them with a unique class name.</p>
|
|
135
135
|
<p>The <code>style</code> parameter can be either:</p>
|
|
136
136
|
<ul>
|
|
137
137
|
<li>A <strong>concise style string</strong> (for rules applying to the root class).</li>
|
|
@@ -160,7 +160,7 @@ Use this prefix with A to apply the styles.</p>
|
|
|
160
160
|
</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-complex-css-values">Example: Complex CSS Values<a href="#example-complex-css-values" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">badge</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">insertCss</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-3">'&::before'</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">'content: "★"; color:gold mr:$1'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">'&'</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">'position:relative box-shadow: 0 2px 8px rgba(0,0,0,0.15);'</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">' span#Product Name'</span><span class="hl-1">);</span>
|
|
161
161
|
</code><button type="button">Copy</button></pre>
|
|
162
162
|
|
|
163
|
-
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/
|
|
163
|
+
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L381">aberdeen.ts:381</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="insertglobalcss"><span>insert<wbr/>Global<wbr/>Css</span><a href="#insertglobalcss" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="insertglobalcss-1"><span class="tsd-kind-call-signature">insertGlobalCss</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">style</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><a href="#insertglobalcss-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Inserts CSS rules globally (unscoped).</p>
|
|
164
164
|
<p>Works exactly like <a href="#insertcss" class="tsd-kind-method">Aberdeen.insertCss</a>, but without prefixing selectors with a unique class name.
|
|
165
165
|
This is useful for global resets, base styles, or styles that need to apply to the entire document.</p>
|
|
166
166
|
<p>Accepts the same concise style string syntax and CSS shortcuts as <a href="#insertcss" class="tsd-kind-method">Aberdeen.insertCss</a>.
|
|
@@ -178,7 +178,7 @@ should be a concise CSS declaration string.</p>
|
|
|
178
178
|
</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-animation-keyframes">Example: Animation Keyframes<a href="#example-animation-keyframes" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">insertGlobalCss</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-3">"@keyframes connection-pulse"</span><span class="hl-2">:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-3">"0%"</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">"box-shadow: inset 0 0 0 0 rgba(255, 70, 70, 0.4);"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">"50%"</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">"box-shadow: inset 0 0 0 6px rgba(255, 70, 70, 0.08);"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">"100%"</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">"box-shadow: inset 0 0 0 0 rgba(255, 70, 70, 0.4);"</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
|
179
179
|
</code><button type="button">Copy</button></pre>
|
|
180
180
|
|
|
181
|
-
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/
|
|
181
|
+
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L441">aberdeen.ts:441</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="invertstring"><span>invert<wbr/>String</span><a href="#invertstring" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="invertstring-1"><span class="tsd-kind-call-signature">invertString</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">input</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><a href="#invertstring-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Creates a new string that has the opposite sort order compared to the input string.</p>
|
|
182
182
|
<p>This is achieved by flipping the bits of each character code in the input string.
|
|
183
183
|
The resulting string is intended for use as a sort key, particularly with the
|
|
184
184
|
<code>makeKey</code> function in <a href="#oneach" class="tsd-kind-method">Aberdeen.onEach</a>, to achieve a descending sort order.</p>
|
|
@@ -190,7 +190,7 @@ appear as gibberish and should not be displayed to the user.</p>
|
|
|
190
190
|
</code><button type="button">Copy</button></pre>
|
|
191
191
|
|
|
192
192
|
</div><div class="tsd-tag-see"><h4 class="tsd-anchor-link" id="see">See<a href="#see" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><p><a href="#oneach" class="tsd-kind-method">Aberdeen.onEach</a> for usage with sorting.</p>
|
|
193
|
-
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/
|
|
193
|
+
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L470">aberdeen.ts:470</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="isempty"><span>is<wbr/>Empty</span><a href="#isempty" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="isempty-1"><span class="tsd-kind-call-signature">isEmpty</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">proxied</span><span class="tsd-signature-symbol">:</span> <a href="../TargetType/" class="tsd-signature-type tsd-kind-type-alias">TargetType</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><a href="#isempty-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Reactively checks if an observable array, object, Map, or Set is empty.</p>
|
|
194
194
|
<p>This function not only returns the current emptiness state but also establishes
|
|
195
195
|
a reactive dependency. If the emptiness state of the <code>proxied</code> object or array
|
|
196
196
|
changes later (e.g., an item is added to an empty array, or the last property
|
|
@@ -201,13 +201,13 @@ scheduled for re-evaluation.</p>
|
|
|
201
201
|
<div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-5">Example<a href="#example-5" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$items</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">proxy</span><span class="hl-1">([]);</span><br/><br/><span class="hl-4">// Reactively display a message if the items array is empty</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'div'</span><span class="hl-1">, () </span><span class="hl-5">=></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">'p i#No items yet!'</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">=></span><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-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 "No items yet!" message</span><br/><span class="hl-7">setInterval</span><span class="hl-1">(() </span><span class="hl-5">=></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">()></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">'Item'</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-0">else</span><span class="hl-1"> </span><span class="hl-2">$items</span><span class="hl-1">.</span><span class="hl-2">length</span><span class="hl-1"> = </span><span class="hl-8">0</span><span class="hl-1">;</span><br/><span class="hl-1">}, </span><span class="hl-8">1000</span><span class="hl-1">)</span>
|
|
202
202
|
</code><button type="button">Copy</button></pre>
|
|
203
203
|
|
|
204
|
-
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/
|
|
205
|
-
</div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="mapk"><span class="tsd-kind-type-parameter">K</span></span></li><li><span id="mapin"><span class="tsd-kind-type-parameter">IN</span></span></li><li><span id="mapout"><span class="tsd-kind-type-parameter">OUT</span></span></li></ul></section><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">source</span>: <span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#mapk">K</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapin">IN</a><span class="tsd-signature-symbol">></span></span></li><li><span><span class="tsd-kind-parameter">func</span>: <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapin">IN</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">key</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapk">K</a><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapout">OUT</a></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#mapk">K</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapout">OUT</a><span class="tsd-signature-symbol">></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/
|
|
204
|
+
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L504">aberdeen.ts:504</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="map"><span>map</span><a href="#map" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="map-1"><span class="tsd-kind-call-signature">map</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#mapk">K</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapin">IN</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapout">OUT</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">(</span><br/> <span class="tsd-kind-parameter">source</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#mapk">K</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapin">IN</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-kind-parameter">func</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapin">IN</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">key</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapk">K</a><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapout">OUT</a><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#mapk">K</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapout">OUT</a><span class="tsd-signature-symbol">></span><a href="#map-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>When using a Map as <code>source</code>.</p>
|
|
205
|
+
</div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="mapk"><span class="tsd-kind-type-parameter">K</span></span></li><li><span id="mapin"><span class="tsd-kind-type-parameter">IN</span></span></li><li><span id="mapout"><span class="tsd-kind-type-parameter">OUT</span></span></li></ul></section><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">source</span>: <span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#mapk">K</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapin">IN</a><span class="tsd-signature-symbol">></span></span></li><li><span><span class="tsd-kind-parameter">func</span>: <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapin">IN</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">key</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapk">K</a><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapout">OUT</a></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#mapk">K</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#mapout">OUT</a><span class="tsd-signature-symbol">></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/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L507">aberdeen.ts:507</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="merge"><span>merge</span><a href="#merge" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="merge-1"><span class="tsd-kind-call-signature">merge</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#merget">T</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">dst</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#merget">T</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#merget">T</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><a href="#merge-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Like <a href="#copy" class="tsd-kind-method">Aberdeen.copy</a>, but uses merge semantics. Properties in <code>dst</code> not present in <code>src</code> are kept.
|
|
206
206
|
<code>null</code>/<code>undefined</code> in <code>src</code> delete properties in <code>dst</code>.</p>
|
|
207
207
|
</div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="merget"><span class="tsd-kind-type-parameter">T</span> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span></span></li></ul></section><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">dst</span>: <a class="tsd-signature-type tsd-kind-type-parameter" href="#merget">T</a></span></li><li><span><span class="tsd-kind-parameter">value</span>: <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#merget">T</a><span class="tsd-signature-symbol">></span></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4><div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-basic-merge">Example: Basic merge<a href="#example-basic-merge" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">source</span><span class="hl-1"> = { </span><span class="hl-2">b:</span><span class="hl-1"> { </span><span class="hl-2">c:</span><span class="hl-1"> </span><span class="hl-8">99</span><span class="hl-1"> }, </span><span class="hl-2">d:</span><span class="hl-1"> </span><span class="hl-5">undefined</span><span class="hl-1"> }; </span><span class="hl-4">// d: undefined will delete</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$dest</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">proxy</span><span class="hl-1">({ </span><span class="hl-2">a:</span><span class="hl-1"> </span><span class="hl-8">1</span><span class="hl-1">, </span><span class="hl-2">b:</span><span class="hl-1"> { </span><span class="hl-2">x:</span><span class="hl-1"> </span><span class="hl-8">5</span><span class="hl-1"> }, </span><span class="hl-2">d:</span><span class="hl-1"> </span><span class="hl-8">4</span><span class="hl-1"> });</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">merge</span><span class="hl-1">(</span><span class="hl-2">$dest</span><span class="hl-1">, </span><span class="hl-2">source</span><span class="hl-1">);</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">merge</span><span class="hl-1">(</span><span class="hl-2">$dest</span><span class="hl-1">, </span><span class="hl-3">'b'</span><span class="hl-1">, { </span><span class="hl-2">y:</span><span class="hl-1"> </span><span class="hl-8">6</span><span class="hl-1"> }); </span><span class="hl-4">// merge into $dest.b</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">merge</span><span class="hl-1">(</span><span class="hl-2">$dest</span><span class="hl-1">, </span><span class="hl-3">'c'</span><span class="hl-1">, { </span><span class="hl-2">z:</span><span class="hl-1"> </span><span class="hl-8">7</span><span class="hl-1"> }); </span><span class="hl-4">// $dest.c doesn't exist yet, so it will just be assigned</span><br/><span class="hl-2">console</span><span class="hl-1">.</span><span class="hl-7">log</span><span class="hl-1">(</span><span class="hl-2">$dest</span><span class="hl-1">); </span><span class="hl-4">// proxy({ a: 1, b: { c: 99, x: 5, y: 6 }, c: { z: 7 } })</span>
|
|
208
208
|
</code><button type="button">Copy</button></pre>
|
|
209
209
|
|
|
210
|
-
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/
|
|
210
|
+
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L535">aberdeen.ts:535</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="mount"><span>mount</span><a href="#mount" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="mount-1"><span class="tsd-kind-call-signature">mount</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">parentElement</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Element</span><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">func</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">()</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><a href="#mount-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Attaches a reactive Aberdeen UI fragment to an existing DOM element. Without the use of
|
|
211
211
|
this function, A will assume <code>document.body</code> as its root.</p>
|
|
212
212
|
<p>It creates a top-level reactive scope associated with the <code>parentElement</code>. The provided
|
|
213
213
|
function <code>func</code> is executed immediately within this scope. Any proxied data read by <code>func</code>
|
|
@@ -223,8 +223,8 @@ Use <a href="#unmountall" class="tsd-kind-method">Aberdeen.unmountAll</a> to cle
|
|
|
223
223
|
</code><button type="button">Copy</button></pre>
|
|
224
224
|
|
|
225
225
|
<p>Note how the inner mount behaves reactively as well, automatically unmounting when it's parent observer scope re-runs.</p>
|
|
226
|
-
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/
|
|
227
|
-
</div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="multimapin"><span class="tsd-kind-type-parameter">IN</span></span></li><li><span id="multimapout"><span class="tsd-kind-type-parameter">OUT</span> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-symbol">{</span> <span class="tsd-signature-symbol">[</span><span class="tsd-kind-index-signature">key</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol">]:</span> <span class="tsd-signature-type">any</span> <span class="tsd-signature-symbol">}</span></span></li></ul></section><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">source</span>: <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapin">IN</a><span class="tsd-signature-symbol">[]</span></span></li><li><span><span class="tsd-kind-parameter">func</span>: <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapin">IN</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">index</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapout">OUT</a></span></li></ul></div><h4 class="tsd-returns-title">Returns <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapout">OUT</a></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/
|
|
226
|
+
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L580">aberdeen.ts:580</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="multimap"><span>multi<wbr/>Map</span><a href="#multimap" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="multimap-1"><span class="tsd-kind-call-signature">multiMap</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapin">IN</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapout">OUT</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-symbol">{</span> <span class="tsd-signature-symbol">[</span><span class="tsd-kind-index-signature">key</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol">]:</span> <span class="tsd-signature-type">any</span> <span class="tsd-signature-symbol">}</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">(</span><br/> <span class="tsd-kind-parameter">source</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapin">IN</a><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-kind-parameter">func</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapin">IN</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">index</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapout">OUT</a><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapout">OUT</a><a href="#multimap-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>When using an array as <code>source</code>.</p>
|
|
227
|
+
</div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="multimapin"><span class="tsd-kind-type-parameter">IN</span></span></li><li><span id="multimapout"><span class="tsd-kind-type-parameter">OUT</span> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-symbol">{</span> <span class="tsd-signature-symbol">[</span><span class="tsd-kind-index-signature">key</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol">]:</span> <span class="tsd-signature-type">any</span> <span class="tsd-signature-symbol">}</span></span></li></ul></section><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">source</span>: <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapin">IN</a><span class="tsd-signature-symbol">[]</span></span></li><li><span><span class="tsd-kind-parameter">func</span>: <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapin">IN</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">index</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapout">OUT</a></span></li></ul></div><h4 class="tsd-returns-title">Returns <a class="tsd-signature-type tsd-kind-type-parameter" href="#multimapout">OUT</a></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L583">aberdeen.ts:583</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="oneach"><span>on<wbr/>Each</span><a href="#oneach" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="oneach-1"><span class="tsd-kind-call-signature">onEach</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#oneachk">K</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneacht">T</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">(</span><br/> <span class="tsd-kind-parameter">target</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#oneachk">K</a><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneacht">T</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-kind-parameter">render</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneacht">T</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">key</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneachk">K</a><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-kind-parameter">makeKey</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneacht">T</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">key</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneachk">K</a><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <a href="../SortKeyType/" class="tsd-signature-type tsd-kind-type-alias">SortKeyType</a><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><a href="#oneach-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Reactively iterates over the items of an observable array, object, Map, or Set, optionally rendering content for each item.</p>
|
|
228
228
|
<p>Automatically updates when items are added, removed, or modified.</p>
|
|
229
229
|
</div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="oneachk"><span class="tsd-kind-type-parameter">K</span></span></li><li><span id="oneacht"><span class="tsd-kind-type-parameter">T</span></span></li></ul></section><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">target</span>: <span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#oneachk">K</a><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneacht">T</a><span class="tsd-signature-symbol">></span></span><div class="tsd-comment tsd-typography"><p>The observable array, object, Map, or Set to iterate over. Values that are <code>undefined</code> are skipped.</p>
|
|
230
230
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><span class="tsd-kind-parameter">render</span>: <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneacht">T</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">key</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#oneachk">K</a><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">void</span></span><div class="tsd-comment tsd-typography"><p>A function called for each item. It receives the item's (observable) value and its index/key. For Sets, only the value is provided. Any DOM elements created within this function will be associated with the item, placed at the right spot in the DOM, and cleaned up when redrawing/removing the item.</p>
|
|
@@ -242,8 +242,8 @@ Use <a href="#unmountall" class="tsd-kind-method">Aberdeen.unmountAll</a> to cle
|
|
|
242
242
|
</code><button type="button">Copy</button></pre>
|
|
243
243
|
|
|
244
244
|
</div><div class="tsd-tag-see"><h4 class="tsd-anchor-link" id="see-1">See<a href="#see-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><p><a href="#invertstring" class="tsd-kind-method">Aberdeen.invertString</a> To easily create keys for reverse sorting.</p>
|
|
245
|
-
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/
|
|
246
|
-
</div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="partitionout_k"><span class="tsd-kind-type-parameter">OUT_K</span> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">number</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">symbol</span></span></li><li><span id="partitionin_v"><span class="tsd-kind-type-parameter">IN_V</span></span></li></ul></section><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">source</span>: <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionin_v">IN_V</a><span class="tsd-signature-symbol">[]</span></span></li><li><span><span class="tsd-kind-parameter">func</span>: <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionin_v">IN_V</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">key</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionout_k">OUT_K</a> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionout_k">OUT_K</a><span class="tsd-signature-symbol">[]</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Record</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionout_k">OUT_K</a><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">Record</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionin_v">IN_V</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">></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/
|
|
245
|
+
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L688">aberdeen.ts:688</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="partition"><span>partition</span><a href="#partition" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="partition-1"><span class="tsd-kind-call-signature">partition</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionout_k">OUT_K</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">number</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionin_v">IN_V</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">(</span><br/> <span class="tsd-kind-parameter">source</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionin_v">IN_V</a><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-kind-parameter">func</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionin_v">IN_V</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">key</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionout_k">OUT_K</a> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionout_k">OUT_K</a><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Record</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionout_k">OUT_K</a><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">Record</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionin_v">IN_V</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">></span><a href="#partition-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>When using an object as <code>array</code>.</p>
|
|
246
|
+
</div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="partitionout_k"><span class="tsd-kind-type-parameter">OUT_K</span> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">number</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">symbol</span></span></li><li><span id="partitionin_v"><span class="tsd-kind-type-parameter">IN_V</span></span></li></ul></section><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">source</span>: <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionin_v">IN_V</a><span class="tsd-signature-symbol">[]</span></span></li><li><span><span class="tsd-kind-parameter">func</span>: <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">value</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionin_v">IN_V</a><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">key</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionout_k">OUT_K</a> <span class="tsd-signature-symbol">|</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionout_k">OUT_K</a><span class="tsd-signature-symbol">[]</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Record</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionout_k">OUT_K</a><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">Record</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#partitionin_v">IN_V</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">></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/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L710">aberdeen.ts:710</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="peek"><span>peek</span><a href="#peek" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="peek-1"><span class="tsd-kind-call-signature">peek</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#peekt">T</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#peekk">K</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">number</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">(</span><br/> <span class="tsd-kind-parameter">target</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#peekt">T</a><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-kind-parameter">key</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#peekk">K</a><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#peekt">T</a><span class="tsd-signature-symbol">[</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#peekk">K</a><span class="tsd-signature-symbol">]</span><a href="#peek-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Executes a function or retrieves a value <em>without</em> creating subscriptions in the current reactive scope, and returns its result.</p>
|
|
247
247
|
<p>This is useful when you need to access reactive data inside a reactive scope (like A)
|
|
248
248
|
but do not want changes to that specific data to trigger a re-execute of the scope.</p>
|
|
249
249
|
<p>Note: You may also use <a href="#unproxy" class="tsd-kind-method">Aberdeen.unproxy</a> to get to the raw underlying data structure, which can be used to similar effect.</p>
|
|
@@ -253,7 +253,7 @@ but do not want changes to that specific data to trigger a re-execute of the sco
|
|
|
253
253
|
<div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-peeking-within-observer">Example: Peeking within observer<a href="#example-peeking-within-observer" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$data</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">proxy</span><span class="hl-1">({ </span><span class="hl-2">a:</span><span class="hl-1"> </span><span class="hl-8">1</span><span class="hl-1">, </span><span class="hl-2">b:</span><span class="hl-1"> </span><span class="hl-8">2</span><span class="hl-1"> });</span><br/><span class="hl-7">A</span><span class="hl-1">(() </span><span class="hl-5">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-4">// re-executes only when $data.a changes, because $data.b is peeked.</span><br/><span class="hl-1"> </span><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">b</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">peek</span><span class="hl-1">(() </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">$data</span><span class="hl-1">.</span><span class="hl-2">b</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-2">console</span><span class="hl-1">.</span><span class="hl-7">log</span><span class="hl-1">(</span><span class="hl-3">`A is </span><span class="hl-5">${</span><span class="hl-2">$data</span><span class="hl-9">.</span><span class="hl-2">a</span><span class="hl-5">}</span><span class="hl-3">, B was </span><span class="hl-5">${</span><span class="hl-2">b</span><span class="hl-5">}</span><span class="hl-3"> when A changed.`</span><span class="hl-1">);</span><br/><span class="hl-1">});</span><br/><span class="hl-2">$data</span><span class="hl-1">.</span><span class="hl-2">b</span><span class="hl-1"> = </span><span class="hl-8">3</span><span class="hl-1">; </span><span class="hl-4">// Does not trigger console.log</span><br/><span class="hl-2">$data</span><span class="hl-1">.</span><span class="hl-2">a</span><span class="hl-1"> = </span><span class="hl-8">2</span><span class="hl-1">; </span><span class="hl-4">// Triggers console.log (logs "A is 2, B was 3 when A changed.")</span>
|
|
254
254
|
</code><button type="button">Copy</button></pre>
|
|
255
255
|
|
|
256
|
-
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/
|
|
256
|
+
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L756">aberdeen.ts:756</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="proxy"><span>proxy</span><a href="#proxy" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="proxy-1"><span class="tsd-kind-call-signature">proxy</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#proxyt">T</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">unknown</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">target</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#proxyt">T</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a href="../PromiseProxy/" class="tsd-signature-type tsd-kind-interface">PromiseProxy</a><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#proxyt">T</a><span class="tsd-signature-symbol">></span><a href="#proxy-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Creates a reactive proxy around the given data.</p>
|
|
257
257
|
<p>Reading properties from the returned proxy within a reactive scope (like one created by
|
|
258
258
|
A or <a href="#derive" class="tsd-kind-method">Aberdeen.derive</a>) establishes a subscription. Modifying properties <em>through</em>
|
|
259
259
|
the proxy will notify subscribed scopes, causing them to re-execute.</p>
|
|
@@ -287,7 +287,7 @@ By convention in the examples below, local variables that hold proxied values ar
|
|
|
287
287
|
</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-class-instance">Example: Class instance<a href="#example-class-instance" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-5">class</span><span class="hl-1"> </span><span class="hl-10">Widget</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-5">constructor</span><span class="hl-1">(</span><span class="hl-5">public</span><span class="hl-1"> </span><span class="hl-2">name</span><span class="hl-1">: </span><span class="hl-10">string</span><span class="hl-1">, </span><span class="hl-5">public</span><span class="hl-1"> </span><span class="hl-2">width</span><span class="hl-1">: </span><span class="hl-10">number</span><span class="hl-1">, </span><span class="hl-5">public</span><span class="hl-1"> </span><span class="hl-2">height</span><span class="hl-1">: </span><span class="hl-10">number</span><span class="hl-1">) {}</span><br/><span class="hl-1"> </span><span class="hl-7">grow</span><span class="hl-1">() { </span><span class="hl-5">this</span><span class="hl-1">.</span><span class="hl-2">width</span><span class="hl-1"> *= </span><span class="hl-8">2</span><span class="hl-1">; }</span><br/><span class="hl-1"> </span><span class="hl-7">toString</span><span class="hl-1">() { </span><span class="hl-0">return</span><span class="hl-1"> </span><span class="hl-3">`</span><span class="hl-5">${</span><span class="hl-5">this</span><span class="hl-9">.</span><span class="hl-2">name</span><span class="hl-5">}</span><span class="hl-3">Widget (</span><span class="hl-5">${</span><span class="hl-5">this</span><span class="hl-9">.</span><span class="hl-2">width</span><span class="hl-5">}</span><span class="hl-3">x</span><span class="hl-5">${</span><span class="hl-5">this</span><span class="hl-9">.</span><span class="hl-2">height</span><span class="hl-5">}</span><span class="hl-3">)`</span><span class="hl-1">; }</span><br/><span class="hl-1">}</span><br/><span class="hl-5">let</span><span class="hl-1"> </span><span class="hl-2">$graph</span><span class="hl-1">: </span><span class="hl-10">Widget</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">proxy</span><span class="hl-1">(</span><span class="hl-5">new</span><span class="hl-1"> </span><span class="hl-7">Widget</span><span class="hl-1">(</span><span class="hl-3">'Graph'</span><span class="hl-1">, </span><span class="hl-8">200</span><span class="hl-1">, </span><span class="hl-8">100</span><span class="hl-1">));</span><br/><span class="hl-7">A</span><span class="hl-1">(() </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">console</span><span class="hl-1">.</span><span class="hl-7">log</span><span class="hl-1">(</span><span class="hl-3">''</span><span class="hl-1">+</span><span class="hl-2">$graph</span><span class="hl-1">));</span><br/><span class="hl-7">setTimeout</span><span class="hl-1">(() </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">$graph</span><span class="hl-1">.</span><span class="hl-7">grow</span><span class="hl-1">(), </span><span class="hl-8">2000</span><span class="hl-1">);</span><br/><span class="hl-7">setTimeout</span><span class="hl-1">(() </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">$graph</span><span class="hl-1">.</span><span class="hl-7">grow</span><span class="hl-1">(), </span><span class="hl-8">4000</span><span class="hl-1">);</span>
|
|
288
288
|
</code><button type="button">Copy</button></pre>
|
|
289
289
|
|
|
290
|
-
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/
|
|
290
|
+
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L826">aberdeen.ts:826</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="ref"><span>ref</span><a href="#ref" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="ref-1"><span class="tsd-kind-call-signature">ref</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#reft">T</a> <span class="tsd-signature-keyword">extends</span> <a href="../TargetType/" class="tsd-signature-type tsd-kind-type-alias">TargetType</a><span class="tsd-signature-symbol">,</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#refk">K</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">number</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">(</span><br/> <span class="tsd-kind-parameter">target</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#reft">T</a><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-kind-parameter">index</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#refk">K</a><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a href="../ValueRef/" class="tsd-signature-type tsd-kind-interface">ValueRef</a><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#reft">T</a><span class="tsd-signature-symbol">[</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#refk">K</a><span class="tsd-signature-symbol">]</span><span class="tsd-signature-symbol">></span><a href="#ref-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Creates a reactive reference (<code>{ value: T }</code>-like object) to a specific value
|
|
291
291
|
within a proxied object or array.</p>
|
|
292
292
|
<p>This is primarily used for the <code>bind</code> property in A to create two-way data bindings
|
|
293
293
|
with form elements, and for passing a reactive property to any of the A key-value pairs.</p>
|
|
@@ -299,7 +299,7 @@ Assigning to <code>ref.value</code> updates the property in the underlying proxy
|
|
|
299
299
|
<div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-6">Example<a href="#example-6" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="javascript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$formData</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">proxy</span><span class="hl-1">({ </span><span class="hl-2">color:</span><span class="hl-1"> </span><span class="hl-3">'orange'</span><span class="hl-1">, </span><span class="hl-2">velocity:</span><span class="hl-1"> </span><span class="hl-8">42</span><span class="hl-1"> });</span><br/><br/><span class="hl-4">// Usage with `bind`</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'input type=text bind='</span><span class="hl-1">, </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">ref</span><span class="hl-1">(</span><span class="hl-2">$formData</span><span class="hl-1">, </span><span class="hl-3">'color'</span><span class="hl-1">));</span><br/><br/><span class="hl-4">// Usage as a dynamic property, causes a TextNode with just the name to be created and live-updated</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'p text="Selected color: " text='</span><span class="hl-1">, </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">ref</span><span class="hl-1">(</span><span class="hl-2">$formData</span><span class="hl-1">, </span><span class="hl-3">'color'</span><span class="hl-1">), </span><span class="hl-3">'color:'</span><span class="hl-1">, </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">ref</span><span class="hl-1">(</span><span class="hl-2">$formData</span><span class="hl-1">, </span><span class="hl-3">'color'</span><span class="hl-1">));</span><br/><br/><span class="hl-4">// Changes are actually stored in $formData - this causes logs like `{color: "Blue", velocity 42}`</span><br/><span class="hl-7">A</span><span class="hl-1">(() </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">console</span><span class="hl-1">.</span><span class="hl-7">log</span><span class="hl-1">(</span><span class="hl-2">$formData</span><span class="hl-1">))</span>
|
|
300
300
|
</code><button type="button">Copy</button></pre>
|
|
301
301
|
|
|
302
|
-
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/
|
|
302
|
+
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L859">aberdeen.ts:859</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="runqueue"><span>run<wbr/>Queue</span><a href="#runqueue" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="runqueue-1"><span class="tsd-kind-call-signature">runQueue</span><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><a href="#runqueue-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Forces the immediate and synchronous execution of all pending reactive updates.</p>
|
|
303
303
|
<p>Normally, changes to observed data sources (like proxied objects or arrays)
|
|
304
304
|
are processed asynchronously in a batch after a brief timeout (0ms). This function
|
|
305
305
|
allows you to bypass the timeout and process the update queue immediately.</p>
|
|
@@ -311,7 +311,7 @@ by a previous (or the same) <code>runQueue</code> call.</p>
|
|
|
311
311
|
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-7">Example<a href="#example-7" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$data</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">proxy</span><span class="hl-1">(</span><span class="hl-3">"before"</span><span class="hl-1">);</span><br/><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'#'</span><span class="hl-1">, </span><span class="hl-2">$data</span><span class="hl-1">);</span><br/><span class="hl-2">console</span><span class="hl-1">.</span><span class="hl-7">log</span><span class="hl-1">(</span><span class="hl-8">1</span><span class="hl-1">, </span><span class="hl-2">document</span><span class="hl-1">.</span><span class="hl-2">body</span><span class="hl-1">.</span><span class="hl-2">innerHTML</span><span class="hl-1">); </span><span class="hl-4">// before</span><br/><br/><span class="hl-4">// Make an update that should cause the DOM to change.</span><br/><span class="hl-2">$data</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1"> = </span><span class="hl-3">"after"</span><span class="hl-1">;</span><br/><br/><span class="hl-4">// Normally, the DOM update would happen after a timeout.</span><br/><span class="hl-4">// But this causes an immediate update:</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">runQueue</span><span class="hl-1">();</span><br/><br/><span class="hl-2">console</span><span class="hl-1">.</span><span class="hl-7">log</span><span class="hl-1">(</span><span class="hl-8">2</span><span class="hl-1">, </span><span class="hl-2">document</span><span class="hl-1">.</span><span class="hl-2">body</span><span class="hl-1">.</span><span class="hl-2">innerHTML</span><span class="hl-1">); </span><span class="hl-4">// after</span>
|
|
312
312
|
</code><button type="button">Copy</button></pre>
|
|
313
313
|
|
|
314
|
-
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/
|
|
314
|
+
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L895">aberdeen.ts:895</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="seterrorhandler"><span>set<wbr/>Error<wbr/>Handler</span><a href="#seterrorhandler" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="seterrorhandler-1"><span class="tsd-kind-call-signature">setErrorHandler</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">handler</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">error</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Error</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">undefined</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><a href="#seterrorhandler-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Sets a custom error handler function for errors that occur asynchronously
|
|
315
315
|
within reactive scopes (e.g., during updates triggered by proxy changes in
|
|
316
316
|
<a href="#derive" class="tsd-kind-method">Aberdeen.derive</a> or A render functions).</p>
|
|
317
317
|
<p>The default handler logs the error to <code>console.error</code> and adds a simple
|
|
@@ -326,18 +326,18 @@ error message.</p>
|
|
|
326
326
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-custom-logging-and-suppressing-default-message">Example: Custom Logging and Suppressing Default Message<a href="#example-custom-logging-and-suppressing-default-message" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">setErrorHandler</span><span class="hl-1">(</span><span class="hl-2">error</span><span class="hl-1"> </span><span class="hl-5">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">console</span><span class="hl-1">.</span><span class="hl-7">warn</span><span class="hl-1">(</span><span class="hl-3">'Aberdeen render error:'</span><span class="hl-1">, </span><span class="hl-2">error</span><span class="hl-1">.</span><span class="hl-2">message</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-4">// Log to error reporting service</span><br/><span class="hl-1"> </span><span class="hl-4">// myErrorReporter.log(error);</span><br/><br/><span class="hl-1"> </span><span class="hl-0">try</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-4">// Attempt to show a custom message in the UI</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'div#Oops, something went wrong!'</span><span class="hl-1">, </span><span class="hl-2">errorClass</span><span class="hl-1">);</span><br/><span class="hl-1"> } </span><span class="hl-0">catch</span><span class="hl-1"> (</span><span class="hl-2">e</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-4">// Ignore errors during error handling itself</span><br/><span class="hl-1"> }</span><br/><br/><span class="hl-1"> </span><span class="hl-0">return</span><span class="hl-1"> </span><span class="hl-5">false</span><span class="hl-1">; </span><span class="hl-4">// Suppress default console log and DOM error message</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-4">// Styling for our custom error message</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">errorClass</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">insertCss</span><span class="hl-1">(</span><span class="hl-3">'background-color:#e31f00 display:inline-block color:white r:3px padding: 2px 4px;'</span><span class="hl-1">);</span><br/><br/><span class="hl-4">// Cause an error within a render scope.</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'div.box'</span><span class="hl-1">, () </span><span class="hl-5">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-4">// Will cause our error handler to insert an error message within the box</span><br/><span class="hl-1"> </span><span class="hl-7">noSuchFunction</span><span class="hl-1">();</span><br/><span class="hl-1">})</span>
|
|
327
327
|
</code><button type="button">Copy</button></pre>
|
|
328
328
|
|
|
329
|
-
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/
|
|
329
|
+
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L939">aberdeen.ts:939</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="setspacingcssvars"><span>set<wbr/>Spacing<wbr/>Css<wbr/>Vars</span><a href="#setspacingcssvars" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="setspacingcssvars-1"><span class="tsd-kind-call-signature">setSpacingCssVars</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">base</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">unit</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><a href="#setspacingcssvars-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Initializes <code>cssVars[0]</code> through <code>cssVars[12]</code> with an exponential spacing scale.</p>
|
|
330
330
|
<p>The scale is calculated as <code>2^(n-3) * base</code>, providing values from <code>0.25 * base</code> to <code>512 * base</code>.</p>
|
|
331
331
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><code class="tsd-tag">Optional</code><span class="tsd-kind-parameter">base</span>: <span class="tsd-signature-type">number</span></span><div class="tsd-comment tsd-typography"><p>The base size for the spacing scale that will apply to <code>cssVars[3]</code>. Every step up the scale will double this, while every step down will halve it. Defaults to 1.</p>
|
|
332
332
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag">Optional</code><span class="tsd-kind-parameter">unit</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The CSS unit to use, like 'rem', 'em', or 'px'. Defaults to 'rem'.</p>
|
|
333
333
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-8">Example<a href="#example-8" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="javascript"><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-2">A</span><span class="hl-1"> </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'aberdeen'</span><span class="hl-1">;</span><br/><span class="hl-4">// Use default scale (0.25rem to 512rem)</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">setSpacingCssVars</span><span class="hl-1">();</span><br/><br/><span class="hl-4">// Use custom base size</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">setSpacingCssVars</span><span class="hl-1">(</span><span class="hl-8">16</span><span class="hl-1">, </span><span class="hl-3">'px'</span><span class="hl-1">); </span><span class="hl-4">// 4px to 8192px</span><br/><br/><span class="hl-4">// Use em units</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">setSpacingCssVars</span><span class="hl-1">(</span><span class="hl-8">1</span><span class="hl-1">, </span><span class="hl-3">'em'</span><span class="hl-1">); </span><span class="hl-4">// 0.25em to 512em</span><br/><br/><span class="hl-4">// Show the last generated spacing values</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">onEach</span><span class="hl-1">(</span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-2">cssVars</span><span class="hl-1">, (</span><span class="hl-2">value</span><span class="hl-1">, </span><span class="hl-2">key</span><span class="hl-1">) </span><span class="hl-5">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">`div #</span><span class="hl-5">${</span><span class="hl-2">key</span><span class="hl-5">}</span><span class="hl-3"> → </span><span class="hl-5">${</span><span class="hl-2">value</span><span class="hl-5">}</span><span class="hl-3">`</span><span class="hl-1">)</span><br/><span class="hl-1">}, (</span><span class="hl-2">value</span><span class="hl-1">, </span><span class="hl-2">key</span><span class="hl-1">) </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-7">parseInt</span><span class="hl-1">(</span><span class="hl-2">key</span><span class="hl-1">)); </span><span class="hl-4">// Numeric sort</span>
|
|
334
334
|
</code><button type="button">Copy</button></pre>
|
|
335
335
|
|
|
336
|
-
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/
|
|
336
|
+
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L969">aberdeen.ts:969</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="unmountall"><span>unmount<wbr/>All</span><a href="#unmountall" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="unmountall-1"><span class="tsd-kind-call-signature">unmountAll</span><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><a href="#unmountall-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Removes all Aberdeen-managed DOM nodes and stops all active reactive scopes
|
|
337
337
|
(created by <a href="#mount" class="tsd-kind-method">Aberdeen.mount</a>, <a href="#derive" class="tsd-kind-method">Aberdeen.derive</a>, A with functions, etc.).</p>
|
|
338
338
|
<p>This effectively cleans up the entire Aberdeen application state. Aside from in
|
|
339
339
|
automated tests, there should probably be little reason to call this function.</p>
|
|
340
|
-
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/
|
|
340
|
+
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L978">aberdeen.ts:978</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="unproxy"><span>unproxy</span><a href="#unproxy" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="unproxy-1"><span class="tsd-kind-call-signature">unproxy</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#unproxyt">T</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">target</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#unproxyt">T</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#unproxyt">T</a><a href="#unproxy-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Returns the original, underlying data target from a reactive proxy created by <a href="#proxy" class="tsd-kind-method">Aberdeen.proxy</a>.
|
|
341
341
|
If the input <code>target</code> is not a proxy, it is returned directly.</p>
|
|
342
342
|
<p>This is useful when you want to avoid triggering subscriptions during read operations or
|
|
343
343
|
re-executes during write operations. Using <a href="#peek" class="tsd-kind-method">Aberdeen.peek</a> is an alternative way to achieve this.</p>
|
|
@@ -347,4 +347,4 @@ re-executes during write operations. Using <a href="#peek" class="tsd-kind-metho
|
|
|
347
347
|
<div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-9">Example<a href="#example-9" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$user</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">proxy</span><span class="hl-1">({ </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">'Frank'</span><span class="hl-1"> });</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">rawUser</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">unproxy</span><span class="hl-1">(</span><span class="hl-2">$user</span><span class="hl-1">);</span><br/><br/><span class="hl-4">// Log reactively</span><br/><span class="hl-7">A</span><span class="hl-1">(() </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">console</span><span class="hl-1">.</span><span class="hl-7">log</span><span class="hl-1">(</span><span class="hl-3">'proxied'</span><span class="hl-1">, </span><span class="hl-2">$user</span><span class="hl-1">.</span><span class="hl-2">name</span><span class="hl-1">));</span><br/><span class="hl-4">// The following will only ever log once, as we're not subscribing to any observable</span><br/><span class="hl-7">A</span><span class="hl-1">(() </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">console</span><span class="hl-1">.</span><span class="hl-7">log</span><span class="hl-1">(</span><span class="hl-3">'unproxied'</span><span class="hl-1">, </span><span class="hl-2">rawUser</span><span class="hl-1">.</span><span class="hl-2">name</span><span class="hl-1">));</span><br/><br/><span class="hl-4">// This cause the first log to run again:</span><br/><span class="hl-7">setTimeout</span><span class="hl-1">(() </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">$user</span><span class="hl-1">.</span><span class="hl-2">name</span><span class="hl-1"> += </span><span class="hl-3">'!'</span><span class="hl-1">, </span><span class="hl-8">1000</span><span class="hl-1">);</span><br/><br/><span class="hl-4">// This doesn't cause any new logs:</span><br/><span class="hl-7">setTimeout</span><span class="hl-1">(() </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">rawUser</span><span class="hl-1">.</span><span class="hl-2">name</span><span class="hl-1"> += </span><span class="hl-3">'?'</span><span class="hl-1">, </span><span class="hl-8">2000</span><span class="hl-1">);</span><br/><br/><span class="hl-4">// Both $user and rawUser end up as `{name: 'Frank!?'}`</span><br/><span class="hl-7">setTimeout</span><span class="hl-1">(() </span><span class="hl-5">=></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">'final proxied'</span><span class="hl-1">, </span><span class="hl-2">$user</span><span class="hl-1">)</span><br/><span class="hl-1"> </span><span class="hl-2">console</span><span class="hl-1">.</span><span class="hl-7">log</span><span class="hl-1">(</span><span class="hl-3">'final unproxied'</span><span class="hl-1">, </span><span class="hl-2">rawUser</span><span class="hl-1">)</span><br/><span class="hl-1">}, </span><span class="hl-8">3000</span><span class="hl-1">);</span>
|
|
348
348
|
</code><button type="button">Copy</button></pre>
|
|
349
349
|
|
|
350
|
-
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/
|
|
350
|
+
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/vanviegen/aberdeen/blob/b53eddf1a1a2f6ec80ec8518a4cec30e65aa9b96/src/aberdeen.ts#L1014">aberdeen.ts:1014</a></li></ul></aside></div></li></ul></section></section></details></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Properties"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg>Properties</summary><div><a href="#cssvars"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../../assets/icons.svg#icon-1024"></use></svg><span>css<wbr/>Vars</span></a><a href="#custom_dump"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../../assets/icons.svg#icon-1024"></use></svg><span>CUSTOM_<wbr/>DUMP</span></a><a href="#no_copy"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../../assets/icons.svg#icon-1024"></use></svg><span>NO_<wbr/>COPY</span></a><a href="#opaque"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../../assets/icons.svg#icon-1024"></use></svg><span>OPAQUE</span></a></div></details><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Methods"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../../assets/icons.svg#icon-chevronDown"></use></svg>Methods</summary><div><a href="#clean"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>clean</span></a><a href="#clone"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>clone</span></a><a href="#copy"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>copy</span></a><a href="#count"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>count</span></a><a href="#darkmode"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>dark<wbr/>Mode</span></a><a href="#derive"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>derive</span></a><a href="#dump"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>dump</span></a><a href="#insertcss"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>insert<wbr/>Css</span></a><ul><li><ul><li><ul><li><a href="#concise-style-strings"><span>Concise <wbr/>Style <wbr/>Strings</span></a></li></ul></li></ul></li></ul><a href="#insertglobalcss"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>insert<wbr/>Global<wbr/>Css</span></a><a href="#invertstring"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>invert<wbr/>String</span></a><a href="#isempty"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>is<wbr/>Empty</span></a><a href="#map"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>map</span></a><a href="#merge"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>merge</span></a><a href="#mount"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>mount</span></a><a href="#multimap"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>multi<wbr/>Map</span></a><a href="#oneach"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>on<wbr/>Each</span></a><a href="#partition"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>partition</span></a><a href="#peek"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>peek</span></a><a href="#proxy"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>proxy</span></a><a href="#ref"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>ref</span></a><a href="#runqueue"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>run<wbr/>Queue</span></a><a href="#seterrorhandler"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>set<wbr/>Error<wbr/>Handler</span></a><a href="#setspacingcssvars"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>set<wbr/>Spacing<wbr/>Css<wbr/>Vars</span></a><a href="#unmountall"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>unmount<wbr/>All</span></a><a href="#unproxy"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../../assets/icons.svg#icon-2048"></use></svg><span>unproxy</span></a></div></details></div></details></div><div class="site-menu"><nav id="tsd-sidebar-links" class="tsd-navigation"><a href="https://aberdeenjs.org/" class="tsd-nav-link">What's this?</a><a href="https://aberdeenjs.org/Tutorial/" class="tsd-nav-link">Tutorial</a><a href="https://github.com/vanviegen/aberdeen" class="tsd-nav-link">GitHub</a></nav><nav class="tsd-navigation"><a href="../../modules.html">Aberdeen - v2.0.1</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>
|