Skip to content

Commit c2e8194

Browse files
chrisgervangchrisgervang
authored
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
1 parent 696bfae commit c2e8194

30 files changed

+738
-560
lines changed

‎examples/kepler/index.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="utf-8">
55
<title>Hubble.gl in Kepler.gl</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link href="https://api.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.css" rel="stylesheet" />
78
<style>
89
body {margin: 0; font-family: sans-serif; overflow: hidden;}
910
#app {width: 100vw; height: 100vh; display: flex; flex-direction: row; align-items: stretch;}
@@ -12,8 +13,8 @@
1213
<body>
1314
<div id="app"></div>
1415
</body>
15-
<script type="text/javascript" src="app.js"></script>
16-
<script type="text/javascript">
17-
Root.renderToDOM(document.getElementById('app'));
16+
<script type="module">
17+
import {renderToDOM} from './src/main.jsx';
18+
renderToDOM(document.getElementById('app'));
1819
</script>
1920
</html>

‎examples/kepler/package.json‎

Lines changed: 21 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,36 @@
11
{
22
"scripts": {
3-
"start": "webpack-dev-server --progress --hot --open",
4-
"start-local": "webpack-dev-server --env.local --progress --hot --open",
5-
"start-local-luma": "webpack-dev-server --env.local --env.local-luma --progress --hot --open",
6-
"clean": "rm -rf yarn.lock ./node_modules",
7-
"bootstrap": "yarn clean && yarn",
8-
"build": "rm -rf dist && mkdir dist && cp index.html dist/ && webpack --env.production=true"
3+
"start": "vite --open",
4+
"start-local": "vite --config ../vite.config.local.mjs",
5+
"build": "vite build"
96
},
107
"dependencies": {
11-
"deck.gl": "8.2.0",
8+
"deck.gl": "8.9.27",
129
"d3-request": "^1.0.6",
1310
"global": "^4.3.0",
14-
"hubble.gl": "^1.3.0",
15-
"kepler.gl": "^2.5.5",
16-
"react": "^16.8.0",
17-
"react-dom": "^16.8.0",
18-
"react-map-gl": "^5.2.10",
19-
"react-markdown": "^4.2.2",
20-
"react-palm": "^3.3.6",
21-
"redux-actions": "^2.2.1",
11+
"hubble.gl": "^1.4.0-alpha.0",
12+
"kepler.gl": "3.1.0",
13+
"mapbox-gl": "1.13.1",
14+
"maplibre-gl": "^3.6.2",
15+
"react": "^18.2.0",
16+
"react-dom": "^18.2.0",
17+
"react-map-gl": "^7.1.8",
18+
"react-markdown": "^6.0.3",
2219
"redux-thunk": "^1.0.0",
23-
"react-intl": "^3.12.0"
20+
"react-intl": "^6.8.9",
21+
"styled-components": "6.1.8"
2422
},
2523
"devDependencies": {
26-
"@babel/core": "^7.12.1",
27-
"@babel/preset-env": "^7.12.1",
28-
"@babel/preset-react": "^7.12.1",
29-
"babel-loader": "^8.0.0",
30-
"webpack": "^4.29.0",
31-
"webpack-cli": "^3.2.1",
32-
"webpack-dev-middleware": "^3.5.1",
33-
"webpack-dev-server": "^3.1.14",
34-
"webpack-hot-middleware": "^2.24.3"
24+
"vite": "^4.0.0"
3525
},
3626
"resolutions_comments": [
37-
"deck.gl: pinned to 8.2.0 for compatibility with kepler.gl"
27+
"deck.gl: pinned to 8.9.27 for compatibility with kepler.gl"
3828
],
3929
"resolutions": {
40-
"deck.gl": "8.2.0",
41-
"@luma.gl/constants": "8.2.0",
42-
"@luma.gl/core": "8.2.0",
43-
"@luma.gl/shadertools": "8.2.0",
44-
"@luma.gl/experimental": "8.2.0"
30+
"deck.gl": "8.9.27",
31+
"@luma.gl/constants": "8.5.21",
32+
"@luma.gl/core": "8.5.21",
33+
"@luma.gl/shadertools": "8.5.21",
34+
"@luma.gl/experimental": "8.5.21"
4535
}
4636
}

‎examples/kepler/src/actions.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
// THE SOFTWARE.
2020

2121
import {text as requestText, json as requestJson} from 'd3-request';
22-
import {toggleModal} from 'kepler.gl/actions';
22+
import {toggleModal} from '@kepler.gl/actions';
2323

