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

Author: stafyniaksacha

.eslintrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  extends: [
+    'plugin:vue/recommended'
+  ],
+  rules: {
+    // override/add rules settings here, such as:
+    // 'vue/no-unused-vars': 'error'
+  }
+}

example/app.js

@@ -11,6 +11,7 @@ new Vue({
         total: 25,
         limit: 10,
         skip: 0,
+        success: true,
         links: {
           previous: undefined,
           next: function () {},

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>