pass route params through context

packages/docs-new/src/_default.page.client.tsx

@@ -4,14 +4,17 @@ import { HeadProvider } from "react-head"
 import type { PageContextBuiltInClient } from "vite-plugin-ssr/client"
 import { getPage } from "vite-plugin-ssr/client"
 import { App } from "./app"
+import { RouteContextProvider } from "./route-context"
 
 const context = await getPage<PageContextBuiltInClient>()
 
 createRoot(document.querySelector("#app")!).render(
   <HeadProvider>
-    <App>
-      <context.Page />
-    </App>
+    <RouteContextProvider value={{ routeParams: {}, ...context }}>
+      <App>
+        <context.Page />
+      </App>
+    </RouteContextProvider>
   </HeadProvider>,
 )
 

packages/docs-new/src/_default.page.server.tsx

@@ -4,6 +4,7 @@ import { HeadProvider } from "react-head"
 import type { PageContextBuiltIn } from "vite-plugin-ssr"
 import { dangerouslySkipEscape, escapeInject } from "vite-plugin-ssr"
 import { App } from "./app"
+import { RouteContextProvider } from "./route-context"
 
 export const passToClient = ["routeParams"]
 
@@ -12,9 +13,11 @@ export function render(context: PageContextBuiltIn) {
 
   const pageHtml = renderToString(
     <HeadProvider headTags={headTags}>
-      <App>
-        <context.Page />
-      </App>
+      <RouteContextProvider value={context}>
+        <App>
+          <context.Page />
+        </App>
+      </RouteContextProvider>
     </HeadProvider>,
   )
 

packages/docs-new/src/pages/docs.page.tsx

@@ -3,6 +3,7 @@ import { AppLink } from "../components/app-link"
 import { MainNavigation } from "../components/main-navigation"
 import { guideLinks } from "../data/guide-links.preval"
 import { useScrolled } from "../hooks/dom/use-scrolled"
+import { useRouteParams } from "../route-context"
 import {
   docsProseClass,
   linkClass,
@@ -10,6 +11,7 @@ import {
 } from "../styles/components"
 
 export default function DocsPage() {
+  const params = useRouteParams()
   return (
     <>
       <HeaderPanel>
@@ -30,6 +32,7 @@ export default function DocsPage() {
         </nav>
         <section className={clsx(docsProseClass, "pb-8 flex-1 min-w-0")}>
           {/* todo */}
+          {JSON.stringify(params, undefined, 2)}
         </section>
       </main>
     </>

packages/docs-new/src/route-context.tsx

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react"
+
+export type RouteContextValue = {
+  routeParams: Record<string, string>
+}
+
+const Context = createContext<RouteContextValue>()
+
+export const RouteContextProvider = Context.Provider
+
+export function useRouteParams() {
+  return useContext(Context)?.routeParams ?? {}
+}