From e8b6a7c8fd181b586573211f5a081dd88376b7b6 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Tue, 10 Dec 2024 10:40:15 +0900 Subject: [PATCH 1/3] chore(deps): react 19 stable --- examples/child-process/tsconfig.json | 2 +- examples/react-server/tsconfig.json | 2 +- examples/web-worker-rsc/tsconfig.json | 2 +- package.json | 10 ++-- pnpm-lock.yaml | 80 +++++++++++++-------------- 5 files changed, 46 insertions(+), 50 deletions(-) diff --git a/examples/child-process/tsconfig.json b/examples/child-process/tsconfig.json index a14d58e7..eabb754d 100644 --- a/examples/child-process/tsconfig.json +++ b/examples/child-process/tsconfig.json @@ -10,7 +10,7 @@ "module": "ESNext", "target": "ESNext", "lib": ["ESNext", "DOM"], - "types": ["vite/client", "react/experimental", "@types/bun"], + "types": ["vite/client", "@types/bun"], "jsx": "react-jsx" } } diff --git a/examples/react-server/tsconfig.json b/examples/react-server/tsconfig.json index 53e8f553..ee5801ab 100644 --- a/examples/react-server/tsconfig.json +++ b/examples/react-server/tsconfig.json @@ -16,7 +16,7 @@ "module": "ESNext", "target": "ESNext", "lib": ["ESNext", "DOM"], - "types": ["vite/client", "react/experimental"], + "types": ["vite/client"], "jsx": "react-jsx" } } diff --git a/examples/web-worker-rsc/tsconfig.json b/examples/web-worker-rsc/tsconfig.json index 2f9026d4..09584e24 100644 --- a/examples/web-worker-rsc/tsconfig.json +++ b/examples/web-worker-rsc/tsconfig.json @@ -9,7 +9,7 @@ "module": "ESNext", "target": "ESNext", "lib": ["ESNext", "DOM"], - "types": ["vite/client", "react/experimental"], + "types": ["vite/client"], "jsx": "react-jsx" } } diff --git a/package.json b/package.json index 1b5f7036..b8f52668 100644 --- a/package.json +++ b/package.json @@ -20,15 +20,15 @@ "@playwright/test": "^1.45.2", "@tsconfig/strictest": "^2.0.5", "@types/node": "^20.14.11", - "@types/react": "^18.3.10", - "@types/react-dom": "^18.3.0", + "@types/react": "^19.0.1", + "@types/react-dom": "^19.0.2", "@vitejs/plugin-react": "^4.3.1", "esbuild": "^0.23.0", "magic-string": "^0.30.10", "miniflare": "^3.20240925.0", - "react": "19.0.0-rc-eb3ad065-20240822", - "react-dom": "19.0.0-rc-eb3ad065-20240822", - "react-server-dom-webpack": "19.0.0-rc-eb3ad065-20240822", + "react": "^19.0.0", + "react-dom": "^19.0.0", + "react-server-dom-webpack": "^19.0.0", "tsup": "^8.1.2", "tsx": "^4.16.2", "typescript": "^5.5.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 104489b2..7ce667c2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -33,11 +33,11 @@ importers: specifier: ^20.14.11 version: 20.14.11 '@types/react': - specifier: ^18.3.10 - version: 18.3.10 + specifier: ^19.0.1 + version: 19.0.1 '@types/react-dom': - specifier: ^18.3.0 - version: 18.3.0 + specifier: ^19.0.2 + version: 19.0.2(@types/react@19.0.1) '@vitejs/plugin-react': specifier: ^4.3.1 version: 4.3.1(vite@6.0.3(@types/node@20.14.11)(jiti@1.21.6)(terser@5.31.3)(tsx@4.16.2)) @@ -51,14 +51,14 @@ importers: specifier: ^3.20240925.0 version: 3.20240925.0 react: - specifier: 19.0.0-rc-eb3ad065-20240822 - version: 19.0.0-rc-eb3ad065-20240822 + specifier: ^19.0.0 + version: 19.0.0 react-dom: - specifier: 19.0.0-rc-eb3ad065-20240822 - version: 19.0.0-rc-eb3ad065-20240822(react@19.0.0-rc-eb3ad065-20240822) + specifier: ^19.0.0 + version: 19.0.0(react@19.0.0) react-server-dom-webpack: - specifier: 19.0.0-rc-eb3ad065-20240822 - version: 19.0.0-rc-eb3ad065-20240822(react-dom@19.0.0-rc-eb3ad065-20240822(react@19.0.0-rc-eb3ad065-20240822))(react@19.0.0-rc-eb3ad065-20240822)(webpack@5.93.0(esbuild@0.23.0)) + specifier: ^19.0.0 + version: 19.0.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(webpack@5.93.0(esbuild@0.23.0)) tsup: specifier: ^8.1.2 version: 8.1.2(jiti@1.21.6)(postcss@8.4.49)(tsx@4.16.2)(typescript@5.5.3) @@ -1330,14 +1330,13 @@ packages: '@types/node@20.14.11': resolution: {integrity: sha512-kprQpL8MMeszbz6ojB5/tU8PLN4kesnN8Gjzw349rDlNgsSzg90lAVj3llK99Dh7JON+t9AuscPPFW6mPbTnSA==} - '@types/prop-types@15.7.12': - resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==} - - '@types/react-dom@18.3.0': - resolution: {integrity: sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==} + '@types/react-dom@19.0.2': + resolution: {integrity: sha512-c1s+7TKFaDRRxr1TxccIX2u7sfCnc3RxkVyBIUA2lCpyqCF+QoAwQ/CBg7bsMdVwP120HEH143VQezKtef5nCg==} + peerDependencies: + '@types/react': ^19.0.0 - '@types/react@18.3.10': - resolution: {integrity: sha512-02sAAlBnP39JgXwkAq3PeU9DVaaGpZyF3MGcC0MKgQVkZor5IiiDAipVaxQHtDJAmO4GIy/rVBy/LzVj76Cyqg==} + '@types/react@19.0.1': + resolution: {integrity: sha512-YW6614BDhqbpR5KtUYzTA+zlA7nayzJRA9ljz9CQoxthR0sDisYZLuvSMsil36t4EH/uAt8T52Xb4sVw17G+SQ==} '@types/ws@8.5.12': resolution: {integrity: sha512-3tPRkv1EtkDpzlgyKyI8pGsGZAGPEaXeu0DOj5DI25Ja91bdAYddYHbADRYVrZMRbfW+1l5YwXVDKohDJNQxkQ==} @@ -2346,25 +2345,25 @@ packages: randombytes@2.1.0: resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==} - react-dom@19.0.0-rc-eb3ad065-20240822: - resolution: {integrity: sha512-PkEZhqpGHRKgX6+pbh/TA/P00evzbekvVgHYdZATzq5Alt0pO+v9VQeoJiVJUCmx6hfX3/7J9Q6d3X11Dv9X0w==} + react-dom@19.0.0: + resolution: {integrity: sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==} peerDependencies: - react: 19.0.0-rc-eb3ad065-20240822 + react: ^19.0.0 react-refresh@0.14.2: resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==} engines: {node: '>=0.10.0'} - react-server-dom-webpack@19.0.0-rc-eb3ad065-20240822: - resolution: {integrity: sha512-rZ5J9foRb3MosZSJpaC4OYH3jSyGJ3ujTdpax9hMT27Ay1mShH+qZCI3FBhe3kTMZlk/ntoOI9dejFL1mh+Yog==} + react-server-dom-webpack@19.0.0: + resolution: {integrity: sha512-hLug9KEXLc8vnU9lDNe2b2rKKDaqrp5gNiES4uyu2Up3FZfZJZmdwLFXlWzdA9gTB/6/cWduSB2K1Lfag2pSvw==} engines: {node: '>=0.10.0'} peerDependencies: - react: 19.0.0-rc-eb3ad065-20240822 - react-dom: 19.0.0-rc-eb3ad065-20240822 + react: ^19.0.0 + react-dom: ^19.0.0 webpack: ^5.59.0 - react@19.0.0-rc-eb3ad065-20240822: - resolution: {integrity: sha512-513yEft7EGkntyU77wVBDXtUaEBVCaegbqBuNP4YfsDjvIgNrbVpJVW3JoSdfEpXPWaqlS89ALb3mRmJpDYbUQ==} + react@19.0.0: + resolution: {integrity: sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==} engines: {node: '>=0.10.0'} readdirp@3.6.0: @@ -2416,8 +2415,8 @@ packages: safe-buffer@5.2.1: resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==} - scheduler@0.25.0-rc-eb3ad065-20240822: - resolution: {integrity: sha512-9hA+IyqsTvVrALciz4PEG5z4PecftOsp+JEMLqkywELxVD+7H73pO/Ig9BI0pDCcq+d6uyaYWo5Kbnv3J37nXg==} + scheduler@0.25.0: + resolution: {integrity: sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==} schema-utils@3.3.0: resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==} @@ -3730,15 +3729,12 @@ snapshots: dependencies: undici-types: 5.26.5 - '@types/prop-types@15.7.12': {} - - '@types/react-dom@18.3.0': + '@types/react-dom@19.0.2(@types/react@19.0.1)': dependencies: - '@types/react': 18.3.10 + '@types/react': 19.0.1 - '@types/react@18.3.10': + '@types/react@19.0.1': dependencies: - '@types/prop-types': 15.7.12 csstype: 3.1.3 '@types/ws@8.5.12': @@ -4884,23 +4880,23 @@ snapshots: dependencies: safe-buffer: 5.2.1 - react-dom@19.0.0-rc-eb3ad065-20240822(react@19.0.0-rc-eb3ad065-20240822): + react-dom@19.0.0(react@19.0.0): dependencies: - react: 19.0.0-rc-eb3ad065-20240822 - scheduler: 0.25.0-rc-eb3ad065-20240822 + react: 19.0.0 + scheduler: 0.25.0 react-refresh@0.14.2: {} - react-server-dom-webpack@19.0.0-rc-eb3ad065-20240822(react-dom@19.0.0-rc-eb3ad065-20240822(react@19.0.0-rc-eb3ad065-20240822))(react@19.0.0-rc-eb3ad065-20240822)(webpack@5.93.0(esbuild@0.23.0)): + react-server-dom-webpack@19.0.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(webpack@5.93.0(esbuild@0.23.0)): dependencies: acorn-loose: 8.4.0 neo-async: 2.6.2 - react: 19.0.0-rc-eb3ad065-20240822 - react-dom: 19.0.0-rc-eb3ad065-20240822(react@19.0.0-rc-eb3ad065-20240822) + react: 19.0.0 + react-dom: 19.0.0(react@19.0.0) webpack: 5.93.0(esbuild@0.23.0) webpack-sources: 3.2.3 - react@19.0.0-rc-eb3ad065-20240822: {} + react@19.0.0: {} readdirp@3.6.0: dependencies: @@ -4984,7 +4980,7 @@ snapshots: safe-buffer@5.2.1: {} - scheduler@0.25.0-rc-eb3ad065-20240822: {} + scheduler@0.25.0: {} schema-utils@3.3.0: dependencies: From c743266163191e190d0272919e0f36f24ecc742b Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Tue, 10 Dec 2024 10:45:21 +0900 Subject: [PATCH 2/3] chore: fix types --- examples/react-server/src/entry-browser.tsx | 2 +- examples/react-server/src/entry-ssr.tsx | 3 +-- examples/react-server/src/features/router/client.tsx | 6 +++--- examples/react-server/src/types/index.ts | 3 ++- examples/react-server/src/types/react-modules.d.ts | 4 ++-- examples/react-server/src/types/react.ts | 10 ---------- 6 files changed, 9 insertions(+), 19 deletions(-) diff --git a/examples/react-server/src/entry-browser.tsx b/examples/react-server/src/entry-browser.tsx index 89bc54a6..b3656c16 100644 --- a/examples/react-server/src/entry-browser.tsx +++ b/examples/react-server/src/entry-browser.tsx @@ -85,7 +85,7 @@ async function main() { ReactDOMClient.createRoot(document).render(reactRootEl); } else { // TODO: can we avoid await? (separate script stream?) - const formState = (await initialStreamData).actionResult; + const formState = (await initialStreamData).actionResult as any; React.startTransition(() => { ReactDOMClient.hydrateRoot(document, reactRootEl, { formState, diff --git a/examples/react-server/src/entry-ssr.tsx b/examples/react-server/src/entry-ssr.tsx index 002aa6d4..7e537ac8 100644 --- a/examples/react-server/src/entry-ssr.tsx +++ b/examples/react-server/src/entry-ssr.tsx @@ -31,9 +31,8 @@ async function renderHtml(request: Request, result: ReactServerHandlerResult) { const rscPromise = ReactClient.createFromReadableStream( rscStream1, { - ssrManifest: { + serverConsumerManifest: { moduleMap: createModuleMap(), - moduleLoading: null, }, }, ); diff --git a/examples/react-server/src/features/router/client.tsx b/examples/react-server/src/features/router/client.tsx index 99d9bc4d..5dca39a5 100644 --- a/examples/react-server/src/features/router/client.tsx +++ b/examples/react-server/src/features/router/client.tsx @@ -6,9 +6,9 @@ export function Link({ activeProps, pendingProps, ...props -}: JSX.IntrinsicElements["a"] & { - activeProps?: JSX.IntrinsicElements["a"]; - pendingProps?: JSX.IntrinsicElements["a"]; +}: React.JSX.IntrinsicElements["a"] & { + activeProps?: React.JSX.IntrinsicElements["a"]; + pendingProps?: React.JSX.IntrinsicElements["a"]; }) { const { isPending, pathname } = useRouter(); diff --git a/examples/react-server/src/types/index.ts b/examples/react-server/src/types/index.ts index a3ccc3d8..687cfc6a 100644 --- a/examples/react-server/src/types/index.ts +++ b/examples/react-server/src/types/index.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; diff --git a/examples/react-server/src/types/react-modules.d.ts b/examples/react-server/src/types/react-modules.d.ts index 7a8ce660..c73ab9d1 100644 --- a/examples/react-server/src/types/react-modules.d.ts +++ b/examples/react-server/src/types/react-modules.d.ts @@ -35,7 +35,7 @@ declare module "react-server-dom-webpack/server.edge" { actionResult: unknown, body: FormData, serverManifest?: unknown, - ): Promise; + ): Promise; } // https://github.com/facebook/react/blob/89021fb4ec9aa82194b0788566e736a4cedfc0e4/packages/react-server-dom-webpack/src/ReactFlightDOMClientEdge.js @@ -48,7 +48,7 @@ declare module "react-server-dom-webpack/client.edge" { export function createFromReadableStream( stream: ReadableStream, options: { - ssrManifest: import(".").SsrManifest; + serverConsumerManifest: import(".").SsrManifest; }, ): Promise; } diff --git a/examples/react-server/src/types/react.ts b/examples/react-server/src/types/react.ts index 99b32fd6..09449eed 100644 --- a/examples/react-server/src/types/react.ts +++ b/examples/react-server/src/types/react.ts @@ -6,13 +6,3 @@ declare module "react-dom/server" { formState: unknown; } } - -declare module "react-dom/client" { - interface HydrationOptions { - formState: unknown; - } - - interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_CREATE_ROOT_CONTAINERS { - Document: Document; - } -} From 94b002d63dc4354b417b7d6a7347131a74e6b247 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Tue, 10 Dec 2024 10:53:16 +0900 Subject: [PATCH 3/3] fix: one more ssrManifest --- examples/child-process/src/entry-ssr.tsx | 2 +- examples/react-server/src/types/index.ts | 2 +- examples/react-server/src/types/react-modules.d.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/child-process/src/entry-ssr.tsx b/examples/child-process/src/entry-ssr.tsx index 30a4dbbc..db0378ad 100644 --- a/examples/child-process/src/entry-ssr.tsx +++ b/examples/child-process/src/entry-ssr.tsx @@ -26,7 +26,7 @@ export default async function handler(request: Request): Promise { const rscPromise = ReactClient.createFromReadableStream( rscStream1, { - ssrManifest: {}, + serverConsumerManifest: {}, }, ); diff --git a/examples/react-server/src/types/index.ts b/examples/react-server/src/types/index.ts index 687cfc6a..6c62835b 100644 --- a/examples/react-server/src/types/index.ts +++ b/examples/react-server/src/types/index.ts @@ -20,7 +20,7 @@ export type ModuleMap = { }; }; -export interface SsrManifest { +export interface ServerConsumerManifest { moduleMap: ModuleMap; // TODO serverModuleMap?: unknown; diff --git a/examples/react-server/src/types/react-modules.d.ts b/examples/react-server/src/types/react-modules.d.ts index c73ab9d1..6035a63a 100644 --- a/examples/react-server/src/types/react-modules.d.ts +++ b/examples/react-server/src/types/react-modules.d.ts @@ -48,7 +48,7 @@ declare module "react-server-dom-webpack/client.edge" { export function createFromReadableStream( stream: ReadableStream, options: { - serverConsumerManifest: import(".").SsrManifest; + serverConsumerManifest: import(".").ServerConsumerManifest; }, ): Promise; }