StateHistory
Track the change history of a value, providing undo and redo functionality
Demo
0
/
History (limited to 10 records for demo)
Usage
StateHistory
tracks a getter's return value, logging each change into an array. A setter is also
required to use the undo
and redo
functions.
import { StateHistory } from "runed";
let count = $state(0);
const history = new StateHistory(() => count, (c) => (count = c));
history.log[0]; // { snapshot: 0, timestamp: ... }
Besides log
, the returned object contains undo
and redo
functionality.
<script lang="ts">
import { useStateHistory } from "runed";
let count = $state(0);
const history = new StateHistory(() => count, (c) => (count = c));
function format(ts: number) {
return new Date(ts).toLocaleString();
}
</script>
<p>{count}</p>
<button onclick={() => count++}>Increment</button>
<button onclick={() => count--}>Decrement</button>
<button disabled={!history.canUndo} onclick={history.undo}>Undo</button>
<button disabled={!history.canRedo} onclick={history.redo}>Redo</button>