Есть небольшая библиотека для undo/redo в JavaScript: async-history-stack.
Она интересна не тем, что «умеет откатывать состояние». Это как раз самый простой случай. Интереснее другое: в историю можно складывать действия, у которых есть асинхронные операции и побочные эффекты.
Например, пользователь удаляет картинку из галереи. В реальном приложении это может быть не один
setState, а целая цепочка: уйти со страницы картинки, отправить запрос на удаление, убрать ссылку из локального состояния, обновить интерфейс.А при undo надо сделать обратное: восстановить картинку, вернуть ссылку в состояние и снова открыть страницу этой картинки.
async-history-stack предлагает описывать такие действия через push: функция сразу выполняет изменение и возвращает функцию, которая умеет это изменение откатить.
await historyStack.push(async () => {
await applyChanges()
return async () => {
await revertChanges()
}
})
То есть в историю кладётся не снимок объекта, а переход туда-обратно. Благодаря этому undo/redo может быть не привязан к конкретному стору и нормально покрывает навигацию, RPC, работу с файлами и другие асинхронные штуки.
В библиотеке есть
undo, redo, clear, size, timestamp, лимит истории, отмена через signal и merge, чтобы склеивать несколько изменений в одну запись. Например, когда много мелких действий должны откатываться одним undo.Я набросал демо: галерея, удаление карточки, имитация асинхронного RPC, лог операций, undo/redo и восстановление маршрута. Ну и да, вместо обычных заглушек там процедурно генерируются SVG-паркеты, потому что почему бы и нет.
Ссылка на библиотеку:
https://github.com/kettanaito/async-history-stack
Демо:
https://codepen.io/editor/alinaki/pen/019f1263-8e38-73da-a864-9854b6093cee
Всем undo, котаны!
#history #undo #library #svg #tile