diff --git a/examples/website/basic-basemap/README.md b/examples/website/basic-basemap/README.md index 62192a96..f4b47098 100644 --- a/examples/website/basic-basemap/README.md +++ b/examples/website/basic-basemap/README.md @@ -12,7 +12,7 @@ export MapboxAccessToken= 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 b/examples/website/basic-basemap/app.jsx similarity index 93% rename from examples/website/basic-basemap/app.js rename to examples/website/basic-basemap/app.jsx index 4d5c60f7..8ce04d60 100644 --- a/examples/website/basic-basemap/app.js +++ b/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'}) { ); } + +export async function renderToDOM(container) { + render(, container); + + // const root = createRoot(container); + // root.render(); + + // const resp = await fetch(DATA_URL); + // const {features} = await resp.json(); + // root.render(); +} diff --git a/examples/website/basic-basemap/index.html b/examples/website/basic-basemap/index.html new file mode 100644 index 00000000..7e3b5212 --- /dev/null +++ b/examples/website/basic-basemap/index.html @@ -0,0 +1,19 @@ + + + + + hubble.gl Example + + + + +
+ + + diff --git a/examples/website/basic-basemap/index.js b/examples/website/basic-basemap/index.js deleted file mode 100644 index 801f1083..00000000 --- a/examples/website/basic-basemap/index.js +++ /dev/null @@ -1,11 +0,0 @@ -/* global document */ -import React from 'react'; -import {render} from 'react-dom'; -import App from './app'; - -document.body.style.height = '100vh'; -document.body.style.margin = '0'; -const root = document.body.appendChild(document.createElement('div')); -root.style.height = '100%'; - -render(, root); diff --git a/examples/website/basic-basemap/package.json b/examples/website/basic-basemap/package.json index 7b2cf054..e097906e 100644 --- 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 new file mode 100644 index 00000000..a32c2043 --- /dev/null +++ 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 deleted file mode 100644 index 38b43689..00000000 --- a/examples/website/basic-basemap/webpack.config.js +++ /dev/null @@ -1,34 +0,0 @@ -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const webpack = require('webpack'); - -const CONFIG = { - mode: 'development', - - entry: { - index: './index.js' - }, - - module: { - rules: [ - { - // Transpile ES6 to ES5 with babel - // Remove if your app does not use JSX or you don't need to support old browsers - test: /\.js$/, - loader: 'babel-loader', - exclude: [/node_modules/], - options: { - presets: ['@babel/preset-env', '@babel/preset-react'] - } - } - ] - }, - - plugins: [ - new HtmlWebpackPlugin({title: 'hubble.gl basemap example'}), - // Optional: Enables reading mapbox token from environment variable - new webpack.EnvironmentPlugin(['MapboxAccessToken']) - ] -}; - -// This line enables bundling against src in this repo rather than installed module -module.exports = env => (env ? require('../../webpack.config.local')(CONFIG)(env) : CONFIG); diff --git a/examples/website/camera/app.js b/examples/website/camera/app.jsx similarity index 92% rename from examples/website/camera/app.js rename to examples/website/camera/app.jsx index 68a32c73..c655829b 100644 --- a/examples/website/camera/app.js +++ b/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() { ); } + +export async function renderToDOM(container) { + render(, container); + + // const root = createRoot(container); + // root.render(); + + // const resp = await fetch(DATA_URL); + // const {features} = await resp.json(); + // root.render(); +} diff --git a/examples/website/camera/index.html b/examples/website/camera/index.html new file mode 100644 index 00000000..7e3b5212 --- /dev/null +++ b/examples/website/camera/index.html @@ -0,0 +1,19 @@ + + + + + hubble.gl Example + + + + +
+ + + diff --git a/examples/website/camera/index.js b/examples/website/camera/index.js deleted file mode 100644 index 801f1083..00000000 --- a/examples/website/camera/index.js +++ /dev/null @@ -1,11 +0,0 @@ -/* global document */ -import React from 'react'; -import {render} from 'react-dom'; -import App from './app'; - -document.body.style.height = '100vh'; -document.body.style.margin = '0'; -const root = document.body.appendChild(document.createElement('div')); -root.style.height = '100%'; - -render(, root); diff --git a/examples/website/camera/package.json b/examples/website/camera/package.json index 44d39394..fe862e56 100644 --- 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 deleted file mode 100644 index b8ee5225..00000000 --- a/examples/website/camera/webpack.config.js +++ /dev/null @@ -1,34 +0,0 @@ -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const webpack = require('webpack'); - -const CONFIG = { - mode: 'development', - - entry: { - index: './index.js' - }, - - module: { - rules: [ - { - // Transpile ES6 to ES5 with babel - // Remove if your app does not use JSX or you don't need to support old browsers - test: /\.js$/, - loader: 'babel-loader', - exclude: [/node_modules/], - options: { - presets: ['@babel/preset-env', '@babel/preset-react'] - } - } - ] - }, - - plugins: [ - new HtmlWebpackPlugin({title: 'hubble.gl deck camera example'}), - // Optional: Enables reading mapbox token from environment variable - new webpack.EnvironmentPlugin(['MapboxAccessToken']) - ] -}; - -// This line enables bundling against src in this repo rather than installed module -module.exports = env => (env ? require('../../webpack.config.local')(CONFIG)(env) : CONFIG); diff --git a/examples/website/quick-start/app.js b/examples/website/quick-start/app.jsx similarity index 88% rename from examples/website/quick-start/app.js rename to examples/website/quick-start/app.jsx index 7e4bb659..ce7aed61 100644 --- a/examples/website/quick-start/app.js +++ b/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() { ); } + +export async function renderToDOM(container) { + render(, container); + + // const root = createRoot(container); + // root.render(); + + // const resp = await fetch(DATA_URL); + // const {features} = await resp.json(); + // root.render(); +} \ No newline at end of file diff --git a/examples/website/quick-start/index.html b/examples/website/quick-start/index.html new file mode 100644 index 00000000..7e3b5212 --- /dev/null +++ b/examples/website/quick-start/index.html @@ -0,0 +1,19 @@ + + + + + hubble.gl Example + + + + +
+ + + diff --git a/examples/website/quick-start/index.js b/examples/website/quick-start/index.js deleted file mode 100644 index 801f1083..00000000 --- a/examples/website/quick-start/index.js +++ /dev/null @@ -1,11 +0,0 @@ -/* global document */ -import React from 'react'; -import {render} from 'react-dom'; -import App from './app'; - -document.body.style.height = '100vh'; -document.body.style.margin = '0'; -const root = document.body.appendChild(document.createElement('div')); -root.style.height = '100%'; - -render(, root); diff --git a/examples/website/quick-start/package.json b/examples/website/quick-start/package.json index 10accb2b..7a51d74c 100644 --- 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/examples/website/quick-start/quick-start-after.js b/examples/website/quick-start/quick-start-after.jsx similarity index 100% rename from examples/website/quick-start/quick-start-after.js rename to examples/website/quick-start/quick-start-after.jsx diff --git a/examples/website/quick-start/quick-start-before.js b/examples/website/quick-start/quick-start-before.jsx similarity index 100% rename from examples/website/quick-start/quick-start-before.js rename to examples/website/quick-start/quick-start-before.jsx diff --git a/examples/website/quick-start/webpack.config.js b/examples/website/quick-start/webpack.config.js deleted file mode 100644 index 7b58f68f..00000000 --- a/examples/website/quick-start/webpack.config.js +++ /dev/null @@ -1,47 +0,0 @@ -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const webpack = require('webpack'); - -const CONFIG = { - mode: 'development', - - entry: { - index: './index.js' - }, - - module: { - rules: [ - { - // Transpile ES6 to ES5 with babel - // Remove if your app does not use JSX or you don't need to support old browsers - test: /\.js$/, - loader: 'babel-loader', - exclude: [/node_modules/], - options: { - plugins: [ - '@babel/plugin-proposal-class-properties', - [ - '@babel/plugin-transform-runtime', - { - absoluteRuntime: false, - corejs: false, - helpers: false, - regenerator: true, - useESModules: false - } - ] - ], - presets: ['@babel/preset-env', '@babel/preset-react'] - } - } - ] - }, - - plugins: [ - new HtmlWebpackPlugin({title: 'hubble.gl deck quick-start example'}), - // Optional: Enables reading mapbox token from environment variable - new webpack.EnvironmentPlugin(['MapboxAccessToken']) - ] -}; - -// This line enables bundling against src in this repo rather than installed module -module.exports = env => (env ? require('../../webpack.config.local')(CONFIG)(env) : CONFIG); diff --git a/examples/website/terrain/app.js b/examples/website/terrain/app.jsx similarity index 94% rename from examples/website/terrain/app.js rename to examples/website/terrain/app.jsx index 91109f06..f4fd88c1 100644 --- a/examples/website/terrain/app.js +++ b/examples/website/terrain/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 {TerrainLayer} from '@deck.gl/geo-layers'; import {BasicControls, useHubbleGl} from '@hubble.gl/react'; @@ -201,3 +202,14 @@ export default function App() { ); } + +export async function renderToDOM(container) { + render(, container); + + // const root = createRoot(container); + // root.render(); + + // const resp = await fetch(DATA_URL); + // const {features} = await resp.json(); + // root.render(); +} \ No newline at end of file diff --git a/examples/website/terrain/index.html b/examples/website/terrain/index.html new file mode 100644 index 00000000..7e3b5212 --- /dev/null +++ b/examples/website/terrain/index.html @@ -0,0 +1,19 @@ + + + + + hubble.gl Example + + + + +
+ + + diff --git a/examples/website/terrain/index.js b/examples/website/terrain/index.js deleted file mode 100644 index 801f1083..00000000 --- a/examples/website/terrain/index.js +++ /dev/null @@ -1,11 +0,0 @@ -/* global document */ -import React from 'react'; -import {render} from 'react-dom'; -import App from './app'; - -document.body.style.height = '100vh'; -document.body.style.margin = '0'; -const root = document.body.appendChild(document.createElement('div')); -root.style.height = '100%'; - -render(, root); diff --git a/examples/website/terrain/package.json b/examples/website/terrain/package.json index 7e4fb2bd..0b0fd14e 100644 --- a/examples/website/terrain/package.json +++ b/examples/website/terrain/package.json @@ -1,10 +1,12 @@ { + "name": "hubblegl-examples-terrain", + "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": { "hubble.gl": "^1.3.0", @@ -14,13 +16,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/terrain/vite.config.js b/examples/website/terrain/vite.config.js new file mode 100644 index 00000000..a32c2043 --- /dev/null +++ b/examples/website/terrain/vite.config.js @@ -0,0 +1,5 @@ +export default { + define: { + 'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken) + } +}; diff --git a/examples/website/terrain/webpack.config.js b/examples/website/terrain/webpack.config.js deleted file mode 100644 index b693a073..00000000 --- a/examples/website/terrain/webpack.config.js +++ /dev/null @@ -1,35 +0,0 @@ -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const webpack = require('webpack'); - -const CONFIG = { - mode: 'development', - - entry: { - index: './index.js' - }, - - module: { - rules: [ - { - // Transpile ES6 to ES5 with babel - // Remove if your app does not use JSX or you don't need to support old browsers - test: /\.js$/, - loader: 'babel-loader', - exclude: [/node_modules/], - options: { - plugins: ['@babel/plugin-proposal-class-properties'], - presets: ['@babel/preset-env', '@babel/preset-react'] - } - } - ] - }, - - plugins: [ - new HtmlWebpackPlugin({title: 'hubble.gl terrain example'}), - // Optional: Enables reading mapbox token from environment variable - new webpack.EnvironmentPlugin(['MapboxAccessToken']) - ] -}; - -// This line enables bundling against src in this repo rather than installed module -module.exports = env => (env ? require('../../webpack.config.local')(CONFIG)(env) : CONFIG); diff --git a/examples/website/trips/app.js b/examples/website/trips/app.jsx similarity index 94% rename from examples/website/trips/app.js rename to examples/website/trips/app.jsx index cdceff12..1ad391d6 100644 --- a/examples/website/trips/app.js +++ b/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'}) { ); } + +export async function renderToDOM(container) { + render(, container); + + // const root = createRoot(container); + // root.render(); + + // const resp = await fetch(DATA_URL); + // const {features} = await resp.json(); + // root.render(); +} diff --git a/examples/website/trips/index.html b/examples/website/trips/index.html new file mode 100644 index 00000000..7e3b5212 --- /dev/null +++ b/examples/website/trips/index.html @@ -0,0 +1,19 @@ + + + + + hubble.gl Example + + + + +
+ + + diff --git a/examples/website/trips/index.js b/examples/website/trips/index.js deleted file mode 100644 index 801f1083..00000000 --- a/examples/website/trips/index.js +++ /dev/null @@ -1,11 +0,0 @@ -/* global document */ -import React from 'react'; -import {render} from 'react-dom'; -import App from './app'; - -document.body.style.height = '100vh'; -document.body.style.margin = '0'; -const root = document.body.appendChild(document.createElement('div')); -root.style.height = '100%'; - -render(, root); diff --git a/examples/website/trips/package.json b/examples/website/trips/package.json index 15a78a3d..b7984cc5 100644 --- 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 new file mode 100644 index 00000000..a32c2043 --- /dev/null +++ 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 deleted file mode 100644 index 41856b6d..00000000 --- a/examples/website/trips/webpack.config.js +++ /dev/null @@ -1,34 +0,0 @@ -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const webpack = require('webpack'); - -const CONFIG = { - mode: 'development', - - entry: { - index: './index.js' - }, - - module: { - rules: [ - { - // Transpile ES6 to ES5 with babel - // Remove if your app does not use JSX or you don't need to support old browsers - test: /\.js$/, - loader: 'babel-loader', - exclude: [/node_modules/], - options: { - presets: ['@babel/preset-env', '@babel/preset-react'] - } - } - ] - }, - - plugins: [ - new HtmlWebpackPlugin({title: 'hubble.gl deck trips example'}), - // Optional: Enables reading mapbox token from environment variable - new webpack.EnvironmentPlugin(['MapboxAccessToken']) - ] -}; - -// This line enables bundling against src in this repo rather than installed module -module.exports = env => (env ? require('../../webpack.config.local')(CONFIG)(env) : CONFIG);