Merge pull request #1884 from reduxjs/feature/react18-shim-swap

Author: markerikson

.github/workflows/test.yml

@@ -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
@@ -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

jest.config.js

@@ -13,7 +13,7 @@ const tsTestFolderPath = (folderName) =>
 
 const tsStandardConfig = {
   ...defaults,
-  displayName: 'ReactDOM',
+  displayName: 'ReactDOM 18',
   preset: 'ts-jest',
   testMatch: NORMAL_TEST_FOLDERS.map(tsTestFolderPath),
 }
@@ -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,
+  ],
 }

package.json

@@ -40,7 +40,7 @@
     "coverage": "codecov"
   },
   "peerDependencies": {
-    "react": "^18.0.0-rc"
+    "react": "^18.0.0"
   },
   "peerDependenciesMeta": {
     "react-dom": {
@@ -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",
@@ -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",
@@ -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",

src/connect/wrapMapToProps.ts

@@ -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
@@ -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
 ) {

src/index.ts

@@ -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'

src/compat.ts src/next.ts

@@ -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'

test/components/connect.spec.tsx

@@ -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)
       })