Upgrade to deck 8.9, kepler v3.1 alpha, react-map-gl 7, and react 18 (#…

…286) * Upgrade to kepler v3.1 alpha and react 18 * fix localization * remove unused deps * react-map-gl 7.1.8 * kepler.gl 3.1.0 * remove glContext
visgl · Jan 31, 2025 · c2e8194 · c2e8194
1 parent 696bfae
commit c2e8194
Show file tree

Hide file tree

Showing 30 changed files with 738 additions and 560 deletions.
diff --git a/examples/kepler/index.html b/examples/kepler/index.html
@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <title>Hubble.gl in Kepler.gl</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="https://api.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.css" rel="stylesheet" />
   <style>
     body {margin: 0; font-family: sans-serif; overflow: hidden;}
     #app {width: 100vw; height: 100vh; display: flex; flex-direction: row; align-items: stretch;}
@@ -12,8 +13,8 @@
 <body>
   <div id="app"></div>
 </body>
-<script type="text/javascript" src="app.js"></script>
-<script type="text/javascript">
-  Root.renderToDOM(document.getElementById('app'));
+<script type="module">
+  import {renderToDOM} from './src/main.jsx';
+  renderToDOM(document.getElementById('app'));
 </script>
 </html>
diff --git a/examples/kepler/package.json b/examples/kepler/package.json
@@ -1,46 +1,36 @@
 {
   "scripts": {
-    "start": "webpack-dev-server --progress --hot --open",
-    "start-local": "webpack-dev-server --env.local --progress --hot --open",
-    "start-local-luma": "webpack-dev-server --env.local --env.local-luma --progress --hot --open",
-    "clean": "rm -rf yarn.lock ./node_modules",
-    "bootstrap": "yarn clean && yarn",
-    "build": "rm -rf dist && mkdir dist && cp index.html dist/ && webpack --env.production=true"
+    "start": "vite --open",
+    "start-local": "vite --config ../vite.config.local.mjs",
+    "build": "vite build"
   },
   "dependencies": {
-    "deck.gl": "8.2.0",
+    "deck.gl": "8.9.27",
     "d3-request": "^1.0.6",
     "global": "^4.3.0",
-    "hubble.gl": "^1.3.0",
-    "kepler.gl": "^2.5.5",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
-    "react-map-gl": "^5.2.10",
-    "react-markdown": "^4.2.2",
-    "react-palm": "^3.3.6",
-    "redux-actions": "^2.2.1",
+    "hubble.gl": "^1.4.0-alpha.0",
+    "kepler.gl": "3.1.0",
+    "mapbox-gl": "1.13.1",
+    "maplibre-gl": "^3.6.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-map-gl": "^7.1.8",
+    "react-markdown": "^6.0.3",
     "redux-thunk": "^1.0.0",
-    "react-intl": "^3.12.0"
+    "react-intl": "^6.8.9",
+    "styled-components": "6.1.8"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.1",
-    "@babel/preset-env": "^7.12.1",
-    "@babel/preset-react": "^7.12.1",
-    "babel-loader": "^8.0.0",
-    "webpack": "^4.29.0",
-    "webpack-cli": "^3.2.1",
-    "webpack-dev-middleware": "^3.5.1",
-    "webpack-dev-server": "^3.1.14",
-    "webpack-hot-middleware": "^2.24.3"
+    "vite": "^4.0.0"
   },
   "resolutions_comments": [
-    "deck.gl: pinned to 8.2.0 for compatibility with kepler.gl"
+    "deck.gl: pinned to 8.9.27 for compatibility with kepler.gl"
   ],
   "resolutions": {
-    "deck.gl": "8.2.0",
-    "@luma.gl/constants": "8.2.0",
-    "@luma.gl/core": "8.2.0",
-    "@luma.gl/shadertools": "8.2.0",
-    "@luma.gl/experimental": "8.2.0"
+    "deck.gl": "8.9.27",
+    "@luma.gl/constants": "8.5.21",
+    "@luma.gl/core": "8.5.21",
+    "@luma.gl/shadertools": "8.5.21",
+    "@luma.gl/experimental": "8.5.21"
   }
 }
diff --git a/examples/kepler/src/actions.js b/examples/kepler/src/actions.js
@@ -19,7 +19,7 @@
 // THE SOFTWARE.
 
 import {text as requestText, json as requestJson} from 'd3-request';
