Use vite to run examples (#2172)

visgl · May 9, 2023 · 9357a0b · 9357a0b
1 parent 636269a
commit 9357a0b
Show file tree

Hide file tree

Showing 111 changed files with 361 additions and 1,783 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,3 +1,5 @@
 dist/
 node_modules/
 test/src/utils/mapbox-gl-mock/*.js
+**/vite.config.js
+examples/vite.config.local.js
diff --git a/examples/clusters/index.html b/examples/clusters/index.html
@@ -32,9 +32,9 @@
   </head>
   <body>
     <div id="map"></div>
-    <script src='app.js'></script>
   </body>
-  <script type="text/javascript">
-    App.renderToDom(document.getElementById('map'));
+  <script type="module" type="text/javascript">
+    import {renderToDom} from './src/app.tsx';
+    renderToDom(document.getElementById('map'));
   </script>
 </html>
diff --git a/examples/clusters/package.json b/examples/clusters/package.json
@@ -1,7 +1,8 @@
 {
   "scripts": {
-    "start": "webpack-dev-server --progress --hot --open",
-    "start-local": "webpack-dev-server --env local --progress --hot --open"
+    "start": "vite --open",
+    "start-local": "vite --config ../vite.config.local.js",
+    "build": "vite build"
   },
   "dependencies": {
     "react": "^18.0.0",
@@ -10,14 +11,7 @@
     "mapbox-gl": "^2.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/preset-react": "^7.0.0",
-    "babel-loader": "^8.0.0",
-    "ts-loader": "^9.0.0",
     "typescript": "^4.0.0",
-    "webpack": "^5.65.0",
-    "webpack-cli": "^4.9.0",
-    "webpack-dev-server": "^4.7.0"
+    "vite": "^4.0.0"
   }
 }
diff --git a/examples/clusters/vite.config.js b/examples/clusters/vite.config.js
@@ -0,0 +1,5 @@
+export default {
+  define: {
+    'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken)
+  }
+};
diff --git a/examples/clusters/webpack.config.js b/examples/clusters/webpack.config.js
diff --git a/examples/controls/index.html b/examples/controls/index.html
@@ -32,9 +32,9 @@
   </head>
   <body>
     <div id="map"></div>
-    <script src='app.js'></script>
   </body>
-  <script type="text/javascript">
-    App.renderToDom(document.getElementById('map'));
+  <script type="module" type="text/javascript">
+    import {renderToDom} from './src/app.tsx';
+    renderToDom(document.getElementById('map'));
   </script>
 </html>
diff --git a/examples/controls/package.json b/examples/controls/package.json
@@ -1,7 +1,8 @@
 {
   "scripts": {
-    "start": "webpack-dev-server --progress --hot --open",
-    "start-local": "webpack-dev-server --env local --progress --hot --open"
+    "start": "vite --open",
+    "start-local": "vite --config ../vite.config.local.js",
+    "build": "vite build"
   },
   "dependencies": {
     "react": "^18.0.0",
@@ -10,14 +11,7 @@
     "mapbox-gl": "^2.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/preset-react": "^7.0.0",
-    "babel-loader": "^8.0.0",
-    "ts-loader": "^9.0.0",
     "typescript": "^4.0.0",
-    "webpack": "^5.65.0",
-    "webpack-cli": "^4.9.0",
-    "webpack-dev-server": "^4.7.0"
+    "vite": "^4.0.0"
   }
 }
diff --git a/examples/controls/vite.config.js b/examples/controls/vite.config.js
@@ -0,0 +1,5 @@
+export default {
+  define: {
+    'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken)
+  }
+};
diff --git a/examples/controls/webpack.config.js b/examples/controls/webpack.config.js
diff --git a/examples/custom-cursor/index.html b/examples/custom-cursor/index.html
@@ -43,9 +43,9 @@
   </head>
   <body>
     <div id="map"></div>
-    <script src='app.js'></script>
   </body>
-  <script type="text/javascript">
-    App.renderToDom(document.getElementById('map'));
+  <script type="module" type="text/javascript">
+    import {renderToDom} from './src/app.tsx';
+    renderToDom(document.getElementById('map'));
   </script>
 </html>
diff --git a/examples/custom-cursor/package.json b/examples/custom-cursor/package.json
@@ -1,7 +1,8 @@
 {
   "scripts": {
-    "start": "webpack-dev-server --progress --hot --open",
-    "start-local": "webpack-dev-server --env local --progress --hot --open"
+    "start": "vite --open",
+    "start-local": "vite --config ../vite.config.local.js",
+    "build": "vite build"
   },
   "dependencies": {
     "react": "^18.0.0",
@@ -10,14 +11,7 @@
     "mapbox-gl": "^2.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/preset-react": "^7.0.0",
-    "babel-loader": "^8.0.0",
-    "ts-loader": "^9.0.0",
     "typescript": "^4.0.0",
-    "webpack": "^5.65.0",
-    "webpack-cli": "^4.9.0",
-    "webpack-dev-server": "^4.7.0"
+    "vite": "^4.0.0"
   }
 }
diff --git a/examples/custom-cursor/vite.config.js b/examples/custom-cursor/vite.config.js
@@ -0,0 +1,5 @@
+export default {
+  define: {
+    'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken)
+  }
+};
diff --git a/examples/custom-cursor/webpack.config.js b/examples/custom-cursor/webpack.config.js
diff --git a/examples/custom-overlay/index.html b/examples/custom-overlay/index.html
@@ -47,9 +47,9 @@
   </head>
   <body>
     <div id="map"></div>
-    <script src='app.js'></script>
   </body>
-  <script type="text/javascript">
-    App.renderToDom(document.getElementById('map'));
+  <script type="module" type="text/javascript">
+    import {renderToDom} from './src/app.tsx';
+    renderToDom(document.getElementById('map'));
   </script>
 </html>
diff --git a/examples/custom-overlay/package.json b/examples/custom-overlay/package.json
@@ -1,7 +1,8 @@
 {
   "scripts": {
-    "start": "webpack-dev-server --progress --hot --open",
-    "start-local": "webpack-dev-server --env local --progress --hot --open"
+    "start": "vite --open",
+    "start-local": "vite --config ../vite.config.local.js",
+    "build": "vite build"
   },
   "dependencies": {
     "d3-shape": "^3.1.0",
@@ -11,14 +12,7 @@
     "mapbox-gl": "^2.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/preset-react": "^7.0.0",
-    "babel-loader": "^8.0.0",
-    "ts-loader": "^9.0.0",
     "typescript": "^4.0.0",
-    "webpack": "^5.65.0",
-    "webpack-cli": "^4.9.0",
-    "webpack-dev-server": "^4.7.0"
+    "vite": "^4.0.0"
   }
 }
diff --git a/examples/custom-overlay/vite.config.js b/examples/custom-overlay/vite.config.js
@@ -0,0 +1,5 @@
+export default {
+  define: {
+    'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken)
+  }
+};