wip bad internet../../..

diff --git a/src/devtools.ts b/src/devtools.ts
new file mode 100644 (file)
index 0000000..7f9629a
--- /dev/null
+++ b/src/devtools.ts
@@ -0,0 +1,63 @@
+import { App, setupDevtoolsPlugin } from '@vue/devtools-api'
+import { Router } from './router'
+
+export function addDevtools(app: App, router: Router) {
+  setupDevtoolsPlugin(
+    {
+      id: 'Router',
+      label: 'Router devtools',
+      app,
+    },
+    api => {
+      api.on.inspectComponent((payload, ctx) => {
+        if (payload.instanceData) {
+          const stateType = 'extra properties (test)'
+          payload.instanceData.state.push({
+            type: stateType,
+            key: 'foo',
+            value: 'bar',
+            editable: false,
+          })
+
+          payload.instanceData.state.push({
+            type: stateType,
+            key: 'time',
+            editable: false,
+            value: {
+              _custom: {
+                type: null,
+                readOnly: true,
+                display: `${router.currentRoute.value.fullPath}s`,
+                tooltip: 'Current Route',
+                value: router.currentRoute.value,
+              },
+            },
+          })
+        }
+      })
+
+      api.addTimelineLayer({
+        id: 'router:navigations',
+        label: 'Router Navigations',
+        color: 0x92a2bf,
+      })
+
+      router.afterEach((from, to) => {
+        // @ts-ignore
+        api.notifyComponentUpdate()
+        api.addTimelineEvent({
+          layerId: 'router:navigations',
+          event: {
+            time: Date.now(),
+            data: {
+              info: 'afterEach',
+              from,
+              to,
+            },
+            meta: { foo: 'meta?' },
+          },
+        })
+      })
+    }
+  )
+}

diff --git a/src/router.ts b/src/router.ts
index 786c4180a4a0ad1532f8f5c65c397064341c3f1c..9a73539d91eeac2ad69e44c73eb3dc0b00436388 100644 (file)
--- a/src/router.ts
+++ b/src/router.ts
@@ -57,6 +57,7 @@ import { warn } from './warning'
 import { RouterLink } from './RouterLink'
 import { RouterView } from './RouterView'
 import { routerKey, routeLocationKey } from './injectionSymbols'
+import { addDevtools } from './devtools'
 
 /**
  * Internal type to define an ErrorHandler
@@ -1103,6 +1104,10 @@ export function createRouter(options: RouterOptions): Router {
         }
         unmountApp.call(this, arguments)
       }
+
+      if (__DEV__) {
+        addDevtools(app, router)
+      }
     },
   }