update app examples to await async params and use Suspense

ethanniser · Oct 30, 2024 · 0440ae6 · 0440ae6
1 parent 54942eb
commit 0440ae6
Show file tree

Hide file tree

Showing 10 changed files with 64 additions and 46 deletions.
diff --git a/examples/appdir/src/app/(test)/foo/[id]/@modal/(.)nest/page.tsx b/examples/appdir/src/app/(test)/foo/[id]/@modal/(.)nest/page.tsx
@@ -3,25 +3,27 @@ import { InferPagePropsType } from "next-typesafe-url";
 import { Route, RouteType } from "../../nest/routeType";
 import { $path } from "next-typesafe-url";
 import Link from "next/link";
+import { Suspense } from "react";
 
 type PageProps = InferPagePropsType<RouteType>;
 
-const Page = ({ routeParams }: PageProps) => {
+const Page = async ({ routeParams }: PageProps) => {
+  const params = await routeParams;
   return (
-    <>
+    <Suspense>
       <div className="border border-black">
         <h1>INTERCEPT</h1>
-        <div>{`route: ${JSON.stringify(routeParams)}`}</div>
+        <div>{`route: ${JSON.stringify(params)}`}</div>
         <Link
           href={$path({
             route: "/foo/[id]",
-            routeParams: { id: routeParams.id },
+            routeParams: { id: params.id },
           })}
         >
           BACK
         </Link>
       </div>
-    </>
+    </Suspense>
   );
 };
 

diff --git a/examples/appdir/src/app/(test)/foo/[id]/@modal/page.tsx b/examples/appdir/src/app/(test)/foo/[id]/@modal/page.tsx
@@ -1,17 +1,19 @@
 import { withParamValidation } from "next-typesafe-url/app/hoc";
 import { InferPagePropsType } from "next-typesafe-url";
 import { Route, RouteType } from "../routeType";
+import { Suspense } from "react";
 
 type PageProps = InferPagePropsType<RouteType>;
 
-const Page = ({ routeParams }: PageProps) => {
+const Page = async ({ routeParams }: PageProps) => {
+  const params = await routeParams;
   return (
-    <>
+    <Suspense>
       <div className="border border-black">
         <h1>PARALLELROUTE</h1>
-        <div>{`route: ${JSON.stringify(routeParams)}`}</div>
+        <div>{`route: ${JSON.stringify(params)}`}</div>
       </div>
-    </>
+    </Suspense>
   );
 };
 

diff --git a/examples/appdir/src/app/(test)/foo/[id]/layout.tsx b/examples/appdir/src/app/(test)/foo/[id]/layout.tsx
@@ -1,6 +1,7 @@
 import { z } from "zod";
 import { withLayoutParamValidation } from "next-typesafe-url/app/hoc";
 import type { DynamicLayout, InferLayoutPropsType } from "next-typesafe-url";
+import { Suspense } from "react";
 
 const LayoutRoute = {
   routeParams: z.object({
@@ -10,18 +11,21 @@ const LayoutRoute = {
 type LayoutType = typeof LayoutRoute;
 
 type Props = InferLayoutPropsType<LayoutType, "modal">;
-function Layout({ children, routeParams, modal }: Props) {
+async function Layout({ children, routeParams, modal }: Props) {
+  const params = await routeParams;
   return (
-    <div className="border border-black">
-      <h1>THIS IS A LAYOUT</h1>
-      <p>{JSON.stringify(routeParams)}</p>
-      <div className="border border-black">{children}</div>
+    <Suspense>
       <div className="border border-black">
-        <h1>MODAL</h1>
-        <div className="border border-green">{modal}</div>
+        <h1>THIS IS A LAYOUT</h1>
+        <p>{JSON.stringify(params)}</p>
+        <div className="border border-black">{children}</div>
+        <div className="border border-black">
+          <h1>MODAL</h1>
+          <div className="border border-green">{modal}</div>
+        </div>
+        <p>bottom</p>
       </div>
-      <p>bottom</p>
-    </div>
+    </Suspense>
   );
 }
 

diff --git a/examples/appdir/src/app/(test)/foo/[id]/nest/page.tsx b/examples/appdir/src/app/(test)/foo/[id]/nest/page.tsx
@@ -1,17 +1,19 @@
 import { withParamValidation } from "next-typesafe-url/app/hoc";
 import { InferPagePropsType } from "next-typesafe-url";
 import { Route, RouteType } from "./routeType";
+import { Suspense } from "react";
 
 type PageProps = InferPagePropsType<RouteType>;
 
-const Page = ({ routeParams }: PageProps) => {
+const Page = async ({ routeParams }: PageProps) => {
+  const params = await routeParams;
   return (
-    <>
+    <Suspense>
       <div className="border border-black">
         <h1>NORMAL NEST PAGE</h1>
-        <div>{`route: ${JSON.stringify(routeParams)}`}</div>
+        <div>{`route: ${JSON.stringify(params)}`}</div>
       </div>
-    </>
+    </Suspense>
   );
 };
 

diff --git a/examples/appdir/src/app/(test)/foo/[id]/page.tsx b/examples/appdir/src/app/(test)/foo/[id]/page.tsx
@@ -3,25 +3,27 @@ import { InferPagePropsType } from "next-typesafe-url";
 import { Route, RouteType } from "./routeType";
 import { $path } from "next-typesafe-url";
 import Link from "next/link";
+import { Suspense } from "react";
 
 type PageProps = InferPagePropsType<RouteType>;
 
-const Page = ({ routeParams }: PageProps) => {
+const Page = async ({ routeParams }: PageProps) => {
+  const params = await routeParams;
   return (
-    <>
+    <Suspense>
       <div className="border border-black">
         <h1>page</h1>
-        <div>{`route: ${JSON.stringify(routeParams)}`}</div>
+        <div>{`route: ${JSON.stringify(params)}`}</div>
         <Link
           href={$path({
             route: "/foo/[id]/nest",
-            routeParams: { id: routeParams.id },
+            routeParams: { id: params.id },
           })}
         >
           LINK
         </Link>
       </div>
-    </>
+    </Suspense>
   );
 };
 

diff --git a/examples/appdir/src/app/[slug]/[...foo]/page.tsx b/examples/appdir/src/app/[slug]/[...foo]/page.tsx
@@ -7,16 +7,18 @@ type PageProps = InferPagePropsType<RouteType>;
 
 let count = 0;
 
-const Page = ({ routeParams, searchParams }: PageProps) => {
+const Page = async ({ routeParams, searchParams }: PageProps) => {
   console.log("render", count++);
-  console.log(JSON.stringify(routeParams));
-  console.log(JSON.stringify(searchParams));
+  const params = await routeParams;
+  const search = await searchParams;
+  console.log(JSON.stringify(params));
+  console.log(JSON.stringify(search));
 
   return (
     <>
-      <div>{`data: ${JSON.stringify(routeParams)}`}</div>
+      <div>{`data: ${JSON.stringify(params)}`}</div>
       <br />
-      <div>{`data: ${JSON.stringify(searchParams)}`}</div>
+      <div>{`data: ${JSON.stringify(search)}`}</div>
       <Client />
     </>
   );

diff --git a/examples/appdir/src/app/[slug]/layout.tsx b/examples/appdir/src/app/[slug]/layout.tsx
@@ -1,6 +1,7 @@
 import { z } from "zod";
 import { withLayoutParamValidation } from "next-typesafe-url/app/hoc";
 import type { DynamicLayout, InferLayoutPropsType } from "next-typesafe-url";
+import { Suspense } from "react";
 
 const LayoutRoute = {
   routeParams: z.object({
@@ -10,14 +11,16 @@ const LayoutRoute = {
 type LayoutType = typeof LayoutRoute;
 
 type Props = InferLayoutPropsType<LayoutType>;
-function Layout({ children, routeParams }: Props) {
+async function Layout({ children, routeParams }: Props) {
   return (
-    <div>
-      <h1>THIS IS A LAYOUT</h1>
-      <p>{JSON.stringify(routeParams)}</p>
-      <div className="border border-black">{children}</div>
-      <p>bottom</p>
-    </div>
+    <Suspense>
+      <div>
+        <h1>THIS IS A LAYOUT</h1>
+        <p>{JSON.stringify(await routeParams)}</p>
+        <div className="border border-black">{children}</div>
+        <p>bottom</p>
+      </div>
+    </Suspense>
   );
 }
 

diff --git a/examples/appdir/src/app/client/[...client]/client.tsx b/examples/appdir/src/app/client/[...client]/client.tsx
@@ -18,7 +18,7 @@ export const Client = () => {
   const routeParams = useRouteParams(Route.routeParams);
 
   return (
-    <>
+    <div className="flex flex-col space-y-5">
       <Link href={$path({ route: "/" })}>Back</Link>
       <br />
       <input value={input} onChange={(e) => setInput(e.target.value)} />
@@ -40,6 +40,6 @@ export const Client = () => {
       <div>{`data: ${JSON.stringify(params)}`}</div>
       <h1>routeParams</h1>
       <div>{`data: ${JSON.stringify(routeParams)}`}</div>
-    </>
+    </div>
   );
 };
diff --git a/examples/appdir/src/app/jsonRoute/[foo]/page.tsx b/examples/appdir/src/app/jsonRoute/[foo]/page.tsx
@@ -5,12 +5,13 @@ import { Suspense } from "react";
 
 type PageProps = InferPagePropsType<RouteType>;
 
-const Page = ({ routeParams }: PageProps) => {
-  console.log(routeParams.foo === undefined);
+const Page = async ({ routeParams }: PageProps) => {
+  const params = await routeParams;
+  console.log(params.foo === undefined);
 
   return (
     <Suspense>
-      <div>{`data: ${JSON.stringify(routeParams)}`}</div>
+      <div>{`data: ${JSON.stringify(params)}`}</div>
     </Suspense>
   );
 };

diff --git a/examples/appdir/src/app/transform/page.tsx b/examples/appdir/src/app/transform/page.tsx
@@ -12,7 +12,7 @@ type _TestOutput = RouterOutputs["/transform"];
 
 type PageProps = InferPagePropsType<RouteType>;
 
-const Page = ({ searchParams }: PageProps) => {
+const Page = async ({ searchParams }: PageProps) => {
   const _test = $path({
     route: "/transform",
     searchParams: {
@@ -22,7 +22,7 @@ const Page = ({ searchParams }: PageProps) => {
 
   return (
     <>
-      <div>{`data: ${JSON.stringify(searchParams)}`}</div>
+      <div>{`data: ${JSON.stringify(await searchParams)}`}</div>
     </>
   );
 };