chore(deps): react 19 stable

package.json

@@ -17,15 +17,14 @@
     "@playwright/test": "^1.45.1",
     "@tsconfig/strictest": "^2.0.5",
     "@types/node": "^20.14.10",
-    "@types/react": "18.3.3",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.1",
     "@vitejs/plugin-react": "^4.3.1",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "esbuild": "^0.23.0",
-    "react": "19.0.0-rc-09111202-20241011",
-    "react-dom": "19.0.0-rc-09111202-20241011",
-    "react-is": "19.0.0-rc-09111202-20241011",
-    "react-server-dom-webpack": "19.0.0-rc-09111202-20241011",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-server-dom-webpack": "^19.0.0",
     "tsup": "^8.1.0",
     "tsx": "^4.16.2",
     "typescript": "^5.5.4",
@@ -42,7 +41,6 @@
       "vite": "$vite",
       "react": "$react",
       "react-dom": "$react-dom",
-      "react-is": "$react-is",
       "react-server-dom-webpack": "$react-server-dom-webpack",
       "@types/react": "$@types/react",
       "@types/react-dom": "$@types/react-dom"

packages/react-server-next/src/compat/image.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import type React from "react";
 import ReactDOM from "react-dom";
 
 /** @todo */
@@ -8,7 +9,7 @@ export default function Image({
   placeholder,
   blurDataURL,
   ...props
-}: JSX.IntrinsicElements["img"] & {
+}: React.JSX.IntrinsicElements["img"] & {
   priority?: boolean;
   placeholder?: unknown;
   blurDataURL?: unknown;

packages/react-server-next/tsconfig.json

@@ -2,12 +2,7 @@
   "extends": "../../tsconfig.base.json",
   "include": ["src", "vitest.config.ts", "tsup.config.ts"],
   "compilerOptions": {
-    "types": [
-      "vite/client",
-      "react/experimental",
-      "react-dom/experimental",
-      "@types/node"
-    ],
+    "types": ["vite/client", "@types/node"],
     "jsx": "react-jsx"
   }
 }

packages/react-server-next/types/index.d.ts

@@ -1,8 +1,6 @@
 /// <reference types="vite/client" />
 /// <reference types="react" />
-/// <reference types="react/experimental" />
 /// <reference types="react-dom" />
-/// <reference types="react-dom/experimental" />
 
 declare global {
   interface RequestInit {

packages/react-server/examples/basic/src/components/nav-menu.tsx

@@ -1,9 +1,10 @@
 import { Link } from "@hiogawa/react-server/client";
+import type React from "react";
 
 export function NavMenu(props: {
   links: string[];
   className?: string;
-  activeProps?: JSX.IntrinsicElements["a"];
+  activeProps?: React.JSX.IntrinsicElements["a"];
 }) {
   return (
     <ul className={props.className}>

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

@@ -11,12 +11,7 @@
     "module": "ESNext",
     "target": "ESNext",
     "lib": ["ESNext", "DOM", "DOM.Iterable"],
-    "types": [
-      "vite/client",
-      "react/experimental",
-      "react-dom/experimental",
-      "@types/mdx"
-    ],
+    "types": ["vite/client", "@types/mdx"],
     "jsx": "react-jsx"
   }
 }

packages/react-server/misc/test.sh

@@ -14,7 +14,7 @@ cd "$test_dir"
 rm -rf dist node_modules
 
 node "$lib_dir/misc/overrides.mjs" "$test_dir/package.json"
-pnpm i {react,react-dom,react-server-dom-webpack}@19.0.0-rc-2d16326d-20240930
+pnpm i
 
 if test "${CI:-}" = "true"; then
   npx playwright install chromium

packages/react-server/src/entry/browser.tsx

@@ -252,14 +252,4 @@ async function importRouteManifest(): Promise<RouteManifest> {
   }
 }
 
-declare module "react-dom/client" {
-  interface HydrationOptions {
-    formState?: unknown;
-  }
-
-  interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_CREATE_ROOT_CONTAINERS {
-    Document: Document;
-  }
-}
-
 start();

packages/react-server/src/entry/ssr.tsx

@@ -109,9 +109,8 @@ export async function renderHtml(
   const flightDataPromise = ReactClient.createFromReadableStream<FlightData>(
     stream1,
     {
-      ssrManifest: {
+      serverConsumerManifest: {
         moduleMap: createModuleMap(),
-        moduleLoading: null,
       },
     },
   );

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

@@ -114,7 +114,7 @@ export function RouteAssetLinks() {
         <link key={href} rel="modulepreload" href={href} />
       ))}
       {deps.css.map((href) => (
-        // @ts-expect-error precedence to force head rendering
+        // precedence to force head rendering
         // https://react.dev/reference/react-dom/components/link#special-rendering-behavior
         <link key={href} rel="stylesheet" href={href} precedence="high" />
       ))}
@@ -143,5 +143,5 @@ export function usePreloadHandlers({
     onMouseEnter: callback,
     onTouchStart: callback,
     onFocus: callback,
-  } satisfies JSX.IntrinsicElements["a"];
+  } satisfies React.JSX.IntrinsicElements["a"];
 }

packages/react-server/src/features/router/client/link.tsx

@@ -12,7 +12,7 @@ import { useRouter } from "./router";
 
 interface LinkProps {
   revalidate?: RevalidationType;
-  activeProps?: JSX.IntrinsicElements["a"];
+  activeProps?: React.JSX.IntrinsicElements["a"];
   preload?: boolean;
 }
 
@@ -32,7 +32,7 @@ export function Link({
   activeProps,
   preload,
   ...props
-}: JSX.IntrinsicElements["a"] & { href: string } & LinkProps) {
+}: React.JSX.IntrinsicElements["a"] & { href: string } & LinkProps) {
   const history = useRouter((s) => s.history);
   const pathname = useRouter((s) => s.location.pathname);
   const href = encodeHref(props.href);
@@ -60,7 +60,7 @@ export function Link({
               );
             }
           },
