Serialization & Types improvements (vuejs#523)

* More fault tolerant

* Display stores with CustomValue API

* Dsiplay VueRouter instances with CustomValue API

* CustomValue API: new 'tooltip' option, supports functions, component def

* Test router & store

* Open in editor Component defs

* Fix vuejs#528

* Comments

* Encode cache clear

* Large array test

* CustomValue API: respect fields order

* Switch props and data sections to follow style guide

* New 'grey' and 'red' classes

DataField: allowing to reproduce current available styling using CustomValue API

* Add support for Map and Set - Fix vuejs#349

Initial PR vuejs#490 by AdamNiederer

* Set and Map test case

* Fix Map key/value inverted

* Optimizations

* Fix tooltip

* DataField style changes

* Env: added isLinux & isWindows + function 'f' style fixes

* gps-not-fixed icon is ugly on Windows

* Style tweaks

* Typo

* Added more function test cases

shells/dev/target/NativeTypes.vue

@@ -11,43 +11,118 @@
     <TestComponent ref="component" />
 
     <p>
-      <button @click="sendComponent">Vuex mutation</button>
+      <button @click="sendComponent()">Vuex mutation</button>
+      <button @click="createLargeArray()">Create large array</button>
+    </p>
+
+    <h3>Set</h3>
+    <pre>{{ setDisplay() }}</pre>
+
+    <h3>Map</h3>
+    <pre>{{ mapDisplay() }}</pre>
+
+    <p>
+      <button @click="testVuexSet()">Vuex Set</button>
+      <button @click="testVuexMap()">Vuex Map</button>
+      <button @click="forceRefresh()">Refresh</button>
     </p>
   </div>
 </template>
 
 <script>
 import { mapState, mapGetters, mapMutations } from 'vuex'
+import CompDef from './Other.vue'
 
 export default {
   components: {
     TestComponent: {
-      data: () => ({ foo: '42' }),
       props: { bar: { default: 'hey' }},
+      data: () => ({ foo: '42' }),
+      computed: {
+        parentComp () { return this.$parent }
+      },
       render: h => h('div', '<TestComponent />')
     }
   },
+
   data () {
     return {
       localDate: new Date(),
-      testComponent: null
+      reg: /abc/gi,
+      testComponent: null,
+      hello: function foo (a, b, c) {},
+      hey: function empty () {},
+      anon: function (foo, bar) {},
+      arrow: (a, b) => {},
+      def: CompDef,
+      def2: {
+        name: 'MyComponent',
+        render () {}
+      },
+      def3: {
+        render () {}
+      },
+      largeArray: [],
+      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]])]])])]])
     }
   },
   computed: {
-    ...mapState(['date']),
-    ...mapGetters(['hours'])
+    ...mapState([
+      'date',
+      'set',
+      'map'
+    ]),
+
+    ...mapGetters([
+      'hours'
+    ]),
+
+    theRouter () {
+      return this.$router
+    },
+
+    theStore () {
+      return this.$store
+    },
   },
+
   mounted () {
     this.testComponent = this.$refs.component
   },
+
   methods: {
     ...mapMutations({
-      updateDate: 'UPDATE_DATE'
+      updateDate: 'UPDATE_DATE',
+      testVuexSet: 'TEST_SET',
+      testVuexMap: 'TEST_MAP'
     }),
+
     sendComponent () {
       this.$store.commit('TEST_COMPONENT', this.testComponent)
+    },
+
+    createLargeArray () {
+      const list = []
+      for (let i = 0; i < 10000000; i++) {
+        list.push(i)
+      }
+      this.largeArray = list
+    },
+
+    setDisplay () {
+      return Array.from(this.set)
+    },
+
+    mapDisplay () {
+      return [...this.map]
+    },
+
+    forceRefresh () {
+      this.$forceUpdate()
     }
   },
+
   filters: {
     prototypeString: val => Object.prototype.toString.call(val)
   }

shells/dev/target/store.js

