chore(deps): react beta 20240430

examples/custom/package.json

@@ -10,8 +10,8 @@
     "react-dom": "18.3.0-canary-6c3b8dbfe-20240226"
   },
   "devDependencies": {
-    "@types/react": "18.2.72",
-    "@types/react-dom": "18.2.22"
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.0"
   },
   "volta": {
     "extends": "../../package.json"

examples/react-server/package.json

@@ -14,14 +14,14 @@
     "cf-release": "cd misc/cloudflare-workers && wrangler deploy"
   },
   "dependencies": {
-    "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": {
     "@hiogawa/vite-plugin-ssr-middleware-alpha": "workspace:*",
-    "@types/react": "18.2.72",
-    "@types/react-dom": "18.2.22",
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.0",
     "@unocss/vite": "^0.59.4",
     "happy-dom": "^14.7.1",
     "unocss": "^0.59.4"

examples/react-server/src/__snapshots__/basic.test.tsx.snap

@@ -57,9 +57,7 @@ exports[`basic 1`] = `
             +1
           </button>
         </form>
-        <form
-          action="javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')"
-        >
+        <form>
           <h4>
             Hello useActionState
           </h4>
@@ -97,11 +95,21 @@ exports[`basic 1`] = `
         >
           unocss (client)
         </div>
-        <div
-          data-hydrated="true"
-        >
-          hydrated: 
-          true
+        <div>
+          <div
+            data-hydrated="true"
+          >
+            [hydrated: 
+            true
+            ]
+          </div>
+          <div>
+            [effect: 
+            <span>
+              2
+            </span>
+            ]
+          </div>
         </div>
         <div>
           Count: 

examples/react-server/src/routes/_client.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import "./_client.css";
+import { tinyassert } from "@hiogawa/utils";
 import React from "react";
 import { checkAnswer } from "./_action";
 import { SharedComponent } from "./_shared";
@@ -20,7 +21,10 @@ export function ClientComponent() {
       <div className="flex justify-center w-36 m-1 p-1 important:(bg-[rgb(255,220,220)])">
         unocss (client)
       </div>
-      <div data-hydrated={hydrated}>hydrated: {String(hydrated)}</div>
+      <div>
+        <div data-hydrated={hydrated}>[hydrated: {String(hydrated)}]</div>
+        <EffectCount />
+      </div>
       <div>Count: {count}</div>
       <button className="client-btn" onClick={() => setCount((v) => v - 1)}>
         -1
@@ -32,12 +36,28 @@ export function ClientComponent() {
   );
 }
 
+export function EffectCount() {
+  const elRef = React.useRef<HTMLElement>(null);
+  const countRef = React.useRef(0);
+
+  React.useEffect(() => {
+    countRef.current++;
+    tinyassert(elRef.current);
+    elRef.current.textContent = String(countRef.current);
+  });
+
+  return (
+    <div>
+      [effect: <span ref={elRef}>0</span>]
+    </div>
+  );
+}
+
 export function UseActionStateDemo() {
-  const useActionState = (React as any).useActionState as ReactUseActionState;
-  const [data, formAction, isPending] = useActionState(checkAnswer, null);
+  const [data, formAction, isPending] = React.useActionState(checkAnswer, null);
 
   return (
-    <form action={formAction}>
+    <form {...useNoRequestFormReset(formAction)}>
       <h4>Hello useActionState</h4>
       <div style={{ display: "flex", alignItems: "center", gap: "0.3rem" }}>
         <div>1 + 1 = </div>
@@ -62,14 +82,22 @@ export function UseActionStateDemo() {
   );
 }
 
-// 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,
-];
+// https://github.com/facebook/react/pull/28809
+function useNoRequestFormReset(
+  action: React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS["functions"],
+): Pick<JSX.IntrinsicElements["form"], "action" | "onSubmit"> {
+  const hydrated = React.useSyncExternalStore(
+    React.useCallback(() => () => {}, []),
+    () => true,
+    () => false,
+  );
+  if (hydrated) {
+    return {
+      onSubmit(e) {
+        e.preventDefault();
+        action(new FormData(e.currentTarget));
+      },
+    };
+  }
+  return { action };
+}

examples/react-server/vite.config.ts

@@ -336,7 +336,7 @@ function vitePluginServerAction(): PluginOption {
         // 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, map: null };
       }

examples/react-ssr-workerd/package.json

@@ -7,14 +7,14 @@
     "test-e2e": "playwright test"
   },
   "dependencies": {
-    "react": "19.0.0-canary-4c12339ce-20240408",
-    "react-dom": "19.0.0-canary-4c12339ce-20240408"
+    "react": "19.0.0-beta-4508873393-20240430",
+    "react-dom": "19.0.0-beta-4508873393-20240430"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20240405.0",
     "@hiogawa/vite-plugin-workerd": "workspace:*",
-    "@types/react": "18.2.72",
-    "@types/react-dom": "18.2.22"
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.0"
   },
   "volta": {
     "extends": "../../package.json"

examples/react-ssr/package.json

@@ -14,14 +14,14 @@
     "vc-release": "vercel deploy --prebuilt misc/vercel-edge --prod"
   },
   "dependencies": {
-    "react": "19.0.0-canary-4c12339ce-20240408",
-    "react-dom": "19.0.0-canary-4c12339ce-20240408"
+    "react": "19.0.0-beta-4508873393-20240430",
+    "react-dom": "19.0.0-beta-4508873393-20240430"
   },
   "devDependencies": {
     "@hiogawa/vite-plugin-ssr-middleware-alpha": "workspace:*",
     "@hiogawa/vite-plugin-workerd": "workspace:*",
-    "@types/react": "18.2.72",
-    "@types/react-dom": "18.2.22"
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.0"
   },
   "volta": {
     "extends": "../../package.json"