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

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>