@@ -6,15 +6,23 @@ Vue.use(Vuex)
 export default new Vuex.Store({
   state: {
     count: 0,
-    date: new Date()
+    date: new Date(),
+    set: new Set(),
+    map: new Map()
   },
   mutations: {
     INCREMENT: state => state.count++,
     DECREMENT: state => state.count--,
     UPDATE_DATE: state => {
       state.date = new Date()
     },
-    TEST_COMPONENT: state => {}
+    TEST_COMPONENT: state => {},
+    TEST_SET: state => {
+      state.set.add(Math.random())
+    },
+    TEST_MAP: state => {
+      state.map.set(`mykey_${state.map.size}`, state.map.size)
+    }
   },
   getters: {
     isPositive: state => state.count >= 0,

src/backend/index.js

@@ -4,20 +4,10 @@
 import { highlight, unHighlight, getInstanceRect } from './highlighter'
 import { initVuexBackend } from './vuex'
 import { initEventsBackend } from './events'
-import { stringify, classify, camelize, set, parse } from '../util'
-import path from 'path'
+import { stringify, classify, camelize, set, parse, getComponentName } from '../util'
 import ComponentSelector from './component-selector'
 import config from './config'
 
-// Use a custom basename functions instead of the shimed version
-// because it doesn't work on Windows
-function basename (filename, ext) {
-  return path.basename(
-    filename.replace(/^[a-zA-Z]:/, '').replace(/\\/g, '/'),
-    ext
-  )
-}
-
 // hook should have been injected before this executes.
 const hook = window.__VUE_DEVTOOLS_GLOBAL_HOOK__
 const rootInstances = []
@@ -67,7 +57,6 @@ function connect () {
     currentInspectedId = id
     const instance = instanceMap.get(id)
     bindToConsole(instance)
-    flush()
     bridge.send('instance-details', stringify(getInstanceDetails(id)))
   })
 
@@ -383,6 +372,7 @@ export function getCustomInstanceDetails (instance) {
       type: 'component',
       id: instance.__VUE_DEVTOOLS_UID__,
       display: getInstanceName(instance),
+      tooltip: 'Component instance',
       value: reduceStateList(state),
       fields: {
         abstract: true
@@ -411,14 +401,8 @@ export function reduceStateList (list) {
  */
 
 export function getInstanceName (instance) {
-  const name = instance.$options.name || instance.$options._componentTag
-  if (name) {
-    return name
-  }
-  const file = instance.$options.__file // injected by vue-loader
-  if (file) {
-    return classify(basename(file, '.vue'))
-  }
+  const name = getComponentName(instance.$options)
+  if (name) return name
   return instance.$root === instance
     ? 'Root'
     : 'Anonymous Component'
@@ -444,11 +428,11 @@ function processProps (instance) {
         type: 'props',
         key: prop.path,
         value: instance[prop.path],
-        meta: {
+        meta: options ? {
           type: options.type ? getPropType(options.type) : 'any',
           required: !!options.required,
           mode: propModes[prop.mode]
-        }
+        } : {}
       }
     })
   } else if ((props = instance.$options.props)) {
@@ -461,9 +445,11 @@ function processProps (instance) {
         type: 'props',
         key,
         value: instance[key],
-        meta: {
+        meta: prop ? {
           type: prop.type ? getPropType(prop.type) : 'any',
           required: !!prop.required
+        } : {
+          type: 'invalid'
         }
       })
     }
@@ -565,27 +551,30 @@ function processComputed (instance) {
  */
 
 function processRouteContext (instance) {
-  const route = instance.$route
-  if (route) {
-    const { path, query, params } = route
-    const value = { path, query, params }
-    if (route.fullPath) value.fullPath = route.fullPath
-    if (route.hash) value.hash = route.hash
-    if (route.name) value.name = route.name
-    if (route.meta) value.meta = route.meta
-    return [{
-      key: '$route',
-      value: {
-        _custom: {
-          type: 'router',
-          abstract: true,
-          value
+  try {
+    const route = instance.$route
+    if (route) {
+      const { path, query, params } = route
+      const value = { path, query, params }
+      if (route.fullPath) value.fullPath = route.fullPath
+      if (route.hash) value.hash = route.hash
+      if (route.name) value.name = route.name
+      if (route.meta) value.meta = route.meta
+      return [{
+        key: '$route',
+        value: {
+          _custom: {
+            type: 'router',
+            abstract: true,
+            value
+          }
         }
-      }
-    }]
-  } else {
-    return []
+      }]
+    }
+  } catch (e) {
+    // Invalid $router
   }
+  return []
 }
 
 /**

src/backend/router.js

@@ -0,0 +1,15 @@
+export function getCustomRouterDetails (router) {
+  return {
+    _custom: {
+      type: 'router',
+      display: 'VueRouter',
+      value: {
+        options: router.options,
+        currentRoute: router.currentRoute
+      },
+      fields: {
+        abstract: true
+      }
+    }
+  }
+}

src/backend/vuex.js

@@ -41,3 +41,19 @@ export function initVuexBackend (hook, bridge) {
     recording = enabled
   })
 }
+
+export function getCustomStoreDetails (store) {
+  return {
+    _custom: {
+      type: 'store',
+      display: 'Store',
+      value: {
+        state: store.state,
+        getters: store.getters
+      },
+      fields: {
+        abstract: true
+      }
+    }
+  }
+}