Switch from React canary back to experimental

This is mostly in preparation for adding PPR (`prerender`/`resume`).
unstubbable · Apr 9, 2024 · 3c81b56 · 3c81b56
1 parent b24dda1
commit 3c81b56
Show file tree

Hide file tree

Showing 10 changed files with 203 additions and 220 deletions.
diff --git a/apps/aws-app/package.json b/apps/aws-app/package.json
@@ -18,16 +18,16 @@
   "dependencies": {
     "@mfng/core": "*",
     "@mfng/shared-app": "*",
-    "react": "18.3.0-canary-2f8f77602-20240229",
-    "react-dom": "18.3.0-canary-2f8f77602-20240229"
+    "react": "0.0.0-experimental-e3ebcd54b-20240405",
+    "react-dom": "0.0.0-experimental-e3ebcd54b-20240405"
   },
   "devDependencies": {
     "@hono/node-server": "^1.8.2",
     "@mfng/webpack-rsc": "*",
     "@swc/core": "^1.3.22",
     "@types/aws-lambda": "^8.10.136",
-    "@types/react": "^18.2.61",
-    "@types/react-dom": "^18.2.19",
+    "@types/react": "^18.2.75",
+    "@types/react-dom": "^18.2.24",
     "autoprefixer": "^10.4.14",
     "aws-cdk": "^2.132.1",
     "aws-cdk-lib": "^2.132.1",

diff --git a/apps/cloudflare-app/package.json b/apps/cloudflare-app/package.json
@@ -18,8 +18,8 @@
   "dependencies": {
     "@mfng/core": "*",
     "@mfng/shared-app": "*",
-    "react": "18.3.0-canary-2f8f77602-20240229",
-    "react-dom": "18.3.0-canary-2f8f77602-20240229"
+    "react": "0.0.0-experimental-e3ebcd54b-20240405",
+    "react-dom": "0.0.0-experimental-e3ebcd54b-20240405"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20240222.0",
@@ -28,8 +28,8 @@
     "@swc/core": "^1.3.22",
     "@swc/jest": "^0.2.24",
     "@types/jest": "^29.4.0",
-    "@types/react": "^18.2.61",
-    "@types/react-dom": "^18.2.19",
+    "@types/react": "^18.2.75",
+    "@types/react-dom": "^18.2.24",
     "autoprefixer": "^10.4.14",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.3",
@@ -38,7 +38,7 @@
     "mini-css-extract-plugin": "^2.7.5",
     "postcss": "^8.4.21",
     "postcss-loader": "^7.0.2",
-    "react-server-dom-webpack": "18.3.0-canary-2f8f77602-20240229",
+    "react-server-dom-webpack": "0.0.0-experimental-e3ebcd54b-20240405",
     "resolve-typescript-plugin": "^2.0.0",
     "source-map-loader": "^4.0.1",
     "swc-loader": "^0.2.3",

diff --git a/apps/shared-app/package.json b/apps/shared-app/package.json
@@ -26,15 +26,15 @@
     "clsx": "^1.2.1",
     "countries-list": "^2.6.1",
     "fuse.js": "^6.6.2",
-    "react": "18.3.0-canary-2f8f77602-20240229",
-    "react-dom": "18.3.0-canary-2f8f77602-20240229",
+    "react": "0.0.0-experimental-e3ebcd54b-20240405",
+    "react-dom": "0.0.0-experimental-e3ebcd54b-20240405",
     "react-markdown": "^8.0.5",
     "server-only": "^0.0.1",
     "zod": "^3.21.4"
   },
   "devDependencies": {
-    "@types/react": "^18.2.61",
-    "@types/react-dom": "^18.2.19",
+    "@types/react": "^18.2.75",
+    "@types/react-dom": "^18.2.24",
     "tailwindcss": "^3.2.7"
   }
 }
diff --git a/apps/shared-app/src/client/button.tsx b/apps/shared-app/src/client/button.tsx
@@ -1,18 +1,17 @@
 'use client';
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {trackClick} from '../server/track-click.js';
 
-export type ButtonProps = React.PropsWithChildren<{}>;
-
-export function Button({children}: ButtonProps): React.ReactNode {
-  const {pending} = ReactDOM.useFormStatus();
+export type ButtonProps = React.PropsWithChildren<{
+  readonly disabled?: boolean;
+}>;
 
+export function Button({children, disabled}: ButtonProps): React.ReactNode {
   return (
     <button
       onClick={() => void trackClick()}
-      disabled={pending}
+      disabled={disabled}
       className="rounded-full bg-cyan-500 py-1 px-4 text-white disabled:bg-zinc-300"
     >
       {children}

diff --git a/apps/shared-app/src/client/product.tsx b/apps/shared-app/src/client/product.tsx
@@ -2,7 +2,6 @@
 
 import {clsx} from 'clsx';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import type {BuyResult} from '../server/buy.js';
 import {Notification} from '../shared/notification.js';
 import {Button} from './button.js';
@@ -15,7 +14,7 @@ export interface ProductProps {
 }
 
 export function Product({buy}: ProductProps): React.ReactNode {
-  const [result, formAction] = ReactDOM.useFormState(buy, undefined);
+  const [result, formAction, isPending] = React.useActionState(buy, undefined);
 
   return (
     <form action={formAction}>
@@ -44,7 +43,7 @@ export function Product({buy}: ProductProps): React.ReactNode {
         )}
       />
       {` `}
-      <Button>Buy now</Button>
+      <Button disabled={isPending}>Buy now</Button>
       {result && (
         <Notification status={result.status}>
           {result.status === `success` ? (

diff --git a/apps/vercel-app/package.json b/apps/vercel-app/package.json
@@ -22,16 +22,16 @@
     "@mfng/core": "*",
     "@mfng/shared-app": "*",
     "@vercel/analytics": "^0.1.11",
-    "react": "18.3.0-canary-2f8f77602-20240229",
-    "react-dom": "18.3.0-canary-2f8f77602-20240229",
+    "react": "0.0.0-experimental-e3ebcd54b-20240405",
+    "react-dom": "0.0.0-experimental-e3ebcd54b-20240405",
     "web-vitals": "^3.3.1"
   },
   "devDependencies": {
     "@hono/node-server": "^1.8.2",
     "@mfng/webpack-rsc": "*",
     "@swc/core": "^1.3.22",
-    "@types/react": "^18.2.61",
-    "@types/react-dom": "^18.2.19",
+    "@types/react": "^18.2.75",
+    "@types/react-dom": "^18.2.24",
     "autoprefixer": "^10.4.14",
     "chokidar": "^3.6.0",
     "copy-webpack-plugin": "^11.0.0",