Reactive Counters

Reactive Counters Example

This document demonstrates how to build reactive counters using the reactive primitives and DOM builder functions provided by the library.

---

1. Basic Counter with observable

Create a simple reactive counter that updates the displayed count when incremented.

const count = observable(0);

const counterElem = $html.div(
	$html.button({ onclick: () => count.value-- }, "-"),
	$html.span(count),
	$html.button({ onclick: () => count.value++ }, "+")
);

document.body.appendChild(counterElem);

Explanation

• count is an observable holding the numeric state.
• Buttons modify count.value directly using ++ and --.
• The <span> child is a function that automatically re-renders when count changes.

---

2. Using Computed Observables for Derived Values

You can create computed values to reflect derived state such as double count or status messages.

const doubleCount = (() => count() * 2).computed(count);

const status = (() => `Count is ${count()}`).computed(count);

const display = $html.div(
	$html.span(cstr`Double: ${doubleCount}`),
	$html.br,
	$html.span(status)
);

document.body.appendChild(display);

Notes

• Computed observables automatically update when dependencies change.
• Use .computed() on a zero-argument function, passing dependencies as arguments.

---

3. Array Observable for Multiple Counters

Manage a list of counters reactively using arrayObservable.

const counters = arrayObservable([observable(0), observable(10)]);

const addCounter = () => counters.push(observable(0));

const countersList = $html.div(
	counters.bind.map((countObs, idx) =>
		$html.div(
			$html.button({ onclick: () => countObs.value-- }, "-"),
			$html.span(countObs),
			$html.button({ onclick: () => countObs.value++ }, "+"),
			$html.span(` (Counter #${idx + 1})`)
		)
	),
	$html.button({ onclick: addCounter }, "Add Counter")
);

document.body.appendChild(countersList);

Key Points

• Each element in arrayObservable is itself an observable.
• Modifications trigger reactive updates to the UI.
• Adding/removing counters automatically updates the rendered list.

---

4. Best Practices Highlighted

• Use .value for readable increments/decrements: count.value++.
• Use observable for scalar values and arrayObservable for reactive lists.
• Use computed observables to derive data reactively.
• Pass observables or functions as children in DOM builders to enable automatic re-rendering.
• Avoid mutating observable values without notifying changes (always use provided APIs).

---

5. Summary

This example covers:

• Managing reactive state with observable and arrayObservable.
• Updating UI reactively using DOM builder functions.
• Creating derived state using fn.computed.
• Clear, readable state mutations using .value.

Reactive counters are a simple yet powerful illustration of building responsive user interfaces with the reactive primitives and DOM builder functions.