Add support for Vue router (adds routing tab)

package.json

@@ -53,6 +53,7 @@
     "lodash.debounce": "^4.0.6",
     "lodash.groupby": "^4.6.0",
     "vue": "^2.0.0",
+    "vue-router": "^2.3.0",
     "vuex": "^2.0.0"
   }
 }

shells/dev/target/index.js

@@ -6,6 +6,47 @@ import Counter from './Counter.vue'
 import Events from './Events.vue'
 import MyClass from './MyClass.js'
 
+import IndexRoute from './router/IndexRoute.vue'
+import RouteOne from './router/RouteOne.vue'
+import RouteTwo from './router/RouteTwo.vue'
+import RouteWithParams from './router/RouteWithParams.vue'
+import NamedRoute from './router/NamedRoute.vue'
+import RouteWithQuery from './router/RouteWithQuery.vue'
+import RouteWithBeforeEnter from './router/RouteWithBeforeEnter.vue'
+import RouteWithAlias from './router/RouteWithAlias.vue'
+import RouteWithProps from './router/RouteWithProps.vue'
+
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+const DynamicComponent = { 
+  template: '<div>Hello from dynamic component</div>' 
+}
+
+const routes = [
+  { path: '/route-one', component: RouteOne },
+  { path: '/route-two', component: RouteTwo },
+  { path: '/route-with-params/:username/:id', component: RouteWithParams },
+  { path: '/route-named', component: NamedRoute, name: 'NamedRoute' },
+  { path: '/route-with-query', component: RouteWithQuery },
+  { path: '/route-with-before-enter', component: RouteWithBeforeEnter, beforeEnter: (to, from, next) => {
+    next()
+  }},
+  { path: '/route-with-redirect', redirect: '/route-one' },
+  { path: '/route-with-alias', component: RouteWithAlias, alias: '/this-is-the-alias' },
+  { path: '/route-with-dynamic-component', component: DynamicComponent },
+  { path: '/route-with-props', component: RouteWithProps, props: {
+    username: 'My Username',
+    id: 99
+  }},
+  { path: '/route-with-props-default', component: RouteWithProps }
+]
+
+const router = new VueRouter({
+  routes
+})
+
 let items = []
 for (var i = 0; i < 100; i++) {
   items.push({ id: i })
@@ -16,12 +57,14 @@ circular.self = circular
 
 new Vue({
   store,
+  router,
   render (h) {
     return h('div', null, [
       h(Counter),
       h(Target, {props:{msg: 'hi', ins: new MyClass()}}),
       h(Other),
-      h(Events)
+      h(Events),
+      h(IndexRoute)
     ])
   },
   data: {

shells/dev/target/router/IndexRoute.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <p><router-link to="/route-one">Go to Route One</router-link></p>
+    <p><router-link to="/route-two">Go to Route Two</router-link></p>
+    <p><router-link to="/route-with-params/markussorg/5">Go to route with params</router-link></p>
+    <p><router-link to="/named-route">Go to named route</router-link></p>
+    <p><router-link to="/route-with-query?el=value&test=true">Go to route with query</router-link></p>
+    <p><router-link to="/route-with-before-enter">Go to route with before enter</router-link></p>
+    <p><router-link to="/route-with-redirect">Go to route with redirect</router-link></p>
+    <p><router-link to="/this-is-the-alias">Go to route with alias</router-link></p>
+    <p><router-link to="/route-with-dynamic-component">Go to route with dyn. component</router-link></p>
+    <p><router-link to="/route-with-props">Go to route with props</router-link></p>
+    <p><router-link to="/route-with-props-default">Go to route with props (default)</router-link></p>
+    <router-view></router-view>
+   </div>
+</template>
+
+<script>
+export default {
+}
+</script>

shells/dev/target/router/NamedRoute.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <p>Hello named route</p>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>

shells/dev/target/router/RouteOne.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <p>Hello from route 1</p>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

shells/dev/target/router/RouteTwo.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <p>Hello from route 2</p>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

shells/dev/target/router/RouteWithAlias.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <p>Hello from route with alias</p>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>

shells/dev/target/router/RouteWithBeforeEnter.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <p>Hello from before enter route</p>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>

shells/dev/target/router/RouteWithParams.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <p>Hello from route with params: Username: {{ $route.params.username }}, Id: {{ $route.params.id }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

shells/dev/target/router/RouteWithProps.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <p>Hello from route with props: Username: {{ username }}, Id: {{ id }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    username: {
+      type: String,
+      default: 'ms'
+    },
+    id: {
+      type: Number,
+      default: 33
+    }
+  }
+}
+</script>

shells/dev/target/router/RouteWithQuery.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <p>Hello from route with query: {{ $route.query }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>

src/backend/index.js

@@ -4,6 +4,7 @@
 import { highlight, unHighlight, getInstanceRect } from './highlighter'
 import { initVuexBackend } from './vuex'
 import { initEventsBackend } from './events'
+import { initRouterBackend } from './router'
 import { stringify, classify, camelize } from '../util'
 import path from 'path'
 
@@ -95,6 +96,9 @@ function connect () {
   bridge.send('ready', hook.Vue.version)
   console.log('[vue-devtools] Ready. Detected Vue v' + hook.Vue.version)
   scan()
+
+  // router
+  initRouterBackend(hook.Vue, bridge, rootInstances)
 }
 
 /**

src/backend/router.js

@@ -0,0 +1,19 @@
+import { stringify } from '../util'
+
+export function initRouterBackend (Vue, bridge, rootInstances) {
+  for (let i = 0; i < rootInstances.length; i++) {
+    if (rootInstances[i]._router) {
+      rootInstances[i]._router.afterEach((to, from) => {
+        bridge.send('router:changed', stringify({
+          to,
+          from,
+          timestamp: Date.now()
+        }))
+      })
+      bridge.send('router:init', stringify({
+        routes: rootInstances[i]._router.options.routes,
+        mode: rootInstances[i]._router.mode
+      }))
+    }
+  }
+}

src/devtools/App.vue

@@ -31,6 +31,13 @@
       <span class="pane-name">Events</span>
       <span class="event-count" v-if="newEventCount > 0">{{ newEventCount }}</span>
     </a>
+    <a class="button router"
+      :class="{ active: tab === 'router' }"
+      @click="switchTab('router')"
+      title="Switch to Router">
+      <i class="material-icons">directions</i>
+      <span class="pane-name">Router</span>
+    </a>
     <a class="button refresh"
       @click="refresh"
       title="Force Refresh">
@@ -47,6 +54,7 @@
 import ComponentsTab from './views/components/ComponentsTab.vue'
 import EventsTab from './views/events/EventsTab.vue'
 import VuexTab from './views/vuex/VuexTab.vue'
+import RouterTab from './views/router/RouterTab.vue'
 
 import { mapState } from 'vuex'
 
@@ -62,7 +70,8 @@ export default {
   components: {
     components: ComponentsTab,
     vuex: VuexTab,
-    events: EventsTab
+    events: EventsTab,
+    router: RouterTab
   },
   computed: mapState({
     message: state => state.message,

src/devtools/common.styl

@@ -22,3 +22,47 @@ $dark-active-color = $active-color
 $dark-border-color = lighten($slate, 10%)
 $dark-background-color = $slate
 $dark-component-color = $active-color
+
+// Entries 
+
+.no-entries
+  color: #ccc
+  text-align: center
+  margin-top: 50px
+  line-height: 30px
+
+.entry
+  position: relative;
+  font-family Menlo, Consolas, monospace
+  color #881391
+  cursor pointer
+  padding 10px 20px
+  font-size 12px
+  background-color $background-color
+  box-shadow 0 1px 5px rgba(0,0,0,.12)
+  .entry-name
+    font-weight 600
+  .entry-source
+    color #999
+  .component-name
+    color $component-color
+  .entry-type
+    color #999
+    margin-left 8px
+  &.active
+    color #fff
+    background-color $active-color
+    .time, .entry-type, .component-name
+      color lighten($active-color, 75%)
+    .entry-name
+      color: #fff
+    .entry-source
+      color #ddd
+  .app.dark &
+    background-color $dark-background-color
+
+.time
+  font-size 11px
+  color #999
+  float right
+  margin-top 3px

src/devtools/components/SplitPane.vue

@@ -45,27 +45,5 @@ export default {
 
 <style lang="stylus" scoped>
 @import "../common"
-
-.split-pane
-  display flex
-  height 100%
-  &.dragging
-    cursor ew-resize
-
-.left, .right
-  position relative
-
-.left
-  border-right 1px solid $border-color
-  .app.dark &
-    border-right 1px solid $dark-border-color
-
-.dragger
-  position absolute
-  z-index 99
-  top 0
-  bottom 0
-  right -5px
-  width 10px
-  cursor ew-resize
+@import "./splitPanes"
 </style>