fix/router: handle trailing slash (#637)

and history api fallback, especially for SSG.

examples/07_router/src/main.tsx

@@ -2,13 +2,9 @@ import { StrictMode } from 'react';
 import { createRoot, hydrateRoot } from 'react-dom/client';
 import { Router } from 'waku/router/client';
 
-import { ErrorBoundary } from './components/ErrorBoundary';
-
 const rootElement = (
   <StrictMode>
-    <ErrorBoundary fallback={(error) => <h1>{String(error)}</h1>}>
-      <Router />
-    </ErrorBoundary>
+    <Router />
   </StrictMode>
 );
 

examples/10_fs-router/src/main.tsx

@@ -2,13 +2,9 @@ import { StrictMode } from 'react';
 import { createRoot, hydrateRoot } from 'react-dom/client';
 import { Router } from 'waku/router/client';
 
-import { ErrorBoundary } from './components/ErrorBoundary';
-
 const rootElement = (
   <StrictMode>
-    <ErrorBoundary fallback={(error) => <h1>{String(error)}</h1>}>
-      <Router />
-    </ErrorBoundary>
+    <Router />
   </StrictMode>
 );
 

examples/14_react-tweet/src/main.tsx

@@ -2,13 +2,9 @@ import { StrictMode } from 'react';
 import { createRoot, hydrateRoot } from 'react-dom/client';
 import { Router } from 'waku/router/client';
 
-import { ErrorBoundary } from './components/error-boundary';
-
 const rootElement = (
   <StrictMode>
-    <ErrorBoundary fallback={(error) => <h1>{String(error)}</h1>}>
-      <Router />
-    </ErrorBoundary>
+    <Router />
   </StrictMode>
 );
 

packages/waku/src/client.ts

@@ -200,7 +200,17 @@ export const Slot = ({
   if (!elementsPromise) {
     throw new Error('Missing Root component');
   }
-  const elements = use(elementsPromise);
+  let elements: Awaited<Elements>;
+  try {
+    elements = use(elementsPromise);
+  } catch (e) {
+    if (e instanceof Error) {
+      // HACK we assume any error as Not Found,
+      // probably caused by history api fallback
+      (e as any).statusCode = 404;
+    }
+    throw e;
+  }
   if (!(id in elements)) {
     if (fallback) {
       return fallback;

packages/waku/src/lib/plugins/vite-plugin-rsc-managed.ts

@@ -8,27 +8,9 @@ import { Component, StrictMode } from 'react';
 import { createRoot, hydrateRoot } from 'react-dom/client';
 import { Router } from 'waku/router/client';
 
-class ErrorBoundary extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
-  static getDerivedStateFromError(error) {
-    return { error };
-  }
-  render() {
-    if ('error' in this.state) {
-      return this.props.fallback(this.state.error);
-    }
-    return this.props.children;
-  }
-}
-
 const rootElement = (
   <StrictMode>
-    <ErrorBoundary fallback={(error) => <h1>{String(error)}</h1>}>
-      <Router />
-    </ErrorBoundary>
+    <Router />
   </StrictMode>
 );
 

packages/waku/src/router/client.ts

@@ -1,6 +1,7 @@
 'use client';
 
 import {
+  Component,
   createContext,
   createElement,
   useCallback,
@@ -36,6 +37,15 @@ declare global {
   }
 }
 
+const normalizeRoutePath = (path: string) => {
+  for (const suffix of ['/', '/index.html']) {
+    if (path.endsWith(suffix)) {
+      return path.slice(0, -suffix.length) || '/';
+    }
+  }
+  return path;
+};
+
 const parseRoute = (url: URL): RouteProps => {
   if ((globalThis as any).__WAKU_ROUTER_404__) {
     return { path: '/404', searchParams: new URLSearchParams() };
@@ -44,7 +54,7 @@ const parseRoute = (url: URL): RouteProps => {
   if (searchParams.has(PARAM_KEY_SKIP)) {
     console.warn(`The search param "${PARAM_KEY_SKIP}" is reserved`);
   }
-  return { path: pathname, searchParams };
+  return { path: normalizeRoutePath(pathname), searchParams };
 };
 
 type ChangeRoute = (
@@ -425,9 +435,13 @@ export function Router({ routerData = DEFAULT_ROUTER_DATA }) {
       .catch(() => {});
   };
   return createElement(
-    Root as FunctionComponent<Omit<ComponentProps<typeof Root>, 'children'>>,
-    { initialInput, initialSearchParamsString, unstable_onFetchData },
-    createElement(InnerRouter, { routerData }),
+    ErrorBoundary,
+    null,
+    createElement(
+      Root as FunctionComponent<Omit<ComponentProps<typeof Root>, 'children'>>,
+      { initialInput, initialSearchParamsString, unstable_onFetchData },
+      createElement(InnerRouter, { routerData }),
+    ),
   );
 }
 
@@ -462,3 +476,30 @@ export function ServerRouter({
     ),
   );
 }
+
+class ErrorBoundary extends Component<
+  { children: ReactNode },
+  { error?: unknown }
+> {
+  constructor(props: { children: ReactNode }) {
+    super(props);
+    this.state = {};
+  }
+
+  static getDerivedStateFromError(error: unknown) {
+    return { error };
+  }
+
+  render() {
+    if ('error' in this.state) {
+      if (
+        this.state.error instanceof Error &&
+        (this.state.error as any).statusCode === 404
+      ) {
+        return createElement('h1', null, 'Not Found');
+      }
+      return createElement('h1', null, String(this.state.error));
+    }
+    return this.props.children;
+  }
+}