refactor(react-server): use official createServerReference (#283)

hi-ogawa · Apr 12, 2024 · 669cf97 · 669cf97
1 parent d2f60fc
commit 669cf97
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 2 deletions.
diff --git a/packages/react-server/examples/basic/src/routes/test/action/_action.tsx b/packages/react-server/examples/basic/src/routes/test/action/_action.tsx
@@ -35,3 +35,13 @@ export async function actionCheckAnswer(formData: FormData) {
   const message = answer === 2 ? "Correct!" : "Wrong!";
   return { message };
 }
+
+export async function actionStateTest(prevArg: unknown, formData: FormData) {
+  const result = { prev: prevArg, form: [...formData.entries()] };
+  console.log("[actionStateTest]", result);
+  return result;
+}
+
+export async function actionBindTest(boundArg: string, formData: FormData) {
+  console.log("[actionBindTest]", { boundArg, form: [...formData.entries()] });
+}
diff --git a/packages/react-server/examples/basic/src/routes/test/action/_client.tsx b/packages/react-server/examples/basic/src/routes/test/action/_client.tsx
@@ -4,7 +4,9 @@ import { useActionData } from "@hiogawa/react-server/client";
 import React from "react";
 import ReactDom from "react-dom";
 import {
+  actionBindTest,
   actionCheckAnswer,
+  actionStateTest,
   addMessage,
   changeCounter,
   type getMessages,
@@ -117,6 +119,39 @@ export function ActionDataTest() {
   );
 }
 
+// TODO
+export function UseActionStateTest() {
+  const [data, formAction, isPending] = ReactDom.useFormState(
+    actionStateTest,
+    null,
+  );
+
+  React.useEffect(() => {
+    console.log("[useActionState]", data, isPending);
+  }, [data, isPending]);
+
+  return (
+    <form action={formAction} className="flex flex-col gap-2">
+      <input type="hidden" name="hello" value="world" />
+      <button className="antd-input p-1 text-sm max-w-30">
+        useActionState Test
+      </button>
+    </form>
+  );
+}
+
+export function ClientActionBindTest() {
+  const formAction = actionBindTest.bind(null, "bound!!");
+  return (
+    <form action={formAction} className="flex flex-col gap-2">
+      <input type="hidden" name="hello" value="world" />
+      <button className="antd-input p-1 text-sm max-w-30">
+        Client Action Bind Test
+      </button>
+    </form>
+  );
+}
+
 // https://react.dev/reference/react-dom/hooks/useFormStatus
 export function FormStateTest() {
   return (

diff --git a/packages/react-server/examples/basic/src/routes/test/action/page.tsx b/packages/react-server/examples/basic/src/routes/test/action/page.tsx
@@ -2,9 +2,11 @@ import { changeCounter, getCounter, getMessages } from "./_action";
 import {
   ActionDataTest,
   Chat,
+  ClientActionBindTest,
   Counter,
   Counter2,
   FormStateTest,
+  UseActionStateTest,
 } from "./_client";
 
 export default async function Page() {
@@ -17,6 +19,8 @@ export default async function Page() {
       </div>
       <Chat messages={getMessages()} />
       <ActionDataTest />
+      <UseActionStateTest />
+      <ClientActionBindTest />
       <FormStateTest />
     </div>
   );

diff --git a/packages/react-server/examples/basic/tsconfig.json b/packages/react-server/examples/basic/tsconfig.json
@@ -16,7 +16,7 @@
     "moduleResolution": "Bundler",
     "module": "ESNext",
     "target": "ESNext",
-    "lib": ["ESNext", "DOM"],
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "types": ["vite/client", "react/experimental", "react-dom/experimental"],
     "jsx": "react-jsx"
   }

diff --git a/packages/react-server/src/entry/browser.tsx b/packages/react-server/src/entry/browser.tsx
@@ -176,7 +176,10 @@ export async function start() {
   if (document.documentElement.dataset["noHydate"]) {
     reactDomClient.createRoot(document).render(reactRootEl);
   } else {
-    reactDomClient.hydrateRoot(document, reactRootEl);
+    reactDomClient.hydrateRoot(document, reactRootEl, {
+      // @ts-ignore TODO
+      formState: null,
+    });
   }
 
   // custom event for RSC reload

diff --git a/packages/react-server/src/entry/server.tsx b/packages/react-server/src/entry/server.tsx
@@ -125,6 +125,8 @@ export async function renderHtml(
   let status = 200;
   try {
     ssrStream = await reactDomServer.renderToReadableStream(reactRootEl, {
+      // @ts-ignore TODO
+      formState: null,
       bootstrapModules: url.search.includes("__noJs")
         ? []
         : assets.bootstrapModules,

diff --git a/packages/react-server/src/features/server-action/client.tsx b/packages/react-server/src/features/server-action/client.tsx
@@ -5,6 +5,7 @@ import { RedirectBoundary } from "../../runtime-client";
 import { createError } from "../../server";
 import { LayoutStateContext } from "../router/client";
 
+// TODO: replace with React.useActionState
 export function useActionData<T extends (...args: any[]) => any>(
   action: T,
 ): Awaited<ReturnType<T>> | undefined {