Show Set and Map expanded views

shells/dev/target/Other.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-// this computed property should be visible 
+// this computed property should be visible
 // even if component has no 'computed' defined
 const computedPropMixin = {
   computed: {
@@ -21,12 +21,12 @@ export default {
   mixins: [ computedPropMixin ],
   data () {
     let a = { c: function () {} }
-    a.a = a
+    a.intentionalRecursion = a
     let b = []
     b[0] = b
     return {
       a: a,
-      b: b
+      intentionalRecusionArray: b
     }
   },
   components: {
@@ -42,7 +42,9 @@ export default {
           e: undefined,
           f: true,
           g: 12345,
-          h: 'I am a really long string mostly just to see how the horizontal scrolling works.'
+          h: 'I am a really long string mostly just to see how the horizontal scrolling works.',
+          i: new Set([1, 2, 3, 4, new Set([5, 6, 7, 8])]),
+          j: new Map([[1, 2], [3, 4], [5, new Map([[6, 7,]])]])
         }
       }
     }

src/devtools/components/DataField.vue

@@ -40,6 +40,8 @@ import {
   INFINITY,
   NAN,
   isPlainObject,
+  isMap,
+  isSet,
   sortByKey
 } from 'src/util'
 
@@ -89,22 +91,27 @@ export default {
     },
     isExpandableType () {
       const value = this.field.value
-      return Array.isArray(value) || isPlainObject(value)
+      return Array.isArray(value) || isPlainObject(value) ||
+        isSet(value) || isMap(value)
     },
     formattedValue () {
       const value = this.field.value
       if (value === null) {
         return 'null'
-      } else if (value === UNDEFINED) {
+      } else if (value === UNDEFINED || value === undefined) {
         return 'undefined'
-      } else if (value === NAN) {
+      } else if (value === NAN || Number.isNaN(value)) {
         return 'NaN'
-      } else if (value === INFINITY) {
+      } else if (value === INFINITY || value === Number.POSITIVE_INFINITY) {
         return 'Infinity'
       } else if (Array.isArray(value)) {
         return 'Array[' + value.length + ']'
       } else if (isPlainObject(value)) {
-        return 'Object' + (Object.keys(value).length ? '' : ' (empty)')
+        return 'Object[' + Object.keys(value).length + ']'
+      } else if (isSet(value)) {
+        return 'Set[' + value.size + ']'
+      } else if (isMap(value)) {
+        return 'Map[' + value.size + ']'
       } else if (this.valueType === 'native') {
         return specialTypeRE.exec(value)[1]
       } else if (typeof value === 'string') {
@@ -125,11 +132,15 @@ export default {
           key: i,
           value: item
         }))
-      } else if (typeof value === 'object') {
+      } else if (isPlainObject(value)) {
         value = sortByKey(Object.keys(value).map(key => ({
           key,
           value: value[key]
         })))
+      } else if (isSet(value)) {
+        value = Array.from(value.values()).map(v => ({ key: '_', value: v }))
+      } else if (isMap(value)) {
+        value = Array.from(value.entries()).map(([k, v]) => ({ key: k, value: v }))
       }
       return value
     },

src/devtools/index.js

@@ -81,7 +81,7 @@ function initApp (shell) {
     })
 
     bridge.on('instance-details', details => {
-      store.commit('components/RECEIVE_INSTANCE_DETAILS', parse(details))
+      store.commit('components/RECEIVE_INSTANCE_DETAILS', parse(details, true))
     })
 
     bridge.on('vuex:init', snapshot => {

src/util.js

@@ -38,6 +38,8 @@ export function inDoc (node) {
 export const UNDEFINED = '__vue_devtool_undefined__'
 export const INFINITY = '__vue_devtool_infinity__'
 export const NAN = '__vue_devtool_nan__'
+export const SET = '__vue_devtool_set__'
+export const MAP = '__vue_devtool_map__'
 
 export function stringify (data) {
   return CircularJSON.stringify(data, replacer)
@@ -53,6 +55,10 @@ function replacer (key, val) {
   } else if (val instanceof RegExp) {
     // special handling of native type
     return `[native RegExp ${val.toString()}]`
+  } else if (isSet(val)) {
+    return SET + stringify(Array.from(val))
+  } else if (isMap(val)) {
+    return MAP + stringify(Array.from(val))
   } else {
     return sanitize(val)
   }
@@ -71,6 +77,10 @@ function reviver (key, val) {
     return Infinity
   } else if (val === NAN) {
     return NaN
+  } else if (isString(val) && val.startsWith(SET)) {
+    return new Set(parse(val.substring(SET.length), true))
+  } else if (isString(val) && val.startsWith(MAP)) {
+    return new Map(parse(val.substring(MAP.length), true))
   } else {
     return val
   }
@@ -103,6 +113,18 @@ export function isPlainObject (obj) {
   return Object.prototype.toString.call(obj) === '[object Object]'
 }
 
+export function isMap (obj) {
+  return obj instanceof Map
+}
+
+export function isSet (obj) {
+  return obj instanceof Set
+}
+
+export function isString (obj) {
+  return obj instanceof String || typeof obj === 'string'
+}
+
 function isPrimitive (data) {
   if (data == null) {
     return true