Improve documentation for skooma/bind

page/skooma.html

@@ -207,14 +207,10 @@
 			</dd>
 			<dt>Transform function</dt>
 			<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>
 		</dl>
 	</p>
@@ -225,23 +221,24 @@
 		be a function to register a callback to be called whenever the counter
 		gets updated.
 	</p>
-	<div class="columns">
-		<h3>Creating a new Element</h3>
-		<h3>Updating the old Element</h3>
 	<code-block>
-			let counterMessage = count =&gt;
+		// onIncrement doesn't return an initial state, so we have to wrap it:
-				text`Current count: ${html.b(count)}`
+		let bindCount = bind(callback =&gt; counter.onIncrement(callback) || [counter.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)}`
+
+		return bindCount(counterMessage)
 	</code-block>
+
+	<p>
+		This can also be broken down to text nodes for more atomic updates.
+	</p>
 	<code-block>
-			// Not yet implemented
+		// 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>
-	</div>
 
 	<p>
 		When an element gets replaced with a newer version of itself, any variable