feat(devtools): better search

posva · posva · commit 5d68a29386f3 · 2020-11-04T22:19:57.000+01:00
diff --git a/e2e/webpack.config.js b/e2e/webpack.config.js
@@ -16,6 +16,7 @@ fs.readdirSync(__dirname).forEach(dir => {
 
 const globalCss = resolve(__dirname, 'global.css')
 
+/** @type {import('webpack').ConfigurationFactory} */
 const config = (env = {}) => ({
   // Expose __dirname to allow automatically setting basename.
   context: __dirname,
@@ -74,7 +75,7 @@ const config = (env = {}) => ({
   },
   plugins: [
     new webpack.DefinePlugin({
-      __DEV__: JSON.stringify(process.env.NODE_ENV !== 'production'),
+      __DEV__: JSON.stringify(!env.prod),
       __CI__: JSON.stringify(process.env.CI || false),
       __BROWSER__: 'true',
       'process.env': {
diff --git a/playground/tsconfig.json b/playground/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "include": ["./**/*.ts"],
+  "include": ["*.ts", "api", "../src/global.d.ts", "shim.d.ts"],
   "compilerOptions": {
     "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
     "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
diff --git a/src/devtools.ts b/src/devtools.ts
@@ -7,6 +7,7 @@ import {
   TimelineEvent,
 } from '@vue/devtools-api'
 import { watch } from 'vue'
+import { decode } from './encoding'
 import { RouterMatcher } from './matcher'
 import { RouteRecordMatcher } from './matcher/pathMatcher'
 import { PathParser } from './matcher/pathParserRanker'
@@ -107,7 +108,7 @@ export function addDevtools(app: App, router: Router, matcher: RouterMatcher) {
 
       router.beforeEach((to, from) => {
         const data: TimelineEvent<any, any>['data'] = {
-          guard: formatDisplay('beforEach'),
+          guard: formatDisplay('beforeEach'),
           from: formatRouteLocation(
             from,
             'Current Location during this navigation'
@@ -175,13 +176,15 @@ export function addDevtools(app: App, router: Router, matcher: RouterMatcher) {
 
       api.on.getInspectorTree(payload => {
         if (payload.app === app && payload.inspectorId === routerInspectorId) {
-          const routes = matcher.getRoutes().filter(
-            route =>
-              !route.parent &&
-              (!payload.filter ||
+          let routes = matcher.getRoutes()
+          if (payload.filter) {
+            routes = routes.filter(
+              route =>
+                !route.parent &&
                 // save isActive state
-                isRouteMatching(route, payload.filter))
-          )
+                isRouteMatching(route, payload.filter.toLowerCase())
+            )
+          }
           // reset match state if no filter is provided
           if (!payload.filter) {
             routes.forEach(route => {
@@ -355,8 +358,16 @@ function isRouteMatching(route: RouteRecordMatcher, filter: string): boolean {
     return false
   }
 
+  const path = route.record.path.toLowerCase()
+  const decodedPath = decode(path)
+
   // also allow partial matching on the path
-  if (route.record.path.startsWith(filter)) return true
+  if (
+    !filter.startsWith('/') &&
+    (decodedPath.includes(filter) || path.includes(filter))
+  )
+    return true
+  if (decodedPath.startsWith(filter) || path.startsWith(filter)) return true
   if (route.record.name && String(route.record.name).includes(filter))
     return true
 

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "include": ["./*/.ts"],`
	`2`	`+ "include": ["*.ts", "api", "../src/global.d.ts", "shim.d.ts"],`
`3`	`3`	`"compilerOptions": {`
`4`	`4`	`"target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,`
`5`	`5`	`"module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,`