chore(examples) trips vite

Signed-off-by: Chris Gervang <[email protected]>
visgl · May 8, 2024 · 0edf847 · 0edf847
1 parent 2826d85
commit 0edf847
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 69 deletions.
diff --git a/examples/website/terrain/index.js b/examples/website/terrain/index.js
diff --git a/examples/website/trips/app.js → examples/website/trips/app.jsx b/examples/website/trips/app.js → examples/website/trips/app.jsx
@@ -5,6 +5,7 @@
  */
 
 import React, {useState, useRef, useEffect, useCallback} from 'react';
+import {render} from 'react-dom';
 import DeckGL from '@deck.gl/react';
 import {BasicControls, useHubbleGl, useDeckAnimation} from '@hubble.gl/react';
 import {AmbientLight, PointLight, LightingEffect} from '@deck.gl/core';
@@ -232,3 +233,14 @@ export default function App({mapStyle = 'mapbox://styles/mapbox/dark-v9'}) {
     </Container>
   );
 }
+
+export async function renderToDOM(container) {
+  render(<App />, container);
+
+  // const root = createRoot(container);
+  // root.render(<App />);
+
+  // const resp = await fetch(DATA_URL);
+  // const {features} = await resp.json();
+  // root.render(<App data={features} />);
+}
diff --git a/examples/website/trips/index.html b/examples/website/trips/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>hubble.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;}
+    #app {width: 100%; height: 100%;}
+  </style>
+</head>
+<body>
+<div id="app"></div>
+</body>
+<script type="module">
+  import {renderToDOM} from './app.jsx';
+  renderToDOM(document.getElementById('app'));
+</script>
+</html>
diff --git a/examples/website/trips/index.js b/examples/website/trips/index.js
diff --git a/examples/website/trips/package.json b/examples/website/trips/package.json
@@ -1,10 +1,12 @@
 {
+  "name": "hubblegl-examples-trips",
+  "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",
-    "start-local-luma": "webpack-dev-server --env.local --env.local-luma --progress --hot --open",
-    "clean": "rm -rf yarn.lock ./node_modules",
-    "bootstrap": "yarn clean && yarn"
+    "start": "vite --open",
+    "start-local": "vite --config ../../vite.config.local.mjs",
+    "build": "vite build"
   },
   "dependencies": {
     "d3-color": "^1.4.1",
@@ -16,14 +18,7 @@
     "popmotion": "9.3.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.1",
-    "@babel/preset-env": "^7.12.1",
-    "@babel/preset-react": "^7.12.1",
-    "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.11"
+    "vite": "^4.0.0"
   },
   "resolutions_comments": [
     "mapbox-gl: pinned to v1 for open license"

diff --git a/examples/website/trips/vite.config.js b/examples/website/trips/vite.config.js
@@ -0,0 +1,5 @@
+export default {
+  define: {
+    'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken)
+  }
+};
diff --git a/examples/website/trips/webpack.config.js b/examples/website/trips/webpack.config.js