From 9c7df485b10195c1691d8ca868bceb6cced11078 Mon Sep 17 00:00:00 2001 From: Andrew Clark Date: Wed, 4 Oct 2023 14:28:20 -0400 Subject: [PATCH] Upgrade Server Actions to canary Upgrades the stability of Server Actions from experimental to canary. - Turns on enableAsyncActions and enableFormActions - Removes "experimental_" prefix from useOptimistic, useFormStatus, and useFormState --- fixtures/flight-esm/src/Button.js | 2 +- fixtures/flight-esm/src/Form.js | 2 +- fixtures/flight/src/Button.js | 2 +- fixtures/flight/src/Counter.js | 2 +- fixtures/flight/src/Form.js | 2 +- packages/react-dom/index.classic.fb.js | 4 ++-- packages/react-dom/index.experimental.js | 4 ++-- packages/react-dom/index.js | 4 ++-- packages/react-dom/index.modern.fb.js | 4 ++-- packages/react-dom/server-rendering-stub.js | 4 ++-- packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js | 6 +++--- packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js | 2 +- packages/react-dom/src/__tests__/ReactDOMForm-test.js | 4 ++-- .../src/__tests__/react-dom-server-rendering-stub-test.js | 4 ++-- .../react-dom/src/server/ReactDOMServerRenderingStub.js | 4 ++-- .../src/__tests__/ReactAsyncActions-test.js | 2 +- .../src/__tests__/ReactFlightDOMForm-test.js | 2 +- packages/react/index.classic.fb.js | 2 +- packages/react/index.experimental.js | 2 +- packages/react/index.js | 2 +- packages/react/index.modern.fb.js | 2 +- packages/react/src/React.js | 2 +- packages/shared/ReactFeatureFlags.js | 6 ++---- packages/shared/forks/ReactFeatureFlags.test-renderer.js | 2 +- .../shared/forks/ReactFeatureFlags.test-renderer.native.js | 2 +- .../shared/forks/ReactFeatureFlags.test-renderer.www.js | 2 +- 26 files changed, 37 insertions(+), 39 deletions(-) diff --git a/fixtures/flight-esm/src/Button.js b/fixtures/flight-esm/src/Button.js index 90171e8e84eee..3c8816e2a2ee5 100644 --- a/fixtures/flight-esm/src/Button.js +++ b/fixtures/flight-esm/src/Button.js @@ -1,7 +1,7 @@ 'use client'; import * as React from 'react'; -import {experimental_useFormStatus as useFormStatus} from 'react-dom'; +import {useFormStatus} from 'react-dom'; import ErrorBoundary from './ErrorBoundary.js'; const h = React.createElement; diff --git a/fixtures/flight-esm/src/Form.js b/fixtures/flight-esm/src/Form.js index 75f874d6e9994..6e6ace9f8a7f5 100644 --- a/fixtures/flight-esm/src/Form.js +++ b/fixtures/flight-esm/src/Form.js @@ -1,7 +1,7 @@ 'use client'; import * as React from 'react'; -import {experimental_useFormStatus as useFormStatus} from 'react-dom'; +import {useFormStatus} from 'react-dom'; import ErrorBoundary from './ErrorBoundary.js'; const h = React.createElement; diff --git a/fixtures/flight/src/Button.js b/fixtures/flight/src/Button.js index 999c84f580c42..e62e40c716c2e 100644 --- a/fixtures/flight/src/Button.js +++ b/fixtures/flight/src/Button.js @@ -1,7 +1,7 @@ 'use client'; import * as React from 'react'; -import {experimental_useFormStatus as useFormStatus} from 'react-dom'; +import {useFormStatus} from 'react-dom'; import ErrorBoundary from './ErrorBoundary.js'; function ButtonDisabledWhilePending({action, children}) { diff --git a/fixtures/flight/src/Counter.js b/fixtures/flight/src/Counter.js index 5af74369a1eb8..f89840de69da6 100644 --- a/fixtures/flight/src/Counter.js +++ b/fixtures/flight/src/Counter.js @@ -1,7 +1,7 @@ 'use client'; import * as React from 'react'; -import {experimental_useFormState as useFormState} from 'react-dom'; +import {useFormState} from 'react-dom'; import Container from './Container.js'; diff --git a/fixtures/flight/src/Form.js b/fixtures/flight/src/Form.js index d98452c68304a..8bb06362d560c 100644 --- a/fixtures/flight/src/Form.js +++ b/fixtures/flight/src/Form.js @@ -1,7 +1,7 @@ 'use client'; import * as React from 'react'; -import {experimental_useFormStatus as useFormStatus} from 'react-dom'; +import {useFormStatus} from 'react-dom'; import ErrorBoundary from './ErrorBoundary.js'; function Status() { diff --git a/packages/react-dom/index.classic.fb.js b/packages/react-dom/index.classic.fb.js index 4a8521810551b..d8814243b690d 100644 --- a/packages/react-dom/index.classic.fb.js +++ b/packages/react-dom/index.classic.fb.js @@ -31,8 +31,8 @@ export { unstable_createEventHandle, unstable_renderSubtreeIntoContainer, unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority. - useFormStatus as experimental_useFormStatus, - useFormState as experimental_useFormState, + useFormStatus, + useFormState, prefetchDNS, preconnect, preload, diff --git a/packages/react-dom/index.experimental.js b/packages/react-dom/index.experimental.js index 39151bc1bfcf8..c21671c8306ee 100644 --- a/packages/react-dom/index.experimental.js +++ b/packages/react-dom/index.experimental.js @@ -20,8 +20,8 @@ export { unstable_batchedUpdates, unstable_renderSubtreeIntoContainer, unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority. - useFormStatus as experimental_useFormStatus, - useFormState as experimental_useFormState, + useFormStatus, + useFormState, prefetchDNS, preconnect, preload, diff --git a/packages/react-dom/index.js b/packages/react-dom/index.js index 7d9dff6b469c5..4db349ea5bf0d 100644 --- a/packages/react-dom/index.js +++ b/packages/react-dom/index.js @@ -23,8 +23,8 @@ export { unstable_createEventHandle, unstable_renderSubtreeIntoContainer, unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority. - useFormStatus as experimental_useFormStatus, - useFormState as experimental_useFormState, + useFormStatus, + useFormState, prefetchDNS, preconnect, preload, diff --git a/packages/react-dom/index.modern.fb.js b/packages/react-dom/index.modern.fb.js index c1548b73036c3..531f4d429b611 100644 --- a/packages/react-dom/index.modern.fb.js +++ b/packages/react-dom/index.modern.fb.js @@ -16,8 +16,8 @@ export { unstable_batchedUpdates, unstable_createEventHandle, unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority. - useFormStatus as experimental_useFormStatus, - useFormState as experimental_useFormState, + useFormStatus, + useFormState, prefetchDNS, preconnect, preload, diff --git a/packages/react-dom/server-rendering-stub.js b/packages/react-dom/server-rendering-stub.js index ef9f14d78230e..bb6dbd1813ac6 100644 --- a/packages/react-dom/server-rendering-stub.js +++ b/packages/react-dom/server-rendering-stub.js @@ -24,7 +24,7 @@ export { preloadModule, preinit, preinitModule, - experimental_useFormStatus, - experimental_useFormState, + useFormStatus, + useFormState, unstable_batchedUpdates, } from './src/server/ReactDOMServerRenderingStub'; diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js index b9ffe6520c82a..3ffe834a16d5d 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js @@ -31,9 +31,9 @@ describe('ReactDOMFizzForm', () => { React = require('react'); ReactDOMServer = require('react-dom/server.browser'); ReactDOMClient = require('react-dom/client'); - useFormStatus = require('react-dom').experimental_useFormStatus; - useFormState = require('react-dom').experimental_useFormState; - useOptimistic = require('react').experimental_useOptimistic; + useFormStatus = require('react-dom').useFormState; + useFormState = require('react-dom').useFormState; + useOptimistic = require('react').useOptimistic; act = require('internal-test-utils').act; container = document.createElement('div'); document.body.appendChild(container); diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js index 2b9f3b156261b..a801be661f49c 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js @@ -89,7 +89,7 @@ describe('ReactDOMFizzServer', () => { if (gate(flags => flags.enableSuspenseList)) { SuspenseList = React.unstable_SuspenseList; } - useFormState = ReactDOM.experimental_useFormState; + useFormState = ReactDOM.useFormState; PropTypes = require('prop-types'); diff --git a/packages/react-dom/src/__tests__/ReactDOMForm-test.js b/packages/react-dom/src/__tests__/ReactDOMForm-test.js index 97cbf1aa622ff..90efc90cbd17b 100644 --- a/packages/react-dom/src/__tests__/ReactDOMForm-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMForm-test.js @@ -55,8 +55,8 @@ describe('ReactDOMForm', () => { useState = React.useState; Suspense = React.Suspense; startTransition = React.startTransition; - useFormStatus = ReactDOM.experimental_useFormStatus; - useFormState = ReactDOM.experimental_useFormState; + useFormStatus = ReactDOM.useFormStatus; + useFormState = ReactDOM.useFormState; container = document.createElement('div'); document.body.appendChild(container); diff --git a/packages/react-dom/src/__tests__/react-dom-server-rendering-stub-test.js b/packages/react-dom/src/__tests__/react-dom-server-rendering-stub-test.js index 315d87ed8599f..0f6b4efa34800 100644 --- a/packages/react-dom/src/__tests__/react-dom-server-rendering-stub-test.js +++ b/packages/react-dom/src/__tests__/react-dom-server-rendering-stub-test.js @@ -85,9 +85,9 @@ describe('react-dom-server-rendering-stub', () => { // @gate enableFormActions // @gate enableAsyncActions - it('exports experimental_useFormStatus', async () => { + it('exports useFormStatus', async () => { function App() { - const {pending} = ReactDOM.experimental_useFormStatus(); + const {pending} = ReactDOM.useFormStatus(); return 'Pending: ' + pending; } diff --git a/packages/react-dom/src/server/ReactDOMServerRenderingStub.js b/packages/react-dom/src/server/ReactDOMServerRenderingStub.js index 8adc9ade4aeb3..d3a7f33095fd6 100644 --- a/packages/react-dom/src/server/ReactDOMServerRenderingStub.js +++ b/packages/react-dom/src/server/ReactDOMServerRenderingStub.js @@ -16,8 +16,8 @@ export { prefetchDNS, } from '../shared/ReactDOMFloat'; export { - useFormStatus as experimental_useFormStatus, - useFormState as experimental_useFormState, + useFormStatus, + useFormState, } from 'react-dom-bindings/src/shared/ReactDOMFormActions'; export function createPortal() { diff --git a/packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js b/packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js index 2a36c4cb8c832..0bf859f188627 100644 --- a/packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js +++ b/packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js @@ -19,7 +19,7 @@ describe('ReactAsyncActions', () => { assertLog = require('internal-test-utils').assertLog; useTransition = React.useTransition; useState = React.useState; - useOptimistic = React.experimental_useOptimistic; + useOptimistic = React.useOptimistic; textCache = new Map(); }); diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js index 1ba0e100740f3..f179bc6acbb21 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js @@ -55,7 +55,7 @@ describe('ReactFlightDOMForm', () => { ReactDOMServer = require('react-dom/server.edge'); ReactDOMClient = require('react-dom/client'); act = require('react-dom/test-utils').act; - useFormState = require('react-dom').experimental_useFormState; + useFormState = require('react-dom').useFormState; container = document.createElement('div'); document.body.appendChild(container); }); diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js index 2d2c4ea8ff180..5ea1945956a82 100644 --- a/packages/react/index.classic.fb.js +++ b/packages/react/index.classic.fb.js @@ -52,7 +52,7 @@ export { useLayoutEffect, useInsertionEffect, useMemo, - experimental_useOptimistic, + useOptimistic, useReducer, useRef, useState, diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js index 081fa2746964b..f1092ff4a8778 100644 --- a/packages/react/index.experimental.js +++ b/packages/react/index.experimental.js @@ -50,7 +50,7 @@ export { useInsertionEffect, useLayoutEffect, useMemo, - experimental_useOptimistic, + useOptimistic, useReducer, useRef, useState, diff --git a/packages/react/index.js b/packages/react/index.js index fd2c377668c21..9ba3d9402c429 100644 --- a/packages/react/index.js +++ b/packages/react/index.js @@ -75,7 +75,7 @@ export { useInsertionEffect, useLayoutEffect, useMemo, - experimental_useOptimistic, + useOptimistic, useSyncExternalStore, useReducer, useRef, diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js index 2658db8acfc82..1ba7d1b42bc51 100644 --- a/packages/react/index.modern.fb.js +++ b/packages/react/index.modern.fb.js @@ -50,7 +50,7 @@ export { useInsertionEffect, useLayoutEffect, useMemo, - experimental_useOptimistic, + useOptimistic, useReducer, useRef, useState, diff --git a/packages/react/src/React.js b/packages/react/src/React.js index 9c0cda47a8de7..3e9a869623a3f 100644 --- a/packages/react/src/React.js +++ b/packages/react/src/React.js @@ -111,7 +111,7 @@ export { useInsertionEffect, useLayoutEffect, useMemo, - useOptimistic as experimental_useOptimistic, + useOptimistic, useSyncExternalStore, useReducer, useRef, diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index afb4331dffc15..5178f2c90ff7b 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -31,6 +31,8 @@ export const enableComponentStackLocations = true; // TODO: Finish rolling out in www export const enableClientRenderFallbackOnTextMismatch = true; +export const enableFormActions = true; +export const enableAsyncActions = true; // Not sure if www still uses this. We don't have a replacement but whatever we // replace it with will likely be different than what's already there, so we @@ -82,8 +84,6 @@ export const enableLegacyCache = __EXPERIMENTAL__; export const enableCacheElement = __EXPERIMENTAL__; export const enableFetchInstrumentation = true; -export const enableFormActions = __EXPERIMENTAL__; - export const enableBinaryFlight = __EXPERIMENTAL__; export const enableTaint = __EXPERIMENTAL__; @@ -120,8 +120,6 @@ export const enableUseEffectEventHook = __EXPERIMENTAL__; // (handled with an MutationObserver) instead of inline-scripts export const enableFizzExternalRuntime = true; -export const enableAsyncActions = __EXPERIMENTAL__; - export const alwaysThrottleRetries = true; export const useMicrotasksForSchedulingInFabric = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js index d3b4c1447d1a6..392c8cbb538b9 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js @@ -74,7 +74,7 @@ export const enableDO_NOT_USE_disableStrictPassiveEffect = false; export const enableFizzExternalRuntime = false; export const enableDeferRootSchedulingToMicrotask = true; -export const enableAsyncActions = false; +export const enableAsyncActions = true; export const alwaysThrottleRetries = true; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js index 0589932216538..b690f237b130b 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js @@ -71,7 +71,7 @@ export const useModernStrictMode = false; export const enableDO_NOT_USE_disableStrictPassiveEffect = false; export const enableDeferRootSchedulingToMicrotask = true; -export const enableAsyncActions = false; +export const enableAsyncActions = true; export const alwaysThrottleRetries = true; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js index 1ab428c9d2d3a..e426ade2df12a 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js @@ -74,7 +74,7 @@ export const enableDO_NOT_USE_disableStrictPassiveEffect = false; export const enableFizzExternalRuntime = false; export const enableDeferRootSchedulingToMicrotask = true; -export const enableAsyncActions = false; +export const enableAsyncActions = true; export const alwaysThrottleRetries = true;