Bump to latest wouter

Author: airhorns

package.json

@@ -57,5 +57,6 @@
       "@types/react": "17.0.4",
       "@types/react-dom": "17.0.4"
     }
-  }
+  },
+  "packageManager": "[email protected]+sha512.0a203ffaed5a3f63242cd064c8fb5892366c103e328079318f78062f24ea8c9d50bc6a47aa3567cabefd824d170e78fa2745ed1f16b132e16436146b7688f19b"
 }

packages/fastify-renderer/package.json

@@ -70,11 +70,11 @@
     "@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.2.0",
     "sanitize-filename": "^1.6.3",
     "stream-template": "^0.0.10",
     "vite": "^5.3.1",
-    "wouter": "^2.11.0"
+    "wouter": "^3.3.2"
   },
   "peerDependencies": {
     "fastify": "^4.24.2",

packages/fastify-renderer/src/client/react/Root.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react'
 import { Route, Router, Switch, useLocation, useRouter } from 'wouter'
 import { usePromise } from './fetcher'
-import { shouldScrollToHash, useNavigationDetails, useTransitionLocation } from './locationHook'
-import { matcher } from './matcher'
+import { shouldScrollToHash, useNavigationDetails, useTransitionLocation, TransitionProvider } from './locationHook'
+import { parser } from './parser'
 
 export interface LayoutProps {
   isNavigating: boolean
@@ -82,8 +82,10 @@ export function Root<BootProps extends Record<string, any>>(props: {
   ]
 
   return (
-    <Router base={props.basePath} hook={useTransitionLocation as any} matcher={matcher}>
-      <RouteTable routes={routes} Layout={props.Layout} bootProps={props.bootProps} />
-    </Router>
+    <TransitionProvider>
+      <Router base={props.basePath} hook={useTransitionLocation as any} parser={parser}>
+        <RouteTable routes={routes} Layout={props.Layout} bootProps={props.bootProps} />
+      </Router>
+    </TransitionProvider>
   )
 }

packages/fastify-renderer/src/client/react/locationHook.ts renamed to packages/fastify-renderer/src/client/react/locationHook.tsx

@@ -1,4 +1,5 @@
-import { unstable_useTransition as useTransition, useCallback, useEffect, useRef, useState } from 'react'
+import React, { useContext } from 'react'
+import { unstable_useTransition as useTransition, useCallback, useEffect, useRef, useState, createContext } from 'react'
 import { NavigationHistory, useLocation, useRouter } from 'wouter'
 
 /**
@@ -9,17 +10,37 @@ const eventPushState = 'pushState'
 const eventReplaceState = 'replaceState'
 export const events = [eventPopstate, eventPushState, eventReplaceState]
 
+const NavigationStateContext = createContext<{
+  isNavigating: boolean
+  startTransition: (callback: () => void) => void
+}>({
+  isNavigating: false,
+  startTransition: (callback: () => void) => callback(),
+})
+
+/**
+ * Internal context for the whole app capturing if we're currently navigating or not
+ */
+export const TransitionProvider = ({ children }: { children: React.ReactNode }) => {
+  const [startTransition, isPending] = useTransition()
+
+  return (
+    <NavigationStateContext.Provider value={{ isNavigating: isPending, startTransition }}>
+      {children}
+    </NavigationStateContext.Provider>
+  )
+}
+
 /**
  * This is a customized `useLocation` hook for `wouter`, adapted to use React's new Concurrent mode with `useTransition` for fastify-renderer.
  * @see https://github.com/molefrog/wouter#customizing-the-location-hook
  *
- * Extended to return an array of 4 elements:
- * @return [currentLocation, setLocation, isNavigating, navigationDestination]
+ * Extended to stick the `isNavigating` and `navigationDestination` properties on the router object
  */
 export const useTransitionLocation = ({ base = '' } = {}) => {
   const [path, update] = useState(() => currentPathname(base)) // @see https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
   const prevLocation = useRef(path + location.search + location.hash)
-  const [startTransition, isPending] = useTransition()
+  const { startTransition } = useContext(NavigationStateContext)
   const router = useRouter()
   useEffect(() => {
     if (!router.navigationHistory)
@@ -41,6 +62,8 @@ export const useTransitionLocation = ({ base = '' } = {}) => {
 
       if (prevLocation.current !== destination) {
         prevLocation.current = destination
+        router.navigationDestination = destination
+
         if (shouldScrollToHash(router.navigationHistory)) {
           startTransition(() => {
             update(destination)
@@ -69,14 +92,12 @@ export const useTransitionLocation = ({ base = '' } = {}) => {
   // the function reference should stay the same between re-renders, so that
   // it can be passed down as an element prop without any performance concerns.
   const navigate = useCallback(
-    (to, { replace = false } = {}) => {
-      if (to[0] === '~') {
-        window.location.href = to.slice(1)
+    (path, { replace = false } = {}) => {
+      if (path.startsWith('~') || !path.startsWith(base)) {
+        window.location.href = path.slice(1)
         return
       }
 
-      const path = base + to
-
       if (!router.navigationHistory) router.navigationHistory = {}
       if (router.navigationHistory?.current) {
         router.navigationHistory.previous = { ...router.navigationHistory.current }
@@ -97,7 +118,7 @@ export const useTransitionLocation = ({ base = '' } = {}) => {
     [base]
   )
 
-  return [path, navigate, isPending, prevLocation.current]
+  return [path, navigate]
 }
 
 // While History API does have `popstate` event, the only
@@ -122,11 +143,15 @@ if (typeof history !== 'undefined') {
 
 /**
  * React hook to access the navigation details of the current context. Useful for capturing the details of an ongoing navigation in the existing page while React is rendering the new page.
+ *
  * @returns [isNavigating: boolean, navigationDestination: string]
  */
 export const useNavigationDetails = (): [boolean, string] => {
-  const [_, __, isNavigating, navigationDestination] = useLocation() as unknown as [any, any, boolean, string] // we hack in more return values from our custom location hook to get at the transition current state and the destination
-  return [isNavigating, navigationDestination]
+  const router = useRouter()
+  const [location] = useLocation()
+  const { isNavigating } = useContext(NavigationStateContext)
+
+  return [isNavigating, router.navigationDestination || location]
 }
 
 const currentPathname = (base, path = location.pathname + location.search + location.hash) =>

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

@@ -0,0 +1,24 @@
+import { pathToRegexp } from 'path-to-regexp'
+import { Parser } from 'wouter'
+
+const cache: Record<string, ReturnType<Parser>> = {}
+
+export const parser: Parser = (path, _loose) => {
+  if (cache[path]) return cache[path]
+
+  try {
+    const { regexp, keys } = pathToRegexp(path, {
+      end: false, // we add our own, ok-with-a-query-string-or-hash-based end condition below
+    })
+    const pattern = new RegExp(`${regexp.source.replace('(?=\\/|$)', '')}(\\?.+)?(#.*)?$`)
+
+    cache[path] = {
+      pattern,
+      keys: keys.map((k) => k.name).filter((k) => !!k),
+    }
+
+    return cache[path]
+  } catch (error: any) {
+    throw new Error(`Error parsing route syntax for '${path}' into regexp: ${error.message}`)
+  }
+}

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

@@ -3,6 +3,7 @@ import 'wouter'
 declare module 'wouter' {
   export interface RouterObject {
     navigationHistory?: NavigationHistory
+    navigationDestination?: string
   }
 
   export interface NavigationHistory {

packages/fastify-renderer/src/client/react/wouter-extension.d.ts

@@ -101,6 +101,7 @@ export class ReactRenderer implements Renderer {
           {
             base: render.base,
             hook: staticLocationHook(destination),
+            ssrPath: destination,
           },
           React.createElement(
             Layout,
@@ -424,7 +425,7 @@ export class ReactRenderer implements Renderer {
     // b=2, a=1 if greater than 0
 
     // Convert find-my-way route paths to path-to-regexp syntax
-    const pathToRegexpify = (path: string) => path.replace('*', ':splat*')
+    const pathToRegexpify = (path: string) => path.replace('*', '*splat')
 
     return {
       name: 'fastify-renderer:react-route-table',

packages/fastify-renderer/src/node/renderers/react/ReactRenderer.tsx

@@ -10,6 +10,7 @@ export function slash(p: string): string {
 
 const logs: string[] = ((global as any).browserLogs = [])
 const onConsole = (msg: ConsoleMessage) => {
+  console.log('browser log', msg.text())
   logs.push(msg.text())
 }
 let pages: Page[] = []
@@ -60,7 +61,10 @@ afterEach(async () => {
 
 /** Create a new playwright page for testing against */
 export const newTestPage = async (): Promise<Page> => {
-  const browser = await chromium.launch({ headless: true })
+  const browser = await chromium.launch({
+    // headless: false, // Run in headful mode
+    // slowMo: 100, // Optional: Slow down Playwright oper
+  })
   const page: Page = await browser.newPage()
   page.on('console', onConsole)
   pages.push(page)

packages/test-apps/simple-react/helpers.ts

@@ -11,11 +11,11 @@
   "dependencies": {
     "fastify": "^4.23.2",
     "fastify-renderer": "workspace:*",
-    "path-to-regexp": "^6.2.1",
+    "path-to-regexp": "^8.2.0",
     "react": "*",
     "react-dom": "*",
     "stream-template": "^0.0.10",
-    "wouter": "^2.11.0"
+    "wouter": "^3.3.2"
   },
   "devDependencies": {
     "@playwright/test": "^1.39.0",