Removed all usages of 'global' package.

Fixed related issues. Added some type definitions. Signed-off-by: Sergey Markov <mar.ser.dlx@gmail.com>
keplergl · Sep 19, 2024 · 0b6a694 · 0b6a694
1 parent 9607858
commit 0b6a694
Show file tree

Hide file tree

Showing 83 changed files with 139 additions and 255 deletions.
diff --git a/bindings/kepler.gl-jupyter/js/lib/keplergl/kepler.gl.js b/bindings/kepler.gl-jupyter/js/lib/keplergl/kepler.gl.js
@@ -3,7 +3,6 @@
 
 import {addDataToMap, ActionTypes} from '@kepler.gl/actions';
 import {KeplerGlSchema} from '@kepler.gl/schemas';
-import document from 'global/document';
 
 import renderRoot from './components/root';
 import createAppStore from './store';
@@ -143,7 +142,9 @@ class KeplerGlJupyter {
           data: {
             fields: d.fields,
             // rows: d.allData
-            ...(d.dataContainer instanceof ArrowDataContainer ? {cols: d.dataContainer._cols} : {rows: d.allData})
+            ...(d.dataContainer instanceof ArrowDataContainer
+              ? {cols: d.dataContainer._cols}
+              : {rows: d.allData})
           }
         })),
         config,
@@ -153,12 +154,7 @@ class KeplerGlJupyter {
   }
 }
 
