Upgrade useSyncExternalStore to alpha channel (#22662)

* Move useSyncExternalStore shim to a nested entrypoint

Also renames `useSyncExternalStoreExtra` to
`useSyncExternalStoreWithSelector`.

- 'use-sync-external-store/shim' -> A shim for `useSyncExternalStore`
  that works in React 16 and 17 (any release that supports hooks). The
  module will first check if the built-in React API exists, before
  falling back to the shim.
- 'use-sync-external-store/with-selector' -> An extended version of
  `useSyncExternalStore` that also supports `selector` and `isEqual`
  options. It does _not_ shim `use-sync-external-store`; it composes the
  built-in React API. **Use this if you only support 18+.**
- 'use-sync-external-store/shim/with-selector' -> Same API, but it
  composes `use-sync-external-store/shim` instead. **Use this for
  compatibility with 16 and 17.**
- 'use-sync-external-store' -> Re-exports React's built-in API. Not
  meant to be used. It will warn and direct users to either the shim or
  the built-in API.

* Upgrade useSyncExternalStore to alpha channel

Author: acdlite

ReactVersions.js

@@ -36,6 +36,7 @@ const stablePackages = {
   'react-refresh': '0.11.0',
   'react-test-renderer': ReactVersion,
   'use-subscription': '1.6.0',
+  'use-sync-external-store': '1.0.0',
   scheduler: '0.21.0',
 };
 
@@ -47,7 +48,6 @@ const experimentalPackages = [
   'react-fs',
   'react-pg',
   'react-server-dom-webpack',
-  'use-sync-external-store',
 ];
 
 module.exports = {

packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js

@@ -1055,9 +1055,8 @@ describe('ReactHooksInspectionIntegration', () => {
     ]);
   });
 
-  // @gate experimental || www
   it('should support composite useSyncExternalStore hook', () => {
-    const useSyncExternalStore = React.unstable_useSyncExternalStore;
+    const useSyncExternalStore = React.useSyncExternalStore;
     function Foo() {
       const value = useSyncExternalStore(
         () => () => {},

packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js

@@ -18,7 +18,7 @@ let ReactDOMFizzServer;
 let Suspense;
 let SuspenseList;
 let useSyncExternalStore;
-let useSyncExternalStoreExtra;
+let useSyncExternalStoreWithSelector;
 let PropTypes;
 let textCache;
 let window;
@@ -43,11 +43,23 @@ describe('ReactDOMFizzServer', () => {
     Stream = require('stream');
     Suspense = React.Suspense;
     SuspenseList = React.SuspenseList;
-    useSyncExternalStore = React.unstable_useSyncExternalStore;
-    useSyncExternalStoreExtra = require('use-sync-external-store/extra')
-      .useSyncExternalStoreExtra;
+
     PropTypes = require('prop-types');
 
+    if (gate(flags => flags.source)) {
+      // The `with-selector` module composes the main `use-sync-external-store`
+      // entrypoint. In the compiled artifacts, this is resolved to the `shim`
+      // implementation by our build config, but when running the tests against
+      // the source files, we need to tell Jest how to resolve it. Because this
+      // is a source module, this mock has no affect on the build tests.
+      jest.mock('use-sync-external-store/src/useSyncExternalStore', () =>
+        jest.requireActual('react'),
+      );
+    }
+    useSyncExternalStore = React.useSyncExternalStore;
+    useSyncExternalStoreWithSelector = require('use-sync-external-store/with-selector')
+      .useSyncExternalStoreWithSelector;
+
     textCache = new Map();
 
     // Test Environment
@@ -1663,7 +1675,6 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
-  // @gate supportsNativeUseSyncExternalStore
   // @gate experimental
   it('calls getServerSnapshot instead of getSnapshot', async () => {
     const ref = React.createRef();
@@ -1734,7 +1745,6 @@ describe('ReactDOMFizzServer', () => {
 
   // The selector implementation uses the lazy ref initialization pattern
   // @gate !(enableUseRefAccessWarning && __DEV__)
-  // @gate supportsNativeUseSyncExternalStore
   // @gate experimental
   it('calls getServerSnapshot instead of getSnapshot (with selector and isEqual)', async () => {
     // Same as previous test, but with a selector that returns a complex object
@@ -1767,7 +1777,7 @@ describe('ReactDOMFizzServer', () => {
     }
 
     function App() {
-      const {env} = useSyncExternalStoreExtra(
+      const {env} = useSyncExternalStoreWithSelector(
         subscribe,
         getClientSnapshot,
         getServerSnapshot,
@@ -1815,7 +1825,6 @@ describe('ReactDOMFizzServer', () => {
     expect(ref.current).toEqual(serverRenderedDiv);
   });
 
-  // @gate supportsNativeUseSyncExternalStore
   // @gate experimental
   it(
     'errors during hydration force a client render at the nearest Suspense ' +
@@ -1964,7 +1973,6 @@ describe('ReactDOMFizzServer', () => {
     },
   );
 
-  // @gate supportsNativeUseSyncExternalStore
   // @gate experimental
   it(
     'errors during hydration force a client render at the nearest Suspense ' +

packages/react-reconciler/src/__tests__/useSyncExternalStore-test.js

@@ -36,7 +36,7 @@ describe('useSyncExternalStore', () => {
     useImperativeHandle = React.useImperativeHandle;
     forwardRef = React.forwardRef;
     useRef = React.useRef;
-    useSyncExternalStore = React.unstable_useSyncExternalStore;
+    useSyncExternalStore = React.useSyncExternalStore;
     startTransition = React.startTransition;
 
     act = require('jest-react').act;
@@ -70,7 +70,6 @@ describe('useSyncExternalStore', () => {
     };
   }
 
-  // @gate supportsNativeUseSyncExternalStore
   test(
     'detects interleaved mutations during a concurrent read before ' +
       'layout effects fire',

packages/react/index.classic.fb.js

@@ -54,7 +54,6 @@ export {
   useMutableSource,
   useMutableSource as unstable_useMutableSource,
   useSyncExternalStore,
-  useSyncExternalStore as unstable_useSyncExternalStore,
   useReducer,
   useRef,
   useState,

packages/react/index.experimental.js

@@ -47,7 +47,7 @@ export {
   useLayoutEffect,
   useMemo,
   useMutableSource as unstable_useMutableSource,
-  useSyncExternalStore as unstable_useSyncExternalStore,
+  useSyncExternalStore,
   useReducer,
   useRef,
   useState,

packages/react/index.js

@@ -73,7 +73,6 @@ export {
   useMemo,
   useMutableSource,
   useSyncExternalStore,
-  useSyncExternalStore as unstable_useSyncExternalStore,
   useReducer,
   useRef,
   useState,

packages/react/index.modern.fb.js

@@ -53,7 +53,6 @@ export {
   useMutableSource,
   useMutableSource as unstable_useMutableSource,
   useSyncExternalStore,
-  useSyncExternalStore as unstable_useSyncExternalStore,
   useReducer,
   useRef,
   useState,

packages/react/index.stable.js

@@ -40,6 +40,7 @@ export {
   useLayoutEffect,
   useMemo,
   useMutableSource as unstable_useMutableSource,
+  useSyncExternalStore,
   useReducer,
   useRef,
   useState,

packages/use-sync-external-store/index.js

@@ -9,4 +9,4 @@
 
 'use strict';
 
-export * from './src/useSyncExternalStore';
+export {useSyncExternalStore} from './src/useSyncExternalStore';