From 0343b9e5394dfae3a0cf89687f16f70a9e433465 Mon Sep 17 00:00:00 2001 From: Markus Sorg Date: Wed, 1 Mar 2017 16:31:52 +0100 Subject: [PATCH 01/20] First draft of implementation --- package.json | 1 + shells/dev/target/index.js | 38 +++++++- shells/dev/target/router/IndexRoute.vue | 19 ++++ shells/dev/target/router/NamedRoute.vue | 10 ++ shells/dev/target/router/RouteOne.vue | 11 +++ shells/dev/target/router/RouteTwo.vue | 11 +++ shells/dev/target/router/RouteWithAlias.vue | 10 ++ .../target/router/RouteWithBeforeEnter.vue | 10 ++ shells/dev/target/router/RouteWithParams.vue | 11 +++ shells/dev/target/router/RouteWithQuery.vue | 10 ++ src/backend/index.js | 4 + src/backend/router.js | 22 +++++ src/devtools/App.vue | 11 ++- src/devtools/index.js | 8 ++ src/devtools/store/index.js | 10 +- src/devtools/views/router/RouteMeta.vue | 42 ++++++++ src/devtools/views/router/RouterTab.vue | 31 ++++++ src/devtools/views/router/RoutesHistory.vue | 96 +++++++++++++++++++ src/devtools/views/router/module.js | 32 +++++++ 19 files changed, 382 insertions(+), 5 deletions(-) create mode 100644 shells/dev/target/router/IndexRoute.vue create mode 100644 shells/dev/target/router/NamedRoute.vue create mode 100644 shells/dev/target/router/RouteOne.vue create mode 100644 shells/dev/target/router/RouteTwo.vue create mode 100644 shells/dev/target/router/RouteWithAlias.vue create mode 100644 shells/dev/target/router/RouteWithBeforeEnter.vue create mode 100644 shells/dev/target/router/RouteWithParams.vue create mode 100644 shells/dev/target/router/RouteWithQuery.vue create mode 100644 src/backend/router.js create mode 100644 src/devtools/views/router/RouteMeta.vue create mode 100644 src/devtools/views/router/RouterTab.vue create mode 100644 src/devtools/views/router/RoutesHistory.vue create mode 100644 src/devtools/views/router/module.js diff --git a/package.json b/package.json index 44e150884..5cea7c2b8 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "circular-json-es6": "^2.0.0", "lodash.debounce": "^4.0.6", "vue": "^2.0.0", + "vue-router": "^2.3.0", "vuex": "^2.0.0" } } diff --git a/shells/dev/target/index.js b/shells/dev/target/index.js index 2ce42d634..3dae88b13 100644 --- a/shells/dev/target/index.js +++ b/shells/dev/target/index.js @@ -4,6 +4,40 @@ import Target from './Target.vue' import Other from './Other.vue' import Counter from './Counter.vue' import Events from './Events.vue' +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 VueRouter from 'vue-router' + +Vue.use(VueRouter) + +const DynamicComponent = { + template: '
Hello from dynamic component
' +} + +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 } +] + +const router = new VueRouter({ + routes +}) let items = [] for (var i = 0; i < 100; i++) { @@ -15,12 +49,14 @@ circular.self = circular new Vue({ store, + router, render (h) { return h('div', null, [ h(Counter), h(Target, {props:{msg:'hi'}}), h(Other), - h(Events) + h(Events), + h(IndexRoute) ]) }, data: { diff --git a/shells/dev/target/router/IndexRoute.vue b/shells/dev/target/router/IndexRoute.vue new file mode 100644 index 000000000..65fd7125d --- /dev/null +++ b/shells/dev/target/router/IndexRoute.vue @@ -0,0 +1,19 @@ + + + diff --git a/shells/dev/target/router/NamedRoute.vue b/shells/dev/target/router/NamedRoute.vue new file mode 100644 index 000000000..e68fd580b --- /dev/null +++ b/shells/dev/target/router/NamedRoute.vue @@ -0,0 +1,10 @@ + + + \ No newline at end of file diff --git a/shells/dev/target/router/RouteOne.vue b/shells/dev/target/router/RouteOne.vue new file mode 100644 index 000000000..b131fd159 --- /dev/null +++ b/shells/dev/target/router/RouteOne.vue @@ -0,0 +1,11 @@ + + + diff --git a/shells/dev/target/router/RouteTwo.vue b/shells/dev/target/router/RouteTwo.vue new file mode 100644 index 000000000..ffa59b0ad --- /dev/null +++ b/shells/dev/target/router/RouteTwo.vue @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/shells/dev/target/router/RouteWithAlias.vue b/shells/dev/target/router/RouteWithAlias.vue new file mode 100644 index 000000000..0a67a2ec8 --- /dev/null +++ b/shells/dev/target/router/RouteWithAlias.vue @@ -0,0 +1,10 @@ + + + \ No newline at end of file diff --git a/shells/dev/target/router/RouteWithBeforeEnter.vue b/shells/dev/target/router/RouteWithBeforeEnter.vue new file mode 100644 index 000000000..479291b0a --- /dev/null +++ b/shells/dev/target/router/RouteWithBeforeEnter.vue @@ -0,0 +1,10 @@ + + + \ No newline at end of file diff --git a/shells/dev/target/router/RouteWithParams.vue b/shells/dev/target/router/RouteWithParams.vue new file mode 100644 index 000000000..0b8db1849 --- /dev/null +++ b/shells/dev/target/router/RouteWithParams.vue @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/shells/dev/target/router/RouteWithQuery.vue b/shells/dev/target/router/RouteWithQuery.vue new file mode 100644 index 000000000..759da6f26 --- /dev/null +++ b/shells/dev/target/router/RouteWithQuery.vue @@ -0,0 +1,10 @@ + + + \ No newline at end of file diff --git a/src/backend/index.js b/src/backend/index.js index 9951dfa52..d0f60ec10 100644 --- a/src/backend/index.js +++ b/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) } /** diff --git a/src/backend/router.js b/src/backend/router.js new file mode 100644 index 000000000..ae494f9eb --- /dev/null +++ b/src/backend/router.js @@ -0,0 +1,22 @@ +import { stringify } from '../util' + +export function initRouterBackend (Vue, bridge, rootInstances) { + console.log('#####################################################') + console.log('In initRouterBackend with rootInstances', rootInstances) + console.log('rootInstances.length', rootInstances.length) + + for (let i=0; i { + bridge.send('router:changed', stringify({ + to, + from + })) + }) + bridge.send('router:init', stringify({ + currentRoute: rootInstances[i]._route, + routes: rootInstances[i]._router.options.routes + })) + } + } +} \ No newline at end of file diff --git a/src/devtools/App.vue b/src/devtools/App.vue index 285bc401a..cb36da1bd 100644 --- a/src/devtools/App.vue +++ b/src/devtools/App.vue @@ -31,6 +31,13 @@ Events {{ newEventCount }} + + directions + Router + @@ -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, diff --git a/src/devtools/index.js b/src/devtools/index.js index 9fe4ed1db..f34a2cc05 100644 --- a/src/devtools/index.js +++ b/src/devtools/index.js @@ -83,6 +83,14 @@ function initApp (shell) { } }) + bridge.on('router:init', payload => { + store.commit('router/INIT', parse(payload)) + }) + + bridge.on('router:changed', payload => { + store.commit('router/CHANGED', parse(payload)) + }) + app = new Vue({ store, render (h) { diff --git a/src/devtools/store/index.js b/src/devtools/store/index.js index c14ebb1bd..2d6c66eaa 100644 --- a/src/devtools/store/index.js +++ b/src/devtools/store/index.js @@ -3,6 +3,7 @@ import Vuex from 'vuex' import components from 'views/components/module' import vuex from 'views/vuex/module' import events from 'views/events/module' +import router from 'views/router/module' Vue.use(Vuex) @@ -25,7 +26,8 @@ const store = new Vuex.Store({ modules: { components, vuex, - events + events, + router } }) @@ -35,14 +37,16 @@ if (module.hot) { module.hot.accept([ 'views/components/module', 'views/vuex/module', - 'views/events/module' + 'views/events/module', + 'views/router/module' ], () => { try { store.hotUpdate({ modules: { components: require('views/components/module').default, vuex: require('views/vuex/module').default, - events: require('views/events/module').default + events: require('views/events/module').default, + router: require('views/router/module').default } }) } catch (e) { diff --git a/src/devtools/views/router/RouteMeta.vue b/src/devtools/views/router/RouteMeta.vue new file mode 100644 index 000000000..5bf60e31b --- /dev/null +++ b/src/devtools/views/router/RouteMeta.vue @@ -0,0 +1,42 @@ + + + + + diff --git a/src/devtools/views/router/RouterTab.vue b/src/devtools/views/router/RouterTab.vue new file mode 100644 index 000000000..a60551739 --- /dev/null +++ b/src/devtools/views/router/RouterTab.vue @@ -0,0 +1,31 @@ + + + diff --git a/src/devtools/views/router/RoutesHistory.vue b/src/devtools/views/router/RoutesHistory.vue new file mode 100644 index 000000000..92bdb855f --- /dev/null +++ b/src/devtools/views/router/RoutesHistory.vue @@ -0,0 +1,96 @@ + + + + + diff --git a/src/devtools/views/router/module.js b/src/devtools/views/router/module.js new file mode 100644 index 000000000..f3f4b6732 --- /dev/null +++ b/src/devtools/views/router/module.js @@ -0,0 +1,32 @@ +const state = { + hasRouter: false, + instances: [], + routeChanges: [], + inspectedIndex: -1, +} + +const mutations = { + 'INIT' (state, payload) { + state.hasRouter = true + state.instances.push(payload) + }, + 'CHANGED' (state, payload) { + state.routeChanges.push(payload) + }, + 'INSPECT' (state, index) { + state.inspectedIndex = index + } +} + +const getters = { + activeRouteChange: state => { + return state.routeChanges[state.inspectedIndex] + } +} + +export default { + namespaced: true, + state, + mutations, + getters +} From 55ebe901b7e89cb88441ffc74d4c8d5b57844f01 Mon Sep 17 00:00:00 2001 From: Markus Sorg Date: Thu, 2 Mar 2017 17:21:55 +0100 Subject: [PATCH 02/20] Work on route filtering --- shells/dev/target/index.js | 8 +- shells/dev/target/router/IndexRoute.vue | 2 + shells/dev/target/router/RouteWithProps.vue | 20 +++++ src/backend/router.js | 36 +++++---- src/devtools/index.js | 5 ++ src/devtools/views/events/EventsHistory.vue | 7 +- src/devtools/views/router/RouteMeta.vue | 82 ++++++++++++++++----- src/devtools/views/router/RoutesHistory.vue | 71 ++++++++++++++---- src/devtools/views/router/module.js | 16 ++++ 9 files changed, 188 insertions(+), 59 deletions(-) create mode 100644 shells/dev/target/router/RouteWithProps.vue diff --git a/shells/dev/target/index.js b/shells/dev/target/index.js index 3dae88b13..5cd378857 100644 --- a/shells/dev/target/index.js +++ b/shells/dev/target/index.js @@ -12,6 +12,7 @@ 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' @@ -32,7 +33,12 @@ const routes = [ }}, { 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-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({ diff --git a/shells/dev/target/router/IndexRoute.vue b/shells/dev/target/router/IndexRoute.vue index 65fd7125d..80c09ba68 100644 --- a/shells/dev/target/router/IndexRoute.vue +++ b/shells/dev/target/router/IndexRoute.vue @@ -9,6 +9,8 @@

Go to route with redirect

Go to route with alias

Go to route with dyn. component

+

Go to route with props

+

Go to route with props (default)

diff --git a/shells/dev/target/router/RouteWithProps.vue b/shells/dev/target/router/RouteWithProps.vue new file mode 100644 index 000000000..34e7af10a --- /dev/null +++ b/shells/dev/target/router/RouteWithProps.vue @@ -0,0 +1,20 @@ + + + \ No newline at end of file diff --git a/src/backend/router.js b/src/backend/router.js index ae494f9eb..8ae072941 100644 --- a/src/backend/router.js +++ b/src/backend/router.js @@ -1,22 +1,20 @@ import { stringify } from '../util' export function initRouterBackend (Vue, bridge, rootInstances) { - console.log('#####################################################') - console.log('In initRouterBackend with rootInstances', rootInstances) - console.log('rootInstances.length', rootInstances.length) - - for (let i=0; i { - bridge.send('router:changed', stringify({ - to, - from - })) - }) - bridge.send('router:init', stringify({ - currentRoute: rootInstances[i]._route, - routes: rootInstances[i]._router.options.routes - })) - } - } -} \ No newline at end of file + console.log('rootInstances', 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 + })) + } + } +} diff --git a/src/devtools/index.js b/src/devtools/index.js index f34a2cc05..04e10a711 100644 --- a/src/devtools/index.js +++ b/src/devtools/index.js @@ -91,6 +91,11 @@ function initApp (shell) { store.commit('router/CHANGED', parse(payload)) }) + // register filters + Vue.filter('formatTime', function (timestamp) { + return (new Date(timestamp)).toString().match(/\d\d:\d\d:\d\d/)[0] + }) + app = new Vue({ store, render (h) { diff --git a/src/devtools/views/events/EventsHistory.vue b/src/devtools/views/events/EventsHistory.vue index 039968e40..4da4a9a62 100644 --- a/src/devtools/views/events/EventsHistory.vue +++ b/src/devtools/views/events/EventsHistory.vue @@ -70,12 +70,7 @@ export default { inspect: 'INSPECT', reset: 'RESET', toggleRecording: 'TOGGLE' - }), - filters: { - formatTime (timestamp) { - return (new Date(timestamp)).toString().match(/\d\d:\d\d:\d\d/)[0] - } - } + }) } diff --git a/src/devtools/views/router/RouteMeta.vue b/src/devtools/views/router/RouteMeta.vue index 5bf60e31b..199d69ec4 100644 --- a/src/devtools/views/router/RouteMeta.vue +++ b/src/devtools/views/router/RouteMeta.vue @@ -1,14 +1,12 @@ @@ -16,18 +14,68 @@ diff --git a/src/devtools/views/router/RoutesHistory.vue b/src/devtools/views/router/RoutesHistory.vue index 92bdb855f..38be5f080 100644 --- a/src/devtools/views/router/RoutesHistory.vue +++ b/src/devtools/views/router/RoutesHistory.vue @@ -5,18 +5,28 @@ search
+ + do_not_disturb + Clear +
-
- No route chnages found +
+ No route transitions found
-
From: {{ routeChange.from.fullPath }} -
To: {{ routeChange.to.fullPath }} + v-for="route in filteredRoutes" + :class="{ active: inspectedIndex === filteredRoutes.indexOf(route) }" + @click="inspect(filteredRoutes.indexOf(route))"> +
+ From: {{ route.from.path }}

