v2 enhanced

Author: Ken Berkeley

README.md

@@ -13,41 +13,128 @@
 * Vue Router 0.7.x
 
 ### Installation
-
 `npm i vue-sync-query-mixin -S`
 
-alternatively：  
-`<script src="dist/vue-sync-query-mixin.min.js"></script>`
+alternatively：`<script src="dist/vue-sync-query-mixin.min.js"></script>`  
+which exposes **`VueSyncQuery`** as a global variable
 
-### Usage
+### Example
+See [here](https://kenberkeley.github.io/vue-sync-query-mixin/example.html), source in [`example.html`](./example.html)
 
+### Usage
 ```js
 // This is a Vue component
 import syncQuery from 'vue-sync-query-mixin'
 
 export default {
   mixins: [syncQuery],
-  data: () => ({ limit: 10, offset: 0 }),
+  data: () => ({ limit: 10 }),
   ready () {
-    this.syncQuery(['limit', 'offset'])
     // `limit` will keep in sync with `$route.query.limit`
-    // `offset` will keep in sync with `$route.query.offset`
+    this.syncQuery('limit')
   }
 }
 ```
 
-`syncQuery` accepts 3 types of argument:
+`syncQuery` accepts 4 types of argument:
+
+* `string|string[]`
+
+```js
+this.syncQuery('limit')
+this.syncQuery(['limit'])
+```
+
+* `object|object[]`
+
+```js
+this.syncQuery({
+  localField: 'limit',
+  queryField: 'limit',
+  local2query: {
+    formatter: v => v,
+    immediate: false,
+    deep: false
+  },
+  query2local: {
+    formatter: v => v,
+    immediate: true,
+    deep: false
+  }
+})
+this.syncQuery([
+  {
+    localField: 'limit',
+    queryField: 'limit',
+    local2query: {
+      formatter: v => v,
+      immediate: false,
+      deep: false
+    },
+    query2local: {
+      formatter: v => v,
+      immediate: true,
+      deep: false
+    }
+  }
+])
+```
+
+### Magic
+
+> More detail in [source code](./src/mixins/syncQuery.js)  
+> Vue.js official `vm.$watch( expOrFn, callback, [options] )` API documentation is [here](http://v1.vuejs.org/api/#vm-watch)
 
-* `string`, e.g. `syncQuery('limit') // limit will keep in sync with $route.query.limit`
-* `array`, see example above
-* `object`, e.g. `syncQuery({ limit: 'limitBy' }) // limit will keep in sync with $route.query.limitBy`
+```js
+_syncQuery ({ localField, queryField, local2query, query2local }) {
+  (() => {
+    // backup the default value
+    const defaultVal = this[localField]
+    
+    // local ==(sync)==> query
+    this.$watch(localField, function (v, oldV) {
+      this.updateQuery({ [queryField]: local2query.formatter(v, oldV) })
+    }, local2query)
+
+    // local <==(sync)== query
+    this.$watch(`$route.query.${queryField}`, function (v, oldV) {
+      this[localField] = query2local.formatter(v, oldV) || defaultVal
+    }, query2local)
+  })()
+}
+```
 
 ### Notice
+* `local <==(sync)== query`, default type is `string`, or else you need to write `formatter` yourself
+* default `local2query` and `query2local` shown as below:
 
-* `local state <==(sync)== query string`, the type is `string`
+```js
+/**
+ * default descriptor generator for $watch
+ * @param  {String} field
+ * @return {Object}
+ */
+function defaultDescGen(field) {
+  return {
+    localField: field,
+    queryField: field,
+    local2query: { // <----------------------
+      formatter: v => v,
+      immediate: false,
+      deep: false
+    },
+    query2local: { // <----------------------
+      formatter: v => v,
+      immediate: true,
+      deep: false // P.S. watching deep of a string makes no sense
+    }
+  }
+}
+```
 
-### Build
+But they can be `function` type, and then we regard them as the `formatter`
 
+### Build
 `npm run build`
 
 [npm-url]: https://www.npmjs.com/package/vue-sync-query-mixin

dist/vue-sync-query-mixin.min.js

@@ -8,42 +8,84 @@ var _vueUpdateQueryMixin = require('vue-update-query-mixin');
 
 var _vueUpdateQueryMixin2 = _interopRequireDefault(_vueUpdateQueryMixin);
 
-var _objectify = require('../utils/objectify');
+var _typeOf = require('../utils/typeOf');
 
-var _objectify2 = _interopRequireDefault(_objectify);
+var _typeOf2 = _interopRequireDefault(_typeOf);
+
+var _mergeDesc = require('../utils/mergeDesc');
+
+var _mergeDesc2 = _interopRequireDefault(_mergeDesc);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+var err = function err(msg) {
+  throw new Error('[SyncQuery] ' + msg);
+};
+
 exports.default = {
   mixins: [_vueUpdateQueryMixin2.default],
   methods: {
-    syncQuery: function syncQuery(fieldsMap) {
-      if (!fieldsMap) throw new Error('syncQuery accepted an empty value');
-      fieldsMap = (0, _objectify2.default)(fieldsMap);
-      for (var localField in fieldsMap) {
-        var queryField = fieldsMap(localField);
-        this._local2query(localField, queryField);
-        this._query2local(queryField, localField);
+    syncQuery: function syncQuery(fields) {
+      var _this = this;
+
+      if (!fields) err('empty fields');
+      switch ((0, _typeOf2.default)(fields)) {
+        case 'string':
+          this._syncQuery(defaultDescGen(fields));
+          break;
+        case 'object':
+          this._syncQuery((0, _mergeDesc2.default)(defaultDescGen(fields.localField), fields));
+          break;
+        case 'array':
+          fields.forEach(function (field) {
+            return _this.syncQuery(field);
+          });
+          break;
+        default:
+          err('invalid type of field');
       }
     },
-    _local2query: function _local2query(localField, queryField) {
-      this._backup(localField);
-      this.$watch(localField, function (v) {
-        this.updateQuery(_defineProperty({}, queryField, v));
-      });
-    },
-    _query2local: function _query2local(queryField, localField) {
-      this.$watch('$route.query.' + queryField, function (v) {
-        v ? this[localField] = v : this._restore(localField);
-      });
-    },
-    _backup: function _backup(localField) {
-      this.$data['$' + localField] = this[localField];
-    },
-    _restore: function _restore(localField) {
-      this[localField] = this.$data['$' + localField];
+    _syncQuery: function _syncQuery(_ref) {
+      var _this2 = this;
+
+      var localField = _ref.localField,
+          queryField = _ref.queryField,
+          local2query = _ref.local2query,
+          query2local = _ref.query2local;
+
+      (function () {
+        var defaultVal = _this2[localField];
+
+        _this2.$watch(localField, function (v, oldV) {
+          this.updateQuery(_defineProperty({}, queryField, local2query.formatter(v, oldV)));
+        }, local2query);
+
+        _this2.$watch('$route.query.' + queryField, function (v, oldV) {
+          this[localField] = query2local.formatter(v, oldV) || defaultVal;
+        }, query2local);
+      })();
     }
   }
-};
+};
+
+function defaultDescGen(field) {
+  return {
+    localField: field,
+    queryField: field,
+    local2query: {
+      formatter: function formatter(v) {
+        return v;
+      },
+      immediate: false,
+      deep: false
+    },
+    query2local: {
+      formatter: function formatter(v) {
+        return v;
+      },
+      immediate: true,
+      deep: false }
+  };
+}

es/mixins/syncQuery.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _typeOf = require('./typeOf');
+
+var _typeOf2 = _interopRequireDefault(_typeOf);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function mergeDesc(distDesc, srcDesc) {
+  for (var k in srcDesc) {
+    var v = srcDesc[k];
+    if (!distDesc[k]) distDesc[k] = {};
+
+    switch ((0, _typeOf2.default)(v)) {
+      case 'object':
+        mergeDesc(distDesc[k], v);
+        break;
+      case 'function':
+        distDesc[k].formatter = v;
+        break;
+      default:
+        distDesc[k] = v;
+        break;
+    }
+  }
+  return distDesc;
+}
+
+exports.default = mergeDesc;