[fix] Fixed website configuration to correctly import local kepler fi…

…les (#2454) Signed-off-by: Giuseppe Macri <gmacri@foursquare.com>
keplergl · Nov 21, 2023 · 5eb62a9 · 5eb62a9
1 parent 3949486
commit 5eb62a9
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 112 deletions.
diff --git a/examples/demo-app/src/cloud-providers/foursquare/foursquare-provider.js b/examples/demo-app/src/cloud-providers/foursquare/foursquare-provider.js
@@ -1,5 +1,5 @@
 import FSQIcon from './foursquare-icon';
-import {Provider, KEPLER_FORMAT} from 'kepler.gl/cloud-providers';
+import {Provider, KEPLER_FORMAT} from '@kepler.gl/cloud-providers';
 import {Auth0Client} from '@auth0/auth0-spa-js';
 
 const NAME = 'Foursquare';
@@ -85,7 +85,7 @@ export default class FoursquareProvider extends Provider {
   async uploadMap({mapData, options = {}}) {
     // TODO: handle replace
     const mode = options.overwrite ? 'overwrite' : 'add';
-    const method = options.overwrite ? 'PUT' : 'POST'
+    const method = options.overwrite ? 'PUT' : 'POST';
     const {map, thumbnail} = mapData;
 
     const {title = '', description = '', id} = map.info;
@@ -99,11 +99,14 @@ export default class FoursquareProvider extends Provider {
       }
     };
 
-    const mapResponse = await fetch(`${this.apiURL}/v1/maps${mode === 'overwrite' ? `/${id}` : ''}`, {
-      method,
-      headers,
-      body: JSON.stringify(payload)
-    });
+    const mapResponse = await fetch(
+      `${this.apiURL}/v1/maps${mode === 'overwrite' ? `/${id}` : ''}`,
+      {
+        method,
+        headers,
+        body: JSON.stringify(payload)
+      }
+    );
 
     const createMap = await mapResponse.json();
 

diff --git a/examples/demo-app/webpack.config.js b/examples/demo-app/webpack.config.js
@@ -26,6 +26,9 @@ const resolve = require('path').resolve;
 const join = require('path').join;
 const webpack = require('webpack');
 
+const WEBPACK_ENV_VARIABLES = require('../../webpack/shared-webpack-configuration')
+  .WEBPACK_ENV_VARIABLES;
+
 const CONFIG = {
   // bundle app.js and everything it imports, recursively.
   entry: {
@@ -64,18 +67,7 @@ const CONFIG = {
   },
 
   // Optional: Enables reading mapbox and dropbox client token from environment variable
-  plugins: [
-    new webpack.EnvironmentPlugin([
-      'MapboxAccessToken',
-      'DropboxClientId',
-      'MapboxExportToken',
-      'CartoClientId',
-      'FoursquareClientId',
-      'FoursquareDomain',
-      'FoursquareAPIURL',
-      'FoursquareUserMapsURL'
-    ])
-  ]
+  plugins: [new webpack.EnvironmentPlugin(WEBPACK_ENV_VARIABLES)]
 };
 
 // This line enables bundling against src in this repo rather than installed kepler.gl module

diff --git a/examples/webpack.config.local.js b/examples/webpack.config.local.js
@@ -32,6 +32,11 @@ const webpack = require('webpack');
 const fs = require('fs');
 const KeplerPackage = require('../package');
 const {logStep, logError} = require('../scripts/log');
+const {
+  WEBPACK_ENV_VARIABLES,
+  ENV_VARIABLES_WITH_INSTRUCTIONS,
+  RESOLVE_ALIASES
+} = require('../webpack/shared-webpack-configuration');
 
 const LIB_DIR = resolve(__dirname, '..');
 const SRC_DIR = resolve(LIB_DIR, './src');
@@ -50,30 +55,12 @@ const EXTERNAL_HUBBLE_SRC = resolve(__dirname, '../../hubble.gl');
 
 // Support for hot reloading changes to the deck.gl library:
 function makeLocalDevConfig(env, EXAMPLE_DIR = LIB_DIR, externals = {}) {
-  const resolveAlias = {
-    // Imports kepler.gl library from the src directory in this repo
-    'kepler.gl': SRC_DIR,
-    react: `${NODE_MODULES_DIR}/react`,
-    'react-dom': `${NODE_MODULES_DIR}/react-dom`,
-    'react-redux': `${NODE_MODULES_DIR}/react-redux/lib`,
-    'styled-components': `${NODE_MODULES_DIR}/styled-components`,
-    'react-intl': `${NODE_MODULES_DIR}/react-intl`,
-    // Suppress useles warnings from react-date-picker's dep
-    'tiny-warning': `${SRC_DIR}/utils/src/noop.ts`
-  };
+  const resolveAlias = RESOLVE_ALIASES;
 
   // Combine flags
   const useLocalDeck = env.deck || env.hubble_src;
   const useRepoDeck = env.deck_src;
 
-  // add kepler.gl submodule aliases
-  const workspaces = KeplerPackage.workspaces;
-  workspaces.forEach(workspace => {
-    // workspace =  "./src/types",  "./src/constants", etc
-    const moduleName = workspace.split('/').pop();
-    resolveAlias[`@kepler.gl/${moduleName}`] = join(SRC_DIR, `${moduleName}/src`);
-  });
-
   // resolve deck.gl from local dir
   if (useLocalDeck || useRepoDeck) {
     // Load deck.gl from root node_modules
@@ -156,18 +143,7 @@ function makeLocalDevConfig(env, EXAMPLE_DIR = LIB_DIR, externals = {}) {
       ]
     },
     // Optional: Enables reading mapbox token from environment variable
-    plugins: [
-      new webpack.EnvironmentPlugin([
-        'MapboxAccessToken',
-        'DropboxClientId',
-        'MapboxExportToken',
-        'CartoClientId',
-        'FoursquareClientId',
-        'FoursquareDomain',
-        'FoursquareAPIURL',
-        'FoursquareUserMapsURL'
-      ])
-    ]
+    plugins: [new webpack.EnvironmentPlugin(WEBPACK_ENV_VARIABLES)]
   };
 }
 

diff --git a/src/components/src/modals/cloud-tile.tsx b/src/components/src/modals/cloud-tile.tsx
@@ -1,23 +1,3 @@
-// Copyright (c) 2023 Uber Technologies, Inc.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-
 import React, {useCallback, useEffect, useState} from 'react';
 import styled from 'styled-components';
 import {Logout, Login} from '../common/icons';
@@ -187,9 +167,7 @@ const CloudTile: React.FC<CloudTileProps> = ({provider, actionName}) => {
 
   return (
     <StyledBox>
-      {provider.isNew ? (
-        <NewTag>New</NewTag>
-      ) : null}
+      {provider.isNew ? <NewTag>New</NewTag> : null}
       <div></div>
       <StyledTileWrapper onClick={onSelect} selected={isSelected}>
         <StyledCloudName>{displayName || name}</StyledCloudName>

diff --git a/src/components/src/modals/save-map-modal.tsx b/src/components/src/modals/save-map-modal.tsx
@@ -273,11 +273,7 @@ function SaveMapModalFactory() {
             ) : null}
           </StyledModalContent>
         </StyledSaveMapModal>
-        <ModalFooter
-          cancel={onCancel}
-          confirm={confirm}
-          confirmButton={confirmButton}
-        />
+        <ModalFooter cancel={onCancel} confirm={confirm} confirmButton={confirmButton} />
       </ImageModalContainer>
     );
   };

diff --git a/webpack/shared-webpack-configuration.js b/webpack/shared-webpack-configuration.js
@@ -0,0 +1,66 @@
+// Copyright (c) 2023 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+const KeplerPackage = require('../package.json');
+const {join, resolve} = require('path');
+
+const LIB_DIR = resolve(__dirname, '..');
+const SRC_DIR = resolve(LIB_DIR, './src');
+const NODE_MODULES_DIR = resolve(__dirname, '../node_modules');
+
+const resolveAlias = {
+  react: `${NODE_MODULES_DIR}/react`,
+  'react-dom': `${NODE_MODULES_DIR}/react-dom`,
+  'react-redux': `${NODE_MODULES_DIR}/react-redux/lib`,
+  'styled-components': `${NODE_MODULES_DIR}/styled-components`,
+  'react-intl': `${NODE_MODULES_DIR}/react-intl`,
+  // Suppress useless warnings from react-date-picker's dep
+  'tiny-warning': `${SRC_DIR}/utils/src/noop.ts`
+};
+
+// add kepler.gl submodule aliases
+const workspaces = KeplerPackage.workspaces;
+workspaces.forEach(workspace => {
+  // workspace =  "./src/types",  "./src/constants", etc
+  const moduleName = workspace.split('/').pop();
+  resolveAlias[`@kepler.gl/${moduleName}`] = join(SRC_DIR, `${moduleName}/src`);
+});
+
+const ENV_VARIABLES_WITH_INSTRUCTIONS = {
+  MapboxAccessToken: 'You can get the token at https://www.mapbox.com/help/how-access-tokens-work/',
+  DropboxClientId: 'You can get the token at https://www.dropbox.com/developers',
+  CartoClientId: 'You can get the token at https://www.mapbox.com/help/how-access-tokens-work/',
+  MapboxExportToken: 'You can get the token at https://location.foursquare.com/developer',
+  FoursquareClientId: 'You can get the token at https://location.foursquare.com/developer',
+  FoursquareDomain: 'You can get the token at https://location.foursquare.com/developer',
+  FoursquareAPIURL: 'You can get the token at https://location.foursquare.com/developer',
+  FoursquareUserMapsURL: 'You can get the token at https://location.foursquare.com/developer',
+};
+
+const WEBPACK_ENV_VARIABLES = Object.keys(ENV_VARIABLES_WITH_INSTRUCTIONS).reduce((acc, key) => ({
+  ...acc,
+  [key]: null
+}), {});
+
+module.exports = {
+  ENV_VARIABLES_WITH_INSTRUCTIONS,
+  WEBPACK_ENV_VARIABLES,
+  RESOLVE_ALIASES: resolveAlias
+}
diff --git a/website/src/reducers/analytics.js b/website/src/reducers/analytics.js
@@ -20,10 +20,10 @@
 
 // This file sends actions on the demo app to Google analytics
 
-import {ActionTypes} from 'kepler.gl/actions';
+import {ActionTypes} from '@kepler.gl/actions';
 import {LOCATION_CHANGE} from 'react-router-redux';
 import window from 'global/window';
-import {ALL_FIELD_TYPES} from 'kepler.gl/constants';
+import {ALL_FIELD_TYPES} from '@kepler.gl/constants';
 import get from 'lodash.get';
 
 const getPayload = action => (action ? action.payload : null);

diff --git a/website/webpack.config.js b/website/webpack.config.js
@@ -22,9 +22,10 @@ const {resolve, join} = require('path');
 const webpack = require('webpack');
 
 const KeplerPackage = require('../package');
+const {WEBPACK_ENV_VARIABLES, ENV_VARIABLES_WITH_INSTRUCTIONS, RESOLVE_ALIASES} = require('../webpack/shared-webpack-configuration');
 
-const rootDir = join(__dirname, '..');
-const libSources = join(rootDir, 'src');
+const LIB_DIR = resolve(__dirname, '..');
+const SRC_DIR = resolve(LIB_DIR, './src');
 
 const console = require('global/console');
 
@@ -59,18 +60,8 @@ const COMMON_CONFIG = {
 
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
-    modules: ['node_modules', libSources],
-    alias: {
-      'kepler.gl/dist': libSources,
-      // Imports the kepler.gl library from the src directory in this repo
-      'kepler.gl': libSources,
-      react: resolve(rootDir, './node_modules/react'),
-      'react-dom': resolve(rootDir, './node_modules/react-dom'),
-      'styled-components': resolve(rootDir, './node_modules/styled-components'),
-      'react-redux': resolve(rootDir, './node_modules/react-redux'),
-      'react-palm': resolve(rootDir, './node_modules/react-palm'),
-      'react-intl': resolve(rootDir, './node_modules/react-intl')
-    }
+    modules: ['node_modules', SRC_DIR],
+    alias: RESOLVE_ALIASES
   },
 
   module: {
@@ -89,6 +80,12 @@ const COMMON_CONFIG = {
       {
         test: /\.(svg|ico|gif|jpe?g|png)$/,
         loader: 'file-loader?name=[name].[ext]'
+      },
+      // for compiling apache-arrow ESM module
+      {
+        test: /\.mjs$/,
+        include: /node_modules\/apache-arrow/,
+        type: 'javascript/auto'
       }
     ]
   },
@@ -105,17 +102,7 @@ const COMMON_CONFIG = {
   // Optional: Enables reading mapbox token from environment variable
   plugins: [
     // Provide default values to suppress warnings
-    new webpack.EnvironmentPlugin({
-      MapboxAccessToken: undefined,
-      DropboxClientId: null,
-      CartoClientId: null,
-      GoogleDriveClientId: null,
-      MapboxExportToken: null,
-      FoursquareClientId: null,
-      FoursquareDomain: null,
-      FoursquareAPIURL: null,
-      FoursquareUserMapsURL: null
-    })
+    new webpack.EnvironmentPlugin(WEBPACK_ENV_VARIABLES)
   ],
 
   // Required to avoid deck.gl undefined module when code is minified
@@ -183,13 +170,10 @@ module.exports = env => {
   }
 
   if (env.prod) {
-    validateEnvVariable('MapboxAccessToken', 'You can get the token at https://www.mapbox.com/help/how-access-tokens-work/');
-    validateEnvVariable('DropboxClientId', 'You can get the token at https://www.dropbox.com/developers');
-    validateEnvVariable('MapboxExportToken', 'You can get the token at https://www.mapbox.com/help/how-access-tokens-work/');
-    validateEnvVariable('FoursquareClientId','https://location.foursquare.com/developer');
-    validateEnvVariable('FoursquareDomain','https://location.foursquare.com/developer');
-    validateEnvVariable('FoursquareAPIURL','https://location.foursquare.com/developer');
-    validateEnvVariable('FoursquareUserMapsURL','https://location.foursquare.com/developer');
+    Object.entries(ENV_VARIABLES_WITH_INSTRUCTIONS).forEach(entry => {
+      // we validate each entry [name, instruction]
+      validateEnvVariable(...entry);
+    });
     config = addProdConfig(config);
   }