Migrate to vite and vitest

.eslintrc.js

@@ -1,71 +1,68 @@
-
 module.exports = {
-
-  "parser": "@typescript-eslint/parser",
-  plugins: ['prettier', 'babel', 'import', "@typescript-eslint", 'react', "react-hooks"],
+  parser: '@typescript-eslint/parser',
+  plugins: ['prettier', 'import', '@typescript-eslint', 'react', 'react-hooks'],
   extends: [
     'eslint-config-uber-jsx',
     'eslint-config-uber-es2015',
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react/recommended",
-    "plugin:react-hooks/recommended",
-    'prettier'
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'prettier',
   ],
   rules: {
     'callback-return': 'off',
     complexity: 'off',
     'max-statements': 'off',
     'no-return-assign': 'off',
     'func-style': 'error',
-    'prettier/prettier': 'error',
+    'prettier/prettier': ['error', { usePrettierrc: true }],
     'react/no-multi-comp': 'off',
     'react/sort-comp': 'error',
     'react/jsx-no-duplicate-props': 'error',
+    'react/no-unescaped-entities': 'warn',
     'sort-imports': 'off',
+    'max-depth': ['warn', 4],
 
     /* This is needed for class property function declarations */
     'no-invalid-this': 'off',
-    'babel/no-invalid-this': 'error',
 
     /* Style guide */
+    'spaced-comment': 0,
     'import/first': 'error',
     'import/no-duplicates': 'error',
     'import/extensions': 'error',
     'import/order': 'error',
     'import/newline-after-import': 'error',
-    'import/extensions': 'off',
 
     // Those are rules for typescript migration
-    "@typescript-eslint/interface-name-prefix": 0,
-    "@typescript-eslint/no-empty-function": 0,
-    "@typescript-eslint/explicit-function-return-type": 0,
-    "no-inline-comments": 0,
+    '@typescript-eslint/no-empty-function': 0,
+    '@typescript-eslint/explicit-function-return-type': 0,
+    'no-inline-comments': 0,
     // TODO: Please remove these rules and fix eslint error when possible
-    "@typescript-eslint/no-use-before-define": 0,
-    "@typescript-eslint/ban-ts-ignore": 0,
-    "@typescript-eslint/camelcase": 0,
+    '@typescript-eslint/no-use-before-define': 'warn',
+    '@typescript-eslint/ban-ts-comment': 0,
+    '@typescript-eslint/ban-types': 'warn',
 
-    /* Ignore rules conflicting with prettier */
-    'react/jsx-wrap-multilines': 'off',
-    'react/jsx-indent': 'off',
-    'func-style': 'off',
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': ['warn', { args: 'none', ignoreRestSiblings: true }],
+    'no-shadow': 'off',
+    '@typescript-eslint/no-shadow': ['warn', { hoist: 'never', ignoreOnInitialization: true }],
 
     /* Use the 'query-string' module instead */
     'no-restricted-imports': ['error', 'querystring'],
-
-    'no-unused-vars': ['error', { args: 'none', 'ignoreRestSiblings': true }]
   },
   globals: {
+    vi: true,
     Buffer: true,
-    window: true
+    window: true,
   },
   env: {
     // Support global Jest variables (test, expect, etc.)
-    jest: true
+    jest: true,
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
   },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  }
 };

.gitignore

@@ -23,3 +23,6 @@ modules/main/README.md
 modules/edit-modes/README.md
 modules/editor/README.md
 modules/layers/README.md
+
+# bundle visualizer output
+rollup_stats.html

examples/advanced/package.json

@@ -3,32 +3,25 @@
   "private": true,
   "version": "1.0.4",
   "scripts": {
-    "start": "webpack-dev-server --progress --hot --open",
-    "start-local": "webpack-dev-server --env.local --progress --hot --open",
+    "start": "vite",
+    "start-local": "vite --mode localdev",
+    "build": "vite build",
+    "serve": "vite preview",
     "types-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@deck.gl/core": "^8.8.22",
-    "@deck.gl/layers": "^8.8.22",
-    "@deck.gl/mesh-layers": "^8.8.22",
-    "@deck.gl/react": "^8.8.22",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "@deck.gl/core": "^8.8.23",
+    "@deck.gl/layers": "^8.8.23",
+    "@deck.gl/mesh-layers": "^8.8.23",
+    "@deck.gl/react": "^8.8.23",
+    "nebula.gl": "*",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-map-gl": "^5.3.21",
     "styled-components": "^4.4.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.12",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-export-default-from": "^7.18.10",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "7.18.6",
-    "babel-loader": "^8.3.0",
-    "html-webpack-plugin": "^3.2.0",
-    "url-loader": "^1.1.2",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.3"
+    "typescript": "^4.9.4",
+    "vite": "^4.0.4"
   }
 }

examples/advanced/src/app.tsx

@@ -1,4 +1,3 @@
-import document from 'global/document';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
@@ -12,3 +11,5 @@ if (document.body) {
   document.body.appendChild(root);
   ReactDOM.render(<Example />, root);
 }
+
+console.info('MapboxAccessToken', process.env.MapboxAccessToken);

examples/advanced/src/example.tsx

@@ -1,10 +1,8 @@
 /* eslint-env browser */
