chore(deps): update react 20240430

package.json

@@ -37,7 +37,12 @@
   },
   "pnpm": {
     "overrides": {
-      "vite": "$vite"
+      "vite": "$vite",
+      "react": "19.0.0-beta-4508873393-20240430",
+      "react-dom": "19.0.0-beta-4508873393-20240430",
+      "react-is": "19.0.0-beta-4508873393-20240430",
+      "@types/react": "18.3.1",
+      "@types/react-dom": "18.3.0"
     }
   }
 }

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

@@ -676,9 +676,7 @@ async function testUseActionState(page: Page, options: { js: boolean }) {
     await expect(page.getByTestId("action-state")).toHaveText("...");
   }
   await page.getByText("Wrong! (tried once)").click();
-  await expect(page.getByPlaceholder("Answer?")).toHaveValue(
-    options.js ? "3" : "",
-  );
+  await expect(page.getByPlaceholder("Answer?")).toHaveValue("3");
 
   await page.getByPlaceholder("Answer?").fill("2");
   await page.getByPlaceholder("Answer?").press("Enter");

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

@@ -21,9 +21,9 @@
     "@hiogawa/test-dep-server-component": "file:deps/server-component",
     "@hiogawa/test-dep-use-client": "file:deps/use-client",
     "cookie": "^0.6.0",
