https://github.com/macfja/svelte-undoable

Memento design pattern in Svelte
https://github.com/macfja/svelte-undoable

memento stores svelte svelte-component sveltejs

Last synced: about 2 months ago
JSON representation

Memento design pattern in Svelte

• Host: GitHub
• URL: https://github.com/macfja/svelte-undoable
• Owner: MacFJA
• License: mit
• Created: 2020-09-12T10:19:41.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-02-20T18:48:01.000Z (almost 4 years ago)
• Last Synced: 2024-10-11T12:45:49.844Z (2 months ago)
• Topics: memento, stores, svelte, svelte-component, sveltejs
• Language: TypeScript
• Homepage:
• Size: 109 KB
• Stars: 45
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-svelte-stores - @macfja/svelte-undoable

README

        
# Svelte Undoable store

Memento design pattern in Svelte

## Installation

```

npm install @macfja/svelte-undoable

```

## Usage

```javascript

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

```html

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())

Hello {$name}


 undo(name)}>Undo

 redo(name)}>Redo

 reset(name)}>Reset



Only even number as saved in the store history. The maximum number of remembered value is 10.

(If you go to 20, you can only go back to 2)


 $counter++}>

  Clicked {$counter} {$counter === 1 ? 'time' : 'times'}

 undo(counter)}>Undo

 redo(counter)}>Redo

```

([REPL](https://svelte.dev/repl/9412d77adca64a668055027e84619090?version=3.25.0))

## 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](CONTRIBUTING.md)

## License

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.