chore(examples) using vite in website examples (#271)

* chore(examples) basic-basemap vite * chore(examples) camera vite * chore(examples) quick-start vite * chore(examples) terrain vite * chore(examples) trips vite --------- Signed-off-by: Chris Gervang <[email protected]>
visgl · May 8, 2024 · f296271 · f296271
1 parent 42fd3d2
commit f296271
Show file tree

Hide file tree

Showing 31 changed files with 215 additions and 308 deletions.
diff --git a/examples/website/basic-basemap/README.md b/examples/website/basic-basemap/README.md
@@ -12,7 +12,7 @@ export MapboxAccessToken=<mapbox_access_token>
 
 Or set `MAPBOX_TOKEN` directly in `app.js`.
 
-Other options can be found at [using with Mapbox GL](../../../docs/get-started/using-with-mapbox-gl.md).
+Other options can be found at [using with Mapbox GL](https://deck.gl/docs/developer-guide/base-maps/using-with-mapbox).
 
 ### Installation
 

diff --git a/examples/website/basic-basemap/app.js → examples/website/basic-basemap/app.jsx b/examples/website/basic-basemap/app.js → examples/website/basic-basemap/app.jsx
@@ -5,6 +5,7 @@
  */
 
 import React, {useState, useRef, useEffect} from 'react';
+import {render} from 'react-dom';
 import DeckGL from '@deck.gl/react';
 import {BasicControls, useHubbleGl, useDeckAnimation} from '@hubble.gl/react';
 import {StaticMap} from 'react-map-gl';
@@ -175,3 +176,14 @@ export default function App({mapStyle = 'mapbox://styles/mapbox/streets-v11'}) {
     </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/basic-basemap/index.html b/examples/website/basic-basemap/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/basic-basemap/index.js b/examples/website/basic-basemap/index.js
diff --git a/examples/website/basic-basemap/package.json b/examples/website/basic-basemap/package.json
@@ -1,10 +1,12 @@
 {
+  "name": "hubblegl-examples-basic-basemap",
+  "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": {
     "deck.gl": "^8.3.8",
@@ -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/basic-basemap/vite.config.js b/examples/website/basic-basemap/vite.config.js
@@ -0,0 +1,5 @@
+export default {
+  define: {
+    'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken)
+  }
+};
diff --git a/examples/website/basic-basemap/webpack.config.js b/examples/website/basic-basemap/webpack.config.js
diff --git a/examples/website/camera/app.js → examples/website/camera/app.jsx b/examples/website/camera/app.js → examples/website/camera/app.jsx
@@ -1,4 +1,5 @@
 import React, {useState, useRef, useEffect} from 'react';
+import {render} from 'react-dom';
 import DeckGL from '@deck.gl/react';
 import {useHubbleGl, BasicControls} from '@hubble.gl/react';
 import {vignette, fxaa} from '@luma.gl/shadertools';
@@ -148,3 +149,14 @@ export default function App() {
     </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/camera/index.html b/examples/website/camera/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/camera/index.js b/examples/website/camera/index.js
diff --git a/examples/website/camera/package.json b/examples/website/camera/package.json
@@ -1,10 +1,12 @@
 {
+  "name": "hubblegl-examples-camera",
+  "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",
@@ -15,13 +17,6 @@
     "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"
   }
 }
diff --git a/examples/website/camera/webpack.config.js b/examples/website/camera/webpack.config.js
diff --git a/examples/website/quick-start/app.js → examples/website/quick-start/app.jsx b/examples/website/quick-start/app.js → examples/website/quick-start/app.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import {render} from 'react-dom';
 import {ScatterplotLayer, TextLayer} from '@deck.gl/layers';
 import {QuickAnimation, hold, useDeckAnimation} from 'hubble.gl';
 import {anticipate, easeIn, reverseEasing} from 'popmotion';
@@ -99,3 +100,14 @@ export default function App() {
     </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/quick-start/index.html b/examples/website/quick-start/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/quick-start/index.js b/examples/website/quick-start/index.js
diff --git a/examples/website/quick-start/package.json b/examples/website/quick-start/package.json
@@ -1,29 +1,25 @@
 {
+  "name": "hubblegl-examples-quick-start",
+  "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",
     "hubble.gl": "^1.3.0",
-    "deck.gl": "^8.3.8",
+    "deck.gl": "8.8.6",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "popmotion": "9.3.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.1",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-transform-runtime": "^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": {
+    "@luma.gl/core": "8.5.16"
   }
 }
diff --git a/.../website/quick-start/quick-start-after.js → ...website/quick-start/quick-start-after.jsx b/.../website/quick-start/quick-start-after.js → ...website/quick-start/quick-start-after.jsx
diff --git a/...website/quick-start/quick-start-before.js → ...ebsite/quick-start/quick-start-before.jsx b/...website/quick-start/quick-start-before.js → ...ebsite/quick-start/quick-start-before.jsx