convert templates components to render functions (and functional when it is relevant)

lib/json-box.vue

@@ -1,19 +1,3 @@
-<template>
-  <div class="jv-node">
-    <span class="jv-toggle" :class="{open: !!expand}" v-if="keyName && isObject" @click.stop="toggleNode"></span>
-    <span class="jv-key" v-if="keyName">
-      {{keyName}}:
-    </span>
-    <commponent
-      :expand.sync="expand"
-      :is="`Json${valueType}`"
-      :json-value="value"
-      :key-name="keyName"
-      :sort="sort"
-      :depth="depth"></commponent>
-  </div>
-</template>
-
 <script>
 import JsonString from './types/json-string'
 import JsonUndefined from './types/json-undefined'
@@ -27,8 +11,14 @@ export default {
   name: 'JsonBox',
   inject: ['expandDepth'],
   props: {
-    value: [Object, Array, String, Number, Boolean, Function],
-    keyName: String,
+    value: {
+      type: [Object, Array, String, Number, Boolean, Function],
+      default: null
+    },
+    keyName: {
+      type: String,
+      default: ''
+    },
     sort: Boolean,
     depth: {
       type: Number,
@@ -40,53 +30,89 @@ export default {
       expand: true
     }
   },
+  mounted() {
+    this.expand = this.depth >= this.expandDepth ? false : true
+  },
   methods: {
-    toggleNode() {
+    toggle() {
       this.expand = !this.expand
 
       try {
-        this.$el.dispatchEvent(new Event("resized"))
+        this.$el.dispatchEvent(new Event('resized'))
       } catch (e) {
         // handle IE not supporting Event constructor
-        var evt = document.createEvent("Event")
-        evt.initEvent("resized", true, false)
+        var evt = document.createEvent('Event')
+        evt.initEvent('resized', true, false)
         this.$el.dispatchEvent(evt)
       }
     }
   },
-  mounted() {
-    this.expand = this.depth >= this.expandDepth ? false : true
-  },
-  computed: {
-    valueType() {
-      if (this.value === null || this.value === undefined) {
-        return 'Undefined'
-      } else if (Array.isArray(this.value)) {
-        return 'Array'
-      } else if (typeof this.value === 'object') {
-        return 'Object'
-      } else if (typeof this.value === 'number') {
-        return 'Number'
-      } else if (typeof this.value === 'string') {
-        return 'String'
-      } else if (typeof this.value === 'boolean') {
-        return 'Boolean'
-      } else if (typeof this.value === 'function') {
-        return 'Function'
-      }
-    },
-    isObject() {
-      return this.valueType == 'Array' || this.valueType == 'Object'; // eslint-disable-line
+  render (h) {
+    let elements = []
+    let dataType
+
+    if (this.value === null || this.value === undefined) {
+      dataType = JsonUndefined
+    } else if (Array.isArray(this.value)) {
+      dataType = JsonArray
+    } else if (typeof this.value === 'object') {
+      dataType = JsonObject
+    } else if (typeof this.value === 'number') {
+      dataType = JsonNumber
+    } else if (typeof this.value === 'string') {
+      dataType = JsonString
+    } else if (typeof this.value === 'boolean') {
+      dataType = JsonBoolean
+    } else if (typeof this.value === 'function') {
+      dataType = JsonFunction
     }
-  },
-  components: {
-    JsonString,
-    JsonNumber,
-    JsonBoolean,
-    JsonObject,
-    JsonArray,
-    JsonFunction,
-    JsonUndefined
+
+    if (this.keyName && (this.value && (Array.isArray(this.value) || typeof this.value === 'object'))) {
+      elements.push(h('span', {
+        class: {
+          'jv-toggle': true,
+          open: !!this.expand
+        },
+        on: {
+          click: this.toggle
+        }
+      }))
+    }
+
+    if (this.keyName) {
+      elements.push(h('span', {
+        class: {
+          'jv-key': true
+        },
+        domProps: {
+          innerHTML: `${this.keyName}:`
+        }
+      }))
+    }
+
+    elements.push(h(dataType, {
+      class: {
+        'jv-push': true
+      },
+      props: {
+        jsonValue: this.value,
+        keyName: this.keyName,
+        sort: this.sort,
+        depth: this.depth,
+        expand: this.expand
+      },
+      on: {
+        'update:expand': (event) => {
+          this.expand = event
+        }
+      }
+    }))
+
+    return h('div', {
+      class: { 
+        'jv-node': true
+      }
+    }, elements)
   }
 }
 </script>

lib/json-viewer.vue

@@ -1,19 +1,37 @@
 <template>
   <div :class="jvClass">
-    <div class="jv-tooltip" v-if="copyable">
-      <span class="jv-button" ref="clip" @click="clip" :class="{copied}">{{ copied ? 'copied!' : 'copy' }}</span>
+    <div 
+      v-if="copyable"
+      class="jv-tooltip"
+    >
+      <span  
+        ref="clip" 
+        class="jv-button"
+        :class="{copied}"
+        @click="clip" 
+      >{{ copied ? 'copied!' : 'copy' }}</span>
     </div>
-    <div class="jv-code" :class="{'open': expandCode}">
+    <div 
+      class="jv-code" 
+      :class="{'open': expandCode}"
+    >
       <json-box
         ref="jsonBox"
         :value="value"
-        :key-name="keyName"
-        :sort="sort"></json-box>
+        :sort="sort"
+      />
     </div>
-    <div v-if="expandableCode" class="jv-more" @click="toggleExpandCode">
-      <span class="jv-toggle" :class="{open: !!expandCode}"></span>
+    <div 
+      v-if="expandableCode" 
+      class="jv-more" 
+      @click="toggleExpandCode"
+    >
+      <span 
+        class="jv-toggle" 
+        :class="{open: !!expandCode}"
+      />
     </div>
-</div>
+  </div>
 </template>
 
 <script>
@@ -21,13 +39,16 @@ import Vue from 'vue'
 import JsonBox from './json-box'
 import Clipboard from 'clipboard'
 
-Vue.component(JsonBox.name, JsonBox)
-
 export default {
   name: 'JsonViewer',
+  components: {
+    JsonBox
+  },
   props: {
-    value: [Object, Array, String, Number, Boolean],
-    keyName: String,
+    value: {
+      type: [Object, Array, String, Number, Boolean, Function],
+      required: true
+    },
     expandDepth: {
       type: Number,
       default: 1
@@ -49,29 +70,29 @@ export default {
       default: 'jv-light'
     },
   },
-  provide() {
+  provide () {
     return {
       expandDepth: this.expandDepth,
     }
   },
-  data() {
+  data () {
     return {
       copied: false,
       expandableCode: false,
       expandCode: false
     }
   },
+  computed: {
+    jvClass () {
+      return 'jv-container ' + this.theme + (this.boxed ? ' boxed' : '')
+    }
+  },
   mounted: function () {
     this.onResized()
     this.$el.addEventListener("resized", this.onResized, true)
   },
-  computed: {
-    jvClass() {
-      return 'jv-container ' + this.theme + (this.boxed ? ' boxed' : '')
-    }
-  },
   methods: {
-    onResized() {
+    onResized () {
       this.$nextTick(() => {
         if (this.$refs.jsonBox.$el.clientHeight >= 250) {
           this.expandableCode = true
@@ -80,7 +101,7 @@ export default {
         }
       })
     },
-    clip() {
+    clip () {
       if (this.copied) {
         return
       }
@@ -100,12 +121,9 @@ export default {
         clipBoard.destroy()
       })
     },
-    toggleExpandCode() {
+    toggleExpandCode () {
       this.expandCode = !this.expandCode
     }
-  },
-  components: {
-    JsonBox
   }
 }
 </script>
@@ -120,9 +138,9 @@ export default {
     border-radius: 6px;
 
     &:hover {
-      box-shadow: 0 2px 7px rgba(0,0,0,.15);
+      box-shadow: 0 2px 7px rgba(0, 0, 0, 0.15);
       border-color: transparent;
-      position: relative
+      position: relative;
     }
   }
 
@@ -140,20 +158,38 @@ export default {
       line-height: 0.9;
       font-size: 0.9em;
       padding: 0px 4px 2px 4px;
+      margin: 0 4px;
       border-radius: 3px;
       vertical-align: 2px;
       cursor: pointer;
       user-select: none;
     }
-    .jv-button { color: #49b3ff }
-    .jv-key { color: #111111 }
+    .jv-button {
+      color: #49b3ff;
+    }
+    .jv-key {
+      color: #111111;
+      margin-right: 4px;
+    }
     .jv-item {
-      &.jv-array { color: #111111 }
-      &.jv-boolean { color: #fc1e70 }
-      &.jv-function { color: #067bca }
-      &.jv-number { color: #fc1e70 }
-      &.jv-object { color: #111111 }
-      &.jv-undefined { color: #e08331 }
+      &.jv-array {
+        color: #111111;
+      }
+      &.jv-boolean {
+        color: #fc1e70;
+      }
+      &.jv-function {
+        color: #067bca;
+      }
+      &.jv-number {
+        color: #fc1e70;
+      }
+      &.jv-object {
+        color: #111111;
+      }
+      &.jv-undefined {
+        color: #e08331;
+      }
       &.jv-string {
         color: #42b983;
         word-break: break-word;
@@ -201,7 +237,7 @@ export default {
       content: " ";
       position: relative;
       display: inline-block;
-      width: 8px;
+      width: 16px;
     }
 
     &.open {
@@ -224,7 +260,7 @@ export default {
 
     .jv-toggle {
       position: relative;
-      top:40%;
+      top: 40%;
       z-index: 2;
       color: #888;
       transition: all 0.1s;
@@ -239,18 +275,26 @@ export default {
       bottom: 0;
       left: 0;
       z-index: 1;
-      background: linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(230, 230, 230, 1) 100%);
+      background: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0) 20%,
+        rgba(230, 230, 230, 1) 100%
+      );
       transition: all 0.1s;
     }
 
     &:hover {
       .jv-toggle {
-        top:50%;
+        top: 50%;
         color: #111;
       }
 
       &:after {
-      background: linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(230, 230, 230, 0.3) 100%);
+        background: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 0) 20%,
+          rgba(230, 230, 230, 0.3) 100%
+        );
       }
     }
   }

lib/types/json-array.vue

@@ -1,42 +1,33 @@
-<template>
-  <span>
-    <span class="jv-toggle" :class="{open: !!expand}" v-if="!keyName" @click.stop="toggle"></span>
-    <span class="jv-item jv-array">[</span>
-    <template v-if="jsonValue.length">
-      <json-box
-        v-show="expand"
-        v-for="(val, index) in ordered"
-        :sort="sort"
-        :key="index"
-        :value="val"
-        :depth="depth + 1"></json-box>
-      <span
-        v-show="!expand"
-        class="jv-ellipsis"
-        @click.stop="toggle"
-        :title="!expand ? `click to reveal ${jsonValue.length} hidden items` : ''">...</span>
-    </template>
-    <span class="jv-item jv-array"Z>]</span>
-  </span>
-</template>
-
 <script>
+import JsonBox from '../json-box'
+
 export default {
   name: 'JsonArray',
   props: {
-    jsonValue: Array,
-    keyName: String,
+    jsonValue: {
+      type: Array,
+      required: true
+    },
+    keyName: {
+      type: String,
+      default: ''
+    },
+    depth: {
+      type: Number,
+      default: 0
+    },
     sort: Boolean,
-    expand: Boolean,
-    depth: Number
+    expand: Boolean
   },
   computed: {
     ordered () {
+      let value = this.jsonValue
+
       if (!this.sort) {
-        return this.jsonValue
+        return value
       }
 
-      return this.jsonValue.sort()
+      return value.sort()
     }
   },
   methods: {
@@ -44,14 +35,88 @@ export default {
       this.$emit('update:expand', !this.expand)
 
       try {
-        this.$el.dispatchEvent(new Event("resized"))
+        this.$el.dispatchEvent(new Event('resized'))
       } catch (e) {
         // handle IE not supporting Event constructor
-        var evt = document.createEvent("Event")
-        evt.initEvent("resized", true, false)
+        var evt = document.createEvent('Event')
+        evt.initEvent('resized', true, false)
         this.$el.dispatchEvent(evt)
       }
     }
+  },
+  render (h) {
+    let elements = []
+
+    if (!this.keyName) {
+      elements.push(h('span', {
+        class: {
+          'jv-toggle': true,
+          'open': !!this.expand, 
+        },
+        on: {
+          click: this.toggle
+        }
+      }))
+    }
+
+    elements.push(h('span', {
+      class: {
+        'jv-item': true,
+        'jv-array': true, 
+      },
+      domProps: {
+        innerHTML: '['
+      }
+    }))
+
+    for (let key in this.ordered) {
+      let value = this.ordered[key]
+
+      elements.push(h(JsonBox, {
+        key,
+        style: {
+          display: !this.expand ? 'none' : undefined
+        },
+        props: {
+          sort: this.sort,
+          // keyName: key,
+          depth: this.depth + 1,
+          value,
+        }
+      }))
+    }
+
+    if (!this.expand) {
+      elements.push(h('span', {
+        style: {
+          display: this.expand ? 'none' : undefined
+        },
+        class: {
+          'jv-ellipsis': true, 
+        },
+        on: {
+          click: this.toggle
+        },
+        attrs: {
+          title: `click to reveal ${this.jsonValue.length} hidden items`
+        },
+        domProps: {
+          innerHTML: '...'
+        }
+      }))
+    }
+
+    elements.push(h('span', {
+      class: {
+        'jv-item': true,
+        'jv-array': true, 
+      },
+      domProps: {
+        innerHTML: ']'
+      }
+    }))
+
+    return h('span', elements)
   }
 }
 </script>

lib/types/json-boolean.vue

@@ -1,12 +1,20 @@
-<template>
-  <span class="jv-item jv-boolean">{{jsonValue}}</span>
-</template>
-
 <script>
 export default {
   name: 'JsonBoolean',
+  functional: true,
   props: {
     jsonValue: Boolean
+  },
+  render (h, { props }) {
+    return h('span', {
+      class: {
+        'jv-item': true,
+        'jv-boolean': true,
+      },
+      domProps: {
+        innerHTML: props.jsonValue.toString()
+      }
+    })
   }
 }
 </script>

lib/types/json-function.vue

@@ -1,12 +1,26 @@
-<template>
-  <span class="jv-item jv-function">&lt;function&gt;</span>
-</template>
-
 <script>
 export default {
   name: 'JsonFunction',
+  functional: true,
   props: {
-    jsonValue: Function
+    jsonValue: {
+      type: Function,
+      required: true
+    }
+  },
+  render (h, { props }) {
+    return h('span', {
+      class: {
+        'jv-item': true,
+        'jv-function': true,
+      },
+      attrs: {
+        title: props.jsonValue.toString()
+      },
+      domProps: {
+        innerHTML: '&lt;function&gt;'
+      }
+    })
   }
 }
 </script>

lib/types/json-number.vue

@@ -1,12 +1,23 @@
-<template>
-  <span class="jv-item jv-number">{{jsonValue}}</span>
-</template>
-
 <script>
 export default {
   name: 'JsonNumber',
+  functional: true,
   props: {
-    jsonValue: Number
+    jsonValue: {
+      type: Number,
+      required: true
+    }
+  },
+  render (h, { props }) {
+    return h('span', {
+      class: {
+        'jv-item': true,
+        'jv-number': true,
+      },
+      domProps: {
+        innerHTML: props.jsonValue.toString()
+      }
+    })
   }
 }
 </script>

lib/types/json-object.vue

@@ -1,35 +1,23 @@
-<template>
-  <span>
-    <span class="jv-toggle" :class="{open: !!expand}" v-if="!keyName" @click.stop="toggle"></span>
-    <span class="jv-item jv-object">{</span>
-    <template v-if="Object.keys(ordered).length">
-      <json-box
-        v-show="expand"
-        v-for="(v, k) in ordered"
-        :sort="sort"
-        :key="k"
-        :key-name="k"
-        :value="v"
-        :depth="depth + 1"></json-box>
-      <span
-        v-show="!expand"
-        class="jv-ellipsis"
-        @click.stop="toggle"
-        :title="!expand ? `click to reveal object content (keys: ${Object.keys(ordered).join(', ')})` : ''">...</span>
-    </template>
-    <span class="jv-item jv-object">}</span>
-  </span>
-</template>
-
 <script>
+import JsonBox from '../json-box'
+
 export default {
   name: 'JsonObject',
   props: {
-    jsonValue: Object,
-    keyName: String,
+    jsonValue: {
+      type: Object,
+      required: true
+    },
+    keyName: {
+      type: String,
+      default: ''
+    },
+    depth: {
+      type: Number,
+      default: 0
+    },
     expand: Boolean,
-    sort: Boolean,
-    depth: Number
+    sort: Boolean
   },
   computed: {
     ordered () {
@@ -49,14 +37,90 @@ export default {
       this.$emit('update:expand', !this.expand)
 
       try {
-        this.$el.dispatchEvent(new Event("resized"))
+        this.$el.dispatchEvent(new Event('resized'))
       } catch (e) {
         // handle IE not supporting Event constructor
-        var evt = document.createEvent("Event")
-        evt.initEvent("resized", true, false)
+        var evt = document.createEvent('Event')
+        evt.initEvent('resized', true, false)
         this.$el.dispatchEvent(evt)
       }
     }
+  },
+  render (h) {
+    let elements = []
+
+    if (!this.keyName) {
+      elements.push(h('span', {
+        class: {
+          'jv-toggle': true,
+          'open': !!this.expand, 
+        },
+        on: {
+          click: this.toggle
+        }
+      }))
+    }
+
+    elements.push(h('span', {
+      class: {
+        'jv-item': true,
+        'jv-object': true, 
+      },
+      domProps: {
+        innerHTML: '{'
+      }
+    }))
+
+    for (let key in this.ordered) {
+      if (this.ordered.hasOwnProperty(key)) {
+        let value = this.ordered[key]
+
+        elements.push(h(JsonBox, {
+          key,
+          style: {
+            display: !this.expand ? 'none' : undefined
+          },
+          props: {
+            sort: this.sort,
+            keyName: key,
+            depth: this.depth + 1,
+            value,
+          }
+        }))
+      }
+    }
+
+    if (!this.expand) {
+      elements.push(h('span', {
+        style: {
+          display: this.expand ? 'none' : undefined
+        },
+        class: {
+          'jv-ellipsis': true, 
+        },
+        on: {
+          click: this.toggle
+        },
+        attrs: {
+          title: `click to reveal object content (keys: ${Object.keys(this.ordered).join(', ')})`
+        },
+        domProps: {
+          innerHTML: '...'
+        }
+      }))
+    }
+
+    elements.push(h('span', {
+      class: {
+        'jv-item': true,
+        'jv-object': true, 
+      },
+      domProps: {
+        innerHTML: '}'
+      }
+    }))
+
+    return h('span', elements)
   }
 }
 </script>

lib/types/json-string.vue

@@ -1,12 +1,23 @@
-<template>
-  <span class="jv-item jv-string">"{{jsonValue}}"</span>
-</template>
-
 <script>
 export default {
   name: 'JsonString',
+  functional: true,
   props: {
-    jsonValue: String
+    jsonValue: {
+      type: String,
+      required: true
+    }
+  },
+  render (h, { props }) {
+    return h('span', {
+      class: {
+        'jv-item': true,
+        'jv-string': true,
+      },
+      domProps: {
+        innerHTML: `"${props.jsonValue.toString()}"`
+      }
+    })
   }
 }
 </script>

lib/types/json-undefined.vue

@@ -1,12 +1,23 @@
-<template>
-  <span class="jv-item jv-undefined">{{ jsonValue === null ? 'null' : 'undefined' }}</span>
-</template>
-
 <script>
 export default {
   name: 'JsonUndefined',
+  functional: true,
   props: {
-    jsonValue: Object
+    jsonValue: {
+      type: Object,
+      default: null
+    }
+  },
+  render (h, { props }) {
+    return h('span', {
+      class: {
+        'jv-item': true,
+        'jv-undefined': true,
+      },
+      domProps: {
+        innerHTML: props.jsonValue === null ? 'null' : 'undefined'
+      }
+    })
   }
 }
 </script>