feat: support vue3

build/webpack.config.js

@@ -1,6 +1,6 @@
 const path = require('path');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const { VueLoaderPlugin } = require('vue-loader')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 module.exports = {

build/webpack.ssr.config.js

@@ -2,7 +2,7 @@ const path = require('path');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const { VueLoaderPlugin } = require('vue-loader')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 module.exports = {

example/App.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <json-viewer
+      preview-mode
+      :value="{'data': {'data': {'data': {'a': 1}}}}"
+    ></json-viewer>
+    <json-viewer :value="jsonData"></json-viewer>
+    <hr />
+    <json-viewer
+      :value="jsonData"
+      :expand-depth="5"
+      :copyable="{ copyText: '复制', copiedText: '复制成功', align: 'left' }"
+      boxed
+      :timeformat="(time) => new Date(time)"
+      sort
+      ></json-viewer>
+    <hr />
+    <json-viewer
+      :value="jsonData"
+      :expand-depth="1"
+      :copyable="{ timeout: 4000, align: 'left' }"
+      :onCopied="onCopied"
+    >
+      <template v-slot:copy="{ copied }">
+        <button v-if="copied" disabled>Copied!</button>
+        <button v-else>Copy me!</button>
+      </template>
+    </json-viewer>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      jsonData: {
+        total: 25,
+        limit: 10,
+        skip: 0,
+        numbers: 10.11,
+        success: true,
+        links: {
+          previous: undefined,
+          next: function () {},
+        },
+        data: [
+          {
+            id: '5968fcad629fa84ab65a5247',
+            firstname: 'Ada',
+            link: 'http://google.com',
+            lastname: 'Lovelace',
+            awards: null,
+            known: [
+              'mathematics',
+              'computing'
+            ],
+            position: {
+              lat: 44.563836,
+              lng: 6.495139
+            },
+            description: `Augusta Ada King, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer,
+            chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer,
+            the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation,
+            and published the first algorithm intended to be carried out by such a machine.
+            As a result, she is sometimes regarded as the first to recognise the full potential of a "computing machine" and the first computer programmer.`,
+            bornAt: new Date('1815-12-10T00:00:00.000Z'),
+            diedAt: new Date('1852-11-27T00:00:00.000Z')
+          }, {
+            id: '5968fcad629fa84ab65a5246',
+            firstname: 'Grace',
+            lastname: 'Hopper',
+            awards: [
+              'Defense Distinguished Service Medal',
+              'Legion of Merit',
+              'Meritorious Service Medal',
+              'American Campaign Medal',
+              'World War II Victory Medal',
+              'National Defense Service Medal',
+              'Armed Forces Reserve Medal',
+              'Naval Reserve Medal',
+              'Presidential Medal of Freedom'
+            ],
+            known: null,
+            position: {
+              lat: 43.614624,
+              lng: 3.879995
+            },
+            description: `Grace Brewster Murray Hopper (née Murray; December 9, 1906 – January 1, 1992)
+            was an American computer scientist and United States Navy rear admiral.
+            One of the first programmers of the Harvard Mark I computer,
+            she was a pioneer of computer programming who invented one of the first compiler related tools.
+            She popularized the idea of machine-independent programming languages, which led to the development of COBOL,
+            an early high-level programming language still in use today.`,
+            bornAt: new Date('1815-12-10T00:00:00.000Z'),
+            diedAt: new Date('1852-11-27T00:00:00.000Z')
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    onCopied(copyEvent) {
+      alert(`Text successfully copied!\n${copyEvent.text}`);
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.jv-number-float {
+  color: #faa !important;
+}
+.jv-key-node {
+  display: flex;
+}
+</style>

example/app.css

@@ -1,6 +0,0 @@
-.jv-number-float {
-  color: #faa !important;
-}
-.jv-key-node {
-  display: flex;
-}

example/app.js

@@ -1,125 +1,13 @@
-import Vue from 'vue'
+import { createApp, h } from 'vue'
 import JsonViewer from '../lib'
-import './app.css'
+import App from './App.vue'
 
-Vue.use(JsonViewer)
+const app = createApp({
-
-new Vue({
-  el: '#app',
   render() {
-    const scopedSlots = {
+    return h(App)
-      copy: ({ copied }) => {
-        if (copied) return <button disabled>Copied!</button>
-        return <button>Copy me!</button>
-      },
-    }
-    const onCopied = (copyEvent) => {
-      alert(`Text successfully copied!\n${copyEvent.text}`);
-    }
-    return (
-      <div>
-        <json-viewer
-          preview-mode
-          value={{
-            data: {
-              data: {
-                data: {
-                  a: 1
-                }
-              }
-            }
-          }}></json-viewer>
-        <json-viewer value={this.jsonData}></json-viewer>
-        <hr />
-        <json-viewer
-          value={this.jsonData}
-          expand-depth={5}
-          copyable={{
-            copyText: '复制',
-            copiedText: '复制成功',
-            align: 'left'
-          }}
-          boxed
-          timeformat={time => new Date(time)}
-          sort></json-viewer>
-        <hr />
-        <json-viewer
-          value={this.jsonData}
-          expand-depth={1}
-          copyable={{
-            timeout: 4000,
-            align: 'left'
-          }}
-          scopedSlots={scopedSlots}
-          onCopied={onCopied}></json-viewer>
-      </div>
-    )
-  },
-  data() {
-    return {
-      jsonData: {
-        total: 25,
-        limit: 10,
-        skip: 0,
-        numbers: 10.11,
-        success: true,
-        links: {
-          previous: undefined,
-          next: function () {},
-        },
-        data: [
-          {
-            id: '5968fcad629fa84ab65a5247',
-            firstname: 'Ada',
-            link: 'http://google.com',
-            lastname: 'Lovelace',
-            awards: null,
-            known: [
-              'mathematics',
-              'computing'
-            ],
-            position: {
-              lat: 44.563836,
-              lng: 6.495139
-            },
-            description: `Augusta Ada King, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer,
-            chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer,
-            the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation,
-            and published the first algorithm intended to be carried out by such a machine.
-            As a result, she is sometimes regarded as the first to recognise the full potential of a "computing machine" and the first computer programmer.`,
-            bornAt: new Date('1815-12-10T00:00:00.000Z'),
-            diedAt: new Date('1852-11-27T00:00:00.000Z')
-          }, {
-            id: '5968fcad629fa84ab65a5246',
-            firstname: 'Grace',
-            lastname: 'Hopper',
-            awards: [
-              'Defense Distinguished Service Medal',
-              'Legion of Merit',
-              'Meritorious Service Medal',
-              'American Campaign Medal',
-              'World War II Victory Medal',
-              'National Defense Service Medal',
-              'Armed Forces Reserve Medal',
-              'Naval Reserve Medal',
-              'Presidential Medal of Freedom'
-            ],
-            known: null,
-            position: {
-              lat: 43.614624,
-              lng: 3.879995
-            },
-            description: `Grace Brewster Murray Hopper (née Murray; December 9, 1906 – January 1, 1992)
-            was an American computer scientist and United States Navy rear admiral.
-            One of the first programmers of the Harvard Mark I computer,
-            she was a pioneer of computer programming who invented one of the first compiler related tools.
-            She popularized the idea of machine-independent programming languages, which led to the development of COBOL,
-            an early high-level programming language still in use today.`,
-            bornAt: new Date('1815-12-10T00:00:00.000Z'),
-            diedAt: new Date('1852-11-27T00:00:00.000Z')
-          }
-        ]
-      }
-    }
   }
 })
+
+app.use(JsonViewer)
+
+app.mount("#app")

example/build/webpack.dev.conf.js

@@ -1,5 +1,5 @@
 const path = require('path');
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const { VueLoaderPlugin } = require('vue-loader')
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {

lib/index.js

@@ -1,7 +1,7 @@
 import JsonView from './json-viewer'
 
-const install = Vue => {
+const install = app => {
-  Vue.component('JsonViewer', JsonView)
+  app.component('JsonViewer', JsonView)
 }
 
 export default Object.assign(JsonView, { install })

lib/json-box.vue

@@ -1,4 +1,5 @@
 <script>
+import { h } from 'vue'
 import JsonString from './types/json-string'
 import JsonUndefined from './types/json-undefined'
 import JsonNumber from './types/json-number'
@@ -60,7 +61,7 @@ export default {
       return path.reverse()
     }
   },
-  render (h) {
+  render () {
     let elements = []
     let dataType
 
@@ -89,9 +90,7 @@ export default {
           'jv-toggle': true,
           open: !!this.expand
         },
-        on: {
+        onClick: this.toggle
-          click: this.toggle
-        }
       }))
     }
 
@@ -100,9 +99,7 @@ export default {
         class: {
           'jv-key': true
         },
-        domProps: {
+        innerText: `${this.keyName}:`
-          innerText: `${this.keyName}:`
-        }
       }))
     }
 
@@ -110,18 +107,14 @@ export default {
       class: {
         'jv-push': true
       },
-      props: {
+      jsonValue: this.value,
-        jsonValue: this.value,
+      keyName: this.keyName,
-        keyName: this.keyName,
+      sort: this.sort,
-        sort: this.sort,
+      depth: this.depth,
-        depth: this.depth,
+      expand: this.expand,
-        expand: this.expand,
+      previewMode: this.previewMode,
-        previewMode: this.previewMode,
+      'onUpdate:expand': value => {
-      },
+        this.expand = value
-      on: {
-        'update:expand': value => {
-          this.expand = value
-        }
       }
     }))
 

lib/json-viewer.vue

@@ -1,11 +1,11 @@
 <template>
   <div ref="viewer" :class="jvClass">
-    <div 
+    <div
       v-if="copyable"
       :class="`jv-tooltip ${copyText.align || 'right'}`"
     >
-      <span  
+      <span
-        ref="clip" 
+        ref="clip"
         class="jv-button"
         :class="{copied}"
       >
@@ -17,8 +17,8 @@
         </slot>
       </span>
     </div>
-    <div 
+    <div
-      class="jv-code" 
+      class="jv-code"
       :class="{'open': expandCode, boxed}"
     >
       <json-box
@@ -28,13 +28,13 @@
         :preview-mode="previewMode"
       />
     </div>
-    <div 
+    <div
-      v-if="expandableCode && boxed" 
+      v-if="expandableCode && boxed"
-      class="jv-more" 
+      class="jv-more"
       @click="toggleExpandCode"
     >
-      <span 
+      <span
-        class="jv-toggle" 
+        class="jv-toggle"
         :class="{open: !!expandCode}"
       />
     </div>
@@ -334,7 +334,7 @@ export default {
 
     &:hover {
       .jv-toggle {
-        top: 50%; 
+        top: 50%;
         color: #111;
       }
 

lib/types/json-array.vue

@@ -1,4 +1,5 @@
 <script>
+import { h } from 'vue'
 import JsonBox from '../json-box'
 
 export default {
@@ -57,9 +58,9 @@ export default {
         this.$el.dispatchEvent(evt)
       }
     },
-    
+
   },
-  render (h) {
+  render () {
     let elements = []
 
     if (!this.previewMode && !this.keyName) {
@@ -68,9 +69,7 @@ export default {
           'jv-toggle': true,
           'open': !!this.expand,
         },
-        on: {
+        onClick: this.toggle
-          click: this.toggle
-        }
       }))
     }
 
@@ -79,9 +78,7 @@ export default {
         'jv-item': true,
         'jv-array': true,
       },
-      domProps: {
+      innerText: '['
-        innerText: '['
-      }
     }))
     if (this.expand) {
       this.value.forEach((value, key) => {
@@ -90,13 +87,11 @@ export default {
           style: {
             display: this.expand ? undefined : 'none'
           },
-          props: {
+          sort: this.sort,
-            sort: this.sort,
+          keyName: `${key}`,
-            keyName: `${key}`,
+          depth: this.depth + 1,
-            depth: this.depth + 1,
+          value,
-            value,
+          previewMode: this.previewMode,
-            previewMode: this.previewMode,
-          }
         }))
       })
     }
