[Chore] Dependency upgrade

[ilijapuaca]

I've made a pass on the dependency versions in order to bring them up to date as some of them got pretty outdated, which may present an issue for some of the adopters.

I've only upgraded the dependencies which seemingly did not have many breaking changes, in order to be able to batch them into a single PR. Upgrading libraries that may require more structured overhaul will be done in followup PRs.

There were a few issues that came up with the upgrades which I had to patch up, all of which I've provided in-line comments in this PR as to why specific changes had to be made.

Below is the list of libraries for which major version was bumped up, including a list of breaking changes based on their changelogs. The list is then followed by libraries which versions I did not upgrade, as they would make this PR harder to review.

Upgraded libraries

@mapbox/geo-viewport(0.2.2 -> 0.4.1)
- Remove outdated Node.js version support and test with v6 and v8
- Update viewport method to take an optional allowFloat parameter to allow float values (h/t @TeaSeaLancs) #15

@loaders.gl/*(2.3.0-alpha.9 -> 2.3.0)
- None?

d3-array(1.2.4 -> 2.8.0)
d3-axis(1.0.12 -> 2.0.0)
d3-brush(1.1.6 -> 2.1.0)
d3-color(1.4.1 -> 2.0.0)
d3-dsv(1.2.0 -> 2.0.0)
- This release adopts ES2015 language features such as for-of and drops support for older browsers, including IE. If you need to support pre-ES2015 environments, you should stick with d3-brush 1.x or use a transpiler.

d3-format(1.4.5 -> 2.0.0)
- Change the default minus sign to the minus sign (−) instead of hyphen-minus (-)
- This release adopts ES2015 language features such as for-of and drops support for older browsers, including IE. If you need to support pre-ES2015 environments, you should stick with d3-brush 1.x or use a transpiler.

d3-scale(1.0.7 -> 3.2.3)
- This release adopts ES2015 language features such as for-of and drops support for older browsers, including IE. If you need to support pre-ES2015 environments, you should stick with d3-brush 1.x or use a transpiler.
- Move color schemes to d3-scale-chromatic.
- Remove category20* color schemes. (#96)

babel-eslint(9.0.0 -> 10.1.0)
- Small breaking change: add a peerDependency starting from the ESLint version that added a parser feature that we were monkeypatching before (and drop that code). If already using ESLint 5 shouldn't be any different.

babel-plugin-istanbul(5.2.0 -> 6.0.0)
- Drop node.js 6 (#226)

babel-plugin-module-resolver(3.2.0 -> 4.0.0)
- The minimum node.js version that is now officially supported is Node 8.

dot-prop(5.1.1 -> 6.0.0)
- Require Node.js 10 5840717
- Allow getting non-enumerable properties (#54) cbd7074

jest(25.5.4 -> 26.6.1)
- [jest-environment-jsdom] [BREAKING] Upgrade jsdom to v16 (#9606)
- [jest-circus] [BREAKING] Fail tests if a test takes a done callback and have return values (#9129)
- [jest-circus] [BREAKING] Throw a proper error if a test / hook is defined asynchronously (#8096)
- [jest-circus] [BREAKING] Align execution order of tests to match jasmine's top to bottom order (#9965)
- [jest-config, jest-resolve] [BREAKING] Remove support for browser field (#9943)
- [*] [BREAKING] TypeScript definitions requires a minimum of TypeScript v3.8 (#9823)
- [*] [BREAKING] Drop support for Node 8 (#9423)
- [expect, jest-mock, pretty-format] [BREAKING] Remove build-es5 from package (#9945)
- [@jest/fake-timers, @jest/environment] [BREAKING] Rename LolexFakeTimers to ModernFakeTimers (#9960)
- [jest-haste-map] [BREAKING] removed providesModuleNodeModules (#8535)
- [jest-runtime] [BREAKING] Remove long-deprecated require.requireActual and require.requireMock methods (#9854)


jest-image-snapshot(2.12.0 -> 4.2.0)
- packages: pixelmatch is being major version bumped and so image diffs may be difference
- packages: Node min version is now 8
- travis: drop support for node 6
- drop node 8 support

jpeg-js(0.4.0 -> 0.4.2)
- drop decode boolean second argument, options must be an object
- images larger than 100 megapixels or requiring more than 512MB of memory to decode will throw unless maxMemoryInMB and maxResolutionInMP options are increased
- no longer support node versions before 8 LTS

progress-bar-webpack-plugin(1.12.1 -> 2.1.0)
- ?

react(16.14.0 -> 17.0.1)
react-dom(16.14.0 -> 17.0.1)
- The onScroll event no longer bubbles to prevent common confusion.
- React onFocus and onBlur events have switched to using the native focusin and focusout events under the hood, which more closely match React’s existing behavior and sometimes provide extra information.
- Capture phase events (e.g. onClickCapture) now use real browser capture phase listeners.

react-hot-loader(3.1.3 -> 4.13.0)
- None

react-json-pretty(1.7.9 -> 2.2.0)
- ?

react-markdown(4.3.1 -> 5.0.2)
- None

react-tooltip(3.11.6 -> 4.2.10)
- Updating readme for demo

redux(3.7.2 -> 4.0.5)
- The other big change is we are now bundling our CommonJS and ES builds like React has done recently. This means direct, private imports (import createStore from 'redux/lib/createStore') will no longer work

reselect(3.0.1 -> 4.0.0)
- Updated TypeScript typings (#274, #315)

source-map-loader(0.2.4 -> 1.1.1)
- minimum supported Node.js version is 10.13
- minimum supported webpack version is 4

supercluster(6.0.2 -> 7.1.0)
- ⚠️ Possibly breaking: adjusted generated cluster id values to make sure there are no collisions when combined with generateId.

tape(4.13.3 -> 5.0.1)
- ?

tough-cookie(2.3.0 -> 4.0.0)
- Modernized JS Syntax
- Use ESLint and Prettier to apply consistent, modern formatting (add dependency on universalify, eslint and prettier)
- Upgraded version dependencies for psl and async
- Re-order parameters for findCookies() - callback fn has to be last in order to comply with universalify
- Use Classes instead of function prototypes to define classes
- Might break people using .call() to do inheritance using function prototypes

type-analyzer(0.2.5 -> 0.3.0)
- None

typedoc(0.17.8 -> 0.19.2)
- Minimum Node version bumped to v10.0.0

typedoc-plugin-markdown(2.4.2 -> 3.0.11)
- [breaking change] Removed --theme docusaurus/vuepress implementation in favour of seperate plugins.

url-loader(0.5.9 -> 4.1.1)
- Sets engines to "node": ">= 6.9.0 || >= 8.9.0"
- Drops support for webpack =< v2.0.0
- minimum required nodejs version is 8.9.0
- limit should always be a number and 0 value handles as number
- fallback loader will be used than limit is equal or greater (before only when greater)
- minimum required nodejs version is 10.13.0
- rename the esModules option to esModule
- switch to ES modules by default (the option esModule is true by default)
- deps: migrate on mime-types package, some rare types may have other mimetype

Libraries pending upgrade

eslint(5.16.0 -> 7.11.0)
nyc(11.9.0 -> 15.1.0)
- babel@7 drops Node.js 4 support
- --hook-run-in-context, and --hook-run-in-this-context are no longer true by default (they should be enabled if you're using a library like requirejs).
- The --exclude-after-remap option is now functional and enabled by default. This causes the include, exclude and extension lists to be processed after using source maps to determine the original filename of sources.
-Add a file named 'index.json' to the .nyc_output/processinfo directory, which has a different format from the other files in this dir.
- Change the data type of the pid/ppid fields in processinfo files
- nyc instrument now honors include and exclude settings, potentially resulting in some files that were previously instrumented being ignored.
- The plugins option has been renamed to parser-plugins.
- The logic involving include/exclude processing has changed. Results should be verified to ensure all desired sources have coverage data.
- nyc instrument now enables the --es-module option by default. This can cause failures to instrument scripts which violate 'use strict' rules.
- The flow and jsx parser plugins are no longer enabled by default.
- Node.js 8 is now required to run nyc
- Remove NYC_ROOT_ID and NYC_INSTRUMENTER environmental variables.
- The root field has been removed from processinfo files.

prettier(1.19.1 -> 2.1.2)
puppeteer(2.1.1 -> 5.3.1)

react-intl(3.12.1 -> 5.8.6)
- react-intl: This also comes from Dropbox internal developer feedback. FormattedMessage has a default English renderer that masks Provider setup issues which causes them to not be handled during testing phase.
intl-messageformat: This effectively change the signature for formatter
function from (...chunks) => any to (chunks) => any. This solves a
couple of issues:
We received user feedback that variadic function is not as ergonomic
Right now there's not way to distinguish between 2 chunks that have
the same tag, e.g <b>on</b> and <b>on</b>. The function would
receive 2 chunks that are identical. By consoliding to the 1st param we
can reserve additional params to provide mode metadata in the future
react-intl: This turns rich text formatting callback function to
non-variadic. So (...chunks) => React.ReactNode becomes (chunks) => React.ReactNode. This solves a couple of issues:
We receive feedback that variadic callback fn is not ergonomic
This solves the missing key issue when we render rich text
This allows us to utilize extra param to distinguish when 2 React
element are exactly the same except for their indices, e.g <b>one</b> and <b>one</b> and you want to render them differently

- This release contains subtle changes to the way we handle embedded HTML Message:
All tags specified must have corresponding values and will throw error if it's missing, e.g:
new IntlMessageFormat("a<b>strong</b>").format({ b: (...chunks) => <strong>chunks</strong> })
We don't allow formatting self-closing tags because we already use ICU {placeholder} syntax for that.
XML/HTML tags are escaped using apostrophe just like other ICU constructs.
Remove dependency on DOMParser and restrictions on void element like <link>. This effectively means you don't need to polyfill DOMParser in Node anymore.
FormattedHTMLMessage & intl.formatHTMLMessage have been removed since FormattedMessage now fully supports embedded HTML tag.

documentation(9.3.1 -> 13.0.2)
- this may change babel configuration loading, and is a major change to the documentation.js approach to Babel.
- this removes support for legacy decorators, because in one place we had legacy and in another we didn't.
- documentation.js will now require node 10 or later.

react-map-gl-draw(0.14.8 -> 0.21.1)
Breaking changes for EditableGeoJsonLayer
featureIndexes is now nested under editContext.featureIndexes in parameter passed to onEdit callback
Edit handle type is now under properties.editHandleType instead of type for edit handle styling accessors:
getEditHandlePointColor
getEditHandlePointRadius
getEditHandleIcon
getEditHandleIconSize
getEditHandleIconColor
getEditHandleIconAngle
Deprecated: The mode prop is intended to take a constructor or instance rather than a string.
import {DrawPolygonMode} from 'nebula.gl'; new EditableGeoJsonLayer({mode: DrawPolygonMode})
editHandleType no longer supports passing a function/constructor. Use _subLayerProps instead.
editHandleParameters removed. Use _subLayerProps instead.
editHandleLayerProps removed. Use _subLayerProps instead.
Breaking changes between ModeHandler and GeoJsonEditMode
If you built a custom ModeHandler, note the following breaking changes:

Extend GeoJsonEditMode instead of ModeHandler
Each function now takes a props parameter with the state, so use props rather than this.get...() (e.g. this.getFeatureCollection(), this.getModeConfig(), etc).
handleClick
Call props.onEdit instead of returning an EditAction
handlePointerMove
Call props.onEdit instead of returning an EditAction
Call event.sourceEvent.stopPropagation() instead of returning {cancelMapPan: true}
handleStartDragging
Call props.onEdit instead of returning an EditAction
handleStopDragging
Call props.onEdit instead of returning an EditAction
Guides
Edit handles and tentative features are now encompassed as "guides"
Guides are formatted as GeoJSON FeatureCollection
Override getGuides instead of getEditHandles
Format edit handles as GeoJSON Features instead of custom objects
Override getGuides instead of calling this._setTentativeFeature()
getCursor
Instead of defining a getCursor function, call props.onUpdateCursor
groundCoords renamed to mapCoords in event objects

DrawCircleByBoundingBoxMode renamed to DrawCircleByDiameterMode (#314)
The following props of EditableGeoJsonLayer are no longer proxied by nebula.gl (instead use deck.gl's _subLayerProps):
getLineDashArray
lineDashJustified
getTentativeLineDashArray

Call event.cancelPan() instead of event.sourceEvent.stopPropagation() in custom edit modes
PointerMoveEvent no longer has an isDragging flag. Instead, use the new handleDragging event.

sinon(2.4.1 -> 9.2.0)
- Remove deprecated exports (see migration guide)
- Explicitly update fake xhr lib 'nise'
- Remove accidental dependency to "build"
- Remove deprecated spy.reset method
- Export Sinon and its functions as an EcmaScript module (#1809 and #1835)
- Update to Lolex 3: no negative ticks allowed
- Remove sinon.spyCall
- Remove sinon.sandbox.create
- Remove obsolete deprecated.printWarning stubbing from test
- Drop Node 8 support

styled-components(4.4.1 -> 5.2.0)
- Remove deprecated attrs "subfunction" syntax variant

typescript(3.8.3 -> 4.0.3)
- lib.d.ts Changes - Our lib.d.ts declarations have changed - most specifically, types for the DOM have changed. The most notable change may be the removal of document.origin which only worked in old versions of IE and Safari MDN recommends moving to self.origin.
- Properties Overriding Accessors (and vice versa) is an Error
- Operands for delete must be optional.
- Usage of TypeScript’s Node Factory is Deprecated

viewport-mercator-project(6.2.3 -> 7.0.1)
- Repo archived, release not available on Github. Suggests switching to math.gl?

webpack(4.44.2 -> 5.2.0)
- Some Plugins and Loaders might have a beta version that has to be used in order to be compatible with webpack 5.

webpack-cli(3.3.12 -> 4.1.0)
- None?

webpack-stats-plugin(0.2.1 -> 1.0.1)
- ?

[ilijapuaca]

Per the comment above, @mapbox/geo-viewport has updated the way viewport is being determined, making the tests fail. It seems like this simplified implementation is what the expected behavior is, so I've revisited it accordingly. There doesn't seem to be a single place in which viewport is being calculated, which could be a potential improvement to encapsulate this type of logic. References:

• viewport function in v0.2.2 (pre-upgrade) - https://github.com/mapbox/geo-viewport/blob/v0.2.2/index.js#L24
• viewport function in the laster master (post-upgrade) - https://github.com/mapbox/geo-viewport/blob/master/index.js#L32

[ilijapuaca]

This one took some time to figure out, but tests were failing due to a change in d3-format which now uses a minus sign (−) instead of a hyphen (-), which according to this issue is the correct way to provide better text alignment across different fonts.

I've made the updates to match this change and use the minus sign instead, if this is not what we want to do, according to the docs it should be possible to override the minus sign for a specific locale (relevant PR here)

[nrabinowitz]

Characters that look the same in code are an incredible trap door. At a minimum, can we use a Unicode escape sequence here ('\u2212') instead of the bare character, plus a comment, to save some time for the next developer to deal with this code?

[ilijapuaca]

Wanted to get a take on which sign we actually want to use here - revisited the comparison as there were no objections to switching to the minus sign

[ilijapuaca]

Warnings were coming up in tests due to missing displayName

[ilijapuaca]

Tests were failing because [] was expected and the actual state was {}, not sure how my changes affected this, but {} seems like the right value?

[ilijapuaca]

Spent a lot of time on this one, eventually had to patch it up like so as I am not sure what the underlying issue is exactly

[macrigiuseppe]

@ilijapuaca i tried load an examples locally but they don't work:
http://localhost:8080/demo/earthquakes
http://localhost:8080/demo/nyctrips

[heshan0131]

@ilijapuaca i tried load an examples locally but they don't work:
http://localhost:8080/demo/earthquakes
http://localhost:8080/demo/nyctrips

the netlify build works, you need to cleanup node modules in examples/demo folder

[macrigiuseppe]

@ilijapuaca i tried load an examples locally but they don't work:
http://localhost:8080/demo/earthquakes
http://localhost:8080/demo/nyctrips

the netlify build works, you need to cleanup node modules in examples/demo folder

I checked netlify build here: https://deploy-preview-1314--keplergl.netlify.app/demo/earthquakes | https://deploy-preview-1314--keplergl.netlify.app/demo/nyctrips and don't work.

As far as local goes i did: yarn clean && yarn && yarn start

[heshan0131]

@ilijapuaca i tried load an examples locally but they don't work:
http://localhost:8080/demo/earthquakes
http://localhost:8080/demo/nyctrips

the netlify build works, you need to cleanup node modules in examples/demo folder

I checked netlify build here: https://deploy-preview-1314--keplergl.netlify.app/demo/earthquakes | https://deploy-preview-1314--keplergl.netlify.app/demo/nyctrips and don't work.

As far as local goes i did: yarn clean && yarn && yarn start

Acutally you're right, looks like it's related to timeline range-brush component. either a change of API on d3-selection or d3-brush

[heshan0131]

Could be relevant
d3/d3-brush#15

[ilijapuaca]

@heshan0131 @macrigiuseppe patched up the issue which was introduced with d3/d3-selection#191

[ilijapuaca]

Addressed an issue with d3-brush related crash that happens when dragging the time range

[macrigiuseppe]

Addressed an issue with d3-brush related crash that happens when dragging the time range

looking