feat(devtools): better search

diff --git a/e2e/webpack.config.js b/e2e/webpack.config.js
index ebded67fb96261ff8bf54c1a8c89239f5704a556..a3857dc34b9b209a22d27616394b56e1b5e81fa9 100644 (file)
--- 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
index 85d589435c46e485b23f08fe3ed677dca7eb0575..a6d5b8b91e08e91fe3b2ad759a96d48cd649a6c1 100644 (file)
--- 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
index f3f77b6b725b77832bd643305026bc3c6ee0c5ac..89d801dc8d62d6cccfd8f6077a309ab953dc8d60 100644 (file)
--- 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