fix: server router

examples/07_router/src/components/Counter.tsx

@@ -2,15 +2,17 @@
 
 import { useState } from 'react';
 
-import { Link } from 'waku/router/client';
+import { Link, useLocation } from 'waku/router/client';
 
 export const Counter = () => {
+  const { path } = useLocation();
   const [count, setCount] = useState(0);
   return (
     <div style={{ border: '3px blue dashed', margin: '1em', padding: '1em' }}>
       <p>Count: {count}</p>
       <button onClick={() => setCount((c) => c + 1)}>Increment</button>
       <h3>This is a client component.</h3>
+      <span>path: {path}</span>
       <Link to="/">Go to Home</Link>
     </div>
   );

package.json

@@ -71,9 +71,6 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.11",
-    "react": "18.3.0-canary-14fd9630e-20240213",
-    "react-dom": "18.3.0-canary-14fd9630e-20240213",
-    "react-server-dom-webpack": "18.3.0-canary-14fd9630e-20240213",
     "terminate": "^2.6.1",
     "typescript": "^5.3.3",
     "wait-port": "^1.1.0",

packages/waku/src/router/client.ts

@@ -18,6 +18,7 @@ import type {
   AnchorHTMLAttributes,
   ReactElement,
   MouseEvent,
+  PropsWithChildren,
 } from 'react';
 
 import { prefetchRSC, Root, Slot, useRefetch } from '../client.js';
@@ -324,3 +325,36 @@ export function Router() {
     createElement(InnerRouter),
   );
 }
+
+function notAvailableInServer(name: string) {
+  return () => {
+    throw new Error(`${name} is not in the server`);
+  };
+}
+
+/**
+ * ServerRouter for SSR
+ * This is not a public API.
+ */
+export function ServerRouter({
+  children,
+  loc,
+}: PropsWithChildren<{
+  loc: ReturnType<typeof parseLocation>;
+}>) {
+  return createElement(
+    Fragment,
+    null,
+    createElement(
+      RouterContext.Provider,
+      {
+        value: {
+          loc,
+          changeLocation: notAvailableInServer('changeLocation'),
+          prefetchLocation: notAvailableInServer('prefetchLocation'),
+        },
+      },
+      children,
+    ),
+  );
+}

packages/waku/src/router/defineRouter.ts

@@ -1,4 +1,4 @@
-import { createElement, Fragment } from 'react';
+import { createElement } from 'react';
 import type { FunctionComponent, ReactNode } from 'react';
 
 import { defineEntries } from '../server.js';
@@ -14,6 +14,7 @@ import {
 import type { RouteProps, ShouldSkip } from './common.js';
 import { getPathMapping } from '../lib/utils/path.js';
 import type { PathSpec } from '../lib/utils/path.js';
+import { ServerRouter } from './client.js';
 
 const ShoudSkipComponent = ({ shouldSkip }: { shouldSkip: ShouldSkip }) =>
   createElement('meta', {
@@ -142,7 +143,7 @@ globalThis.__WAKU_ROUTER_PREFETCH__ = (path) => {
     return buildConfig;
   };
 
-  const getSsrConfig: GetSsrConfig = async (pathname) => {
+  const getSsrConfig: GetSsrConfig = async (pathname, { searchParams }) => {
     if (!(await existsPath(pathname))) {
       if (await has404Promise) {
         pathname = '/404';
@@ -153,8 +154,8 @@ globalThis.__WAKU_ROUTER_PREFETCH__ = (path) => {
     const componentIds = getComponentIds(pathname);
     const input = getInputString(pathname);
     const body = createElement(
-      Fragment,
-      null,
+      ServerRouter,
+      { loc: { path: pathname, searchParams } },
       createElement(Slot, { id: SHOULD_SKIP_ID }),
       componentIds.reduceRight(
         (acc: ReactNode, id) => createElement(Slot, { id, fallback: acc }, acc),