undo-redo-vuex

Version:

A Vuex plugin for module namespaced undo and redo functionality. This plugin takes inspiration from and extends the work of [vuex-undo-redo](https://github.com/anthonygore/vuex-undo-redo).

github.com/andrewbeng89/undo-redo-vuex

andrewbeng89/undo-redo-vuex

528 lines (527 loc) • 15.8 kB

HTML

<!doctype html> <html lang="en"> <head> <title>Code coverage report for src/undoRedo.ts</title> <meta charset="utf-8" /> <link rel="stylesheet" href="../prettify.css" /> <link rel="stylesheet" href="../base.css" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type='text/css'> .coverage-summary .sorter { background-image: url(../sort-arrow-sprite.png); } </style> </head> <body> <div class='wrapper'> <div class='pad1'> <h1> <a href="../index.html">All files</a> / <a href="index.html">src</a> undoRedo.ts </h1> <div class='clearfix'> <div class='fl pad1y space-right2'> 96.83% Statements 61/63 </div> <div class='fl pad1y space-right2'> 75% Branches 33/44 </div> <div class='fl pad1y space-right2'> 100% Functions 19/19 </div> <div class='fl pad1y space-right2'> 96.3% Lines 52/54 </div> </div> </div> <div class='status-line high'></div> <pre><table class="coverage"> <tr><td class="line-count quiet">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155</td><td class="line-coverage quiet">  5x 5x 5x 5x       5x 5x 5x   5x           5x           5x     104x 104x       5x             5x     5x               5x     1x   2x       5x 1x 1x               15x 15x 15x 15x         15x 15x 15x 15x                               5x 5x                     5x 195x 195x     195x   195x 195x   195x             23x 23x       23x           5x 34x 34x   34x   15x 14x 15x   15x 15x 15x   4x        </td><td class="text"><pre class="prettyprint lang-js">/* eslint-disable no-param-reassign, no-shadow */ import { EMPTY_STATE, UPDATE_CAN_UNDO_REDO, REDO, UNDO } from "./constants"; import { getConfig, setConfig, updateCanUndoRedo } from "./utils-undo-redo"; import execRedo from "./redo"; import execUndo from "./undo";   // Logic based on: https://github.com/anthonygore/vuex-undo-redo   const noop = () => {}; export const undo = noop; export const redo = noop;   export const scaffoldState = (state: any) => ({ ...state, canUndo: false, canRedo: false });   export const scaffoldActions = (actions: any) => ({ ...actions, undo, redo });   export const scaffoldMutations = (mutations: any) => ({ ...mutations, updateCanUndoRedo: (state: any, payload: any) => { if (payload.canUndo !== undefined) state.canUndo = payload.canUndo; if (payload.canRedo !== undefined) state.canRedo = payload.canRedo; } });   export const scaffoldStore = (store: any) => ({ ...store, state: scaffoldState(store.state || {}), actions: scaffoldActions(store.actions || {}), mutations: scaffoldMutations(store.mutations || {}) });   const createPathConfig = ({ namespace = "", ignoreMutations = [] }: UndoRedoOptions): UndoRedoOptions => ({ namespace, ignoreMutations, done: [], undone: [], newMutation: true });   const mapIgnoreMutations = ({ namespace, ignoreMutations }: UndoRedoOptions) => ({ ignoreMutations: (ignoreMutations || []) .map(mutation => `${namespace}/${mutation}`) .concat(`${namespace}/${UPDATE_CAN_UNDO_REDO}`) });   const mapPaths = (paths: UndoRedoOptions[]) => paths.map(({ namespace, ignoreMutations }) => createPathConfig({ namespace: `${namespace}/`, ...(ignoreMutations ? mapIgnoreMutations({ namespace, ignoreMutations }) : {}) }) );   const canRedo = (paths: UndoRedoOptions[]) => (namespace: string) => { const config = getConfig(paths)(namespace); Eif (Object.keys(config).length) { return config.undone.length > 0; } return false; };   const canUndo = (paths: UndoRedoOptions[]) => (namespace: string) => { const config = getConfig(paths)(namespace); Eif (config) { return config.done.length > 0; } return false; };   /** * The Undo-Redo plugin module * * @module store/plugins/undoRedo * @function * @param {Object} options * @param {String} options.namespace - The named vuex store module * @param {Array<String>} options.ignoreMutations - The list of store mutations * (belonging to the module) to be ignored * @returns {Function} plugin - the plugin function which accepts the store parameter */ export default (options: UndoRedoOptions) => (store: any) => { const paths = options.paths ? mapPaths(options.paths) : [ createPathConfig({ ignoreMutations: [ ...(options.ignoreMutations || []), UPDATE_CAN_UNDO_REDO ] }) ];   store.subscribe((mutation: Mutation) => { const isStoreNamespaced = mutation.type.split("/").length > 1; const namespace = isStoreNamespaced ? `${mutation.type.split("/")[0]}/` : ""; const config = getConfig(paths)(namespace);   Eif (Object.keys(config).length) { const { ignoreMutations, newMutation, done } = config;   if ( mutation.type !== `${namespace}${EMPTY_STATE}` && mutation.type !== `${namespace}${UPDATE_CAN_UNDO_REDO}` && ignoreMutations.indexOf(mutation.type) === -1 && mutation.type.includes(namespace) && newMutation ) { done.push(mutation); setConfig(paths)(namespace, { ...config, done }); updateCanUndoRedo({ paths, store })(namespace); } } });   // NB: Watch all actions to intercept the undo/redo NOOP actions store.subscribeAction(async (action: Action) => { const isStoreNamespaced = action.type.split("/").length > 1; const namespace = isStoreNamespaced ? `${action.type.split("/")[0]}/` : "";   switch (action.type) { case `${namespace}${REDO}`: if (canRedo(paths)(namespace)) await execRedo({ paths, store })(namespace); break; case `${namespace}${UNDO}`: Eif (canUndo(paths)(namespace)) await execUndo({ paths, store })(namespace); break; default: break; } }); };  </pre></td></tr> </table></pre> <div class='push'></div> </div> <div class='footer quiet pad2 space-top1 center small'> Code coverage generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Tue Aug 13 2019 14:19:58 GMT+0200 (Central European Summer Time) </div> </div> <script src="../prettify.js"></script> <script> window.onload = function () { if (typeof prettyPrint === 'function') { prettyPrint(); } }; </script> <script src="../sorter.js"></script> </body> </html>