@@ -109,15 +104,9 @@ export default {
         class: {
           'jv-ellipsis': true,
         },
-        on: {
+        onClick: this.toggle,
-          click: this.toggle
+        title: `click to reveal ${this.value.length} hidden items`,
-        },
+        innerText: '...'
-        attrs: {
-          title: `click to reveal ${this.value.length} hidden items`
-        },
-        domProps: {
-          innerText: '...'
-        }
       }))
     }
 
@@ -126,9 +115,7 @@ export default {
         'jv-item': true,
         'jv-array': true,
       },
-      domProps: {
+      innerText: ']'
-        innerText: ']'
-      }
     }))
 
     return h('span', elements)

lib/types/json-boolean.vue

@@ -1,19 +1,19 @@
 <script>
+import { h } from 'vue'
+
 export default {
   name: 'JsonBoolean',
   functional: true,
   props: {
     jsonValue: Boolean
   },
-  render (h, { props }) {
+  render () {
     return h('span', {
       class: {
         'jv-item': true,
         'jv-boolean': true,
       },
-      domProps: {
+      innerText: this.jsonValue.toString()
-        innerText: props.jsonValue.toString()
-      }
     })
   }
 }

lib/types/json-date.vue

@@ -1,4 +1,6 @@
 <script>
+import { h } from 'vue'
+
 export default {
   name: 'JsonDate',
   inject: ['timeformat'],
@@ -9,18 +11,16 @@ export default {
       required: true
     }
   },
-  render (h, { props, injections }) {
+  render () {
-    const value = props.jsonValue;
+    const value = this.jsonValue;
-    const timeformat = injections.timeformat;
+    const timeformat = this.timeformat;
 
     return h('span', {
       class: {
         'jv-item': true,
         'jv-string': true,
       },
-      domProps: {
+      innerText: `"${timeformat(value)}"`
-        innerText: `"${timeformat(value)}"`
-      }
     })
   }
 };

lib/types/json-function.vue

@@ -1,4 +1,6 @@
 <script>
+import { h } from 'vue'
+
 export default {
   name: 'JsonFunction',
   functional: true,
@@ -8,18 +10,16 @@ export default {
       required: true
     }
   },
-  render (h, { props }) {
+  render () {
     return h('span', {
       class: {
         'jv-item': true,
         'jv-function': true,
       },
       attrs: {
-        title: props.jsonValue.toString()
+        title: this.jsonValue.toString()
       },
-      domProps: {
+      innerHTML: '&lt;function&gt;'
-        innerHTML: '&lt;function&gt;'
-      }
     })
   }
 }

lib/types/json-number.vue

@@ -1,4 +1,6 @@
 <script>
+import { h } from 'vue'
+
 export default {
   name: 'JsonNumber',
   functional: true,
@@ -8,8 +10,8 @@ export default {
       required: true
     }
   },
-  render (h, { props }) {
+  render () {
-    const isInteger = Number.isInteger(props.jsonValue)
+    const isInteger = Number.isInteger(this.jsonValue)
 
     return h('span', {
       class: {
@@ -18,9 +20,7 @@ export default {
         'jv-number-integer': isInteger,
         'jv-number-float': !isInteger,
       },
-      domProps: {
+      innerText: this.jsonValue.toString()
-        innerText: props.jsonValue.toString()
-      }
     })
   }
 }

lib/types/json-object.vue

@@ -1,4 +1,5 @@
 <script>
+import { h } from 'vue'
 import JsonBox from '../json-box'
 
 export default {
@@ -67,7 +68,7 @@ export default {
       }
     }
   },
-  render (h) {
+  render () {
     let elements = []
 
     if (!this.previewMode && !this.keyName) {
@@ -76,9 +77,7 @@ export default {
           'jv-toggle': true,
           'open': !!this.expand,
         },
-        on: {
+        onClick: this.toggle
-          click: this.toggle
-        }
       }))
     }
 
