Add routing tab

.gitignore

@@ -5,3 +5,4 @@ build
 tests_output
 selenium-debug.log
 TODOs.md
+.vscode

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/chrome/webpack.config.js

@@ -18,8 +18,8 @@ module.exports = {
     detector: './src/detector.js'
   },
   output: {
-    path: __dirname + '/build',
-    filename: '[name].js',
+    path: path.join(__dirname, '/build'),
+    filename: '[name].js'
   },
   resolve: {
     alias
@@ -28,7 +28,7 @@ module.exports = {
     rules: [
       {
         test: /\.js$/,
-        loader:  'buble-loader',
+        loader: 'buble-loader',
         exclude: /node_modules|vue\/dist|vuex\/dist/,
         options: bubleOptions
       },

shells/dev/target/index.js

@@ -6,22 +6,72 @@ import Counter from './Counter.vue'
 import Events from './Events.vue'
 import MyClass from './MyClass.js'
 
-let items = []
+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 ParentRoute from './router/ParentRoute.vue'
+import ChildRoute from './router/ChildRoute.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, props: true },
+  { path: '/route-with-props', component: RouteWithProps, props: {
+    username: 'My Username',
+    id: 99
+  }},
+  { path: '/route-with-props-default', component: RouteWithProps },
+  { path: '/route-parent', component: ParentRoute,
+    children: [
+      { path: '/route-child', component: ChildRoute }
+    ]
+  }
+]
+
+const router = new VueRouter({
+  routes
+})
+
+const items = []
 for (var i = 0; i < 100; i++) {
   items.push({ id: i })
 }
 
-let circular = {}
+const circular = {}
 circular.self = circular
 
 new Vue({
   store,
+  router,
   render (h) {
     return h('div', null, [
       h(Counter),
-      h(Target, {props:{msg: 'hi', ins: new MyClass()}}),
+      h(Target, {props: {msg: 'hi', ins: new MyClass()}}),
       h(Other),
-      h(Events)
+      h(Events),
+      h(IndexRoute)
     ])
   },
   data: {

shells/dev/target/router/ChildRoute.vue

@@ -0,0 +1,9 @@
+<template>
+  <h2>Child route</h2>
+</template>
+
+<script>
+export default {
+
+}
+</script>

shells/dev/target/router/IndexRoute.vue

@@ -0,0 +1,33 @@
+<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="/route-named">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>
+    <p><router-link to="/route-parent">Go to route parent</router-link></p>
+    <p><router-link to="/route-child">Go to route child</router-link></p>
+    <router-view></router-view>
+    <p><button @click="addRoutes">Add new routes</button></p>
+   </div>
+</template>
+
+<script>
+import RouteOne from './RouteOne.vue'
+
+export default {
+  methods: {
+    addRoutes () {
+      this.$router.addRoutes([
+        { path: '/new-route', component: RouteOne }
+      ])
+    } 
+  }
+}
+</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/ParentRoute.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="parent">
+    <h2>Parent</h2>
+    <router-view class="child"></router-view>
+  </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,51 @@
+import { stringify } from '../util'
+
+export function initRouterBackend (Vue, bridge, rootInstances) {
+  let recording = true
+
+  const getSnapshot = () => {
+    const routeChanges = []
+    rootInstances.forEach(instance => {
+      const router = instance._router
+      if (router && router.options && router.options.routes) {
+        routeChanges.push(...router.options.routes)
+      }
+    })
+    return stringify({
+      routeChanges
+    })
+  }
+
+  bridge.send('routes:init', getSnapshot())
+
+  bridge.on('router:toggle-recording', enabled => {
+    recording = enabled
+  })
+
+  rootInstances.forEach(instance => {
+    const router = instance._router
+    if (router) {
+      router.afterEach((to, from) => {
+        if (!recording) return
+        bridge.send('router:changed', stringify({
+          to,
+          from,
+          timestamp: Date.now()
+        }))
+      })
+      bridge.send('router:init', stringify({
+        mode: router.mode
+      }))
+
+      if (router.matcher && router.matcher.addRoutes) {
+        const addRoutes = router.matcher.addRoutes
+        router.matcher.addRoutes = function (routes) {
+          routes.forEach((item) => {
+            bridge.send('routes:changed', stringify(item))
+          })
+          addRoutes.call(this, routes)
+        }
+      }
+    }
+  })
+}

src/devtools/App.vue

@@ -31,6 +31,20 @@
       <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 router"
+      :class="{ active: tab === 'routes' }"
+      @click="switchTab('routes')"
+      title="Switch to Routes">
+      <i class="material-icons">book</i>
+      <span class="pane-name">Routes</span>
+    </a>
     <a class="button refresh"
       @click="refresh"
       title="Force Refresh">
@@ -47,6 +61,8 @@
 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 RoutesTab from './views/routes/RoutesTab.vue'
 
 import { mapState } from 'vuex'
 
@@ -62,7 +78,9 @@ export default {
   components: {
     components: ComponentsTab,
     vuex: VuexTab,
-    events: EventsTab
+    events: EventsTab,
+    router: RouterTab,
+    routes: RoutesTab
   },
   computed: mapState({
     message: state => state.message,