WIP try out newer path-to-regexp

Author: airhorns

packages/fastify-renderer/package.json

@@ -64,7 +64,7 @@
     "@vitejs/plugin-react-refresh": "^1.3.6",
     "fastify-plugin": "^4.5.1",
     "http-errors": "^1.8.1",
-    "path-to-regexp": "^6.2.1",
+    "path-to-regexp": "^8.3.0",
     "sanitize-filename": "^1.6.3",
     "stream-template": "^0.0.10",
     "vite": "^2.9.15",

packages/fastify-renderer/src/client/react/matcher.ts

@@ -1,34 +1,31 @@
-import { Key, pathToRegexp } from 'path-to-regexp'
+import { match, MatchFunction } from 'path-to-regexp'
 import { MatcherFn } from 'wouter'
 
+type ParamData = Record<string, string | string[]>
+
 /*
- * This function specifies how strings like /app/:users/:items* are transformed into regular expressions to pass into path-to-regexp.
+ * This function creates a matcher function for a given path pattern.
  *
  * @param {string} path — a path like "/:foo/:bar"
- * @return {{ keys: [], regexp: RegExp }}
+ * @return {MatchFunction<ParamData>} — a function that matches paths and extracts params
  */
-const convertPathToRegexp = (path: string) => {
-  const keys: Key[] = []
-  const regexp = pathToRegexp(path, keys)
-  return { keys, regexp }
+const createMatcher = (path: string): MatchFunction<ParamData> => {
+  return match(path, { decode: decodeURIComponent })
 }
 
-const cache: Record<string, ReturnType<typeof convertPathToRegexp>> = {}
+const cache: Record<string, MatchFunction<ParamData>> = {}
 
-// obtains a cached regexp version of the pattern
-const getRegexp = (pattern: string) => cache[pattern] || (cache[pattern] = convertPathToRegexp(pattern))
+// obtains a cached matcher function for the pattern
+const getMatcher = (pattern: string) => cache[pattern] || (cache[pattern] = createMatcher(pattern))
 
 export const matcher: MatcherFn = (pattern, path) => {
-  const { regexp, keys } = getRegexp(pattern || '')
-  const out = regexp.exec(path.split('#')[0].split('?')[0])
-
-  if (!out) return [false, null]
+  const matchFn = getMatcher(String(pattern || ''))
+  const pathStr = String(path)
+  const cleanPath = pathStr.split('#')[0].split('?')[0]
+  const result = matchFn(cleanPath)
 
-  // formats an object with matched params
-  const params = keys.reduce((params, key, i) => {
-    params[key.name] = out[i + 1]
-    return params
-  }, {})
+  if (!result) return [false, null]
 
-  return [true, params]
+  // return matched params
+  return [true, result.params as Record<string, string>]
 }

packages/test-apps/simple-react/package.json

@@ -14,7 +14,7 @@
     "react": "*",
     "react-dom": "*",
     "wouter": "^2.7.5",
-    "path-to-regexp": "^6.2.1"
+    "path-to-regexp": "^8.3.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.39.0",