Repository: anthonygore/vuex-undo-redo
Branch: master
Commit: 6e34a3971832
Files: 8
Total size: 8.8 KB

Directory structure:
gitextract_vsn78dk7/

├── .babelrc
├── .gitignore
├── LICENSE
├── README.md
├── package.json
├── src/
│   ├── __tests__/
│   │   └── plugin.spec.js
│   └── plugin.js
└── webpack.config.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .babelrc
================================================
{
  "presets": [
    ["env", { "modules": false }]
  ],
  "env": {
    "test": {
      "presets": [
        ["env", { "targets": { "node": "current" }}]
      ]
    }
  }
}


================================================
FILE: .gitignore
================================================
node_modules
.idea


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2019 Anthony Gore

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:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

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.


================================================
FILE: README.md
================================================
# vuex-undo-redo

A Vue.js plugin that allows you to undo or redo a mutation.

> The building of this plugin is documented in the article *[Create A Vuex Undo/Redo For VueJS](https://vuejsdevelopers.com/2017/11/13/vue-js-vuex-undo-redo/)*

## Live demos

[![Edit Vuex Undo/Redo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vjo3xlpyny)

There's also a demo in [this Codepen](https://codepen.io/anthonygore/pen/NwGmqJ). The source code for the demo is [here](https://github.com/anthonygore/vuex-undo-redo-example).

## Installation

```js
npm i --save-dev vuex-undo-redo
```

### Browser

```html
<script type="text/javascript" src="node_modules/vuex-undo-redo/dist/vuex-undo-redo.min.js"></script>
```

### Module

```js
import VuexUndoRedo from 'vuex-undo-redo';
```

## Usage

Since it's a plugin, use it like:

```js
Vue.use(VuexUndoRedo);
```

You must, of course, have the Vuex plugin installed as well, and it must be installed before this plugin. You must also create a Vuex store which must implement a mutation `emptyState` which should revert the store back to the initial state e.g.:

```js
new Vuex.Store({
  state: {
    myVal: null
  },
  mutations: {
    emptyState() {
      this.replaceState({ myval: null });       
    }
  }
});
```

### Ignoring mutations

Occasionally, you may want to perform mutations without including them in the undo history (say you are working on an image editor and the user toggles grid visibility - you probably do not want this in undo history). The plugin has an `ignoredMutations` setting to leave these mutations out of the history:

```js
Vue.use(VuexUndoRedo, { ignoreMutations: [ 'toggleGrid' ]});
```

It's worth noting that this only means the mutations will not be recorded in the undo history. You must still manually manage your state object in the `emptyState` mutation:

```js
emptyState(state) {
  this.replaceState({ myval: null, showGrid: state.showGrid });       
}
```

## API

### Options

`ignoredMutations` an array of mutations that the plugin will ignore

### Computed properties

`canUndo` a boolean which tells you if the state is undo-able

`canRedo` a boolean which tells you if the state is redo-able

### Methods

`undo` undoes the last mutation

`redo` redoes the last mutation


================================================
FILE: package.json
================================================
{
  "name": "vuex-undo-redo",
  "version": "1.1.4",
  "description": "A Vue.js plugin to undo/redo mutations",
  "main": "src/plugin.js",
  "scripts": {
    "build": "rimraf ./dist && webpack --config ./webpack.config.js",
    "test": "jest"
  },
  "author": "Anthony Gore",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/anthonygore/vuex-undo-redo"
  },
  "devDependencies": {
    "@vue/test-utils": "^1.0.0-beta.25",
    "babel-core": "^6.10.4",
    "babel-jest": "^23.6.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-preset-env": "^1.6.1",
    "babel-runtime": "^6.9.2",
    "jest": "^23.6.0",
    "rimraf": "^2.6.1",
    "vue": "^2.5.17",
    "vue-jest": "^3.0.0",
    "vue-template-compiler": "^2.5.17",
    "vuex": "^3.0.1",
    "webpack": "^3.8.1",
    "webpack-merge": "^4.1.0"
  },
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      ".*\\.(vue)$": "vue-jest",
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
    }
  },
  "dependencies": {}
}


