Fixes for using in a vite app

bindings/kepler.gl-jupyter/js/lib/keplergl/main.js

@@ -5,18 +5,15 @@
 import createAppStore from './store';
 import renderRoot from './components/root';
 import document from 'global/document';
-import window from 'global/window';
+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 {
@@ -30,6 +27,6 @@ const map = (function initKeplerGl() {
 map.render();
 
 (function loadDataConfig(keplerGlMap) {
-  const {data, config, options} = window.__keplerglDataConfig || {};
+  const {data, config, options} = Window.__keplerglDataConfig || {};
   addDataConfigToKeplerGl({data, config, options, store: keplerGlMap.store});
 })(map);

examples/custom-reducer/src/store.js

@@ -4,7 +4,7 @@
 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';
+import Window from 'global/window';
 
 const customizedKeplerGlReducer = keplerGlReducer
   .initialState({
@@ -53,6 +53,6 @@ const enhancers = [applyMiddleware(...middlewares)];
 const initialState = {};
 
 // add redux devtools
-const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+const composeEnhancers = Window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
 export default createStore(reducers, initialState, composeEnhancers(...enhancers));

examples/custom-theme/src/app.js

@@ -3,7 +3,7 @@
 
 import React, {useEffect, useState} from 'react';
 import styled from 'styled-components';
-import window from 'global/window';
+import Window from 'global/window';
 import {connect} from 'react-redux';
 import KeplerGl from '@kepler.gl/components';
 
@@ -46,16 +46,16 @@ const StyleSwitch = styled.div`
 function App() {
   const [customTheme, setTheme] = useState(false);
   const [windowDimension, setDimension] = useState({
-    width: window.innerWidth,
-    height: window.innerHeight
+    width: Window.innerWidth,
+    height: Window.innerHeight
   });
 
   useEffect(() => {
     const handleResize = () => {
-      setDimension({width: window.innerWidth, height: window.innerHeight});
+      setDimension({width: Window.innerWidth, height: Window.innerHeight});
     };
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
+    Window.addEventListener('resize', handleResize);
+    return () => Window.removeEventListener('resize', handleResize);
   }, []);
 
   return (

examples/custom-theme/src/store.js

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
-import window from 'global/window';
+import Window from 'global/window';
 import {combineReducers, createStore, applyMiddleware, compose} from 'redux';
 import {enhanceReduxMiddleware} from '@kepler.gl/reducers';
 
@@ -18,6 +18,6 @@ export const enhancers = [applyMiddleware(...middlewares)];
 const initialState = {};
 
 // add redux devtools
-const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+const composeEnhancers = Window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
 export default createStore(reducers, initialState, composeEnhancers(...enhancers));

examples/demo-app/src/app.tsx

@@ -4,7 +4,7 @@
 import React, {useCallback, useEffect, useRef, useMemo, useState} from 'react';
 import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
 import styled, {ThemeProvider, StyleSheetManager} from 'styled-components';
-import window from 'global/window';
+import Window from 'global/window';
 import {connect, useDispatch} from 'react-redux';
 import cloneDeep from 'lodash.clonedeep';
 import isEqual from 'lodash.isequal';
@@ -44,7 +44,7 @@
 // Sample data
 /* eslint-disable no-unused-vars */
 import sampleTripData, {testCsvData, sampleTripDataConfig} from './data/sample-trip-data';
 import sampleGeojson from './data/sample-small-geojson';
 // import sampleGeojsonPoints from './data/sample-geojson-points';
 import sampleGeojsonConfig from './data/sample-geojson-config';
 import sampleH3Data, {config as h3MapConfig} from './data/sample-hex-id-csv';
@@ -165,7 +165,7 @@
     // Notifications
 
     // no dependencies, as this was part of componentDidMount
   }, []);
 
   const _setStartScreenCapture = useCallback(
     flag => {
@@ -181,7 +181,7 @@
     [dispatch]
   );
 
   const _showBanner = useCallback(() => {
     toggleShowBanner(true);
   }, [toggleShowBanner]);
 
@@ -191,7 +191,7 @@
 
   const _disableBanner = useCallback(() => {
     hideBanner();
-    window.localStorage.setItem(BannerKey, 'true');
+    Window.localStorage.setItem(BannerKey, 'true');
   }, [hideBanner]);
 
   const _loadRowData = useCallback(() => {
@@ -456,7 +456,7 @@
       features: sampleGeojsonPoints.features.slice(0, 5)
     });
     _loadGeojsonData();
-    window.setTimeout(() => {
+    Window.setTimeout(() => {
       dispatch(
         replaceDataInMap({
           datasetToReplaceId: 'bart-stops-geo',

examples/demo-app/src/cloud-providers/dropbox/dropbox-provider.js

@@ -3,7 +3,7 @@
 
 // DROPBOX
 import {Dropbox} from 'dropbox';
-import window from 'global/window';
+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';
@@ -59,7 +59,7 @@ export default class DropboxProvider extends Provider {
     return new Promise((resolve, reject) => {
       const link = this._authLink();
 
-      const authWindow = window.open(link, '_blank', 'width=1024,height=716');
+      const authWindow = Window.open(link, '_blank', 'width=1024,height=716');
 
       const handleToken = async event => {
         // if user has dev tools this will skip all the react-devtools events
@@ -69,7 +69,7 @@ export default class DropboxProvider extends Provider {
 
         if (authWindow) {
           authWindow.close();
-          window.removeEventListener('message', handleToken);
+          Window.removeEventListener('message', handleToken);
         }
 
         const {token} = event.data;
@@ -83,8 +83,8 @@ export default class DropboxProvider extends Provider {
         // save user name
         const user = await this.getUser();
 
-        if (window.localStorage) {
-          window.localStorage.setItem(
+        if (Window.localStorage) {
+          Window.localStorage.setItem(
             'dropbox',
             JSON.stringify({
               // dropbox token doesn't expire unless revoked by the user
@@ -98,7 +98,7 @@ export default class DropboxProvider extends Provider {
         resolve(user);
       };
 
-      window.addEventListener('message', handleToken);
+      Window.addEventListener('message', handleToken);
     });
   }
 
@@ -204,17 +204,17 @@ export default class DropboxProvider extends Provider {
 
   getUserName() {
     // load user from
-    if (window.localStorage) {
-      const jsonString = window.localStorage.getItem('dropbox');
+    if (Window.localStorage) {
+      const jsonString = Window.localStorage.getItem('dropbox');
       return jsonString && JSON.parse(jsonString).user;
     }
     return null;
   }
 
   async logout() {
     await this._dropbox.authTokenRevoke();
-    if (window.localStorage) {
-      window.localStorage.removeItem('dropbox');
+    if (Window.localStorage) {
+      Window.localStorage.removeItem('dropbox');
     }
     // re instantiate dropbox
     this._initializeDropbox();
@@ -238,7 +238,7 @@ export default class DropboxProvider extends Provider {
    */
   getShareUrl(fullUrl = true) {
     return fullUrl
-      ? `${window.location.protocol}//${window.location.host}/${MAP_URI}${this._shareUrl}`
+      ? `${Window.location.protocol}//${Window.location.host}/${MAP_URI}${this._shareUrl}`
       : `/${MAP_URI}${this._shareUrl}`;
   }
 
@@ -260,8 +260,8 @@ export default class DropboxProvider extends Provider {
    */
   getAccessToken() {
     let token = this._dropbox.getAccessToken();
-    if (!token && window.localStorage) {
-      const jsonString = window.localStorage.getItem('dropbox');
+    if (!token && Window.localStorage) {
+      const jsonString = Window.localStorage.getItem('dropbox');
       token = jsonString && JSON.parse(jsonString).token;
       if (token) {
         this._dropbox.setAccessToken(token);
@@ -280,13 +280,13 @@ export default class DropboxProvider extends Provider {
       return null;
     }
     // dropbox token usually start with # therefore we want to remove the '#'
-    const query = window.location.hash.substring(1);
+    const query = Window.location.hash.substring(1);
     return parseQueryString(query).access_token;
   }
 
   // PRIVATE
   _initializeDropbox() {
-    this._dropbox = new Dropbox({fetch: window.fetch});
+    this._dropbox = new Dropbox({fetch: Window.fetch});
     this._dropbox.setClientId(this.clientId);
   }
 
@@ -323,7 +323,7 @@ export default class DropboxProvider extends Provider {
   // append url after map sharing
   _getMapPermalink(mapLink, fullUrl = true) {
     return fullUrl
-      ? `${window.location.protocol}//${window.location.host}/${MAP_URI}${mapLink}`
+      ? `${Window.location.protocol}//${Window.location.host}/${MAP_URI}${mapLink}`
       : `/${MAP_URI}${mapLink}`;
   }
 
@@ -332,7 +332,7 @@ export default class DropboxProvider extends Provider {
   _getMapPermalinkFromParams({path}, fullURL = true) {
     const mapLink = `demo/map/dropbox?path=${path}`;
     return fullURL
-      ? `${window.location.protocol}//${window.location.host}/${mapLink}`
+      ? `${Window.location.protocol}//${Window.location.host}/${mapLink}`
       : `/${mapLink}`;
   }
   /**
@@ -373,8 +373,8 @@ export default class DropboxProvider extends Provider {
    */
   _authLink(path = 'auth') {
     return this._dropbox.getAuthenticationUrl(
-      `${window.location.origin}/${path}`,
-      btoa(JSON.stringify({handler: 'dropbox', origin: window.location.origin}))
+      `${Window.location.origin}/${path}`,
+      btoa(JSON.stringify({handler: 'dropbox', origin: Window.location.origin}))
     );
   }
 

examples/demo-app/src/store.js

@@ -8,7 +8,7 @@ import {enhanceReduxMiddleware} from '@kepler.gl/reducers';
 import {createLogger} from 'redux-logger';
 import thunk from 'redux-thunk';
 // eslint-disable-next-line no-unused-vars
-import window from 'global/window';
+import Window from 'global/window';
 
 import demoReducer from './reducers/index';
 
@@ -39,8 +39,8 @@ let composeEnhancers = compose;
  * comment out code below to enable Redux Devtools
  */
 
-if (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) {
-  composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
+if (Window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) {
+  composeEnhancers = Window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
     actionsBlacklist: [
       '@@kepler.gl/MOUSE_MOVE',
       '@@kepler.gl/UPDATE_MAP',

examples/open-modal/src/store.js

@@ -5,7 +5,7 @@ import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
 import keplerGlReducer, {enhanceReduxMiddleware} from '@kepler.gl/reducers';
 
 import appReducer from './app-reducer';
-import window from 'global/window';
+import Window from 'global/window';
 
 const reducers = combineReducers({
   keplerGl: keplerGlReducer,
@@ -18,6 +18,6 @@ const enhancers = [applyMiddleware(...middlewares)];
 const initialState = {};
 
 // add redux devtools
-const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+const composeEnhancers = Window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
 export default createStore(reducers, initialState, composeEnhancers(...enhancers));

src/components/src/common/file-uploader/file-drop.tsx

@@ -6,11 +6,11 @@
  * For React 16.8 compatibility
  */
 import React, {ReactNode} from 'react';
-import window from 'global/window';
+import Window from 'global/window';
 
 export type FileDropProps = {
   dropEffect?: 'copy' | 'move' | 'link' | 'none';
-  frame?: typeof document | typeof window | HTMLElement;
+  frame?: typeof document | typeof Window | HTMLElement;
   className?: string;
   targetClassName?: string;
   draggingOverFrameClassName?: string;
@@ -29,10 +29,10 @@ 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 &&
+    Window.navigator &&
+    ((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 :(
@@ -52,7 +52,7 @@ class FileDrop extends React.PureComponent<FileDropProps> {
 
   static defaultProps = {
     dropEffect: 'copy',
-    frame: window ? window.document : undefined,
+    frame: Window ? Window.document : undefined,
     className: 'file-drop',
     targetClassName: 'file-drop-target',
     draggingOverFrameClassName: 'file-drop-dragging-over-frame',
@@ -65,8 +65,8 @@ class FileDrop extends React.PureComponent<FileDropProps> {
   componentDidMount() {
     this.startFrameListeners(this.props.frame);
     this.resetDragging();
-    window.addEventListener('dragover', this.handleWindowDragOverOrDrop);
-    window.addEventListener('drop', this.handleWindowDragOverOrDrop);
+    Window.addEventListener('dragover', this.handleWindowDragOverOrDrop);
+    Window.addEventListener('drop', this.handleWindowDragOverOrDrop);
   }
 
   componentDidUpdate(prevProps) {
@@ -79,8 +79,8 @@ class FileDrop extends React.PureComponent<FileDropProps> {
 
   componentWillUnmount() {
     this.stopFrameListeners(this.props.frame);
-    window.removeEventListener('dragover', this.handleWindowDragOverOrDrop);
-    window.removeEventListener('drop', this.handleWindowDragOverOrDrop);
+    Window.removeEventListener('dragover', this.handleWindowDragOverOrDrop);
+    Window.removeEventListener('drop', this.handleWindowDragOverOrDrop);
   }
 
   resetDragging = () => {