update custom reducer example

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

Author: Ihor Dykhta

examples/custom-reducer/.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-reducer/.yarnrc.yml

@@ -1,24 +1,40 @@
 # Customize kepler.gl Reducer
 
-This example demos how to customize kepler.gl reducer
+Demo showing how to customize the kepler.gl reducer:
 
-1. Customize reducer initialState by `keplerGlReducer.initialState`
-2. Adding custom actions by `keplerGlReducer.plugins`
+1. Customize reducer initial state via `keplerGlReducer.initialState`
+2. Add custom actions via `keplerGlReducer.plugin`
 
-### Local dev
+## Pre-requirements
 
-```
-yarn
-```
+- [Node.js ^20.x](http://nodejs.org)
+- [Yarn 4.4.0](https://yarnpkg.com): See the [installation instructions][yarn-install].
 
-add mapbox access token to node env
+## 1. Install Dependencies
 
-```
-export MapboxAccessToken=<your_mapbox_token>
+Go to the `examples/custom-reducer` directory and run:
+
+```sh
+touch yarn.lock && yarn
 ```
 
-then
+> `touch yarn.lock` is required once to mark this directory as a standalone Yarn project,
+> independent of the monorepo root.
 
-```
+## 2. Start the App
+
+```sh
 yarn start
 ```
+
+The app will be available at [http://localhost:8080](http://localhost:8080).
+
+## Production Build
+
+```sh
+yarn build
+```
+
+The output will be in the `dist/` directory.
+
+[yarn-install]: https://yarnpkg.com/getting-started/install

examples/custom-reducer/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-reducer example running at ${`http://localhost:${port}`}`);
+        console.info(`kepler.gl custom-reducer example running at http://localhost:${port}`);
         openURL(`http://localhost:${port}`);
       })
       .catch(e => {

examples/custom-reducer/esbuild.config.mjs

@@ -1,26 +1,28 @@
 {
+  "name": "kepler-custom-reducer",
+  "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/actions": "^3.1.10",
-    "@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",
-    "styled-components": "6.4.3"
+    "@kepler.gl/actions": "^3.3.0-alpha.6",
+    "@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"
   },
   "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-reducer/package.json

@@ -1,29 +1,23 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
-import {createAction, handleActions} from 'redux-actions';
-
 // CONSTANTS
 export const INIT = 'INIT';
 
-// ACTIONS
-export const appInit = createAction(INIT);
-
-// INITIAL_STATE
+// INITIAL STATE
 const initialState = {
   appName: 'example',
   loaded: false
 };
 
 // REDUCER
-const appReducer = handleActions(
-  {
-    [INIT]: state => ({
-      ...state,
-      loaded: true
-    })
-  },
-  initialState
-);
+const appReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case INIT:
+      return {...state, loaded: true};
+    default:
+      return state;
+  }
+};
 
 export default appReducer;

examples/custom-reducer/src/app-reducer.js

@@ -1,53 +1,44 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
-import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
+import * as React from 'react';
+import {useState, useEffect} from 'react';
+import {useDispatch} from 'react-redux';
 import KeplerGl from '@kepler.gl/components';
-import {createAction} from 'redux-actions';
-
 import {addDataToMap, wrapTo} from '@kepler.gl/actions';
+
 import sampleData from './data/sample-data';
 import config from './configurations/config';
 
-const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line
-
-// extra actions plugged into kepler.gl reducer (store.js)
-const hideAndShowSidePanel = createAction('HIDE_AND_SHOW_SIDE_PANEL');
-
-class App extends Component {
-  componentDidMount() {
-    this.props.dispatch(
-      wrapTo(
-        'map1',
-        addDataToMap({
-          datasets: sampleData,
-          config
-        })
-      )
-    );
-  }
-
-  _toggleSidePanelVisibility = () => {
-    this.props.dispatch(wrapTo('map1', hideAndShowSidePanel()));
-  };
-
-  render() {
-    return (
-      <div style={{position: 'absolute', width: '100%', height: '100%'}}>
-        <button onClick={this._toggleSidePanelVisibility}> Hide / Show Side Panel</button>
-        <AutoSizer>
-          {({height, width}) => (
-            <KeplerGl mapboxApiAccessToken={MAPBOX_TOKEN} id="map1" width={width} height={height} />
-          )}
-        </AutoSizer>
-      </div>
-    );
-  }
+// Extra action handled by the custom kepler.gl reducer plugin (see store.js)
+const hideAndShowSidePanel = () => ({type: 'HIDE_AND_SHOW_SIDE_PANEL'});
+
+function useWindowSize() {
+  const [size, setSize] = useState({width: window.innerWidth, height: window.innerHeight});
+  useEffect(() => {
+    const onResize = () => setSize({width: window.innerWidth, height: window.innerHeight});
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, []);
+  return size;
 }
 
-const mapStateToProps = state => state;
-const dispatchToProps = dispatch => ({dispatch});
-
-export default connect(mapStateToProps, dispatchToProps)(App);
+const App = () => {
+  const dispatch = useDispatch();
+  const {width, height} = useWindowSize();
+
+  useEffect(() => {
+    dispatch(wrapTo('map1', addDataToMap({datasets: sampleData, config})));
+  }, [dispatch]);
+
+  return (
+    <div style={{position: 'absolute', width: '100%', height: '100%'}}>
+      <button onClick={() => dispatch(wrapTo('map1', hideAndShowSidePanel()))}>
+        Hide / Show Side Panel
+      </button>
+      <KeplerGl mapboxApiAccessToken="pk.xxx.yyy" id="map1" width={width} height={height - 30} />
+    </div>
+  );
+};
+
+export default App;

examples/custom-reducer/src/app.js

@@ -120,18 +120,9 @@ export default {
       isSplit: false
     },
     mapStyle: {
-      styleType: 'light',
-      topLayerGroups: {
-        label: true
-      },
-      visibleLayerGroups: {
-        label: true,
-        road: true,
-        border: false,
-        building: true,
-        water: true,
-        land: true
-      }
+      styleType: 'dark-matter',
+      topLayerGroups: {},
+      visibleLayerGroups: {}
     }
   }
 };