diff --git a/bindings/kepler.gl-jupyter/js/lib/keplergl/kepler.gl.js b/bindings/kepler.gl-jupyter/js/lib/keplergl/kepler.gl.js index b80865d22f..9ac31aeccd 100644 --- 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 index de3e3393e4..04be8ab5d9 100644 --- a/bindings/kepler.gl-jupyter/js/lib/keplergl/main.js +++ b/bindings/kepler.gl-jupyter/js/lib/keplergl/main.js @@ -4,8 +4,6 @@ // 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() { @@ -13,10 +11,7 @@ const map = (function initKeplerGl() { 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 index 413c3cddb0..148cf5f368 100644 --- 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 index 150f782691..41cab8c515 100644 --- 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 index 817187bad1..2c748e80c6 100644 --- a/examples/custom-map-style/src/main.tsx +++ b/examples/custom-map-style/src/main.tsx @@ -3,10 +3,9 @@ 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 = () => ( @@ -14,6 +13,6 @@ const Root = () => ( ); -const root = ReactDOM.createRoot(document.getElementById('root')); +const root = ReactDOM.createRoot(document.getElementById('root')!); root.render(); diff --git a/examples/custom-reducer/src/main.js b/examples/custom-reducer/src/main.js index e18e32fadf..3f9777af59 100644 --- 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 index 36f0272262..394ceb3cc4 100644 --- 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 index 05ca7fb0a5..a20caf4bfa 100644 --- 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 index e18e32fadf..3f9777af59 100644 --- 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 index 3498011c9d..65d1e31935 100644 --- 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 index 6c6406efd8..539a585338 100644 --- 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 index 36c67222dc..8402716e2b 100644 --- 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 index 9fbe86cc21..1a22e41a71 100644 --- 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 index 8db5611658..86f1f8b735 100644 --- 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 index 566babd53f..942066d1ca 100644 --- 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 index 0bff99757f..a7bbdff693 100644 --- 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 index e18e32fadf..3f9777af59 100644 --- 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 index e18e32fadf..3f9777af59 100644 --- 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 index 00ba0a28bd..a0608c3d7b 100644 --- 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 index e18e32fadf..3f9777af59 100644 --- 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 index 165ff2e389..4e492f0ce8 100644 --- 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 index 915e083944..3416ee0f68 100644 --- 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 \ No newline at end of file +export default LicenseFixer diff --git a/scripts/log.js b/scripts/log.js index 000ff633dd..b6a0f79be6 100644 --- 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 index f56fe8d4d6..8de5e20175 100644 --- 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 index 90b0faf0fb..8dd60a2a58 100644 --- 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 index 3b4ae20bff..d44c76b1ab 100644 --- 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 index 7dd8950c07..e2882e8e12 100644 --- 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 */ class FileDrop extends React.PureComponent { 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 :( diff --git a/src/components/src/common/item-selector/typeahead.tsx b/src/components/src/common/item-selector/typeahead.tsx index 9192f1bc0e..54b87a0479 100644 --- a/src/components/src/common/item-selector/typeahead.tsx +++ b/src/components/src/common/item-selector/typeahead.tsx @@ -6,7 +6,6 @@ import {polyfill} from 'react-lifecycles-compat'; import fuzzy from 'fuzzy'; import classNames from 'classnames'; import styled from 'styled-components'; -import {console as Console} from 'global/window'; import Accessor from './accessor'; import DropdownList, {ListItem} from './dropdown-list'; @@ -64,7 +63,7 @@ function generateSearchFunction(props: TypeaheadProps) { const {searchOptions, filterOption} = props; if (typeof searchOptions === 'function') { if (filterOption !== null) { - Console.warn('searchOptions prop is being used, filterOption prop will be ignored'); + console.warn('searchOptions prop is being used, filterOption prop will be ignored'); } return searchOptions; } else if (typeof filterOption === 'function') { diff --git a/src/components/src/common/portaled.tsx b/src/components/src/common/portaled.tsx index 05e5acb444..e74d05607e 100644 --- a/src/components/src/common/portaled.tsx +++ b/src/components/src/common/portaled.tsx @@ -9,7 +9,6 @@ import {canUseDOM} from 'exenv'; import {withTheme} from 'styled-components'; import {RootContext} from '../context'; import Modal from 'react-modal'; -import window from 'global/window'; import {theme} from '@kepler.gl/styles'; const listeners = {}; diff --git a/src/components/src/common/slider/mouse-event.ts b/src/components/src/common/slider/mouse-event.ts index 1cc89a9c4f..015a27d2cf 100644 --- a/src/components/src/common/slider/mouse-event.ts +++ b/src/components/src/common/slider/mouse-event.ts @@ -1,13 +1,12 @@ // SPDX-License-Identifier: MIT // Copyright contributors to the kepler.gl project -import document from 'global/document'; import { RefObject, - TouchEvent, + TouchEvent as ReactTouchEvent, TouchEventHandler, MouseEventHandler as ReactMouseEventHandler, - MouseEvent + MouseEvent as ReactMouseEvent } from 'react'; import {StyleRangeSliderType} from './slider'; @@ -44,7 +43,7 @@ export default class MouseEventHandler { this.setAnchor = setAnchor; } - handleMouseDown: ReactMouseEventHandler = (e: MouseEvent) => { + handleMouseDown: ReactMouseEventHandler = (e: ReactMouseEvent) => { document.addEventListener('mouseup', this.mouseup); document.addEventListener('mousemove', this.mousemove); if (this.setAnchor) { @@ -54,11 +53,11 @@ export default class MouseEventHandler { this.toggleMouseOver(); }; - private getMousePos(e: MouseEvent) { + private getMousePos(e: ReactMouseEvent | MouseEvent) { return this.vertical ? e.clientY : e.clientX; } - private getTouchPosition(e: TouchEvent) { + private getTouchPosition(e: ReactTouchEvent | TouchEvent) { return this.vertical ? e.touches[0].clientY : e.touches[0].clientX; } @@ -82,7 +81,7 @@ export default class MouseEventHandler { this.valueListener(this.getDistanceToTrack(pos)); }; - handleTouchStart: TouchEventHandler = (e: TouchEvent) => { + handleTouchStart: TouchEventHandler = (e: ReactTouchEvent) => { // TODO: fix touch event document.addEventListener('touchend', this.touchend); document.addEventListener('touchmove', this.touchmove); diff --git a/src/components/src/container.tsx b/src/components/src/container.tsx index b5bcba03c3..db8e2177a4 100644 --- a/src/components/src/container.tsx +++ b/src/components/src/container.tsx @@ -4,7 +4,6 @@ import React, {Component, ComponentType, Dispatch} from 'react'; import {connect, ConnectedProps} from 'react-redux'; import memoize from 'lodash.memoize'; -import {console as Console} from 'global/window'; import {injector, provideRecipesToInjector, flattenDeps} from './injector'; import KeplerGlFactory from './kepler-gl'; @@ -121,7 +120,7 @@ export function ContainerFactory( getSelector = memoize((id, getState) => state => { if (!getState(state)) { // log error - Console.error(ERROR_MSG.noState); + console.error(ERROR_MSG.noState); return null; } diff --git a/src/components/src/dnd-context.tsx b/src/components/src/dnd-context.tsx index 59cae3cf4f..f002074bd4 100644 --- a/src/components/src/dnd-context.tsx +++ b/src/components/src/dnd-context.tsx @@ -4,7 +4,6 @@ import React, {useCallback, useMemo, PropsWithChildren} from 'react'; import styled from 'styled-components'; import {DndContext as DndKitContext, DragOverlay} from '@dnd-kit/core'; -import Console from 'global/console'; import { DND_EMPTY_MODIFIERS, @@ -94,7 +93,7 @@ function DndContextFactory( onEffectDragStart(event); break; default: - Console.log(`activeType ${activeType} unknown`); + console.log(`activeType ${activeType} unknown`); } }, [onLayerDragStart, onEffectDragStart] @@ -111,7 +110,7 @@ function DndContextFactory( onEffectDragEnd(event); break; default: - Console.log(`activeType ${activeType} unknown`); + console.log(`activeType ${activeType} unknown`); } }, [onLayerDragEnd, onEffectDragEnd] diff --git a/src/components/src/editor/editor.tsx b/src/components/src/editor/editor.tsx index e1a35b2333..4c774683eb 100644 --- a/src/components/src/editor/editor.tsx +++ b/src/components/src/editor/editor.tsx @@ -1,10 +1,9 @@ // SPDX-License-Identifier: MIT // Copyright contributors to the kepler.gl project -import React, {Component, CSSProperties, KeyboardEvent} from 'react'; +import React, {Component, CSSProperties} from 'react'; import {createPortal} from 'react-dom'; import styled from 'styled-components'; -import window from 'global/window'; import classnames from 'classnames'; import get from 'lodash.get'; import {createSelector} from 'reselect'; diff --git a/src/components/src/injector.tsx b/src/components/src/injector.tsx index a4f1e05f50..ddd31529e1 100644 --- a/src/components/src/injector.tsx +++ b/src/components/src/injector.tsx @@ -9,7 +9,6 @@ import { MapDispatchToPropsParam, InferableComponentEnhancerWithProps } from 'react-redux'; -import {console as Console} from 'global/window'; import KeplerGlContext from './context'; export type FactoryElement = (...args) => React.ComponentType; @@ -42,7 +41,7 @@ export function injector(map = new Map()): InjectorType { const factory = map.get(fac); // factory is not injected if (!factory) { - Console.error(ERROR_MSG.noDep(fac, parent)); + console.error(ERROR_MSG.noDep(fac, parent)); return MissingComp; } @@ -89,7 +88,7 @@ export function provideRecipesToInjector(recipes: [Factory, Factory][], appInjec const customDependencies = flattenDeps([], recipe[1]); inj = customDependencies.reduce((ij, factory) => { if (provided.get(factory)) { - Console.warn( + console.warn( `${factory.name} already injected from ${provided.get(factory).name}, injecting ${ recipe[0].name } after ${provided.get(factory).name} will override it` @@ -112,19 +111,19 @@ export function provideRecipesToInjector(recipes: [Factory, Factory][], appInjec export function typeCheckRecipe(recipe) { if (!Array.isArray(recipe) || recipe.length < 2) { - Console.error('Error injecting [factory, replacement]', recipe); - Console.error(ERROR_MSG.wrongRecipeType); + console.error('Error injecting [factory, replacement]', recipe); + console.error(ERROR_MSG.wrongRecipeType); return false; } const [factory, replacement] = recipe; if (typeof factory !== 'function') { - Console.error('Error injecting factory: ', factory); - Console.error(ERROR_MSG.notFunc); + console.error('Error injecting factory: ', factory); + console.error(ERROR_MSG.notFunc); return false; } else if (typeof replacement !== 'function') { - Console.error('Error injecting replacement for: ', factory); - Console.error(ERROR_MSG.notFunc); + console.error('Error injecting replacement for: ', factory); + console.error(ERROR_MSG.notFunc); return false; } diff --git a/src/components/src/kepler-gl.tsx b/src/components/src/kepler-gl.tsx index e4f97b5474..31174b6897 100644 --- a/src/components/src/kepler-gl.tsx +++ b/src/components/src/kepler-gl.tsx @@ -2,7 +2,6 @@ // Copyright contributors to the kepler.gl project import React, {Component, createRef, Dispatch} from 'react'; -import Console from 'global/console'; import {bindActionCreators} from 'redux'; import styled, {ThemeProvider, withTheme} from 'styled-components'; import {createSelector} from 'reselect'; @@ -429,7 +428,7 @@ function KeplerGlFactory( _validateMapboxToken() { const {mapboxApiAccessToken} = this.props; if (!validateToken(mapboxApiAccessToken)) { - Console.warn(MISSING_MAPBOX_TOKEN); + console.warn(MISSING_MAPBOX_TOKEN); } } diff --git a/src/components/src/modal-container.tsx b/src/components/src/modal-container.tsx index ac80c4e3b0..34746e6f52 100644 --- a/src/components/src/modal-container.tsx +++ b/src/components/src/modal-container.tsx @@ -4,7 +4,6 @@ import React, {Component} from 'react'; import {css} from 'styled-components'; import get from 'lodash.get'; -import document from 'global/document'; import ModalDialogFactory from './modals/modal-dialog'; import {exportHtml, exportMap, exportJson, exportImage} from '@kepler.gl/utils'; diff --git a/src/constants/src/keyevent.ts b/src/constants/src/keyevent.ts index 4a63154a83..8e95918a21 100644 --- a/src/constants/src/keyevent.ts +++ b/src/constants/src/keyevent.ts @@ -1,10 +1,7 @@ // SPDX-License-Identifier: MIT // Copyright contributors to the kepler.gl project -import window from 'global/window'; -/* eslint-disable no-use-before-define */ -const KeyEvent = Object.assign({}, window.KeyEvent); -/* eslint-enable no-use-before-define */ +const KeyEvent = Object.assign({}, (window as any).KeyEvent); // Firefox only // event event.keyCode is deprecated, should use event.key in the future KeyEvent.DOM_VK_UP = KeyEvent.DOM_VK_UP || 38; diff --git a/src/deckgl-layers/src/layer-utils/cpu-aggregator.ts b/src/deckgl-layers/src/layer-utils/cpu-aggregator.ts index a48b642c38..4c60694414 100644 --- a/src/deckgl-layers/src/layer-utils/cpu-aggregator.ts +++ b/src/deckgl-layers/src/layer-utils/cpu-aggregator.ts @@ -3,7 +3,6 @@ /* eslint-disable guard-for-in */ import {AGGREGATION_OPERATION, _BinSorter as BinSorter} from '@deck.gl/aggregation-layers'; -import {console as Console} from 'global/window'; import {aggregate} from '@kepler.gl/utils'; import {AGGREGATION_TYPES, SCALE_FUNC} from '@kepler.gl/constants'; @@ -68,7 +67,7 @@ export const DECK_AGGREGATION_MAP = { export function getValueFunc(aggregation, accessor) { if (!aggregation || !AGGREGATION_OPERATION[aggregation.toUpperCase()]) { - Console.warn(`Aggregation ${aggregation} is not supported`); + console.warn(`Aggregation ${aggregation} is not supported`); } const op = AGGREGATION_OPERATION[aggregation.toUpperCase()] || AGGREGATION_OPERATION.SUM; @@ -79,7 +78,7 @@ export function getValueFunc(aggregation, accessor) { export function getScaleFunctor(scaleType) { if (!scaleType || !SCALE_FUNC[scaleType]) { - Console.warn(`Scale ${scaleType} is not supported`); + console.warn(`Scale ${scaleType} is not supported`); } return SCALE_FUNC[scaleType] || SCALE_FUNC.quantize; } diff --git a/src/deckgl-layers/src/layer-utils/shader-utils.ts b/src/deckgl-layers/src/layer-utils/shader-utils.ts index 5032a11c3e..c6a433cc73 100644 --- a/src/deckgl-layers/src/layer-utils/shader-utils.ts +++ b/src/deckgl-layers/src/layer-utils/shader-utils.ts @@ -1,8 +1,6 @@ // SPDX-License-Identifier: MIT // Copyright contributors to the kepler.gl project -import {console as Console} from 'global/window'; - /* * Amendment to default layer vertex shader * @param {string} vs @@ -14,9 +12,9 @@ import {console as Console} from 'global/window'; */ export function editShader(vs: string, type: string, originalText: string, testToReplace: string) { if (!vs.includes(originalText)) { - // Here we call Console.error when we fail to edit deck.gl shader + // Here we call console.error when we fail to edit deck.gl shader // This should be caught by layer test - Console.error(`Cannot edit ${type} layer shader`); + console.error(`Cannot edit ${type} layer shader`); return vs; } diff --git a/src/effects/src/custom-deck-lighting-effect.ts b/src/effects/src/custom-deck-lighting-effect.ts index 21a190089e..91af0b363e 100644 --- a/src/effects/src/custom-deck-lighting-effect.ts +++ b/src/effects/src/custom-deck-lighting-effect.ts @@ -3,7 +3,6 @@ // @ts-nocheck This is a hack, don't check types -import {console as Console} from 'global/window'; import {LightingEffect, shadow} from '@deck.gl/core'; import {Texture2D, ProgramManager} from '@luma.gl/core'; @@ -18,7 +17,7 @@ import {Texture2D, ProgramManager} from '@luma.gl/core'; export function insertBefore(vs, type, insertBeforeText, textToInsert) { const at = vs.indexOf(insertBeforeText); if (at < 0) { - Console.error(`Cannot edit ${type} layer shader`); + console.error(`Cannot edit ${type} layer shader`); return vs; } diff --git a/src/layers/src/base-layer.ts b/src/layers/src/base-layer.ts index 52a8a1c363..11740e1bc2 100644 --- a/src/layers/src/base-layer.ts +++ b/src/layers/src/base-layer.ts @@ -2,7 +2,6 @@ // Copyright contributors to the kepler.gl project import React from 'react'; -import {console as Console} from 'global/window'; import keymirror from 'keymirror'; import {DataFilterExtension} from '@deck.gl/extensions'; import {COORDINATE_SYSTEM} from '@deck.gl/core'; @@ -974,7 +973,7 @@ class Layer { } if (!attributeAccessors[accessor]) { - Console.warn(`Failed to provide accessor function for ${accessor || channel}`); + console.warn(`Failed to provide accessor function for ${accessor || channel}`); } } }); diff --git a/src/layers/src/hexagon-layer/hexagon-utils.ts b/src/layers/src/hexagon-layer/hexagon-utils.ts index 522ca782ba..a0f0b49a77 100644 --- a/src/layers/src/hexagon-layer/hexagon-utils.ts +++ b/src/layers/src/hexagon-layer/hexagon-utils.ts @@ -2,7 +2,6 @@ // Copyright contributors to the kepler.gl project import {WebMercatorViewport} from '@deck.gl/core'; -import Console from 'global/console'; import {Centroid} from '@kepler.gl/utils'; export function hexagonToPolygonGeo(object, properties, radius, mapState) { @@ -15,7 +14,7 @@ export function hexagonToPolygonGeo(object, properties, radius, mapState) { const {unitsPerMeter} = viewport.getDistanceScales(object.position); if (!Array.isArray(unitsPerMeter)) { - Console.warn(`unitsPerMeter is undefined`); + console.warn(`unitsPerMeter is undefined`); return null; } diff --git a/src/layers/src/icon-layer/icon-layer.ts b/src/layers/src/icon-layer/icon-layer.ts index 56dc080d3f..7d66b7c249 100644 --- a/src/layers/src/icon-layer/icon-layer.ts +++ b/src/layers/src/icon-layer/icon-layer.ts @@ -1,7 +1,6 @@ // SPDX-License-Identifier: MIT // Copyright contributors to the kepler.gl project -import window from 'global/window'; import {BrushingExtension} from '@deck.gl/extensions'; import GL from '@luma.gl/constants'; @@ -194,7 +193,7 @@ export default class IconLayer extends Layer { } getSvgIcons() { - const fetchConfig = { + const fetchConfig: RequestInit = { method: 'GET', mode: 'cors', cache: 'no-cache' diff --git a/src/reducers/src/composer-helpers.ts b/src/reducers/src/composer-helpers.ts index 6021c569c0..d44450f831 100644 --- a/src/reducers/src/composer-helpers.ts +++ b/src/reducers/src/composer-helpers.ts @@ -1,13 +1,11 @@ // SPDX-License-Identifier: MIT // Copyright contributors to the kepler.gl project -import Console from 'global/console'; - const identity = state => state; /** Returns a function that logs a value with a given message */ export function log(text: string): (value: any) => void { - return value => Console.log(text, value); + return value => console.log(text, value); } /** Wraps a value in an object and stores it the `payload` field */ export function payload_

