Add Typescript typings and improve the building process

.eslintrc.js

@@ -9,11 +9,9 @@ module.exports = {
     browser: true,
   },
   extends: [
-    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
-    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
-    'plugin:vue/essential', 
     // https://github.com/standard/standard/blob/master/docs/RULES-en.md
-    'standard'
+    'standard',
+    'plugin:vue-libs/recommended'
   ],
   // add your custom rules here
   rules: {

.gitignore

@@ -452,6 +452,8 @@ __pycache__/
 # End of https://www.gitignore.io/api/osx,node,linux,windows,sublimetext,visualstudio
 
 /dist/
+/sync.js
+/store.js
 /test/unit/coverage/
 
 # Editor directories and files

build/rollup.esm.config.js

@@ -14,10 +14,10 @@ const base = {
 
 export default [
   Object.assign({}, base, {
-    input: 'src/store.js',
+    input: 'src/index.js',
     output: [
       {
-        file: 'dist/store.js',
+        file: 'dist/vue-warehouse.esm.js',
         format: 'es'
       }
     ]
@@ -26,8 +26,26 @@ export default [
     input: 'src/index.js',
     output: [
       {
-        file: 'dist/vue-warehouse.js',
-        format: 'es'
+        file: 'dist/vue-warehouse.common.js',
+        format: 'cjs'
+      }
+    ]
+  }),
+  Object.assign({}, base, {
+    input: 'src/sync.js',
+    output: [
+      {
+        file: 'sync.js',
+        format: 'cjs'
+      }
+    ]
+  }),
+  Object.assign({}, base, {
+    input: 'src/store.js',
+    output: [
+      {
+        file: 'store.js',
+        format: 'cjs'
       }
     ]
   })

build/rollup.umd.config.js

@@ -7,37 +7,72 @@ import commonjs from 'rollup-plugin-commonjs'
 import uglify from 'rollup-plugin-uglify'
 import replace from 'rollup-plugin-replace'
 
-const base = {
-  plugins: [
-    resolve({
-      browser: true,
-      preferBuiltins: false
-    }),
-    buble({
-      transforms: {
-        dangerousForOf: true
-      },
-      objectAssign: 'Object.assign'
-    }),
-    commonjs(),
-    replace({
-      'process.env': JSON.stringify({
-        NODE_ENV: 'production'
-      })
-    }),
-    uglify(),
-    filesize()
-  ],
+const base = (activateUglify = false) => {
+  return {
+    plugins: [
+      resolve({
+        browser: true,
+        preferBuiltins: false
+      }),
+      buble({
+        transforms: {
+          dangerousForOf: true
+        },
+        objectAssign: 'Object.assign'
+      }),
+      commonjs(),
+      replace({
+        'process.env': JSON.stringify({
+          NODE_ENV: 'production'
+        })
+      }),
+      activateUglify ? uglify() : {},
+      filesize()
+    ]
+  }
 }
 
 export default [
-  Object.assign({}, base, {
+  Object.assign({}, base(true), {
     input: 'src/index.js',
     output: [
       {
         name: 'VueWarehouse',
         exports: 'named',
-        file: 'dist/vue-warehouse.umd.min.js',
+        file: 'dist/vue-warehouse.min.js',
+        format: 'umd'
+      }
+    ]
+  }),
+  Object.assign({}, base(), {
+    input: 'src/index.js',
+    output: [
+      {
+        name: 'VueWarehouse',
+        exports: 'named',
+        file: 'dist/vue-warehouse.js',
+        format: 'umd'
+      }
+    ]
+  }),
+  Object.assign({}, base(true), {
+    input: 'src/sync.js',
+    output: [
+      {
+        name: 'VueWarehouseSync',
+        exports: 'named',
+        file: 'dist/vue-warehouse-sync.min.js',
+        format: 'umd'
+      }
+    ]
+  }),
+  Object.assign({}, base(), {
+    input: 'src/sync.js',
+    output: [
+      {
+        name: 'VueWarehouseSync',
+        exports: 'named',
+        file: 'dist/vue-warehouse-sync.js',
         format: 'umd'
       }
     ]

nuxt/plugin.js

@@ -1,10 +1,10 @@
-import WarehouseStore from 'vue-warehouse/dist/store'
+import WarehouseStore from 'vue-warehouse/store'
 <% if (typeof(options.vuex) !== 'undefined') { %>
 import WarehouseSync from 'vue-warehouse/sync'
 <% } %>
 
 <% if (typeof(options.moduleName) !== 'undefined') { %>
-// Define store in options
+// Define module name
 const moduleName = '<%= options.moduleName %>'
 <% } else { %>
 // Define default store

package.json

@@ -1,9 +1,12 @@
 {
   "name": "vue-warehouse",
   "version": "0.1.0b",
-  "description": "Cross-browser storage for Vue.js",
-  "main": "dist/vue-warehouse.umd.min.js",
-  "module": "dist/vue-warehouse.js",
+  "description": "A Cross-browser storage for Vue.js and Nuxt.js, with plugins support and easy extensibility based on Store.js",
+  "main": "dist/vue-warehouse.common.js",
+  "module": "dist/vue-warehouse.esm.js",
+  "unpkg": "dist/vue-warehouse.js",
+  "jsdelivr": "dist/vue-warehouse.js",
+  "typings": "types/index.d.ts",
   "repository": {
     "type": "git",
     "url": "git://github.com/bazzite/vue-warehouse.git"
@@ -13,14 +16,18 @@
   },
   "homepage": "https://www.bazzite.com/docs/vue-warehouse",
   "files": [
-    "src",
     "dist",
-    "nuxt"
+    "nuxt",
+    "sync",
+    "types/*.d.ts",
+    "store.js",
+    "sync.js"
   ],
   "scripts": {
     "start": "npm run dev",
     "unit": "jest --config test/unit/jest.conf.js --coverage",
-    "test": "npm run unit",
+    "test": "npm run lint && npm run unit && npm run test:types",
+    "test:types": "tsc -p types/test",
     "lint": "eslint --ext .js src test/unit",
     "report-coverage": "cat ./test/unit/coverage/lcov.info | ./node_modules/.bin/codecov",
     "build": "yarn build:esm && yarn build:umd",
@@ -45,6 +52,9 @@
   "license": "MIT",
   "peerDependencies": {
     "store": "^2.0.12",
+    "vue": "^2.5.0"
+  },
+  "optionalDependencies": {
     "vuex": "^3.0.0"
   },
   "devDependencies": {
@@ -69,7 +79,7 @@
     "eslint-plugin-node": "^6.0.1",
     "eslint-plugin-promise": "^3.4.0",
     "eslint-plugin-standard": "^3.0.1",
-    "eslint-plugin-vue": "^4.4.0",
+    "eslint-plugin-vue-libs": "^2.1.0",
     "jest": "^22.0.4",
     "rollup": "^0.57.1",
     "rollup-plugin-buble": "^0.19.2",
@@ -81,6 +91,7 @@
     "semver": "^5.3.0",
     "shelljs": "^0.8.1",
     "store": "^2.0.12",
+    "typescript": "^2.7.2",
     "vue": "^2.5.0",
     "vuex": "^3.0.0"
   },

src/index.js

@@ -1,16 +1,7 @@
 import VueWarehouseStore from './store'
 
 const VueWarehouse = {
-  install (
-    Vue,
-    options = {
-      store: null,
-      engine: null,
-      plugins: null,
-      storages: null,
-      moduleName: 'warehouse'
-    }
-  ) {
+  install (Vue, options = {}) {
     const moduleName = (options || {}).moduleName || 'warehouse'
 
     const warehouse = VueWarehouseStore(options)

src/store.js

@@ -1,13 +1,13 @@
-export default (options) => {
+export default options => {
   let store = options.store
   const engine = options.engine
 
   if (options.storages && !engine) {
-    throw new Error("You must define an 'engine' when storages are defined")
+    throw new Error('You must define an \'engine\' when storages are defined')
   }
 
   if (!store && !engine) {
-    throw new Error("You must define a 'store' or an 'engine'")
+    throw new Error('You must define a \'store\' or an \'engine\'')
   }
 
   if (!options.storages || options.storages.length === 0) {

sync/index.js → src/sync.js

@@ -1,7 +1,7 @@
 // Based on https://github.com/vuejs/vuex-router-sync/blob/master/src/index.js
 const undefinedChanges = {
   action: undefined,
-  key: undefined,
+  key: '',
   value: undefined,
   oldValue: undefined
 }
@@ -95,7 +95,7 @@ export default (store, warehouseStore, options) => {
   // sync warehouse on store change
   const warehouseUnwatch = store.watch(
     state => state[moduleName],
-    warehouse => {
+    (warehouse) => {
       if (warehouse === currentChanges) {
         return
       }

test/unit/specs/VuexSync.spec.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import WarehouseSync from '@/../sync'
+import WarehouseSync from '@/sync'
 import WarehouseStore from '@/store'
 
 Vue.use(Vuex)

types/index.js

@@ -0,0 +1,6 @@
+import "./vue";
+import { VueWarehouse } from "./warehouse";
+export default VueWarehouse;
+// export {
+//   VueWarehouseSync
+// } from "./sync";

types/index.ts

@@ -0,0 +1,6 @@
+import "./vue";
+import { VueWarehouse } from "./warehouse";
+
+export default VueWarehouse;
+
+export { sync, store } from "./warehouse";

types/test/index.js

@@ -0,0 +1,36 @@
+import Vue from "vue";
+// import Vuex from "vuex";
+import VueWarehouse from "../index";
+// import WarehouseSync from "../sync";
+// import WarehouseStore from '@/store'
+var store = require("store");
+// Vue.use(Vuex);
+Vue.use(VueWarehouse, {
+    store: store
+});
+var moduleName = "warehouse";
+// WarehouseSync(Vue.prototype.$store, store, {
+//   moduleName: moduleName
+// });
+// Set new user
+Vue.prototype.$warehouse.set("user", "John");
+// Vue.prototype.$store.state[moduleName].key;
+// Vue.prototype.$store.state[moduleName].value;
+// Vue.prototype.$store.state[moduleName].oldValue;
+// Update user
+Vue.prototype.$warehouse.set("user", "Jane");
+// Vue.prototype.$store.state[moduleName].key;
+// Vue.prototype.$store.state[moduleName].value;
+// Vue.prototype.$store.state[moduleName].oldValue;
+// Remove user
+Vue.prototype.$warehouse.remove("user");
+// Vue.prototype.$store.state[moduleName].key;
+// Vue.prototype.$store.state[moduleName].value;
+// Vue.prototype.$store.state[moduleName].oldValue;
+// Clear all values
+Vue.prototype.$warehouse.set("user", "Jane");
+Vue.prototype.$warehouse.set("id", 1);
+Vue.prototype.$warehouse.clearAll();
+// Vue.prototype.$store.state[moduleName].key;
+// Vue.prototype.$store.state[moduleName].value;
+// Vue.prototype.$store.state[moduleName].oldValue;

types/test/index.ts

@@ -0,0 +1,40 @@
+declare var require: any;
+
+import Vue from "vue";
+import Vuex from "vuex";
+
+import VueWarehouse from "../index";
+import { sync as WarehouseSync } from "../index";
+import { store as WarehouseStore } from "../index";
+
+const store = WarehouseStore({
+  store: require("store")
+});
+
+Vue.use(Vuex);
+Vue.use(VueWarehouse, {
+  store: store
+});
+
+const moduleName = "warehouse";
+
+const VuexStore = new Vuex.Store({
+  state: { msg: "foo" }
+});
+
+WarehouseSync(VuexStore, store, {
+  moduleName: moduleName
+});
+
+// Set new user
+Vue.prototype.$warehouse.set("user", "John");
+// Update user
+Vue.prototype.$warehouse.set("user", "Jane");
+// Remove user
+Vue.prototype.$warehouse.remove("user");
+// Clear all values
+Vue.$warehouse.clearAll();
+
+Vue.prototype.$store.state[moduleName].key;
+Vue.prototype.$store.state[moduleName].value;
+Vue.prototype.$store.state[moduleName].oldValue;