replace lodash with fast-deep-equal and vanilla JS implementations

.babelrc

@@ -4,8 +4,7 @@
     "@babel/plugin-proposal-export-default-from",
     "@babel/plugin-transform-proto-to-assign",
     "@babel/plugin-transform-strict-mode",
-    "dev-expression",
-    "lodash"
+    "dev-expression"
   ],
   "env": {
     "development": {
@@ -42,7 +41,6 @@
         "@babel/preset-react"
       ],
       "plugins": [
-        "./build/use-lodash-es",
         "@babel/plugin-transform-runtime"
       ]
     },
@@ -63,7 +61,6 @@
         "@babel/preset-react"
       ],
       "plugins": [
-        "./build/use-lodash-es",
         ["@babel/plugin-transform-runtime", { "useESModules": true }]
       ]
     }

package.json

@@ -50,9 +50,8 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.2.0",
+    "fast-deep-equal": "^2.0.1",
     "hoist-non-react-statics": "^3.2.1",
-    "lodash": "^4.0.0",
-    "lodash-es": "^4.0.0",
     "warning": "^4.0.0"
   },
   "peerDependencies": {
@@ -76,7 +75,6 @@
     "babel-jest": "^23.6.0",
     "babel-loader": "^8.0.4",
     "babel-plugin-dev-expression": "^0.2.1",
-    "babel-plugin-lodash": "^3.3.4",
     "cross-env": "^5.2.0",
     "eslint": "^5.10.0",
     "eslint-config-prettier": "^3.3.0",

src/Map.js

@@ -6,12 +6,12 @@ import {
   type CRS,
   type Renderer,
 } from 'leaflet'
-import { omit } from 'lodash'
 import React, { type Node } from 'react'
 
 import { LeafletProvider } from './context'
 import MapEvented from './MapEvented'
 import updateClassName from './utils/updateClassName'
+import omit from './utils/omit'
 import type {
   LatLng,
   LatLngBounds,
@@ -266,7 +266,7 @@ export default class Map extends MapEvented<LeafletElement, Props> {
   }
 
   componentDidMount() {
-    const props = omit(this.props, OTHER_PROPS)
+    const props = omit(this.props, ...OTHER_PROPS)
     this.leafletElement = this.createLeafletElement(props)
 
     this.leafletElement.on('move', this.onViewportChange)

src/MapEvented.js

@@ -1,7 +1,6 @@
 // @flow
 
 import type { Evented } from 'leaflet'
-import { forEach } from 'lodash'
 import { Component } from 'react'
 
 export const EVENTS_RE = /^on(.+)$/i
@@ -36,8 +35,8 @@ export default class MapEvented<
     const el = this.leafletElement
     if (!el) return
 
-    forEach(this._leafletEvents, (cb, ev) => {
-      el.off(ev, cb)
+    Object.keys(this._leafletEvents).forEach(ev => {
+      el.off(ev, this._leafletEvents[ev])
     })
   }
 
@@ -61,17 +60,17 @@ export default class MapEvented<
     if (el == null || el.on == null) return {}
 
     const diff = { ...prev }
-    forEach(prev, (cb, ev) => {
-      if (next[ev] == null || cb !== next[ev]) {
+    Object.keys(prev).forEach(ev => {
+      if (next[ev] == null || prev[ev] !== next[ev]) {
         delete diff[ev]
-        el.off(ev, cb)
+        el.off(ev, prev[ev])
       }
     })
 
-    forEach(next, (cb, ev) => {
-      if (prev[ev] == null || cb !== prev[ev]) {
-        diff[ev] = cb
-        el.on(ev, cb)
+    Object.keys(next).forEach(ev => {
+      if (prev[ev] == null || next[ev] !== prev[ev]) {
+        diff[ev] = next[ev]
+        el.on(ev, next[ev])
       }
     })
 

src/Pane.js

@@ -1,13 +1,16 @@
 // @flow
 // flowlint sketchy-null-string:off
 
-import { forEach, omit, uniqueId } from 'lodash'
 import React, { Component, type Node } from 'react'
 import warning from 'warning'
 
 import { LeafletProvider, withLeaflet } from './context'
 import type { LeafletContext } from './types'
 import { addClassName, removeClassName } from './utils/updateClassName'
+import omit from './utils/omit'
+
+let idCounter = 0
+const uniqueId = () => ++idCounter
 
 const LEAFLET_PANES = [
   'tile',
@@ -134,8 +137,11 @@ class Pane extends Component<Props, State> {
         addClassName(pane, className)
       }
       if (style) {
-        forEach(style, (value, key) => {
-          pane.style[key] = value
+        // Without the cast, Flow throws this error:
+        //   Cannot assign style[key] to pane.style[key] because string
+        //   is incompatible with number.
+        Object.keys(style).forEach((key: any) => {
+          pane.style[key] = style[key]
         })
       }
     }

src/Path.js

@@ -1,10 +1,11 @@
 // @flow
 
 import type { Path as PathType } from 'leaflet'
-import { isEqual, pick } from 'lodash'
+import isEqual from 'fast-deep-equal'
 
 import MapLayer from './MapLayer'
 import type { PathOptions, PathProps } from './types'
+import pick from './utils/pick'
 
 const OPTIONS = [
   'stroke',

src/WMSTileLayer.js

@@ -1,7 +1,7 @@
 // @flow
 
 import { TileLayer } from 'leaflet'
-import { isEqual } from 'lodash'
+import isEqual from 'fast-deep-equal'
 
 import { withLeaflet } from './context'
 import GridLayer from './GridLayer'

src/utils/omit.js

@@ -0,0 +1,13 @@
+// @flow
+
+export default function omit(
+  obj: Object,
+  ...keysToOmit: Array<string>
+): Object {
+  return Object.keys(obj).reduce((acc, key) => {
+    if (keysToOmit.indexOf(key) === -1) {
+      acc[key] = obj[key]
+    }
+    return acc
+  }, {})
+}

src/utils/pick.js

@@ -0,0 +1,10 @@
+// @flow
+
+export default function pick(object: Object, keys: Array<string>): Object {
+  return keys.reduce((obj, key) => {
+    if (object[key]) {
+      obj[key] = object[key]
+    }
+    return obj
+  }, {})
+}