2424
import {
2525
LOADING_SAMPLE_ERROR_MESSAGE,

examples/kepler/src/app.js renamed to examples/kepler/src/app.jsx

Lines changed: 44 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -20,30 +20,41 @@
2020

2121
import React, {Component} from 'react';
2222
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
23-
import styled, {createGlobalStyle, ThemeProvider} from 'styled-components';
23+
import styled, {createGlobalStyle, ThemeProvider, StyleSheetManager} from 'styled-components';
2424
import window from 'global/window';
2525
import {connect} from 'react-redux';
2626
import {IntlProvider} from 'react-intl';
27-
import {messages} from 'kepler.gl/localization';
28-
import {theme} from 'kepler.gl/styles';
27+
import {messages} from '@kepler.gl/localization';
28+
import {theme} from '@kepler.gl/styles';
2929
import {replaceLoadDataModal} from './factories/load-data-modal';
3030
import {replaceMapControl} from './factories/map-control';
3131
import {replacePanelHeader} from './factories/panel-header';
3232
import {replaceSaveExportDropdown} from './factories/export-modal';
3333
import {AUTH_TOKENS} from './constants/default-settings';
3434
import {loadSampleConfigurations} from './actions';
35-
35+
import isPropValid from '@emotion/is-prop-valid';
3636
import ExportVideo from './components/export-video';
37+
import {injectComponents} from '@kepler.gl/components';
3738

3839
// Sample data
3940
/* eslint-disable no-unused-vars */
4041
import sampleTripData, {testCsvData, sampleTripDataConfig} from './data/sample-trip-data';
4142
import sampleAnimateTrip from './data/sample-animate-trip-data';
42-
import {addDataToMap} from 'kepler.gl/actions';
43-
import {processCsvData, processGeojson} from 'kepler.gl/processors';
43+
import {addDataToMap} from '@kepler.gl/actions';
44+
import {processCsvData, processGeojson} from '@kepler.gl/processors';
4445
/* eslint-enable no-unused-vars */
4546

46-
const KeplerGl = require('kepler.gl/components').injectComponents([
47+
// This implements the default behavior from styled-components v5
48+
function shouldForwardProp(propName, target) {
49+
if (typeof target === 'string') {
50+
// For HTML elements, forward the prop if it is a valid HTML attribute
51+
return isPropValid(propName);
52+
}
53+
// For other elements, forward all props
54+
return true;
55+
}
56+
57+
const KeplerGl = injectComponents([
4758
replaceLoadDataModal(),
4859
replaceMapControl(),
4960
replacePanelHeader(),
@@ -185,30 +196,32 @@ class App extends Component {
185196

186197
render() {
187198
return (
188-
<IntlProvider locale="en" messages={messages.en}>
189-
<ThemeProvider theme={theme}>
190-
<GlobalStyle />
191-
<WindowSize>
192-
<ExportVideo />
193-
<div style={{transition: 'margin 1s, height 1s', flex: 1}}>
194-
<AutoSizer>
195-
{({height, width}) => (
196-
<KeplerGl
197-
mapboxApiAccessToken={AUTH_TOKENS.MAPBOX_TOKEN}
198-
id="map"
199-
/*
200-
* Specify path to keplerGl state, because it is not mount at the root
201-
*/
202-
getState={keplerGlGetState}
203-
width={width}
204-
height={height}
205-
/>
206-
)}
207-
</AutoSizer>
208-
</div>
209-
</WindowSize>
210-
</ThemeProvider>
211-
</IntlProvider>
199+
<StyleSheetManager shouldForwardProp={shouldForwardProp}>
200+
<IntlProvider locale="en" messages={messages.en}>
201+
<ThemeProvider theme={theme}>
202+
<GlobalStyle />
203+
<WindowSize>
204+
<ExportVideo />
205+
<div style={{transition: 'margin 1s, height 1s', flex: 1}}>
206+
<AutoSizer>
207+
{({height, width}) => (
208+
<KeplerGl
209+
mapboxApiAccessToken={AUTH_TOKENS.MAPBOX_TOKEN}
210+
id="map"
211+
/*
212+
* Specify path to keplerGl state, because it is not mount at the root
213+
*/
214+
getState={keplerGlGetState}
215+
width={width}
216+
height={height}
217+
/>
218+
)}
219+
</AutoSizer>
220+
</div>
221+
</WindowSize>
222+
</ThemeProvider>
223+
</IntlProvider>
224+
</StyleSheetManager>
212225
);
213226
}
214227
}

examples/kepler/src/components/export-video.js renamed to examples/kepler/src/components/export-video.jsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@ import styled, {withTheme} from 'styled-components';
2525
import {InjectKeplerUI, ExportVideoModal, ExportVideoPanelContainer} from '@hubble.gl/react';
2626
// Redux stores/actions
2727
import {toggleHubbleExportModal} from '../actions';
28-
import {setFilter, setLayerAnimationTime} from 'kepler.gl/actions';
28+
import {setFilter, setLayerAnimationTime} from '@kepler.gl/actions';
29+
import mapboxgl from 'mapbox-gl';
2930

3031
// Hook up mutual kepler imports
3132
import {
@@ -37,7 +38,7 @@ import {
3738
LoadingSpinner,
3839
ModalTabsFactory,
3940
Play
40-
} from 'kepler.gl/components';
41+
} from '@kepler.gl/components';
4142

4243
const IconButton = styled(Button)`
4344
padding: 0;
@@ -95,6 +96,9 @@ class ExportVideo extends Component {
9596
onTripFrameUpdate={onTripFrameUpdate}
9697
exportVideoWidth={720}
9798
defaultFileName={'hubble.gl'}
99+
mapProps={{
100+
mapLib: mapboxgl
101+
}}
98102
/>
99103
</ExportVideoModal>
100104
</div>

‎examples/kepler/src/components/load-data-modal/sample-data-viewer.js‎

Lines changed: 0 additions & 154 deletions
This file was deleted.

0 commit comments

Comments
 (0)