From 6b09e02ac826c4d750b0b0c664985358a2071f73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B3=B0?= <chenfengjw@gmail.com>
Date: Wed, 12 Jun 2019 19:37:52 +0800
Subject: [PATCH] Support for incremental update components

---
 lib/json-viewer.vue       |  5 +++++
 lib/types/json-array.vue  | 34 ++++++++++++++++++++++++++++++----
 lib/types/json-object.vue | 30 +++++++++++++++++++++++++-----
 lib/utils.js              | 14 ++++++++++++++
 4 files changed, 74 insertions(+), 9 deletions(-)
 create mode 100644 lib/utils.js

diff --git a/lib/json-viewer.vue b/lib/json-viewer.vue
index 6226a9c..9043fb4 100644
--- a/lib/json-viewer.vue
+++ b/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
diff --git a/lib/types/json-array.vue b/lib/types/json-array.vue
index 62edcad..a1e4769 100644
--- a/lib/types/json-array.vue
+++ b/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: '...'
diff --git a/lib/types/json-object.vue b/lib/types/json-object.vue
index 729bd9e..fcd45f6 100644
--- a/lib/types/json-object.vue
+++ b/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
diff --git a/lib/utils.js b/lib/utils.js
new file mode 100644
index 0000000..bea8f8b
--- /dev/null
+++ b/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();
+  }
+}
\ No newline at end of file