Skip to content

Swap useSyncExternalStore shim behavior and update React deps #1884

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Apr 2, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 1 addition & 19 deletions .github/workflows/test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ jobs:
fail-fast: false
matrix:
node: ['14.x']
ts: ['4.0', '4.1', '4.2', '4.3', '4.4', '4.5', 'next']
ts: ['4.0', '4.1', '4.2', '4.3', '4.4', '4.5', '4.6', 'next']
steps:
- name: Checkout repo
uses: actions/checkout@v2
Expand All @@ -57,24 +57,6 @@ jobs:
- name: Install TypeScript ${{ matrix.ts }}
run: yarn add typescript@${{ matrix.ts }}

# - uses: actions/download-artifact@v2
# with:
# name: package
# path: packages/toolkit

# - name: Install build artifact
# run: yarn add ./package.tgz

# - run: sed -i -e /@remap-prod-remove-line/d ./tsconfig.base.json ./jest.config.js ./src/tests/*.* ./src/query/tests/*.*

# - name: "@ts-ignore stuff that didn't exist pre-4.1 in the tests"
# if: ${{ matrix.ts < 4.1 }}
# run: sed -i -e 's/@pre41-ts-ignore/@ts-ignore/' -e '/pre41-remove-start/,/pre41-remove-end/d' ./src/tests/*.* ./src/query/tests/*.ts*

# - name: 'disable strictOptionalProperties'
# if: ${{ matrix.ts == 'next' }}
# run: sed -i -e 's|//\(.*strictOptionalProperties.*\)$|\1|' tsconfig.base.json

- name: Test types
run: |
yarn tsc --version
Expand Down
22 changes: 17 additions & 5 deletions jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const tsTestFolderPath = (folderName) =>

const tsStandardConfig = {
...defaults,
displayName: 'ReactDOM',
displayName: 'ReactDOM 18',
preset: 'ts-jest',
testMatch: NORMAL_TEST_FOLDERS.map(tsTestFolderPath),
}
Expand All @@ -29,18 +29,30 @@ const rnConfig = {
},
}

const compatEntryConfig = {
const standardReact17Config = {
...tsStandardConfig,
displayName: 'Compat',
displayName: 'ReactDOM 17',
moduleNameMapper: {
'^react$': 'react-17',
'^react-dom$': 'react-dom-17',
'^react-test-renderer$': 'react-test-renderer-17',
'^@testing-library/react$': '@testing-library/react-12',
'../../src/index': '<rootDir>/src/compat',
},
}

const nextEntryConfig = {
...tsStandardConfig,
displayName: 'Next',
moduleNameMapper: {
'../../src/index': '<rootDir>/src/next',
},
}

module.exports = {
projects: [tsStandardConfig, rnConfig, compatEntryConfig],
projects: [
tsStandardConfig,
rnConfig,
standardReact17Config,
nextEntryConfig,
],
}
20 changes: 10 additions & 10 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
"coverage": "codecov"
},
"peerDependencies": {
"react": "^18.0.0-rc"
"react": "^18.0.0"
},
"peerDependenciesMeta": {
"react-dom": {
Expand All @@ -55,8 +55,8 @@
"@types/hoist-non-react-statics": "^3.3.1",
"@types/use-sync-external-store": "^0.0.3",
"hoist-non-react-statics": "^3.3.2",
"react-is": "^18.0.0-rc.0",
"use-sync-external-store": "^1.0.0-rc.0"
"react-is": "^18.0.0",
"use-sync-external-store": "^1.0.0"
},
"devDependencies": {
"@babel/cli": "^7.12.1",
Expand All @@ -76,14 +76,14 @@
"@rollup/plugin-replace": "^2.3.3",
"@testing-library/jest-dom": "^5.11.5",
"@testing-library/jest-native": "^3.4.3",
"@testing-library/react": "13.0.0-alpha.4",
"@testing-library/react": "13.0.0",
"@testing-library/react-12": "npm:@testing-library/react@^12",
"@testing-library/react-hooks": "^3.4.2",
"@testing-library/react-native": "^7.1.0",
"@types/object-assign": "^4.0.30",
"@types/react": "^17.0.35",
"@types/react-dom": "^17.0.11",
"@types/react-is": "^17.0.1",
"@types/react": "^17.0.43",
"@types/react-dom": "^17.0.14",
"@types/react-is": "^17.0.3",
"@types/react-native": "^0.64.12",
"@types/react-redux": "^7.1.18",
"@typescript-eslint/eslint-plugin": "^4.28.0",
Expand All @@ -100,12 +100,12 @@
"glob": "^7.1.6",
"jest": "^26.6.1",
"prettier": "^2.1.2",
"react": "18.0.0-beta-fdc1d617a-20211118",
"react": "18.0.0",
"react-17": "npm:react@^17",
"react-dom": "18.0.0-beta-fdc1d617a-20211118",
"react-dom": "18.0.0",
"react-dom-17": "npm:react-dom@^17",
"react-native": "^0.64.1",
"react-test-renderer": "18.0.0-beta-fdc1d617a-20211118",
"react-test-renderer": "18.0.0",
"react-test-renderer-17": "npm:react-test-renderer@^17",
"redux": "^4.0.5",
"rimraf": "^3.0.2",
Expand Down
4 changes: 2 additions & 2 deletions src/connect/wrapMapToProps.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ type StateOrDispatch<S = AnyState> = S | Dispatch

type AnyProps = { [key: string]: any }

export type MapToProps<P = AnyProps> = {
export type MapToProps<P extends AnyProps = AnyProps> = {
// eslint-disable-next-line no-unused-vars
(stateOrDispatch: StateOrDispatch, ownProps?: P): FixTypeLater
dependsOnOwnProps?: boolean
Expand Down Expand Up @@ -65,7 +65,7 @@ export function getDependsOnOwnProps(mapToProps: MapToProps) {
// * On first call, verifies the first result is a plain object, in order to warn
// the developer that their mapToProps function is not returning a valid result.
//
export function wrapMapToPropsFunc<P = AnyProps>(
export function wrapMapToPropsFunc<P extends AnyProps = AnyProps>(
mapToProps: MapToProps,
methodName: string
) {
Expand Down
12 changes: 5 additions & 7 deletions src/index.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
// 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.
// The primary 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.

// @ts-ignore React types not updated yet
import { useSyncExternalStore } from 'react'
import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector'
import { useSyncExternalStore } from 'use-sync-external-store/shim'
import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'

import { unstable_batchedUpdates as batch } from './utils/reactBatchedUpdates'
import { setBatch } from './utils/batch'
Expand Down
11 changes: 6 additions & 5 deletions src/compat.ts → src/next.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
// 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.
// The secondary 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 { useSyncExternalStore } from 'use-sync-external-store/shim'
import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
import { useSyncExternalStore } from 'react'
import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector'

import { unstable_batchedUpdates as batch } from './utils/reactBatchedUpdates'
import { setBatch } from './utils/batch'
Expand Down
6 changes: 4 additions & 2 deletions test/components/connect.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -845,8 +845,10 @@ describe('React', () => {
<OuterComponent ref={outerComponent} />
</ProviderMock>
)
outerComponent.current!.setFoo('BAR')
outerComponent.current!.setFoo('DID')
rtl.act(() => {
outerComponent.current!.setFoo('BAR')
outerComponent.current!.setFoo('DID')
})

expect(invocationCount).toEqual(1)
})
Expand Down
Loading