Update React from d900fadbf to 09fbee89d. Removes server context and …

…experimental prefix for server action APIs (#56809) The latest React canary builds have a few changes that need to be adopted for compatability. 1. the `useFormState` and `useFormStatus` hooks in `react-dom` and the `formData` opiont in `react-dom/server` are no longer prefixed with `experimental_` 2. server content (an undocumented React feature) has been removed. Next only had trivial intenral use of this API and did not expose a coherent feature to Next users (no ability to seed context on refetches). It is still possible that some users used the React server context APIs which is why this should go into Next 14. ### React upstream changes - facebook/react#27513 - facebook/react#27514 - facebook/react#27511 - facebook/react#27508 - facebook/react#27502 - facebook/react#27474 - facebook/react#26789 - facebook/react#27500 - facebook/react#27488 - facebook/react#27458 - facebook/react#27471 - facebook/react#27470 - facebook/react#27464 - facebook/react#27456 - facebook/react#27462 - facebook/react#27461 - facebook/react#27460 - facebook/react#27459 - facebook/react#27454 - facebook/react#27457 - facebook/react#27453 - facebook/react#27401 - facebook/react#27443 - facebook/react#27445 - facebook/react#27364 - facebook/react#27440 - facebook/react#27436 --------- Co-authored-by: Zack Tanner <zacktanner@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Jiachi Liu <inbox@huozhi.im>
vercel · Oct 16, 2023 · 0a80017 · 0a80017
1 parent 26d0bf2
commit 0a80017
Show file tree

Hide file tree

Showing 134 changed files with 12,013 additions and 7,403 deletions.
diff --git a/...02-app/01-building-your-application/02-data-fetching/03-forms-and-mutations.mdx b/...02-app/01-building-your-application/02-data-fetching/03-forms-and-mutations.mdx
@@ -377,7 +377,7 @@ For example, the following submit button:
 ```tsx filename="app/submit-button.tsx" switcher
 'use client'
 
-import { experimental_useFormStatus as useFormStatus } from 'react-dom'
+import { useFormStatus } from 'react-dom'
 
 export function SubmitButton() {
   const { pending } = useFormStatus()
@@ -393,7 +393,7 @@ export function SubmitButton() {
 ```jsx filename="app/submit-button.jsx" switcher
 'use client'
 
-import { experimental_useFormStatus as useFormStatus } from 'react-dom'
+import { useFormStatus } from 'react-dom'
 
 export function SubmitButton() {
   const { pending } = useFormStatus()
@@ -557,8 +557,7 @@ Then, from a Client Component, you can read this value and display an error mess
 ```tsx filename="app/add-form.tsx" switcher
 'use client'
 
-import { experimental_useFormState as useFormState } from 'react-dom'
-import { experimental_useFormStatus as useFormStatus } from 'react-dom'
+import { useFormState, useFormStatus } from 'react-dom'
 import { createTodo } from '@/app/actions'
 
 const initialState = {
@@ -594,8 +593,7 @@ export function AddForm() {
 ```jsx filename="app/add-form.jsx" switcher
 'use client'
 
-import { experimental_useFormState as useFormState } from 'react-dom'
-import { experimental_useFormStatus as useFormStatus } from 'react-dom'
+import { useFormState, useFormStatus } from 'react-dom'
 import { createTodo } from '@/app/actions'
 
 const initialState = {

diff --git a/examples/next-forms/app/add-form.tsx b/examples/next-forms/app/add-form.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { experimental_useFormState as useFormState } from 'react-dom'
-import { experimental_useFormStatus as useFormStatus } from 'react-dom'
+import { useFormStatus } from 'react-dom'
 import { createTodo } from '@/app/actions'
 
 const initialState = {

diff --git a/examples/next-forms/app/delete-form.tsx b/examples/next-forms/app/delete-form.tsx
@@ -1,7 +1,6 @@
 'use client'
 
-import { experimental_useFormState as useFormState } from 'react-dom'
-import { experimental_useFormStatus as useFormStatus } from 'react-dom'
+import { useFormState, useFormStatus } from 'react-dom'
 import { deleteTodo } from '@/app/actions'
 
 const initialState = {

diff --git a/examples/with-fauna/components/EntryForm.tsx b/examples/with-fauna/components/EntryForm.tsx
@@ -3,8 +3,7 @@
 import cn from 'classnames'
 import { createEntryAction } from '@/actions/entry'
 // @ts-ignore
-import { experimental_useFormState as useFormState } from 'react-dom'
-import { experimental_useFormStatus as useFormStatus } from 'react-dom'
+import { useFormState, useFormStatus } from 'react-dom'
 import LoadingSpinner from '@/components/LoadingSpinner'
 import SuccessMessage from '@/components/SuccessMessage'
 import ErrorMessage from '@/components/ErrorMessage'
@@ -26,7 +25,7 @@ export default function EntryForm() {
 
   return (
     <>
-      <form className="flex relative my-4" action={formAction}>
+      <form className="relative flex my-4" action={formAction}>
         <input
           required
           className={cn(inputClasses, 'w-1/3 mr-2 px-4')}

diff --git a/package.json b/package.json
@@ -100,8 +100,8 @@
     "@types/jest": "27.4.1",
     "@types/node": "20.2.5",
     "@types/node-fetch": "2.6.1",
-    "@types/react": "18.2.8",
-    "@types/react-dom": "18.2.4",
+    "@types/react": "18.2.28",
+    "@types/react-dom": "18.2.13",
     "@types/relay-runtime": "14.1.13",
     "@types/selenium-webdriver": "4.0.15",
     "@types/sharp": "0.29.3",
@@ -193,16 +193,16 @@
     "random-seed": "0.3.0",
     "react": "18.2.0",
     "react-17": "npm:react@17.0.2",
-    "react-builtin": "npm:react@18.3.0-canary-d900fadbf-20230929",
+    "react-builtin": "npm:react@18.3.0-canary-09fbee89d-20231013",
     "react-dom": "18.2.0",
     "react-dom-17": "npm:react-dom@17.0.2",
-    "react-dom-builtin": "npm:react-dom@18.3.0-canary-d900fadbf-20230929",
-    "react-dom-experimental-builtin": "npm:react-dom@0.0.0-experimental-d900fadbf-20230929",
-    "react-experimental-builtin": "npm:react@0.0.0-experimental-d900fadbf-20230929",
-    "react-server-dom-turbopack": "18.3.0-canary-d900fadbf-20230929",
-    "react-server-dom-turbopack-experimental": "npm:react-server-dom-turbopack@0.0.0-experimental-d900fadbf-20230929",
-    "react-server-dom-webpack": "18.3.0-canary-d900fadbf-20230929",
-    "react-server-dom-webpack-experimental": "npm:react-server-dom-webpack@0.0.0-experimental-d900fadbf-20230929",
+    "react-dom-builtin": "npm:react-dom@18.3.0-canary-09fbee89d-20231013",
+    "react-dom-experimental-builtin": "npm:react-dom@0.0.0-experimental-09fbee89d-20231013",
+    "react-experimental-builtin": "npm:react@0.0.0-experimental-09fbee89d-20231013",
+    "react-server-dom-turbopack": "18.3.0-canary-09fbee89d-20231013",
+    "react-server-dom-turbopack-experimental": "npm:react-server-dom-turbopack@0.0.0-experimental-09fbee89d-20231013",
+    "react-server-dom-webpack": "18.3.0-canary-09fbee89d-20231013",
+    "react-server-dom-webpack-experimental": "npm:react-server-dom-webpack@0.0.0-experimental-09fbee89d-20231013",
     "react-ssr-prepass": "1.0.8",
     "react-virtualized": "9.22.3",
     "relay-compiler": "13.0.2",
@@ -212,8 +212,8 @@
     "resolve-from": "5.0.0",
     "sass": "1.54.0",
     "satori": "0.10.6",
-    "scheduler-builtin": "npm:scheduler@0.24.0-canary-d900fadbf-20230929",
-    "scheduler-experimental-builtin": "npm:scheduler@0.0.0-experimental-d900fadbf-20230929",
+    "scheduler-builtin": "npm:scheduler@0.24.0-canary-09fbee89d-20231013",
+    "scheduler-experimental-builtin": "npm:scheduler@0.0.0-experimental-09fbee89d-20231013",
     "seedrandom": "3.0.5",
     "selenium-webdriver": "4.0.0-beta.4",
     "semver": "7.3.7",
@@ -245,8 +245,8 @@
     "@babel/parser": "7.18.0",
     "@babel/types": "7.18.0",
     "@babel/traverse": "7.18.0",
-    "@types/react": "18.2.7",
-    "@types/react-dom": "18.2.4"
+    "@types/react": "18.2.28",
+    "@types/react-dom": "18.2.13"
   },
   "engines": {
     "node": ">=18.18.2",

diff --git a/packages/next-swc/crates/core/src/react_server_components.rs b/packages/next-swc/crates/core/src/react_server_components.rs
@@ -612,8 +612,8 @@ pub fn server_components<C: Comments>(
             JsWord::from("findDOMNode"),
             JsWord::from("flushSync"),
             JsWord::from("unstable_batchedUpdates"),
-            JsWord::from("experimental_useFormStatus"),
-            JsWord::from("experimental_useFormState"),
+            JsWord::from("useFormStatus"),
+            JsWord::from("useFormState"),
         ],
         invalid_server_react_apis: vec![
             JsWord::from("Component"),

diff --git a/...-swc/crates/core/tests/errors/react-server-components/server-graph/react-dom-api/input.js b/...-swc/crates/core/tests/errors/react-server-components/server-graph/react-dom-api/input.js
@@ -1,9 +1,6 @@
 import { findDOMNode, flushSync, unstable_batchedUpdates } from 'react-dom'
 
-import {
-  experimental_useFormStatus,
-  experimental_useFormState,
-} from 'react-dom'
+import { useFormStatus, useFormState } from 'react-dom'
 
 export default function () {
   return null

diff --git a/...swc/crates/core/tests/errors/react-server-components/server-graph/react-dom-api/output.js b/...swc/crates/core/tests/errors/react-server-components/server-graph/react-dom-api/output.js
@@ -1,5 +1,5 @@
 import { findDOMNode, flushSync, unstable_batchedUpdates } from 'react-dom';
-import { experimental_useFormStatus, experimental_useFormState } from 'react-dom';
+import { useFormStatus, useFormState } from 'react-dom';
 export default function() {
     return null;
 }
diff --git a/...crates/core/tests/errors/react-server-components/server-graph/react-dom-api/output.stderr b/...crates/core/tests/errors/react-server-components/server-graph/react-dom-api/output.stderr
@@ -17,18 +17,18 @@
    :                                  ^^^^^^^^^^^^^^^^^^^^^^^
    `----
 
-  x NEXT_RSC_ERR_REACT_API: experimental_useFormStatus
+  x NEXT_RSC_ERR_REACT_API: useFormStatus
    ,-[input.js:3:1]
  3 | import {
- 4 |   experimental_useFormStatus,
+ 4 |   useFormStatus,
    :   ^^^^^^^^^^^^^^^^^^^^^^^^^^
- 5 |   experimental_useFormState,
+ 5 |   useFormState,
    `----
 
-  x NEXT_RSC_ERR_REACT_API: experimental_useFormState
+  x NEXT_RSC_ERR_REACT_API: useFormState
    ,-[input.js:4:1]
- 4 |   experimental_useFormStatus,
- 5 |   experimental_useFormState,
+ 4 |   useFormStatus,
+ 5 |   useFormState,
    :   ^^^^^^^^^^^^^^^^^^^^^^^^^
  6 | } from 'react-dom'
    `----
diff --git a/.../core/tests/fixture/react-server-components/server-graph-no-checks/react-dom-api/input.js b/.../core/tests/fixture/react-server-components/server-graph-no-checks/react-dom-api/input.js
@@ -1,9 +1,6 @@
 import { findDOMNode, flushSync, unstable_batchedUpdates } from 'react-dom'
 
-import {
-  experimental_useFormStatus,
-  experimental_useFormState,
-} from 'react-dom'
+import { useFormStatus, useFormState } from 'react-dom'
 
 export default function () {
   return null

diff --git a/...core/tests/fixture/react-server-components/server-graph-no-checks/react-dom-api/output.js b/...core/tests/fixture/react-server-components/server-graph-no-checks/react-dom-api/output.js
@@ -1,5 +1,5 @@
 import { findDOMNode, flushSync, unstable_batchedUpdates } from 'react-dom';
-import { experimental_useFormStatus, experimental_useFormState } from 'react-dom';
+import { useFormStatus, useFormState } from 'react-dom';
 
 export default function() {
     return null;

diff --git a/packages/next/src/client/app-index.tsx b/packages/next/src/client/app-index.tsx
@@ -299,7 +299,7 @@ export function hydrate() {
     React.startTransition(() =>
       (ReactDOMClient as any).hydrateRoot(appElement, reactEl, {
         ...options,
-        experimental_formState: initialFormStateData,
+        formState: initialFormStateData,
       })
     )
   }