perf: simple matchRoutes alternative #1863 (#2673)

Author: SoonIter

packages/runtime/src/route.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest';
-import { pathnameToRouteService } from './route';
+import { isActive, matchPath, pathnameToRouteService } from './route';
 
 vi.mock('virtual-routes', () => {
   const element = vi.fn();
@@ -32,6 +32,47 @@ vi.mock('virtual-routes', () => {
   return { routes };
 });
 
+describe('matchPath', () => {
+  it('should match exact paths', () => {
+    expect(matchPath('/api/config', '/api/config')).toEqual({
+      path: '/api/config',
+    });
+    expect(matchPath('/api/config/', '/api/config/')).toEqual({
+      path: '/api/config/',
+    });
+  });
+
+  it('should normalize trailing slashes', () => {
+    expect(matchPath('/api/config', '/api/config/')).toEqual({
+      path: '/api/config',
+    });
+    expect(matchPath('/api/config/', '/api/config')).toEqual({
+      path: '/api/config/',
+    });
+    expect(matchPath('/api/config/', '/api/config/index.html')).toEqual({
+      path: '/api/config/',
+    });
+  });
+
+  it('should return null for non-matching paths', () => {
+    expect(matchPath('/api/config', '/api/other')).toBeNull();
+    expect(matchPath('/api', '/api/config')).toBeNull();
+    expect(matchPath('/api', '/api/index.md')).toBeNull();
+  });
+});
+
+describe('isActive', () => {
+  it('should return true for matching normalized paths', () => {
+    expect(isActive('/api/config', '/api/config')).toBe(true);
+    expect(isActive('/api/config', '/api/config.html')).toBe(true);
+    expect(isActive('/api/config', '/api/config/')).toBe(true);
+  });
+
+  it('should return false for non-matching paths', () => {
+    expect(isActive('/api/config', '/api/other')).toBe(false);
+  });
+});
+
 describe('pathnameToRouteService', () => {
   it('0. /api/config', () => {
     const pathname = '/api/config';
@@ -67,4 +108,13 @@ describe('pathnameToRouteService', () => {
       `"/api/config/"`,
     );
   });
+
+  it('5. /', () => {
+    expect(pathnameToRouteService('/index.html')?.path).toMatchInlineSnapshot(
+      `"/"`,
+    );
+    expect(pathnameToRouteService('/index.md')?.path).toMatchInlineSnapshot(
+      `undefined`,
+    );
+  });
 });

packages/runtime/src/route.ts

@@ -1,13 +1,87 @@
 import type { Route } from '@rspress/shared';
-import { matchPath, matchRoutes } from 'react-router-dom';
 import { routes } from 'virtual-routes';
 
+/**
+ * Normalize route path by:
+ * 1. Decoding URI components
+ * 2. Removing .html suffix
+ * 3. Converting /index to /
+ *
+ * Examples:
+ * - /api/config → /api/config
+ * - /api/config.html → /api/config
+ * - /api/config/index → /api/config/
+ * - /api/config/index.html → /api/config/
+ * - /index.html → /
+ */
 function normalizeRoutePath(routePath: string) {
   return decodeURIComponent(routePath)
     .replace(/\.html$/, '')
     .replace(/\/index$/, '/');
 }
 
+/**
+ * Simple implementation of matchPath to check if a pattern matches a pathname
+ * Better performance alternative of `import { matchPath } from 'react-router-dom'`
+ * @param pattern - The route pattern to match against
+ * @param pathname - The pathname to check
+ * @returns Match object if matched, null otherwise
+ *
+ * @example
+ * matchPath('/api/config', '/api/config') // { path: '/api/config' }
+ * matchPath('/api/config/', '/api/config') // { path: '/api/config/' }
+ * matchPath('/api/config', '/api/other') // null
+ */
+export function matchPath(
+  pattern: string,
+  pathname: string,
+): { path: string } | null {
+  // Normalize both pattern and pathname for comparison
+  // Always add trailing slash for consistent comparison
+  const _pathname = normalizeRoutePath(pathname);
+  const normalizedPattern = pattern.endsWith('/') ? pattern : `${pattern}/`;
+  const normalizedPathname = _pathname.endsWith('/')
+    ? _pathname
+    : `${_pathname}/`;
+
+  // Exact match
+  if (normalizedPattern === normalizedPathname) {
+    return { path: pattern };
+  }
+
+  return null;
+}
+
+// Sort routes by path length (longest first) to match most specific routes first
+const sortedRoutes = [...routes].sort((a, b) => {
+  const pathA = a.path || '';
+  const pathB = b.path || '';
+  return pathB.length - pathA.length;
+});
+
+/**
+ * Simple implementation of matchRoutes to find matching routes
+ * Better performance alternative of `import { matchRoutes } from 'react-router-dom'`
+ * @param _routes - Array of routes (unused, uses pre-sorted sortedRoutes)
+ * @param pathname - The pathname to match
+ * @returns Array of matched routes with route object, or null if no match
+ */
+function matchRoutes(
+  _routes: Route[],
+  pathname: string,
+): Array<{ route: Route }> | null {
+  for (const route of sortedRoutes) {
+    const routePath = route.path || '';
+    const match = matchPath(routePath, pathname);
+
+    if (match) {
+      return [{ route }];
+    }
+  }
+
+  return null;
+}
+
 const cache = new Map<string, Route>();
 /**
  * this is a bridge of two core features Sidebar and RouteService