StateHistory

Track state changes with undo/redo capabilities

Demo

Count: 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, redo, and clear functionality.

		<script lang="ts">
	import { StateHistory } from "runed";
 
	let count = $state(0);
	const history = new StateHistory(() => count, (c) => (count = c));
</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>
<button onclick={history.clear}>Clear History</button>

Methods

`undo()`

Reverts the state to the previous value in the history log. The current state is moved to the redo stack.

		let count = $state(0);
const history = new StateHistory(() => count, (c) => (count = c));
 
count = 1;
count = 2;
 
history.undo(); // count is now 1
history.undo(); // count is now 0

`redo()`

Restores a previously undone state. Moves the next state from the redo stack back to the history log.

		let count = $state(0);
const history = new StateHistory(() => count, (c) => (count = c));
 
count = 1;
count = 2;
 
history.undo(); // count is now 1
history.redo();  // count is now 2

`clear()`

Clears the entire history log and redo stack, effectively resetting the state history.

		history.clear();
console.log(history.log); // []
console.log(history.canUndo); // false
console.log(history.canRedo); // false

Properties

`log`

An array of LogEvent<T> objects containing the state history. Each event has a snapshot of the state and a timestamp.

`canUndo`

A derived boolean indicating whether undo is possible (true when there's more than one item in the log).

`canRedo`

A derived boolean indicating whether redo is possible (true when the redo stack is not empty).

Contributors