trackHistory

Category Reactivity

Tracks the change history of a reactive value. Provides undo and redo capabilities as well as access to the histories.

Demo

Counter : 0 History :
  • Empty...
Redo History :
  • Empty...

Usage

TIP

If you prefer to have them combined, check out historyState.

<script>
	import { trackHistory } from '@sv-use/core';
 
	let counter = $state(0);
	const counterHistory = trackHistory(
		() => counter,
		(v) => (counter = v)
	);
</script>
Type definitions 
import type { Getter, Setter } from '../../__internal__/types.js';
type HistorySnapshot<T> = {
    snapshot: T;
    timestamp: number;
};
export type TrackHistoryOptions = {
    /**
     * Whether to include the current value in the history.
     * @default false
     */
    includeCurrent?: boolean;
};
export type TrackHistoryReturn<T> = {
    readonly canUndo: boolean;
    readonly canRedo: boolean;
    readonly history: HistorySnapshot<T>[];
    /** @note It gets cleared if the original value changes unless it was changed via {@link TrackHistoryReturn.undo | `undo`} or {@link TrackHistoryReturn.redo | `redo`}. */
    readonly redoHistory: HistorySnapshot<T>[];
    /** @note It doesn't do anything if {@link TrackHistoryReturn.canUndo | `canUndo`} is `false`. */
    undo(): void;
    /** @note It doesn't do anything if {@link TrackHistoryReturn.redo | `redo`} is `false`. */
    redo(): void;
};
/**
 * Tracks the change history of a reactive value.
 * @param value The value to track.
 * @param set The setter function to update the value.
 * @param options Additional options to customize the behavior.
 * @see https://svelte-librarian.github.io/sv-use/docs/core/reactivity/track-history
 */
export declare function trackHistory<T>(value: Getter<T>, set: Setter<T>, options?: TrackHistoryOptions): TrackHistoryReturn<T>;
export {};

Sources