@@ -87,9 +86,7 @@ export default {
         'jv-item': true,
         'jv-object': true,
       },
-      domProps: {
+      innerText: '{'
-        innerText: '{'
-      }
     }))
 
     if (this.expand) {
@@ -102,13 +99,12 @@ export default {
             style: {
               display: !this.expand ? 'none' : undefined
             },
-            props: {
+
-              sort: this.sort,
+            sort: this.sort,
-              keyName: key,
+            keyName: key,
-              depth: this.depth + 1,
+            depth: this.depth + 1,
-              value,
+            value,
-              previewMode: this.previewMode,
+            previewMode: this.previewMode,
-            }
           }))
         }
       }
@@ -122,15 +118,9 @@ export default {
         class: {
           'jv-ellipsis': true,
         },
-        on: {
+        onClick: this.toggle,
-          click: this.toggle
+        title: `click to reveal object content (keys: ${Object.keys(this.ordered).join(', ')})`,
-        },
+        innerText: '...'
-        attrs: {
-          title: `click to reveal object content (keys: ${Object.keys(this.ordered).join(', ')})`
-        },
-        domProps: {
-          innerText: '...'
-        }
       }))
     }
 
@@ -139,9 +129,7 @@ export default {
         'jv-item': true,
         'jv-object': true,
       },
