Skip to content

Commit

Permalink
Add an RN-specific bundle and consolidate imports
Browse files Browse the repository at this point in the history
  • Loading branch information
markerikson committed Dec 4, 2023
1 parent 8a20779 commit 7bdd8ac
Show file tree
Hide file tree
Showing 12 changed files with 54 additions and 8 deletions.
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,14 @@
"bugs": "https://github.com/reduxjs/react-redux/issues",
"module": "dist/react-redux.legacy-esm.js",
"main": "dist/cjs/index.js",
"react-native": "./dist/react-redux.react-native.mjs",
"types": "dist/react-redux.d.ts",
"exports": {
"./package.json": "./package.json",
".": {
"types": "./dist/react-redux.d.ts",
"react-server": "./dist/rsc.mjs",
"react-native": "./dist/react-redux.react-native.mjs",
"import": "./dist/react-redux.mjs",
"default": "./dist/cjs/index.js"
},
Expand Down
2 changes: 1 addition & 1 deletion src/alternate-renderers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
// Examples include React-Three-Fiber, Ink, etc.
// We'll assume they're built with React 18 and thus have `useSyncExternalStore` available.

import * as React from 'react'
import { React } from './utils/react'
import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'

import { initializeUseSelector } from './hooks/useSelector'
Expand Down
2 changes: 1 addition & 1 deletion src/components/Context.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { Context } from 'react'
import * as React from 'react'
import { React } from '../utils/react'
import type { Action, Store, UnknownAction } from 'redux'
import type { Subscription } from '../utils/Subscription'
import type { ProviderProps } from './Provider'
Expand Down
2 changes: 1 addition & 1 deletion src/components/Provider.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { Context, ReactNode } from 'react'
import * as React from 'react'
import { React } from '../utils/react'
import type { Action, Store, UnknownAction } from 'redux'
import type { DevModeCheckFrequency } from '../hooks/useSelector'
import { createSubscription } from '../utils/Subscription'
Expand Down
2 changes: 1 addition & 1 deletion src/components/connect.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* eslint-disable valid-jsdoc, @typescript-eslint/no-unused-vars */
import type { ComponentType } from 'react'
import * as React from 'react'
import { React } from '../utils/react'
import { isValidElementType, isContextConsumer } from '../utils/react-is'

import type { Store } from 'redux'
Expand Down
2 changes: 1 addition & 1 deletion src/hooks/useReduxContext.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import * as React from 'react'
import { React } from '../utils/react'
import { ReactReduxContext } from '../components/Context'
import type { ReactReduxContextValue } from '../components/Context'

Expand Down
3 changes: 2 additions & 1 deletion src/hooks/useSelector.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react'
//import * as React from 'react'
import { React } from '../utils/react'

import type { ReactReduxContextValue } from '../components/Context'
import { ReactReduxContext } from '../components/Context'
Expand Down
28 changes: 28 additions & 0 deletions src/react-native.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
// The primary 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.

import { React } from './utils/react'
import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'

import { unstable_batchedUpdates as batchInternal } from './utils/reactBatchedUpdates.native'
import { setBatch } from './utils/batch'

import { initializeUseSelector } from './hooks/useSelector'
import { initializeConnect } from './components/connect'

initializeUseSelector(useSyncExternalStoreWithSelector)
initializeConnect(React.useSyncExternalStore)

// Enable batched updates in our subscriptions for use
// with standard React renderers (ReactDOM, React Native)
setBatch(batchInternal)

// Avoid needing `react-dom` in the final TS types
// by providing a simpler type for `batch`
const batch: (cb: () => void) => void = batchInternal

export { batch }

export * from './exports'
6 changes: 6 additions & 0 deletions src/utils/react.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import * as ReactOriginal from 'react'
import type * as ReactNamespace from 'react'

export const React = (
'default' in ReactOriginal ? ReactOriginal['default'] : ReactOriginal

Check failure on line 5 in src/utils/react.ts

View workflow job for this annotation

GitHub Actions / Test Types with TypeScript 4.7

Element implicitly has an 'any' type because expression of type '"default"' can't be used to index type 'typeof React'.

Check failure on line 5 in src/utils/react.ts

View workflow job for this annotation

GitHub Actions / Test Types with TypeScript 4.8

Element implicitly has an 'any' type because expression of type '"default"' can't be used to index type 'typeof React'.
) as typeof ReactNamespace
2 changes: 1 addition & 1 deletion src/utils/useIsomorphicLayoutEffect.native.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import * as React from 'react'
import { React } from '../utils/react'

// Under React Native, we know that we always want to use useLayoutEffect

Expand Down
2 changes: 1 addition & 1 deletion src/utils/useIsomorphicLayoutEffect.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import * as React from 'react'
import { React } from '../utils/react'

// React currently throws a warning when using useLayoutEffect on the server.
// To get around it, we can conditionally useEffect on the server (no-op) and
Expand Down
9 changes: 9 additions & 0 deletions tsup.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,15 @@ export default defineConfig((options) => {
format: ['esm'],
outExtension: () => ({ js: '.mjs' }),
},
// React Native requires a separate entry point for `"react-native"` batch dep
{
...commonOptions,
entry: {
'react-redux.react-native': 'src/react-native.ts',
},
format: ['esm'],
outExtension: () => ({ js: '.mjs' }),
},
// CJS development
{
...commonOptions,
Expand Down

0 comments on commit 7bdd8ac

Please sign in to comment.