Support for incremental update components

lib/json-viewer.vue

@@ -37,6 +37,7 @@
 import Vue from 'vue'
 import JsonBox from './json-box'
 import Clipboard from 'clipboard'
+import {debounce} from './utils';
 
 export default {
   name: 'JsonViewer',
@@ -92,6 +93,7 @@ export default {
     }
   },
   mounted: function () {
+    this.debounceResized = debounce(this.debResized.bind(this), 200);
     if (this.boxed && this.$refs.jsonBox) {
       this.onResized()
       this.$refs.jsonBox.$el.addEventListener("resized", this.onResized, true)
@@ -109,6 +111,9 @@ export default {
   },
   methods: {
     onResized () {
+      this.debounceResized();
+    },
+    debResized() {
       this.$nextTick(() => {
         if (this.$refs.jsonBox.$el.clientHeight >= 250) {
           this.expandableCode = true

lib/types/json-array.vue

@@ -3,6 +3,11 @@ import JsonBox from '../json-box'
 
 export default {
   name: 'JsonArray',
+  data() {
+    return {
+      value: []
+    }
+  },
   props: {
     jsonValue: {
       type: Array,
@@ -21,7 +26,7 @@ export default {
   },
   computed: {
     ordered () {
-      let value = this.jsonValue
+      let value = this.value
 
       if (!this.sort) {
         return value
@@ -30,7 +35,27 @@ export default {
       return value.sort()
     }
   },
+  watch: {
+    jsonValue(newVal) {
+      this.setValue(newVal);
+    }
+  },
+  mounted() {
+    this.setValue(this.jsonValue);
+  },
   methods: {
+    setValue(vals, index = 0) {
+      if (index === 0) {
+        this.value = [];
+      }
+      setTimeout(() => {
+        this.value.push(vals[index]);
+
+        if (vals[index + 1]) {
+          this.setValue(vals, index + 1);
+        }
+      }, 0);
+    },
     toggle() {
       this.$emit('update:expand', !this.expand)
 
@@ -42,7 +67,8 @@ export default {
         evt.initEvent('resized', true, false)
         this.$el.dispatchEvent(evt)
       }
-    }
+    },
+    
   },
   render (h) {
     let elements = []
@@ -84,7 +110,7 @@ export default {
       }))
     })
 
-    if (!this.expand && this.jsonValue.length) {
+    if (!this.expand && this.value.length) {
       elements.push(h('span', {
         style: {
           display: undefined
@@ -96,7 +122,7 @@ export default {
           click: this.toggle
         },
         attrs: {
-          title: `click to reveal ${this.jsonValue.length} hidden items`
+          title: `click to reveal ${this.value.length} hidden items`
         },
         domProps: {
           innerHTML: '...'

lib/types/json-object.vue

@@ -3,6 +3,11 @@ import JsonBox from '../json-box'
 
 export default {
   name: 'JsonObject',
+  data() {
+    return {
+      value: {}
+    }
+  },
   props: {
     jsonValue: {
       type: Object,
@@ -22,20 +27,35 @@ export default {
   computed: {
     ordered () {
       if (!this.sort) {
-        return this.jsonValue
+        return this.value
       }
 
       const ordered = {}
-      Object.keys(this.jsonValue).forEach(key => {
-        ordered[key] = this.jsonValue[key]
+      Object.keys(this.value).sort().forEach(key => {
+        ordered[key] = this.value[key]
       })
       return ordered
     }
   },
+  watch: {
+    jsonValue(newVal) {
+      this.setValue(newVal);
+    }
+  },
+  mounted() {
+    this.setValue(this.jsonValue);
+  },
   methods: {
+    setValue(val) {
+      setTimeout(() => {
+        this.value = val;
+      }, 0);
+    },
     toggle() {
       this.$emit('update:expand', !this.expand)
-
+      this.dispatchEvent();
+    },
+    dispatchEvent() {
       try {
         this.$el.dispatchEvent(new Event('resized'))
       } catch (e) {
@@ -90,7 +110,7 @@ export default {
       }
     }
 
-    if (!this.expand && Object.keys(this.jsonValue).length) {
+    if (!this.expand && Object.keys(this.value).length) {
       elements.push(h('span', {
         style: {
           display: this.expand ? 'none' : undefined

lib/utils.js

@@ -0,0 +1,14 @@
+export const debounce = function(func, wait) {
+  let startTime = Date.now();
+  let timer;
+
+  return (...args) => {
+    if (Date.now() - startTime < wait && timer) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(() => {
+      func(...args);
+    }, wait);
+    startTime = Date.now();
+  }
+}