[chore] use vite to bundle examples (#7559)

visgl · Jan 5, 2023 · b595dd1 · b595dd1
1 parent 45fb552
commit b595dd1
Show file tree

Hide file tree

Showing 365 changed files with 1,003 additions and 5,584 deletions.
diff --git a/examples/README.md b/examples/README.md
@@ -10,14 +10,12 @@ start modifying and experimenting with.
 ### [Get-Started Examples](./get-started)
 
 These are intended to be absolutely minimal (in terms of application code,
-package.json, webpack config etc) examples of how to get deck.gl and a base
+package.json, bundler config etc) examples of how to get deck.gl and a base
 map working together.
 
-* **[Pure JS](./get-started/pure-js)** Applications without depending any additional framework. Bundled with
-  webpack and served with webpack-dev-server.
-* **[React](./get-started/react)** React exmples using `@deck.gl/react` and `react-map-gl`. Bundled with
-  webpack and served with webpack-dev-server. Transpiled with Babel.
-* **[Scripting](./get-started/scripting)** HTML single-file examples that can be  opened directly in a browser.
+* **[Pure JS](./get-started/pure-js)** Applications without depending any additional framework. Bundled and served with [Vite](https://vitejs.dev).
+* **[React](./get-started/react)** React exmples using `@deck.gl/react` and `react-map-gl`. Bundled and served with [Vite](https://vitejs.dev).
+* **[Scripting](./get-started/scripting)** HTML single-file examples that can be opened directly in a browser.
 
 
 ### [Website Examples](./website)
@@ -64,5 +62,3 @@ with hot reloading) or against an installed version of deck.gl
 
 Examples that support this mode have a `start-local` script in their
 `package.json`.
-
-Look at the `webpack.config.local.js` in this directory for details.
diff --git a/examples/experimental/bezier/index.html b/examples/experimental/bezier/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>deck.gl Example</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    body {margin: 0; font-family: sans-serif; width: 100vw; height: 100vh; overflow: hidden;}
+  </style>
+</head>
+<body>
+<div id="app"></div>
+</body>
+<script type="module" src="src/app.jsx"></script>
+</html>
diff --git a/examples/experimental/bezier/package.json b/examples/experimental/bezier/package.json
@@ -1,23 +1,20 @@
 {
-  "name": "bezier",
+  "name": "deckgl-examples-bezier",
   "version": "0.0.0",
+  "private": true,
   "license": "MIT",
   "scripts": {
-    "start-local": "webpack-dev-server --env.local --progress --hot --open",
-    "start": "webpack-dev-server --progress --hot --open"
+    "start": "vite --open",
+    "start-local": "vite --config ../../vite.config.local.mjs",
+    "build": "tsc && vite build"
   },
   "dependencies": {
     "deck.gl": "^8.8.0",
     "react": "^16.3.0",
     "react-dom": "^16.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.4.0",
-    "@babel/preset-react": "^7.0.0",
-    "babel-loader": "^8.0.5",
-    "html-webpack-plugin": "^3.0.7",
-    "webpack": "^4.20.2",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.1"
+    "typescript": "^4.6.0",
+    "vite": "^4.0.0"
   }
 }
diff --git a/examples/experimental/bezier/src/app.js → examples/experimental/bezier/src/app.jsx b/examples/experimental/bezier/src/app.js → examples/experimental/bezier/src/app.jsx
diff --git a/examples/experimental/bezier/webpack.config.js b/examples/experimental/bezier/webpack.config.js
diff --git a/examples/experimental/h3-grid/index.html b/examples/experimental/h3-grid/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>deck.gl Example</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    body {margin: 0; font-family: sans-serif; width: 100vw; height: 100vh; overflow: hidden;}
+  </style>
+</head>
+<body>
+<div id="app"></div>
+</body>
+<script type="module" src="src/app.jsx"></script>
+</html>
diff --git a/examples/experimental/h3-grid/package.json b/examples/experimental/h3-grid/package.json
@@ -1,11 +1,12 @@
 {
-  "name": "h3-grid",
+  "name": "deckgl-examples-h3-grid",
   "version": "0.0.0",
+  "private": true,
   "license": "MIT",
   "scripts": {
-    "start-local": "webpack-dev-server --env.local --progress --hot --open",
-    "start": "webpack-dev-server --progress --hot --open",
-    "build": "webpack -p --output-path dist"
+    "start": "vite --open",
+    "start-local": "vite --config ../../vite.config.local.mjs",
+    "build": "tsc && vite build"
   },
   "dependencies": {
     "deck.gl": "^8.8.0",
@@ -14,12 +15,7 @@
     "react-map-gl": "^5.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.4.0",
-    "@babel/preset-react": "^7.0.0",
-    "babel-loader": "^8.0.5",
-    "html-webpack-plugin": "^3.0.7",
-    "webpack": "^4.20.2",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.1"
+    "typescript": "^4.6.0",
+    "vite": "^4.0.0"
   }
 }
diff --git a/examples/experimental/h3-grid/src/app.js → examples/experimental/h3-grid/src/app.jsx b/examples/experimental/h3-grid/src/app.js → examples/experimental/h3-grid/src/app.jsx
diff --git a/examples/experimental/h3-grid/webpack.config.js b/examples/experimental/h3-grid/webpack.config.js
diff --git a/examples/experimental/interleaved-buffer/README.md b/examples/experimental/interleaved-buffer/README.md
@@ -1,7 +1,3 @@
-<div align="center">
-   <img width="150" heigth="150" src="https://webpack.js.org/assets/icon-square-big.svg" />
-</div>
-
 ## Example: Use deck.gl with Interleaved Binary Data
 
 ## Usage

diff --git a/examples/experimental/interleaved-buffer/index.html b/examples/experimental/interleaved-buffer/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>deck.gl Example</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    body {margin: 0; font-family: sans-serif; width: 100vw; height: 100vh; overflow: hidden;}
+  </style>
+</head>
+<body>
+<div id="app"></div>
+</body>
+<script type="module" src="./app.js"></script>
+</html>
diff --git a/examples/experimental/interleaved-buffer/package.json b/examples/experimental/interleaved-buffer/package.json
@@ -1,20 +1,19 @@
 {
-  "name": "pure-js-basic",
+  "name": "deckgl-examples-interleaved-buffer",
   "version": "0.0.0",
+  "private": true,
   "license": "MIT",
   "scripts": {
-    "start": "webpack-dev-server --progress --hot --open",
-    "start-local": "webpack-dev-server --env.local --progress --hot --open",
-    "build": "webpack -p"
+    "start": "vite --open",
+    "start-local": "vite --config ../../vite.config.local.mjs",
+    "build": "tsc && vite build"
   },
   "dependencies": {
     "@deck.gl/core": "^8.8.0",
     "@deck.gl/layers": "^8.8.0"
   },
   "devDependencies": {
-    "html-webpack-plugin": "^3.0.7",
-    "webpack": "^4.20.2",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.1"
+    "typescript": "^4.6.0",
+    "vite": "^4.0.0"
   }
 }
diff --git a/examples/experimental/interleaved-buffer/webpack.config.js b/examples/experimental/interleaved-buffer/webpack.config.js
diff --git a/examples/get-started/pure-js/arcgis/README.md b/examples/get-started/pure-js/arcgis/README.md
@@ -1,12 +1,8 @@
-<div align="center">
-   <img width="150" heigth="150" src="https://webpack.js.org/assets/icon-square-big.svg" />
-</div>
-
 ## Example: Use deck.gl with Esri ArcGIS API for JavaScript
 
 This sample shows how to use the `@deck.gl/arcgis` module to add a deck.gl layer to an [ArcGIS JavaScript](https://developers.arcgis.com/javascript/) app.
-Uses [Webpack](https://github.com/webpack/webpack) and the [ArcGIS Webpack plugin](https://github.com/Esri/arcgis-webpack-plugin)
-to bundle files and serves it with [webpack-dev-server](https://webpack.js.org/guides/development/#webpack-dev-server).
+
+Uses [Vite](https://vitejs.dev/) to bundle and serve files.
 
 ## Usage
 

diff --git a/examples/get-started/pure-js/arcgis/index.html b/examples/get-started/pure-js/arcgis/index.html
@@ -17,6 +17,6 @@
   </head>
   <body>
     <div id="viewDiv"></div>
-    <script src='app.js'></script>
+    <script type="module" src='app.js'></script>
   </body>
 </html>
diff --git a/examples/get-started/pure-js/arcgis/package.json b/examples/get-started/pure-js/arcgis/package.json
@@ -1,11 +1,12 @@
 {
-  "name": "pure-js-esri-arcgis",
+  "name": "deckgl-example-pure-js-esri-arcgis",
   "version": "0.0.0",
+  "private": true,
   "license": "MIT",
   "scripts": {
-    "start": "webpack-dev-server --progress --hot --open",
-    "start-local": "webpack-dev-server --env.local --progress --hot --open",
-    "build": "webpack -p"
+    "start": "vite --open",
+    "start-local": "vite --config ../../../vite.config.local.mjs",
+    "build": "tsc && vite build"
   },
   "dependencies": {
     "@arcgis/core": "^4.21.0",
@@ -14,8 +15,6 @@
     "@deck.gl/layers": "^8.8.0"
   },
   "devDependencies": {
-    "webpack": "^4.20.2",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.1"
+    "vite": "^4.0.0"
   }
 }
diff --git a/examples/get-started/pure-js/arcgis/webpack.config.js b/examples/get-started/pure-js/arcgis/webpack.config.js
diff --git a/examples/get-started/pure-js/basic/README.md b/examples/get-started/pure-js/basic/README.md
@@ -1,11 +1,6 @@
-<div align="center">
-   <img width="150" heigth="150" src="https://webpack.js.org/assets/icon-square-big.svg" />
-</div>
-
 ## Example: Use deck.gl without React and Base Map
 
-Uses [Webpack](https://github.com/webpack/webpack) to bundle files and serves it
-with [webpack-dev-server](https://webpack.js.org/guides/development/#webpack-dev-server).
+Uses [Vite](https://vitejs.dev/) to bundle and serve files.
 
 ## Usage
 

diff --git a/examples/get-started/pure-js/basic/app.js b/examples/get-started/pure-js/basic/app.js
@@ -15,7 +15,7 @@ const INITIAL_VIEW_STATE = {
   pitch: 30
 };
 
-export const deck = new Deck({
+new Deck({
   initialViewState: INITIAL_VIEW_STATE,
   controller: true,
   layers: [
@@ -59,7 +59,3 @@ export const deck = new Deck({
     })
   ]
 });
-
-// For automated test cases
-/* global document */
-document.body.style.margin = '0px';
diff --git a/examples/get-started/pure-js/basic/index.html b/examples/get-started/pure-js/basic/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>deck.gl Example</title>
+  <style>
+    body {margin: 0; width: 100vw; height: 100vh; overflow: hidden;}
+  </style>
+</head>
+<body>
+</body>
+<script type="module" src="app.js"></script>
+</html>