New _custom object API + component value support in state inspector

Author: Guillaume Chau

shells/dev/target/Date.vue renamed to shells/dev/target/NativeTypes.vue

@@ -5,26 +5,48 @@
     <p>
       <button @click="updateDate">Update Date</button>
     </p>
+
+    <hr>
+
+    <TestComponent ref="component" />
+
+    <p>
+      <button @click="sendComponent">Vuex mutation</button>
+    </p>
   </div>
 </template>
 
 <script>
 import { mapState, mapGetters, mapMutations } from 'vuex'
 
 export default {
+  components: {
+    TestComponent: {
+      data: () => ({ foo: '42' }),
+      props: { bar: { default: 'hey' }},
+      render: h => h('div', '<TestComponent />')
+    }
+  },
   data () {
     return {
-      localDate: new Date()
+      localDate: new Date(),
+      testComponent: null
     }
   },
   computed: {
     ...mapState(['date']),
     ...mapGetters(['hours'])
   },
+  mounted () {
+    this.testComponent = this.$refs.component
+  },
   methods: {
     ...mapMutations({
       updateDate: 'UPDATE_DATE'
-    })
+    }),
+    sendComponent () {
+      this.$store.commit('TEST_COMPONENT', this.testComponent)
+    }
   },
   filters: {
     prototypeString: val => Object.prototype.toString.call(val)

shells/dev/target/index.js

@@ -3,7 +3,7 @@ import store from './store'
 import Target from './Target.vue'
 import Other from './Other.vue'
 import Counter from './Counter.vue'
-import Date from './Date.vue'
+import NativeTypes from './NativeTypes.vue'
 import Events from './Events.vue'
 import MyClass from './MyClass.js'
 
@@ -23,7 +23,7 @@ new Vue({
       h(Target, {props:{msg: 'hi', ins: new MyClass()}}),
       h(Other),
       h(Events),
-      h(Date)
+      h(NativeTypes)
     ])
   },
   data: {

shells/dev/target/store.js

@@ -13,7 +13,8 @@ export default new Vuex.Store({
     DECREMENT: state => state.count--,
     UPDATE_DATE: state => {
       state.date = new Date()
-    }
+    },
+    TEST_COMPONENT: state => {}
   },
   getters: {
     isPositive: state => state.count >= 0,

src/backend/index.js

@@ -21,7 +21,7 @@ const hook = window.__VUE_DEVTOOLS_GLOBAL_HOOK__
 const rootInstances = []
 const propModes = ['default', 'sync', 'once']
 
-const instanceMap = window.__VUE_DEVTOOLS_INSTANCE_MAP__ = new Map()
+export const instanceMap = window.__VUE_DEVTOOLS_INSTANCE_MAP__ = new Map()
 const consoleBoundInstances = Array(5)
 let currentInspectedId
 let bridge
@@ -320,18 +320,46 @@ function getInstanceDetails (id) {
     return {
       id: id,
       name: getInstanceName(instance),
-      state: processProps(instance).concat(
-        processState(instance),
-        processComputed(instance),
-        processRouteContext(instance),
-        processVuexGetters(instance),
-        processFirebaseBindings(instance),
-        processObservables(instance)
-      )
+      state: getInstanceState(instance)
     }
   }
 }
 
+function getInstanceState (instance) {
+  return processProps(instance).concat(
+    processState(instance),
+    processComputed(instance),
+    processRouteContext(instance),
+    processVuexGetters(instance),
+    processFirebaseBindings(instance),
+    processObservables(instance)
+  )
+}
+
+export function getCustomInstanceDetails (instance) {
+  const state = getInstanceState(instance)
+  return {
+    _custom: {
+      type: 'component',
+      id: instance.__VUE_DEVTOOLS_UID__,
+      display: getInstanceName(instance),
+      state: reduceStateList(state)
+    }
+  }
+}
+
+export function reduceStateList (list) {
+  if (!list.length) {
+    return undefined
+  }
+  return list.reduce((map, item) => {
+    const key = item.type || 'data'
+    const obj = map[key] = map[key] || {}
+    obj[item.key] = item.value
+    return map
+  }, {})
+}
+
 /**
  * Get the appropriate display name for an instance.
  *

src/devtools/components/DataField.vue

@@ -8,14 +8,14 @@
         :class="{ rotated: expanded }"
         v-show="isExpandableType">
       </span>
-      <span class="key">{{ field.key }}</span>
-      <span class="colon">:<div class="meta" v-if="field.meta">
+      <span class="key" :class="{ special: field.noDisplay }">{{ field.key }}</span>
+      <span class="colon"><span v-if="!field.noDisplay">:</span><div class="meta" v-if="field.meta">
         <div class="meta-field" v-for="(val, key) in field.meta">
           <span class="key">{{ key }}</span>
           <span class="value">{{ val }}</span>
         </div>
       </div></span>
-      <span class="value" :class="valueType">{{ formattedValue }}</span>
+      <span class="value" :class="valueClass">{{ formattedValue }}</span>
     </div>
     <div class="children" v-if="expanded && isExpandableType">
       <data-field
@@ -44,7 +44,7 @@ import {
 } from 'src/util'
 
 const rawTypeRE = /^\[object (\w+)]$/
-const specialTypeRE = /^\[native \w+ (.*)\]$/
+const specialTypeRE = /^\[native (\w+) (.*)\]$/
 
 function subFieldCount (value) {
   if (Array.isArray(value)) {
@@ -81,32 +81,41 @@ export default {
         value === NAN
       ) {
         return 'literal'
+      } else if (value && value._custom) {
+        return 'custom'
       } else if (specialTypeRE.test(value)) {
-        return 'native'
+        const [, type] = specialTypeRE.exec(value)
+        return `native ${type}`
       } else if (type === 'string' && !rawTypeRE.test(value)) {
         return 'string'
       }
     },
     isExpandableType () {
       const value = this.field.value
-      return Array.isArray(value) || isPlainObject(value)
+      return Array.isArray(value) ||
+        (this.valueType === 'custom' && value._custom.state) ||
+        (this.valueType !== 'custom' && isPlainObject(value))
     },
     formattedValue () {
       const value = this.field.value
-      if (value === null) {
+      if (this.field.noDisplay) {
+        return ''
+      } else if (value === null) {
         return 'null'
       } else if (value === UNDEFINED) {
         return 'undefined'
       } else if (value === NAN) {
         return 'NaN'
       } else if (value === INFINITY) {
         return 'Infinity'
+      } else if (this.valueType === 'custom') {
+        return value._custom.display
       } else if (Array.isArray(value)) {
         return 'Array[' + value.length + ']'
       } else if (isPlainObject(value)) {
         return 'Object' + (Object.keys(value).length ? '' : ' (empty)')
-      } else if (this.valueType === 'native') {
-        return specialTypeRE.exec(value)[1]
+      } else if (this.valueType.includes('native')) {
+        return specialTypeRE.exec(value)[2]
       } else if (typeof value === 'string') {
         var typeMatch = value.match(rawTypeRE)
         if (typeMatch) {
@@ -126,15 +135,29 @@ export default {
           value: item
         }))
       } else if (typeof value === 'object') {
+        const isCustom = this.valueType === 'custom'
+        if (isCustom) {
+          value = value._custom.state
+        }
         value = sortByKey(Object.keys(value).map(key => ({
           key,
-          value: value[key]
+          value: value[key],
+          noDisplay: isCustom
         })))
       }
       return value
     },
     limitedSubFields () {
       return this.formattedSubFields.slice(0, this.limit)
+    },
+    valueClass () {
+      const cssClass = [this.valueType]
+      if (this.valueType === 'custom') {
+        const value = this.field.value
+        value._custom.type && cssClass.push(`type-${value._custom.type}`)
+        value._custom.class && cssClass.push(value._custom.class)
+      }
+      return cssClass
     }
   },
   methods: {
@@ -175,6 +198,8 @@ export default {
       transform rotate(90deg)
   .key
     color #881391
+    &.special
+      color $blueishGrey
   .colon
     margin-right .5em
     position relative
@@ -186,6 +211,16 @@ export default {
       color #999
     &.literal
       color #0033cc
+    &.custom
+      &.type-component
+        color $green
+        &::before,
+        &::after
+          color $darkerGrey
+        &::before
+          content '<'
+        &::after
+          content '>'
 
   .type
     color $background-color

src/devtools/variables.styl

@@ -1,6 +1,8 @@
 // Colors
 $blue = #44A1FF
 $grey = #DDDDDD
+$darkerGrey = #CCC
+$blueishGrey = #486887
 $green = #42B983
 $darkerGreen = #3BA776
 $slate = #242424

src/devtools/views/components/ComponentInstance.vue

@@ -186,7 +186,7 @@ export default {
     transform rotate(90deg)
 
 .angle-bracket
-  color #ccc
+  color $darkerGrey
 
 .instance-name
   color $component-color

src/util.js

@@ -1,5 +1,7 @@
 import CircularJSON from 'circular-json-es6'
 
+import { instanceMap, getCustomInstanceDetails } from 'src/backend'
+
 function cached (fn) {
   const cache = Object.create(null)
   return function cachedFn (str) {
@@ -56,6 +58,8 @@ function replacer (key) {
     return `[native RegExp ${val.toString()}]`
   } else if (val instanceof Date) {
     return `[native Date ${val.toString()}]`
+  } else if (val && val._isVue) {
+    return getCustomInstanceDetails(val)
   } else {
     return sanitize(val)
   }
@@ -76,6 +80,10 @@ function reviver (key, val) {
     return Infinity
   } else if (val === NAN) {
     return NaN
+  } else if (val && val._custom) {
+    if (val._custom.type === 'component') {
+      return instanceMap.get(val._custom.id)
+    }
   } else if (specialTypeRE.test(val)) {
     const [, type, string] = specialTypeRE.exec(val)
     return new window[type](string)