upgrade demo-app example

Signed-off-by: Ihor Dykhta <ihordykhta@Ihors-MacBook-Pro.local>

Author: Ihor Dykhta

examples/demo-app/esbuild.config.mjs

@@ -9,8 +9,12 @@ import process from 'node:process';
 import fs from 'node:fs';
 import {spawn} from 'node:child_process';
 import {join} from 'node:path';
+import {dirname} from 'node:path';
+import {fileURLToPath} from 'node:url';
 import KeplerPackage from '../../package.json' assert {type: 'json'};
 
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
 const args = process.argv;
 
 const BASE_NODE_MODULES_DIR = './node_modules';
@@ -125,10 +129,48 @@ const config = {
     replace({
       __PACKAGE_VERSION__: KeplerPackage.version,
       include: /constants\/src\/default-settings\.ts/
-    })
+    }),
+    // styled-components: @hubble.gl/react nests its own copy.
+    // react-palm: several @kepler.gl/* packages nest their own copy.
+    // Both are singletons that break when loaded more than once.
+    {
+      name: 'dedupe-singletons',
+      setup(build) {
+        build.onResolve({filter: /^(styled-components|react-palm(\/|$)|react$|react-dom$)/}, async args => {
+          if (args.pluginData?.deduped) return;
+          const result = await build.resolve(args.path, {
+            resolveDir: __dirname,
+            kind: args.kind,
+            pluginData: {deduped: true}
+          });
+          return result;
+        });
+      }
+    }
   ]
 };
 
