Implement a "compat" entry point that falls back to the uSES shim

We use the same trick we do with batchedUpdates: a module with
variables + getter/setter functions. Each entry point is then
responsible for importing the right variables and setting them.
This happens before the modules are loaded, so we can then import
the getters where they're needed and call them to get the right
instances of `useSyncExternalStore`.

The "compat" and "alternate-renderer" entry points both use the
`uSES` shim, so they should be compatible back to React 16.9+.
The primary entry point imports directly from React, and thus
assumes React 18.

Author: markerikson

src/alternate-renderers.ts

@@ -1,4 +1,14 @@
-export * from './exports'
+// The "alternate renderers" entry point is primarily here to fall back on a no-op
+// version of `unstable_batchedUpdates`, for use with renderers other than ReactDOM/RN.
+// Examples include React-Three-Fiber, Ink, etc.
+// Because of that, we'll also assume the useSyncExternalStore compat shim is needed.
+
+import { useSyncExternalStore } from 'use-sync-external-store/shim'
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
+
+import { setSyncFunctions } from './utils/useSyncExternalStore'
+
+setSyncFunctions(useSyncExternalStore, useSyncExternalStoreWithSelector)
 
 import { getBatch } from './utils/batch'
 
@@ -7,3 +17,5 @@ import { getBatch } from './utils/batch'
 const batch = getBatch()
 
 export { batch }
+
+export * from './exports'

src/compat.ts

@@ -0,0 +1,20 @@
+// The "compat" entry point assumes we're working with standard ReactDOM/RN, but
+// older versions that do not include `useSyncExternalStore` (React 16.9 - 17.x).
+// Because of that, the useSyncExternalStore compat shim is needed.
+
+import { useSyncExternalStore } from 'use-sync-external-store/shim'
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
+
+import { setSyncFunctions } from './utils/useSyncExternalStore'
+import { unstable_batchedUpdates as batch } from './utils/reactBatchedUpdates'
+import { setBatch } from './utils/batch'
+
+setSyncFunctions(useSyncExternalStore, useSyncExternalStoreWithSelector)
+
+// Enable batched updates in our subscriptions for use
+// with standard React renderers (ReactDOM, React Native)
+setBatch(batch)
+
+export { batch }
+
+export * from './exports'

src/components/Context.ts

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Action, AnyAction, Store } from 'redux'
+import type { Action, AnyAction, Store } from 'redux'
 import type { Subscription } from '../utils/Subscription'
 
 export interface ReactReduxContextValue<

src/components/connect.tsx

@@ -1,13 +1,6 @@
 /* eslint-disable valid-jsdoc, @typescript-eslint/no-unused-vars */
 import hoistStatics from 'hoist-non-react-statics'
-import React, {
-  useContext,
-  useMemo,
-  useRef,
-  useReducer,
-  // @ts-ignore
-  useSyncExternalStore,
-} from 'react'
+import React, { useContext, useMemo, useRef, useReducer } from 'react'
 import { isValidElementType, isContextConsumer } from 'react-is'
 
 import type { Store, Dispatch, Action, AnyAction } from 'redux'
@@ -35,6 +28,7 @@ import defaultMergePropsFactories from '../connect/mergeProps'
 
 import { createSubscription, Subscription } from '../utils/Subscription'
 import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect'
+import { getSyncFunctions } from '../utils/useSyncExternalStore'
 import shallowEqual from '../utils/shallowEqual'
 
 import {
@@ -43,6 +37,8 @@ import {
   ReactReduxContextInstance,
 } from './Context'
 
+const [useSyncExternalStore] = getSyncFunctions()
+
 // Define some constant arrays just to avoid re-creating these
 const EMPTY_ARRAY: [unknown, number] = [null, 0]
 const NO_SUBSCRIPTION_ARRAY = [null, null]

src/hooks/useSelector.ts

@@ -1,11 +1,11 @@
 import { useContext, useDebugValue } from 'react'
 
-// @ts-ignore
-import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector'
-
 import { useReduxContext as useDefaultReduxContext } from './useReduxContext'
 import { ReactReduxContext } from '../components/Context'
-import { DefaultRootState, EqualityFn } from '../types'
+import { getSyncFunctions } from '../utils/useSyncExternalStore'
+import type { DefaultRootState, EqualityFn } from '../types'
+
+const [, useSyncExternalStoreWithSelector] = getSyncFunctions()
 
 const refEquality: EqualityFn<any> = (a, b) => a === b
 

src/index.ts

@@ -1,10 +1,22 @@
-export * from './exports'
+// The default entry point assumes we are working with React 18, and thus have
+// useSyncExternalStore available. We can import that directly from React itself.
+// The useSyncExternalStoreWithSelector has to be imported, but we can use the
+// non-shim version. This shaves off the byte size of the shim.
+
+// @ts-ignore React types not updated yet
+import { useSyncExternalStore } from 'react'
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector'
 
+import { setSyncFunctions } from './utils/useSyncExternalStore'
 import { unstable_batchedUpdates as batch } from './utils/reactBatchedUpdates'
 import { setBatch } from './utils/batch'
 
+setSyncFunctions(useSyncExternalStore, useSyncExternalStoreWithSelector)
+
 // Enable batched updates in our subscriptions for use
 // with standard React renderers (ReactDOM, React Native)
 setBatch(batch)
 
 export { batch }
+
+export * from './exports'

src/utils/useSyncExternalStore.ts

@@ -0,0 +1,21 @@
+import type { useSyncExternalStore } from 'use-sync-external-store'
+import type { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector'
+
+const notInitialized = () => {
+  throw new Error('Not initialize!')
+}
+
+let uSES: typeof useSyncExternalStore = notInitialized
+let uSESWS: typeof useSyncExternalStoreWithSelector = notInitialized
+
+// Allow injecting the actual functions from the entry points
+export const setSyncFunctions = (
+  sync: typeof useSyncExternalStore,
+  withSelector: typeof useSyncExternalStoreWithSelector
+) => {
+  uSES = sync
+  uSESWS = withSelector
+}
+
+// Supply a getter just to skip dealing with ESM bindings
+export const getSyncFunctions = () => [uSES, uSESWS] as const