From e7c5af45ceb8fa2b64d39ec68345254ce9abd65e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Sun, 23 Oct 2022 23:20:52 -0400 Subject: [PATCH] Update cache() and use() to the canary aka next channel (#25502) Testing what it would look like to move this to the `next` channel. --- ReactVersions.js | 8 +- fixtures/fizz-ssr-browser/index.html | 1 + fixtures/flight-browser/index.html | 7 +- fixtures/flight/src/index.js | 2 +- .../src/__tests__/ReactFlight-test.js | 2 +- packages/react-dom/index.classic.fb.js | 2 + packages/react-dom/index.experimental.js | 4 +- packages/react-dom/index.js | 2 + packages/react-dom/index.modern.fb.js | 2 + packages/react-dom/index.stable.js | 2 + .../server-rendering-stub.experimental.js | 22 --- packages/react-dom/server-rendering-stub.js | 2 + .../src/__tests__/ReactDOMFizzServer-test.js | 2 +- .../src/__tests__/ReactDOMFloat-test.js | 5 +- .../__tests__/ReactDOMInReactServer-test.js | 1 - .../__tests__/ReactWrongReturnPointer-test.js | 2 +- packages/react-dom/src/client/ReactDOM.js | 2 + .../src/server/ReactDOMServerRenderingStub.js | 2 + .../src/ReactFiberHooks.new.js | 15 +- .../src/ReactFiberHooks.old.js | 15 +- .../src/__tests__/ReactActWarnings-test.js | 4 +- .../src/__tests__/ReactCache-test.js | 95 ++++++------ .../ReactConcurrentErrorRecovery-test.js | 8 +- .../__tests__/ReactContextPropagation-test.js | 8 +- .../src/__tests__/ReactIsomorphicAct-test.js | 2 +- .../ReactSuspenseEffectsSemantics-test.js | 48 +++--- .../__tests__/ReactSuspenseFallback-test.js | 12 +- .../ReactSuspenseWithNoopRenderer-test.js | 146 +++++++++--------- .../src/__tests__/ReactThenable-test.js | 2 +- .../src/__tests__/ReactTransition-test.js | 16 +- .../react-server-dom-webpack/package.json | 6 +- .../src/__tests__/ReactFlightDOM-test.js | 2 +- .../__tests__/ReactFlightDOMBrowser-test.js | 2 +- packages/react/index.classic.fb.js | 4 +- packages/react/index.experimental.js | 4 +- packages/react/index.js | 4 +- packages/react/index.modern.fb.js | 4 +- packages/react/index.stable.js | 5 +- packages/react/src/React.js | 4 +- .../src/ReactSharedSubset.experimental.js | 4 +- packages/react/src/ReactSharedSubset.js | 32 +++- .../react/src/__tests__/ReactFetch-test.js | 7 +- packages/shared/ReactFeatureFlags.js | 13 +- .../forks/ReactFeatureFlags.native-fb.js | 9 +- .../forks/ReactFeatureFlags.native-oss.js | 9 +- .../forks/ReactFeatureFlags.test-renderer.js | 13 +- .../ReactFeatureFlags.test-renderer.native.js | 9 +- .../ReactFeatureFlags.test-renderer.www.js | 9 +- .../shared/forks/ReactFeatureFlags.testing.js | 9 +- .../forks/ReactFeatureFlags.testing.www.js | 9 +- .../shared/forks/ReactFeatureFlags.www.js | 5 +- 51 files changed, 325 insertions(+), 279 deletions(-) delete mode 100644 packages/react-dom/server-rendering-stub.experimental.js diff --git a/ReactVersions.js b/ReactVersions.js index e8dffe7dee1b1..26701175ec3de 100644 --- a/ReactVersions.js +++ b/ReactVersions.js @@ -30,6 +30,7 @@ const stablePackages = { react: ReactVersion, 'react-art': ReactVersion, 'react-dom': ReactVersion, + 'react-server-dom-webpack': ReactVersion, 'react-is': ReactVersion, 'react-reconciler': '0.30.0', 'react-refresh': '0.15.0', @@ -42,12 +43,7 @@ const stablePackages = { // These packages do not exist in the @next or @latest channel, only // @experimental. We don't use semver, just the commit sha, so this is just a // list of package names instead of a map. -const experimentalPackages = [ - 'react-fetch', - 'react-fs', - 'react-pg', - 'react-server-dom-webpack', -]; +const experimentalPackages = ['react-fetch', 'react-fs', 'react-pg']; module.exports = { ReactVersion, diff --git a/fixtures/fizz-ssr-browser/index.html b/fixtures/fizz-ssr-browser/index.html index 3d2b42231005b..929b88217f540 100644 --- a/fixtures/fizz-ssr-browser/index.html +++ b/fixtures/fizz-ssr-browser/index.html @@ -17,6 +17,7 @@

Fizz Example

+ diff --git a/fixtures/flight/src/index.js b/fixtures/flight/src/index.js index 8a63b80b57f23..71c87a2ea17bc 100644 --- a/fixtures/flight/src/index.js +++ b/fixtures/flight/src/index.js @@ -6,7 +6,7 @@ import ReactServerDOMReader from 'react-server-dom-webpack/client'; let data = ReactServerDOMReader.createFromFetch(fetch('http://localhost:3001')); function Content() { - return React.experimental_use(data); + return React.use(data); } ReactDOM.createRoot(document.getElementById('root')).render( diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js index 81043e1e34687..e974ceb3d6d09 100644 --- a/packages/react-client/src/__tests__/ReactFlight-test.js +++ b/packages/react-client/src/__tests__/ReactFlight-test.js @@ -27,7 +27,7 @@ describe('ReactFlight', () => { React = require('react'); startTransition = React.startTransition; - use = React.experimental_use; + use = React.use; ReactNoop = require('react-noop-renderer'); ReactNoopFlightServer = require('react-noop-renderer/flight-server'); ReactNoopFlightClient = require('react-noop-renderer/flight-client'); diff --git a/packages/react-dom/index.classic.fb.js b/packages/react-dom/index.classic.fb.js index 6642943bfdb86..4d05d28ae3348 100644 --- a/packages/react-dom/index.classic.fb.js +++ b/packages/react-dom/index.classic.fb.js @@ -33,6 +33,8 @@ export { unstable_isNewReconciler, unstable_renderSubtreeIntoContainer, unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority. + preinit, + preload, version, } from './src/client/ReactDOM'; diff --git a/packages/react-dom/index.experimental.js b/packages/react-dom/index.experimental.js index 38007a29a23d8..7b8326fb30fbe 100644 --- a/packages/react-dom/index.experimental.js +++ b/packages/react-dom/index.experimental.js @@ -20,7 +20,7 @@ export { unstable_batchedUpdates, unstable_renderSubtreeIntoContainer, unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority. + preinit, + preload, version, } from './src/client/ReactDOM'; - -export {preinit, preload} from 'react-dom-bindings/src/shared/ReactDOMFloat'; diff --git a/packages/react-dom/index.js b/packages/react-dom/index.js index 2c537e2a28257..a5627c22e7a3e 100644 --- a/packages/react-dom/index.js +++ b/packages/react-dom/index.js @@ -25,5 +25,7 @@ export { unstable_isNewReconciler, unstable_renderSubtreeIntoContainer, unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority. + preinit, + preload, version, } from './src/client/ReactDOM'; diff --git a/packages/react-dom/index.modern.fb.js b/packages/react-dom/index.modern.fb.js index 1eea181ee95ce..8422e6b9ac602 100644 --- a/packages/react-dom/index.modern.fb.js +++ b/packages/react-dom/index.modern.fb.js @@ -18,5 +18,7 @@ export { unstable_flushControlled, unstable_isNewReconciler, unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority. + preinit, + preload, version, } from './src/client/ReactDOM'; diff --git a/packages/react-dom/index.stable.js b/packages/react-dom/index.stable.js index b66082b6499b6..5d64bf771c6f6 100644 --- a/packages/react-dom/index.stable.js +++ b/packages/react-dom/index.stable.js @@ -19,5 +19,7 @@ export { unmountComponentAtNode, unstable_batchedUpdates, unstable_renderSubtreeIntoContainer, + preinit, + preload, version, } from './src/client/ReactDOM'; diff --git a/packages/react-dom/server-rendering-stub.experimental.js b/packages/react-dom/server-rendering-stub.experimental.js deleted file mode 100644 index c2f819464b38f..0000000000000 --- a/packages/react-dom/server-rendering-stub.experimental.js +++ /dev/null @@ -1,22 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow - */ - -// Export all exports so that they're available in tests. -// We can't use export * from in Flow for some reason. - -import ReactVersion from 'shared/ReactVersion'; -export {ReactVersion as version}; - -export {default as __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED} from './src/ReactDOMSharedInternals'; - -export { - createPortal, - flushSync, -} from './src/server/ReactDOMServerRenderingStub'; -export {preinit, preload} from 'react-dom-bindings/src/shared/ReactDOMFloat'; diff --git a/packages/react-dom/server-rendering-stub.js b/packages/react-dom/server-rendering-stub.js index 84cec2f9fa39b..e50cb3edb3be1 100644 --- a/packages/react-dom/server-rendering-stub.js +++ b/packages/react-dom/server-rendering-stub.js @@ -18,4 +18,6 @@ export {default as __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED} from './s export { createPortal, flushSync, + preload, + preinit, } from './src/server/ReactDOMServerRenderingStub'; diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js index e19542b62b9bd..62a0bc4d10294 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js @@ -41,9 +41,9 @@ describe('ReactDOMFizzServer', () => { ReactDOMFizzServer = require('react-dom/server'); Stream = require('stream'); Suspense = React.Suspense; + use = React.use; if (gate(flags => flags.enableSuspenseList)) { SuspenseList = React.SuspenseList; - use = React.experimental_use; } PropTypes = require('prop-types'); diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js index dd7baabf6712a..61c8d137acd33 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js @@ -1963,7 +1963,7 @@ describe('ReactDOMFloat', () => { ); }); - // @gate enableFloat + // @gate enableFloat && enableHostSingletons && (enableClientRenderFallbackOnTextMismatch || !__DEV__) it('can render a title before a singleton even if that singleton clears its contents', async () => { await actIntoEmptyDocument(() => { const {pipe} = ReactDOMFizzServer.renderToPipeableStream( @@ -1975,7 +1975,6 @@ describe('ReactDOMFloat', () => {
server
- , , ); pipe(writable); @@ -2243,7 +2242,7 @@ describe('ReactDOMFloat', () => { ); }); - // @gate enableFloat && enableHostSingletons + // @gate enableFloat && enableHostSingletons && enableClientRenderFallbackOnTextMismatch it('retains styles even when a new html, head, and/body mount', async () => { await actIntoEmptyDocument(() => { const {pipe} = ReactDOMFizzServer.renderToPipeableStream( diff --git a/packages/react-dom/src/__tests__/ReactDOMInReactServer-test.js b/packages/react-dom/src/__tests__/ReactDOMInReactServer-test.js index 3f62d7f25855a..5730ad12ac824 100644 --- a/packages/react-dom/src/__tests__/ReactDOMInReactServer-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMInReactServer-test.js @@ -15,7 +15,6 @@ describe('ReactDOMInReactServer', () => { jest.mock('react', () => require('react/react.shared-subset')); }); - // @gate experimental && !www it('can require react-dom', () => { // In RSC this will be aliased. require('react'); diff --git a/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js b/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js index 574cbf1b4e11c..d5f6f2fc5db1f 100644 --- a/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js +++ b/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js @@ -153,7 +153,7 @@ function resolveMostRecentTextCache(text) { const resolveText = resolveMostRecentTextCache; -// @gate enableCache +// @gate enableLegacyCache // @gate enableSuspenseList test('regression (#20932): return pointer is correct before entering deleted tree', async () => { // Based on a production bug. Designed to trigger a very specific diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js index 46090be70be8e..a2246229b115f 100644 --- a/packages/react-dom/src/client/ReactDOM.js +++ b/packages/react-dom/src/client/ReactDOM.js @@ -76,6 +76,8 @@ import { } from 'react-dom-bindings/src/events/ReactDOMControlledComponent'; import Internals from '../ReactDOMSharedInternals'; +export {preinit, preload} from 'react-dom-bindings/src/shared/ReactDOMFloat'; + setAttemptSynchronousHydration(attemptSynchronousHydration); setAttemptDiscreteHydration(attemptDiscreteHydration); setAttemptContinuousHydration(attemptContinuousHydration); diff --git a/packages/react-dom/src/server/ReactDOMServerRenderingStub.js b/packages/react-dom/src/server/ReactDOMServerRenderingStub.js index f2fafcdb74389..d7509f15495ac 100644 --- a/packages/react-dom/src/server/ReactDOMServerRenderingStub.js +++ b/packages/react-dom/src/server/ReactDOMServerRenderingStub.js @@ -7,6 +7,8 @@ * @flow */ +export {preinit, preload} from 'react-dom-bindings/src/shared/ReactDOMFloat'; + export function createPortal() { throw new Error( 'createPortal was called on the server. Portals are not currently' + diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js index 0b6c540ecc741..762fb6a01ea88 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.new.js +++ b/packages/react-reconciler/src/ReactFiberHooks.new.js @@ -40,6 +40,7 @@ import { enableUseHook, enableUseMemoCacheHook, enableUseEventHook, + enableLegacyCache, } from 'shared/ReactFeatureFlags'; import { REACT_CONTEXT_TYPE, @@ -2357,9 +2358,17 @@ function refreshCache(fiber: Fiber, seedKey: ?() => T, seedValue: T) { // unmount that boundary before the refresh completes. const seededCache = createCache(); if (seedKey !== null && seedKey !== undefined && root !== null) { - // Seed the cache with the value passed by the caller. This could be - // from a server mutation, or it could be a streaming response. - seededCache.data.set(seedKey, seedValue); + if (enableLegacyCache) { + // Seed the cache with the value passed by the caller. This could be + // from a server mutation, or it could be a streaming response. + seededCache.data.set(seedKey, seedValue); + } else { + if (__DEV__) { + console.error( + 'The seed argument is not enabled outside experimental channels.', + ); + } + } } const payload = { diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js index cb5eeb4adb459..974f0ef76b373 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.old.js +++ b/packages/react-reconciler/src/ReactFiberHooks.old.js @@ -40,6 +40,7 @@ import { enableUseHook, enableUseMemoCacheHook, enableUseEventHook, + enableLegacyCache, } from 'shared/ReactFeatureFlags'; import { REACT_CONTEXT_TYPE, @@ -2357,9 +2358,17 @@ function refreshCache(fiber: Fiber, seedKey: ?() => T, seedValue: T) { // unmount that boundary before the refresh completes. const seededCache = createCache(); if (seedKey !== null && seedKey !== undefined && root !== null) { - // Seed the cache with the value passed by the caller. This could be - // from a server mutation, or it could be a streaming response. - seededCache.data.set(seedKey, seedValue); + if (enableLegacyCache) { + // Seed the cache with the value passed by the caller. This could be + // from a server mutation, or it could be a streaming response. + seededCache.data.set(seedKey, seedValue); + } else { + if (__DEV__) { + console.error( + 'The seed argument is not enabled outside experimental channels.', + ); + } + } } const payload = { diff --git a/packages/react-reconciler/src/__tests__/ReactActWarnings-test.js b/packages/react-reconciler/src/__tests__/ReactActWarnings-test.js index 9029f89cd7cbe..61d2c044c372a 100644 --- a/packages/react-reconciler/src/__tests__/ReactActWarnings-test.js +++ b/packages/react-reconciler/src/__tests__/ReactActWarnings-test.js @@ -292,7 +292,7 @@ describe('act warnings', () => { }); // @gate __DEV__ - // @gate enableCache + // @gate enableLegacyCache test('warns if Suspense retry is not wrapped', () => { function App() { return ( @@ -322,7 +322,7 @@ describe('act warnings', () => { }); // @gate __DEV__ - // @gate enableCache + // @gate enableLegacyCache test('warns if Suspense ping is not wrapped', () => { function App({showMore}) { return ( diff --git a/packages/react-reconciler/src/__tests__/ReactCache-test.js b/packages/react-reconciler/src/__tests__/ReactCache-test.js index 6bf494b1e0ad9..7b1eda50ff2bf 100644 --- a/packages/react-reconciler/src/__tests__/ReactCache-test.js +++ b/packages/react-reconciler/src/__tests__/ReactCache-test.js @@ -25,7 +25,7 @@ describe('ReactCache', () => { Scheduler = require('scheduler'); act = require('jest-react').act; Suspense = React.Suspense; - cache = React.experimental_cache; + cache = React.cache; Offscreen = React.unstable_Offscreen; getCacheSignal = React.unstable_getCacheSignal; useCacheRefresh = React.unstable_useCacheRefresh; @@ -85,7 +85,7 @@ describe('ReactCache', () => { }); function readText(text) { - const signal = getCacheSignal(); + const signal = getCacheSignal ? getCacheSignal() : null; const textCache = getTextCache(); const record = textCache.data.get(text); if (record !== undefined) { @@ -94,11 +94,13 @@ describe('ReactCache', () => { // schedule a cleanup function for it. // TODO: Add ability to cleanup entries seeded w useCacheRefresh() record.cleanupScheduled = true; - signal.addEventListener('abort', () => { - Scheduler.unstable_yieldValue( - `Cache cleanup: ${text} [v${textCache.version}]`, - ); - }); + if (getCacheSignal) { + signal.addEventListener('abort', () => { + Scheduler.unstable_yieldValue( + `Cache cleanup: ${text} [v${textCache.version}]`, + ); + }); + } } switch (record.status) { case 'pending': @@ -140,11 +142,13 @@ describe('ReactCache', () => { }; textCache.data.set(text, newRecord); - signal.addEventListener('abort', () => { - Scheduler.unstable_yieldValue( - `Cache cleanup: ${text} [v${textCache.version}]`, - ); - }); + if (getCacheSignal) { + signal.addEventListener('abort', () => { + Scheduler.unstable_yieldValue( + `Cache cleanup: ${text} [v${textCache.version}]`, + ); + }); + } throw thenable; } } @@ -178,7 +182,7 @@ describe('ReactCache', () => { } } - // @gate experimental || www + // @gate enableCacheElement && enableCache test('render Cache component', async () => { const root = ReactNoop.createRoot(); await act(async () => { @@ -187,7 +191,7 @@ describe('ReactCache', () => { expect(root).toMatchRenderedOutput('Hi'); }); - // @gate experimental || www + // @gate enableCacheElement && enableCache test('mount new data', async () => { const root = ReactNoop.createRoot(); await act(async () => { @@ -216,7 +220,7 @@ describe('ReactCache', () => { expect(root).toMatchRenderedOutput('Bye'); }); - // @gate experimental || www + // @gate enableCache test('root acts as implicit cache boundary', async () => { const root = ReactNoop.createRoot(); await act(async () => { @@ -243,7 +247,7 @@ describe('ReactCache', () => { expect(root).toMatchRenderedOutput('Bye'); }); - // @gate experimental || www + // @gate enableCacheElement && enableCache test('multiple new Cache boundaries in the same mount share the same, fresh root cache', async () => { function App() { return ( @@ -290,7 +294,7 @@ describe('ReactCache', () => { expect(root).toMatchRenderedOutput('Bye'); }); - // @gate experimental || www + // @gate enableCacheElement && enableCache test('multiple new Cache boundaries in the same update share the same, fresh cache', async () => { function App({showMore}) { return showMore ? ( @@ -346,7 +350,7 @@ describe('ReactCache', () => { expect(root).toMatchRenderedOutput('Bye'); }); - // @gate experimental || www + // @gate enableCacheElement && enableCache test( 'nested cache boundaries share the same cache as the root during ' + 'the initial render', @@ -386,7 +390,7 @@ describe('ReactCache', () => { }, ); - // @gate experimental || www + // @gate enableCacheElement && enableCache test('new content inside an existing Cache boundary should re-use already cached data', async () => { function App({showMore}) { return ( @@ -430,7 +434,7 @@ describe('ReactCache', () => { expect(root).toMatchRenderedOutput('Bye'); }); - // @gate experimental || www + // @gate enableCacheElement && enableCache test('a new Cache boundary uses fresh cache', async () => { // The only difference from the previous test is that the "Show More" // content is wrapped in a nested boundary @@ -488,7 +492,7 @@ describe('ReactCache', () => { expect(root).toMatchRenderedOutput('Bye!'); }); - // @gate experimental || www + // @gate enableCacheElement && enableCache test('inner/outer cache boundaries uses the same cache instance on initial render', async () => { const root = ReactNoop.createRoot(); @@ -570,7 +574,7 @@ describe('ReactCache', () => { expect(root).toMatchRenderedOutput('Bye'); }); - // @gate experimental || www + // @gate enableCacheElement && enableCache test('inner/ outer cache boundaries added in the same update use the same cache instance', async () => { const root = ReactNoop.createRoot(); @@ -662,7 +666,7 @@ describe('ReactCache', () => { expect(root).toMatchRenderedOutput('Bye'); }); - // @gate experimental || www + // @gate enableCache test('refresh a cache boundary', async () => { let refresh; function App() { @@ -674,11 +678,9 @@ describe('ReactCache', () => { const root = ReactNoop.createRoot(); await act(async () => { root.render( - - }> - - - , + }> + + , ); }); expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']); @@ -701,19 +703,20 @@ describe('ReactCache', () => { resolveMostRecentTextCache('A'); }); // Note that the version has updated - expect(Scheduler).toHaveYielded(['A [v2]']); + if (getCacheSignal) { + expect(Scheduler).toHaveYielded(['A [v2]', 'Cache cleanup: A [v1]']); + } else { + expect(Scheduler).toHaveYielded(['A [v2]']); + } expect(root).toMatchRenderedOutput('A [v2]'); await act(async () => { root.render('Bye'); }); - // the original cache instance does not cleanup since it is still referenced - // by the root, but the refreshed inner cache does cleanup - expect(Scheduler).toHaveYielded(['Cache cleanup: A [v2]']); expect(root).toMatchRenderedOutput('Bye'); }); - // @gate experimental || www + // @gate enableCacheElement && enableCache test('refresh the root cache', async () => { let refresh; function App() { @@ -761,7 +764,7 @@ describe('ReactCache', () => { expect(root).toMatchRenderedOutput('Bye'); }); - // @gate experimental || www + // @gate enableCacheElement && enableCache test('refresh the root cache without a transition', async () => { let refresh; function App() { @@ -816,7 +819,7 @@ describe('ReactCache', () => { expect(root).toMatchRenderedOutput('Bye'); }); - // @gate experimental || www + // @gate enableCacheElement && enableCache test('refresh a cache with seed data', async () => { let refreshWithSeed; function App() { @@ -879,7 +882,7 @@ describe('ReactCache', () => { expect(root).toMatchRenderedOutput('Bye'); }); - // @gate experimental || www + // @gate enableCacheElement && enableCache test('refreshing a parent cache also refreshes its children', async () => { let refreshShell; function RefreshShell() { @@ -958,7 +961,7 @@ describe('ReactCache', () => { expect(root).toMatchRenderedOutput('Bye!'); }); - // @gate experimental || www + // @gate enableCacheElement && enableCache test( 'refreshing a cache boundary does not refresh the other boundaries ' + 'that mounted at the same time (i.e. the ones that share the same cache)', @@ -1046,7 +1049,7 @@ describe('ReactCache', () => { }, ); - // @gate experimental || www + // @gate enableCacheElement && enableCache test( 'mount a new Cache boundary in a sibling while simultaneously ' + 'resolving a Suspense boundary', @@ -1119,7 +1122,7 @@ describe('ReactCache', () => { }, ); - // @gate experimental || www + // @gate enableCacheElement && enableCache test('cache pool is cleared once transitions that depend on it commit their shell', async () => { function Child({text}) { return ( @@ -1215,7 +1218,7 @@ describe('ReactCache', () => { expect(root).toMatchRenderedOutput('Bye!'); }); - // @gate experimental || www + // @gate enableCacheElement && enableCache test('cache pool is not cleared by arbitrary commits', async () => { function App() { return ( @@ -1294,7 +1297,7 @@ describe('ReactCache', () => { expect(root).toMatchRenderedOutput('Bye!'); }); - // @gate experimental || www + // @gate enableCacheElement && enableCache test('cache boundary uses a fresh cache when its key changes', async () => { const root = ReactNoop.createRoot(); seedNextTextCache('A'); @@ -1333,7 +1336,7 @@ describe('ReactCache', () => { expect(root).toMatchRenderedOutput('Bye!'); }); - // @gate experimental || www + // @gate enableCacheElement && enableCache test('overlapping transitions after an initial mount use the same fresh cache', async () => { const root = ReactNoop.createRoot(); await act(async () => { @@ -1404,7 +1407,7 @@ describe('ReactCache', () => { expect(root).toMatchRenderedOutput('Bye!'); }); - // @gate experimental || www + // @gate enableCacheElement && enableCache test('overlapping updates after an initial mount use the same fresh cache', async () => { const root = ReactNoop.createRoot(); await act(async () => { @@ -1470,7 +1473,7 @@ describe('ReactCache', () => { expect(root).toMatchRenderedOutput('Bye!'); }); - // @gate experimental || www + // @gate enableCacheElement && enableCache test('cleans up cache only used in an aborted transition', async () => { const root = ReactNoop.createRoot(); seedNextTextCache('A'); @@ -1525,7 +1528,7 @@ describe('ReactCache', () => { expect(root).toMatchRenderedOutput('Bye!'); }); - // @gate experimental || www + // @gate enableCacheElement && enableCache test.skip('if a root cache refresh never commits its fresh cache is released', async () => { const root = ReactNoop.createRoot(); let refresh; @@ -1567,7 +1570,7 @@ describe('ReactCache', () => { expect(root).toMatchRenderedOutput('Bye!'); }); - // @gate experimental || www + // @gate enableCacheElement && enableCache test.skip('if a cache boundary refresh never commits its fresh cache is released', async () => { const root = ReactNoop.createRoot(); let refresh; diff --git a/packages/react-reconciler/src/__tests__/ReactConcurrentErrorRecovery-test.js b/packages/react-reconciler/src/__tests__/ReactConcurrentErrorRecovery-test.js index 4c44a31b2b120..60644db5cb598 100644 --- a/packages/react-reconciler/src/__tests__/ReactConcurrentErrorRecovery-test.js +++ b/packages/react-reconciler/src/__tests__/ReactConcurrentErrorRecovery-test.js @@ -157,7 +157,7 @@ describe('ReactConcurrentErrorRecovery', () => { const rejectText = rejectMostRecentTextCache; - // @gate enableCache + // @gate enableLegacyCache test('errors during a refresh transition should not force fallbacks to display (suspend then error)', async () => { class ErrorBoundary extends React.Component { state = {error: null}; @@ -278,7 +278,7 @@ describe('ReactConcurrentErrorRecovery', () => { expect(root).toMatchRenderedOutput('A2Oops!'); }); - // @gate enableCache + // @gate enableLegacyCache test('errors during a refresh transition should not force fallbacks to display (error then suspend)', async () => { class ErrorBoundary extends React.Component { state = {error: null}; @@ -399,7 +399,7 @@ describe('ReactConcurrentErrorRecovery', () => { expect(root).toMatchRenderedOutput('Oops!B2'); }); - // @gate enableCache + // @gate enableLegacyCache test('suspending in the shell (outside a Suspense boundary) should not throw, warn, or log during a transition', async () => { class ErrorBoundary extends React.Component { state = {error: null}; @@ -449,7 +449,7 @@ describe('ReactConcurrentErrorRecovery', () => { expect(root).toMatchRenderedOutput('Async'); }); - // @gate enableCache + // @gate enableLegacyCache test( 'errors during a suspended transition at the shell should not force ' + 'fallbacks to display (error then suspend)', diff --git a/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js b/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js index 9b87ab65686e8..65933ad6e31aa 100644 --- a/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js +++ b/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js @@ -344,7 +344,7 @@ describe('ReactLazyContextPropagation', () => { expect(root).toMatchRenderedOutput('0'); }); - // @gate enableCache + // @gate enableLegacyCache test('context is propagated across retries', async () => { const root = ReactNoop.createRoot(); @@ -405,7 +405,7 @@ describe('ReactLazyContextPropagation', () => { expect(root).toMatchRenderedOutput('BB'); }); - // @gate enableCache + // @gate enableLegacyCache test('multiple contexts are propagated across retries', async () => { // Same as previous test, but with multiple context providers const root = ReactNoop.createRoot(); @@ -485,7 +485,7 @@ describe('ReactLazyContextPropagation', () => { expect(root).toMatchRenderedOutput('BBB'); }); - // @gate enableCache + // @gate enableLegacyCache test('context is propagated across retries (legacy)', async () => { const root = ReactNoop.createLegacyRoot(); @@ -749,7 +749,7 @@ describe('ReactLazyContextPropagation', () => { expect(root).toMatchRenderedOutput('BB'); }); - // @gate enableCache + // @gate enableLegacyCache test('nested bailouts across retries', async () => { // Lazy context propagation will stop propagating when it hits the first // match. If we bail out again inside that tree, we must resume propagating. diff --git a/packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js b/packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js index add7252335e8d..7df2ff1a93a85 100644 --- a/packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js +++ b/packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js @@ -25,7 +25,7 @@ describe('isomorphic act()', () => { DiscreteEventPriority = require('react-reconciler/constants') .DiscreteEventPriority; act = React.unstable_act; - use = React.experimental_use; + use = React.use; Suspense = React.Suspense; startTransition = React.startTransition; }); diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js index d3c449e783516..e681c01733ba7 100644 --- a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js +++ b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js @@ -206,7 +206,7 @@ describe('ReactSuspenseEffectsSemantics', () => { } describe('when a component suspends during initial mount', () => { - // @gate enableCache + // @gate enableLegacyCache it('should not change behavior in concurrent mode', async () => { class ClassText extends React.Component { componentDidMount() { @@ -323,7 +323,7 @@ describe('ReactSuspenseEffectsSemantics', () => { expect(ReactNoop.getChildren()).toEqual([]); }); - // @gate enableCache + // @gate enableLegacyCache it('should not change behavior in sync', async () => { class ClassText extends React.Component { componentDidMount() { @@ -442,7 +442,7 @@ describe('ReactSuspenseEffectsSemantics', () => { }); describe('layout effects within a tree that re-suspends in an update', () => { - // @gate enableCache + // @gate enableLegacyCache it('should not be destroyed or recreated in legacy roots', async () => { function App({children = null}) { Scheduler.unstable_yieldValue('App render'); @@ -565,7 +565,7 @@ describe('ReactSuspenseEffectsSemantics', () => { ]); }); - // @gate enableCache + // @gate enableLegacyCache it('should be destroyed and recreated for function components', async () => { function App({children = null}) { Scheduler.unstable_yieldValue('App render'); @@ -693,7 +693,7 @@ describe('ReactSuspenseEffectsSemantics', () => { ]); }); - // @gate enableCache + // @gate enableLegacyCache it('should be destroyed and recreated for class components', async () => { class ClassText extends React.Component { componentDidMount() { @@ -837,7 +837,7 @@ describe('ReactSuspenseEffectsSemantics', () => { ]); }); - // @gate enableCache + // @gate enableLegacyCache it('should be destroyed and recreated when nested below host components', async () => { function App({children = null}) { Scheduler.unstable_yieldValue('App render'); @@ -946,7 +946,7 @@ describe('ReactSuspenseEffectsSemantics', () => { ]); }); - // @gate enableCache + // @gate enableLegacyCache it('should be destroyed and recreated even if there is a bailout because of memoization', async () => { const MemoizedText = React.memo(Text, () => true); @@ -1061,7 +1061,7 @@ describe('ReactSuspenseEffectsSemantics', () => { ]); }); - // @gate enableCache + // @gate enableLegacyCache it('should respect nested suspense boundaries', async () => { function App({innerChildren = null, outerChildren = null}) { return ( @@ -1283,7 +1283,7 @@ describe('ReactSuspenseEffectsSemantics', () => { ]); }); - // @gate enableCache + // @gate enableLegacyCache it('should show nested host nodes if multiple boundaries resolve at the same time', async () => { function App({innerChildren = null, outerChildren = null}) { return ( @@ -1392,7 +1392,7 @@ describe('ReactSuspenseEffectsSemantics', () => { ]); }); - // @gate enableCache + // @gate enableLegacyCache it('should be cleaned up inside of a fallback that suspends', async () => { function App({fallbackChildren = null, outerChildren = null}) { return ( @@ -1534,7 +1534,7 @@ describe('ReactSuspenseEffectsSemantics', () => { ]); }); - // @gate enableCache + // @gate enableLegacyCache it('should be cleaned up inside of a fallback that suspends (alternate)', async () => { function App({fallbackChildren = null, outerChildren = null}) { return ( @@ -1653,7 +1653,7 @@ describe('ReactSuspenseEffectsSemantics', () => { ]); }); - // @gate enableCache + // @gate enableLegacyCache it('should be cleaned up deeper inside of a subtree that suspends', async () => { function ConditionalSuspense({shouldSuspend}) { if (shouldSuspend) { @@ -1735,7 +1735,7 @@ describe('ReactSuspenseEffectsSemantics', () => { }); describe('that throw errors', () => { - // @gate enableCache + // @gate enableLegacyCache it('are properly handled for componentDidMount', async () => { let componentDidMountShouldThrow = false; @@ -1873,7 +1873,7 @@ describe('ReactSuspenseEffectsSemantics', () => { expect(ReactNoop.getChildren()).toEqual([span('Error')]); }); - // @gate enableCache + // @gate enableLegacyCache it('are properly handled for componentWillUnmount', async () => { class ThrowsInWillUnmount extends React.Component { componentDidMount() { @@ -1984,7 +1984,7 @@ describe('ReactSuspenseEffectsSemantics', () => { expect(ReactNoop.getChildren()).toEqual([span('Error')]); }); - // @gate enableCache + // @gate enableLegacyCache // @gate replayFailedUnitOfWorkWithInvokeGuardedCallback it('are properly handled for layout effect creation', async () => { let useLayoutEffectShouldThrow = false; @@ -2123,7 +2123,7 @@ describe('ReactSuspenseEffectsSemantics', () => { expect(ReactNoop.getChildren()).toEqual([span('Error')]); }); - // @gate enableCache + // @gate enableLegacyCache // @gate replayFailedUnitOfWorkWithInvokeGuardedCallback it('are properly handled for layout effect destruction', async () => { function ThrowsInLayoutEffectDestroy() { @@ -2234,7 +2234,7 @@ describe('ReactSuspenseEffectsSemantics', () => { }); }); - // @gate enableCache + // @gate enableLegacyCache it('should be only destroy layout effects once if a tree suspends in multiple places', async () => { class ClassText extends React.Component { componentDidMount() { @@ -2372,7 +2372,7 @@ describe('ReactSuspenseEffectsSemantics', () => { ]); }); - // @gate enableCache + // @gate enableLegacyCache it('should be only destroy layout effects once if a component suspends multiple times', async () => { class ClassText extends React.Component { componentDidMount() { @@ -2569,7 +2569,7 @@ describe('ReactSuspenseEffectsSemantics', () => { return null; } - // @gate enableCache + // @gate enableLegacyCache it('should not be cleared within legacy roots', async () => { class ClassComponent extends React.Component { render() { @@ -2655,7 +2655,7 @@ describe('ReactSuspenseEffectsSemantics', () => { expect(ReactNoop.getChildren()).toEqual([]); }); - // @gate enableCache + // @gate enableLegacyCache it('should be cleared and reset for host components', async () => { function App({children}) { Scheduler.unstable_yieldValue(`App render`); @@ -2751,7 +2751,7 @@ describe('ReactSuspenseEffectsSemantics', () => { expect(ReactNoop.getChildren()).toEqual([]); }); - // @gate enableCache + // @gate enableLegacyCache it('should be cleared and reset for class components', async () => { class ClassComponent extends React.Component { render() { @@ -2851,7 +2851,7 @@ describe('ReactSuspenseEffectsSemantics', () => { expect(ReactNoop.getChildren()).toEqual([]); }); - // @gate enableCache + // @gate enableLegacyCache it('should be cleared and reset for function components with useImperativeHandle', async () => { const FunctionComponent = React.forwardRef((props, ref) => { Scheduler.unstable_yieldValue('FunctionComponent render'); @@ -2955,7 +2955,7 @@ describe('ReactSuspenseEffectsSemantics', () => { expect(ReactNoop.getChildren()).toEqual([]); }); - // @gate enableCache + // @gate enableLegacyCache it('should not reset for user-managed values', async () => { function RefChecker({forwardedRef}) { Scheduler.unstable_yieldValue(`RefChecker render`); @@ -3052,7 +3052,7 @@ describe('ReactSuspenseEffectsSemantics', () => { }); describe('that throw errors', () => { - // @gate enableCache + // @gate enableLegacyCache // @gate replayFailedUnitOfWorkWithInvokeGuardedCallback it('are properly handled in ref callbacks', async () => { let useRefCallbackShouldThrow = false; diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseFallback-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseFallback-test.js index 8a694653c07a9..8284383c5f6ca 100644 --- a/packages/react-reconciler/src/__tests__/ReactSuspenseFallback-test.js +++ b/packages/react-reconciler/src/__tests__/ReactSuspenseFallback-test.js @@ -131,7 +131,7 @@ describe('ReactSuspenseFallback', () => { return {type: 'span', children: [], prop, hidden: false}; } - // @gate enableCache + // @gate enableLegacyCache it('suspends and shows fallback', () => { ReactNoop.render( }> @@ -143,7 +143,7 @@ describe('ReactSuspenseFallback', () => { expect(ReactNoop.getChildren()).toEqual([span('Loading...')]); }); - // @gate enableCache + // @gate enableLegacyCache it('suspends and shows null fallback', () => { ReactNoop.render( @@ -158,7 +158,7 @@ describe('ReactSuspenseFallback', () => { expect(ReactNoop.getChildren()).toEqual([]); }); - // @gate enableCache + // @gate enableLegacyCache it('suspends and shows undefined fallback', () => { ReactNoop.render( @@ -173,7 +173,7 @@ describe('ReactSuspenseFallback', () => { expect(ReactNoop.getChildren()).toEqual([]); }); - // @gate enableCache + // @gate enableLegacyCache it('suspends and shows inner fallback', () => { ReactNoop.render( }> @@ -187,7 +187,7 @@ describe('ReactSuspenseFallback', () => { expect(ReactNoop.getChildren()).toEqual([span('Loading...')]); }); - // @gate enableCache + // @gate enableLegacyCache it('suspends and shows inner undefined fallback', () => { ReactNoop.render( }> @@ -204,7 +204,7 @@ describe('ReactSuspenseFallback', () => { expect(ReactNoop.getChildren()).toEqual([]); }); - // @gate enableCache + // @gate enableLegacyCache it('suspends and shows inner null fallback', () => { ReactNoop.render( }> diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js index 1c738f43dba11..5b4c9345443bf 100644 --- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js +++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js @@ -190,7 +190,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { ); } - // @gate enableCache + // @gate enableLegacyCache it('does not restart rendering for initial render', async () => { function Bar(props) { Scheduler.unstable_yieldValue('Bar'); @@ -259,7 +259,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { ]); }); - // @gate enableCache + // @gate enableLegacyCache it('suspends rendering and continues later', async () => { function Bar(props) { Scheduler.unstable_yieldValue('Bar'); @@ -310,7 +310,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]); }); - // @gate enableCache + // @gate enableLegacyCache it('suspends siblings and later recovers each independently', async () => { // Render two sibling Suspense components ReactNoop.render( @@ -349,7 +349,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]); }); - // @gate enableCache + // @gate enableLegacyCache it('continues rendering siblings after suspending', async () => { // A shell is needed. The update cause it to suspend. ReactNoop.render(} />); @@ -402,7 +402,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { // Second condition is redundant but guarantees that the test runs in prod. // TODO: Delete this feature flag. // @gate !replayFailedUnitOfWorkWithInvokeGuardedCallback || !__DEV__ - // @gate enableCache + // @gate enableLegacyCache it('retries on error', async () => { class ErrorBoundary extends React.Component { state = {error: null}; @@ -466,7 +466,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { // Second condition is redundant but guarantees that the test runs in prod. // TODO: Delete this feature flag. // @gate !replayFailedUnitOfWorkWithInvokeGuardedCallback || !__DEV__ - // @gate enableCache + // @gate enableLegacyCache it('retries on error after falling back to a placeholder', async () => { class ErrorBoundary extends React.Component { state = {error: null}; @@ -515,7 +515,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { ]); }); - // @gate enableCache + // @gate enableLegacyCache it('can update at a higher priority while in a suspended state', async () => { function App(props) { return ( @@ -555,7 +555,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(ReactNoop.getChildren()).toEqual([span('B'), span('1')]); }); - // @gate enableCache + // @gate enableLegacyCache it('keeps working on lower priority work after being pinged', async () => { // Advance the virtual time so that we're close to the edge of a bucket. ReactNoop.expire(149); @@ -601,7 +601,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]); }); - // @gate enableCache + // @gate enableLegacyCache it('tries rendering a lower priority pending update even if a higher priority one suspends', async () => { function App(props) { if (props.hide) { @@ -708,7 +708,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(Scheduler).toHaveYielded(['Sibling', 'Step 4']); }); - // @gate enableCache + // @gate enableLegacyCache it('forces an expiration after an update times out', async () => { ReactNoop.render( @@ -753,7 +753,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(ReactNoop.getChildren()).toEqual([span('Async'), span('Sync')]); }); - // @gate enableCache + // @gate enableLegacyCache it('switches to an inner fallback after suspending for a while', async () => { // Advance the virtual time so that we're closer to the edge of a bucket. ReactNoop.expire(200); @@ -818,7 +818,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { ]); }); - // @gate enableCache + // @gate enableLegacyCache it('renders an expiration boundary synchronously', async () => { spyOnDev(console, 'error'); // Synchronously render a tree that suspends @@ -849,7 +849,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(ReactNoop.getChildren()).toEqual([span('Async'), span('Sync')]); }); - // @gate enableCache + // @gate enableLegacyCache it('suspending inside an expired expiration boundary will bubble to the next one', async () => { ReactNoop.flushSync(() => ReactNoop.render( @@ -873,7 +873,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(ReactNoop.getChildren()).toEqual([span('Loading (outer)...')]); }); - // @gate enableCache + // @gate enableLegacyCache it('expires early by default', async () => { ReactNoop.render( @@ -915,7 +915,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(ReactNoop.getChildren()).toEqual([span('Async'), span('Sync')]); }); - // @gate enableCache + // @gate enableLegacyCache it('does not expire for transitions', async () => { ReactNoop.render( @@ -961,7 +961,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(ReactNoop.getChildren()).toEqual([span('Async'), span('Sync')]); }); - // @gate enableCache + // @gate enableLegacyCache it('resolves successfully even if fallback render is pending', async () => { const root = ReactNoop.createRoot(); root.render( @@ -1011,7 +1011,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { ); }); - // @gate enableCache + // @gate enableLegacyCache it('in concurrent mode, does not error when an update suspends without a Suspense boundary during a sync update', () => { // NOTE: We may change this to be a warning in the future. expect(() => { @@ -1021,7 +1021,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { }).not.toThrow(); }); - // @gate enableCache + // @gate enableLegacyCache it('in legacy mode, errors when an update suspends without a Suspense boundary during a sync update', () => { const root = ReactNoop.createLegacyRoot(); expect(() => root.render()).toThrow( @@ -1029,7 +1029,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { ); }); - // @gate enableCache + // @gate enableLegacyCache it('a Suspense component correctly handles more than one suspended child', async () => { ReactNoop.render( }> @@ -1051,7 +1051,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]); }); - // @gate enableCache + // @gate enableLegacyCache it('can resume rendering earlier than a timeout', async () => { ReactNoop.render(} />); expect(Scheduler).toFlushAndYield([]); @@ -1081,7 +1081,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(ReactNoop.getChildren()).toEqual([span('Async')]); }); - // @gate enableCache + // @gate enableLegacyCache it('starts working on an update even if its priority falls between two suspended levels', async () => { function App(props) { return ( @@ -1136,7 +1136,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { // implementation. It doesn't really test what it was intended to test // anymore, because all updates to the same queue get entangled together. // Even if they haven't expired. Consider either deleting or rewriting. - // @gate enableCache + // @gate enableLegacyCache it('flushes all expired updates in a single batch', async () => { class Foo extends React.Component { componentDidUpdate() { @@ -1179,7 +1179,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(ReactNoop.getChildren()).toEqual([span('goodbye')]); }); - // @gate enableCache + // @gate enableLegacyCache it('a suspended update that expires', async () => { // Regression test. This test used to fall into an infinite loop. function ExpensiveText({text}) { @@ -1222,7 +1222,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { }); describe('legacy mode mode', () => { - // @gate enableCache + // @gate enableLegacyCache it('times out immediately', async () => { function App() { return ( @@ -1245,7 +1245,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(ReactNoop.getChildren()).toEqual([span('Result')]); }); - // @gate enableCache + // @gate enableLegacyCache it('times out immediately when Suspense is in legacy mode', async () => { class UpdatingText extends React.Component { state = {step: 1}; @@ -1319,7 +1319,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { ); }); - // @gate enableCache + // @gate enableLegacyCache it('does not re-render siblings in loose mode', async () => { class TextWithLifecycle extends React.Component { componentDidMount() { @@ -1394,7 +1394,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { ); }); - // @gate enableCache + // @gate enableLegacyCache it('suspends inside constructor', async () => { class AsyncTextInConstructor extends React.Component { constructor(props) { @@ -1438,7 +1438,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(ReactNoop.getChildren()).toEqual([span('Hi')]); }); - // @gate enableCache + // @gate enableLegacyCache it('does not infinite loop if fallback contains lifecycle method', async () => { class Fallback extends React.Component { state = { @@ -1481,7 +1481,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { }); if (global.__PERSISTENT__) { - // @gate enableCache + // @gate enableLegacyCache it('hides/unhides suspended children before layout effects fire (persistent)', async () => { const {useRef, useLayoutEffect} = React; @@ -1525,7 +1525,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(Scheduler).toHaveYielded(['Hi']); }); } else { - // @gate enableCache + // @gate enableLegacyCache it('hides/unhides suspended children before layout effects fire (mutation)', async () => { const {useRef, useLayoutEffect} = React; @@ -1570,7 +1570,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { }); } - // @gate enableCache + // @gate enableLegacyCache it('handles errors in the return path of a component that suspends', async () => { // Covers an edge case where an error is thrown inside the complete phase // of a component that is in the return path of a component that suspends. @@ -1655,7 +1655,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { }); }); - // @gate enableCache + // @gate enableLegacyCache it('does not call lifecycles of a suspended component', async () => { class TextWithLifecycle extends React.Component { componentDidMount() { @@ -1725,7 +1725,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { ); }); - // @gate enableCache + // @gate enableLegacyCache it('does not call lifecycles of a suspended component (hooks)', async () => { function TextWithLifecycle(props) { React.useLayoutEffect(() => { @@ -1861,7 +1861,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { ]); }); - // @gate enableCache + // @gate enableLegacyCache it('suspends for longer if something took a long (CPU bound) time to render', async () => { function Foo({renderContent}) { Scheduler.unstable_yieldValue('Foo'); @@ -1929,7 +1929,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(ReactNoop.getChildren()).toEqual([span('A')]); }); - // @gate enableCache + // @gate enableLegacyCache it('does not suspends if a fallback has been shown for a long time', async () => { function Foo() { Scheduler.unstable_yieldValue('Foo'); @@ -1983,7 +1983,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]); }); - // @gate enableCache + // @gate enableLegacyCache it('does suspend if a fallback has been shown for a short time', async () => { function Foo() { Scheduler.unstable_yieldValue('Foo'); @@ -2033,7 +2033,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]); }); - // @gate enableCache + // @gate enableLegacyCache it('does not suspend for very long after a higher priority update', async () => { function Foo({renderContent}) { Scheduler.unstable_yieldValue('Foo'); @@ -2087,7 +2087,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { }); // TODO: flip to "warns" when this is implemented again. - // @gate enableCache + // @gate enableLegacyCache it('does not warn when a low priority update suspends inside a high priority update for functional components', async () => { let _setShow; function App() { @@ -2111,7 +2111,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { }); // TODO: flip to "warns" when this is implemented again. - // @gate enableCache + // @gate enableLegacyCache it('does not warn when a low priority update suspends inside a high priority update for class components', async () => { let show; class App extends React.Component { @@ -2137,7 +2137,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { }); }); - // @gate enableCache + // @gate enableLegacyCache it('does not warn about wrong Suspense priority if no new fallbacks are shown', async () => { let showB; class App extends React.Component { @@ -2169,7 +2169,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { }); // TODO: flip to "warns" when this is implemented again. - // @gate enableCache + // @gate enableLegacyCache it( 'does not warn when component that triggered user-blocking update is between Suspense boundary ' + 'and component that suspended', @@ -2198,7 +2198,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { }, ); - // @gate enableCache + // @gate enableLegacyCache it('normal priority updates suspending do not warn for class components', async () => { let show; class App extends React.Component { @@ -2227,7 +2227,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(ReactNoop).toMatchRenderedOutput('Loading...'); }); - // @gate enableCache + // @gate enableLegacyCache it('normal priority updates suspending do not warn for functional components', async () => { let _setShow; function App() { @@ -2253,7 +2253,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(ReactNoop).toMatchRenderedOutput('Loading...'); }); - // @gate enableCache && enableSuspenseAvoidThisFallback + // @gate enableLegacyCache && enableSuspenseAvoidThisFallback it('shows the parent fallback if the inner fallback should be avoided', async () => { function Foo({showC}) { Scheduler.unstable_yieldValue('Foo'); @@ -2310,7 +2310,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(ReactNoop.getChildren()).toEqual([span('A'), span('C'), span('B')]); }); - // @gate enableCache + // @gate enableLegacyCache it('does not show the parent fallback if the inner fallback is not defined', async () => { function Foo({showC}) { Scheduler.unstable_yieldValue('Foo'); @@ -2359,7 +2359,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(ReactNoop.getChildren()).toEqual([span('A'), span('C'), span('B')]); }); - // @gate enableCache + // @gate enableLegacyCache it('favors showing the inner fallback for nested top level avoided fallback', async () => { function Foo({showB}) { Scheduler.unstable_yieldValue('Foo'); @@ -2391,7 +2391,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(ReactNoop.getChildren()).toEqual([span('A'), span('Loading B...')]); }); - // @gate enableCache && enableSuspenseAvoidThisFallback + // @gate enableLegacyCache && enableSuspenseAvoidThisFallback it('keeps showing an avoided parent fallback if it is already showing', async () => { function Foo({showB}) { Scheduler.unstable_yieldValue('Foo'); @@ -2449,7 +2449,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { } }); - // @gate enableCache + // @gate enableLegacyCache it('keeps showing an undefined fallback if it is already showing', async () => { function Foo({showB}) { Scheduler.unstable_yieldValue('Foo'); @@ -2500,7 +2500,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { } }); - // @gate enableCache + // @gate enableLegacyCache it('commits a suspended idle pri render within a reasonable time', async () => { function Foo({renderContent}) { return ( @@ -2549,7 +2549,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { }); describe('startTransition', () => { - // @gate enableCache + // @gate enableLegacyCache it('top level render', async () => { function App({page}) { return ( @@ -2588,7 +2588,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(ReactNoop.getChildren()).toEqual([span('B')]); }); - // @gate enableCache + // @gate enableLegacyCache it('hooks', async () => { let transitionToPage; function App() { @@ -2640,7 +2640,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(ReactNoop.getChildren()).toEqual([span('B')]); }); - // @gate enableCache + // @gate enableLegacyCache it('classes', async () => { let transitionToPage; class App extends React.Component { @@ -2697,7 +2697,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { }); describe('delays transitions when using React.startTransition', () => { - // @gate enableCache + // @gate enableLegacyCache it('top level render', async () => { function App({page}) { return ( @@ -2747,7 +2747,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(ReactNoop.getChildren()).toEqual([span('B')]); }); - // @gate enableCache + // @gate enableLegacyCache it('hooks', async () => { let transitionToPage; function App() { @@ -2814,7 +2814,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { }); }); - // @gate enableCache + // @gate enableLegacyCache it('classes', async () => { let transitionToPage; class App extends React.Component { @@ -2884,7 +2884,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { }); }); - // @gate enableCache && enableSuspenseAvoidThisFallback + // @gate enableLegacyCache && enableSuspenseAvoidThisFallback it('do not show placeholder when updating an avoided boundary with startTransition', async () => { function App({page}) { return ( @@ -2928,7 +2928,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { ); }); - // @gate enableCache && enableSuspenseAvoidThisFallback + // @gate enableLegacyCache && enableSuspenseAvoidThisFallback it('do not show placeholder when mounting an avoided boundary with startTransition', async () => { function App({page}) { return ( @@ -2981,7 +2981,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { // TODO: This test is specifically about avoided commits that suspend for a // JND. We may remove this behavior. - // @gate enableCache + // @gate enableLegacyCache it("suspended commit remains suspended even if there's another update at same expiration", async () => { // Regression test function App({text}) { @@ -3088,7 +3088,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(root).toMatchRenderedOutput(); }); - // @gate enableCache && enableLegacyHidden + // @gate enableLegacyCache && enableLegacyHidden it('should not render hidden content while suspended on higher pri', async () => { function Offscreen() { Scheduler.unstable_yieldValue('Offscreen'); @@ -3138,7 +3138,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { ); }); - // @gate enableCache && enableLegacyHidden + // @gate enableLegacyCache && enableLegacyHidden it('should be able to unblock higher pri content before suspended hidden', async () => { function Offscreen() { Scheduler.unstable_yieldValue('Offscreen'); @@ -3193,7 +3193,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { ); }); - // @gate enableCache + // @gate enableLegacyCache it( 'multiple updates originating inside a Suspense boundary at different ' + 'priority levels are not dropped', @@ -3247,7 +3247,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { }, ); - // @gate enableCache + // @gate enableLegacyCache it( 'multiple updates originating inside a Suspense boundary at different ' + 'priority levels are not dropped, including Idle updates', @@ -3312,7 +3312,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { }, ); - // @gate enableCache + // @gate enableLegacyCache it( 'fallback component can update itself even after a high pri update to ' + 'the primary tree suspends', @@ -3397,7 +3397,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { }, ); - // @gate enableCache + // @gate enableLegacyCache it( 'regression: primary fragment fiber is not always part of setState ' + 'return path', @@ -3476,7 +3476,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { }, ); - // @gate enableCache + // @gate enableLegacyCache it( 'regression: primary fragment fiber is not always part of setState ' + 'return path (another case)', @@ -3558,7 +3558,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { }, ); - // @gate enableCache + // @gate enableLegacyCache it( 'after showing fallback, should not flip back to primary content until ' + 'the update that suspended finishes', @@ -3702,7 +3702,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { }, ); - // @gate enableCache + // @gate enableLegacyCache it('a high pri update can unhide a boundary that suspended at a different level', async () => { const {useState, useEffect} = React; const root = ReactNoop.createRoot(); @@ -3799,7 +3799,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { ); }); - // @gate enableCache + // @gate enableLegacyCache // @gate !enableSyncDefaultUpdates it('regression: ping at high priority causes update to be dropped', async () => { const {useState, useTransition} = React; @@ -3911,7 +3911,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { }); // Regression: https://github.com/facebook/react/issues/18486 - // @gate enableCache + // @gate enableLegacyCache it('does not get stuck in pending state with render phase updates', async () => { let setTextWithShortTransition; let setTextWithLongTransition; @@ -4021,7 +4021,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { }); }); - // @gate enableCache + // @gate enableLegacyCache it('regression: #18657', async () => { const {useState} = React; @@ -4068,7 +4068,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(root).toMatchRenderedOutput(); }); - // @gate enableCache + // @gate enableLegacyCache it('retries have lower priority than normal updates', async () => { const {useState} = React; @@ -4123,7 +4123,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { ); }); - // @gate enableCache + // @gate enableLegacyCache it('should fire effect clean-up when deleting suspended tree', async () => { const {useEffect} = React; @@ -4171,7 +4171,7 @@ describe('ReactSuspenseWithNoopRenderer', () => { expect(Scheduler).toHaveYielded(['Unmount Child']); }); - // @gate enableCache + // @gate enableLegacyCache it('should fire effect clean-up when deleting suspended tree (legacy)', async () => { const {useEffect} = React; diff --git a/packages/react-reconciler/src/__tests__/ReactThenable-test.js b/packages/react-reconciler/src/__tests__/ReactThenable-test.js index 2ac5c8a21995a..bc18fbf7632c1 100644 --- a/packages/react-reconciler/src/__tests__/ReactThenable-test.js +++ b/packages/react-reconciler/src/__tests__/ReactThenable-test.js @@ -16,7 +16,7 @@ describe('ReactThenable', () => { ReactNoop = require('react-noop-renderer'); Scheduler = require('scheduler'); act = require('jest-react').act; - use = React.experimental_use; + use = React.use; Suspense = React.Suspense; startTransition = React.startTransition; }); diff --git a/packages/react-reconciler/src/__tests__/ReactTransition-test.js b/packages/react-reconciler/src/__tests__/ReactTransition-test.js index a5b25a9cc766e..560bb527b1b0e 100644 --- a/packages/react-reconciler/src/__tests__/ReactTransition-test.js +++ b/packages/react-reconciler/src/__tests__/ReactTransition-test.js @@ -158,7 +158,7 @@ describe('ReactTransition', () => { } } - // @gate enableCache + // @gate enableLegacyCache test('isPending works even if called from outside an input event', async () => { let start; function App() { @@ -199,7 +199,7 @@ describe('ReactTransition', () => { expect(root).toMatchRenderedOutput('Async'); }); - // @gate enableCache + // @gate enableLegacyCache test( 'when multiple transitions update the same queue, only the most recent ' + 'one is allowed to finish (no intermediate states)', @@ -318,7 +318,7 @@ describe('ReactTransition', () => { ); // Same as previous test, but for class update queue. - // @gate enableCache + // @gate enableLegacyCache test( 'when multiple transitions update the same queue, only the most recent ' + 'one is allowed to finish (no intermediate states) (classes)', @@ -442,7 +442,7 @@ describe('ReactTransition', () => { }, ); - // @gate enableCache + // @gate enableLegacyCache test( 'when multiple transitions update overlapping queues, all the transitions ' + 'across all the queues are entangled', @@ -547,7 +547,7 @@ describe('ReactTransition', () => { }, ); - // @gate enableCache + // @gate enableLegacyCache test('interrupt a refresh transition if a new transition is scheduled', async () => { const root = ReactNoop.createRoot(); @@ -602,7 +602,7 @@ describe('ReactTransition', () => { expect(root).toMatchRenderedOutput('Updated'); }); - // @gate enableCache + // @gate enableLegacyCache test( "interrupt a refresh transition when something suspends and we've " + 'already bailed out on another transition in a parent', @@ -704,7 +704,7 @@ describe('ReactTransition', () => { }, ); - // @gate enableCache + // @gate enableLegacyCache test( 'interrupt a refresh transition when something suspends and a parent ' + 'component received an interleaved update after its queue was processed', @@ -824,7 +824,7 @@ describe('ReactTransition', () => { expect(root).toMatchRenderedOutput('Transition pri: 1, Normal pri: 1'); }); - // @gate enableCache + // @gate enableLegacyCache it('should render normal pri updates before transition suspense retries', async () => { let updateTransitionPri; let updateNormalPri; diff --git a/packages/react-server-dom-webpack/package.json b/packages/react-server-dom-webpack/package.json index 92c6c8d73213d..f68394b92fc4b 100644 --- a/packages/react-server-dom-webpack/package.json +++ b/packages/react-server-dom-webpack/package.json @@ -1,7 +1,7 @@ { "name": "react-server-dom-webpack", "description": "React Server Components bindings for DOM using Webpack. This is intended to be integrated into meta-frameworks. It is not intended to be imported directly.", - "version": "0.1.0", + "version": "18.2.0", "keywords": [ "react" ], @@ -50,8 +50,8 @@ "node": ">=0.10.0" }, "peerDependencies": { - "react": "^17.0.0", - "react-dom": "^17.0.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", "webpack": "^5.59.0" }, "dependencies": { diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js index 5e6a431830cb7..524227cacd763 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js @@ -41,7 +41,7 @@ describe('ReactFlightDOM', () => { Stream = require('stream'); React = require('react'); - use = React.experimental_use; + use = React.use; Suspense = React.Suspense; ReactDOMClient = require('react-dom/client'); ReactServerDOMWriter = require('react-server-dom-webpack/server.node'); diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js index a2a4c6ca7cd9c..54b98f5351a14 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js @@ -40,7 +40,7 @@ describe('ReactFlightDOMBrowser', () => { ReactServerDOMWriter = require('react-server-dom-webpack/server.browser'); ReactServerDOMReader = require('react-server-dom-webpack/client'); Suspense = React.Suspense; - use = React.experimental_use; + use = React.use; }); async function readResult(stream) { diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js index d7b56c551f194..04b905efa759e 100644 --- a/packages/react/index.classic.fb.js +++ b/packages/react/index.classic.fb.js @@ -27,12 +27,12 @@ export { createMutableSource as unstable_createMutableSource, createRef, createServerContext, - experimental_use, + use, forwardRef, isValidElement, lazy, memo, - experimental_cache, + cache, startTransition, startTransition as unstable_startTransition, // TODO: Remove once call sights updated to startTransition unstable_Cache, diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js index b296be4bb194c..a5b16fcadfc76 100644 --- a/packages/react/index.experimental.js +++ b/packages/react/index.experimental.js @@ -24,12 +24,12 @@ export { createFactory, createRef, createServerContext, - experimental_use, + use, forwardRef, isValidElement, lazy, memo, - experimental_cache, + cache, startTransition, unstable_Cache, unstable_DebugTracingMode, diff --git a/packages/react/index.js b/packages/react/index.js index 62c7d2f281404..bee9b71e48fed 100644 --- a/packages/react/index.js +++ b/packages/react/index.js @@ -49,12 +49,12 @@ export { createMutableSource, createRef, createServerContext, - experimental_use, + use, forwardRef, isValidElement, lazy, memo, - experimental_cache, + cache, startTransition, unstable_Cache, unstable_DebugTracingMode, diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js index ba6a505d96920..2c446d7bd7f91 100644 --- a/packages/react/index.modern.fb.js +++ b/packages/react/index.modern.fb.js @@ -26,12 +26,12 @@ export { createMutableSource as unstable_createMutableSource, createRef, createServerContext, - experimental_use, + use, forwardRef, isValidElement, lazy, memo, - experimental_cache, + cache, startTransition, startTransition as unstable_startTransition, // TODO: Remove once call sights updated to startTransition unstable_Cache, diff --git a/packages/react/index.stable.js b/packages/react/index.stable.js index b7cf3f51af0bd..95f0eeb9b5aae 100644 --- a/packages/react/index.stable.js +++ b/packages/react/index.stable.js @@ -22,10 +22,14 @@ export { createElement, createFactory, createRef, + createServerContext, + use, forwardRef, isValidElement, lazy, memo, + cache, + unstable_useCacheRefresh, startTransition, useId, useCallback, @@ -33,7 +37,6 @@ export { useDebugValue, useDeferredValue, useEffect, - experimental_useEvent, useImperativeHandle, useInsertionEffect, useLayoutEffect, diff --git a/packages/react/src/React.js b/packages/react/src/React.js index 3c3cafe88bcf6..399c62f0dc58c 100644 --- a/packages/react/src/React.js +++ b/packages/react/src/React.js @@ -101,7 +101,7 @@ export { forwardRef, lazy, memo, - cache as experimental_cache, + cache, useCallback, useContext, useEffect, @@ -139,7 +139,7 @@ export { getCacheForType as unstable_getCacheForType, useCacheRefresh as unstable_useCacheRefresh, REACT_CACHE_TYPE as unstable_Cache, - use as experimental_use, + use, useMemoCache as unstable_useMemoCache, // enableScopeAPI REACT_SCOPE_TYPE as unstable_Scope, diff --git a/packages/react/src/ReactSharedSubset.experimental.js b/packages/react/src/ReactSharedSubset.experimental.js index 94dd4c2efbc88..266fac65ea890 100644 --- a/packages/react/src/ReactSharedSubset.experimental.js +++ b/packages/react/src/ReactSharedSubset.experimental.js @@ -22,12 +22,12 @@ export { createElement, createRef, createServerContext, - experimental_use, + use, forwardRef, isValidElement, lazy, memo, - experimental_cache, + cache, startTransition, unstable_DebugTracingMode, unstable_getCacheSignal, diff --git a/packages/react/src/ReactSharedSubset.js b/packages/react/src/ReactSharedSubset.js index c2585a92bfedc..c880cc9ada182 100644 --- a/packages/react/src/ReactSharedSubset.js +++ b/packages/react/src/ReactSharedSubset.js @@ -7,7 +7,31 @@ * @flow */ -// eslint-disable-next-line react-internal/prod-error-codes -throw new Error( - 'This entry point is not yet supported outside of experimental channels', -); +// Patch fetch +import './ReactFetch'; + +export { + __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, + Children, + Fragment, + Profiler, + StrictMode, + Suspense, + cloneElement, + createElement, + createRef, + createServerContext, + use, + forwardRef, + isValidElement, + lazy, + memo, + cache, + startTransition, + useId, + useCallback, + useContext, + useDebugValue, + useMemo, + version, +} from './React'; diff --git a/packages/react/src/__tests__/ReactFetch-test.js b/packages/react/src/__tests__/ReactFetch-test.js index 38640033bb8fe..e1da3b10abf9a 100644 --- a/packages/react/src/__tests__/ReactFetch-test.js +++ b/packages/react/src/__tests__/ReactFetch-test.js @@ -44,14 +44,15 @@ describe('ReactFetch', () => { fetchCount = 0; global.fetch = fetchMock; - if (gate(flags => flags.experimental && !flags.www)) { + if (gate(flags => !flags.www)) { jest.mock('react', () => require('react/react.shared-subset')); } + React = require('react'); ReactServerDOMServer = require('react-server-dom-webpack/server.browser'); ReactServerDOMClient = require('react-server-dom-webpack/client'); - use = React.experimental_use; - cache = React.experimental_cache; + use = React.use; + cache = React.cache; }); async function render(Component) { diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index 32d9db7eed807..d8414b7c037d1 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -82,9 +82,10 @@ export const enableLegacyFBSupport = false; // likely to include in an upcoming release. // ----------------------------------------------------------------------------- -export const enableCache = __EXPERIMENTAL__; +export const enableCache = true; +export const enableLegacyCache = __EXPERIMENTAL__; export const enableCacheElement = __EXPERIMENTAL__; -export const enableFetchInstrumentation = __EXPERIMENTAL__; +export const enableFetchInstrumentation = true; export const enableTransitionTracing = false; @@ -101,9 +102,9 @@ export const enableSuspenseAvoidThisFallbackFizz = false; export const enableCPUSuspense = __EXPERIMENTAL__; -export const enableHostSingletons = __EXPERIMENTAL__; +export const enableHostSingletons = true; -export const enableFloat = __EXPERIMENTAL__; +export const enableFloat = true; // When a node is unmounted, recurse into the Fiber subtree and clean out // references. Each level cleans up more fiber fields than the previous level. @@ -118,7 +119,7 @@ export const enableFloat = __EXPERIMENTAL__; // aggressiveness. export const deletedTreeCleanUpLevel = 3; -export const enableUseHook = __EXPERIMENTAL__; +export const enableUseHook = true; // Enables unstable_useMemoCache hook, intended as a compilation target for // auto-memoization. @@ -253,7 +254,7 @@ export const enableUpdaterTracking = __PROFILE__; // Only enabled in RN, related to enableComponentStackLocations export const disableNativeComponentFrames = false; -export const enableServerContext = __EXPERIMENTAL__; +export const enableServerContext = true; // Internal only. export const enableGetInspectorDataForInstanceInProduction = false; diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js index 6f7548f08173c..c4afa33704b20 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js @@ -28,6 +28,7 @@ export const enableProfilerNestedUpdatePhase = __PROFILE__; export const enableProfilerNestedUpdateScheduledHook = false; export const enableUpdaterTracking = __PROFILE__; export const enableCache = false; +export const enableLegacyCache = false; export const enableCacheElement = true; export const enableFetchInstrumentation = false; export const enableSchedulerDebugging = false; @@ -51,7 +52,7 @@ export const warnAboutSpreadingKeyToJSX = false; export const enableSuspenseAvoidThisFallback = false; export const enableSuspenseAvoidThisFallbackFizz = false; export const enableCPUSuspense = true; -export const enableUseHook = false; +export const enableUseHook = true; export const enableUseMemoCacheHook = true; export const enableUseEventHook = false; export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true; @@ -76,14 +77,14 @@ export const allowConcurrentByDefault = true; export const enableCustomElementPropertySupport = false; export const consoleManagedByDevToolsDuringStrictMode = false; -export const enableServerContext = false; +export const enableServerContext = true; export const enableUseMutableSource = true; export const enableTransitionTracing = false; -export const enableFloat = false; -export const enableHostSingletons = false; +export const enableFloat = true; +export const enableHostSingletons = true; export const useModernStrictMode = false; export const enableFizzExternalRuntime = false; diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js index 70ddeda4ea85e..c457dee5ce523 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-oss.js +++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js @@ -21,6 +21,7 @@ export const enableProfilerNestedUpdatePhase = __PROFILE__; export const enableProfilerNestedUpdateScheduledHook = false; export const enableUpdaterTracking = __PROFILE__; export const enableCache = false; +export const enableLegacyCache = false; export const enableCacheElement = false; export const enableFetchInstrumentation = false; export const disableJavaScriptURLs = false; @@ -41,7 +42,7 @@ export const warnAboutSpreadingKeyToJSX = false; export const enableSuspenseAvoidThisFallback = false; export const enableSuspenseAvoidThisFallbackFizz = false; export const enableCPUSuspense = false; -export const enableUseHook = false; +export const enableUseHook = true; export const enableUseMemoCacheHook = false; export const enableUseEventHook = false; export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true; @@ -67,13 +68,13 @@ export const allowConcurrentByDefault = false; export const enableCustomElementPropertySupport = false; export const consoleManagedByDevToolsDuringStrictMode = false; -export const enableServerContext = false; +export const enableServerContext = true; export const enableUseMutableSource = false; export const enableTransitionTracing = false; -export const enableFloat = false; -export const enableHostSingletons = false; +export const enableFloat = true; +export const enableHostSingletons = true; export const useModernStrictMode = false; export const enableFizzExternalRuntime = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js index 5419b61697ec4..dd22b893d239d 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js @@ -20,9 +20,10 @@ export const enableProfilerCommitHooks = __PROFILE__; export const enableProfilerNestedUpdatePhase = __PROFILE__; export const enableProfilerNestedUpdateScheduledHook = false; export const enableUpdaterTracking = false; -export const enableCache = __EXPERIMENTAL__; +export const enableCache = true; +export const enableLegacyCache = __EXPERIMENTAL__; export const enableCacheElement = __EXPERIMENTAL__; -export const enableFetchInstrumentation = __EXPERIMENTAL__; +export const enableFetchInstrumentation = true; export const disableJavaScriptURLs = false; export const disableCommentsAsDOMContainers = true; export const disableInputAttributeSyncing = false; @@ -41,7 +42,7 @@ export const warnAboutSpreadingKeyToJSX = false; export const enableSuspenseAvoidThisFallback = false; export const enableSuspenseAvoidThisFallbackFizz = false; export const enableCPUSuspense = false; -export const enableUseHook = false; +export const enableUseHook = true; export const enableUseMemoCacheHook = false; export const enableUseEventHook = false; export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true; @@ -67,13 +68,13 @@ export const allowConcurrentByDefault = false; export const enableCustomElementPropertySupport = false; export const consoleManagedByDevToolsDuringStrictMode = false; -export const enableServerContext = false; +export const enableServerContext = true; export const enableUseMutableSource = false; export const enableTransitionTracing = false; -export const enableFloat = false; -export const enableHostSingletons = false; +export const enableFloat = true; +export const enableHostSingletons = true; export const useModernStrictMode = false; export const enableFizzExternalRuntime = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js index c95aae7a55fa4..de6d821d3b24a 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js @@ -21,6 +21,7 @@ export const enableProfilerNestedUpdatePhase = __PROFILE__; export const enableProfilerNestedUpdateScheduledHook = false; export const enableUpdaterTracking = false; export const enableCache = true; +export const enableLegacyCache = false; export const enableCacheElement = true; export const enableFetchInstrumentation = false; export const disableJavaScriptURLs = false; @@ -50,7 +51,7 @@ export const deferRenderPhaseUpdateToNextBatch = false; export const enableSuspenseAvoidThisFallback = false; export const enableSuspenseAvoidThisFallbackFizz = false; export const enableCPUSuspense = false; -export const enableUseHook = false; +export const enableUseHook = true; export const enableUseMemoCacheHook = false; export const enableUseEventHook = false; export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true; @@ -65,13 +66,13 @@ export const enableSyncDefaultUpdates = true; export const allowConcurrentByDefault = true; export const consoleManagedByDevToolsDuringStrictMode = false; -export const enableServerContext = false; +export const enableServerContext = true; export const enableUseMutableSource = false; export const enableTransitionTracing = false; -export const enableFloat = false; -export const enableHostSingletons = false; +export const enableFloat = true; +export const enableHostSingletons = true; export const useModernStrictMode = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js index 6fdd83b52a8fe..65e4f8c4da46f 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js @@ -21,6 +21,7 @@ export const enableProfilerNestedUpdatePhase = __PROFILE__; export const enableProfilerNestedUpdateScheduledHook = false; export const enableUpdaterTracking = false; export const enableCache = true; +export const enableLegacyCache = true; export const enableCacheElement = true; export const enableFetchInstrumentation = false; export const enableSchedulerDebugging = false; @@ -41,7 +42,7 @@ export const warnAboutSpreadingKeyToJSX = false; export const enableSuspenseAvoidThisFallback = true; export const enableSuspenseAvoidThisFallbackFizz = false; export const enableCPUSuspense = false; -export const enableUseHook = false; +export const enableUseHook = true; export const enableUseMemoCacheHook = false; export const enableUseEventHook = false; export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true; @@ -67,15 +68,15 @@ export const allowConcurrentByDefault = true; export const enableCustomElementPropertySupport = false; export const consoleManagedByDevToolsDuringStrictMode = false; -export const enableServerContext = false; +export const enableServerContext = true; // Some www surfaces are still using this. Remove once they have been migrated. export const enableUseMutableSource = true; export const enableTransitionTracing = false; -export const enableFloat = false; -export const enableHostSingletons = false; +export const enableFloat = true; +export const enableHostSingletons = true; export const useModernStrictMode = false; export const enableFizzExternalRuntime = false; diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js index c3b2d18890022..6bf55b61ba397 100644 --- a/packages/shared/forks/ReactFeatureFlags.testing.js +++ b/packages/shared/forks/ReactFeatureFlags.testing.js @@ -21,6 +21,7 @@ export const enableProfilerNestedUpdatePhase = __PROFILE__; export const enableProfilerNestedUpdateScheduledHook = false; export const enableUpdaterTracking = false; export const enableCache = __EXPERIMENTAL__; +export const enableLegacyCache = __EXPERIMENTAL__; export const enableCacheElement = __EXPERIMENTAL__; export const enableFetchInstrumentation = __EXPERIMENTAL__; export const disableJavaScriptURLs = false; @@ -41,7 +42,7 @@ export const warnAboutSpreadingKeyToJSX = false; export const enableSuspenseAvoidThisFallback = false; export const enableSuspenseAvoidThisFallbackFizz = false; export const enableCPUSuspense = false; -export const enableUseHook = false; +export const enableUseHook = true; export const enableUseMemoCacheHook = false; export const enableUseEventHook = false; export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true; @@ -67,13 +68,13 @@ export const allowConcurrentByDefault = false; export const enableCustomElementPropertySupport = false; export const consoleManagedByDevToolsDuringStrictMode = false; -export const enableServerContext = false; +export const enableServerContext = true; export const enableUseMutableSource = false; export const enableTransitionTracing = false; -export const enableFloat = false; -export const enableHostSingletons = false; +export const enableFloat = true; +export const enableHostSingletons = true; export const useModernStrictMode = false; export const enableFizzExternalRuntime = false; diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js index 042b1cfa41a43..f8fd3ca80587d 100644 --- a/packages/shared/forks/ReactFeatureFlags.testing.www.js +++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js @@ -21,6 +21,7 @@ export const enableProfilerNestedUpdatePhase = false; export const enableProfilerNestedUpdateScheduledHook = false; export const enableUpdaterTracking = false; export const enableCache = true; +export const enableLegacyCache = true; export const enableCacheElement = true; export const enableFetchInstrumentation = false; export const disableJavaScriptURLs = true; @@ -41,7 +42,7 @@ export const warnAboutSpreadingKeyToJSX = false; export const enableSuspenseAvoidThisFallback = true; export const enableSuspenseAvoidThisFallbackFizz = false; export const enableCPUSuspense = true; -export const enableUseHook = false; +export const enableUseHook = true; export const enableUseMemoCacheHook = false; export const enableUseEventHook = false; export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true; @@ -67,14 +68,14 @@ export const allowConcurrentByDefault = true; export const enableCustomElementPropertySupport = false; export const consoleManagedByDevToolsDuringStrictMode = false; -export const enableServerContext = false; +export const enableServerContext = true; // Some www surfaces are still using this. Remove once they have been migrated. export const enableUseMutableSource = true; export const enableTransitionTracing = false; -export const enableFloat = false; -export const enableHostSingletons = false; +export const enableFloat = true; +export const enableHostSingletons = true; export const useModernStrictMode = false; export const enableFizzExternalRuntime = false; diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js index 5819d2a1f8e57..51ff1be193555 100644 --- a/packages/shared/forks/ReactFeatureFlags.www.js +++ b/packages/shared/forks/ReactFeatureFlags.www.js @@ -50,11 +50,11 @@ export const enableUpdaterTracking = __PROFILE__; export const enableSuspenseAvoidThisFallback = true; export const enableSuspenseAvoidThisFallbackFizz = false; export const enableCPUSuspense = true; -export const enableFloat = false; +export const enableFloat = true; export const enableUseHook = true; export const enableUseMemoCacheHook = true; export const enableUseEventHook = true; -export const enableHostSingletons = false; +export const enableHostSingletons = true; // Logs additional User Timing API marks for use with an experimental profiling tool. export const enableSchedulingProfiler: boolean = @@ -71,6 +71,7 @@ export const warnAboutDefaultPropsOnFunctionComponents = false; export const enableGetInspectorDataForInstanceInProduction = false; export const enableCache = true; +export const enableLegacyCache = true; export const enableCacheElement = true; export const enableFetchInstrumentation = false;