upgrade custom-theme example

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

Author: Ihor Dykhta

examples/custom-theme/.babelrc

@@ -0,0 +1,4 @@
+# https://yarnpkg.com/configuration/yarnrc
+nodeLinker: node-modules
+# Define the registry to use when fetching packages.
+npmRegistryServer: 'https://registry.yarnpkg.com'

examples/custom-theme/.yarnrc.yml

@@ -1,25 +1,42 @@
 # Customize kepler.gl Theme
 
-This example show how to customize Kepler.gl theme
-  1. Define an object (theme) to override Kepler.gl style
-  2. Pass the newly created object as prop to KeplerGl react component
+This example shows how to customize the kepler.gl theme:
 
-#### 1. Install
+1. Define an object (`theme`) to override kepler.gl styles
+2. Pass the newly created object as the `theme` prop to the `KeplerGl` component
+
+## Pre-requirements
+
+- [Node.js ^20.x](http://nodejs.org)
+- [Yarn 4.4.0](https://yarnpkg.com): See the [installation instructions][yarn-install].
+
+## 1. Install Dependencies
+
+Go to the `examples/custom-theme` directory and run:
 
 ```sh
-yarn
+touch yarn.lock && yarn
 ```
 
+> `touch yarn.lock` is required once to mark this directory as a standalone Yarn project,
+> independent of the monorepo root.
 
-#### 2. Mapbox Token
-add mapbox access token to node env
+## 2. Start the App
 
 ```sh
-export MapboxAccessToken=<your_mapbox_token>
+yarn start
 ```
 
-#### 3. Start the app
+The app will be available at [http://localhost:8080](http://localhost:8080).
+
+Use the checkbox in the bottom-right corner to toggle between the default and the custom (light) theme.
+
+## Production Build
 
 ```sh
-yarn start
+yarn build
 ```
+
+The output will be in the `dist/` directory.
+
+[yarn-install]: https://yarnpkg.com/getting-started/install

examples/custom-theme/README.md

@@ -2,59 +2,57 @@
 // Copyright contributors to the kepler.gl project
 
 import esbuild from 'esbuild';
-import {replace} from 'esbuild-plugin-replace';
 import {dotenvRun} from '@dotenv-run/esbuild';
 import copyPlugin from 'esbuild-plugin-copy';
 
 import process from 'node:process';
 import fs from 'node:fs';
+import path from 'node:path';
+import {fileURLToPath} from 'node:url';
 import {spawn} from 'node:child_process';
-import {join} from 'node:path';
 
 const args = process.argv;
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
 const port = 8080;
 
 const NODE_ENV = JSON.stringify(process.env.NODE_ENV || 'production');
 
-// Ensure a single instance of React and friends to avoid invalid hook calls
-const ROOT_NODE_MODULES = join('..', '..', 'node_modules');
-const thirdPartyAliases = {
-  react: join(ROOT_NODE_MODULES, 'react'),
-  'react-dom': join(ROOT_NODE_MODULES, 'react-dom'),
-  'react-redux': join(ROOT_NODE_MODULES, 'react-redux', 'lib'),
-  'styled-components': join(ROOT_NODE_MODULES, 'styled-components'),
-  'apache-arrow': join(ROOT_NODE_MODULES, 'apache-arrow')
-};
-
 const config = {
   platform: 'browser',
   format: 'iife',
   logLevel: 'info',
-  loader: {
-    '.js': 'jsx',
-    '.css': 'css',
-    '.ttf': 'file',
-    '.woff': 'file',
-    '.woff2': 'file'
-  },
+  loader: {'.js': 'jsx', '.css': 'css'},
   entryPoints: ['src/main.js'],
   outfile: 'dist/bundle.js',
   bundle: true,
   define: {
-    NODE_ENV,
-    'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken || '')
+    NODE_ENV
   },
   plugins: [
     dotenvRun({
       verbose: true,
       environment: NODE_ENV,
       root: '../../.env'
     }),
-    replace({
-      __PACKAGE_VERSION__: '3.1.10',
-      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;
+        });
+      }
+    },
     copyPlugin({
       resolveFrom: 'cwd',
       assets: {
@@ -82,16 +80,13 @@ function openURL(url) {
     const result = await esbuild
       .build({
         ...config,
-        alias: thirdPartyAliases,
         minify: true,
         sourcemap: false,
         metafile: true,
         define: {
           ...config.define,
           'process.env.NODE_ENV': '"production"'
-        },
-        drop: ['console', 'debugger'],
-        treeShaking: true
+        }
       })
       .catch(e => {
         console.error(e);
@@ -104,7 +99,6 @@ function openURL(url) {
     await esbuild
       .context({
         ...config,
-        alias: thirdPartyAliases,
         minify: false,
         sourcemap: true,
         banner: {
@@ -121,7 +115,7 @@ function openURL(url) {
             console.info(remoteAddress, status, `"${method} ${path}" [${timeInMS}ms]`);
           }
         });
-        console.info(`kepler.gl custom-theme example running at ${`http://localhost:${port}`}`);
+        console.info(`kepler.gl custom-theme example running at http://localhost:${port}`);
         openURL(`http://localhost:${port}`);
       })
       .catch(e => {

examples/custom-theme/esbuild.config.mjs

@@ -1,25 +1,28 @@
 {
+  "name": "kepler-custom-theme",
+  "version": "0.0.1",
+  "license": "MIT",
   "scripts": {
     "start": "node esbuild.config.mjs --start",
     "build": "node esbuild.config.mjs --build",
     "start-local": "NODE_ENV=local node esbuild.config.mjs --start"
   },
   "dependencies": {
-    "@kepler.gl/components": "^3.1.10",
-    "@kepler.gl/reducers": "^3.1.10",
-    "global": "^4.3.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-palm": "^3.3.6",
-    "react-redux": "^8.0.5",
-    "react-virtualized": "^9.21.0",
-    "redux-actions": "^2.2.1",
+    "@kepler.gl/components": "^3.3.0-alpha.6",
+    "@kepler.gl/reducers": "^3.3.0-alpha.6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-redux": "^9.1.0",
+    "redux": "^5.0.1",
     "styled-components": "6.4.3"
   },
   "devDependencies": {
     "@dotenv-run/esbuild": "^1.5.0",
+    "@types/node": "^20",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "esbuild": "^0.25.0",
     "esbuild-plugin-copy": "^2.1.1",
-    "esbuild-plugin-replace": "^1.4.0"
+    "typescript": "^5.5.0"
   }
 }

examples/custom-theme/package.json

@@ -3,12 +3,8 @@
 
 import React, {useEffect, useState} from 'react';
 import styled from 'styled-components';
-import Window from 'global/window';
-import {connect} from 'react-redux';
 import KeplerGl from '@kepler.gl/components';
 
-const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line
-
 const theme = {
   sidePanelBg: '#ffffff',
   titleTextColor: '#000000',
@@ -43,20 +39,19 @@ const StyleSwitch = styled.div`
   border: 1px solid mediumseagreen;
 `;
 
-function App() {
-  const [customTheme, setTheme] = useState(false);
-  const [windowDimension, setDimension] = useState({
-    width: Window.innerWidth,
-    height: Window.innerHeight
-  });
-
+function useWindowSize() {
+  const [size, setSize] = useState({width: window.innerWidth, height: window.innerHeight});
   useEffect(() => {
-    const handleResize = () => {
-      setDimension({width: Window.innerWidth, height: Window.innerHeight});
-    };
-    Window.addEventListener('resize', handleResize);
-    return () => Window.removeEventListener('resize', handleResize);
+    const onResize = () => setSize({width: window.innerWidth, height: window.innerHeight});
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
   }, []);
+  return size;
+}
+
+function App() {
+  const [customTheme, setTheme] = useState(false);
+  const {width, height} = useWindowSize();
 
   return (
     <div>
@@ -70,22 +65,15 @@ function App() {
         />
       </StyleSwitch>
       <KeplerGl
-        mapboxApiAccessToken={MAPBOX_TOKEN}
+        mapboxApiAccessToken="pk.xxx.yyy"
         id="map"
-        /*
-         * Specify path to keplerGl state, because it is not mount at the root
-         */
         getState={state => state.demo.keplerGl}
-        width={windowDimension.width}
-        height={windowDimension.height}
+        width={width}
+        height={height}
         theme={customTheme ? theme : emptyTheme}
       />
     </div>
   );
-  // }
 }
 
-const mapStateToProps = state => state;
-const dispatchToProps = dispatch => ({dispatch});
-
-export default connect(mapStateToProps, dispatchToProps)(App);
+export default App;

examples/custom-theme/src/app.js

@@ -3,14 +3,10 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import document from 'global/document';
-import Modal from 'react-modal';
 import {Provider} from 'react-redux';
 import store from './store';
 import App from './app';
 
-Modal.setAppElement('#root');
-
 const Root = () => (
   <Provider store={store}>
     <App />

examples/custom-theme/src/main.js

@@ -2,31 +2,23 @@
 // Copyright contributors to the kepler.gl project
 
 import {combineReducers} from 'redux';
-import {handleActions} from 'redux-actions';
 
 import keplerGlReducer from '@kepler.gl/reducers';
 
-import {INIT} from '../actions';
-
-// INITIAL_APP_STATE
 const initialAppState = {
   appName: 'example'
 };
 
-// App reducer
-export const appReducer = handleActions(
-  {
-    [INIT]: state => ({
-      ...state,
-      loaded: true
-    })
-  },
-  initialAppState
-);
+function appReducer(state = initialAppState, action) {
+  switch (action.type) {
+    case 'INIT':
+      return {...state, loaded: true};
+    default:
+      return state;
+  }
+}
 
-// export demoReducer to be combined in website app
 export default combineReducers({
-  // mount keplerGl reducer
   keplerGl: keplerGlReducer,
   app: appReducer
 });

examples/custom-theme/src/reducers/index.js

@@ -1,7 +1,6 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
-import Window from 'global/window';
 import {combineReducers, createStore, applyMiddleware, compose} from 'redux';
 import {enhanceReduxMiddleware} from '@kepler.gl/reducers';
 
@@ -12,12 +11,8 @@ const reducers = combineReducers({
 });
 
 const middlewares = enhanceReduxMiddleware([]);
+const enhancers = applyMiddleware(...middlewares);
 
-export const enhancers = [applyMiddleware(...middlewares)];
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
-const initialState = {};
-
-// add redux devtools
-const composeEnhancers = Window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
-
-export default createStore(reducers, initialState, composeEnhancers(...enhancers));
+export default createStore(reducers, {}, composeEnhancers(enhancers));

examples/custom-theme/src/store.js

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}