feat(deps): replace recompose with inlined version (#1494)

packages/bar/package.json

@@ -29,6 +29,7 @@
   ],
   "dependencies": {
     "@nivo/annotations": "0.68.0",
+    "@nivo/recompose": "0.68.0",
     "@nivo/axes": "0.68.0",
     "@nivo/colors": "0.68.0",
     "@nivo/legends": "0.68.0",
@@ -37,8 +38,7 @@
     "d3-scale": "^3.0.0",
     "d3-shape": "^1.2.2",
     "lodash": "^4.17.11",
-    "react-motion": "^0.5.2",
-    "recompose": "^0.30.0"
+    "react-motion": "^0.5.2"
   },
   "devDependencies": {
     "@nivo/core": "0.68.0"

packages/bar/src/Bar.js

@@ -11,8 +11,8 @@ import { TransitionMotion, spring } from 'react-motion'
 import { bindDefs, LegacyContainer, SvgWrapper, CartesianMarkers } from '@nivo/core'
 import { Axes, Grid } from '@nivo/axes'
 import { BoxLegendSvg } from '@nivo/legends'
+import { setDisplayName } from '@nivo/recompose'
 import { generateGroupedBars, generateStackedBars, getLegendData } from './compute'
-import setDisplayName from 'recompose/setDisplayName'
 import enhance from './enhance'
 import { BarSvgDefaultProps, BarSvgPropTypes } from './props'
 import BarAnnotations from './BarAnnotations'

packages/bar/src/BarCanvas.js

@@ -8,10 +8,10 @@
  */
 import React, { Component } from 'react'
 import uniqBy from 'lodash/uniqBy'
-import setDisplayName from 'recompose/setDisplayName'
 import { getRelativeCursor, isCursorInRect, LegacyContainer } from '@nivo/core'
 import { renderAxesToCanvas, renderGridLinesToCanvas } from '@nivo/axes'
 import { renderLegendToCanvas } from '@nivo/legends'
+import { setDisplayName } from '@nivo/recompose'
 import { BasicTooltip } from '@nivo/tooltip'
 import { generateGroupedBars, generateStackedBars } from './compute'
 import { BarDefaultProps, BarPropTypes } from './props'

packages/bar/src/BarItem.js

@@ -6,11 +6,9 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
+import { compose, pure, withPropsOnChange } from '@nivo/recompose'
 import React from 'react'
 import PropTypes from 'prop-types'
-import compose from 'recompose/compose'
-import withPropsOnChange from 'recompose/withPropsOnChange'
-import pure from 'recompose/pure'
 import { BasicTooltip } from '@nivo/tooltip'
 
 const BarItem = ({

packages/bar/src/enhance.js

@@ -6,10 +6,7 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import { compose } from 'recompose'
-import defaultProps from 'recompose/defaultProps'
-import withPropsOnChange from 'recompose/withPropsOnChange'
-import pure from 'recompose/pure'
+import { compose, defaultProps, pure, withPropsOnChange } from '@nivo/recompose'
 import {
     withTheme,
     withDimensions,

packages/core/package.json

@@ -20,6 +20,7 @@
     "dist/"
   ],
   "dependencies": {
+    "@nivo/recompose": "0.68.0",
     "d3-color": "^2.0.0",
     "d3-format": "^1.4.4",
     "d3-hierarchy": "^1.1.8",
@@ -30,7 +31,6 @@
     "d3-time-format": "^2.1.3",
     "lodash": "^4.17.11",
     "react-spring": "9.1.2",
-    "recompose": "^0.30.0",
     "resize-observer-polyfill": "^1.5.1"
   },
   "devDependencies": {

packages/core/src/hocs/withCurve.js

@@ -6,7 +6,7 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import withProps from 'recompose/withProps'
+import { withProps } from '@nivo/recompose'
 import { curveFromProp } from '../props'
 
 /**

packages/core/src/hocs/withDimensions.js

@@ -6,12 +6,9 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
+import { compose, setPropTypes, defaultProps, withPropsOnChange } from '@nivo/recompose'
 import PropTypes from 'prop-types'
 import isEqual from 'lodash/isEqual'
-import compose from 'recompose/compose'
-import setPropTypes from 'recompose/setPropTypes'
-import defaultProps from 'recompose/defaultProps'
-import withPropsOnChange from 'recompose/withPropsOnChange'
 import { marginPropType } from '../props'
 import { defaultMargin } from '../defaults'
 

packages/core/src/hocs/withHierarchy.js

@@ -6,11 +6,8 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
+import { compose, defaultProps, setPropTypes, withPropsOnChange } from '@nivo/recompose'
 import PropTypes from 'prop-types'
-import compose from 'recompose/compose'
-import defaultProps from 'recompose/defaultProps'
-import setPropTypes from 'recompose/setPropTypes'
-import withPropsOnChange from 'recompose/withPropsOnChange'
 import { hierarchy } from 'd3-hierarchy'
 import { getPropertyAccessor } from '../lib/propertiesConverters'
 

packages/core/src/hocs/withMotion.js

@@ -6,9 +6,7 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import compose from 'recompose/compose'
-import defaultProps from 'recompose/defaultProps'
-import setPropTypes from 'recompose/setPropTypes'
+import { compose, defaultProps, setPropTypes } from '@nivo/recompose'
 import { motionPropTypes } from '../motion'
 import { defaultAnimate, defaultMotionDamping, defaultMotionStiffness } from '../defaults'
 

packages/core/src/hocs/withTheme.js

@@ -6,10 +6,8 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
+import { compose, setPropTypes, withPropsOnChange } from '@nivo/recompose'
 import PropTypes from 'prop-types'
-import compose from 'recompose/compose'
-import setPropTypes from 'recompose/setPropTypes'
-import withPropsOnChange from 'recompose/withPropsOnChange'
 import { defaultTheme, extendDefaultTheme } from '../theming'
 
 /**

packages/recompose/README.md

@@ -0,0 +1,7 @@
+# `@nivo/recompose`
+
+[![version](https://img.shields.io/npm/v/@nivo/recompose.svg?style=flat-square)](https://www.npmjs.com/package/@nivo/recompose)
+
+## Recompose
+
+![Recompose](https://raw.githubusercontent.com/plouc/nivo/master/packages/recompose/doc/recompose.png)

packages/recompose/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@nivo/recompose",
+  "version": "0.68.0",
+  "keywords": [
+    "nivo",
+    "react",
+    "recompose"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/plouc/nivo.git",
+    "directory": "packages/recompose"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Raphaël Benitte",
+    "url": "https://github.com/plouc"
+  },
+  "main": "./dist/nivo-recompose.cjs.js",
+  "module": "./dist/nivo-recompose.es.js",
+  "typings": "./dist/types/index.d.ts",
+  "files": [
+    "README.md",
+    "LICENSE.md",
+    "dist/",
+    "!dist/tsconfig.tsbuildinfo"
+  ],
+  "dependencies": {
+    "react-lifecycles-compat": "^3.0.4"
+  },
+  "devDependencies": {
+    "@types/react-lifecycles-compat": "^3.0.1"
+  },
+  "peerDependencies": {
+    "react": ">= 16.8.4 < 18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/recompose/src/compose.ts

@@ -0,0 +1,12 @@
+import { ComponentClass, ComponentType } from 'react'
+
+interface ComponentEnhancer<TInner, TOuter> {
+    (component: ComponentType<TInner>): ComponentClass<TOuter>
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export const compose = <TInner, TOuter>(...funcs: Function[]): ComponentEnhancer<TInner, TOuter> =>
+    funcs.reduce<ComponentEnhancer<TInner, TOuter>>(
+        (a, b) => (...args) => a(b(...args)),
+        arg => arg as any
+    ) as ComponentEnhancer<TInner, TOuter>

packages/recompose/src/defaultProps.ts

@@ -0,0 +1,17 @@
+import { createFactory } from 'react'
+import { setDisplayName } from './setDisplayName'
+import { DefaultingInferableComponentEnhancer } from './types'
+import { wrapDisplayName } from './wrapDisplayName'
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export const defaultProps = <T = {}>(props: T): DefaultingInferableComponentEnhancer<T> => (
+    BaseComponent: any
+): any => {
+    const factory = createFactory(BaseComponent)
+    const DefaultProps = (ownerProps: any) => factory(ownerProps)
+    DefaultProps.defaultProps = props
+    if (process.env.NODE_ENV !== 'production') {
+        return setDisplayName(wrapDisplayName(BaseComponent, 'defaultProps'))(DefaultProps)
+    }
+    return DefaultProps
+}

packages/recompose/src/getDisplayName.ts

@@ -0,0 +1,13 @@
+import { ComponentType } from 'react'
+
+export const getDisplayName = (component: ComponentType<any> | string): string | undefined => {
+    if (typeof component === 'string') {
+        return component
+    }
+
+    if (!component) {
+        return undefined
+    }
+
+    return component.displayName || component.name || 'Component'
+}

packages/recompose/src/index.ts

@@ -0,0 +1,13 @@
+export * from './getDisplayName'
+export * from './pure'
+export * from './setDisplayName'
+export * from './setStatic'
+export * from './shallowEqual'
+export * from './shouldUpdate'
+export * from './wrapDisplayName'
+export * from './compose'
+export * from './withPropsOnChange'
+export * from './defaultProps'
+export * from './withProps'
+export * from './setPropTypes'
+export * from './withState'

packages/recompose/src/mapProps.ts

@@ -0,0 +1,15 @@
+import { createFactory } from 'react'
+import { setDisplayName } from './setDisplayName'
+import { InferableComponentEnhancerWithProps, Mapper } from './types'
+import { wrapDisplayName } from './wrapDisplayName'
+
+export const mapProps = <TInner, TOuter>(
+    propsMapper: Mapper<TOuter, TInner>
+): InferableComponentEnhancerWithProps<TInner, TOuter> => (BaseComponent: any): any => {
+    const factory = createFactory(BaseComponent)
+    const MapProps = (props: any) => factory(propsMapper(props))
+    if (process.env.NODE_ENV !== 'production') {
+        return setDisplayName(wrapDisplayName(BaseComponent, 'mapProps'))(MapProps)
+    }
+    return MapProps
+}

packages/recompose/src/pure.ts

@@ -0,0 +1,15 @@
+import { ComponentType } from 'react'
+import { setDisplayName } from './setDisplayName'
+import { shallowEqual } from './shallowEqual'
+import { shouldUpdate } from './shouldUpdate'
+import { wrapDisplayName } from './wrapDisplayName'
+
+export const pure = <TProps>(component: ComponentType<TProps>): ComponentType<TProps> => {
+    const hoc = shouldUpdate((props, nextProps) => !shallowEqual(props, nextProps))
+
+    if (process.env.NODE_ENV !== 'production') {
+        return setDisplayName(wrapDisplayName(component, 'pure'))(hoc(component))
+    }
+
+    return hoc(component)
+}

packages/recompose/src/setDisplayName.ts

@@ -0,0 +1,6 @@
+import { ComponentType } from 'react'
+import { setStatic } from './setStatic'
+
+export const setDisplayName = (
+    displayName: string
+): (<T extends ComponentType<any>>(component: T) => T) => setStatic('displayName', displayName)

packages/recompose/src/setPropTypes.ts

@@ -0,0 +1,6 @@
+import { ComponentType, ValidationMap } from 'react'
+import { setStatic } from './setStatic'
+
+export const setPropTypes = <P>(
+    propTypes: ValidationMap<P>
+): (<T extends ComponentType<P>>(component: T) => T) => setStatic('propTypes', propTypes)

packages/recompose/src/setStatic.ts

@@ -0,0 +1,12 @@
+import { ComponentType } from 'react'
+
+export const setStatic = (
+    key: string,
+    value: any
+): (<T extends ComponentType<any>>(component: T) => T) => BaseComponent => {
+    /* eslint-disable no-param-reassign */
+    // @ts-expect-error there's no way to type this
+    BaseComponent[key] = value
+    /* eslint-enable no-param-reassign */
+    return BaseComponent
+}

packages/recompose/src/shallowEqual.ts

@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @providesModule shallowEqual
+ * @typechecks
+ */
+
+/* eslint-disable no-self-compare */
+
+const hasOwnProperty = Object.prototype.hasOwnProperty
+
+/**
+ * inlined Object.is polyfill to avoid requiring consumers ship their own
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+ */
+function is(x: unknown, y: unknown): boolean {
+    // SameValue algorithm
+    if (x === y) {
+        // Steps 1-5, 7-10
+        // Steps 6.b-6.e: +0 != -0
+        // Added the nonzero y check to make Flow happy, but it is redundant
+        return x !== 0 || y !== 0 || 1 / x === 1 / y
+    }
+    // Step 6.a: NaN == NaN
+    return x !== x && y !== y
+}
+
+/**
+ * Performs equality by iterating through keys on an object and returning false
+ * when any key has values which are not strictly equal between the arguments.
+ * Returns true when the values of all keys are strictly equal.
+ */
+export function shallowEqual(
+    objA: Record<string, unknown>,
+    objB: Record<string, unknown>
+): boolean {
+    if (is(objA, objB)) {
+        return true
+    }
+
+    if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+        return false
+    }
+
+    const keysA = Object.keys(objA)
+    const keysB = Object.keys(objB)
+
+    if (keysA.length !== keysB.length) {
+        return false
+    }
+
+    // Test for A's keys different from B.
+    for (let i = 0; i < keysA.length; i++) {
+        if (!hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
+            return false
+        }
+    }
+
+    return true
+}

packages/recompose/src/shouldUpdate.ts

@@ -0,0 +1,27 @@
+import { Component, createFactory } from 'react'
+import { setDisplayName } from './setDisplayName'
+import { InferableComponentEnhancer, PredicateDiff } from './types'
+import { wrapDisplayName } from './wrapDisplayName'
+
+export const shouldUpdate = <TProps extends Record<string, unknown>>(
+    test: PredicateDiff<TProps>
+    // eslint-disable-next-line @typescript-eslint/ban-types
+): InferableComponentEnhancer<{}> => (BaseComponent: any): any => {
+    const factory = createFactory(BaseComponent)
+    class ShouldUpdate extends Component {
+        shouldComponentUpdate(nextProps: any) {
+            // @ts-expect-error not type-able
+            return test(this.props, nextProps)
+        }
+
+        render() {
+            // @ts-expect-error not type-able
+            return factory(this.props)
+        }
+    }
+
+    if (process.env.NODE_ENV !== 'production') {
+        return setDisplayName(wrapDisplayName(BaseComponent, 'shouldUpdate'))(ShouldUpdate)
+    }
+    return ShouldUpdate
+}