-import {toggleModal} from 'kepler.gl/actions';
+import {toggleModal} from '@kepler.gl/actions';
 
 import {
   LOADING_SAMPLE_ERROR_MESSAGE,

diff --git a/examples/kepler/src/app.js → examples/kepler/src/app.jsx b/examples/kepler/src/app.js → examples/kepler/src/app.jsx
@@ -20,30 +20,41 @@
 
 import React, {Component} from 'react';
 import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
-import styled, {createGlobalStyle, ThemeProvider} from 'styled-components';
+import styled, {createGlobalStyle, ThemeProvider, StyleSheetManager} from 'styled-components';
 import window from 'global/window';
 import {connect} from 'react-redux';
 import {IntlProvider} from 'react-intl';
-import {messages} from 'kepler.gl/localization';
-import {theme} from 'kepler.gl/styles';
+import {messages} from '@kepler.gl/localization';
+import {theme} from '@kepler.gl/styles';
 import {replaceLoadDataModal} from './factories/load-data-modal';
 import {replaceMapControl} from './factories/map-control';
 import {replacePanelHeader} from './factories/panel-header';
 import {replaceSaveExportDropdown} from './factories/export-modal';
 import {AUTH_TOKENS} from './constants/default-settings';
 import {loadSampleConfigurations} from './actions';
-
+import isPropValid from '@emotion/is-prop-valid';
 import ExportVideo from './components/export-video';
+import {injectComponents} from '@kepler.gl/components';
 
 // Sample data
 /* eslint-disable no-unused-vars */
 import sampleTripData, {testCsvData, sampleTripDataConfig} from './data/sample-trip-data';
 import sampleAnimateTrip from './data/sample-animate-trip-data';
-import {addDataToMap} from 'kepler.gl/actions';
-import {processCsvData, processGeojson} from 'kepler.gl/processors';
+import {addDataToMap} from '@kepler.gl/actions';
+import {processCsvData, processGeojson} from '@kepler.gl/processors';
 /* eslint-enable no-unused-vars */
 
-const KeplerGl = require('kepler.gl/components').injectComponents([
+// This implements the default behavior from styled-components v5
+function shouldForwardProp(propName, target) {
+  if (typeof target === 'string') {
+    // For HTML elements, forward the prop if it is a valid HTML attribute
+    return isPropValid(propName);
+  }
+  // For other elements, forward all props
+  return true;
+}
+
+const KeplerGl = injectComponents([
   replaceLoadDataModal(),
   replaceMapControl(),
   replacePanelHeader(),
@@ -185,30 +196,32 @@ class App extends Component {
 
   render() {
     return (
-      <IntlProvider locale="en" messages={messages.en}>
-        <ThemeProvider theme={theme}>
-          <GlobalStyle />
-          <WindowSize>
-            <ExportVideo />
-            <div style={{transition: 'margin 1s, height 1s', flex: 1}}>
-              <AutoSizer>
-                {({height, width}) => (
-                  <KeplerGl
-                    mapboxApiAccessToken={AUTH_TOKENS.MAPBOX_TOKEN}
-                    id="map"
-                    /*
-                     * Specify path to keplerGl state, because it is not mount at the root
-                     */
-                    getState={keplerGlGetState}
-                    width={width}
-                    height={height}
-                  />
-                )}
-              </AutoSizer>
-            </div>
-          </WindowSize>
-        </ThemeProvider>
-      </IntlProvider>
+      <StyleSheetManager shouldForwardProp={shouldForwardProp}>
+        <IntlProvider locale="en" messages={messages.en}>
+          <ThemeProvider theme={theme}>
+            <GlobalStyle />
+            <WindowSize>
+              <ExportVideo />
+              <div style={{transition: 'margin 1s, height 1s', flex: 1}}>
+                <AutoSizer>
+                  {({height, width}) => (
+                    <KeplerGl
+                      mapboxApiAccessToken={AUTH_TOKENS.MAPBOX_TOKEN}
+                      id="map"
+                      /*
+                      * Specify path to keplerGl state, because it is not mount at the root
+                      */
+                      getState={keplerGlGetState}
+                      width={width}
+                      height={height}
+                    />
+                  )}
+                </AutoSizer>
+              </div>
+            </WindowSize>
+          </ThemeProvider>
+        </IntlProvider>
+      </StyleSheetManager>
     );
   }
 }

diff --git a/...les/kepler/src/components/export-video.js → ...es/kepler/src/components/export-video.jsx b/...les/kepler/src/components/export-video.js → ...es/kepler/src/components/export-video.jsx
@@ -25,7 +25,8 @@ import styled, {withTheme} from 'styled-components';
 import {InjectKeplerUI, ExportVideoModal, ExportVideoPanelContainer} from '@hubble.gl/react';
 // Redux stores/actions
 import {toggleHubbleExportModal} from '../actions';
-import {setFilter, setLayerAnimationTime} from 'kepler.gl/actions';
+import {setFilter, setLayerAnimationTime} from '@kepler.gl/actions';
+import mapboxgl from 'mapbox-gl';
 
 // Hook up mutual kepler imports
 import {
@@ -37,7 +38,7 @@ import {
   LoadingSpinner,
   ModalTabsFactory,
   Play
-} from 'kepler.gl/components';
+} from '@kepler.gl/components';
 
 const IconButton = styled(Button)`
   padding: 0;
@@ -95,6 +96,9 @@ class ExportVideo extends Component {
               onTripFrameUpdate={onTripFrameUpdate}
               exportVideoWidth={720}
               defaultFileName={'hubble.gl'}
+              mapProps={{
+                mapLib: mapboxgl
+              }}
             />
           </ExportVideoModal>
         </div>

diff --git a/examples/kepler/src/components/load-data-modal/sample-data-viewer.js b/examples/kepler/src/components/load-data-modal/sample-data-viewer.js