Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[chore] use vite to bundle examples #7559

Merged
merged 2 commits into from
Jan 5, 2023
Merged

[chore] use vite to bundle examples #7559

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f452b12
Use vite in examples
Pessimistress Jan 4, 2023
d729d3f
address comments
Pessimistress Jan 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
12 changes: 4 additions & 8 deletions examples/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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.
15 changes: 15 additions & 0 deletions examples/experimental/bezier/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
17 changes: 7 additions & 10 deletions examples/experimental/bezier/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
}
0 examples/experimental/bezier/src/app.js → examples/experimental/bezier/src/app.jsx
View file
Open in desktop
File renamed without changes.
41 changes: 0 additions & 41 deletions examples/experimental/bezier/webpack.config.js
View file
Open in desktop

This file was deleted.

15 changes: 15 additions & 0 deletions examples/experimental/h3-grid/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
18 changes: 7 additions & 11 deletions examples/experimental/h3-grid/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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"
}
}
0 examples/experimental/h3-grid/src/app.js → examples/experimental/h3-grid/src/app.jsx
View file
Open in desktop
File renamed without changes.
41 changes: 0 additions & 41 deletions examples/experimental/h3-grid/webpack.config.js
View file
Open in desktop

This file was deleted.

4 changes: 0 additions & 4 deletions examples/experimental/interleaved-buffer/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
15 changes: 15 additions & 0 deletions examples/experimental/interleaved-buffer/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
15 changes: 7 additions & 8 deletions examples/experimental/interleaved-buffer/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
}
17 changes: 0 additions & 17 deletions examples/experimental/interleaved-buffer/webpack.config.js
View file
Open in desktop

This file was deleted.

8 changes: 2 additions & 6 deletions examples/get-started/pure-js/arcgis/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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

Expand Down
2 changes: 1 addition & 1 deletion examples/get-started/pure-js/arcgis/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,6 @@
</head>
<body>
<div id="viewDiv"></div>
<script src='app.js'></script>
<script type="module" src='app.js'></script>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will this approach allow us to change app.js to app.ts in the future and have examples in Typescript?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes

</body>
</html>
13 changes: 6 additions & 7 deletions examples/get-started/pure-js/arcgis/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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"
}
}
13 changes: 0 additions & 13 deletions examples/get-started/pure-js/arcgis/webpack.config.js
View file
Open in desktop

This file was deleted.

7 changes: 1 addition & 6 deletions examples/get-started/pure-js/basic/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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

Expand Down
6 changes: 1 addition & 5 deletions examples/get-started/pure-js/basic/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const INITIAL_VIEW_STATE = {
pitch: 30
};

export const deck = new Deck({
new Deck({
initialViewState: INITIAL_VIEW_STATE,
controller: true,
layers: [
Expand Down Expand Up @@ -59,7 +59,3 @@ export const deck = new Deck({
})
]
});

// For automated test cases
/* global document */
document.body.style.margin = '0px';
13 changes: 13 additions & 0 deletions examples/get-started/pure-js/basic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Loading