fix hot-reloading of bars (#14)

Author: DeviaVir

README.md

@@ -146,6 +146,11 @@ You can pass an array of objects as data value, and give your labels a `title`.
     </bars>
 ```
 
+## On-the-fly reloading
+
+Make sure you use pass the same variable for your `data` as for the `key`, this will make sure Vue recognizes changes to your data array,
+and consequently forces a reload of the instance.
+
 ## TODO
 - Unit test
 

dist/vue-bars.common.js

@@ -184,26 +184,6 @@ var Bars$1 = {
     }
   },
 
-  watch: {
-    data: {
-      immediate: true,
-      handler: function handler (val) {
-        var this$1 = this;
-
-        this.$nextTick(function () {
-          if (this$1.$isServer || !this$1.$refs.path || !this$1.autoDraw) {
-            return
-          }
-
-          var path = this$1.$refs.path.$el;
-
-          path.style.transform = 'none';
-          path.style.transform = "scale(1,-1) translate(0,-" + (this$1.$refs.path.boundary.maxY) + ")";
-        });
-      }
-    }
-  },
-
   render: function render (h) {
     if (!this.data || this.data.length < 2) { return }
     var ref = this;

dist/vue-bars.esm.js

@@ -182,26 +182,6 @@ var Bars$1 = {
     }
   },
 
-  watch: {
-    data: {
-      immediate: true,
-      handler: function handler (val) {
-        var this$1 = this;
-
-        this.$nextTick(function () {
-          if (this$1.$isServer || !this$1.$refs.path || !this$1.autoDraw) {
-            return
-          }
-
-          var path = this$1.$refs.path.$el;
-
-          path.style.transform = 'none';
-          path.style.transform = "scale(1,-1) translate(0,-" + (this$1.$refs.path.boundary.maxY) + ")";
-        });
-      }
-    }
-  },
-
   render: function render (h) {
     if (!this.data || this.data.length < 2) { return }
     var ref = this;

dist/vue-bars.js

@@ -188,26 +188,6 @@ var Bars$1 = {
     }
   },
 
-  watch: {
-    data: {
-      immediate: true,
-      handler: function handler (val) {
-        var this$1 = this;
-
-        this.$nextTick(function () {
-          if (this$1.$isServer || !this$1.$refs.path || !this$1.autoDraw) {
-            return
-          }
-
-          var path = this$1.$refs.path.$el;
-
-          path.style.transform = 'none';
-          path.style.transform = "scale(1,-1) translate(0,-" + (this$1.$refs.path.boundary.maxY) + ")";
-        });
-      }
-    }
-  },
-
   render: function render (h) {
     if (!this.data || this.data.length < 2) { return }
     var ref = this;

dist/vue-bars.min.js

@@ -5,6 +5,7 @@
     <h1>Vue Bars</h1>
     <p> Simple, elegant spark bars for Vue.js</p>
     <bars
+      :key="data"
       :data="data"
       :gradient="gradient"
       :barWidth="5"
@@ -29,6 +30,7 @@
       this.data = [1, 2, 5, 9, 5, 10, 3, 5, 8, 12, 1, 8, 2, 9, 10, 2, 9, 4, 5, 6, 7, 3, 2, 3, 5]
       this.gradient = ['#ffbe88', '#ff93df']
       this.code = hanabi(`<bars
+  :key="reference-to-your-var"
   :data="[1, 2, 5, 9, 5, 10, 3, 5, 8, 12, 1, 8, 2, 9, 10, 2, 9, 4, 5, 6, 7, 3, 2, 3, 5]"
   :gradient="['#ffbe88', '#ff93df']"
   :barWidth="5"

docs/home.vue

@@ -37,24 +37,6 @@ export default {
     }
   },
 
-  watch: {
-    data: {
-      immediate: true,
-      handler (val) {
-        this.$nextTick(() => {
-          if (this.$isServer || !this.$refs.path || !this.autoDraw) {
-            return
-          }
-
-          const path = this.$refs.path.$el
-
-          path.style.transform = 'none'
-          path.style.transform = `scale(1,-1) translate(0,-${this.$refs.path.boundary.maxY})`
-        })
-      }
-    }
-  },
-
   render (h) {
     if (!this.data || this.data.length < 2) return
     const { width, height, padding } = this