@macfja/svelte-undoable

Svelte Undoable store

Memento design pattern in Svelte

Installation

npm install @macfja/svelte-undoable

Usage

import { undoable } from "@macfja/svelte-undoable"

let name = undoable("John")

$name = "Jeanne"
$name = "Doe"

name.undo()
// Now the value of $name is "Jeanne"

name.undo()
// Now $name is "John"

name.redo()
// Now $name is "Jeanne" again

Example

<script>
import { undoable, undo, redo, reset, canUndo, canRedo } from "@macfja/svelte-undoable"
import { derived } from "svelte/store"

let name = undoable("John")
let canUndoName = derived([name], () => canUndo(name))
let canRedoName = derived([name], () => canRedo(name))

let counter = undoable(0, 10, value => value%2 === 0)
let canUndoCounter = derived([counter], () => counter.canUndo())
let canRedoCounter = derived([counter], () => counter.canRedo())
</script>

<h1>Hello {$name}</h1>

<input bind:value={$name} />
<button disabled={!$canUndoName} on:click={() => undo(name)}>Undo</button>
<button disabled={!$canRedoName} on:click={() => redo(name)}>Redo</button>
<button disabled={!$canUndoName} on:click={() => reset(name)}>Reset</button>

<hr />
Only even number as saved in the store history. The maximum number of remembered value is 10.
(If you go to <code>20</code>, you can only go back to <code>2</code>)

<button on:click={() => $counter++}>
  Clicked {$counter} {$counter === 1 ? 'time' : 'times'}
</button>
<button disabled={!$canUndoCounter} on:click={() => undo(counter)}>Undo</button>
<button disabled={!$canRedoCounter} on:click={() => redo(counter)}>Redo</button>

(REPL)

Contributing

Contributions are welcome. Please open up an issue or create PR if you would like to help out.

Read more in the Contributing file

License

The MIT License (MIT). Please see License File for more information.