+ To: {{ route.to.path }} +
+
+ redirect + {{ route.timestamp | formatTime }} +
@@ -25,26 +35,33 @@ @@ -52,13 +69,15 @@ export default { diff --git a/src/devtools/views/router/module.js b/src/devtools/views/router/module.js index f3f4b6732..0e9c085d1 100644 --- a/src/devtools/views/router/module.js +++ b/src/devtools/views/router/module.js @@ -3,6 +3,7 @@ const state = { instances: [], routeChanges: [], inspectedIndex: -1, + filter: '' } const mutations = { @@ -10,17 +11,32 @@ const mutations = { state.hasRouter = true state.instances.push(payload) }, + 'RESET' (state) { + state.routeChanges = [] + state.inspectedIndex = -1 + }, 'CHANGED' (state, payload) { state.routeChanges.push(payload) + if (!state.filter) { + state.inspectedIndex = state.routeChanges.length - 1 + } }, 'INSPECT' (state, index) { state.inspectedIndex = index + }, + 'UPDATE_FILTER' (state, filter) { + state.filter = filter } } const getters = { activeRouteChange: state => { return state.routeChanges[state.inspectedIndex] + }, + filteredRoutes: state => { + return state.routeChanges.filter(routeChange => { + return routeChange.from.fullPath.indexOf(state.filter) > -1 || routeChange.to.fullPath.indexOf(state.filter) > -1 + }) } } From 2c66bca03f7b5e1511c14e6a87c230bd79c39d1f Mon Sep 17 00:00:00 2001 From: Markus Sorg Date: Fri, 3 Mar 2017 09:56:50 +0100 Subject: [PATCH 03/20] Add route list column --- src/devtools/components/TriplePane.vue | 75 ++++++++++++++++++++++++ src/devtools/views/router/RouterTab.vue | 13 ++-- src/devtools/views/router/RoutesList.vue | 65 ++++++++++++++++++++ src/devtools/views/router/module.js | 12 ++++ 4 files changed, 161 insertions(+), 4 deletions(-) create mode 100644 src/devtools/components/TriplePane.vue create mode 100644 src/devtools/views/router/RoutesList.vue diff --git a/src/devtools/components/TriplePane.vue b/src/devtools/components/TriplePane.vue new file mode 100644 index 000000000..13f4dba47 --- /dev/null +++ b/src/devtools/components/TriplePane.vue @@ -0,0 +1,75 @@ + + + + + diff --git a/src/devtools/views/router/RouterTab.vue b/src/devtools/views/router/RouterTab.vue index a60551739..7ee13e979 100644 --- a/src/devtools/views/router/RouterTab.vue +++ b/src/devtools/views/router/RouterTab.vue @@ -1,9 +1,10 @@