Start to modernize recompose (...)

.size-snapshot.json

@@ -1,18 +1,18 @@
 {
   "lib/packages/recompose/dist/Recompose.umd.js": {
-    "bundled": 46425,
-    "minified": 16484,
-    "gzipped": 4625
+    "bundled": 46932,
+    "minified": 16271,
+    "gzipped": 4629
   },
   "lib/packages/recompose/dist/Recompose.min.js": {
-    "bundled": 42863,
-    "minified": 15204,
-    "gzipped": 4194
+    "bundled": 43370,
+    "minified": 14991,
+    "gzipped": 4188
   },
   "lib/packages/recompose/dist/Recompose.esm.js": {
-    "bundled": 32428,
-    "minified": 15083,
-    "gzipped": 3550,
+    "bundled": 33018,
+    "minified": 15156,
+    "gzipped": 3563,
     "treeshaked": {
       "rollup": {
         "code": 310,

package.json

@@ -26,7 +26,9 @@
       "text-summary",
       "lcov"
     ],
-    "setupTestFrameworkScriptFile": "<rootDir>/scripts/jest.setup.js"
+    "setupFilesAfterEnv": [
+      "<rootDir>/scripts/jest.setup.js"
+    ]
   },
   "lint-staged": {
     "*.js": [
@@ -46,31 +48,31 @@
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^9.0.0",
     "babel-jest": "^22.4.3",
-    "baconjs": "^0.7.84",
+    "baconjs": "^1.0.1",
     "chalk": "^1.1.1",
     "change-case": "^2.3.1",
     "codecov": "^1.0.1",
-    "create-react-class": "^15.5.0",
+    "create-react-class": "^15.7.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-react": "^7.10.0",
+    "enzyme": "^3.11.0",
+    "eslint": "^7.19.0",
+    "eslint-config-airbnb": "^17.1.1",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^2.7.0",
+    "eslint-plugin-react": "^7.22.0",
     "flow-bin": "^0.72.0",
-    "flyd": "^0.2.4",
+    "flyd": "^0.2.8",
     "husky": "^0.13.3",
-    "jest": "^22.4.3",
-    "kefir": "^3.2.3",
+    "jest": "^26.6.3",
+    "kefir": "^3.8.8",
     "lint-staged": "^3.4.0",
-    "most": "^1.0.2",
-    "prettier": "^1.2.2",
-    "prop-types": "^15.6.1",
-    "react": "^16.3.1",
-    "react-dom": "^16.3.1",
+    "most": "^1.9.0",
+    "prettier": "~1.5.3",
+    "prop-types": "^15.7.2",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "readline-sync": "^1.2.21",
     "rollup": "^0.65.0",
     "rollup-plugin-babel": "^4.0.1",
@@ -80,9 +82,9 @@
     "rollup-plugin-size-snapshot": "^0.6.1",
     "rollup-plugin-uglify": "^4.0.0",
     "rx": "^4.1.0",
-    "rxjs": "^5.0.0",
+    "rxjs": "^5.5.12",
     "shelljs": "^0.6.0",
-    "sinon": "^1.17.1",
+    "sinon": "^9.2.4",
     "webpack": "^2.4.1",
     "xstream": "^5.0.5"
   },
@@ -91,6 +93,6 @@
     "npm": "3.x"
   },
   "dependencies": {
-    "enzyme-adapter-react-16": "^1.1.1"
+    "enzyme-adapter-react-16": "^1.15.6"
   }
 }

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

@@ -1,6 +1,7 @@
-import React, { createFactory } from 'react'
+import React from 'react'
 import { mount } from 'enzyme'
 import sinon from 'sinon'
+import createFactory from '../createFactory'
 import { hoistStatics, mapProps } from '../'
 
 test('copies non-React static properties from base component to new component', () => {

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

@@ -21,7 +21,9 @@ test('toClass copies propTypes, displayName, contextTypes and defaultProps from
   StatelessComponent.displayName = 'Stateless'
   StatelessComponent.propTypes = { foo: PropTypes.string }
   StatelessComponent.contextTypes = { bar: PropTypes.object }
+  /* eslint-disable react/default-props-match-prop-types */
   StatelessComponent.defaultProps = { foo: 'bar', fizz: 'buzz' }
+  /* eslint-enable react/default-props-match-prop-types */
 
   const TestComponent = toClass(StatelessComponent)
 

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

@@ -17,6 +17,7 @@ test('withHandlers passes handlers to base component', () => {
     })
   )
 
+  /* eslint-disable jsx-a11y/label-has-associated-control */
   const Form = enhanceForm(({ value, onChange, onSubmit }) =>
     <form onSubmit={onSubmit}>
       <label>
@@ -28,6 +29,7 @@ test('withHandlers passes handlers to base component', () => {
       </p>
     </form>
   )
+  /* eslint-enable jsx-a11y/label-has-associated-control */
 
   const wrapper = mount(<Form />)
   const input = wrapper.find('input')

src/packages/recompose/branch.js

@@ -1,4 +1,4 @@
-import { createFactory } from 'react'
+import createFactory from './createFactory'
 import setDisplayName from './setDisplayName'
 import wrapDisplayName from './wrapDisplayName'
 

src/packages/recompose/componentFromStream.js

@@ -29,7 +29,7 @@ export const componentFromStreamWithConfig = config => propsToVdom =>
     // Stream of vdom
     vdom$ = config.toESObservable(propsToVdom(this.props$))
 
-    componentWillMount() {
+    componentDidMount() {
       // Subscribe to child prop changes so we know when to re-render
       this.subscription = this.vdom$.subscribe({
         next: vdom => {
@@ -39,6 +39,9 @@ export const componentFromStreamWithConfig = config => propsToVdom =>
       this.propsEmitter.emit(this.props)
     }
 
+    // TODO: componentWillReceiveProps method is not supported by React 17;
+    // UNSAFE_componentWillReceiveProps may not work with older React versions.
+    // Another solution is wanted.
     componentWillReceiveProps(nextProps) {
       // Receive new props from the owner
       this.propsEmitter.emit(nextProps)

src/packages/recompose/createFactory.js

@@ -0,0 +1,9 @@
+import { createElement } from 'react'
+
+// NOTE: This is intended to be an internal utility for now, may be
+// unit-tested, documented, and exported by the API in the future.
+export default function __createFactory(c) {
+  // as described in:
+  // - https://reactjs.org/blog/2020/02/26/react-v16.13.0.html
+  return createElement.bind(null, c)
+}

src/packages/recompose/defaultProps.js

@@ -1,4 +1,4 @@
-import { createFactory } from 'react'
+import createFactory from './createFactory'
 import setDisplayName from './setDisplayName'
 import wrapDisplayName from './wrapDisplayName'
 

src/packages/recompose/flattenProp.js

@@ -1,4 +1,4 @@
-import { createFactory } from 'react'
+import createFactory from './createFactory'
 import setDisplayName from './setDisplayName'
 import wrapDisplayName from './wrapDisplayName'
 

src/packages/recompose/fromRenderProps.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import createFactory from './createFactory'
 import setDisplayName from './setDisplayName'
 import wrapDisplayName from './wrapDisplayName'
 
@@ -7,8 +7,8 @@ const fromRenderProps = (
   propsMapper,
   renderPropName = 'children'
 ) => BaseComponent => {
-  const baseFactory = React.createFactory(BaseComponent)
-  const renderPropsFactory = React.createFactory(RenderPropsComponent)
+  const baseFactory = createFactory(BaseComponent)
+  const renderPropsFactory = createFactory(RenderPropsComponent)
 
   const FromRenderProps = ownerProps =>
     renderPropsFactory({

src/packages/recompose/getContext.js

@@ -1,4 +1,4 @@
-import { createFactory } from 'react'
+import createFactory from './createFactory'
 import setDisplayName from './setDisplayName'
 import wrapDisplayName from './wrapDisplayName'
 

src/packages/recompose/lifecycle.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-console */
-import { createFactory, Component } from 'react'
+import { Component } from 'react'
+import createFactory from './createFactory'
 import setDisplayName from './setDisplayName'
 import wrapDisplayName from './wrapDisplayName'
 

src/packages/recompose/mapProps.js

@@ -1,4 +1,4 @@
-import { createFactory } from 'react'
+import createFactory from './createFactory'
 import setDisplayName from './setDisplayName'
 import wrapDisplayName from './wrapDisplayName'
 

src/packages/recompose/mapPropsStream.js

@@ -1,5 +1,5 @@
-import { createFactory } from 'react'
 import $$observable from 'symbol-observable'
+import createFactory from './createFactory'
 import { componentFromStreamWithConfig } from './componentFromStream'
 import setDisplayName from './setDisplayName'
 import wrapDisplayName from './wrapDisplayName'

src/packages/recompose/nest.js

@@ -1,4 +1,4 @@
-import { createFactory } from 'react'
+import createFactory from './createFactory'
 import getDisplayName from './getDisplayName'
 
 const nest = (...Components) => {

src/packages/recompose/renderComponent.js

@@ -1,4 +1,4 @@
-import { createFactory } from 'react'
+import createFactory from './createFactory'
 import wrapDisplayName from './wrapDisplayName'
 
 const renderComponent = Component => _ => {

src/packages/recompose/shouldUpdate.js

@@ -1,4 +1,5 @@
-import { createFactory, Component } from 'react'
+import { Component } from 'react'
+import createFactory from './createFactory'
 import setDisplayName from './setDisplayName'
 import wrapDisplayName from './wrapDisplayName'
 

src/packages/recompose/utils/mapValues.js

@@ -1,12 +1,14 @@
 const mapValues = (obj, func) => {
   const result = {}
-  /* eslint-disable no-restricted-syntax */
+  // TODO: no-unused-vars seems to trigger a issue in recent eslint versions
+  /* eslint-disable no-restricted-syntax, no-unused-vars */
   for (const key in obj) {
     if (obj.hasOwnProperty(key)) {
       result[key] = func(obj[key], key)
     }
   }
-  /* eslint-enable no-restricted-syntax */
+  // TODO: see above comment regarding no-unused-vars
+  /* eslint-enable no-restricted-syntax, no-unused-vars */
   return result
 }
 

src/packages/recompose/withContext.js

@@ -1,4 +1,5 @@
-import { createFactory, Component } from 'react'
+import { Component } from 'react'
+import createFactory from './createFactory'
 import setDisplayName from './setDisplayName'
 import wrapDisplayName from './wrapDisplayName'
 

src/packages/recompose/withHandlers.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-console */
-import { createFactory, Component } from 'react'
+import { Component } from 'react'
+import createFactory from './createFactory'
 import setDisplayName from './setDisplayName'
 import wrapDisplayName from './wrapDisplayName'
 import mapValues from './utils/mapValues'

src/packages/recompose/withPropsOnChange.js

@@ -1,5 +1,6 @@
-import { createFactory, Component } from 'react'
+import { Component } from 'react'
 import { polyfill } from 'react-lifecycles-compat'
+import createFactory from './createFactory'
 import pick from './utils/pick'
 import shallowEqual from './shallowEqual'
 import setDisplayName from './setDisplayName'

src/packages/recompose/withReducer.js

@@ -1,4 +1,5 @@
-import { createFactory, Component } from 'react'
+import { Component } from 'react'
+import createFactory from './createFactory'
 import setDisplayName from './setDisplayName'
 import wrapDisplayName from './wrapDisplayName'
 

src/packages/recompose/withState.js

@@ -1,4 +1,5 @@
-import { createFactory, Component } from 'react'
+import { Component } from 'react'
+import __createFactory from './createFactory'
 import setDisplayName from './setDisplayName'
 import wrapDisplayName from './wrapDisplayName'
 
@@ -7,7 +8,7 @@ const withState = (
   stateUpdaterName,
   initialState
 ) => BaseComponent => {
-  const factory = createFactory(BaseComponent)
+  const factory = __createFactory(BaseComponent)
   class WithState extends Component {
     state = {
       stateValue:

src/packages/recompose/withStateHandlers.js

@@ -1,4 +1,5 @@
-import { createFactory, Component } from 'react'
+import { Component } from 'react'
+import createFactory from './createFactory'
 import setDisplayName from './setDisplayName'
 import wrapDisplayName from './wrapDisplayName'
 import mapValues from './utils/mapValues'