aberdeen 1.17.0 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/aberdeen.d.ts +928 -944
- package/dist/src/aberdeen.js +1693 -1704
- package/dist/src/aberdeen.js.map +3 -3
- package/dist/src/index.d.ts +12 -0
- package/dist/src/index.js +11 -0
- package/dist/src/index.js.map +10 -0
- package/dist/src/prediction.d.ts +7 -4
- package/dist/src/prediction.js +18 -23
- package/dist/src/prediction.js.map +3 -3
- package/dist/src/route.d.ts +112 -99
- package/dist/src/route.js +254 -254
- package/dist/src/route.js.map +3 -3
- package/dist/src/server-dom.d.ts +158 -0
- package/dist/src/server-dom.js +458 -0
- package/dist/src/server-dom.js.map +10 -0
- package/dist/src/server.d.ts +55 -0
- package/dist/src/server.js +25 -0
- package/dist/src/server.js.map +10 -0
- package/dist/src/transitions.js +7 -4
- package/dist/src/transitions.js.map +3 -3
- package/dist/tests/environment.d.ts +24 -0
- package/dist/tests/{fakedom.js → environment.js} +239 -288
- package/dist/tests/environment.js.map +11 -0
- package/dist/tests/helpers.d.ts +15 -3
- package/dist/tests/helpers.js +277 -306
- package/dist/tests/helpers.js.map +6 -5
- package/dist-docs/Tutorial/index.html +30 -30
- package/dist-docs/aberdeen/Aberdeen/index.html +350 -0
- package/dist-docs/aberdeen/InitOptions/index.html +4 -0
- package/dist-docs/aberdeen/KeyToString/index.html +2 -0
- package/dist-docs/aberdeen/PromiseProxy/index.html +6 -6
- package/dist-docs/aberdeen/SortKeyType/index.html +2 -0
- package/dist-docs/aberdeen/TargetType/index.html +2 -0
- package/dist-docs/aberdeen/ValueRef/index.html +2 -0
- package/dist-docs/aberdeen/WindowLike/index.html +5 -0
- package/dist-docs/aberdeen/{clone → createA}/index.html +10 -5
- package/dist-docs/aberdeen/index.html +13 -54
- package/dist-docs/assets/aberdeen/aberdeen.d.ts +928 -944
- package/dist-docs/assets/aberdeen/aberdeen.js +1693 -1704
- package/dist-docs/assets/aberdeen/aberdeen.js.map +3 -3
- package/dist-docs/assets/aberdeen/index.d.ts +12 -0
- package/dist-docs/assets/aberdeen/index.js +11 -0
- package/dist-docs/assets/aberdeen/index.js.map +10 -0
- package/dist-docs/assets/aberdeen/prediction.d.ts +7 -4
- package/dist-docs/assets/aberdeen/prediction.js +18 -23
- package/dist-docs/assets/aberdeen/prediction.js.map +3 -3
- package/dist-docs/assets/aberdeen/route.d.ts +112 -99
- package/dist-docs/assets/aberdeen/route.js +254 -254
- package/dist-docs/assets/aberdeen/route.js.map +3 -3
- package/dist-docs/assets/aberdeen/server-dom.d.ts +158 -0
- package/dist-docs/assets/aberdeen/server-dom.js +458 -0
- package/dist-docs/assets/aberdeen/server-dom.js.map +10 -0
- package/dist-docs/assets/aberdeen/server.d.ts +55 -0
- package/dist-docs/assets/aberdeen/server.js +25 -0
- package/dist-docs/assets/aberdeen/server.js.map +10 -0
- package/dist-docs/assets/aberdeen/transitions.js +7 -4
- package/dist-docs/assets/aberdeen/transitions.js.map +3 -3
- package/dist-docs/assets/navigation.js +1 -1
- package/dist-docs/assets/search.js +1 -1
- package/dist-docs/dispatcher/Dispatcher/index.html +5 -6
- 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 -0
- package/dist-docs/index.html +2 -2
- package/dist-docs/media/CHANGELOG.md +14 -2
- package/dist-docs/modules.html +1 -1
- package/dist-docs/prediction/applyCanon/index.html +4 -3
- package/dist-docs/prediction/applyPrediction/index.html +4 -3
- package/dist-docs/prediction/index.html +2 -2
- package/dist-docs/route/Route/index.html +9 -9
- package/dist-docs/route/RouteApi/index.html +60 -0
- package/dist-docs/route/index.html +6 -15
- package/dist-docs/route/init/index.html +5 -0
- package/dist-docs/server/RenderToStringOptions/index.html +6 -0
- package/dist-docs/server/RenderToStringResult/index.html +6 -0
- package/dist-docs/server/index.html +4 -0
- package/dist-docs/server/renderToString/index.html +6 -0
- package/dist-docs/sitemap.xml +51 -155
- 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 +17 -7
- package/skill/SKILL.md +28 -28
- package/skill/aberdeen.md +471 -3448
- package/skill/dispatcher.md +6 -16
- package/skill/prediction.md +17 -5
- package/skill/route.md +95 -77
- package/skill/transitions.md +3 -3
- package/src/aberdeen.ts +1226 -740
- package/src/index.ts +13 -0
- package/src/prediction.ts +25 -24
- package/src/route.ts +192 -142
- package/src/server-dom.ts +508 -0
- package/src/server.ts +74 -0
- package/src/transitions.ts +9 -3
- package/dist/tests/fakedom.d.ts +0 -9
- package/dist/tests/fakedom.js.map +0 -10
- package/dist-docs/aberdeen/A/index.html +0 -115
- package/dist-docs/aberdeen/CUSTOM_DUMP/index.html +0 -7
- package/dist-docs/aberdeen/NO_COPY/index.html +0 -2
- package/dist-docs/aberdeen/OPAQUE/index.html +0 -12
- package/dist-docs/aberdeen/clean/index.html +0 -11
- package/dist-docs/aberdeen/copy/index.html +0 -22
- package/dist-docs/aberdeen/count/index.html +0 -7
- package/dist-docs/aberdeen/cssVars/index.html +0 -11
- package/dist-docs/aberdeen/darkMode/index.html +0 -9
- package/dist-docs/aberdeen/default/index.html +0 -341
- package/dist-docs/aberdeen/derive/index.html +0 -18
- package/dist-docs/aberdeen/disableCreateDestroy/index.html +0 -6
- package/dist-docs/aberdeen/dump/index.html +0 -11
- package/dist-docs/aberdeen/insertCss/index.html +0 -30
- package/dist-docs/aberdeen/insertGlobalCss/index.html +0 -19
- package/dist-docs/aberdeen/invertString/index.html +0 -13
- package/dist-docs/aberdeen/isEmpty/index.html +0 -12
- package/dist-docs/aberdeen/map/index.html +0 -26
- package/dist-docs/aberdeen/merge/index.html +0 -11
- package/dist-docs/aberdeen/mount/index.html +0 -17
- package/dist-docs/aberdeen/multiMap/index.html +0 -28
- package/dist-docs/aberdeen/onEach/index.html +0 -19
- package/dist-docs/aberdeen/partition/index.html +0 -36
- package/dist-docs/aberdeen/peek/index.html +0 -40
- package/dist-docs/aberdeen/proxy/index.html +0 -35
- package/dist-docs/aberdeen/ref/index.html +0 -13
- package/dist-docs/aberdeen/runQueue/index.html +0 -13
- package/dist-docs/aberdeen/setErrorHandler/index.html +0 -16
- package/dist-docs/aberdeen/setSpacingCssVars/index.html +0 -8
- package/dist-docs/aberdeen/unmountAll/index.html +0 -5
- package/dist-docs/aberdeen/unproxy/index.html +0 -11
- package/dist-docs/route/back/index.html +0 -4
- package/dist-docs/route/current/index.html +0 -2
- package/dist-docs/route/go/index.html +0 -14
- package/dist-docs/route/interceptLinks/index.html +0 -8
- package/dist-docs/route/matchCurrent/index.html +0 -10
- package/dist-docs/route/persistScroll/index.html +0 -6
- package/dist-docs/route/push/index.html +0 -6
- package/dist-docs/route/setLog/index.html +0 -3
- package/dist-docs/route/up/index.html +0 -5
|
@@ -1,9 +1,9 @@
|
|
|
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>Tutorial | Aberdeen -
|
|
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>Tutorial | Aberdeen - v2.0.0</title><link rel="icon" href="../assets/favicon.png" type="image/png"/><meta name="description" content="Documentation for Aberdeen"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script defer src="../assets/custom.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">Aberdeen - v2.0.0</a><div id="tsd-toolbar-links"><a href="https://aberdeenjs.org/">What's this?</a><a href="https://aberdeenjs.org/Tutorial/">Tutorial</a><a href="https://github.com/vanviegen/aberdeen">GitHub</a></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="" aria-current="page">Tutorial</a></li></ul></div><div class="tsd-panel tsd-typography"><h1 id="tutorial" class="tsd-anchor-link">Tutorial<a href="#tutorial" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1><h2 id="creating-elements" class="tsd-anchor-link">Creating elements<a href="#creating-elements" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>This is a complete Aberdeen application:</p>
|
|
2
2
|
<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-7">A</span><span class="hl-1">(</span><span class="hl-3">'h3#Hello world'</span><span class="hl-1">);</span>
|
|
3
3
|
</code><button type="button">Copy</button></pre>
|
|
4
4
|
|
|
5
5
|
<p>It adds a <code><h3>Hello world</h3></code> element to the <code><body></code> (which is the default mount point).</p>
|
|
6
|
-
<p>The <a href="../aberdeen/
|
|
6
|
+
<p>The <a href="../aberdeen/Aberdeen/" class="tsd-kind-interface">A</a> function accepts various forms of arguments, which can be combined.</p>
|
|
7
7
|
<p>When a string is passed:</p>
|
|
8
8
|
<ul>
|
|
9
9
|
<li>The inital part (if any) is the name of the element to be created.</li>
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
<pre><code class="javascript"><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'button.outline.secondary#Pressing me does nothing!'</span><span class="hl-1">);</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'button'</span><span class="hl-1">, </span><span class="hl-3">'.outline'</span><span class="hl-1">, </span><span class="hl-3">'.secondary'</span><span class="hl-1">, </span><span class="hl-3">'#Pressing me does nothing!'</span><span class="hl-1">);</span>
|
|
20
20
|
</code><button type="button">Copy</button></pre>
|
|
21
21
|
|
|
22
|
-
<p>Also, we can create multiple nested DOM elements in a single <a href="../aberdeen/
|
|
22
|
+
<p>Also, we can create multiple nested DOM elements in a single <a href="../aberdeen/Aberdeen/" class="tsd-kind-interface">A</a> invocation, <em>if</em> the parents need to have only a single child. For instance:</p>
|
|
23
23
|
<pre><code class="javascript"><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-3">'#Text within the div element...'</span><span class="hl-1">, </span><span class="hl-3">'input'</span><span class="hl-1">);</span>
|
|
24
24
|
</code><button type="button">Copy</button></pre>
|
|
25
25
|
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
|
|
36
36
|
<p>Note that the example is interactive - try typing something!</p>
|
|
37
37
|
<blockquote>
|
|
38
|
-
<p><strong>Note:</strong> <a href="../aberdeen/
|
|
38
|
+
<p><strong>Note:</strong> <a href="../aberdeen/Aberdeen/" class="tsd-kind-interface">A</a> also accepts object syntax as an alternative to strings (see the API reference), but the string syntax shown here is more concise and is recommended for most use cases.</p>
|
|
39
39
|
</blockquote>
|
|
40
40
|
<h2 id="inline-styles" class="tsd-anchor-link">Inline styles<a href="#inline-styles" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>To set inline CSS styles on elements, use the <code>property:value</code> (short form) or <code>property: value containing spaces;</code> (long form) syntax:</p>
|
|
41
41
|
<pre><code class="javascript"><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'p color:red padding:8px background-color:#a882 border: 2px solid #a884; #Styled text'</span><span class="hl-1">);</span>
|
|
@@ -87,13 +87,13 @@
|
|
|
87
87
|
<pre><code class="javascript"><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'div mv:10px ph:20px bg:lightblue r:10% #Styled box'</span><span class="hl-1">);</span>
|
|
88
88
|
</code><button type="button">Copy</button></pre>
|
|
89
89
|
|
|
90
|
-
<h3 id="css-variables" class="tsd-anchor-link">CSS variables<a href="#css-variables" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Values starting with <code>$</code> expand to native CSS custom properties via <code>var(--name)</code>. The <a href="../aberdeen/
|
|
90
|
+
<h3 id="css-variables" class="tsd-anchor-link">CSS variables<a href="#css-variables" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Values starting with <code>$</code> expand to native CSS custom properties via <code>var(--name)</code>. The <a href="../aberdeen/Aberdeen/#cssvars" class="tsd-kind-property">A.cssVars</a> object offers a convenient way of setting and updating CSS custom properties at the <code>:root</code> level.</p>
|
|
91
91
|
<p>When you add the first property to <code>A.cssVars</code>, Aberdeen automatically creates a reactive <code><style></code> tag in <code><head></code> containing the CSS custom property declarations.</p>
|
|
92
92
|
<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-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/><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">textLight</span><span class="hl-1"> = </span><span class="hl-3">'#f8fafc'</span><span class="hl-1">;</span><br/><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'button bg:$primary fg:$textLight #Primary'</span><span class="hl-1">);</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'button bg:$danger fg:$textLight #Danger'</span><span class="hl-1">);</span>
|
|
93
93
|
</code><button type="button">Copy</button></pre>
|
|
94
94
|
|
|
95
95
|
<p>The above generates CSS like <code>background: var(--primary)</code> and automatically injects a <code>:root</code> style defining the actual values. Since this uses native CSS custom properties, changes to <code>A.cssVars</code> automatically propagate to all elements using those values.</p>
|
|
96
|
-
<h3 id="spacing-variables" class="tsd-anchor-link">Spacing variables<a href="#spacing-variables" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>You can optionally initialize <code>A.cssVars</code> with keys <code>1</code> through <code>12</code> mapping to an exponential <code>rem</code> scale using <a href="../aberdeen/
|
|
96
|
+
<h3 id="spacing-variables" class="tsd-anchor-link">Spacing variables<a href="#spacing-variables" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>You can optionally initialize <code>A.cssVars</code> with keys <code>1</code> through <code>12</code> mapping to an exponential <code>rem</code> scale using <a href="../aberdeen/Aberdeen/#setspacingcssvars" class="tsd-kind-method">A.setSpacingCssVars</a>. Since CSS custom property names can't start with a digit, numeric keys are prefixed with <code>m</code> (e.g., <code>$3</code> becomes <code>var(--m3)</code>):</p>
|
|
97
97
|
<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-6">A</span><span class="hl-1">.</span><span class="hl-7">setSpacingCssVars</span><span class="hl-1">(); </span><span class="hl-4">// Default: base=1, unit='rem'</span><br/><span class="hl-4">// Or customize: A.setSpacingCssVars(16, 'px') or A.setSpacingCssVars(1, 'em')</span>
|
|
98
98
|
</code><button type="button">Copy</button></pre>
|
|
99
99
|
|
|
@@ -142,15 +142,15 @@
|
|
|
142
142
|
</code><button type="button">Copy</button></pre>
|
|
143
143
|
|
|
144
144
|
<p>If you want different spacing, you can customize the base and unit when calling <code>A.setSpacingCssVars()</code>, or dynamically modify the values.</p>
|
|
145
|
-
<p>These shortcuts and variables are also available when using <a href="../aberdeen/
|
|
146
|
-
<h2 id="nesting-content" class="tsd-anchor-link">Nesting content<a href="#nesting-content" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Of course, putting everything in a single <a href="../aberdeen/
|
|
145
|
+
<p>These shortcuts and variables are also available when using <a href="../aberdeen/Aberdeen/#insertcss" class="tsd-kind-method">A.insertCss</a>.</p>
|
|
146
|
+
<h2 id="nesting-content" class="tsd-anchor-link">Nesting content<a href="#nesting-content" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Of course, putting everything in a single <a href="../aberdeen/Aberdeen/" class="tsd-kind-interface">A</a> call will get messy soon, and you'll often want to nest more than one child within a parent. To do that, you can pass in a <em>content</em> function to <a href="../aberdeen/Aberdeen/" class="tsd-kind-interface">A</a>, like this:</p>
|
|
147
147
|
<pre><code class="javascript"><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'div.box.row id=cityContainer'</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">'input value=London placeholder=City'</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">'button text=Confirm click='</span><span class="hl-1">, () </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-7">alert</span><span class="hl-1">(</span><span class="hl-3">"You got it!"</span><span class="hl-1">));</span><br/><span class="hl-1">});</span>
|
|
148
148
|
</code><button type="button">Copy</button></pre>
|
|
149
149
|
|
|
150
150
|
<p>Why are we passing in a function instead of just, say, an array of children? I'm glad you asked! :-) For each such function Aberdeen will create an <em>observer</em>, which will play a major part in what comes next...</p>
|
|
151
|
-
<h2 id="observable-objects" class="tsd-anchor-link">Observable objects<a href="#observable-objects" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Aberdeen's reactivity system is built around observable objects. These are created using the <a href="../aberdeen/proxy
|
|
151
|
+
<h2 id="observable-objects" class="tsd-anchor-link">Observable objects<a href="#observable-objects" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Aberdeen's reactivity system is built around observable objects. These are created using the <a href="../aberdeen/Aberdeen/#proxy" class="tsd-kind-method">A.proxy</a> function:</p>
|
|
152
152
|
<p>By convention variables that hold proxied values are prefixed with <code>$</code> so reactive reads stand out.</p>
|
|
153
|
-
<p>When you access properties of a proxied object within an observer function (the function passed to <a href="../aberdeen/
|
|
153
|
+
<p>When you access properties of a proxied object within an observer function (the function passed to <a href="../aberdeen/Aberdeen/" class="tsd-kind-interface">A</a>), Aberdeen automatically tracks these dependencies. If the values change later, the observer function will re-run, updating only the affected parts of the DOM.</p>
|
|
154
154
|
<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-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><br/><span class="hl-1"> </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">'Alice'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">age:</span><span class="hl-1"> </span><span class="hl-8">28</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">city:</span><span class="hl-1"> </span><span class="hl-3">'Aberdeen'</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'</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">`h3#Hello, </span><span class="hl-5">${</span><span class="hl-2">$user</span><span class="hl-9">.</span><span class="hl-2">name</span><span class="hl-5">}</span><span class="hl-3">!`</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">`p#You are </span><span class="hl-5">${</span><span class="hl-2">$user</span><span class="hl-9">.</span><span class="hl-2">age</span><span class="hl-5">}</span><span class="hl-3"> years old.`</span><span class="hl-1">);</span><br/><span class="hl-1">});</span><br/><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-2">$user</span><span class="hl-1">.</span><span class="hl-2">name</span><span class="hl-1"> = </span><span class="hl-3">'Bob'</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">age</span><span class="hl-1">++;</span><br/><span class="hl-1">}, </span><span class="hl-8">2000</span><span class="hl-1">);</span>
|
|
155
155
|
</code><button type="button">Copy</button></pre>
|
|
156
156
|
|
|
@@ -160,11 +160,11 @@
|
|
|
160
160
|
</code><button type="button">Copy</button></pre>
|
|
161
161
|
|
|
162
162
|
<p>Now, updating <code>$user.name</code> would only cause the <em>Hello</em> text node to be replaced, leaving the <code><div></code>, <code><h3></code> and <code><p></code> elements as they were.</p>
|
|
163
|
-
<h2 id="conditional-rendering" class="tsd-anchor-link">Conditional rendering<a href="#conditional-rendering" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Within an observer function (such as created by passing a function to <a href="../aberdeen/
|
|
163
|
+
<h2 id="conditional-rendering" class="tsd-anchor-link">Conditional rendering<a href="#conditional-rendering" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Within an observer function (such as created by passing a function to <a href="../aberdeen/Aberdeen/" class="tsd-kind-interface">A</a>), you can use regular JavaScript logic. Like <code>if</code> and <code>else</code>, for instance:</p>
|
|
164
164
|
<pre><code class="javascript"><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><br/><span class="hl-1"> </span><span class="hl-2">loggedIn:</span><span class="hl-1"> </span><span class="hl-5">false</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'</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">$user</span><span class="hl-1">.</span><span class="hl-2">loggedIn</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">'button.outline text=Logout click='</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">loggedIn</span><span class="hl-1"> = </span><span class="hl-5">false</span><span class="hl-1">);</span><br/><span class="hl-1"> } </span><span class="hl-0">else</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">'button text=Login click='</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">loggedIn</span><span class="hl-1"> = </span><span class="hl-5">true</span><span class="hl-1">);</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
|
165
165
|
</code><button type="button">Copy</button></pre>
|
|
166
166
|
|
|
167
|
-
<h2 id="observable-primitive-values" class="tsd-anchor-link">Observable primitive values<a href="#observable-primitive-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></h2><p>The <a href="../aberdeen/proxy
|
|
167
|
+
<h2 id="observable-primitive-values" class="tsd-anchor-link">Observable primitive values<a href="#observable-primitive-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></h2><p>The <a href="../aberdeen/Aberdeen/#proxy" class="tsd-kind-method">A.proxy</a> method wraps an object in a JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy" target="_blank" class="external">Proxy</a>. As this doesn't work for primitive values (like numbers, strings and booleans), the method will <em>create</em> an object in order to make it observable. The observable value is made available as its <code>.value</code> property.</p>
|
|
168
168
|
<pre><code class="javascript"><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">proxy</span><span class="hl-1">(</span><span class="hl-8">42</span><span class="hl-1">);</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'div.row'</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">// This scope will not have to redraw</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'button text=- click='</span><span class="hl-1">, () </span><span class="hl-5">=></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-1"> </span><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-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'button text=+ click='</span><span class="hl-1">, () </span><span class="hl-5">=></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-1">});</span>
|
|
169
169
|
</code><button type="button">Copy</button></pre>
|
|
170
170
|
|
|
@@ -188,8 +188,8 @@
|
|
|
188
188
|
<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/><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/><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><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">$graph</span><span class="hl-1">));</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'button text=Grow click='</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>
|
|
189
189
|
</code><button type="button">Copy</button></pre>
|
|
190
190
|
|
|
191
|
-
<p>The type returned by <a href="../aberdeen/proxy
|
|
192
|
-
<h2 id="efficient-list-rendering-with-aoneach" class="tsd-anchor-link">Efficient list rendering with A.onEach<a href="#efficient-list-rendering-with-aoneach" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>For rendering lists efficiently, Aberdeen provides the <a href="../aberdeen/
|
|
191
|
+
<p>The type returned by <a href="../aberdeen/Aberdeen/#proxy" class="tsd-kind-method">A.proxy</a> matches the input type, meaning the type system does not distinguish proxied and unproxied objects. That makes sense, as they have the exact same methods and properties (though proxied objects may have additional side effects).</p>
|
|
192
|
+
<h2 id="efficient-list-rendering-with-aoneach" class="tsd-anchor-link">Efficient list rendering with A.onEach<a href="#efficient-list-rendering-with-aoneach" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>For rendering lists efficiently, Aberdeen provides the <a href="../aberdeen/Aberdeen/#oneach" class="tsd-kind-method">A.onEach</a> function. It takes three arguments:</p>
|
|
193
193
|
<ol>
|
|
194
194
|
<li>The array to iterate over.</li>
|
|
195
195
|
<li>A render function that receives the item and its index.</li>
|
|
@@ -198,17 +198,17 @@
|
|
|
198
198
|
<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-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-5">const</span><span class="hl-1"> </span><span class="hl-7">randomInt</span><span class="hl-1"> = (</span><span class="hl-2">max</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">Math</span><span class="hl-1">.</span><span class="hl-7">random</span><span class="hl-1">() * </span><span class="hl-2">max</span><span class="hl-1">);</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-7">randomWord</span><span class="hl-1"> = () </span><span class="hl-5">=></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-7">toString</span><span class="hl-1">(</span><span class="hl-8">36</span><span class="hl-1">).</span><span class="hl-7">substring</span><span class="hl-1">(</span><span class="hl-8">2</span><span class="hl-1">, </span><span class="hl-8">12</span><span class="hl-1">).</span><span class="hl-7">replace</span><span class="hl-1">(</span><span class="hl-11">/</span><span class="hl-12">[</span><span class="hl-11">0-9</span><span class="hl-12">]</span><span class="hl-13">+</span><span class="hl-11">/</span><span class="hl-5">g</span><span class="hl-1">, </span><span class="hl-3">''</span><span class="hl-1">).</span><span class="hl-7">replace</span><span class="hl-1">(</span><span class="hl-11">/</span><span class="hl-14">^</span><span class="hl-11">\w/</span><span class="hl-1">, </span><span class="hl-2">c</span><span class="hl-1"> </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">c</span><span class="hl-1">.</span><span class="hl-7">toUpperCase</span><span class="hl-1">());</span><br/><br/><span class="hl-4">// Make random mutations</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-7">randomInt</span><span class="hl-1">(</span><span class="hl-8">3</span><span class="hl-1">)) </span><span class="hl-2">$items</span><span class="hl-1">[</span><span class="hl-7">randomInt</span><span class="hl-1">(</span><span class="hl-8">7</span><span class="hl-1">)] = {</span><span class="hl-2">label:</span><span class="hl-1"> </span><span class="hl-7">randomWord</span><span class="hl-1">(), </span><span class="hl-2">prio:</span><span class="hl-1"> </span><span class="hl-7">randomInt</span><span class="hl-1">(</span><span class="hl-8">4</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-5">delete</span><span class="hl-1"> </span><span class="hl-2">$items</span><span class="hl-1">[</span><span class="hl-7">randomInt</span><span class="hl-1">(</span><span class="hl-8">7</span><span class="hl-1">)];</span><br/><span class="hl-1">}, </span><span class="hl-8">500</span><span class="hl-1">);</span><br/><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'div.row.wide height:250px'</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.box#By 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-6">A</span><span class="hl-1">.</span><span class="hl-7">onEach</span><span class="hl-1">(</span><span class="hl-2">$items</span><span class="hl-1">, (</span><span class="hl-2">$item</span><span class="hl-1">, </span><span class="hl-2">index</span><span class="hl-1">) </span><span class="hl-5">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-4">// Called only for items that are created/updated</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">`li#</span><span class="hl-5">${</span><span class="hl-2">$item</span><span class="hl-9">.</span><span class="hl-2">label</span><span class="hl-5">}</span><span class="hl-3"> (prio </span><span class="hl-5">${</span><span class="hl-2">$item</span><span class="hl-9">.</span><span class="hl-2">prio</span><span class="hl-5">}</span><span class="hl-3">)`</span><span class="hl-1">)</span><br/><span class="hl-1"> });</span><br/><span class="hl-1"> })</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'div.box#By label'</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-7">onEach</span><span class="hl-1">(</span><span class="hl-2">$items</span><span class="hl-1">, (</span><span class="hl-2">$item</span><span class="hl-1">, </span><span class="hl-2">index</span><span class="hl-1">) </span><span class="hl-5">=></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">`li#</span><span class="hl-5">${</span><span class="hl-2">$item</span><span class="hl-9">.</span><span class="hl-2">label</span><span class="hl-5">}</span><span class="hl-3"> (prio </span><span class="hl-5">${</span><span class="hl-2">$item</span><span class="hl-9">.</span><span class="hl-2">prio</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">$item</span><span class="hl-1"> </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">$item</span><span class="hl-1">.</span><span class="hl-2">label</span><span class="hl-1">);</span><br/><span class="hl-1"> })</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'div.box#By desc prio, then label'</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-7">onEach</span><span class="hl-1">(</span><span class="hl-2">$items</span><span class="hl-1">, (</span><span class="hl-2">$item</span><span class="hl-1">, </span><span class="hl-2">index</span><span class="hl-1">) </span><span class="hl-5">=></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">`li#</span><span class="hl-5">${</span><span class="hl-2">$item</span><span class="hl-9">.</span><span class="hl-2">label</span><span class="hl-5">}</span><span class="hl-3"> (prio </span><span class="hl-5">${</span><span class="hl-2">$item</span><span class="hl-9">.</span><span class="hl-2">prio</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">$item</span><span class="hl-1"> </span><span class="hl-5">=></span><span class="hl-1"> [-</span><span class="hl-2">$item</span><span class="hl-1">.</span><span class="hl-2">prio</span><span class="hl-1">, </span><span class="hl-2">$item</span><span class="hl-1">.</span><span class="hl-2">label</span><span class="hl-1">]);</span><br/><span class="hl-1"> })</span><br/><span class="hl-1">})</span>
|
|
199
199
|
</code><button type="button">Copy</button></pre>
|
|
200
200
|
|
|
201
|
-
<p>We can also use <a href="../aberdeen/
|
|
201
|
+
<p>We can also use <a href="../aberdeen/Aberdeen/#oneach" class="tsd-kind-method">A.onEach</a> to reactively iterate over <em>objects</em>, arrays, <code>Map</code>s and <code>Set</code>s. For objects and <code>Map</code>s, the render and order functions receive <code>(value, key)</code> instead of <code>(value, index)</code>. For <code>Set</code>s, they receive only the value. By default, Sets are ordered by that value, which only works for numbers, strings and arrays of those, so Sets of objects need an explicit order function.</p>
|
|
202
202
|
<pre><code class="javascript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$pairs</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-3">'Y'</span><span class="hl-1">, </span><span class="hl-2">B:</span><span class="hl-1"> </span><span class="hl-3">'X'</span><span class="hl-1">,});</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-7">randomWord</span><span class="hl-1"> = () </span><span class="hl-5">=></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-7">toString</span><span class="hl-1">(</span><span class="hl-8">36</span><span class="hl-1">).</span><span class="hl-7">substring</span><span class="hl-1">(</span><span class="hl-8">2</span><span class="hl-1">, </span><span class="hl-8">12</span><span class="hl-1">).</span><span class="hl-7">replace</span><span class="hl-1">(</span><span class="hl-11">/</span><span class="hl-12">[</span><span class="hl-11">0-9</span><span class="hl-12">]</span><span class="hl-13">+</span><span class="hl-11">/</span><span class="hl-5">g</span><span class="hl-1">, </span><span class="hl-3">''</span><span class="hl-1">).</span><span class="hl-7">replace</span><span class="hl-1">(</span><span class="hl-11">/</span><span class="hl-14">^</span><span class="hl-11">\w/</span><span class="hl-1">, </span><span class="hl-2">c</span><span class="hl-1"> </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">c</span><span class="hl-1">.</span><span class="hl-7">toUpperCase</span><span class="hl-1">());</span><br/><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'button text="Add item" click='</span><span class="hl-1">, () </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">$pairs</span><span class="hl-1">[</span><span class="hl-7">randomWord</span><span class="hl-1">()] = </span><span class="hl-7">randomWord</span><span class="hl-1">());</span><br/><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'div.row.wide margin-top:1em'</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.box#By 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-6">A</span><span class="hl-1">.</span><span class="hl-7">onEach</span><span class="hl-1">(</span><span class="hl-2">$pairs</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">`li#</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><br/><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.box#By desc value'</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-7">onEach</span><span class="hl-1">(</span><span class="hl-2">$pairs</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">`li#</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-5">=></span><span class="hl-1"> </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">invertString</span><span class="hl-1">(</span><span class="hl-2">value</span><span class="hl-1">));</span><br/><span class="hl-1"> })</span><br/><span class="hl-1">})</span>
|
|
203
203
|
</code><button type="button">Copy</button></pre>
|
|
204
204
|
|
|
205
|
-
<p>Note the use of the provided <a href="../aberdeen/
|
|
206
|
-
<h2 id="two-way-binding" class="tsd-anchor-link">Two-way binding<a href="#two-way-binding" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Aberdeen makes it easy to create two-way bindings between form elements (the various <code><input></code> types, <code><textarea></code> and <code><select></code>) and your data, by passing an observable object with a <code>.value</code> as <code>bind:</code> property to <a href="../aberdeen/
|
|
207
|
-
<p>To bind to object properties not named <code>.value</code> (e.g., <code>$user.name</code>), use <a href="../aberdeen/ref
|
|
205
|
+
<p>Note the use of the provided <a href="../aberdeen/Aberdeen/#invertstring" class="tsd-kind-method">A.invertString</a> function to reverse-sort by a string value.</p>
|
|
206
|
+
<h2 id="two-way-binding" class="tsd-anchor-link">Two-way binding<a href="#two-way-binding" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Aberdeen makes it easy to create two-way bindings between form elements (the various <code><input></code> types, <code><textarea></code> and <code><select></code>) and your data, by passing an observable object with a <code>.value</code> as <code>bind:</code> property to <a href="../aberdeen/Aberdeen/" class="tsd-kind-interface">A</a>.</p>
|
|
207
|
+
<p>To bind to object properties not named <code>.value</code> (e.g., <code>$user.name</code>), use <a href="../aberdeen/Aberdeen/#ref" class="tsd-kind-method">A.ref</a>. This creates a new observable A.proxy whose <code>.value</code> property directly maps to the specified property (e.g., <code>name</code>) on your original observable object (e.g., <code>$user</code>).</p>
|
|
208
208
|
<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-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><br/><span class="hl-1"> </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">'Alice'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">active:</span><span class="hl-1"> </span><span class="hl-5">false</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-4">// Text input binding</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'input placeholder=Name 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">$user</span><span class="hl-1">, </span><span class="hl-3">'name'</span><span class="hl-1">));</span><br/><br/><span class="hl-4">// Checkbox binding</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'label'</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">'input type=checkbox 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">$user</span><span class="hl-1">, </span><span class="hl-3">'active'</span><span class="hl-1">));</span><br/><span class="hl-1">}, </span><span class="hl-3">'#Active'</span><span class="hl-1">);</span><br/><br/><span class="hl-4">// Display the current state</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-7">A</span><span class="hl-1">(</span><span class="hl-3">`p#Name: </span><span class="hl-5">${</span><span class="hl-2">$user</span><span class="hl-9">.</span><span class="hl-2">name</span><span class="hl-5">}</span><span class="hl-3"> `</span><span class="hl-1">, () </span><span class="hl-5">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-4">// Binding works both ways</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'button.outline.secondary#!'</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-7">click</span><span class="hl-2">:</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><br/><span class="hl-1"> });</span><br/><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#Status: </span><span class="hl-5">${</span><span class="hl-2">$user</span><span class="hl-9">.</span><span class="hl-2">active</span><span class="hl-9"> </span><span class="hl-1">?</span><span class="hl-9"> </span><span class="hl-3">'Active'</span><span class="hl-9"> </span><span class="hl-1">:</span><span class="hl-9"> </span><span class="hl-3">'Inactive'</span><span class="hl-5">}</span><span class="hl-3">`</span><span class="hl-1">);</span><br/><span class="hl-1">});</span>
|
|
209
209
|
</code><button type="button">Copy</button></pre>
|
|
210
210
|
|
|
211
|
-
<h2 id="css" class="tsd-anchor-link">CSS<a href="#css" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Through the <a href="../aberdeen/
|
|
211
|
+
<h2 id="css" class="tsd-anchor-link">CSS<a href="#css" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Through the <a href="../aberdeen/Aberdeen/#insertcss" class="tsd-kind-method">A.insertCss</a> function, Aberdeen provides a way to create component-local CSS.</p>
|
|
212
212
|
<p>For simple single-element styles, you can pass a string directly:</p>
|
|
213
213
|
<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-5">const</span><span class="hl-1"> </span><span class="hl-6">simpleCard</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">"bg:#f0f0f0 p:$3 r:8px"</span><span class="hl-1">);</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-2">simpleCard</span><span class="hl-1">, </span><span class="hl-3">'#Card content'</span><span class="hl-1">);</span>
|
|
214
214
|
</code><button type="button">Copy</button></pre>
|
|
@@ -218,7 +218,7 @@
|
|
|
218
218
|
</code><button type="button">Copy</button></pre>
|
|
219
219
|
|
|
220
220
|
<p>The <code>"&"</code> selector refers to the element with the generated class itself. Child selectors like <code>"button"</code> are scoped to descendants of that element, while pseudo-selectors like <code>"&:hover"</code> apply to the element itself.</p>
|
|
221
|
-
<p>This allows you to create single-file components with advanced CSS rules. The <a href="../aberdeen/
|
|
221
|
+
<p>This allows you to create single-file components with advanced CSS rules. The <a href="../aberdeen/Aberdeen/#insertglobalcss" class="tsd-kind-method">A.insertGlobalCss</a> function can be used to add CSS without a class prefix - it accepts the same string or object syntax.</p>
|
|
222
222
|
<p>Both functions support the same CSS shortcuts and variables as inline styles (see above). For example:</p>
|
|
223
223
|
<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-6">A</span><span class="hl-1">.</span><span class="hl-2">cssVars</span><span class="hl-1">.</span><span class="hl-2">boxBg</span><span class="hl-1"> = </span><span class="hl-3">'#f0f0e0'</span><span class="hl-1">;</span><br/><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">insertGlobalCss</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-3">"body"</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">"m:0"</span><span class="hl-1">, </span><span class="hl-4">// Using shortcut for margin</span><br/><span class="hl-1"> </span><span class="hl-3">"form"</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-3">"bg:$boxBg mv:$3"</span><span class="hl-1"> </span><span class="hl-4">// Using background shortcut, CSS variable, and spacing value</span><br/><span class="hl-1">});</span>
|
|
224
224
|
</code><button type="button">Copy</button></pre>
|
|
@@ -236,7 +236,7 @@
|
|
|
236
236
|
<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-0">import</span><span class="hl-1"> { </span><span class="hl-2">grow</span><span class="hl-1">, </span><span class="hl-2">shrink</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'aberdeen/transitions'</span><span class="hl-1">;</span><br/><br/><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-5">const</span><span class="hl-1"> </span><span class="hl-7">randomInt</span><span class="hl-1"> = (</span><span class="hl-2">max</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">Math</span><span class="hl-1">.</span><span class="hl-7">random</span><span class="hl-1">() * </span><span class="hl-2">max</span><span class="hl-1">);</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-7">randomWord</span><span class="hl-1"> = () </span><span class="hl-5">=></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-7">toString</span><span class="hl-1">(</span><span class="hl-8">36</span><span class="hl-1">).</span><span class="hl-7">substring</span><span class="hl-1">(</span><span class="hl-8">2</span><span class="hl-1">, </span><span class="hl-8">12</span><span class="hl-1">).</span><span class="hl-7">replace</span><span class="hl-1">(</span><span class="hl-11">/</span><span class="hl-12">[</span><span class="hl-11">0-9</span><span class="hl-12">]</span><span class="hl-13">+</span><span class="hl-11">/</span><span class="hl-5">g</span><span class="hl-1">, </span><span class="hl-3">''</span><span class="hl-1">).</span><span class="hl-7">replace</span><span class="hl-1">(</span><span class="hl-11">/</span><span class="hl-14">^</span><span class="hl-11">\w/</span><span class="hl-1">, </span><span class="hl-2">c</span><span class="hl-1"> </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">c</span><span class="hl-1">.</span><span class="hl-7">toUpperCase</span><span class="hl-1">());</span><br/><br/><span class="hl-4">// Make random mutations</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-7">randomInt</span><span class="hl-1">(</span><span class="hl-8">3</span><span class="hl-1">)) </span><span class="hl-2">$items</span><span class="hl-1">[</span><span class="hl-7">randomInt</span><span class="hl-1">(</span><span class="hl-8">7</span><span class="hl-1">)] = {</span><span class="hl-2">label:</span><span class="hl-1"> </span><span class="hl-7">randomWord</span><span class="hl-1">(), </span><span class="hl-2">prio:</span><span class="hl-1"> </span><span class="hl-7">randomInt</span><span class="hl-1">(</span><span class="hl-8">4</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-5">delete</span><span class="hl-1"> </span><span class="hl-2">$items</span><span class="hl-1">[</span><span class="hl-7">randomInt</span><span class="hl-1">(</span><span class="hl-8">7</span><span class="hl-1">)];</span><br/><span class="hl-1">}, </span><span class="hl-8">500</span><span class="hl-1">);</span><br/><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'div.row.wide height:250px'</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.box#By 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-6">A</span><span class="hl-1">.</span><span class="hl-7">onEach</span><span class="hl-1">(</span><span class="hl-2">$items</span><span class="hl-1">, (</span><span class="hl-2">$item</span><span class="hl-1">, </span><span class="hl-2">index</span><span class="hl-1">) </span><span class="hl-5">=></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">`li#</span><span class="hl-5">${</span><span class="hl-2">$item</span><span class="hl-9">.</span><span class="hl-2">label</span><span class="hl-5">}</span><span class="hl-3"> (prio </span><span class="hl-5">${</span><span class="hl-2">$item</span><span class="hl-9">.</span><span class="hl-2">prio</span><span class="hl-5">}</span><span class="hl-3">)`</span><span class="hl-1">, {</span><span class="hl-2">create:</span><span class="hl-1"> </span><span class="hl-2">grow</span><span class="hl-1">, </span><span class="hl-2">destroy:</span><span class="hl-1"> </span><span class="hl-2">shrink</span><span class="hl-1">})</span><br/><span class="hl-1"> });</span><br/><span class="hl-1"> })</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'div.box#By label'</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-7">onEach</span><span class="hl-1">(</span><span class="hl-2">$items</span><span class="hl-1">, (</span><span class="hl-2">$item</span><span class="hl-1">, </span><span class="hl-2">index</span><span class="hl-1">) </span><span class="hl-5">=></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">`li#</span><span class="hl-5">${</span><span class="hl-2">$item</span><span class="hl-9">.</span><span class="hl-2">label</span><span class="hl-5">}</span><span class="hl-3"> (prio </span><span class="hl-5">${</span><span class="hl-2">$item</span><span class="hl-9">.</span><span class="hl-2">prio</span><span class="hl-5">}</span><span class="hl-3">)`</span><span class="hl-1">, {</span><span class="hl-2">create:</span><span class="hl-1"> </span><span class="hl-2">grow</span><span class="hl-1">, </span><span class="hl-2">destroy:</span><span class="hl-1"> </span><span class="hl-2">shrink</span><span class="hl-1">})</span><br/><span class="hl-1"> }, </span><span class="hl-2">$item</span><span class="hl-1"> </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">$item</span><span class="hl-1">.</span><span class="hl-2">label</span><span class="hl-1">);</span><br/><span class="hl-1"> })</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'div.box#By desc prio, then label'</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-7">onEach</span><span class="hl-1">(</span><span class="hl-2">$items</span><span class="hl-1">, (</span><span class="hl-2">$item</span><span class="hl-1">, </span><span class="hl-2">index</span><span class="hl-1">) </span><span class="hl-5">=></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">`li#</span><span class="hl-5">${</span><span class="hl-2">$item</span><span class="hl-9">.</span><span class="hl-2">label</span><span class="hl-5">}</span><span class="hl-3"> (prio </span><span class="hl-5">${</span><span class="hl-2">$item</span><span class="hl-9">.</span><span class="hl-2">prio</span><span class="hl-5">}</span><span class="hl-3">)`</span><span class="hl-1">, {</span><span class="hl-2">create:</span><span class="hl-1"> </span><span class="hl-2">grow</span><span class="hl-1">, </span><span class="hl-2">destroy:</span><span class="hl-1"> </span><span class="hl-2">shrink</span><span class="hl-1">})</span><br/><span class="hl-1"> }, </span><span class="hl-2">$item</span><span class="hl-1"> </span><span class="hl-5">=></span><span class="hl-1"> [-</span><span class="hl-2">$item</span><span class="hl-1">.</span><span class="hl-2">prio</span><span class="hl-1">, </span><span class="hl-2">$item</span><span class="hl-1">.</span><span class="hl-2">label</span><span class="hl-1">]);</span><br/><span class="hl-1"> })</span><br/><span class="hl-1">});</span>
|
|
237
237
|
</code><button type="button">Copy</button></pre>
|
|
238
238
|
|
|
239
|
-
<h2 id="advanced-peeking-without-subscribing" class="tsd-anchor-link">Advanced: Peeking without subscribing<a href="#advanced-peeking-without-subscribing" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Sometimes you need to read reactive data inside an observer scope without creating a subscription to that data. The <a href="../aberdeen/peek
|
|
239
|
+
<h2 id="advanced-peeking-without-subscribing" class="tsd-anchor-link">Advanced: Peeking without subscribing<a href="#advanced-peeking-without-subscribing" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Sometimes you need to read reactive data inside an observer scope without creating a subscription to that data. The <a href="../aberdeen/Aberdeen/#peek" class="tsd-kind-method">A.peek</a> function allows you to do this:</p>
|
|
240
240
|
<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-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/><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">// This scope only re-runs when $data.a changes</span><br/><span class="hl-1"> </span><span class="hl-4">// Changes to $data.b won't trigger a re-render</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">`h2#a == </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 == </span><span class="hl-5">${</span><span class="hl-6">A</span><span class="hl-9">.</span><span class="hl-7">peek</span><span class="hl-9">(</span><span class="hl-2">$data</span><span class="hl-9">, </span><span class="hl-3">'b'</span><span class="hl-9">)</span><span class="hl-5">}</span><span class="hl-3">`</span><span class="hl-1">);</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">`button text="a++ (will update)" click=`</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">a</span><span class="hl-1">++);</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">`button ml:1rem text="b++ (won't update)" click=`</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>
|
|
241
241
|
</code><button type="button">Copy</button></pre>
|
|
242
242
|
|
|
@@ -249,19 +249,19 @@
|
|
|
249
249
|
<pre><code class="javascript"><span class="hl-4">// NOTE: See below for a better way.</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$original</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">1</span><span class="hl-1">);</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$derived</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-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-2">$derived</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1"> = </span><span class="hl-2">$original</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1"> * </span><span class="hl-8">42</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">'h3 text='</span><span class="hl-1">, </span><span class="hl-2">$derived</span><span class="hl-1">);</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'button text=Increment click='</span><span class="hl-1">, () </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">$original</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1">++);</span>
|
|
250
250
|
</code><button type="button">Copy</button></pre>
|
|
251
251
|
|
|
252
|
-
<p>The <a href="../aberdeen/derive
|
|
252
|
+
<p>The <a href="../aberdeen/Aberdeen/#derive" class="tsd-kind-method">A.derive</a> function makes the above a little easier. It works just like passing a function to <a href="../aberdeen/Aberdeen/" class="tsd-kind-interface">A</a>, creating an observer, the only difference being that the value returned by the function is reactively assigned to the <code>value</code> property of the observable object returned by <code>derive</code>. So the above could also be written as:</p>
|
|
253
253
|
<pre><code class="javascript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$original</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">1</span><span class="hl-1">);</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$derived</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">$original</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1"> * </span><span class="hl-8">42</span><span class="hl-1">);</span><br/><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'h3 text='</span><span class="hl-1">, </span><span class="hl-2">$derived</span><span class="hl-1">);</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'button text=Increment click='</span><span class="hl-1">, () </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">$original</span><span class="hl-1">.</span><span class="hl-2">value</span><span class="hl-1">++);</span>
|
|
254
254
|
</code><button type="button">Copy</button></pre>
|
|
255
255
|
|
|
256
|
-
<p>For deriving values from (possibly large) arrays, objects, Maps or Sets, Aberdeen provides specialized functions that enable fast, incremental updates to derived data: <a href="../aberdeen/map
|
|
256
|
+
<p>For deriving values from (possibly large) arrays, objects, Maps or Sets, Aberdeen provides specialized functions that enable fast, incremental updates to derived data: <a href="../aberdeen/Aberdeen/#map" class="tsd-kind-method">A.map</a> (each item becomes zero or one derived item), <a href="../aberdeen/Aberdeen/#multimap" class="tsd-kind-method">A.multiMap</a> (each item becomes any number of derived items), <a href="../aberdeen/Aberdeen/#count" class="tsd-kind-method">A.count</a> (reactively counts the number of object properties or collection items), <a href="../aberdeen/Aberdeen/#isempty" class="tsd-kind-method">A.isEmpty</a> (true when the object/array/Map/Set has no items) and <a href="../aberdeen/Aberdeen/#partition" class="tsd-kind-method">A.partition</a> (sorts each item into one or more buckets). An example:</p>
|
|
257
257
|
<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">// Create some random data</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$people</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-5">const</span><span class="hl-1"> </span><span class="hl-7">randomInt</span><span class="hl-1"> = (</span><span class="hl-2">max</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">Math</span><span class="hl-1">.</span><span class="hl-7">random</span><span class="hl-1">() * </span><span class="hl-2">max</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><br/><span class="hl-1"> </span><span class="hl-2">$people</span><span class="hl-1">[</span><span class="hl-7">randomInt</span><span class="hl-1">(</span><span class="hl-8">250</span><span class="hl-1">)] = {</span><span class="hl-2">height:</span><span class="hl-1"> </span><span class="hl-8">150</span><span class="hl-1">+</span><span class="hl-7">randomInt</span><span class="hl-1">(</span><span class="hl-8">60</span><span class="hl-1">), </span><span class="hl-2">weight:</span><span class="hl-1"> </span><span class="hl-8">45</span><span class="hl-1">+</span><span class="hl-7">randomInt</span><span class="hl-1">(</span><span class="hl-8">90</span><span class="hl-1">)};</span><br/><span class="hl-1">}, </span><span class="hl-8">250</span><span class="hl-1">);</span><br/><br/><span class="hl-4">// Do some mapping, counting and observing</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$totalCount</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">$people</span><span class="hl-1">);</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$bmis</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">map</span><span class="hl-1">(</span><span class="hl-2">$people</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">$person</span><span class="hl-1"> </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">Math</span><span class="hl-1">.</span><span class="hl-7">round</span><span class="hl-1">(</span><span class="hl-2">$person</span><span class="hl-1">.</span><span class="hl-2">weight</span><span class="hl-1"> / ((</span><span class="hl-2">$person</span><span class="hl-1">.</span><span class="hl-2">height</span><span class="hl-1">/</span><span class="hl-8">100</span><span class="hl-1">) ** </span><span class="hl-8">2</span><span class="hl-1">))</span><br/><span class="hl-1">);</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$overweightBmis</span><span class="hl-1"> = </span><span class="hl-6">A</span><span class="hl-1">.</span><span class="hl-7">map</span><span class="hl-1">(</span><span class="hl-2">$bmis</span><span class="hl-1">, </span><span class="hl-4">// Use A.map() as a filter</span><br/><span class="hl-1"> </span><span class="hl-2">bmi</span><span class="hl-1"> </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">bmi</span><span class="hl-1"> > </span><span class="hl-8">25</span><span class="hl-1"> ? </span><span class="hl-2">bmi</span><span class="hl-1"> : </span><span class="hl-5">undefined</span><br/><span class="hl-1">); </span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$overweightCount</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">$overweightBmis</span><span class="hl-1">);</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$message</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><br/><span class="hl-1"> () </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-3">`There are </span><span class="hl-5">${</span><span class="hl-2">$totalCount</span><span class="hl-9">.</span><span class="hl-2">value</span><span class="hl-5">}</span><span class="hl-3"> people, of which </span><span class="hl-5">${</span><span class="hl-2">$overweightCount</span><span class="hl-9">.</span><span class="hl-2">value</span><span class="hl-5">}</span><span class="hl-3"> are overweight.`</span><br/><span class="hl-1">);</span><br/><br/><span class="hl-4">// Show the results</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'p text='</span><span class="hl-1">, </span><span class="hl-2">$message</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">// isEmpty only causes a re-run when the count changes between zero and non-zero</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">$overweightBmis</span><span class="hl-1">)) </span><span class="hl-0">return</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#These are their BMIs:'</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-7">onEach</span><span class="hl-1">(</span><span class="hl-2">$overweightBmis</span><span class="hl-1">, </span><span class="hl-2">bmi</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">'# '</span><span class="hl-1">+</span><span class="hl-2">bmi</span><span class="hl-1">), </span><span class="hl-2">bmi</span><span class="hl-1"> </span><span class="hl-5">=></span><span class="hl-1"> -</span><span class="hl-2">bmi</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-4">// Sort by descending BMI</span><br/><span class="hl-1"> });</span><br/><span class="hl-1">})</span>
|
|
258
258
|
</code><button type="button">Copy</button></pre>
|
|
259
259
|
|
|
260
|
-
<h2 id="ui-components" class="tsd-anchor-link">UI Components<a href="#ui-components" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>UI Components in Aberdeen are just functions, named <code>draw<Something></code> by convention, that use <a href="../aberdeen/
|
|
260
|
+
<h2 id="ui-components" class="tsd-anchor-link">UI Components<a href="#ui-components" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>UI Components in Aberdeen are just functions, named <code>draw<Something></code> by convention, that use <a href="../aberdeen/Aberdeen/" class="tsd-kind-interface">A</a> to create some DOM structure. They can accept arguments, return (proxied) values and create local (proxied) state just like any other function.</p>
|
|
261
261
|
<pre><code class="javascript"><span class="hl-5">function</span><span class="hl-1"> </span><span class="hl-7">drawCounter</span><span class="hl-1">(</span><span class="hl-2">initialValue</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-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">proxy</span><span class="hl-1">(</span><span class="hl-2">initialValue</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.row'</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">'button text=- click='</span><span class="hl-1">, () </span><span class="hl-5">=></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-1"> </span><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-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'button text=+ click='</span><span class="hl-1">, () </span><span class="hl-5">=></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-1"> });</span><br/><span class="hl-1"> </span><span class="hl-0">return</span><span class="hl-1"> </span><span class="hl-2">$count</span><span class="hl-1">; </span><span class="hl-4">// Return the reactive count value for external use</span><br/><span class="hl-1">}</span><br/><span class="hl-4">// Create multiple independent instances:</span><br/><span class="hl-7">drawCounter</span><span class="hl-1">();</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">$second</span><span class="hl-1"> = </span><span class="hl-7">drawCounter</span><span class="hl-1">(</span><span class="hl-8">42</span><span class="hl-1">);</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'input value='</span><span class="hl-1">, </span><span class="hl-2">$second</span><span class="hl-1">); </span><span class="hl-4">// Bind the second counter to an input field</span>
|
|
262
262
|
</code><button type="button">Copy</button></pre>
|
|
263
263
|
|
|
264
|
-
<h2 id="debugging-with-adump" class="tsd-anchor-link">Debugging with A.dump()<a href="#debugging-with-adump" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>The <a href="../aberdeen/dump
|
|
264
|
+
<h2 id="debugging-with-adump" class="tsd-anchor-link">Debugging with A.dump()<a href="#debugging-with-adump" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>The <a href="../aberdeen/Aberdeen/#dump" class="tsd-kind-method">A.dump</a> function creates a live, interactive tree view of any data structure in the DOM. It's particularly useful for debugging reactive state:</p>
|
|
265
265
|
<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-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">// The A.dump updates automatically as $state changes</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'button text="Update state" click='</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">$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><br/><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">'new'</span><span class="hl-1">);</span><br/><span class="hl-1">});</span>
|
|
266
266
|
</code><button type="button">Copy</button></pre>
|
|
267
267
|
|
|
@@ -275,19 +275,19 @@
|
|
|
275
275
|
<p>Caveat: This tool has been vibe coded (thanks Claude!) with very little code review. As it doesn't use the filesystem nor the network, I'd say it's safe to use though! :-) Also, it happens to work pretty well.</p>
|
|
276
276
|
</blockquote>
|
|
277
277
|
<h2 id="routing" class="tsd-anchor-link">Routing<a href="#routing" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Aberdeen provides an optional built-in router via the <a href="../route/" class="tsd-kind-module"> route</a> module. The router is reactive and integrates seamlessly with browser history.</p>
|
|
278
|
-
<p>The <a href="../route/current
|
|
278
|
+
<p>The <a href="../route/RouteApi/#current" class="tsd-kind-property">route.current</a> object is an observable that reflects the current URL:</p>
|
|
279
279
|
<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-0">import</span><span class="hl-1"> </span><span class="hl-5">*</span><span class="hl-1"> </span><span class="hl-0">as</span><span class="hl-1"> </span><span class="hl-2">route</span><span class="hl-1"> </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'aberdeen/route'</span><span class="hl-1">;</span><br/><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-7">A</span><span class="hl-1">(</span><span class="hl-3">`p#Path string: </span><span class="hl-5">${</span><span class="hl-2">route</span><span class="hl-9">.</span><span class="hl-2">current</span><span class="hl-9">.</span><span class="hl-2">path</span><span class="hl-5">}</span><span class="hl-3">`</span><span class="hl-1">); </span><span class="hl-4">// eg "/example/123"</span><br/><span class="hl-1"> </span><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">`p#Path segments: </span><span class="hl-5">${</span><span class="hl-6">JSON</span><span class="hl-9">.</span><span class="hl-7">stringify</span><span class="hl-9">(</span><span class="hl-2">route</span><span class="hl-9">.</span><span class="hl-2">current</span><span class="hl-9">.</span><span class="hl-2">p</span><span class="hl-9">)</span><span class="hl-5">}</span><span class="hl-3">`</span><span class="hl-1">); </span><span class="hl-4">// eg ["example", "123"]</span><br/><span class="hl-1">});</span>
|
|
280
280
|
</code><button type="button">Copy</button></pre>
|
|
281
281
|
|
|
282
|
-
<p>To navigate programmatically, use <a href="../route/go
|
|
282
|
+
<p>To navigate programmatically, use <a href="../route/RouteApi/#go" class="tsd-kind-method">route.go</a>:</p>
|
|
283
283
|
<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-0">import</span><span class="hl-1"> </span><span class="hl-5">*</span><span class="hl-1"> </span><span class="hl-0">as</span><span class="hl-1"> </span><span class="hl-2">route</span><span class="hl-1"> </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'aberdeen/route'</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-3">'pn'</span><span class="hl-1">, </span><span class="hl-2">location</span><span class="hl-1">.</span><span class="hl-2">protocol</span><span class="hl-1">, </span><span class="hl-2">location</span><span class="hl-1">.</span><span class="hl-2">host</span><span class="hl-1">, </span><span class="hl-2">location</span><span class="hl-1">.</span><span class="hl-2">hostname</span><span class="hl-1">, </span><span class="hl-2">location</span><span class="hl-1">.</span><span class="hl-2">pathname</span><span class="hl-1">);</span><br/><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'button#Go to settings'</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-7">click</span><span class="hl-2">:</span><span class="hl-1"> () </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">route</span><span class="hl-1">.</span><span class="hl-7">go</span><span class="hl-1">(</span><span class="hl-3">'/settings'</span><span class="hl-1">)</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-4">// Or using path segments</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'button ml:1rem #Go to user 123'</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-7">click</span><span class="hl-2">:</span><span class="hl-1"> () </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">route</span><span class="hl-1">.</span><span class="hl-7">go</span><span class="hl-1">({</span><span class="hl-2">p:</span><span class="hl-1"> [</span><span class="hl-3">'users'</span><span class="hl-1">, </span><span class="hl-8">123</span><span class="hl-1">]})</span><br/><span class="hl-1">});</span>
|
|
284
284
|
</code><button type="button">Copy</button></pre>
|
|
285
285
|
|
|
286
|
-
<p>For convenience, you can call <a href="../route/
|
|
286
|
+
<p>For convenience, you can call <a href="../route/RouteApi/#interceptlinks" class="tsd-kind-method">route.interceptLinks</a> once to automatically convert clicks on local <code><a></code> tags into Aberdeen routing, so you can use regular anchor tags without manual click handlers. Example: <code>A('a href=/settings text=Settings')</code>.</p>
|
|
287
287
|
<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-0">import</span><span class="hl-1"> </span><span class="hl-5">*</span><span class="hl-1"> </span><span class="hl-0">as</span><span class="hl-1"> </span><span class="hl-2">route</span><span class="hl-1"> </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'aberdeen/route'</span><span class="hl-1">;</span><br/><br/><span class="hl-2">route</span><span class="hl-1">.</span><span class="hl-7">interceptLinks</span><span class="hl-1">(); </span><span class="hl-4">// Just once on startup:</span><br/><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'a role=button href=/settings #Go to settings'</span><span class="hl-1">)</span>
|
|
288
288
|
</code><button type="button">Copy</button></pre>
|
|
289
289
|
|
|
290
|
-
<p>The <a href="../route/push
|
|
290
|
+
<p>The <a href="../route/RouteApi/#push" class="tsd-kind-method">route.push</a> function is useful for overlays that should be closeable with browser back:</p>
|
|
291
291
|
<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-0">import</span><span class="hl-1"> </span><span class="hl-5">*</span><span class="hl-1"> </span><span class="hl-0">as</span><span class="hl-1"> </span><span class="hl-2">route</span><span class="hl-1"> </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'aberdeen/route'</span><span class="hl-1">;</span><br/><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'button#Open modal'</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-7">click</span><span class="hl-2">:</span><span class="hl-1"> () </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">route</span><span class="hl-1">.</span><span class="hl-7">push</span><span class="hl-1">({</span><span class="hl-2">state:</span><span class="hl-1"> {</span><span class="hl-2">modal:</span><span class="hl-1"> </span><span class="hl-3">'settings'</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-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">route</span><span class="hl-1">.</span><span class="hl-2">current</span><span class="hl-1">.</span><span class="hl-2">state</span><span class="hl-1">.</span><span class="hl-2">modal</span><span class="hl-1">) </span><span class="hl-0">return</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.modal-overlay'</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-7">click</span><span class="hl-2">:</span><span class="hl-1"> () </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">route</span><span class="hl-1">.</span><span class="hl-7">back</span><span class="hl-1">({</span><span class="hl-2">state:</span><span class="hl-1"> {</span><span class="hl-2">modal:</span><span class="hl-1"> </span><span class="hl-5">undefined</span><span class="hl-1">}})</span><br/><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.modal#Modal content here'</span><span class="hl-1">);</span><br/><span class="hl-1"> });</span><br/><span class="hl-1">});</span>
|
|
292
292
|
</code><button type="button">Copy</button></pre>
|
|
293
293
|
|
|
@@ -302,4 +302,4 @@
|
|
|
302
302
|
<li><a href="https://aberdeenjs.org/modules.html">Reference documentation</a></li>
|
|
303
303
|
<li><a href="https://aberdeenjs.org/#examples">Examples</a></li>
|
|
304
304
|
</ul>
|
|
305
|
-
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#tutorial"><span>Tutorial</span></a><ul><li><a href="#creating-elements"><span>Creating elements</span></a></li><li><a href="#inline-styles"><span>Inline styles</span></a></li><li><ul><li><a href="#property-shortcuts"><span>Property shortcuts</span></a></li><li><a href="#css-variables"><span>CSS variables</span></a></li><li><a href="#spacing-variables"><span>Spacing variables</span></a></li></ul></li><li><a href="#nesting-content"><span>Nesting content</span></a></li><li><a href="#observable-objects"><span>Observable objects</span></a></li><li><a href="#conditional-rendering"><span>Conditional rendering</span></a></li><li><a href="#observable-primitive-values"><span>Observable primitive values</span></a></li><li><a href="#observable-arrays-and-sets"><span>Observable arrays and sets</span></a></li><li><a href="#typescript-and-classes"><span>Type<wbr/>Script and classes</span></a></li><li><a href="#efficient-list-rendering-with-aoneach"><span>Efficient list rendering with <wbr/>A.on<wbr/>Each</span></a></li><li><a href="#two-way-binding"><span>Two-<wbr/>way binding</span></a></li><li><a href="#css"><span>CSS</span></a></li><li><a href="#transitions"><span>Transitions</span></a></li><li><a href="#advanced-peeking-without-subscribing"><span>Advanced: <wbr/>Peeking without subscribing</span></a></li><li><a href="#derived-values"><span>Derived values</span></a></li><li><a href="#ui-components"><span>UI <wbr/>Components</span></a></li><li><a href="#debugging-with-adump"><span>Debugging with <wbr/>A.dump()</span></a></li><li><a href="#html-to-aberdeen"><span>html-<wbr/>to-<wbr/>aberdeen</span></a></li><li><a href="#routing"><span>Routing</span></a></li><li><a href="#prediction"><span>Prediction</span></a></li><li><a href="#full-example-multi-page-app"><span>Full <wbr/>Example: <wbr/>Multi-<wbr/>page <wbr/>App</span></a></li><li><a href="#further-reading"><span>Further reading</span></a></li></ul></div></details></div><div class="site-menu"><nav id="tsd-sidebar-links" class="tsd-navigation"><a href="https://aberdeenjs.org/" class="tsd-nav-link">What'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 -
|
|
305
|
+
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#tutorial"><span>Tutorial</span></a><ul><li><a href="#creating-elements"><span>Creating elements</span></a></li><li><a href="#inline-styles"><span>Inline styles</span></a></li><li><ul><li><a href="#property-shortcuts"><span>Property shortcuts</span></a></li><li><a href="#css-variables"><span>CSS variables</span></a></li><li><a href="#spacing-variables"><span>Spacing variables</span></a></li></ul></li><li><a href="#nesting-content"><span>Nesting content</span></a></li><li><a href="#observable-objects"><span>Observable objects</span></a></li><li><a href="#conditional-rendering"><span>Conditional rendering</span></a></li><li><a href="#observable-primitive-values"><span>Observable primitive values</span></a></li><li><a href="#observable-arrays-and-sets"><span>Observable arrays and sets</span></a></li><li><a href="#typescript-and-classes"><span>Type<wbr/>Script and classes</span></a></li><li><a href="#efficient-list-rendering-with-aoneach"><span>Efficient list rendering with <wbr/>A.on<wbr/>Each</span></a></li><li><a href="#two-way-binding"><span>Two-<wbr/>way binding</span></a></li><li><a href="#css"><span>CSS</span></a></li><li><a href="#transitions"><span>Transitions</span></a></li><li><a href="#advanced-peeking-without-subscribing"><span>Advanced: <wbr/>Peeking without subscribing</span></a></li><li><a href="#derived-values"><span>Derived values</span></a></li><li><a href="#ui-components"><span>UI <wbr/>Components</span></a></li><li><a href="#debugging-with-adump"><span>Debugging with <wbr/>A.dump()</span></a></li><li><a href="#html-to-aberdeen"><span>html-<wbr/>to-<wbr/>aberdeen</span></a></li><li><a href="#routing"><span>Routing</span></a></li><li><a href="#prediction"><span>Prediction</span></a></li><li><a href="#full-example-multi-page-app"><span>Full <wbr/>Example: <wbr/>Multi-<wbr/>page <wbr/>App</span></a></li><li><a href="#further-reading"><span>Further reading</span></a></li></ul></div></details></div><div class="site-menu"><nav id="tsd-sidebar-links" class="tsd-navigation"><a href="https://aberdeenjs.org/" class="tsd-nav-link">What's this?</a><a href="https://aberdeenjs.org/Tutorial/" class="tsd-nav-link">Tutorial</a><a href="https://github.com/vanviegen/aberdeen" class="tsd-nav-link">GitHub</a></nav><nav class="tsd-navigation"><a href="../modules.html">Aberdeen - v2.0.0</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>
|