React 17-19 compatibility

.eslintrc

@@ -14,9 +14,7 @@
     "node": true,
     "jest": true
   },
-  "globals": {
-    "sinon": true
-  },
+  "globals": {},
   "rules": {
     "semi": [2, "never"],
     "no-use-before-define": ["error", { "functions": false }],
@@ -42,7 +40,7 @@
     "react/no-multi-comp": [0],
     "react/sort-comp": [0],
     "react/jsx-filename-extension": [0],
-    "prettier/prettier": ["error", {"semi": false, "trailingComma": "es5", "singleQuote": true}],
+    "prettier/prettier": "error",
     "react/destructuring-assignment": [0],
     "react/jsx-curly-brace-presence": [0],
     "react/no-unused-prop-types": [0],

.prettierrc

@@ -1,3 +1,4 @@
 semi: false
 singleQuote: true
-trailingComma: es5
+trailingComma: es5
+parser: babel

.size-snapshot.json

@@ -1,25 +1,25 @@
 {
-  "lib/packages/recompose/dist/Recompose.umd.js": {
-    "bundled": 56428,
-    "minified": 19441,
-    "gzipped": 5636
+  "Recompose.umd.js": {
+    "bundled": 49359,
+    "minified": 17069,
+    "gzipped": 5102
   },
-  "lib/packages/recompose/dist/Recompose.min.js": {
-    "bundled": 48906,
-    "minified": 17887,
-    "gzipped": 5043
+  "Recompose.min.js": {
+    "bundled": 41591,
+    "minified": 15506,
+    "gzipped": 4511
   },
-  "lib/packages/recompose/dist/Recompose.esm.js": {
-    "bundled": 32428,
-    "minified": 15083,
-    "gzipped": 3550,
+  "Recompose.esm.js": {
+    "bundled": 32330,
+    "minified": 15254,
+    "gzipped": 3644,
     "treeshaked": {
       "rollup": {
-        "code": 310,
-        "import_statements": 310
+        "code": 311,
+        "import_statements": 311
       },
       "webpack": {
-        "code": 1838
+        "code": 1874
       }
     }
   }

README.md

@@ -7,6 +7,7 @@ The project is a fork of [Recompose](https://github.com/acdlite/recompose/) whic
 
 [fbjs](https://github.com/facebook/fbjs) was one of the core dependencies for the last npm release of [Recompose](https://github.com/acdlite/recompose/) i.e [![npm version](https://img.shields.io/npm/v/recompose.svg?style=flat-square)](https://www.npmjs.com/package/recompose). The [Recompose](https://github.com/acdlite/recompose/) project was updated to remove the usage of [fbjs](https://github.com/facebook/fbjs), but it was never published to npm. The fork removes `fbjs` as dependency and updates `@babel/runtime`, `react-lifecycles-compat`, `symbol-observable` and `hoist-non-react-statics` packages to latest versions.
 
+Use `"@shakacode/recompose": "^0.31.0"` for React 17-19, `"@shakacode/recompose": "^0.30.3"` for earlier React versions.
 
 Recompose
 -----

babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: [['@babel/proposal-class-properties', { loose: true }]],
+  plugins: [['@babel/transform-class-properties', { loose: true }]],
   presets: [['@babel/env', { loose: true }], '@babel/react'],
 }
 

docs/API.md

@@ -550,23 +550,27 @@ const Post = enhance(({ title, content, author }) =>
 ```ts
 // TContext = the type of the provided child context
 withContext<TContext>(
-  childContextTypes: PropTypes.ValidationMap<TContext>,
+  childContextTypes: Record<keyof TContext, unknown>,
   getChildContext: (props: Object) => TContext
 ): HigherOrderComponent
 ```
 
-Provides context to the component's children. `childContextTypes` is an object of React prop types. `getChildContext()` is a function that returns the child context. Use along with `getContext()`.
+Provides context to the component's children. `childContextTypes` is an object whose keys define the context properties to provide. `getChildContext()` is a function that returns the child context values. Use along with `getContext()`.
+
+Note: this uses `React.createContext` internally. The keys of `childContextTypes` are used to create or look up context objects; the values are ignored. This means prop-types validation is no longer performed on context values. Existing code passing `PropTypes.ValidationMap` objects will continue to work.
 
 ### `getContext()`
 
 ```ts
-getContext(
-  contextTypes: Object
+getContext<TContext>(
+  contextTypes: Record<keyof TContext, unknown>
 ): HigherOrderComponent
 ```
 
 Gets values from context and passes them along as props. Use along with `withContext()`.
 
+Note: like `withContext()`, the keys of `contextTypes` determine which context values to consume; the values are ignored.
+
 ### `lifecycle()`
 
 ```ts

package.json

@@ -7,14 +7,15 @@
     "url": "git://github.com/acdlite/recompose.git"
   },
   "license": "MIT",
+  "packageManager": "[email protected]",
   "scripts": {
     "lint": "eslint scripts src",
     "build:recompose": "cross-env PACKAGE_NAME=recompose rollup --config scripts/rollup.config.js",
     "test": "jest && flow check && cross-env SNAPSHOT=match npm run build:recompose",
     "test:watch": "cross-env BABEL_ENV=cjs jest --watch",
     "release": "node scripts/release.js",
     "postinstall": "node scripts/installNestedPackageDeps.js",
-    "format": "prettier --semi false --trailing-comma es5 --single-quote --write 'scripts/*.js' 'src/packages/*/*.js' 'src/packages/*/!(node_modules)/**/*.js'",
+    "format": "prettier --write 'scripts/*.js' 'src/packages/*/*.js' 'src/packages/*/!(node_modules)/**/*.js'",
     "precommit": "lint-staged",
     "prepush": "yarn test"
   },
@@ -26,71 +27,66 @@
       "text-summary",
       "lcov"
     ],
-    "setupTestFrameworkScriptFile": "<rootDir>/scripts/jest.setup.js"
+    "testTimeout": 20000,
+    "testEnvironment": "jsdom",
+    "restoreMocks": true
   },
   "lint-staged": {
     "*.js": [
-      "prettier --semi false --trailing-comma es5 --single-quote --write",
+      "prettier --write",
       "eslint --fix",
       "git add"
     ]
   },
   "devDependencies": {
-    "@babel/cli": "^7.0.0",
-    "@babel/core": "^7.0.0",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
-    "@babel/plugin-transform-runtime": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/runtime": "^7.0.0",
-    "babel-core": "^7.0.0-bridge.0",
+    "@babel/cli": "^7.22.0",
+    "@babel/core": "^7.22.0",
+    "@babel/plugin-transform-class-properties": "^7.25.0",
+    "@babel/plugin-transform-runtime": "^7.22.0",
+    "@babel/preset-env": "^7.22.0",
+    "@babel/preset-react": "^7.22.0",
+    "@babel/runtime": "^7.22.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.3.0",
     "babel-eslint": "^9.0.0",
-    "babel-jest": "^22.4.3",
+    "babel-jest": "^29.7.0",
     "baconjs": "^0.7.84",
     "chalk": "^1.1.1",
     "change-case": "^2.3.1",
     "codecov": "^1.0.1",
     "create-react-class": "^15.5.0",
     "cross-env": "^4.0.0",
-    "enzyme": "^3.3.0",
     "eslint": "^5.3.0",
     "eslint-config-airbnb": "^17.0.0",
     "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-import": "^2.13.0",
     "eslint-plugin-jsx-a11y": "^6.1.1",
-    "eslint-plugin-prettier": "^2.0.1",
+    "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.10.0",
     "flow-bin": "^0.72.0",
     "flyd": "^0.2.4",
     "husky": "^0.13.3",
-    "jest": "^22.4.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "kefir": "^3.2.3",
     "lint-staged": "^3.4.0",
     "most": "^1.0.2",
-    "prettier": "^1.2.2",
+    "prettier": "^1.19.1",
     "prop-types": "^15.6.1",
-    "react": "^16.3.1",
-    "react-dom": "^16.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "readline-sync": "^1.2.21",
-    "rollup": "^0.65.0",
-    "rollup-plugin-babel": "^4.0.1",
-    "rollup-plugin-commonjs": "^9.1.6",
-    "rollup-plugin-node-resolve": "^3.3.0",
-    "rollup-plugin-replace": "^2.0.0",
-    "rollup-plugin-size-snapshot": "^0.6.1",
-    "rollup-plugin-uglify": "^4.0.0",
+    "@rollup/plugin-babel": "^6.0.0",
+    "@rollup/plugin-commonjs": "^28.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-replace": "^6.0.0",
+    "@rollup/plugin-terser": "^0.4.0",
+    "rollup": "^4.0.0",
+    "rollup-plugin-size-snapshot": "^0.12.0",
     "rx": "^4.1.0",
     "rxjs": "^5.0.0",
     "shelljs": "^0.6.0",
-    "sinon": "^1.17.1",
-    "webpack": "^2.4.1",
     "xstream": "^5.0.5"
   },
-  "devEngines": {
-    "node": "5.x",
-    "npm": "3.x"
-  },
-  "dependencies": {
-    "enzyme-adapter-react-16": "^1.1.1"
-  }
+  "dependencies": {}
 }

scripts/rollup.config.js

@@ -1,12 +1,14 @@
 import path from 'path'
-import nodeResolve from 'rollup-plugin-node-resolve'
-import babel from 'rollup-plugin-babel'
-import replace from 'rollup-plugin-replace'
-import commonjs from 'rollup-plugin-commonjs'
-import { uglify } from 'rollup-plugin-uglify'
+import { createRequire } from 'module'
+import nodeResolve from '@rollup/plugin-node-resolve'
+import babel from '@rollup/plugin-babel'
+import replace from '@rollup/plugin-replace'
+import commonjs from '@rollup/plugin-commonjs'
+import terser from '@rollup/plugin-terser'
 import { sizeSnapshot } from 'rollup-plugin-size-snapshot'
 import { pascalCase } from 'change-case'
 
+const require = createRequire(import.meta.url)
 const { PACKAGES_SRC_DIR, PACKAGES_OUT_DIR } = require('./getPackageNames')
 
 const packageName = process.env.PACKAGE_NAME
@@ -21,7 +23,7 @@ const isExternal = id => !id.startsWith('.') && !id.startsWith('/')
 
 const getBabelOptions = ({ useESModules }) => ({
   exclude: '**/node_modules/**',
-  runtimeHelpers: true,
+  babelHelpers: 'runtime',
   plugins: [['@babel/transform-runtime', { useESModules }]],
 })
 
@@ -43,7 +45,10 @@ export default [
       nodeResolve(),
       babel(getBabelOptions({ useESModules: true })),
       commonjs(),
-      replace({ 'process.env.NODE_ENV': JSON.stringify('development') }),
+      replace({
+        preventAssignment: true,
+        'process.env.NODE_ENV': JSON.stringify('development'),
+      }),
       sizeSnapshot({ matchSnapshot }),
     ],
   },
@@ -63,9 +68,12 @@ export default [
       nodeResolve(),
       babel(getBabelOptions({ useESModules: true })),
       commonjs(),
-      replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
+      replace({
+        preventAssignment: true,
+        'process.env.NODE_ENV': JSON.stringify('production'),
+      }),
       sizeSnapshot({ matchSnapshot }),
-      uglify(),
+      terser(),
     ],
   },
 

src/packages/recompose/__tests__/branch-test.js

@@ -1,6 +1,5 @@
-import sinon from 'sinon'
 import React from 'react'
-import { mount } from 'enzyme'
+import { render, fireEvent } from '@testing-library/react'
 import { branch, compose, withState, withProps } from '../'
 
 test('branch tests props and applies one of two HoCs, for true and false', () => {
@@ -11,29 +10,24 @@ test('branch tests props and applies one of two HoCs, for true and false', () =>
       withProps({ name: 'Heisenberg' }),
       withProps({ name: 'Walter' })
     )
-  )(({ isBad, name, updateIsBad }) =>
+  )(({ isBad, name, updateIsBad }) => (
     <div>
-      <div className="isBad">
-        {isBad ? 'true' : 'false'}
-      </div>
-      <div className="name">
-        {name}
-      </div>
+      <div className="isBad">{isBad ? 'true' : 'false'}</div>
+      <div className="name">{name}</div>
       <button onClick={() => updateIsBad(b => !b)}>Toggle</button>
     </div>
-  )
+  ))
 
   expect(SayMyName.displayName).toBe('withState(branch(Component))')
 
-  const wrapper = mount(<SayMyName />)
-  const getIsBad = () => wrapper.find('.isBad').text()
-  const getName = () => wrapper.find('.name').text()
-  const toggle = wrapper.find('button')
+  const { container } = render(<SayMyName />)
+  const getIsBad = () => container.querySelector('.isBad').textContent
+  const getName = () => container.querySelector('.name').textContent
 
   expect(getIsBad()).toBe('false')
   expect(getName()).toBe('Walter')
 
-  toggle.simulate('click')
+  fireEvent.click(container.querySelector('button'))
 
   expect(getIsBad()).toBe('true')
   expect(getName()).toBe('Heisenberg')
@@ -48,23 +42,23 @@ test('branch defaults third argument to identity function', () => {
     () => props => <Left {...props} />
   )(Right)
 
-  const wrapper = mount(<BranchedComponent />)
-  const right = wrapper.find('.right').text()
+  const { container } = render(<BranchedComponent />)
+  const right = container.querySelector('.right').textContent
 
   expect(right).toBe('Right')
 })
 
 test('branch third argument should not cause console error', () => {
-  const error = sinon.stub(console, 'error')
+  jest.spyOn(console, 'error').mockImplementation(() => {})
   const Component = () => <div className="right">Component</div>
 
-  const BranchedComponent = branch(() => false, v => v, v => v)(Component)
-
-  mount(<BranchedComponent />)
+  const BranchedComponent = branch(
+    () => false,
+    v => v,
+    v => v
+  )(Component)
 
-  expect(error.called).toBe(false)
+  render(<BranchedComponent />)
 
-  /* eslint-disable */
-  error.restore()
-  /* eslint-enable */
+  expect(console.error).not.toHaveBeenCalled()
 })