-
-import window from 'global/window';
 import * as React from 'react';
-import DeckGL from '@deck.gl/react';
-import { MapView, MapController, RGBAColor } from '@deck.gl/core';
-import { StaticMap } from 'react-map-gl';
+import DeckGL from '@deck.gl/react/typed';
+import { MapView, MapController } from '@deck.gl/core/typed';
+import StaticMap from 'react-map-gl';
 import GL from '@luma.gl/constants';
 import circle from '@turf/circle';
 
@@ -46,6 +44,7 @@ import {
   PathMarkerLayer,
   SELECTION_TYPE,
   GeoJsonEditMode,
+  Color,
 } from 'nebula.gl';
 
 import sampleGeoJson from '../../data/sample-geojson.json';
@@ -61,6 +60,7 @@ import {
   ToolboxCheckbox,
 } from './toolbox';
 
+type RGBAColor = Color;
 const COMPOSITE_MODE = new CompositeMode([new DrawLineStringMode(), new ModifyMode()]);
 
 const styles = {
@@ -827,10 +827,7 @@ export default class Example extends React.Component<
   }
 
   renderStaticMap(viewport: Record<string, any>) {
-    return (
-      // @ts-ignore
-      <StaticMap {...viewport} mapStyle={'mapbox://styles/mapbox/dark-v10'} />
-    );
+    return <StaticMap {...viewport} mapStyle={'mapbox://styles/mapbox/dark-v10'} />;
   }
 
   _featureMenuClick(action: string) {
@@ -1111,7 +1108,6 @@ export default class Example extends React.Component<
 
     return (
       <div style={styles.mapContainer}>
-        <link href="https://api.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.css" rel="stylesheet" />
         <DeckGL
           viewState={viewport}
           getCursor={editableGeoJsonLayer.getCursor.bind(editableGeoJsonLayer)}
@@ -1125,7 +1121,6 @@ export default class Example extends React.Component<
                 type: MapController,
                 doubleClickZoom: false,
               },
-              legacyMeterSizes: true,
             }),
           ]}
           onClick={this._onLayerClick}

examples/advanced/src/index.html

@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<head>
+  <link href="https://api.mapbox.com/mapbox-gl-js/v1.9.0/mapbox-gl.css" rel="stylesheet" />
+  <script type="module" src="./app.tsx"></script>
+</head>
+<body></body>

examples/advanced/src/toolbox.tsx

@@ -17,7 +17,7 @@ export const Toolbox = styled.div`
   height: 100%;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 16px;
-  overflow: scroll;
+  overflow: auto;
   z-index: 999;
 `;
 

examples/advanced/vite.config.ts

@@ -0,0 +1,28 @@
+import { builtinModules } from 'module';
+import { defineConfig, UserConfig } from 'vite';
+import { makeLocalDevConfig } from '../vite.config.local';
+
+const { alias } = makeLocalDevConfig(__dirname);
+
+// https://vitejs.dev/config/
+export default defineConfig((env) => {
+  const viteBuildConfig: UserConfig = {
+    // use local development overrides in mode == 'localdev'
+    resolve: env.mode === 'localdev' ? { alias } : {},
+    root: 'src',
+    server: { open: true },
+    build: {
+      emptyOutDir: true,
+      outDir: '../dist',
+      sourcemap: true,
+      // TODO: Rollup warns about builins https://github.com/visgl/loaders.gl/issues/2000
+      rollupOptions: {
+        external: builtinModules,
+      },
+    },
+    define: {
+      'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken),
+    },
+  };
+  return viteBuildConfig;
+});

examples/codesandbox/getting-started/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
-    "@deck.gl/core": "^8.8.22",
-    "@deck.gl/react": "^8.8.22",
+    "@deck.gl/core": "^8.8.23",
+    "@deck.gl/react": "^8.8.23",
     "@nebula.gl/overlays": "0.23.8",
     "@turf/helpers": "^6.5.0",
     "global": "4.4.0",

examples/codesandbox/world-heritage/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
-    "@deck.gl/core": "^8.8.22",
-    "@deck.gl/react": "^8.8.22",
+    "@deck.gl/core": "^8.8.23",
+    "@deck.gl/react": "^8.8.23",
     "@nebula.gl/overlays": "^0.23.8",
     "@turf/helpers": "^6.5.0",
     "global": "4.4.0",

examples/editable-h3-cluster-layer/package.json

@@ -4,12 +4,12 @@
     "start-local": "webpack-dev-server --env.local --progress --hot --open"
   },
   "dependencies": {
-    "@deck.gl/core": "^8.8.22",
-    "@deck.gl/layers": "^8.8.22",
-    "@deck.gl/geo-layers": "^8.8.22",
-    "@deck.gl/extensions": "^8.8.22",
-    "@deck.gl/mesh-layers": "^8.8.22",
-    "@deck.gl/react": "^8.8.22",
+    "@deck.gl/core": "^8.8.23",
+    "@deck.gl/layers": "^8.8.23",
+    "@deck.gl/geo-layers": "^8.8.23",
+    "@deck.gl/extensions": "^8.8.23",
+    "@deck.gl/mesh-layers": "^8.8.23",
+    "@deck.gl/react": "^8.8.23",
     "global": "4.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",