Improve documentation for skooma/bind

This commit is contained in:
Talia 2022-01-14 11:57:21 +01:00
parent 23f8a30af6
commit 8697c168dc
1 changed files with 21 additions and 24 deletions

View File

@ -207,14 +207,10 @@
</dd> </dd>
<dt>Transform function</dt> <dt>Transform function</dt>
<dd> <dd>
A function that takes the initial or updated state and returns a new A function that takes the initial or updated state and returns a
HTML element. new HTML element.
<details><summary>Planned feature</summary> If the function returns a non-truthy value, the element won't be
When no HTML element is returned, nothing happens. This can be replaced.
used to update the existing element instead; however, the
function currently provides no means to access the old element in
the transform function.
</details>
</dd> </dd>
</dl> </dl>
</p> </p>
@ -225,23 +221,24 @@
be a function to register a callback to be called whenever the counter be a function to register a callback to be called whenever the counter
gets updated. gets updated.
</p> </p>
<div class="columns"> <code-block>
<h3>Creating a new Element</h3> // onIncrement doesn't return an initial state, so we have to wrap it:
<h3>Updating the old Element</h3> let bindCount = bind(callback =&gt; counter.onIncrement(callback) || [counter.count])
<code-block>
let counterMessage = count =&gt;
text`Current count: ${html.b(count)}`
// onIncrement doesn't return an initial
// state, so we have to wrap it:
let onIncrement = bind(callback =&gt;
counter.onIncrement(callback) || counter.count)
return boundElement = onIncrement(counterMessage) let counterMessage = count =&gt; text`Current count: ${html.b(count)}`
</code-block>
<code-block> return bindCount(counterMessage)
// Not yet implemented </code-block>
</code-block>
</div> <p>
This can also be broken down to text nodes for more atomic updates.
</p>
<code-block>
// onIncrement doesn't return an initial state, so we have to wrap it:
let bindCount = bind(callback =&gt; counter.onIncrement(callback) || [counter.count])
return text`Current count: ${bindCount(text)}`
</code-block>
<p> <p>
When an element gets replaced with a newer version of itself, any variable When an element gets replaced with a newer version of itself, any variable