├── .gitignore ├── .prettierrc ├── .vscode └── settings.json ├── CHANGELOG.md ├── LICENSE ├── README.md ├── index.js ├── jsconfig.json ├── package-lock.json ├── package.json └── test └── test.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "printWidth": 100 6 | } 7 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | "files.insertFinalNewline": true 4 | } -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # svelte-undo changelog 2 | 3 | ## 1.0.2 4 | 5 | - Allow `push` to take a function 6 | 7 | ## 1.0.1 8 | 9 | - Expose `current` value 10 | 11 | ## 1.0.0 12 | 13 | - First release 14 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2021 [these people](https://github.com/Rich-Harris/svelte-undo/graphs/contributors) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # svelte-undo 2 | 3 | A small utility for managing an undo stack, that you can subscribe to in your Svelte applications (or indeed anywhere else). 4 | 5 | [Demo here](https://svelte.dev/repl/5af74b1765414b46927414815a6477d1?version=3.38.3). 6 | 7 | ## Usage 8 | 9 | ```js 10 | import { createStack } from 'svelte-undo'; 11 | 12 | let value = { answer: 42 }; 13 | 14 | const stack = createStack(value); 15 | 16 | // undo/redo have no effect if we're at the 17 | // beginning/end of the stack 18 | console.log((value = stack.undo())); // { answer: 42 } 19 | console.log((value = stack.redo())); // { answer: 42 } 20 | 21 | // stack.push returns the new value 22 | value = stack.push({ answer: 43 }); 23 | value = stack.push({ answer: 44 }); 24 | value = stack.push({ answer: 45 }); 25 | 26 | console.log(value); // { answer: 45 } 27 | 28 | console.log((value = stack.undo())); // { answer: 44 } 29 | console.log((value = stack.undo())); // { answer: 43 } 30 | console.log((value = stack.undo())); // { answer: 42 } 31 | console.log((value = stack.undo())); // { answer: 42 } 32 | 33 | console.log((value = stack.redo())); // { answer: 43 } 34 | 35 | // pushing clears anything 'forward' in the stack 36 | value = stack.push({ answer: 99 }); 37 | 38 | // you can also pass a function to `push` 39 | value = stack.push((value) => ({ answer: value.answer + 1 })); 40 | 41 | console.log((value = stack.undo())); // { answer: 99 } 42 | console.log((value = stack.undo())); // { answer: 43 } 43 | console.log((value = stack.redo())); // { answer: 99 } 44 | console.log((value = stack.redo())); // { answer: 100 } 45 | console.log((value = stack.redo())); // { answer: 100 } 46 | 47 | // you can subscribe to the state of the undo stack 48 | const unsubscribe = stack.subscribe(($stack) => { 49 | console.log($stack.first); // false 50 | console.log($stack.last); // true — we're currently at the end of the stack 51 | console.log($stack.current); // { answer: 99 } 52 | }); 53 | 54 | unsubscribe(); 55 | ``` 56 | 57 | In a Svelte component, you can reference `first` and `last` as store properties without manually subscribing: 58 | 59 | ```svelte 60 | 61 | 62 | ``` 63 | 64 | You can also access the current value of the stack, if that's preferable to tracking the value manually: 65 | 66 | ```svelte 67 |

The answer is {$stack.current.answer}

