bump version 1.2.5

README.md

@@ -7,7 +7,7 @@
   <a href="https://www.npmjs.com/package/revue">
     <img src="https://camo.githubusercontent.com/49a99ffd8da7a0793e1d648f859792e9b1db45fa/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646d2f72657675652e737667" alt="NPM download" style="max-width:100%;"></a>
   <a href="https://semaphoreci.com/egoist/revue">
-    <img src="https://camo.githubusercontent.com/76d2c0872d04fb30683774e965ed8c717959ef77/68747470733a2f2f73656d6170686f726563692e636f6d2f6170692f76312f70726f6a656374732f39383639643839662d313632312d343831332d386331362d3663663065373465623862622f3633333038322f62616467652e737667" alt="Build Status" style="max-width:100%;">
+    <img src="https://img.shields.io/travis/egoist/revue/master.svg" alt="Build Status" style="max-width:100%;">
   </a>
 </p>
 
@@ -47,7 +47,7 @@ new Vue({
   el: '#app',
   data () {
     return {
-      counter: this.$revue.getState().counter
+      counter: this.$store.state.counter
     }
   },
   ready () {
@@ -58,11 +58,18 @@ new Vue({
     // if you want to subscribe a deep property
     // this.$subscribe('top.middle.counter as counter')
     // or even this.$subscribe('something.in.reduxStore.counter as instance.somewhere.counter')
+    // you can only $subscribe once, if you want to subscribe multi states at the same time, do this:
+    /*
+    this.$subscribe(
+      'foo',
+      'bar'
+    )
+    */
   },
   methods: {
     handleClickCounter () {
       // dispatch events
-      this.$revue.dispatch({type: 'INCREMENT'})
+      this.$store.dispatch({type: 'INCREMENT'})
     }
   }
 })

example/actions/index.js

@@ -0,0 +1 @@
+export * from './todos'

example/components/write.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-  import { addTodo, toggleTodo } from '../actions/todos'
+  import { addTodo, toggleTodo } from '../actions'
   export default {
     props: ['todos'],
     data () {
@@ -20,18 +20,22 @@
     },
     ready () {
       this.$subscribe('todos')
+      this.$store.dispatch({
+        type: 'ADDED_TODO',
+        text: 'damn'
+      })
     },
     methods: {
       reset () {
-        this.$revue.dispatch({type: 'RESET'})
+        this.$store.dispatch({type: 'RESET'})
       },
       toggleTodo (index) {
-        this.$revue.dispatch(toggleTodo(index))
+        this.$store.dispatch(toggleTodo(index))
       },
-      addTodo () {
-        if (!this.todo)
+      addTodo (todo = this.todo) {
+        if (!todo)
           return
-        this.$revue.dispatch(addTodo(this.todo))
+        this.$store.dispatch(addTodo(todo))
         this.todo = ''
       },
     }

example/views/home.vue

@@ -9,7 +9,7 @@
   export default {
     data () {
       return {
-        todos: this.$revue.getState().todos
+        todos: this.$store.state.todos
       }
     },
     components: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "revue",
-  "version": "1.2.44",
+  "version": "1.2.5",
   "description": "Redux binding for Vue.",
   "main": "revue.common.js",
   "scripts": {

src/revue.js

@@ -1,50 +1,75 @@
-import { set as setProp, get as getProp } from 'object-path'
+import {set as setProp,
+  get as getProp
+}
+from 'object-path'
 import shallowEqual from './utils/shallowEqual'
 
-export default function (Vue, options) {
-  // const _ = Vue.util
-  const store = options.store
-  const re = /([a-zA-Z0-9\._-]+)\s{1,2}as\s{1,2}([a-zA-Z0-9\._-]+)/i
-  // bring redux to revue
+export default function(Vue, {
+  store = null,
+  actions = null
+} = {}) {
+  if (process.env.NODE_ENV !== 'production' && typeof store !== 'object') {
+    throw new TypeError('[Revue] Expected store to be an object')
+  }
+  const re = /^([a-zA-Z0-9\._-]+)\s{1,2}as\s{1,2}([a-zA-Z0-9\._-]+)$/i
+    // bring redux to revue
+  if (actions) {
+    Object.defineProperty(Vue.prototype, '$actions', {
+      value: actions
+    })
+  }
   Object.defineProperties(Vue.prototype, {
-    '$revue': {
-      value: store
-    },
-    '$subscribe': {
-      value (...args) {
-        // unsubscribe old listeners if ever subscribed
-        this.$unsubscribe()
-        this.unsubscriber = []
-        args.forEach(prop => {
-          // realProp: property name/path in your instance
-          // storeProp: property name/path in Redux store
-          let realProp = prop, storeProp = prop
-          if (re.test(prop)) {
-            [, storeProp, realProp] = prop.match(re)
+      '$store': {
+        value: {
+          get state() {
+            return store.getState()
+          },
+          dispatch: store.dispatch
+        }
+      },
+      '$subscribe': {
+        value(...args) {
+
+          if (this._calledOnce) {
+            if (process.env.NODE_ENV === 'production') {
+              return false
+            }
+            throw new Error('[Revue] You can only subscribe once, pass multi args to subscribe more than one state.')
           }
-          let currentValue = getProp(store.getState(), storeProp)
-          const handleChange = () => {
-            let previousValue = currentValue
-            currentValue = getProp(store.getState(), storeProp)
-            if (!shallowEqual(previousValue, currentValue)) {
-              setProp(this._data, realProp, currentValue)
+          this._calledOnce = true
+          this._unsubscribers = []
+          args.forEach(prop => {
+            // realProp: property name/path in your instance
+            // storeProp: property name/path in Redux store
+            let realProp = prop,
+              storeProp = prop
+            if (re.test(prop)) {
+              [, storeProp, realProp] = prop.match(re)
+            }
+            let currentValue = getProp(store.getState(), storeProp)
+            const handleChange = () => {
+              let previousValue = currentValue
+              currentValue = getProp(store.getState(), storeProp)
+              if (!shallowEqual(previousValue, currentValue)) {
+                setProp(this._data, realProp, currentValue)
+              }
             }
+            this._unsubscribers.push(store.subscribe(handleChange))
+          })
+        }
+      },
+      '$unsubscribe': {
+        value() {
+          if (this._unsubscribers && this._unsubscribers.length > 0) {
+            this._calledOnce = false
+            this._unsubscribers.forEach(un => un())
           }
-          this.unsubscriber.push(store.subscribe(handleChange))
-        })
-      }
-    },
-    '$unsubscribe': {
-      value () {
-        if (this.unsubscriber && this.unsubscriber.length > 0) {
-          this.unsubscriber.forEach(un => un())
         }
       }
-    }
-  })
-  // global mixin
+    })
+    // global mixin
   Vue.mixin({
-    beforeDestroy () {
+    beforeDestroy() {
       this.$unsubscribe()
     }
   })

test.js

@@ -1,56 +1,67 @@
-import { jsdom } from 'jsdom'
+import {
+  jsdom
+}
+from 'jsdom'
 global.document = jsdom('<!doctype html><html><body></body></html>')
 global.window = document.defaultView
 import Vue from 'vue'
 import revue from './revue.common'
 import store from './example/store'
-import { addTodo } from './example/actions/todos'
+import {
+  addTodo
+} from './example/actions/todos'
 Vue.use(revue, {
   store
 })
 
 describe('main', () => {
   it('dispatch ADDED_TODO', done => {
     const vm = new Vue({
-      data () {
-        return {
-          todos: this.$revue.getState().todos
+      data() {
+          return {
+            todos: this.$store.state.todos
+          }
+        },
+        // do not use ready() here because the test now is not in dom environment
+        created() {
+          this.$subscribe('todos')
+          this.$store.dispatch({
+            type: 'ADDED_TODO',
+            text: 'hi'
+          })
         }
-      },
-      created () {
-        this.$subscribe('todos')
-        this.$revue.dispatch({type: 'ADDED_TODO', text: 'hi'})
-      }
     })
     vm.$data.todos.items[vm.$data.todos.items.length - 1].text.should.equal('hi')
     done()
   })
   it('test native value', done => {
     const vm = new Vue({
-      data () {
-        return {
-          count: this.$revue.getState().counter
+      data() {
+          return {
+            count: this.$store.state.counter
+          }
+        },
+        created() {
+          this.$subscribe('counter as count')
+          this.$store.dispatch({
+            type: 'INCREMENT'
+          })
         }
-      },
-      created () {
-        this.$subscribe('counter as count')
-        this.$revue.dispatch({type: 'INCREMENT'})
-      }
     })
     vm.$data.count.should.equal(1)
     done()
   })
   it('test thunk', done => {
     const vm = new Vue({
-      data () {
-        return {
-          todos: this.$revue.getState().todos
+      data() {
+          return {
+            todos: this.$store.state.todos
+          }
+        },
+        created() {
+          this.$subscribe('todos')
+          this.$store.dispatch(addTodo('meet a girl'))
         }
-      },
-      created () {
-        this.$subscribe('todos')
-        this.$revue.dispatch(addTodo('meet a girl'))
-      }
     })
     setTimeout(() => {
       vm.$data.todos.items[vm.$data.todos.items.length - 1].text.should.equal('meet a girl')
@@ -59,15 +70,18 @@ describe('main', () => {
   })
   it('test deep property', done => {
     const vm = new Vue({
-      data () {
-        return {
-          fakeAdmin: this.$revue.getState().admin
+      data() {
+          return {
+            fakeAdmin: this.$store.state.admin
+          }
+        },
+        created() {
+          this.$subscribe('admin.info.name as fakeAdmin.info.name')
+          this.$store.dispatch({
+            type: 'CHANGE_NAME',
+            name: 'sox'
+          })
         }
-      },
-      created () {
-        this.$subscribe('admin.info.name as fakeAdmin.info.name')
-        this.$revue.dispatch({type: 'CHANGE_NAME', name: 'sox'})
-      }
     })
     vm.$data.fakeAdmin.info.name.should.equal('sox')
     done()

webpack.config.js

@@ -3,6 +3,7 @@ var HtmlWebpackPlugin = require('html-webpack-plugin')
 
 module.exports = {
   entry: ['./example/index'],
+  devtool: 'cheap-module-eval-source-map',
   output: {
     path: __dirname + '/build',
     filename: 'bundle.[hash].js'