(payload: P) { diff --git a/src/reducers/src/export-utils.ts b/src/reducers/src/export-utils.ts index dc51c750e0..9cf8172d35 100644 --- a/src/reducers/src/export-utils.ts +++ b/src/reducers/src/export-utils.ts @@ -1,7 +1,6 @@ // SPDX-License-Identifier: MIT // Copyright contributors to the kepler.gl project -import {Blob} from 'global/window'; import {csvFormatRows} from 'd3-dsv'; import {EXPORT_DATA_TYPE} from '@kepler.gl/constants'; diff --git a/src/reducers/src/map-style-updaters.ts b/src/reducers/src/map-style-updaters.ts index 3850e3e097..b801ed4179 100644 --- a/src/reducers/src/map-style-updaters.ts +++ b/src/reducers/src/map-style-updaters.ts @@ -3,7 +3,6 @@ import Task, {withTask} from 'react-palm/tasks'; import cloneDeep from 'lodash.clonedeep'; -import Console from 'global/console'; // Utils import { @@ -532,7 +531,7 @@ export const loadMapStyleErrUpdater = ( state: MapStyle, {payload: {ids, error}}: MapStyleActions.LoadMapStyleErrUpdaterAction ): MapStyle => { - Console.error(error); + console.error(error); // reset isLoading const isLoading = Object.keys(state.isLoading).reduce( (accu, key) => ({ diff --git a/src/reducers/src/provider-state-updaters.ts b/src/reducers/src/provider-state-updaters.ts index a48e5257a7..108ce383ed 100644 --- a/src/reducers/src/provider-state-updaters.ts +++ b/src/reducers/src/provider-state-updaters.ts @@ -2,7 +2,6 @@ // Copyright contributors to the kepler.gl project import {withTask} from 'react-palm/tasks'; -import Console from 'global/console'; import {generateHashId, getError, isPlainObject, toArray} from '@kepler.gl/utils'; import { EXPORT_FILE_TO_CLOUD_TASK, @@ -70,12 +69,12 @@ function createActionTask(action, payload) { function _validateProvider(provider, method) { if (!provider) { - Console.error(`provider is not defined`); + console.error(`provider is not defined`); return false; } if (typeof provider[method] !== 'function') { - Console.error(`${method} is not a function of Cloud provider: ${provider.name}`); + console.error(`${method} is not a function of Cloud provider: ${provider.name}`); return false; } @@ -211,7 +210,7 @@ export const loadCloudMapUpdater = ( ): ProviderState => { const {loadParams, provider, onSuccess, onError} = action.payload; if (!loadParams) { - Console.warn('load map error: loadParams is undefined'); + console.warn('load map error: loadParams is undefined'); return state; } if (!_validateProvider(provider, 'downloadMap')) { @@ -258,7 +257,7 @@ function checkLoadMapResponseError(response) { function getDatasetHandler(format) { const defaultHandler = DATASET_HANDLERS[DATASET_FORMATS.csv]; if (!format) { - Console.warn('format is not provided in load map response, will use csv by default'); + console.warn('format is not provided in load map response, will use csv by default'); return defaultHandler; } @@ -266,7 +265,7 @@ function getDatasetHandler(format) { const supportedFormat = Object.keys(DATASET_FORMATS) .map(k => `'${k}'`) .join(', '); - Console.warn( + console.warn( `unknown format ${format}. Please use one of ${supportedFormat}, will use csv by default` ); return defaultHandler; @@ -340,7 +339,7 @@ export const loadCloudMapErrorUpdater = ( ): ProviderState => { const message = getError(action.payload.error) || `Error loading saved map`; - Console.warn(message); + console.warn(message); const newState = { ...state, diff --git a/src/reducers/src/vis-state-updaters.ts b/src/reducers/src/vis-state-updaters.ts index b5d18856e1..fc65b8e32a 100644 --- a/src/reducers/src/vis-state-updaters.ts +++ b/src/reducers/src/vis-state-updaters.ts @@ -2,7 +2,6 @@ // Copyright contributors to the kepler.gl project import bbox from '@turf/bbox'; -import {console as Console} from 'global/window'; import {disableStackCapturing, withTask} from 'react-palm/tasks'; import cloneDeep from 'lodash.clonedeep'; import uniq from 'lodash.uniq'; @@ -730,7 +729,7 @@ export function layerTypeChangeUpdater( const idx = state.layers.findIndex(l => l.id === oldId); if (!state.layerClasses[newType]) { - Console.error(`${newType} is not a valid layer type`); + console.error(`${newType} is not a valid layer type`); return state; } let newLayer = new state.layerClasses[newType]({ @@ -897,7 +896,7 @@ export function setFilterUpdater( const oldFilter = state.filters[idx]; if (!oldFilter) { - Console.error(`filters.${idx} is undefined`); + console.error(`filters.${idx} is undefined`); return state; } let newFilter = set([prop], value, oldFilter); @@ -1287,7 +1286,7 @@ export const addLayerUpdater = ( if (action.config) { newLayer = createLayerFromConfig(state, action.config); if (!newLayer) { - Console.warn( + console.warn( 'Failed to create layer from config, it usually means the config is not be in correct format', action.config ); @@ -1339,7 +1338,7 @@ export function removeLayerUpdater( : state.layers.findIndex(l => l.id === id); if (idx < 0 || idx >= state.layers.length) { // invalid index - Console.warn(`can not remove layer with invalid id|idx ${id}`); + console.warn(`can not remove layer with invalid id|idx ${id}`); return state; } @@ -1386,7 +1385,7 @@ export const duplicateLayerUpdater = ( Number(id) : state.layers.findIndex(l => l.id === id); if (idx < 0 || !state.layers[idx]) { - Console.warn(`layer ${idx} not found in layerOrder`); + console.warn(`layer ${idx} not found in layerOrder`); return state; } @@ -1462,7 +1461,7 @@ export const removeEffectUpdater = ( ): VisState => { const idx = state.effects.findIndex(l => l.id === id); if (idx < 0 || idx >= state.effects.length) { - Console.warn(`can not remove effect with invalid id ${id}`); + console.warn(`can not remove effect with invalid id ${id}`); return state; } @@ -1500,7 +1499,7 @@ export const updateEffectUpdater = ( ): VisState => { const idx = state.effects.findIndex(l => l.id === id); if (idx < 0 || idx >= state.effects.length) { - Console.warn(`can not update effect with invalid id ${id}`); + console.warn(`can not update effect with invalid id ${id}`); return state; } @@ -1508,7 +1507,7 @@ export const updateEffectUpdater = ( if (props.id !== undefined && props.id !== id) { const idx2 = state.effects.findIndex(l => l.id === props.id); if (idx2 >= 0) { - Console.warn(`can not update effect with existing effect id ${id}`); + console.warn(`can not update effect with existing effect id ${id}`); return state; } @@ -2316,7 +2315,7 @@ export const loadFilesErrUpdater = ( {error, fileName}: VisStateActions.LoadFilesErrUpdaterAction ): VisState => { // update ui with error message - Console.warn(error); + console.warn(error); if (!state.fileLoading) { return state; } @@ -2830,11 +2829,11 @@ export function setFilterAnimationTimeConfigUpdater( ): VisState { const oldFilter = state.filters[idx]; if (!oldFilter) { - Console.error(`filters.${idx} is undefined`); + console.error(`filters.${idx} is undefined`); return state; } if (oldFilter.type !== FILTER_TYPES.timeRange) { - Console.error( + console.error( `setFilterAnimationTimeConfig can only be called to update a time filter. check filter.type === 'timeRange'` ); return state; @@ -2849,7 +2848,7 @@ function checkTimeConfigArgs(config) { const allowed = ['timeFormat', 'timezone']; return Object.keys(config).reduce((accu, prop) => { if (!allowed.includes(prop)) { - Console.error( + console.error( `setLayerAnimationTimeConfig takes timeFormat and/or timezone as options, found ${prop}` ); return accu; diff --git a/src/schemas/src/dataset-schema.ts b/src/schemas/src/dataset-schema.ts index b1725b5e82..0046937612 100644 --- a/src/schemas/src/dataset-schema.ts +++ b/src/schemas/src/dataset-schema.ts @@ -2,7 +2,6 @@ // Copyright contributors to the kepler.gl project import pick from 'lodash.pick'; -import {console as globalConsole} from 'global/window'; import {ProtoDataset, RGBColor} from '@kepler.gl/types'; import {KeplerTable} from '@kepler.gl/table'; @@ -136,7 +135,7 @@ export class DatasetSchema extends Schema { if (fields[i].type !== f.type) { // if newly detected field type is different from saved type // we log it but won't update it, cause we don't want to break people's map - globalConsole.warn(`detect ${f.name} type is now ${f.type} instead of ${fields[i].type}`); + console.warn(`detect ${f.name} type is now ${f.type} instead of ${fields[i].type}`); } }); } diff --git a/src/schemas/src/schema-manager.ts b/src/schemas/src/schema-manager.ts index 4260a282fe..86baf34f3a 100644 --- a/src/schemas/src/schema-manager.ts +++ b/src/schemas/src/schema-manager.ts @@ -1,8 +1,6 @@ // SPDX-License-Identifier: MIT // Copyright contributors to the kepler.gl project -import {console as Console} from 'global/window'; - import {Datasets} from '@kepler.gl/table'; import datasetSchema from './dataset-schema'; import mapStyleSchema from './map-style-schema'; @@ -262,12 +260,12 @@ export class KeplerGLSchema { */ validateVersion(version: any): string | null { if (!version) { - Console.error('There is no version number associated with this saved map'); + console.error('There is no version number associated with this saved map'); return null; } if (!this._validVersions[version]) { - Console.error(`${version} is not a valid version`); + console.error(`${version} is not a valid version`); return null; } diff --git a/src/schemas/src/schema.ts b/src/schemas/src/schema.ts index d9b8e33e4c..4dbbb95708 100644 --- a/src/schemas/src/schema.ts +++ b/src/schemas/src/schema.ts @@ -1,8 +1,6 @@ // SPDX-License-Identifier: MIT // Copyright contributors to the kepler.gl project -import {console as Console} from 'global/window'; - import {CURRENT_VERSION} from './versions'; export default class Schema { @@ -82,7 +80,7 @@ export default class Schema { outdatedVersionError() { if (!this._isCurrentVersion()) { - Console.error(`${this.key} ${this.version} is outdated. save should not be called anymore`); + console.error(`${this.key} ${this.version} is outdated. save should not be called anymore`); } } diff --git a/src/table/src/kepler-table.ts b/src/table/src/kepler-table.ts index aacc48ac51..00b885a38c 100644 --- a/src/table/src/kepler-table.ts +++ b/src/table/src/kepler-table.ts @@ -1,7 +1,6 @@ // SPDX-License-Identifier: MIT // Copyright contributors to the kepler.gl project -import {console as Console} from 'global/console'; import {ascending, descending} from 'd3-array'; import { @@ -426,7 +425,7 @@ class KeplerTable { const {dataContainer, filteredIndexForDomain} = this; if (!SCALE_TYPES[scaleType]) { - Console.error(`scale type ${scaleType} not supported`); + console.error(`scale type ${scaleType} not supported`); return null; } @@ -475,7 +474,7 @@ class KeplerTable { */ _assetField(fieldName: string, condition: any): void { if (!condition) { - Console.error(`${fieldName} doesnt exist in dataset ${this.id}`); + console.error(`${fieldName} doesnt exist in dataset ${this.id}`); } } } diff --git a/src/utils/src/arrow-data-container.ts b/src/utils/src/arrow-data-container.ts index 5b5330b008..2fbca6dbbd 100644 --- a/src/utils/src/arrow-data-container.ts +++ b/src/utils/src/arrow-data-container.ts @@ -2,7 +2,6 @@ // Copyright contributors to the kepler.gl project import * as arrow from 'apache-arrow'; -import {console as globalConsole} from 'global/window'; import {DATA_TYPES as AnalyzerDATA_TYPES} from 'type-analyzer'; import {Field} from '@kepler.gl/types'; import {ALL_FIELD_TYPES} from '@kepler.gl/constants'; @@ -227,7 +226,7 @@ export function arrowDataTypeToFieldType(arrowType: arrow.DataType): string { ) { return ALL_FIELD_TYPES.object; } - globalConsole.warn(`Unsupported arrow type: ${arrowType}`); + console.warn(`Unsupported arrow type: ${arrowType}`); return ALL_FIELD_TYPES.string; } @@ -263,6 +262,6 @@ export function arrowDataTypeToAnalyzerDataType( ) { return AnalyzerDATA_TYPES.OBJECT; } - globalConsole.warn(`Unsupported arrow type: ${arrowType}`); + console.warn(`Unsupported arrow type: ${arrowType}`); return AnalyzerDATA_TYPES.STRING; } diff --git a/src/utils/src/data-utils.ts b/src/utils/src/data-utils.ts index 5966bbb663..ab4fb26329 100644 --- a/src/utils/src/data-utils.ts +++ b/src/utils/src/data-utils.ts @@ -423,11 +423,7 @@ export function datetimeFormatter( timezone?: string | null ): (format?: string) => (ts: number) => string { return timezone - ? format => ts => - moment - .utc(ts) - .tz(timezone) - .format(format) + ? format => ts => moment.utc(ts).tz(timezone).format(format) : // return empty string instead of 'Invalid date' if ts is undefined/null - format => ts => (ts ? moment.utc(ts).format(format) : ''); + format => ts => ts ? moment.utc(ts).format(format) : ''; } diff --git a/src/utils/src/dataset-utils.ts b/src/utils/src/dataset-utils.ts index b93663b662..4a08fa15a9 100644 --- a/src/utils/src/dataset-utils.ts +++ b/src/utils/src/dataset-utils.ts @@ -1,7 +1,6 @@ // SPDX-License-Identifier: MIT // Copyright contributors to the kepler.gl project -import {console as globalConsole} from 'global/window'; import { ALL_FIELD_TYPES, FIELD_OPTS, @@ -566,7 +565,7 @@ export function analyzerTypeToFieldType(aType: string): string { case ZIPCODE: return ALL_FIELD_TYPES.string; default: - globalConsole.warn(`Unsupported analyzer type: ${aType}`); + console.warn(`Unsupported analyzer type: ${aType}`); return ALL_FIELD_TYPES.string; } } diff --git a/src/utils/src/dom-to-image.ts b/src/utils/src/dom-to-image.ts index 0c723331f1..9782f129fe 100644 --- a/src/utils/src/dom-to-image.ts +++ b/src/utils/src/dom-to-image.ts @@ -6,9 +6,6 @@ * Modified by heshan0131 to allow loading external stylesheets and inline webfonts */ -import window from 'global/window'; -import document from 'global/document'; -import Console from 'global/console'; import svgToMiniDataURI from 'mini-svg-data-uri'; import {IMAGE_EXPORT_ERRORS} from '@kepler.gl/constants'; @@ -111,7 +108,7 @@ function toSvg(node, options) { * */ function toPixelData(node, options) { return draw(node, options || {}).then( - canvas => canvas.getContext('2d').getImageData(0, 0, getWidth(node), getHeight(node)).data + canvas => canvas.getContext('2d')!.getImageData(0, 0, getWidth(node), getHeight(node)).data ); } @@ -164,17 +161,17 @@ function draw(domNode, options) { .then(delay(100)) .then(image => { const canvas = newCanvas(domNode); - canvas.getContext('2d').drawImage(image, 0, 0); + canvas.getContext('2d')!.drawImage(image, 0, 0); return canvas; }); function newCanvas(dNode) { - const canvas = document.createElement('canvas'); + const canvas: HTMLCanvasElement = document.createElement('canvas'); canvas.width = options.width || getWidth(dNode); canvas.height = options.height || getHeight(dNode); if (options.bgcolor) { - const ctx = canvas.getContext('2d'); + const ctx = canvas.getContext('2d')!; ctx.fillStyle = options.bgcolor; ctx.fillRect(0, 0, canvas.width, canvas.height); } @@ -354,8 +351,8 @@ function newFontFaces() { // Handle any error that occurred in any of the previous // promises in the chain. stylesheet failed to load should not stop // the process, hence result in only a warning, instead of reject - Console.warn(IMAGE_EXPORT_ERRORS.styleSheet, sheet.href); - Console.log(err); + console.warn(IMAGE_EXPORT_ERRORS.styleSheet, sheet.href); + console.log(err); return; }); } @@ -375,7 +372,7 @@ function newFontFaces() { try { rules = sheet.rules || sheet.cssRules; } catch (e) { - Console.log(`'Can't read the css rules of: ${sheet.href}`, e); + console.log(`'Can't read the css rules of: ${sheet.href}`, e); return; } @@ -383,11 +380,11 @@ function newFontFaces() { try { asArray(rules || []).forEach(cssRules.push.bind(cssRules)); } catch (e) { - Console.log(`Error while reading CSS rules from ${sheet.href}`, e); + console.log(`Error while reading CSS rules from ${sheet.href}`, e); return; } } else { - Console.log('getCssRules can not find cssRules'); + console.log('getCssRules can not find cssRules'); return; } }); diff --git a/src/utils/src/dom-utils.ts b/src/utils/src/dom-utils.ts index 1778282dbc..e1024fdf25 100644 --- a/src/utils/src/dom-utils.ts +++ b/src/utils/src/dom-utils.ts @@ -1,9 +1,6 @@ // SPDX-License-Identifier: MIT // Copyright contributors to the kepler.gl project -import Console from 'global/console'; -import window from 'global/window'; -import document from 'global/document'; import {IMAGE_EXPORT_ERRORS} from '@kepler.gl/constants'; export function processClone(original, clone) { @@ -141,15 +138,15 @@ export function uid() { return `u${fourRandomChars()}${index++}`; } -export function makeImage(uri) { +export function makeImage(uri: string): Promise { return new Promise((resolve, reject) => { - const image = new window.Image(); + const image: HTMLImageElement = new window.Image(); image.onload = () => { resolve(image); }; image.onerror = err => { const message = IMAGE_EXPORT_ERRORS.dataUri; - Console.log(uri); + console.log(uri); // error is an Event Object // https://www.w3schools.com/jsref/obj_event.asp reject({event: err, message}); @@ -205,8 +202,8 @@ export function escape(string) { return string.replace(/([.*+?^${}()|[\]/\\])/g, '\\$1'); } -export function delay(ms) { - return arg => { +export function delay(ms: number) { + return (arg: T): Promise => { return new Promise(resolve => { window.setTimeout(() => { resolve(arg); @@ -314,7 +311,7 @@ export function getAndEncode(url, options) { const encoder = new window.FileReader(); encoder.onloadend = () => { - const content = encoder.result.split(/,/)[1]; + const content = (encoder.result as string).split(/,/)[1]; resolve(content); }; encoder.readAsDataURL(request.response); @@ -329,7 +326,7 @@ export function getAndEncode(url, options) { } function fail(message) { - Console.error(message); + console.error(message); resolve(''); } }); diff --git a/src/utils/src/export-utils.ts b/src/utils/src/export-utils.ts index c6e938656d..048737ba39 100644 --- a/src/utils/src/export-utils.ts +++ b/src/utils/src/export-utils.ts @@ -1,7 +1,6 @@ // SPDX-License-Identifier: MIT // Copyright contributors to the kepler.gl project -import {Blob, URL, atob, Uint8Array, ArrayBuffer, document} from 'global/window'; import get from 'lodash.get'; import { @@ -85,7 +84,7 @@ export function calculateExportImageSize({ } export function convertToPng(sourceElem: HTMLElement, options) { - return domtoimage.toPng(sourceElem, options); + return domtoimage.toSvg(sourceElem, options); } export function dataURItoBlob(dataURI: string): Blob { diff --git a/src/utils/src/filter-utils.ts b/src/utils/src/filter-utils.ts index c9b10a31ce..316e929385 100644 --- a/src/utils/src/filter-utils.ts +++ b/src/utils/src/filter-utils.ts @@ -3,7 +3,6 @@ import {ascending, extent, histogram as d3Histogram, ticks} from 'd3-array'; import keyMirror from 'keymirror'; -import Console from 'global/console'; import get from 'lodash.get'; import isEqual from 'lodash.isequal'; @@ -901,7 +900,7 @@ export function getColumnFilterProps, L>( const {yAxis} = filter; const fieldIdx = dataset.getColumnFieldIdx(yAxis.name); if (fieldIdx < 0) { - Console.warn(`yAxis ${yAxis.name} does not exist in dataset`); + console.warn(`yAxis ${yAxis.name} does not exist in dataset`); return {}; } @@ -1246,7 +1245,7 @@ export function getFilterPlot, L>( const {yAxis} = filter; const fieldIdx = dataset.getColumnFieldIdx(yAxis.name); if (fieldIdx < 0) { - Console.warn(`yAxis ${yAxis.name} does not exist in dataset`); + console.warn(`yAxis ${yAxis.name} does not exist in dataset`); return {lineChart: {}, yAxis}; } diff --git a/src/utils/src/locale-utils.ts b/src/utils/src/locale-utils.ts index c094700fa8..e4e65c1379 100644 --- a/src/utils/src/locale-utils.ts +++ b/src/utils/src/locale-utils.ts @@ -2,7 +2,6 @@ // Copyright contributors to the kepler.gl project import {isObject} from './utils'; -import Console from 'global/console'; // Flat messages since react-intl does not seem to support nested structures // Adapted from https://medium.com/siren-apparel-press/internationalization-and-localization-of-sirenapparel-eu-sirenapparel-us-and-sirenapparel-asia-ddee266066a2 @@ -21,7 +20,7 @@ export const flattenMessages = (nestedMessages, prefix = '') => { export const mergeMessages = (defaultMessages, userMessages) => { if (!isObject(userMessages) || !isObject(userMessages.en)) { - Console.error( + console.error( 'message should be an object and contain at least the `en` translation. Read more at https://docs.kepler.gl/docs/api-reference/localization' ); diff --git a/src/utils/src/projection-utils.ts b/src/utils/src/projection-utils.ts index 83d28c74e0..f9500f8d87 100644 --- a/src/utils/src/projection-utils.ts +++ b/src/utils/src/projection-utils.ts @@ -4,14 +4,13 @@ import geoViewport from '@mapbox/geo-viewport'; import WebMercatorViewport from 'viewport-mercator-project'; -import Console from 'global/console'; export const MAPBOX_TILE_SIZE = 512; -function isLat(num) { +function isLat(num: number) { return Number.isFinite(num) && num <= 90 && num >= -90; } -function isLng(num) { +function isLng(num: number) { return Number.isFinite(num) && num <= 180 && num >= -180; } @@ -36,7 +35,7 @@ export function validateBounds(bounds) { export function getCenterAndZoomFromBounds(bounds, {width, height}) { const validBounds = validateBounds(bounds); if (!validBounds) { - Console.warn('invalid map bounds provided'); + console.warn('invalid map bounds provided'); return null; } diff --git a/src/utils/src/utils.ts b/src/utils/src/utils.ts index 9223dc4a87..c8d00d73e9 100644 --- a/src/utils/src/utils.ts +++ b/src/utils/src/utils.ts @@ -1,8 +1,6 @@ // SPDX-License-Identifier: MIT // Copyright contributors to the kepler.gl project -import window from 'global/window'; - /** * Generate a hash string based on number of character * @param {number} count @@ -40,7 +38,7 @@ export function generateHashIdFromString(str: string): string { */ export function isChrome(): boolean { // Chrome 1+ - return window.chrome && window.chrome.webstore; + return !!(window as any).chrome?.webstore; } /** @@ -48,7 +46,7 @@ export function isChrome(): boolean { * @param {string} str * @returns {string} */ -export function capitalizeFirstLetter(str) { +export function capitalizeFirstLetter(str: string) { return typeof str === 'string' ? str.charAt(0).toUpperCase() + str.slice(1) : str; } diff --git a/test/browser-debug.js b/test/browser-debug.js index 30509b48b4..acdb11445e 100644 --- a/test/browser-debug.js +++ b/test/browser-debug.js @@ -3,7 +3,6 @@ // test in puppeteer browser // require('@probe.gl/test-utils/polyfill'); -import Console from 'global/console'; const test = require('tape-catch'); const enableDOMLogging = require('@probe.gl/test-utils')._enableDOMLogging; @@ -11,7 +10,7 @@ enableDOMLogging(); test.onFinish(window.browserTestDriver_finish); test.onFailure(args => { - Console.log(args); + console.log(args); window.browserTestDriver_fail(); }); diff --git a/test/browser/components/container-test.js b/test/browser/components/container-test.js index 3fe784d8a6..09678cb7ab 100644 --- a/test/browser/components/container-test.js +++ b/test/browser/components/container-test.js @@ -9,7 +9,6 @@ import {combineReducers} from 'redux'; import configureStore from 'redux-mock-store'; import {Provider} from 'react-redux'; import sinon from 'sinon'; -import {console as Console} from 'global/window'; import { keplerGlReducer as rootReducer, keplerGlReducerCore as coreReducer diff --git a/test/browser/components/injector-test.js b/test/browser/components/injector-test.js index 307aaf4584..1fd1f10933 100644 --- a/test/browser/components/injector-test.js +++ b/test/browser/components/injector-test.js @@ -8,7 +8,6 @@ import {mount} from 'enzyme'; import configureStore from 'redux-mock-store'; import {Provider} from 'react-redux'; import sinon from 'sinon'; -import {console as Console} from 'global/window'; import { withState, @@ -307,7 +306,7 @@ test('Components -> injector -> actions', t => { }); test('Components -> injector -> provideRecipesToInjector', t => { - /// Header1 -> Header 2 -> Header 3 + // Header1 -> Header 2 -> Header 3 const spyMyHeader3Factory = sinon.spy(); const spyMyHeader2Factory = sinon.spy(); const spyMyHeader1Factory = sinon.spy(); diff --git a/test/browser/components/modals/data-table-modal-test.js b/test/browser/components/modals/data-table-modal-test.js index e48338c30a..46cbcc5907 100644 --- a/test/browser/components/modals/data-table-modal-test.js +++ b/test/browser/components/modals/data-table-modal-test.js @@ -4,7 +4,6 @@ import React from 'react'; import {act} from 'react-dom/test-utils'; import test from 'tape-catch'; -import global from 'global'; import sinon from 'sinon'; import flatten from 'lodash.flattendeep'; import {IntlWrapper, mountWithTheme} from 'test/helpers/component-utils'; @@ -90,8 +89,8 @@ const texts = [ ]; const testColumns = ['_geojson', 'income level of people over 65', 'engagement']; const testColumnMeasure = [46, 159, 65]; -function mockCanvas(globalWindow) { - globalWindow.HTMLCanvasElement.prototype.getContext = function mockGetContext() { +function mockCanvas() { + HTMLCanvasElement.prototype.getContext = function mockGetContext() { return { measureText: text => { const index = flatten(texts).indexOf(text); @@ -110,12 +109,12 @@ function mockCanvas(globalWindow) { let oldGetContext; function prepareMockCanvas() { - oldGetContext = global.window.HTMLCanvasElement.prototype.getContext; - mockCanvas(global.window); + oldGetContext = HTMLCanvasElement.prototype.getContext; + mockCanvas(); } function restoreMockCanvas() { - global.window.HTMLCanvasElement.prototype.getContext = oldGetContext; + HTMLCanvasElement.prototype.getContext = oldGetContext; } // eslint-disable-next-line max-statements diff --git a/test/browser/layer-tests/scenegraph-layer-specs.js b/test/browser/layer-tests/scenegraph-layer-specs.js index 1a463e48a0..68bd970667 100644 --- a/test/browser/layer-tests/scenegraph-layer-specs.js +++ b/test/browser/layer-tests/scenegraph-layer-specs.js @@ -3,7 +3,6 @@ import test from 'tape'; import moment from 'moment'; -import global from 'global'; import sinon from 'sinon'; import sinonStubPromise from 'sinon-stub-promise'; sinonStubPromise(sinon); diff --git a/test/helpers/layer-utils.js b/test/helpers/layer-utils.js index 06a203b75e..64c2a849d9 100644 --- a/test/helpers/layer-utils.js +++ b/test/helpers/layer-utils.js @@ -7,7 +7,6 @@ import React from 'react'; import {gl} from '@deck.gl/test-utils'; import sinon from 'sinon'; import {mount} from 'enzyme'; -import {console as Console} from 'global/window'; import cloneDeep from 'lodash.clonedeep'; import { diff --git a/test/node/reducers/provider-state-test.js b/test/node/reducers/provider-state-test.js index fbb8db484e..b44554853d 100644 --- a/test/node/reducers/provider-state-test.js +++ b/test/node/reducers/provider-state-test.js @@ -4,7 +4,6 @@ import test from 'tape'; import {drainTasksForTesting, succeedTaskInTest, errorTaskInTest} from 'react-palm/tasks'; import sinon from 'sinon'; -import {default as Console} from 'global/console'; import {ActionTypes, exportFileToCloud, resetProviderStatus} from '@kepler.gl/actions'; import { diff --git a/test/node/reducers/vis-state-test.js b/test/node/reducers/vis-state-test.js index 3b7484efe5..57ef05cf7d 100644 --- a/test/node/reducers/vis-state-test.js +++ b/test/node/reducers/vis-state-test.js @@ -4,7 +4,6 @@ /* eslint-disable max-statements */ import test from 'tape-catch'; import sinon from 'sinon'; -import {console as Console} from 'global/window'; import {drainTasksForTesting, succeedTaskInTest, errorTaskInTest} from 'react-palm/tasks'; import CloneDeep from 'lodash.clonedeep'; diff --git a/test/node/utils/data-processor-test.js b/test/node/utils/data-processor-test.js index e59cb368be..f40e5c29a9 100644 --- a/test/node/utils/data-processor-test.js +++ b/test/node/utils/data-processor-test.js @@ -3,7 +3,6 @@ import test from 'tape'; import sinon from 'sinon'; -import {console as Console} from 'global/window'; import {DATA_TYPES} from 'type-analyzer'; import cloneDeep from 'lodash.clonedeep'; diff --git a/test/setup-browser-env.js b/test/setup-browser-env.js index aea735741e..7f62f93e99 100644 --- a/test/setup-browser-env.js +++ b/test/setup-browser-env.js @@ -3,7 +3,6 @@ /* setup.js */ import {JSDOM, VirtualConsole} from 'jsdom'; -import global from 'global'; const {gl} = require('@deck.gl/test-utils'); const virtualConsole = new VirtualConsole(); diff --git a/tsconfig.json b/tsconfig.json index aeee214c03..416122c90b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,10 @@ { "compilerOptions": { "target": "es2020", + "lib": [ + "es2021", + "dom" + ], "allowJs": false, "checkJs": false, "jsx": "react", diff --git a/website-gatsby/src/components/common/slideshow.js b/website-gatsby/src/components/common/slideshow.js index ff5e48d806..7c972773cb 100644 --- a/website-gatsby/src/components/common/slideshow.js +++ b/website-gatsby/src/components/common/slideshow.js @@ -4,7 +4,6 @@ import React, {PureComponent} from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import {setInterval, clearInterval} from 'global/window'; import {media} from '../../styles'; const imageRatio = 696 / 1080; diff --git a/website-gatsby/src/components/hero.js b/website-gatsby/src/components/hero.js index 7c54028238..e759cbb501 100644 --- a/website-gatsby/src/components/hero.js +++ b/website-gatsby/src/components/hero.js @@ -3,7 +3,6 @@ import React, {PureComponent} from 'react'; import styled, {keyframes} from 'styled-components'; -import {window} from 'global'; import {cdnUrl} from '../utils'; import {media, breakPoints} from '../styles'; @@ -82,9 +81,7 @@ export default class Hero extends PureComponent { -

- Make an impact with your location data -
+
Make an impact with your location data
Kepler.gl is a powerful open source diff --git a/website-gatsby/src/components/home.js b/website-gatsby/src/components/home.js index dcf759b288..c0b9e0e024 100644 --- a/website-gatsby/src/components/home.js +++ b/website-gatsby/src/components/home.js @@ -3,7 +3,6 @@ import React, {PureComponent} from 'react'; import {ThemeProvider} from 'styled-components'; -import window from 'global/window'; import {theme} from '../styles'; import {SECTIONS} from '../content'; @@ -66,27 +65,25 @@ export default class Home extends PureComponent { bgColor={BACKGROUND_COLOR} onClose={this._hideBanner} > - + -
+
- {SECTIONS.map( - ({id, title, description, icon, isDark, background}, i) => { - const SectionContent = SECTION_CONTENT[id]; - return ( -
- -
- ); - } - )} + {SECTIONS.map(({id, title, description, icon, isDark, background}, i) => { + const SectionContent = SECTION_CONTENT[id]; + return ( +
+ +
+ ); + })}
diff --git a/website-gatsby/src/state/analytics.js b/website-gatsby/src/state/analytics.js index 5dfe0005b5..d3df6bff28 100644 --- a/website-gatsby/src/state/analytics.js +++ b/website-gatsby/src/state/analytics.js @@ -5,11 +5,10 @@ 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 get from 'lodash.get'; -const getPayload = action => action ? action.payload : null; +const getPayload = action => (action ? action.payload : null); // Hack, because we don't have a way to access next state const getFilterType = (store, idx, value) => { @@ -70,7 +69,7 @@ const trackingInformation = { [LOCATION_CHANGE]: x => x, // demo app actions - ['PUSHING_FILE']: (payload) => { + ['PUSHING_FILE']: payload => { const size = get(payload, ['metadata', 'metadata', 'size']); return { isLoading: payload.isLoading, @@ -92,9 +91,7 @@ const analyticsMiddleware = store => next => action => { window.gtag('event', 'action', { event_category: action.type, event_label: trackingInformation[action.type] - ? JSON.stringify( - trackingInformation[action.type](payload, store) - ) + ? JSON.stringify(trackingInformation[action.type](payload, store)) : null }); } diff --git a/website/src/components/common/slideshow.js b/website/src/components/common/slideshow.js index 1e45eff056..9b37e55707 100644 --- a/website/src/components/common/slideshow.js +++ b/website/src/components/common/slideshow.js @@ -4,7 +4,6 @@ import React, {PureComponent} from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import {setInterval, clearInterval} from 'global/window'; import {media} from '../../styles'; const imageRatio = 696 / 1080; diff --git a/website/src/components/hero.js b/website/src/components/hero.js index 37c158b48b..5470fc14cc 100644 --- a/website/src/components/hero.js +++ b/website/src/components/hero.js @@ -3,7 +3,6 @@ import React, {PureComponent} from 'react'; import styled, {keyframes} from 'styled-components'; -import {window} from 'global'; import {media, breakPoints} from '../styles'; import {HERO_IMAGES, HERO_IMAGES_SCALED} from '../content'; diff --git a/website/src/components/home.js b/website/src/components/home.js index 4659388fae..567e6aea6d 100644 --- a/website/src/components/home.js +++ b/website/src/components/home.js @@ -3,7 +3,6 @@ import React, {PureComponent} from 'react'; import {ThemeProvider} from 'styled-components'; -import window from 'global/window'; import {theme} from '../styles'; import {SECTIONS} from '../content'; diff --git a/website/src/main.js b/website/src/main.js index 4350e78d4f..75bc715b26 100644 --- a/website/src/main.js +++ b/website/src/main.js @@ -9,7 +9,6 @@ import ReactDOM from 'react-dom/client'; import {Provider} from 'react-redux'; import store from './reducers'; import Routes from './routes'; -import document from 'global/document'; require('./static/favicon.png'); diff --git a/website/src/reducers/analytics.js b/website/src/reducers/analytics.js index 65f413497f..fc920df58f 100644 --- a/website/src/reducers/analytics.js +++ b/website/src/reducers/analytics.js @@ -5,7 +5,6 @@ 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 get from 'lodash.get'; diff --git a/website/src/routes.js b/website/src/routes.js index 73f91dd43c..39e064cd46 100644 --- a/website/src/routes.js +++ b/website/src/routes.js @@ -4,7 +4,6 @@ import React from 'react'; import {Router, Route, IndexRoute, browserHistory} from 'react-router'; import {syncHistoryWithStore} from 'react-router-redux'; -import window from 'global/window'; import store from './reducers'; import Home from './components/home'; import App from './components/app'; diff --git a/website/webpack.config.js b/website/webpack.config.js index 66b247eaff..3cad848d67 100644 --- a/website/webpack.config.js +++ b/website/webpack.config.js @@ -14,8 +14,6 @@ const { const LIB_DIR = resolve(__dirname, '..'); const SRC_DIR = resolve(LIB_DIR, './src'); -const console = require('global/console'); - const BABEL_CONFIG = { presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'], plugins: [