68 | ``` 69 | 70 | Don't mutate the objects you push to the undo stack; chaos will result. Instead, create a fresh copy each time, either manually or using something like [Immer](https://immerjs.github.io/immer/). 71 | 72 | ## License 73 | 74 | MIT 75 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import { writable } from 'svelte/store'; 2 | 3 | /** 4 | * @template T 5 | * @param {T} current 6 | */ 7 | export function createStack(current) { 8 | /** @type {T[]} */ 9 | const stack = [current]; 10 | 11 | let index = stack.length; 12 | 13 | const state = writable({ 14 | first: true, 15 | last: true, 16 | current 17 | }); 18 | 19 | function update() { 20 | current = stack[index - 1]; 21 | 22 | state.set({ 23 | first: index === 1, 24 | last: index === stack.length, 25 | current 26 | }); 27 | 28 | return current; 29 | } 30 | 31 | return { 32 | /** @param {T | ((current: T) => T)} value */ 33 | push: (value) => { 34 | stack.length = index; 35 | stack[index++] = 36 | typeof value === 'function' ? /** @type {(current: T) => T} */ (value)(current) : value; 37 | 38 | return update(); 39 | }, 40 | undo: () => { 41 | if (index > 1) index -= 1; 42 | return update(); 43 | }, 44 | redo: () => { 45 | if (index < stack.length) index += 1; 46 | return update(); 47 | }, 48 | subscribe: state.subscribe 49 | }; 50 | } 51 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "checkJs": true, 4 | "noImplicitAny": true, 5 | "baseUrl": ".", 6 | "moduleResolution": "node", 7 | "target": "es2020" 8 | }, 9 | "include": ["index.js", "test/*.js"] 10 | } 11 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-undo", 3 | "version": "1.0.2", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "dequal": { 8 | "version": "2.0.2", 9 | "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz", 10 | "integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==", 11 | "dev": true 12 | }, 13 | "diff": { 14 | "version": "5.0.0", 15 | "resolved": "https://registry.npmjs.org/diff/-/diff-5.0.0.tgz", 16 | "integrity": "sha512-/VTCrvm5Z0JGty/BWHljh+BAiw3IK+2j87NGMu8Nwc/f48WoDAC395uomO9ZD117ZOBaHmkX1oyLvkVM/aIT3w==", 17 | "dev": true 18 | }, 19 | "kleur": { 20 | "version": "4.1.4", 21 | "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.4.tgz", 22 | "integrity": "sha512-8QADVssbrFjivHWQU7KkMgptGTl6WAcSdlbBPY4uNF+mWr6DGcKrvY2w4FQJoXch7+fKMjj0dRrL75vk3k23OA==", 23 | "dev": true 24 | }, 25 | "mri": { 26 | "version": "1.1.6", 27 | "resolved": "https://registry.npmjs.org/mri/-/mri-1.1.6.tgz", 28 | "integrity": "sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ==", 29 | "dev": true 30 | }, 31 | "prettier": { 32 | "version": "2.3.2", 33 | "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz", 34 | "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==", 35 | "dev": true 36 | }, 37 | "sade": { 38 | "version": "1.7.4", 39 | "resolved": "https://registry.npmjs.org/sade/-/sade-1.7.4.tgz", 40 | "integrity": "sha512-y5yauMD93rX840MwUJr7C1ysLFBgMspsdTo4UVrDg3fXDvtwOyIqykhVAAm6fk/3au77773itJStObgK+LKaiA==", 41 | "dev": true, 42 | "requires": { 43 | "mri": "^1.1.0" 44 | } 45 | }, 46 | "svelte": { 47 | "version": "3.38.3", 48 | "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.38.3.tgz", 49 | "integrity": "sha512-N7bBZJH0iF24wsalFZF+fVYMUOigaAUQMIcEKHO3jstK/iL8VmP9xE+P0/a76+FkNcWt+TDv2Gx1taUoUscrvw==", 50 | "dev": true 51 | }, 52 | "totalist": { 53 | "version": "2.0.0", 54 | "resolved": "https://registry.npmjs.org/totalist/-/totalist-2.0.0.tgz", 55 | "integrity": "sha512-+Y17F0YzxfACxTyjfhnJQEe7afPA0GSpYlFkl2VFMxYP7jshQf9gXV7cH47EfToBumFThfKBvfAcoUn6fdNeRQ==", 56 | "dev": true 57 | }, 58 | "uvu": { 59 | "version": "0.5.1", 60 | "resolved": "https://registry.npmjs.org/uvu/-/uvu-0.5.1.tgz", 61 | "integrity": "sha512-JGxttnOGDFs77FaZ0yMUHIzczzQ5R1IlDeNW6Wymw6gAscwMdAffVOP6TlxLIfReZyK8tahoGwWZaTCJzNFDkg==", 62 | "dev": true, 63 | "requires": { 64 | "dequal": "^2.0.0", 65 | "diff": "^5.0.0", 66 | "kleur": "^4.0.3", 67 | "sade": "^1.7.3", 68 | "totalist": "^2.0.0" 69 | } 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-undo", 3 | "description": "A small utility for managing an undo stack", 4 | "version": "1.0.2", 5 | "author": "Rich Harris", 6 | "license": "MIT", 7 | "type": "module", 8 | "scripts": { 9 | "test": "uvu", 10 | "prepublish": "npm test" 11 | }, 12 | "exports": { 13 | ".": "./index.js", 14 | "./package.json": "./package.json" 15 | }, 16 | "peerDependencies": { 17 | "svelte": "^3" 18 | }, 19 | "devDependencies": { 20 | "prettier": "^2.3.2", 21 | "svelte": "^3", 22 | "uvu": "^0.5.1" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | import { test } from 'uvu'; 2 | import * as assert from 'uvu/assert'; 3 | import { createStack } from '../index.js'; 4 | 5 | test('returns the first/last value if stack is in initial state', () => { 6 | const value = { x: 1 }; 7 | const stack = createStack(value); 8 | 9 | assert.is(stack.undo(), value); 10 | assert.is(stack.redo(), value); 11 | }); 12 | 13 | test('goes back and forward through history state', () => { 14 | const stack = createStack({ x: 1 }); 15 | stack.push({ x: 2 }); 16 | stack.push({ x: 3 }); 17 | stack.push((value) => ({ x: value.x + 1 })); 18 | 19 | assert.equal(stack.undo(), { x: 3 }); 20 | assert.equal(stack.undo(), { x: 2 }); 21 | assert.equal(stack.undo(), { x: 1 }); 22 | assert.equal(stack.redo(), { x: 2 }); 23 | assert.equal(stack.redo(), { x: 3 }); 24 | assert.equal(stack.redo(), { x: 4 }); 25 | }); 26 | 27 | test('clears later values when pushing', () => { 28 | const stack = createStack({ x: 1 }); 29 | stack.push({ x: 2 }); 30 | stack.push({ x: 3 }); 31 | 32 | assert.equal(stack.undo(), { x: 2 }); 33 | stack.push({ x: 4 }); 34 | 35 | assert.equal(stack.undo(), { x: 2 }); 36 | assert.equal(stack.undo(), { x: 1 }); 37 | assert.equal(stack.redo(), { x: 2 }); 38 | assert.equal(stack.redo(), { x: 4 }); 39 | }); 40 | 41 | test('updates first/last state', () => { 42 | const stack = createStack({ x: 1 }); 43 | 44 | let first = null; 45 | let last = null; 46 | 47 | const unsubscribe = stack.subscribe((state) => { 48 | ({ first, last } = state); 49 | }); 50 | 51 | assert.equal(first, true); 52 | assert.equal(last, true); 53 | 54 | stack.push({ x: 2 }); 55 | assert.equal(first, false); 56 | assert.equal(last, true); 57 | 58 | stack.push({ x: 3 }); 59 | assert.equal(first, false); 60 | assert.equal(last, true); 61 | 62 | stack.undo(); 63 | assert.equal(first, false); 64 | assert.equal(last, false); 65 | 66 | stack.undo(); 67 | assert.equal(first, true); 68 | assert.equal(last, false); 69 | 70 | unsubscribe(); 71 | }); 72 | 73 | test('updates $stack.current', () => { 74 | const stack = createStack({ x: 1 }); 75 | 76 | let current = null; 77 | 78 | const unsubscribe = stack.subscribe((state) => { 79 | current = state.current; 80 | }); 81 | 82 | assert.equal(current, { x: 1 }); 83 | 84 | stack.push({ x: 2 }); 85 | assert.equal(current, { x: 2 }); 86 | 87 | stack.push({ x: 3 }); 88 | assert.equal(current, { x: 3 }); 89 | 90 | stack.undo(); 91 | assert.equal(current, { x: 2 }); 92 | 93 | stack.undo(); 94 | assert.equal(current, { x: 1 }); 95 | 96 | unsubscribe(); 97 | }); 98 | 99 | test.run(); 100 | --------------------------------------------------------------------------------