-export function addDataConfigToKeplerGl({
-  data: inputData,
-  config,
-  options,
-  store
-}) {
+export function addDataConfigToKeplerGl({data: inputData, config, options, store}) {
   const data = inputData ? dataToDatasets(inputData) : [];
   log(data);
 

diff --git a/bindings/kepler.gl-jupyter/js/lib/keplergl/main.js b/bindings/kepler.gl-jupyter/js/lib/keplergl/main.js
@@ -4,19 +4,14 @@
 // NOTE: this is only used for exporting html template
 import createAppStore from './store';
 import renderRoot from './components/root';
-import document from 'global/document';
-import window from 'global/window';
 import {addDataConfigToKeplerGl} from './kepler.gl';
 
 const map = (function initKeplerGl() {
   const id = 'keplergl-0';
   const store = createAppStore();
 
   const divElmt = document.createElement('div');
-  divElmt.setAttribute(
-    'style',
-    'width: 100vw; height: 100vh; position: absolute'
-  );
+  divElmt.setAttribute('style', 'width: 100vw; height: 100vh; position: absolute');
   document.body.appendChild(divElmt);
 
   return {

diff --git a/bindings/kepler.gl-jupyter/js/lib/keplergl/utils.js b/bindings/kepler.gl-jupyter/js/lib/keplergl/utils.js
@@ -4,7 +4,6 @@
 import {tableFromIPC} from 'apache-arrow';
 import {processCsvData, processGeojson, processArrowBatches} from '@kepler.gl/processors';
 import log from '../log';
-import console from 'global/console';
 
 function handleJuptyerDataFormat(dataEntry) {
   // This makes passing data between Jupyter the iframe easier

diff --git a/bindings/kepler.gl-jupyter/js/lib/log.js b/bindings/kepler.gl-jupyter/js/lib/log.js
@@ -1,8 +1,6 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
-import console from 'global/console';
-
 function log(...args) {
   if (process.env.NODE_ENV === 'development') {
     console.log(...args);

diff --git a/examples/custom-map-style/src/main.tsx b/examples/custom-map-style/src/main.tsx
@@ -3,17 +3,16 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import document from 'global/document';
 import {Provider} from 'react-redux';
-import store from './store.ts';
-import App from './app.tsx';
+import store from './store';
+import App from './app';
 
 const Root = () => (
   <Provider store={store}>
     <App />
   </Provider>
 );
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root')!);
 
 root.render(<Root />);
diff --git a/examples/custom-reducer/src/main.js b/examples/custom-reducer/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 store from './store';
 import App from './app';

diff --git a/examples/custom-reducer/src/store.js b/examples/custom-reducer/src/store.js
@@ -4,7 +4,6 @@
 import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
 import keplerGlReducer, {uiStateUpdaters, enhanceReduxMiddleware} from '@kepler.gl/reducers';
 import appReducer from './app-reducer';
-import window from 'global/window';
 
 const customizedKeplerGlReducer = keplerGlReducer
   .initialState({

diff --git a/examples/custom-theme/src/app.js b/examples/custom-theme/src/app.js
@@ -3,7 +3,6 @@
 
 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';
 

diff --git a/examples/custom-theme/src/main.js b/examples/custom-theme/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 store from './store';
 import App from './app';

diff --git a/examples/custom-theme/src/store.js b/examples/custom-theme/src/store.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';
 

diff --git a/examples/demo-app/src/actions.js b/examples/demo-app/src/actions.js
@@ -2,7 +2,6 @@
 // Copyright contributors to the kepler.gl project
 
 import {push} from 'react-router-redux';
-import {fetch} from 'global';
 
 import {loadFiles, toggleModal} from '@kepler.gl/actions';
 import {load} from '@loaders.gl/core';

diff --git a/examples/demo-app/src/app.js b/examples/demo-app/src/app.js
@@ -4,7 +4,6 @@
 import React, {Component} from 'react';
 import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
 import styled, {ThemeProvider} from 'styled-components';
-import window from 'global/window';
 import {connect} from 'react-redux';
 
 import {theme} from '@kepler.gl/styles';
@@ -438,4 +437,4 @@ class App extends Component {
 const mapStateToProps = state => state;
 const dispatchToProps = dispatch => ({dispatch});
 
-export default connect(mapStateToProps, dispatchToProps)(App);
+export default React.memo(connect(mapStateToProps, dispatchToProps)(App));
diff --git a/examples/demo-app/src/cloud-providers/carto/carto-provider.js b/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';
@@ -343,33 +342,33 @@ export default class CartoProvider extends Provider {
 
       switch (error.message) {
         case 'No client ID has been specified':
-          Console.error('No ClientID set for CARTO provider');
+          console.error('No ClientID set for CARTO provider');
           break;
         case 'Cannot set the client ID more than once':
-          Console.error('CARTO provider already initialized');
+          console.error('CARTO provider already initialized');
           break;
         case (error.message.match(/relation "[a-zA-Z0-9_]+" does not exist/) || {}).input:
-          Console.error('CARTO custom storage is not properly initialized');
+          console.error('CARTO custom storage is not properly initialized');
           message = 'Custom storage is not properly initialized';
           break;
         case (
           error.message.match(/Failed to copy to keplergl_[a-zA-Z0-9_]+: Too many retries/) || {}
         ).input:
-          Console.error('CARTO Rate limit exceeded');
+          console.error('CARTO Rate limit exceeded');
           message =
             "Failed to upload. You've exceeded the number of datasets allowed with your plan. Consider upgrading your plan.";
           break;
         case (error.message.match(/[a-zA-Z0-9_\s:]+: DB Quota exceeded/) || {}).input:
-          Console.error('CARTO DB Quota exceeded');
+          console.error('CARTO DB Quota exceeded');
           message =
             "Failed to upload. You've exceeded your account's disk storage limit. Consider upgrading your plan.";
           break;
         default:
-          Console.error(`CARTO provider: ${message}`);
+          console.error(`CARTO provider: ${message}`);
       }
     } else {
       message = 'General error in CARTO provider';
-      Console.error(message);
+      console.error(message);
     }
 
     // Use 'CARTO' as error code in order to show provider in notifications

diff --git a/examples/demo-app/src/cloud-providers/dropbox/dropbox-provider.js b/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';

diff --git a/examples/demo-app/src/main.js b/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 {browserHistory, Router, Route} from 'react-router';
 import {syncHistoryWithStore} from 'react-router-redux';

diff --git a/examples/demo-app/src/store.js b/examples/demo-app/src/store.js
@@ -7,7 +7,6 @@ import {browserHistory} from 'react-router';
 import {enhanceReduxMiddleware} from '@kepler.gl/reducers';
 import thunk from 'redux-thunk';
 // eslint-disable-next-line no-unused-vars
-import window from 'global/window';
 
 import demoReducer from './reducers/index';
 

diff --git a/examples/node-app/src/main.js b/examples/node-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 store from './store';
 import App from './app';

diff --git a/examples/open-modal/src/main.js b/examples/open-modal/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 store from './store';
 import App from './app';

diff --git a/examples/open-modal/src/store.js b/examples/open-modal/src/store.js
@@ -5,7 +5,6 @@ import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
 import keplerGlReducer, {enhanceReduxMiddleware} from '@kepler.gl/reducers';
 
 import appReducer from './app-reducer';
-import window from 'global/window';
 
 const reducers = combineReducers({
   keplerGl: keplerGlReducer,

diff --git a/examples/replace-component/src/main.js b/examples/replace-component/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 store from './store';
 import App from './app';

diff --git a/scripts/license-header/bin.mjs b/scripts/license-header/bin.mjs
@@ -6,8 +6,6 @@
 import readdirp from 'readdirp';
 import minimist from 'minimist';
 import {readFileSync} from 'fs';
-import process from 'global/process.js';
-import console from 'global/console.js';
 
 import LicenseFixer from './license-fixer.mjs';
 

diff --git a/scripts/license-header/license-fixer.mjs b/scripts/license-header/license-fixer.mjs
@@ -4,7 +4,6 @@
 // Forked from uber-licence, MIT
 
 import {readFileSync, writeFileSync} from 'fs';
-import console from 'global/console.js';
 
 function LicenseFixer(options) {
     options = options || {};
@@ -163,4 +162,4 @@ LicenseFixer.prototype.fixFile = function fixFile(file) {
     return true;
 };
 
-export default LicenseFixer
+export default LicenseFixer
diff --git a/scripts/log.js b/scripts/log.js
@@ -1,8 +1,6 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
-const console = require('global/console');
-
 const Colors = {
   Reset: '\x1b[0m',
   Bright: '\x1b[1m',
@@ -29,7 +27,7 @@ const Colors = {
   BgMagenta: '\x1b[45m',
   BgCyan: '\x1b[46m',
   BgWhite: '\x1b[47m'
-}
+};
 
 function log(color) {
   return function logWithColor(msg) {
@@ -42,5 +40,5 @@ module.exports = {
   logOk: log(Colors.FgCyan),
   logError: log(Colors.FgRed),
   logProgress: log(Colors.FgBlue),
-  logStep: log(Colors.FgMagenta),
-}
+  logStep: log(Colors.FgMagenta)
+};
diff --git a/src/components/src/common/animation-control/animation-controller.ts b/src/components/src/common/animation-control/animation-controller.ts
@@ -3,8 +3,6 @@
 
 import React, {Component} from 'react';
 import {bisectLeft} from 'd3-array';
-import {requestAnimationFrame, cancelAnimationFrame} from 'global/window';
-import Console from 'global/console';
 import {BASE_SPEED, FPS, ANIMATION_WINDOW} from '@kepler.gl/constants';
 import {Timeline} from '@kepler.gl/types';
 
@@ -84,7 +82,7 @@ function AnimationControllerFactory(): typeof AnimationControllerType {
       }
     }
 
-    _timer = null;
+    _timer: null | number = null;
     _startTime = 0;
 
     _startOrPauseAnimation() {
@@ -160,7 +158,7 @@ function AnimationControllerFactory(): typeof AnimationControllerType {
           // 30*600
           const {steps} = this.props;
           if (!Array.isArray(steps) || !steps.length) {
-            Console.warn('animation steps should be an array');
+            console.warn('animation steps should be an array');
             return;
           }
           // when speed = 1, animation should loop through 600 frames at 60 FPS

diff --git a/src/components/src/common/data-table/cell-size.ts b/src/components/src/common/data-table/cell-size.ts
@@ -1,7 +1,6 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
-import document from 'global/document';
 import {DataContainerInterface, parseFieldValue} from '@kepler.gl/utils';
 
 const MIN_GHOST_CELL_SIZE = 200;
@@ -60,7 +59,7 @@ export function renderedSize({
 
   const textCanvas = document.createElement('canvas');
   document.body.appendChild(textCanvas);
-  const context = textCanvas.getContext('2d');
+  const context = textCanvas.getContext('2d')!;
   context.font = [fontSize, font].join('px ');
 
   let rowsToSample = [...Array(numRowsToCalculate)].map(() =>
@@ -95,7 +94,7 @@ export function renderedSize({
   const clampedHeaderWidth = clamp(minHeaderWidth, maxHeaderSize, headerWidth);
 
   // cleanup
-  textCanvas.parentElement.removeChild(textCanvas);
+  textCanvas.parentElement!.removeChild(textCanvas);
 
   return {
     row: clampedRowWidth,

diff --git a/src/components/src/common/error-boundary.tsx b/src/components/src/common/error-boundary.tsx
@@ -2,7 +2,6 @@
 // Copyright contributors to the kepler.gl project
 
 import React, {ErrorInfo} from 'react';
-import console from 'global/console';
 
 interface ErrorBoundaryProps {
   children?: React.ReactNode;

diff --git a/src/components/src/common/file-uploader/file-drop.tsx b/src/components/src/common/file-uploader/file-drop.tsx
@@ -6,7 +6,6 @@
  * For React 16.8 compatibility
  */
 import React, {ReactNode} from 'react';
-import window from 'global/window';
 
 export type FileDropProps = {
   dropEffect?: 'copy' | 'move' | 'link' | 'none';
@@ -29,10 +28,8 @@ export type FileDropProps = {
 /** @augments React.PureComponent<FileDropProps> */
 class FileDrop extends React.PureComponent<FileDropProps> {
   static isIE = () =>
-    window &&
-    window.navigator &&
-    ((window.navigator.userAgent || []).includes('MSIE') ||
-      (window.navigator.appVersion || []).includes('Trident/'));
+    window?.navigator?.userAgent?.includes('MSIE') ||
+    window?.navigator?.appVersion?.includes('Trident/');
 
   static eventHasFiles = event => {
     // In most browsers this is an array, but in IE11 it's an Object :(