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]), new Map([[1, 2], [3, 4], [5, new Map([[6, 7,]])]])]),
+ j: new Map([[1, 2], [3, 4], [5, new Map([[6, 7,]])], [8, new Set([1, 2, 3, 4, new Set([5, 6, 7, 8]), new Map([[1, 2], [3, 4], [5, new Map([[6, 7,]])]])])]])
  }
  }
  }

src/devtools/components/DataField.vue

@@ -40,6 +40,9 @@ import {
  INFINITY,
  NAN,
  isPlainObject,
+ isMap,
+ isSet,
+ reviver,
  sortByKey
 } from 'src/util'
 
@@ -88,23 +91,28 @@ export default {
  }
  },
  isExpandableType () {
- const value = this.field.value
- return Array.isArray(value) || isPlainObject(value)
+ const value = reviver(null, this.field.value)
+ return Array.isArray(value) || isPlainObject(value) ||
+ isSet(value) || isMap(value)
  },
  formattedValue () {
- const value = this.field.value
+ const value = reviver(null, this.field.value)
  if (value === null) {
  return 'null'
- } else if (value === UNDEFINED) {
+ } else if (value === undefined) {
  return 'undefined'
- } else if (value === NAN) {
+ } else if (Number.isNaN(value)) {
  return 'NaN'
- } else if (value === INFINITY) {
+ } else if (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') {
@@ -119,17 +127,22 @@ export default {
  }
  },
  formattedSubFields () {
- let value = this.field.value
+ let value = reviver(null, this.field.value)
  if (Array.isArray(value)) {
  value = value.map((item, i) => ({
  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)) {
+ // Use many zero-width spaces for keys to ensure each key is unique
+ value = Array.from(value.values()).map((v, i) => ({ key: '_' + '​'.repeat(i), value: v }))
+ } else if (isMap(value)) {
+ value = Array.from(value.entries()).map(([k, v]) => ({ key: k, value: v }))
  }
  return value
  },

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)
  }
@@ -64,13 +70,17 @@ export function parse (data, revive) {
  : CircularJSON.parse(data)
 }
 
-function reviver (key, val) {
+export function reviver (key, val) {
  if (val === UNDEFINED) {
  return undefined
  } else if (val === INFINITY) {
  return Infinity
  } else if (val === NAN) {
  return NaN
+ } else if (isSerializedSet(val)) {
+ return new Set(parse(val.substring(SET.length), true))
+ } else if (isSerializedMap(val)) {
+ return new Map(parse(val.substring(MAP.length), true))
  } else {
  return val
  }
@@ -103,6 +113,26 @@ 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 isSerializedMap (obj) {
+ return isString(obj) && obj.startsWith(MAP)
+}
+
+export function isSerializedSet (obj) {
+ return isString(obj) && obj.startsWith(SET)
+}
+
+export function isString (obj) {
+ return obj instanceof String || typeof obj === 'string'
+}
+
 function isPrimitive (data) {
  if (data == null) {
  return true