[chore] Upgrade deck.gl to 8.9 (#2352)

scripts/babel-tape-runner.js → babel-register.js

@@ -18,9 +18,28 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
+const forceTranspile = [
+  // ESM libraries that require transpilation
+  /@deck.gl\/layers/,
+  // For some reason babel crashes even before trying to transpile this library
+  // Instead we force transpile @deck.gl/layers which includes it, and alias to a transpiled version in babel.config.js
+  /@mapbox\/tiny-sdf/
+];
+
 require('@babel/register')({
-  extensions: ['.tsx', '.ts', '.js', '.json']
+  // This tells babel where to look for `babel.config.js` file
+  root: __dirname,
+  ignore: [
+    filepath => {
+      return forceTranspile.some(patt => patt.test(filepath))
+        ? false
+        : Boolean(filepath.match(/node_modules/));
+    }
+  ],
+  only: [__dirname],
+  extensions: ['.ts', '.js', '.tsx', '.json']
 });
+
 require('@babel/polyfill');
 var path = require('path');
 var glob = require('glob');

babel.config.js

@@ -18,8 +18,11 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
+const {resolve} = require('path');
 const KeplerPackage = require('./package');
 
+const nodeModules = resolve(__dirname, 'node_modules');
+
 const PRESETS = ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'];
 const PLUGINS = [
   ['@babel/plugin-transform-typescript', {isTSX: true, allowDeclareFields: true}],
@@ -36,11 +39,14 @@ const PLUGINS = [
   [
     'module-resolver',
     {
+      extensions: ['.js', '.ts', '.tsx', '.json'],
       root: ['./src'],
       alias: {
-        test: './test'
+        test: './test',
+        // We explicitly transpile this ESM library in scripts/fix-dependencies.js and consume the transpiled version here
+        // This may not be needed once switch to Jest is complete as it is handled by transformIgnorePatterns
+        '@mapbox/tiny-sdf': `${nodeModules}/@mapbox/tiny-sdf/index.cjs`
       },
-      extensions: ['.js', '.ts', '.tsx', '.json']
     }
   ],
   [

examples/demo-app/package.json

@@ -49,10 +49,10 @@
     "webpack-hot-middleware": "^2.24.3"
   },
   "resolutions": {
-    "@luma.gl/core": "8.5.18",
-    "@luma.gl/webgl": "8.5.18",
-    "@deck.gl/core": "8.8.27",
-    "@deck.gl/extensions": "8.8.27",
+    "@luma.gl/core": "8.5.19",
+    "@luma.gl/webgl": "8.5.19",
+    "@deck.gl/core": "8.9.12",
+    "@deck.gl/extensions": "8.9.12",
     "react-vis": "1.11.7"
   }
 }

jest.config.js

@@ -1,11 +1,40 @@
+// Copyright (c) 2023 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
 /** @type {import('jest').Config} */
 const config = {
   collectCoverageFrom: ['<rootDir>/src/**/*.{js|ts|tsx}', '!<rootDir>/src/**/*.spec.js'],
   coverageDirectory: './jest-coverage',
   testEnvironment: 'jsdom',
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
   verbose: true,
-  testMatch: ['<rootDir>/src/**/*.spec.js', '<rootDir>/test/**/*.spec.js']
+  testMatch: ['<rootDir>/src/**/*.spec.js', '<rootDir>/test/**/*.spec.js'],
+  // Per https://jestjs.io/docs/configuration#transformignorepatterns-arraystring, transformIgnorePatterns ignores
+  // node_modules and pnp folders by default so that they are not transpiled
+  // Some libraries (even if transitive) are transitioning to ESM and need additional transpilation. Relevant issues:
+  // - tiny-sdf: https://github.com/visgl/deck.gl/issues/7735
+  // TODO For some reason transformIgnorePatterns are ignored in combination with TS, using moduleNameMapper instead.
+  // transformIgnorePatterns: ["/node_modules/(?!(@mapbox/tiny-sdf)/)", "\\.pnp\\.[^\\\/]+$"]
+  moduleNameMapper: {
+    '@mapbox/tiny-sdf': `<rootDir>/node_modules/@mapbox/tiny-sdf/index.cjs`
+  }
 };
 
 module.exports = config;

package.json

@@ -41,14 +41,13 @@
     "install:example": "cd examples/demo-app && yarn",
     "install:web": "yarn install:example && cd website && yarn",
     "install-and-start": "node ./scripts/install-and-start",
-    "babel-tape-runner": "node ./scripts/babel-tape-runner",
     "test-fast": "yarn test-node-debug && yarn test-browser-debug",
     "test-node": "yarn test-node-debug | tap-spec",
     "test-browser": "yarn test-browser-debug | tap-spec",
     "test-headless": "NODE_ENV=test node ./test/browser-drive.js",
     "test-browser-drive": "NODE_ENV=test node ./test/browser-drive.js debug",
-    "test-node-debug": "NODE_ENV=test yarn babel-tape-runner ./test/node.js",
-    "test-browser-debug": "NODE_ENV=test yarn babel-tape-runner -r ./test/setup-browser-env.js ./test/js-dom.js",
+    "test-node-debug": "NODE_ENV=test node -r ./babel-register.js ./test/node.js",
+    "test-browser-debug": "NODE_ENV=test node -r ./babel-register.js ./test/setup-browser-env.js ./test/js-dom.js",
     "test-jest": "jest --watch",
     "test-tape": "yarn test-node && yarn test-browser",
     "test": "yarn test-jest && yarn test-tape",
@@ -76,7 +75,7 @@
     "analyze:bundle": "webpack --config ./webpack/bundle.js --progress --env.prod",
     "check-licence": "uber-licence --dry",
     "add-licence": "uber-licence",
-    "prepublish": "yarn workspaces run stab && yarn workspaces run prepublish && uber-licence && yarn build:umd && yarn build:types",
+    "prepublish": "yarn fix-dependencies && yarn workspaces run stab && yarn workspaces run prepublish && uber-licence &&  yarn build:umd && yarn build:types",
     "docs": "babel-node ./scripts/documentation.js",
     "typedoc": "typedoc --theme markdown --out typedoc --inputFiles ./src/reducers --inputFiles ./src/actions --excludeExternals --excludeNotExported --excludePrivate",
     "example-version": "babel-node ./scripts/edit-version.js",
@@ -87,7 +86,8 @@
     "web": "(yarn && yarn install:web && yarn start:web)",
     "deploy": "yarn install:web && (cd website && yarn build)",
     "clean": "rm -rf node_modules examples/**/node_modules website/node_modules",
-    "release:patch": "git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version patch && git push origin && git push origin --tags"
+    "release:patch": "git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version patch && git push origin && git push origin --tags",
+    "fix-dependencies": "./scripts/fix-dependencies.sh"
   },
   "files": [
     "dist",
@@ -106,7 +106,7 @@
     "umd"
   ],
   "dependencies": {
-    "@deck.gl/mapbox": "8.8.27",
+    "@deck.gl/mapbox": "^8.9.12",
     "@hubble.gl/core": "1.2.0-alpha.6",
     "@hubble.gl/react": "1.2.0-alpha.6",
     "@kepler.gl/components": "3.0.0-alpha.0",
@@ -139,9 +139,9 @@
     "@babel/runtime": "^7.12.1",
     "@babel/traverse": "^7.12.1",
     "@cfaester/enzyme-adapter-react-18": "^0.7.0",
-    "@deck.gl/test-utils": "8.8.27",
+    "@deck.gl/test-utils": "^8.9.12",
     "@loaders.gl/polyfills": "^3.4.14",
-    "@luma.gl/test-utils": "8.5.18",
+    "@luma.gl/test-utils": "^8.5.19",
     "@nebula.gl/layers": "1.0.2-alpha.1",
     "@probe.gl/env": "^3.5.0",
     "@probe.gl/test-utils": "^3.5.0",
@@ -220,21 +220,12 @@
     "@loaders.gl/json": "^3.4.14",
     "@loaders.gl/loader-utils": "^3.4.14",
     "@loaders.gl/polyfills": "^3.4.14",
-    "@deck.gl/core": "8.8.27",
-    "@deck.gl/extensions": "8.8.27",
-    "@deck.gl/geo-layers": "8.8.27",
-    "@deck.gl/layers": "8.8.27",
-    "@deck.gl/mapbox": "8.8.27",
-    "@deck.gl/mesh-layers": "8.8.27",
-    "@deck.gl/aggregation-layers": "8.8.27",
-    "@deck.gl/react": "8.8.27",
-    "@deck.gl/test-utils": "8.8.27",
-    "@luma.gl/constants": "8.5.18",
-    "@luma.gl/core": "8.5.18",
-    "@luma.gl/experimental": "8.5.18",
-    "@luma.gl/shadertools": "8.5.18",
-    "@luma.gl/test-utils": "8.5.18",
-    "@luma.gl/webgl": "8.5.18",
+    "@luma.gl/constants": "8.5.19",
+    "@luma.gl/core": "8.5.19",
+    "@luma.gl/experimental": "8.5.19",
+    "@luma.gl/shadertools": "8.5.19",
+    "@luma.gl/test-utils": "8.5.19",
+    "@luma.gl/webgl": "8.5.19",
     "browserslist": "^4.17.0",
     "caniuse-lite": "^1.0.30001449",
     "d3-array": "^2.8.0",

scripts/fix-dependencies.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+
+# Here we patch up the dependencies that need to be tweaked to work with our build system after installed
+
+# Per https://github.com/visgl/deck.gl/issues/7735, @mapbox/tiny-sdf is a ESM that we need to transpile
+# and consume the cjs version. For some reason, trying to force transpile it through Babel does not work
+# as crash happens before it even gets to that point
+# We use tail to avoid the first line of the the output which is the command itself
+yarn babel node_modules/@mapbox/tiny-sdf/index.js | tail -n +2 > node_modules/@mapbox/tiny-sdf/index.cjs

src/actions/package.json

@@ -30,7 +30,7 @@
     "umd"
   ],
   "dependencies": {
-    "@deck.gl/core": "8.8.27",
+    "@deck.gl/core": "^8.9.12",
     "@kepler.gl/cloud-providers": "3.0.0-alpha.0",
     "@kepler.gl/constants": "3.0.0-alpha.0",
     "@kepler.gl/layers": "3.0.0-alpha.0",

src/components/package.json

@@ -30,8 +30,8 @@
     "umd"
   ],
   "dependencies": {
-    "@deck.gl/core": "8.8.27",
-    "@deck.gl/react": "8.8.27",
+    "@deck.gl/core": "^8.9.12",
+    "@deck.gl/react": "^8.9.12",
     "@dnd-kit/core": "^6.0.5",
     "@dnd-kit/modifiers": "^6.0.0",
     "@dnd-kit/sortable": "^7.0.1",

src/deckgl-layers/package.json

@@ -31,15 +31,15 @@
   ],
   "dependencies": {
     "@danmarshall/deckgl-typings": "4.9.22",
-    "@deck.gl/aggregation-layers": "8.8.27",
-    "@deck.gl/core": "8.8.27",
-    "@deck.gl/geo-layers": "8.8.27",
-    "@deck.gl/layers": "8.8.27",
+    "@deck.gl/aggregation-layers": "^8.9.12",
+    "@deck.gl/core": "^8.9.12",
+    "@deck.gl/geo-layers": "^8.9.12",
+    "@deck.gl/layers": "^8.9.12",
     "@kepler.gl/constants": "3.0.0-alpha.0",
     "@kepler.gl/types": "3.0.0-alpha.0",
     "@kepler.gl/utils": "3.0.0-alpha.0",
-    "@luma.gl/constants": "8.5.18",
-    "@luma.gl/core": "8.5.18",
+    "@luma.gl/constants": "^8.5.19",
+    "@luma.gl/core": "^8.5.19",
     "@mapbox/geo-viewport": "^0.4.1",
     "@mapbox/vector-tile": "^1.3.1",
     "@types/d3-array": "^2.0.0",

src/layers/package.json

@@ -31,11 +31,11 @@
   ],
   "dependencies": {
     "@danmarshall/deckgl-typings": "4.9.22",
-    "@deck.gl/core": "8.8.27",
-    "@deck.gl/extensions": "8.8.27",
-    "@deck.gl/geo-layers": "8.8.27",
-    "@deck.gl/layers": "8.8.27",
-    "@deck.gl/mesh-layers": "8.8.27",
+    "@deck.gl/core": "^8.9.12",
+    "@deck.gl/extensions": "^8.9.12",
+    "@deck.gl/geo-layers": "^8.9.12",
+    "@deck.gl/layers": "^8.9.12",
+    "@deck.gl/mesh-layers": "^8.9.12",
     "@kepler.gl/constants": "3.0.0-alpha.0",
     "@kepler.gl/deckgl-layers": "3.0.0-alpha.0",
     "@kepler.gl/localization": "3.0.0-alpha.0",
@@ -46,7 +46,7 @@
     "@loaders.gl/gis": "^3.4.14",
     "@loaders.gl/gltf": "^3.4.14",
     "@loaders.gl/wkt": "^3.4.14",
-    "@luma.gl/constants": "8.5.18",
+    "@luma.gl/constants": "^8.5.19",
     "@mapbox/geojson-normalize": "0.0.1",
     "@nebula.gl/layers": "1.0.2-alpha.1",
     "@nebula.gl/edit-modes": "1.0.2-alpha.1",

src/layers/src/editor-layer/editor-layer.ts

@@ -71,7 +71,7 @@ export function getEditorLayer({
   featureCollection,
   selectedFeatureIndexes,
   viewport
-}: GetEditorLayerProps): DeckLayer<DeckLayerProps<any>> {
+}: GetEditorLayerProps): DeckLayer<DeckLayerProps> {
   const {mode: editorMode} = editor;
 
   let mode = DEFAULT_COMPOSITE_MODE;

src/reducers/src/layer-utils.ts

@@ -286,7 +286,7 @@ export function prepareLayersToRender(
   );
 }
 
-type CustomDeckLayer = DeckLayer<DeckLayerProps<any>>;
+type CustomDeckLayer = DeckLayer<DeckLayerProps>;
 
 export function getCustomDeckLayers(deckGlProps?: any): [CustomDeckLayer[], CustomDeckLayer[]] {
   const bottomDeckLayers = Array.isArray(deckGlProps?.layers)

src/utils/package.json

@@ -32,8 +32,8 @@
   "dependencies": {
     "@kepler.gl/constants": "3.0.0-alpha.0",
     "@kepler.gl/types": "3.0.0-alpha.0",
-    "@luma.gl/constants": "8.5.18",
-    "@luma.gl/core": "8.5.18",
+    "@luma.gl/constants": "^8.5.19",
+    "@luma.gl/core": "^8.5.19",
     "@mapbox/geo-viewport": "^0.4.1",
     "@turf/boolean-within": "^6.0.1",
     "@turf/helpers": "^6.1.4",

test/helpers/component-jest-utils.js

@@ -23,10 +23,10 @@ import {Provider} from 'react-redux';
 import configureStore from 'redux-mock-store';
 import {ThemeProvider} from 'styled-components';
 import {IntlProvider} from 'react-intl';
-import {messages} from 'localization';
 
 import {render} from '@testing-library/react';
 import {theme} from '@kepler.gl/styles';
+import {messages} from '@kepler.gl/localization';
 import {keplerGlReducerCore as coreReducer} from '@kepler.gl/reducers';
 import {keplerGlInit} from '@kepler.gl/actions';