+// Force @luma.gl/* and @deck.gl/* to the root monorepo node_modules.
+// The demo-app may install newer patch versions, but kepler.gl was built
+// and tested against the root versions (luma.gl 9.3.2 / deck.gl 9.3.1).
+// NOT added to config.plugins directly — it is injected conditionally so
+// that --env.deck / --env.deck_src modes (which alias deck.gl to a local
+// source tree) are not overridden.
+const dedupeWebglPlugin = {
+  name: 'dedupe-webgl',
+  setup(build) {
+    build.onResolve({filter: /^(@luma\.gl\/|@deck\.gl\/)/}, async args => {
+      if (args.pluginData?.deduped) return;
+      const result = await build.resolve(args.path, {
+        resolveDir: NODE_MODULES_DIR,
+        kind: args.kind,
+        pluginData: {deduped: true}
+      });
+      return result;
+    });
+  }
+};
+
 function addAliases(externals, args) {
   const resolveAlias = getThirdPartyLibraryAliases(true);
 
@@ -280,6 +322,7 @@ function openURL(url) {
         // Optionally generate a bundle analysis
         plugins: [
           ...config.plugins,
+          dedupeWebglPlugin,
           {
             name: 'bundle-analyzer',
             setup(build) {
@@ -308,10 +351,17 @@ function openURL(url) {
       ? localAliases
       : getThirdPartyLibraryAliases(false);
     const nodeModulesDir = isLocal ? NODE_MODULES_DIR : BASE_NODE_MODULES_DIR;
+    // Skip dedupe-webgl when a local deck.gl source override is active so that
+    // --env.deck / --env.deck_src aliases are not overridden by the plugin.
+    const useDeckOverride = args.includes('--env.deck') || args.includes('--env.deck_src');
 
     await esbuild
       .context({
         ...config,
+        plugins: [
+          ...config.plugins,
+          ...(useDeckOverride ? [] : [dedupeWebglPlugin])
+        ],
         minify: false,
         sourcemap: true,
         alias: {

examples/demo-app/package.json

@@ -14,17 +14,17 @@
     "@auth0/auth0-spa-js": "^2.1.2",
     "@carto/toolkit": "0.0.1-rc.18",
     "@emotion/is-prop-valid": "^1.2.1",
-    "@kepler.gl/actions": "^3.2.0",
-    "@kepler.gl/ai-assistant": "^3.2.0",
-    "@kepler.gl/cloud-providers": "^3.2.0",
-    "@kepler.gl/components": "^3.2.0",
-    "@kepler.gl/constants": "^3.2.0",
-    "@kepler.gl/duckdb": "^3.2.0",
-    "@kepler.gl/processors": "^3.2.0",
-    "@kepler.gl/reducers": "^3.2.0",
-    "@kepler.gl/schemas": "^3.2.0",
-    "@kepler.gl/styles": "^3.2.0",
-    "@kepler.gl/utils": "^3.2.0",
+    "@kepler.gl/actions": "^3.3.0-alpha.6",
+    "@kepler.gl/ai-assistant": "^3.3.0-alpha.6",
+    "@kepler.gl/cloud-providers": "^3.3.0-alpha.6",
+    "@kepler.gl/components": "^3.3.0-alpha.6",
+    "@kepler.gl/constants": "^3.3.0-alpha.6",
+    "@kepler.gl/duckdb": "^3.3.0-alpha.6",
+    "@kepler.gl/processors": "^3.3.0-alpha.6",
+    "@kepler.gl/reducers": "^3.3.0-alpha.6",
+    "@kepler.gl/schemas": "^3.3.0-alpha.6",
+    "@kepler.gl/styles": "^3.3.0-alpha.6",
+    "@kepler.gl/utils": "^3.3.0-alpha.6",
     "@loaders.gl/arrow": "^4.3.2",
     "@loaders.gl/core": "^4.3.2",
     "@loaders.gl/csv": "^4.3.2",
@@ -39,7 +39,6 @@
     "d3-format": "^2.0.0",
     "dropbox": "^4.0.12",
     "esbuild": "^0.28.1",
-    "global": "^4.3.0",
     "keymirror": "^0.1.1",
     "markdown-to-jsx": "^7.7.6",
     "prop-types": "^15.6.0",
@@ -49,19 +48,10 @@
     "react-redux": "^9.1.0",
     "react-resizable-panels": "^2.1.7",
     "react-router-dom": "^6.28.0",
-    "react-virtualized": "^9.21.0",
     "redux": "^5.0.0",
-    "redux-actions": "^2.2.1",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^1.0.0",
-    "styled-components": "6.4.3",
-    "usehooks-ts": "^3.1.0"
-  },
-  "resolutions": {
-    "@luma.gl/core": "8.5.21",
-    "@luma.gl/webgl": "8.5.21",
-    "@deck.gl/core": "8.9.27",
-    "@deck.gl/extensions": "8.9.27"
+    "styled-components": "6.4.3"
   },
   "engines": {
     "node": ">=20"

examples/demo-app/src/actions.js

@@ -1,8 +1,6 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
-import {fetch} from 'global';
-
 import {loadFiles, toggleModal} from '@kepler.gl/actions';
 import {parseUri} from '@kepler.gl/common-utils';
 import {load} from '@loaders.gl/core';

examples/demo-app/src/app.tsx

@@ -2,10 +2,8 @@
 // Copyright contributors to the kepler.gl project
 
 import React, {useCallback, useEffect, useRef, useState} from 'react';
-import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
 import styled, {ThemeProvider, StyleSheetManager} from 'styled-components';
-import Window from 'global/window';
-import {connect, useDispatch} from 'react-redux';
+import {useDispatch} from 'react-redux';
 import cloneDeep from 'lodash/cloneDeep';
 import isEqual from 'lodash/isEqual';
 import {useSelector} from 'react-redux';
@@ -173,6 +171,23 @@ const App = props => {
 
   const prevQueryRef = useRef<number>(null);
 
+  const startScreenCapture = useSelector(
+    (state: any) => state.demo.aiAssistant.screenshotToAsk.startScreenCapture
+  );
+
+  const mapContainerRef = useRef<HTMLDivElement>(null);
+  const [mapDimensions, setMapDimensions] = useState({width: 0, height: 0});
+
+  useEffect(() => {
+    if (!mapContainerRef.current) return;
+    const observer = new ResizeObserver(entries => {
+      const {width, height} = entries[0].contentRect;
+      setMapDimensions({width, height});
+    });
+    observer.observe(mapContainerRef.current);
+    return () => observer.disconnect();
+  }, []);
+
   // Handle OAuth callback on /auth route
   useEffect(() => {
     if (location.pathname === '/auth' && window.opener) {
@@ -273,7 +288,7 @@ const App = props => {
 
   const _disableBanner = useCallback(() => {
     hideBanner();
-    Window.localStorage.setItem(BannerKey, 'true');
+    window.localStorage.setItem(BannerKey, 'true');
   }, [hideBanner]);
 
   const _loadRowData = useCallback(() => {
@@ -575,7 +590,7 @@ const App = props => {
       features: sampleGeojsonPoints.features.slice(0, 5)
     });
     _loadGeojsonData();
-    Window.setTimeout(() => {
+    window.setTimeout(() => {
       dispatch(
         replaceDataInMap({
           datasetToReplaceId: 'bart-stops-geo',
@@ -874,7 +889,7 @@ const App = props => {
         // }}
         >
           <ScreenshotWrapper
-            startScreenCapture={props.demo.aiAssistant.screenshotToAsk.startScreenCapture}
+            startScreenCapture={startScreenCapture}
             setScreenCaptured={_setScreenCaptured}
             setStartScreenCapture={_setStartScreenCapture}
             className="h-screen"
@@ -887,23 +902,21 @@ const App = props => {
                 <Panel defaultSize={isAiAssistantPanelOpen ? 70 : 100}>
                   <PanelGroup direction="vertical">
                     <Panel defaultSize={isSqlPanelOpen ? 60 : 100}>
-                      <AutoSizer>
-                        {({height, width}) => (
-                          <KeplerGl
-                            mapboxApiAccessToken={CLOUD_PROVIDERS_CONFIGURATION.MAPBOX_TOKEN}
-                            id="map"
-                            getState={keplerGlGetState}
-                            width={width}
-                            height={height}
-                            cloudProviders={CLOUD_PROVIDERS}
-                            localeMessages={messages}
-                            onExportToCloudSuccess={onExportFileSuccess}
-                            onLoadCloudMapSuccess={onLoadCloudMapSuccess}
-                            featureFlags={DEFAULT_FEATURE_FLAGS}
-                            onViewStateChange={onViewStateChange}
-                          />
-                        )}
-                      </AutoSizer>
+                      <div ref={mapContainerRef} style={{width: '100%', height: '100%'}}>
+                        <KeplerGl
+                          mapboxApiAccessToken={CLOUD_PROVIDERS_CONFIGURATION.MAPBOX_TOKEN}
+                          id="map"
+                          getState={keplerGlGetState}
+                          width={mapDimensions.width}
+                          height={mapDimensions.height}
+                          cloudProviders={CLOUD_PROVIDERS}
+                          localeMessages={messages}
+                          onExportToCloudSuccess={onExportFileSuccess}
+                          onLoadCloudMapSuccess={onLoadCloudMapSuccess}
+                          featureFlags={DEFAULT_FEATURE_FLAGS}
+                          onViewStateChange={onViewStateChange}
+                        />
+                      </div>
                     </Panel>
 
                     {isSqlPanelOpen && (
@@ -933,7 +946,4 @@ const App = props => {
   );
 };
 
-const mapStateToProps = state => state;
-const dispatchToProps = dispatch => ({dispatch});
-
-export default connect(mapStateToProps, dispatchToProps)(App);
+export default App;

examples/demo-app/src/cloud-providers/carto/carto-provider.js

@@ -2,7 +2,6 @@
 // Copyright contributors to the kepler.gl project
 
 import {OAuthApp} from '@carto/toolkit';
-import Console from 'global/console';
 import CartoIcon from './carto-icon';
 import {Provider} from '@kepler.gl/cloud-providers';
 import {createDataContainer} from '@kepler.gl/utils';

examples/demo-app/src/cloud-providers/dropbox/dropbox-provider.js

@@ -3,7 +3,6 @@
 
 // DROPBOX
 import {Dropbox} from 'dropbox';
-import Window from 'global/window';
 import DropboxIcon from './dropbox-icon';
 import {MAP_URI} from '../../constants/default-settings';
 import {KEPLER_FORMAT, Provider} from '@kepler.gl/cloud-providers';

examples/demo-app/src/main.js

@@ -3,7 +3,6 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import document from 'global/document';
 import {Provider} from 'react-redux';
 import {BrowserRouter, Routes, Route} from 'react-router-dom';
 import store from './store';

examples/demo-app/src/reducers/index.js

@@ -2,7 +2,6 @@
 // Copyright contributors to the kepler.gl project
 
 import {combineReducers} from 'redux';
-import {handleActions} from 'redux-actions';
 import Task, {withTask} from 'react-palm/tasks';
 
 import {aiAssistantReducer} from '@kepler.gl/ai-assistant';
@@ -97,23 +96,18 @@ const initialAppState = {
 };
 
 // App reducer
-export const appReducer = handleActions(
-  {
-    [INIT]: state => ({
-      ...state,
-      loaded: true
-    }),
-    [LOAD_MAP_SAMPLE_FILE]: (state, action) => ({
-      ...state,
-      sampleMaps: action.samples
-    }),
-    [SET_SAMPLE_LOADING_STATUS]: (state, action) => ({
-      ...state,
-      isMapLoading: action.isMapLoading
-    })
-  },
-  initialAppState
-);
+export const appReducer = (state = initialAppState, action) => {
+  switch (action.type) {
+    case INIT:
+      return {...state, loaded: true};
+    case LOAD_MAP_SAMPLE_FILE:
+      return {...state, sampleMaps: action.samples};
+    case SET_SAMPLE_LOADING_STATUS:
+      return {...state, isMapLoading: action.isMapLoading};
+    default:
+      return state;
+  }
+};
 
 const {DEFAULT_EXPORT_MAP} = uiStateUpdaters;
 

examples/demo-app/src/store.js

@@ -8,9 +8,6 @@ import thunk from 'redux-thunk';
 import {enhanceReduxMiddleware} from '@kepler.gl/reducers';
 import {getApplicationConfig} from '@kepler.gl/utils';
 
-// eslint-disable-next-line no-unused-vars
-import Window from 'global/window';
-
 import demoReducer from './reducers/index';
 
 const reducers = combineReducers({
@@ -50,7 +47,7 @@ if (NODE_ENV === 'local') {
 
   const logger = createLogger({
     collapsed: () => true,
-    predicate: (_getState, action) => Window.__KEPLER_LOG_FULL__ || !suppressed.has(action.type)
+    predicate: (_getState, action) => window.__KEPLER_LOG_FULL__ || !suppressed.has(action.type)
   });
   middlewares.push(logger);
 }
@@ -66,10 +63,10 @@ let composeEnhancers = compose;
  * comment out code below to enable Redux Devtools
  */
 
-if (Window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) {
+if (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) {
   const level = getApplicationConfig().reduxLogLevel ?? 1;
   const suppressed = SUPPRESSED_BY_LEVEL[level] ?? LEVEL1_ACTIONS;
-  composeEnhancers = Window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
+  composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
     actionsBlacklist: [...suppressed]
   });
 }