From 5eb62a9b630f61fc0921c3ec1825a3ea099b31d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Giuseppe=20Macr=C3=AC?= Date: Tue, 21 Nov 2023 10:51:26 -0500 Subject: [PATCH] [fix] Fixed website configuration to correctly import local kepler files (#2454) Signed-off-by: Giuseppe Macri --- .../foursquare/foursquare-provider.js | 17 +++-- examples/demo-app/webpack.config.js | 16 ++--- examples/webpack.config.local.js | 38 ++--------- src/components/src/modals/cloud-tile.tsx | 24 +------ src/components/src/modals/save-map-modal.tsx | 6 +- webpack/shared-webpack-configuration.js | 66 +++++++++++++++++++ website/src/reducers/analytics.js | 4 +- website/webpack.config.js | 48 +++++--------- 8 files changed, 107 insertions(+), 112 deletions(-) create mode 100644 webpack/shared-webpack-configuration.js diff --git a/examples/demo-app/src/cloud-providers/foursquare/foursquare-provider.js b/examples/demo-app/src/cloud-providers/foursquare/foursquare-provider.js index a1d52e0f79..42b01bd4db 100644 --- 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 index 688892112d..0e5edb07fa 100644 --- 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 index 382abe48d8..d7f213939d 100644 --- 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 index c086792deb..0a22655d2b 100644 --- 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 = ({provider, actionName}) => { return ( - {provider.isNew ? ( - New - ) : null} + {provider.isNew ? New : null}
{displayName || name} diff --git a/src/components/src/modals/save-map-modal.tsx b/src/components/src/modals/save-map-modal.tsx index 09b505e085..92862e8f29 100644 --- 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} - + ); }; diff --git a/webpack/shared-webpack-configuration.js b/webpack/shared-webpack-configuration.js new file mode 100644 index 0000000000..459fdd7688 --- /dev/null +++ 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 index 8fde15d4d2..2cb1cb648d 100644 --- 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 index 87aa03ffcd..dce31839a8 100644 --- 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); }