================================================
FILE: src/__tests__/plugin.spec.js
================================================
import { createLocalVue, shallowMount } from '@vue/test-utils';
import Vuex from "vuex";
import plugin from '../plugin';

describe('plugin', () => {
  it('should throw error if installed before new Vuex.Store is called', () => {
    const localVue = createLocalVue();
    expect(() => {
      localVue.use(plugin);
    }).toThrow();
  });
  it('should not throw error if installed after new Vuex.Store is called', () => {
    const localVue = createLocalVue();
    expect(() => {
      localVue.use(Vuex);
      new Vuex.Store({});
      localVue.use(plugin);
    }).not.toThrow();
  });
  it('should undo/redo data property', done => {
    const localVue = createLocalVue();
    localVue.use(Vuex);
    const storeConfig = {
      state: {
        myVal: 0
      },
      mutations: {
        inc(state) {
          state.myVal++;
        },
        emptyState() {
          this.replaceState({ myVal: 0 });
        }
      }
    };
    let store = new Vuex.Store(storeConfig);
    localVue.use(plugin);
    let component = {
      template: "<div></div>",
      methods: {
        inc() {
          this.$store.commit("inc");
        }
      },
      created() {
        expect(this.$store.state.myVal).toBe(0);
        this.inc();
        expect(this.$store.state.myVal).toBe(1);
        this.undo();
        expect(this.$store.state.myVal).toBe(0);
        this.redo();
        expect(this.$store.state.myVal).toBe(1);
        done();
      }
    };
    shallowMount(component, {
      localVue,
      store
    });
  });
});


================================================
FILE: src/plugin.js
================================================
const EMPTY_STATE = 'emptyState';

module.exports = {
  install(Vue, options = {}) {
    if (!Vue._installedPlugins.find(plugin => plugin.Store)) {
      throw new Error("VuexUndoRedo plugin must be installed after the Vuex plugin.")
    }
    Vue.mixin({
      data() {
        return {
          done: [],
          undone: [],
          newMutation: true,
          ignoreMutations: options.ignoreMutations|| []
        };
      },
      created() {
        if (this.$store) {
          this.$store.subscribe(mutation => {
            if (mutation.type !== EMPTY_STATE && this.ignoreMutations.indexOf(mutation.type) === -1) {
              this.done.push(mutation);
            }
            if (this.newMutation) {
              this.undone = [];
            }
          });
        }
      },
      computed: {
        canRedo() {
          return this.undone.length;
        },
        canUndo() {
          return this.done.length;
        }
      },
      methods: {
        redo() {
          let commit = this.undone.pop();
          this.newMutation = false;
          switch (typeof commit.payload) {
            case 'object':
              this.$store.commit(`${commit.type}`, Object.assign({}, commit.payload));
              break;
            default:
              this.$store.commit(`${commit.type}`, commit.payload);
          }
          this.newMutation = true;
        },
        undo() {
          this.undone.push(this.done.pop());
          this.newMutation = false;
          this.$store.commit(EMPTY_STATE);
          this.done.forEach(mutation => {
            switch (typeof mutation.payload) {
              case 'object':
                this.$store.commit(`${mutation.type}`, Object.assign({}, mutation.payload));
                break;
              default:
                this.$store.commit(`${mutation.type}`, mutation.payload);
            }
            this.done.pop();
          });
          this.newMutation = true;
        }
      }
    });
  },
}


================================================
FILE: webpack.config.js
================================================
const webpack = require('webpack');
const merge = require('webpack-merge');
const path = require('path');

module.exports =  {
  entry: path.resolve(__dirname + '/src/plugin.js'),
  output: {
    path: path.resolve(__dirname + '/dist/'),
    filename: 'vuex-undo-redo.min.js',
    libraryTarget: 'window',
    library: 'VuexUndoRedo',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: __dirname,
        exclude: /node_modules/,
        options: {
          presets: ["babel-preset-env"],
          plugins: ["transform-runtime"],
        }
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin( {
      minimize : true,
      sourceMap : false,
      mangle: true,
      compress: {
        warnings: false
      }
    } )
  ]
};