wip

CONTRIBUTING.md

@@ -6,9 +6,8 @@ We accept contributions via Pull Requests on [Github](https://github.com/spatie/
 
 ## Pull Requests
 
-- Use the ES2015 syntax.
-- Your patch won't be accepted if it doesn't pass the tests and lints (`npm run test`).
-- If there's a `/demo` section, try to add an example.
+- Use the ES2016 syntax.
+- Your patch won't be accepted if it doesn't pass the tests and lints (`npm run test` and `npm run lint`).
 - **Document any change in behaviour:** Make sure the `README.md`, `CHANGELOG.md` and any other relevant documentation are kept up-to-date.
 - **Consider our release cycle:** We try to follow [SemVer v2.0.0](http://semver.org/). Randomly breaking public APIs is not an option.
 - **Create feature branches:** Don't ask us to pull from your master branch.
@@ -18,7 +17,7 @@ We accept contributions via Pull Requests on [Github](https://github.com/spatie/
 ## Running Tests
 
 ``` bash
-$ npm test
+$ npm run test
 ```
 
 **Happy coding**!

README.md

@@ -5,8 +5,7 @@
 [![Build Status](https://img.shields.io/travis/spatie/vue-save-state/master.svg?style=flat-square)](https://travis-ci.org/spatie/vue-save-state)
 [![Code Climate](https://img.shields.io/codeclimate/github/spatie/vue-save-state.svg?style=flat-square)](https://img.shields.io/codeclimate/github/spatie/vue-save-state.svg)
 
-This is where your description should go. Try and limit it to a paragraph or two, and maybe throw in a mention of what
-PSRs you support to avoid any confusion with users and contributors.
+This package provides a `SaveState` mixin that automatically saves any change in the state to your component to localStorage. The next time that component gets initialized it will restore it's state from the saved values in local storage.
 
 Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects [on our website](https://spatie.be/opensource).
 
@@ -35,12 +34,39 @@ $ npm install vue-save-state
 
 ## Usage
 
+### Preparing your component
+
+You'll need to add the `SaveState` mixin:
+
 ```js
-const myPackage = require('my-package');
+export default {
+
+    mixins: [SaveState],
 
-myPackage.doStuff();
+    ...
+}
 ```
 
+Next you'll need to add a method called `getSaveStateConfig`:
+
+```js
+export default {
+
+    mixins: [SaveState],
+
+    methods: {
+
+        getSaveStateConfig() {
+            return {
+                'cacheKey': 'nameOfYouComponent'
+            };
+        },
+    },
+}
+```
+
+Rest of readme coming soon...
+
 ## Change log
 
 Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.

__test-helpers__/LocalStorageMock.js → __tests__/Helpers/LocalStorageMock.js

@@ -11,7 +11,7 @@ const localStorageMock = (function () {
         },
         clear() {
             store = {};
-        }
+        },
     };
 });
 

__tests__/Helpers/test.js

@@ -0,0 +1,13 @@
+export default {
+
+    mixins: [SaveState],
+
+    methods: {
+
+        getSaveStateConfig() {
+            return {
+                'cacheKey': 'testComponent'
+            };
+        },
+    },
+}

__tests__/save-state.test.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import {assert} from 'chai';
 import SaveState from '../src/save-state';
-import LocalStorageMock from '../__test-helpers__/LocalStorageMock';
+import LocalStorageMock from '../__tests__/Helpers/LocalStorageMock';
 
 let vm;
 let localStorage;

package.json

@@ -5,14 +5,21 @@
   "main": "dist/index.js",
   "jsnext:main": "src/index.js",
   "scripts": {
-    "test": "jest"
+    "test": "jest",
+    "lint": "node_modules/.bin/eslint -c .eslintrc --fix  src __tests__ --ext=.js --ext=.vue;exit 0"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/spatie/vue-save-state.git"
   },
   "keywords": [
-    "spatie"
+    "spatie",
+    "vue",
+    "state",
+    "save",
+    "restore",
+    "local",
+    "storage"
   ],
   "author": "Freek Van der Herten",
   "license": "MIT",
@@ -35,5 +42,8 @@
     "babel-plugin-transform-async-to-generator": "^6.16.0",
     "lodash": "^4.16.4",
     "vue": "^2.0.3"
+  },
+  "jest": {
+    "testRegex": "test.js$"
   }
 }

src/save-state.js

@@ -1,4 +1,4 @@
-import {forEach, pickBy, find} from 'lodash';
+import { forEach, pickBy } from 'lodash';
 
 export default {
     watch: {
@@ -29,12 +29,13 @@ export default {
                 }
             });
         },
+
         saveState() {
-            let data = pickBy(this.$data, (value, attribute) => {
-                return this.attributeIsManagedBySaveState(attribute)
+            const data = pickBy(this.$data, (value, attribute) => {
+                return this.attributeIsManagedBySaveState(attribute);
             });
 
-            saveState(this.getSaveStateConfig().cacheKey, data)
+            saveState(this.getSaveStateConfig().cacheKey, data);
         },
         getSavedState() {
             return getSavedState(this.getSaveStateConfig().cacheKey);
@@ -46,8 +47,8 @@ export default {
                 return true;
             }
 
-            return this.getSaveStateConfig().attributes.indexOf(attribute) !== -1
-        }
+            return this.getSaveStateConfig().attributes.indexOf(attribute) !== -1;
+        },
     },
 };