|
| 1 | +# Svelte Undoable store |
| 2 | + |
| 3 | +Memento design pattern in Svelte |
| 4 | + |
| 5 | +## Installation |
| 6 | + |
| 7 | +``` |
| 8 | +npm install @macfja/svelte-undoable |
| 9 | +``` |
| 10 | + |
| 11 | +## Usage |
| 12 | + |
| 13 | +```javascript |
| 14 | +import { undoable } from "@macfja/svelte-undoable" |
| 15 | + |
| 16 | +let name = undoable("John") |
| 17 | + |
| 18 | +$name = "Jeanne" |
| 19 | +$name = "Doe" |
| 20 | + |
| 21 | +name.undo() |
| 22 | +// Now the value of $name is "Jeanne" |
| 23 | + |
| 24 | +name.undo() |
| 25 | +// Now $name is "John" |
| 26 | + |
| 27 | +name.redo() |
| 28 | +// Now $name is "Jeanne" again |
| 29 | +``` |
| 30 | + |
| 31 | +## Example |
| 32 | + |
| 33 | +```sveltehtml |
| 34 | +<script> |
| 35 | +import { undoable, undo, redo, reset, canUndo, canRedo } from "@macfja/svelte-undoable" |
| 36 | +import { derived } from "svelte/store" |
| 37 | +
|
| 38 | +let name = undoable("John") |
| 39 | +let canUndoName = derived([name], () => canUndo(name)) |
| 40 | +let canRedoName = derived([name], () => canRedo(name)) |
| 41 | +
|
| 42 | +let counter = undoable(0, 10, value => value%2 === 0) |
| 43 | +let canUndoCounter = derived([counter], () => counter.canUndo()) |
| 44 | +let canRedoCounter = derived([counter], () => counter.canRedo()) |
| 45 | +</script> |
| 46 | +
|
| 47 | +<h1>Hello {$name}</h1> |
| 48 | +
|
| 49 | +<input bind:value={$name} /> |
| 50 | +<button disabled={!$canUndoName} on:click={() => undo(name)}>Undo</button> |
| 51 | +<button disabled={!$canRedoName} on:click={() => redo(name)}>Redo</button> |
| 52 | +<button disabled={!$canUndoName} on:click={() => reset(name)}>Reset</button> |
| 53 | +
|
| 54 | +<hr /> |
| 55 | +Only even number as saved in the store history. The maximum number of remembered value is 10. |
| 56 | +(If you go to <code>20</code>, you can only go back to <code>2</code>) |
| 57 | +
|
| 58 | +<button on:click={() => $counter++}> |
| 59 | + Clicked {$counter} {$counter === 1 ? 'time' : 'times'} |
| 60 | +</button> |
| 61 | +<button disabled={!$canUndoCounter} on:click={() => undo(counter)}>Undo</button> |
| 62 | +<button disabled={!$canRedoCounter} on:click={() => redo(counter)}>Redo</button> |
| 63 | +``` |
| 64 | +([REPL](https://svelte.dev/repl/9412d77adca64a668055027e84619090?version=3.25.0)) |
| 65 | + |
| 66 | +## Contributing |
| 67 | + |
| 68 | +Contributions are welcome. Please open up an issue or create PR if you would like to help out. |
| 69 | + |
| 70 | +Read more in the [Contributing file](CONTRIBUTING.md) |
| 71 | + |
| 72 | +## License |
| 73 | + |
| 74 | +The MIT License (MIT). Please see [License File](LICENSE.md) for more information. |
0 commit comments