-        } satisfies JSX.IntrinsicElements["a"],
+        } satisfies React.JSX.IntrinsicElements["a"],
       )}
     />
   );
@@ -71,7 +71,7 @@ export function LinkForm({
   activeProps,
   preload: _preload,
   ...props
-}: JSX.IntrinsicElements["form"] & { action: string } & LinkProps) {
+}: React.JSX.IntrinsicElements["form"] & { action: string } & LinkProps) {
   const history = useRouter((s) => s.history);
 
   // cf. react-router's getFormSubmissionInfo and normalizeNavigateOptions
@@ -94,7 +94,7 @@ export function LinkForm({
             revalidate ? routerRevalidate(revalidate) : {},
           );
         },
-      } satisfies JSX.IntrinsicElements["form"])}
+      } satisfies React.JSX.IntrinsicElements["form"])}
     />
   );
 }

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

@@ -1,4 +1,5 @@
 import { memoize, tinyassert } from "@hiogawa/utils";
+import type { ReactFormState } from "react-dom/client";
 import ReactServer from "react-server-dom-webpack/server.edge";
 import { $__global } from "../../global";
 import type { ReactServerErrorContext } from "../../server";
@@ -21,7 +22,7 @@ export function registerServerReference(
 
 export type ActionResult = {
   error?: ReactServerErrorContext;
-  data?: unknown;
+  data?: ReactFormState | null;
 };
 
 const REFERENCE_SEP = "#";

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

@@ -40,7 +40,7 @@ declare module "react-server-dom-webpack/server.edge" {
     actionResult: unknown,
     body: FormData,
     serverManifest?: unknown,
-  ): Promise<unknown>;
+  ): Promise<import("react-dom/client").ReactFormState | null>;
 }
 
 // https://github.com/facebook/react/blob/89021fb4ec9aa82194b0788566e736a4cedfc0e4/packages/react-server-dom-webpack/src/ReactFlightDOMClientEdge.js
@@ -54,7 +54,7 @@ declare module "react-server-dom-webpack/client.edge" {
   export function createFromReadableStream<T>(
     stream: ReadableStream<Uint8Array>,
     options: {
-      ssrManifest: import("./react").SsrManifest;
+      serverConsumerManifest: import("./react").SsrManifest;
       // TODO
       // encodeFormAction
     },

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

@@ -23,7 +23,8 @@ export type ModuleMap = {
 export interface SsrManifest {
   moduleMap: ModuleMap;
   // TODO
-  moduleLoading: null;
+  serverModuleMap?: unknown;
+  moduleLoading?: unknown;
 }
 
 export type WebpackRequire = (id: string) => Promise<unknown>;

packages/react-server/tsconfig.json

@@ -2,7 +2,7 @@
   "extends": "../../tsconfig.base.json",
   "include": ["src", "e2e", "*.ts"],
   "compilerOptions": {
-    "types": ["vite/client", "react/experimental", "react-dom/experimental"],
+    "types": ["vite/client"],
     "jsx": "react-jsx"
   }
 }