Resumable: computed graph
A pricing calculator where each line is a computed reading the previous one — subtotal → discount → tax → total. The whole derived graph is re-derived live on the client from the serialized values, without ever running the component.
Tip
Change the quantity or tick "Member": subtotal, discount, tax and total all recompute in a cascade. The computeds depend on each other (computed-of-computed) and resume lazily — order doesn't matter.
Live demo
Widget — $19 each2
Subtotal$38.00
Discount−$0.00
Tax (8%)$3.04
Total$41.04
"use resumable";
import { signal, computed } from "@bext-stack/framework/signals";
const qty = signal(2);
const member = signal(false);
// a multi-level derived graph — each computed reads the previous:
const subtotal = computed(() => qty.value * 19);
const discount = computed(() => member.value ? subtotal.value * 0.1 : 0);
const tax = computed(() => (subtotal.value - discount.value) * 0.08);
const total = computed(() => subtotal.value - discount.value + tax.value);
// On resume the runtime re-derives every computed lazily:
// scope[id] = computed(() => __ccomp[id](scope))
// so total recomputes through tax → discount → subtotal automatically.