feat(react): drop support for v16 and v17

Redux v9 only support React v18.

BREAKING CHANGE: drop support for v16 and v17

Author: 100terres

.circleci/config.yml

@@ -49,9 +49,6 @@ jobs:
       - image: cimg/node:20.11.1-browsers
     working_directory: ~/repo
     resource_class: medium+
-    parameters:
-      react-major-version:
-        type: string
     steps:
       - checkout
       - pnpm_setup
@@ -60,7 +57,6 @@ jobs:
           command: pnpm test
           environment:
             JEST_JUNIT_OUTPUT: 'test-reports/junit/js-test-results.xml'
-            REACT_MAJOR_VERSION: << parameters.react-major-version >>
 
       - store_test_results:
           path: test-reports/junit
@@ -143,9 +139,6 @@ workflows:
           requires:
             - install
       - test-unit:
-          matrix:
-            parameters:
-              react-major-version: ['16', '17', '18']
           requires:
             - install
       - test-bundle:

.eslintrc.js

@@ -152,8 +152,6 @@ module.exports = {
     'react/forbid-prop-types': 'off',
     // Allowing the non function setState approach
     'react/no-access-state-in-setstate': 'off',
-    // Causes error suggesting we replace `hydrate` with `hydrateRoot`, which would break tests with React 16 and 17
-    'react/no-deprecated': 'off',
     // Opting out of this
     'react/destructuring-assignment': 'off',
     // Adding 'skipShapeProps' as the rule has issues with correctly handling PropTypes.shape

csp-server/client.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { hydrate } from 'react-dom';
+import { hydrateRoot } from 'react-dom/client';
 import App from './app';
 
 const root = document.getElementById('root');
@@ -12,5 +12,5 @@ if (cspEl) {
 }
 
 if (root) {
-  hydrate(<App nonce={nonce} />, root);
+  hydrateRoot(root, <App nonce={nonce} />);
 }

csp-server/environment.d.ts

@@ -1,6 +1,5 @@
 interface ProcessEnv {
   NODE_ENV?: 'development' | 'production';
-  REACT_MAJOR_VERSION?: '16' | '17' | '18';
   CI?: boolean;
 }
 

csp-server/server.tsx

@@ -1,19 +1,15 @@
 import express from 'express';
 import React from 'react';
 import { renderToString } from 'react-dom/server';
-import { resetServerContext } from '@hello-pangea/dnd';
 import { resolve } from 'path';
 import App from './app';
-import invokeOnReactVersion from '../test/util/invoke-on-react-version';
 
 let count = 0;
 function getNonce(): string {
   return `ThisShouldBeACryptographicallySecurePseudoRandomNumber-${count++}`;
 }
 
 function renderHtml(policy?: string, nonce?: string) {
-  invokeOnReactVersion(['16', '17'], resetServerContext);
-
   let meta = '';
   if (nonce) {
     meta += `<meta id="csp-nonce" property="csp-nonce" content="${nonce}" />`;

docs/guides/common-setup-issues.md

@@ -8,11 +8,11 @@ For detectable setup issues we try to log information in the `console` for `deve
 
 ## React version
 
-Please ensure that you meet our peer dependency version of `React`. Your React version needs to be greater than or equal to `16.8.5`.
+Please ensure that you meet our peer dependency version of `React`. Your React version needs to be greater than or equal to `18.0.0`.
 
 If you want to know what React version you are on take a look at your [`package.json`](https://docs.npmjs.com/files/package.json) or use `console.log(React.version)`.
 
-If you are not sure if your `package.json` version satisfies `16.8.5` have a read of [npm: about semantic versioning](https://docs.npmjs.com/about-semantic-versioning) and try out the [npm sermver calculator](https://semver.npmjs.com/)
+If you are not sure if your `package.json` version satisfies `18.0.0` have a read of [npm: about semantic versioning](https://docs.npmjs.com/about-semantic-versioning) and try out the [npm sermver calculator](https://semver.npmjs.com/)
 
 ## No duplicate ids
 

jest.config.ts

@@ -2,24 +2,15 @@
 /// <reference path="./test/typings/environment.d.ts" />
 
 import type { Config } from 'jest';
-import getReactMajorVersion from './test/util/get-react-major-version';
 import isRunningInCI from './test/util/is-running-in-ci';
 
-const reactMajorVersion = getReactMajorVersion();
-
 const config: Config = {
   clearMocks: true,
   modulePathIgnorePatterns: ['/dist/'],
   resetMocks: true,
   resetModules: true,
   restoreMocks: true,
 
-  // We need a `snapshotResolver` because we run our tests
-  // for different react versions. Each version render components
-  // differently thus returning a different snapshot. We'll store
-  // each snapshot in different folders:
-  // __react_16_snapshots__, __react_17_snapshots__, etc.
-  snapshotResolver: '<rootDir>/test/setup/snapshot-resolver.ts',
   setupFiles: ['./test/setup/env-setup.ts'],
   setupFilesAfterEnv: ['./test/setup/test-setup.ts'],
   testEnvironment: './test/setup/environment.ts',
@@ -35,31 +26,6 @@ const config: Config = {
   ],
 };
 
-// eslint-disable-next-line no-console
-console.log('Testing with React version:', `${reactMajorVersion}.x.x`);
-
-if (['16', '17'].includes(reactMajorVersion)) {
-  config.testPathIgnorePatterns = [
-    ...(config.testPathIgnorePatterns || []),
-    // These test do not requires react and will
-    // be run in the base run (with react v18)
-    'test/unit/docs',
-    'test/unit/health',
-  ];
-  config.cacheDirectory = `.cache/jest-cache-react-${reactMajorVersion}`;
-  config.moduleNameMapper = {
-    '^@testing-library/react((\\/.*)?)$': `@testing-library/react-16-17$1`,
-    '^react-dom((\\/.*)?)$': `react-dom-${reactMajorVersion}$1`,
-    '^react((\\/.*)?)$': `react-${reactMajorVersion}$1`,
-  };
-} else {
-  config.testPathIgnorePatterns = [
-    ...(config.testPathIgnorePatterns || []),
-    // resetServerContext is irrelevant from 18 onwards
-    'test/unit/integration/drag-drop-context/reset-server-context.spec.tsx',
-  ];
-}
-
 if (isRunningInCI()) {
   config.maxWorkers = 2;
 }

package.json

@@ -49,9 +49,6 @@
     "release:test": "release-it --dry-run",
     "test:accessibility": "lighthouse http://localhost:9002/iframe.html?id=examples-single-vertical-list--basic --no-enable-error-reporting --config-path=lighthouse.config.js --chrome-flags='--headless' --output=json --output=html --output-path=./test-reports/lighthouse/a11y.json && node a11y-audit-parse.js",
     "test": "jest --config ./jest.config.ts",
-    "test:react-16": "cross-env REACT_MAJOR_VERSION=16 pnpm test",
-    "test:react-17": "cross-env REACT_MAJOR_VERSION=17 pnpm test",
-    "test:react-18": "cross-env REACT_MAJOR_VERSION=18 pnpm test",
     "test:browser": "cypress open",
     "test:browser:ci": "cypress run",
     "test:coverage": "pnpm test --coverage --coveragePathIgnorePatterns=/debug",
@@ -123,7 +120,6 @@
     "@testing-library/dom": "9.3.4",
     "@testing-library/jest-dom": "6.5.0",
     "@testing-library/react": "14.3.1",
-    "@testing-library/react-16-17": "npm:@testing-library/[email protected]",
     "@types/express": "4.17.21",
     "@types/fs-extra": "11.0.4",
     "@types/jest": "29.5.13",
@@ -181,11 +177,7 @@
     "prettier": "3.3.3",
     "raf-stub": "3.0.0",
     "react": "18.3.1",
-    "react-16": "npm:[email protected]",
-    "react-17": "npm:[email protected]",
     "react-dom": "18.3.1",
-    "react-dom-16": "npm:[email protected]",
-    "react-dom-17": "npm:[email protected]",
     "react-virtualized": "9.22.5",
     "react-window": "1.8.10",
     "release-it": "17.6.0",
@@ -205,8 +197,8 @@
     "webpack": "5.94.0"
   },
   "peerDependencies": {
-    "react": "^16.8.5 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "license": "Apache-2.0",
   "jest-junit": {

renovate.json5

@@ -39,19 +39,5 @@
       rangeStrategy: "widen",
       commitMessagePrefix: "chore(peer-deps):",
     },
-
-    // to support previous react version
-    {
-      "matchPackageNames": ["@testing-library/react-16-17"],
-      "allowedVersions": "<13.0.0",
-    },
-    {
-      "matchPackageNames": ["react-16", "react-dom-16"],
-      "allowedVersions": "<17.0.0",
-    },
-    {
-      "matchPackageNames": ["react-17", "react-dom-17"],
-      "allowedVersions": "<18.0.0",
-    },
   ],
 }

src/index.ts

@@ -62,6 +62,3 @@ export {
   useTouchSensor,
   useKeyboardSensor,
 } from './view/use-sensor-marshal';
-
-// Utils
-export { resetServerContext } from './view/drag-drop-context';