fix: reactivity issues, closes #34 #38

Author: Guillaume Chau

src/components/MeteorData.js

@@ -26,7 +26,7 @@ export default {
 
   render (h) {
     let result = this.$scopedSlots.default({
-      data: this.meteorData,
+      data: this.$data.$meteor.data.meteorData,
     })
     if (Array.isArray(result)) {
       result = result.concat(this.$slots.default)

src/index.js

@@ -58,26 +58,56 @@ export default {
       return result
     }
 
+    function firstPrepare () {
+      prepare.call(this)
+      Object.defineProperty(this, '$subReady', {
+        get: () => this.$data.$meteor.subs,
+        enumerable: true,
+        configurable: true,
+      })
+      proxyData.call(this)
+    }
+
     function prepare () {
       this._trackerHandles = []
       this._subsAutorun = {}
       this._subs = {}
+    }
+
+    function proxyData () {
+      const initData = this.$_meteorInitData = {}
+      let meteor = this.$options.meteor
 
-      // First launch
-      if (this._meteorLaunch == null) {
-        this._meteorLaunch = 0
+      if (meteor) {
+        // Reactive data
+        for (let key in meteor) {
+          if (key.charAt(0) !== '$') {
+            proxyKey.call(this, key)
+
+            const func = meteor[key]
+
+            if (meteor.$lazy && typeof func === 'function') {
+              initData[key] = getResult(func.call(this))
+            }
+          }
+        }
+      }
+    }
 
-        Object.defineProperty(this, '$subReady', {
-          get: () => this.$data.$meteor.subs,
-          enumerable: true,
-          configurable: true,
-        })
+    function proxyKey (key) {
+      if (hasProperty(this, key)) {
+        throw Error(`Meteor data '${key}': Property already used in the component methods or prototype.`)
       }
+
+      Object.defineProperty(this, key, {
+        get: () => this.$data.$meteor.data[key],
+        enumerable: true,
+        configurable: true,
+      })
     }
 
     function launch () {
       this._meteorActive = true
-      this._meteorLaunch++
 
       let meteor = this.$options.meteor
 
@@ -109,18 +139,18 @@ export default {
       data () {
         return {
           $meteor: {
-            data: {},
+            data: this.$_meteorInitData,
             subs: {},
           },
         }
       },
 
       ...vueVersion === '1' ? {
-        init: prepare,
+        init: firstPrepare,
       } : {},
 
       ...vueVersion === '2' ? {
-        beforeCreate: prepare,
+        beforeCreate: firstPrepare,
       } : {},
 
       created () {
@@ -234,22 +264,20 @@ export default {
           this._meteorActive = false
         },
 
-        $addMeteorData (key, func) {
+        $addMeteorData (key, func, proxy = false) {
           if (typeof func === 'function') {
             func = func.bind(this)
           } else {
             throw Error(`Meteor data '${key}': You must provide a function which returns the result.`)
           }
 
-          if (hasProperty(this.$data, key) || hasProperty(this.$props, key) || (hasProperty(this, key) && this._meteorLaunch === 1)) {
-            throw Error(`Meteor data '${key}': Property already used in the component data, props or other.`)
-          }
+          if (proxy) {
+            if (hasProperty(this.$data, key) || hasProperty(this.$props, key)) {
+              throw Error(`Meteor data '${key}': Property already used in the component data or props.`)
+            }
 
-          Object.defineProperty(this, key, {
-            get: () => this.$data.$meteor.data[key],
-            enumerable: true,
-            configurable: true,
-          })
+            proxyKey.call(this, key)
+          }
 
           // Function run
           const setResult = result => {
@@ -282,6 +310,7 @@ export default {
         },
 
         $addComputed (key, watcher) {
+          if (watcher.getter.vuex) return
           let computation, autorunMethod
           const autorun = (cb) => {
             if (!computation) {
@@ -290,7 +319,20 @@ export default {
               computation = autorunMethod(computation => {
                 dirty = true
                 watcher.value = getResult(cb.call(this))
-                watcher.deps.forEach(dep => dep.notify())
+                // Call watcher callback
+                const get = watcher.get
+                watcher.get = () => watcher.value
+                watcher.run()
+                watcher.get = get
+                // Notify watchers subscribed in dependencies
+                for (const dep of watcher.deps) {
+                  const subs = dep.subs.slice()
+                  for (const sub of subs) {
+                    if (sub.id !== watcher.id) {
+                      sub.update()
+                    }
+                  }
+                }
                 dirty = false
               })
               // Update from Vue (override)
@@ -303,14 +345,20 @@ export default {
             return watcher.value
           }
           // Override getter to expose $autorun
-          const func = watcher.getter
+          const getter = watcher.getter
           watcher.getter = () => {
             autorunMethod = this.$autorun
             this.$autorun = autorun
-            const result = func.call(this, this)
+            const result = getter.call(this, this)
             this.$autorun = autorunMethod
             return result
           }
+          // If watcher was created before the computed property
+          // (for example because of a $watch)
+          // we update the result with the getter override
+          if (watcher.value instanceof Tracker.Computation) {
+            watcher.run()
+          }
         },
       },
     })