test(react-server): test ReactDom.useFormStatus

packages/react-server/examples/basic/e2e/basic.test.ts

@@ -301,6 +301,14 @@ test("server action no js", async ({ browser }) => {
   await page.getByText("Count: 0").click();
 });
 
+test("ReactDom.useFormStatus", async ({ page }) => {
+  await page.goto("/test/action");
+  await page.getByText("hydrated: true").click();
+  await page.getByRole("button", { name: "1.0 sec" }).click();
+  await page.getByText("pending: true").click();
+  await page.getByText("pending: false").click();
+});
+
 test("use client > virtual module", async ({ page }) => {
   await page.goto("/test/deps");
   await page.getByText("TestVirtualUseClient").click();

packages/react-server/examples/basic/src/routes/test/action/_action.tsx

@@ -1,6 +1,6 @@
 "use server";
 
-import { tinyassert } from "@hiogawa/utils";
+import { sleep, tinyassert } from "@hiogawa/utils";
 
 let counter = 0;
 
@@ -25,3 +25,7 @@ export function addMessage(formData: FormData) {
   messages.push([messageId++, message]);
   messages = messages.slice(-5);
 }
+
+export async function slowAction(formData: FormData) {
+  await sleep(Number(formData.get("sleep")));
+}

packages/react-server/examples/basic/src/routes/test/action/_client.tsx

@@ -1,7 +1,13 @@
 "use client";
 
 import React from "react";
-import { addMessage, changeCounter, type getMessages } from "./_action";
+import ReactDom from "react-dom";
+import {
+  addMessage,
+  changeCounter,
+  type getMessages,
+  slowAction,
+} from "./_action";
 
 export function Counter(props: { value: number }) {
   return (
@@ -90,3 +96,68 @@ export function Chat(props: { messages: ReturnType<typeof getMessages> }) {
     </div>
   );
 }
+
+// https://react.dev/reference/react-dom/hooks/useFormStatus
+export function FormStateTest() {
+  return (
+    <form action={slowAction} className="flex flex-col items-start gap-2">
+      <FormStateTestInner />
+    </form>
+  );
+}
+
+function FormStateTestInner() {
+  // useFormStatus works only inside <form />
+  const formStatus = ReactDom.useFormStatus();
+
+  return (
+    <>
+      <h4 className="font-bold">Form Status</h4>
+      <div className="flex gap-2">
+        <button
+          className="antd-btn antd-btn-default px-2"
+          name="sleep"
+          value={"200"}
+          disabled={formStatus.pending}
+        >
+          0.2 sec
+        </button>
+        <button
+          className="antd-btn antd-btn-default px-2"
+          name="sleep"
+          value={"1000"}
+          disabled={formStatus.pending}
+        >
+          1.0 sec
+        </button>
+        <button
+          className="antd-btn antd-btn-default px-2"
+          name="sleep"
+          value={"2000"}
+          disabled={formStatus.pending}
+        >
+          2.0 sec
+        </button>
+      </div>
+      <pre className="text-sm">
+        <div>pending: {String(formStatus.pending)}</div>
+        <div>method: {String(formStatus.method)}</div>
+        <div>
+          data:{" "}
+          {formStatus.data
+            ? JSON.stringify(formDataToJson(formStatus.data))
+            : String(formStatus.data)}
+        </div>
+        <div>action: {String(formStatus.action)}</div>
+      </pre>
+    </>
+  );
+}
+
+function formDataToJson(data: FormData) {
+  const result: any = {};
+  data.forEach((v, k) => {
+    result[k] = v;
+  });
+  return result;
+}

packages/react-server/examples/basic/src/routes/test/action/page.tsx

@@ -1,15 +1,16 @@
 import { changeCounter, getCounter, getMessages } from "./_action";
-import { Chat, Counter, Counter2 } from "./_client";
+import { Chat, Counter, Counter2, FormStateTest } from "./_client";
 
 export default async function Page() {
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-4 p-2">
       <div className="flex flex-col gap-2">
         <Counter value={getCounter()} />
         <Counter2 action={changeCounter} />
         <Counter3 />
       </div>
       <Chat messages={getMessages()} />
+      <FormStateTest />
     </div>
   );
 }

packages/react-server/examples/basic/tsconfig.json

@@ -17,7 +17,7 @@
     "module": "ESNext",
     "target": "ESNext",
     "lib": ["ESNext", "DOM"],
-    "types": ["vite/client", "react/experimental"],
+    "types": ["vite/client", "react/experimental", "react-dom/experimental"],
     "jsx": "react-jsx"
   }
 }