feat(devtools): support multiple router instances

posva · posva · commit 2e5d0d4d726e · 2020-11-04T22:19:57.000+01:00
diff --git a/rollup.config.js b/rollup.config.js
@@ -64,7 +64,7 @@ function createConfig(format, output, plugins = []) {
   output.sourcemap = !!process.env.SOURCE_MAP
   output.banner = banner
   output.externalLiveBindings = false
-  output.globals = { vue: 'Vue' }
+  output.globals = { vue: 'Vue', '@vue/devtools-api': 'VueDevtoolsApi' }
 
   const isProductionBuild = /\.prod\.js$/.test(output.file)
   const isGlobalBuild = format === 'global'
@@ -94,7 +94,7 @@ function createConfig(format, output, plugins = []) {
   // during a single build.
   hasTSChecked = true
 
-  const external = ['vue']
+  const external = ['vue', '@vue/devtools-api']
 
   const nodePlugins = [resolve(), commonjs()]
 
diff --git a/src/devtools.ts b/src/devtools.ts
@@ -44,12 +44,17 @@ function formatDisplay(display: string) {
   }
 }
 
+// to support multiple router instances
+let routerId = 0
+
 export function addDevtools(app: App, router: Router, matcher: RouterMatcher) {
   // Take over router.beforeEach and afterEach
 
+  // increment to support multiple router instances
+  const id = routerId++
   setupDevtoolsPlugin(
     {
-      id: 'Router',
+      id: 'Router' + id ? ' ' + id : '',
       label: 'Router devtools',
       app,
     },
@@ -73,11 +78,11 @@ export function addDevtools(app: App, router: Router, matcher: RouterMatcher) {
         api.notifyComponentUpdate()
       })
 
-      const navigationsLayerId = 'router:navigations'
+      const navigationsLayerId = 'router:navigations:' + id
 
       api.addTimelineLayer({
         id: navigationsLayerId,
-        label: 'Router Navigations',
+        label: `Router${id ? ' ' + id : ''} Navigations`,
         color: 0x40a8c4,
       })
 
@@ -159,11 +164,11 @@ export function addDevtools(app: App, router: Router, matcher: RouterMatcher) {
         })
       })
 
-      const routerInspectorId = 'router-inspector'
+      const routerInspectorId = 'router-inspector:' + id
 
       api.addInspector({
         id: routerInspectorId,
-        label: 'Routes',
+        label: 'Routes' + id ? ' ' + id : '',
         icon: 'book',
         treeFilterPlaceholder: 'Search routes',
       })