-      domProps: {
+      innerText: '}'
-        innerText: '}'
-      }
     }))
 
     return h('span', elements)

lib/types/json-string.vue

@@ -1,4 +1,6 @@
 <script>
+import { h } from 'vue'
+
 const REG_LINK = /^\w+:\/\//;
 
 export default {
@@ -25,7 +27,7 @@ export default {
       this.expand = !this.expand;
     }
   },
-  render (h) {
+  render () {
     let value = this.jsonValue;
     const islink = REG_LINK.test(value)
     let domItem
@@ -35,12 +37,8 @@ export default {
         class: {
           'jv-ellipsis': true,
         },
-        on: {
+        onClick: this.toggle,
-          click: this.toggle
+        innerText: '...'
-        },
-        domProps: {
-          innerText: '...'
-        }
       };
     } else {
       domItem = {
@@ -52,16 +50,12 @@ export default {
       }
       if (islink) {
         value = `<a href="${value}" target="_blank" class="jv-link">${value}</a>`;
-        domItem.domProps = {
+        domItem.innerHTML = `"${value.toString()}"`
-          innerHTML: `"${value.toString()}"`
-        }
       } else {
-        domItem.domProps = {
+        domItem.innerText = `"${value.toString()}"`
-          innerText: `"${value.toString()}"`
-        }
       }
     }
-    
+
 
     return h('span', {}, [
       this.canExtend && h('span', {
@@ -69,9 +63,7 @@ export default {
           'jv-toggle': true,
           open: this.expand,
         },
-        on: {
+        onClick: this.toggle,
-          click: this.toggle,
-        }
       }),
       h('span', {
         class: {

lib/types/json-undefined.vue

@@ -1,4 +1,6 @@
 <script>
+import { h } from 'vue'
+
 export default {
   name: 'JsonUndefined',
   functional: true,
@@ -8,15 +10,13 @@ export default {
       default: null
     }
   },
-  render (h, { props }) {
+  render () {
     return h('span', {
       class: {
         'jv-item': true,
         'jv-undefined': true,
       },
-      domProps: {
+      innerText: this.jsonValue === null ? 'null' : 'undefined'
-        innerText: props.jsonValue === null ? 'null' : 'undefined'
-      }
     })
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-json-viewer",
-  "version": "2.2.20",
+  "version": "3.0.1",
   "description": "vuejs展示json的组件",
   "main": "vue-json-viewer.js",
   "files": ["vue-json-viewer.js", "ssr.js", "style.css"],
@@ -42,6 +42,7 @@
     "clipboard": "^2.0.4"
   },
   "devDependencies": {
+    "@vue/compiler-sfc": "^3.2.2",
     "autoprefixer": "^7.1.5",
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.0.1",
@@ -65,9 +66,9 @@
     "style-loader": "^0.19.0",
     "uglifyjs-webpack-plugin": "^2.1.2",
     "url-loader": "^0.6.2",
-    "vue": "^2.6.9",
+    "vue": "^3.2.2",
-    "vue-loader": "^15.7.0",
+    "vue-loader": "^16.5.0",
-    "vue-style-loader": "^4.1.2",
+    "vue-style-loader": "^4.1.3",
     "vue-template-compiler": "^2.6.9",
     "webpack": "=4.29.6",
     "webpack-bundle-analyzer": "^3.3.2",
@@ -76,6 +77,6 @@
     "webpack-merge": "^4.1.0"
   },
   "peerDependencies": {
-    "vue": "^2.6.9"
+    "vue": "^3.2.2"
   }
 }