-    "react": "19.0.0-canary-4c12339ce-20240408",
-    "react-dom": "19.0.0-canary-4c12339ce-20240408",
-    "react-server-dom-webpack": "19.0.0-canary-4c12339ce-20240408",
+    "react": "19.0.0-beta-4508873393-20240430",
+    "react-dom": "19.0.0-beta-4508873393-20240430",
+    "react-server-dom-webpack": "19.0.0-beta-4508873393-20240430",
     "react-wrap-balancer": "^1.1.0"
   },
   "devDependencies": {
@@ -35,8 +35,8 @@
     "@iconify-json/ri": "^1.1.20",
     "@playwright/test": "^1.42.1",
     "@types/cookie": "^0.6.0",
-    "@types/react": "18.2.66",
-    "@types/react-dom": "18.2.22",
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.0",
     "@unocss/postcss": "^0.58.6",
     "@vitejs/plugin-react": "^4.2.1",
     "unocss": "^0.58.6",

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

@@ -31,6 +31,7 @@ export async function slowAction(formData: FormData) {
 }
 
 type CheckAnswerState = {
+  answer?: number;
   message: string;
   count: number;
 };
@@ -42,7 +43,7 @@ export async function actionCheckAnswer(
   await sleep(500);
   const answer = Number(formData.get("answer"));
   const message = answer === 2 ? "Correct!" : "Wrong!";
-  return { message, count: (prev?.count ?? 0) + 1 };
+  return { answer, message, count: (prev?.count ?? 0) + 1 };
 }
 
 let actionBindResult = "(none)";

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

@@ -1,6 +1,5 @@
 "use client";
 
-import { useActionState } from "@hiogawa/react-server/client";
 import React from "react";
 import ReactDom from "react-dom";
 import {
@@ -67,13 +66,6 @@ export function Counter2({
 }
 
 export function Chat(props: { messages: ReturnType<typeof getMessages> }) {
-  const [input, setInput] = React.useState("");
-
-  // clear input after submit (really this way?)
-  React.useEffect(() => {
-    setInput("");
-  }, [props.messages]);
-
   return (
     <div className="flex flex-col gap-2">
       <h4 className="font-bold">Messages</h4>
@@ -91,8 +83,6 @@ export function Chat(props: { messages: ReturnType<typeof getMessages> }) {
             className="antd-input px-2"
             placeholder="write something..."
             required
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
           />
           <button className="antd-btn antd-btn-default px-2">Send</button>
         </div>
@@ -102,7 +92,10 @@ export function Chat(props: { messages: ReturnType<typeof getMessages> }) {
 }
 
 export function ActionDataTest() {
-  const [data, formAction, isPending] = useActionState(actionCheckAnswer, null);
+  const [data, formAction, isPending] = React.useActionState(
+    actionCheckAnswer,
+    null,
+  );
 
   return (
     <form action={formAction} className="flex flex-col gap-2">
@@ -113,6 +106,7 @@ export function ActionDataTest() {
           className="antd-input px-2 max-w-30"
           name="answer"
           placeholder="Answer?"
+          defaultValue={data?.answer}
           required
         />
         <div data-testid="action-state">
@@ -131,7 +125,10 @@ export function ActionDataTest() {
 }
 
 export function NonFormActionTest() {
-  const [data, formAction, isPending] = useActionState(nonFormAction, null);
+  const [data, formAction, isPending] = React.useActionState(
+    nonFormAction,
+    null,
+  );
   return (
     <form
       className="flex flex-col gap-2"

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

@@ -7,7 +7,7 @@ export default async function Page() {
       <CommonComponent message="from server" />
       <div className="text-sm">
         <pre>Server Time: {new Date().toISOString()}</pre>
-        <Fetch url="https://unpkg.com/react@19.0.0-canary-4c12339ce-20240408/package.json" />
+        <Fetch url="https://unpkg.com/react@19.0.0-beta-4508873393-20240430/package.json" />
       </div>
       <Counter />
     </div>

packages/react-server/examples/starter/package.json

@@ -13,15 +13,15 @@
   },
   "dependencies": {
     "@hiogawa/react-server": "latest",
-    "react": "19.0.0-canary-4c12339ce-20240408",
-    "react-dom": "19.0.0-canary-4c12339ce-20240408",
-    "react-server-dom-webpack": "19.0.0-canary-4c12339ce-20240408"
+    "react": "19.0.0-beta-4508873393-20240430",
+    "react-dom": "19.0.0-beta-4508873393-20240430",
+    "react-server-dom-webpack": "19.0.0-beta-4508873393-20240430"
   },
   "devDependencies": {
     "@hattip/adapter-node": "^0.0.44",
     "@hiogawa/vite-plugin-ssr-middleware": "latest",
-    "@types/react": "18.2.66",
-    "@types/react-dom": "18.2.22",
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.0",
     "@vitejs/plugin-react": "^4.2.1",
     "vite": "latest"
   }

packages/react-server/package.json

@@ -74,17 +74,17 @@
   },
   "devDependencies": {
     "@types/estree": "^1.0.5",
-    "@types/react": "18.2.66",
-    "@types/react-dom": "18.2.22",
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.0",
     "@types/use-sync-external-store": "^0.0.6",
-    "react": "19.0.0-canary-4c12339ce-20240408",
-    "react-dom": "19.0.0-canary-4c12339ce-20240408",
-    "react-server-dom-webpack": "19.0.0-canary-4c12339ce-20240408"
+    "react": "19.0.0-beta-4508873393-20240430",
+    "react-dom": "19.0.0-beta-4508873393-20240430",
+    "react-server-dom-webpack": "19.0.0-beta-4508873393-20240430"
   },
   "peerDependencies": {
-    "react": "19.0.0-canary-4c12339ce-20240408",
-    "react-dom": "19.0.0-canary-4c12339ce-20240408",
-    "react-server-dom-webpack": "19.0.0-canary-4c12339ce-20240408",
+    "react": "19.0.0-beta-4508873393-20240430",
+    "react-dom": "19.0.0-beta-4508873393-20240430",
+    "react-server-dom-webpack": "19.0.0-beta-4508873393-20240430",
     "vite": "*"
   }
 }

packages/react-server/src/client.tsx

@@ -3,4 +3,3 @@
 export { Link, LinkForm } from "./lib/client/link";
 export { useRouter } from "./lib/client/router";
 export { routerRevalidate } from "./features/router/client";
-export { useActionState } from "./features/server-action/client";

packages/react-server/src/features/server-action/client.tsx

@@ -20,19 +20,3 @@ function ThrowActionError() {
   }
   return null;
 }
-
-// re-export React.useActionState since the type is not officially available yet
-export const useActionState: ReactUseActionState = (...args) =>
-  (React as any).useActionState(...args);
-
-// type is copied from ReactDOM.useFormState
-// https://github.com/facebook/react/pull/28491
-type ReactUseActionState = <State, Payload>(
-  action: (state: Awaited<State>, payload: Payload) => State | Promise<State>,
-  initialState: Awaited<State>,
-  permalink?: string,
-) => [
-  state: Awaited<State>,
-  dispatch: (payload: Payload) => void,
-  isPending: boolean,
-];

packages/react-server/src/lib/types.ts

@@ -32,14 +32,3 @@ export type WebpackRequire = (id: string) => Promise<unknown>;
 export type WebpackChunkLoad = (id: string) => Promise<unknown>;
 
 export type CallServerCallback = (id: any, args: any) => Promise<unknown>;
-
-// https://github.com/facebook/react/pull/28491
-export type ReactUseActionState = <State, Payload>(
-  action: (state: Awaited<State>, payload: Payload) => State | Promise<State>,
-  initialState: Awaited<State>,
-  permalink?: string,
-) => [
-  state: Awaited<State>,
-  dispatch: (payload: Payload) => void,
-  isPending: boolean,
-];

packages/react-server/src/plugin/index.ts

@@ -187,7 +187,7 @@ export function vitePluginReactServer(options?: {
             // make server reference async for simplicity (stale chunkCache, etc...)
             // see TODO in https://github.com/facebook/react/blob/33a32441e991e126e5e874f831bd3afc237a3ecf/packages/react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpack.js#L131-L132
             code = code.replaceAll("if (isAsyncImport(metadata))", "if (true)");
-            code = code.replaceAll("4===a.length", "true");
+            code = code.replaceAll("4 === metadata.length", "true");
 
             return code;
           }