align build systems (visgl#2398)

mpearson · Nov 1, 2018 · 5d48b2d · 5d48b2d
1 parent 60e99cc
commit 5d48b2d
Show file tree

Hide file tree

Showing 12 changed files with 182 additions and 130 deletions.
diff --git a/README.md b/README.md
@@ -16,47 +16,86 @@
   </a>
 </p>
 
-<h1 align="center">deck.gl | <a href="https://uber.github.io/deck.gl">Docs</a></h1>
+<h1 align="center">deck.gl | <a href="https://uber.github.io/deck.gl">Website</a></h1>
 
-<h5 align="center">A suite of WebGL2-powered data visualization layers</h5>
+<h5 align="center"> WebGL2-powered, highly performant large-scale data visualization</h5>
 
 [![docs](http://i.imgur.com/mvfvgf0.jpg)](https://uber.github.io/deck.gl)
 
-Provides tested, highly performant layers for data visualization, such as scatterplots, arcs, geometries defined in GeoJSON, etc.
 
-deck.gl has extensive documentation, please refer to the [docs website](https://uber.github.io/deck.gl) or browse it directly in the github [docs folder](./docs).
+## Installation
 
+```
+npm install deck.gl
+```
 
 ## Using deck.gl
 
-deck.gl can be used through its standard JavaScript API (available both as installable npm modules as well as a "script" file for use in scripting setups). However, if you are using React you will likely want to use the provided React integration. Again, consult the extensive documentation for more details on how to access what you need.
+deck.gl offers an extensive catalog of pre-packaged visualization "layers", including [ScatterplotLayer](http://deck.gl/#/documentation/deckgl-api-reference/layers/scatterplot-layer), [ArcLayer](http://deck.gl/#/documentation/deckgl-api-reference/layers/arc-layer), [TextLayer](http://deck.gl/#/documentation/deckgl-api-reference/layers/text-layer), [GeoJsonLayer](http://deck.gl/#/documentation/deckgl-api-reference/layers/geojson-layer), etc. The input to a layer is usually an array of JSON objects. Each layer offers highly-flexible API to customize how the data should be rendered.
+
+Example constructing a deck.gl ScatterplotLayer: 
+
+```js
+import {ScatterplotLayer} from '@deck.gl/layers';
+
+/**
+ * data is an array of object in the shape of:
+ * {
+ *   "name":"Montgomery St. (MONT)",
+ *   "address":"598 Market Street, San Francisco CA 94104",
+ *   "entries":"43430",
+ *   "exits":"45128",
+ *   "coordinates":[-122.401407,37.789256]
+ * }
+ */
+const scatterplotLayer = new ScatterplotLayer({
+  id: 'bart-stations',
+  data: 'https://github.com/uber-common/deck.gl-data/blob/master/website/bart-stations.json',
+  getRadius: d => Math.sqrt(d.entries) / 100,
+  getPosition: d => d.coordinates,
+  getColor: [255, 228, 0],
+});
+```
+
+## Using deck.gl with React
 
+```js
+import DeckGL from 'deck.gl';
 
-## Examples
+<DeckGL width="100%" height="100%" longitude={-122.4} latitude={37.78} zoom={8} controller={true} layers={[scatterplotLayer]} />
+```
 
-To get a quick feel for what a deck.gl application's source code might look like, say the application has some data representing flights with start and end positions for each item. If it wanted to display this data as a set of arcs it would simply import and render a deck.gl `ArcLayer`:
+## Using deck.gl with Pure JS
 
-```javascript
-import DeckGL, {ArcLayer} from 'deck.gl';
+```js
+import {Deck} from '@deck.gl/core';
 
-const flights = new ArcLayer({
-  data: [] // Some flight points,
-  ...
+const deck = new Deck({
+  container: document.body,
+  width: '100vw',
+  height: '100vh',
+  longitude: -122.4,
+  latitude: 37.78,
+  zoom: 8,
+  controller: true,
+  layers: [scatterplotLayer]
 });
-
-<DeckGL width={1920} height={1080} layers={[flights]} />
 ```
 
-Simple usage of deck.gl is also showcased in the [hello-world examples](./examples/get-started), using both [webpack2](./examples/get-started/react-webpack-2) and [browserify](./examples/get-started/react-browserify), so you can choose which bundler you prefer or are more familiar with.
+Minimum setups of end-to-end deck.gl usage is also showcased in the [hello-world examples](./examples/get-started), using both [webpack2](./examples/get-started/react-webpack-2) and [browserify](./examples/get-started/react-browserify), so you can choose which bundler you prefer or are more familiar with.
+
+To learn how to use deck.gl through the many examples that come with the deck.gl repo, please clone the latest **release** branch:
 
-To learn how to use deck.gl through the many examples that come with the deck.gl repo, please clone the latest **release** branch. `git clone -b 6.2-release --single-branch https://github.com/uber/deck.gl.git`
+```
+git clone -b 6.2-release --single-branch https://github.com/uber/deck.gl.git
+```
 
-For the most up-to-date information, see our [docs](http://uber.github.io/deck.gl/#/docs/getting-started/installation?section=running-the-examples)
+For the most up-to-date information, see our [API documentations](http://deck.gl/#/documentation)
 
 
 ## Contributing
 
-PRs and bug reports are welcome, and we are actively opening up the deck.gl roadmap to facilitate for external contributors.
+PRs and bug reports are welcome, and we are actively opening up the deck.gl [roadmap](./dev-docs) to facilitate for external contributors.
 
 Note that you once your PR is about to be merged, you will be asked to register as a contributor by filling in a short form.
 

diff --git a/modules/experimental-layers/package.json b/modules/experimental-layers/package.json
@@ -16,21 +16,21 @@
     "type": "git",
     "url": "https://github.com/uber/deck.gl.git"
   },
-  "main": "dist/index.js",
-  "module": "dist-es6/index.js",
+  "main": "dist/es5/index.js",
+  "module": "dist/esm/index.js",
+  "esnext": "dist/es6/index.js",
   "files": [
     "dist",
-    "dist-es6",
-    "src"
+    "src",
+    "README.md"
   ],
   "sideEffects": false,
   "scripts": {
-    "build-clean": "rm -fr dist dist-es6 && mkdir -p dist dist-es6",
-    "build-es6": "rm -fr dist-es6 && BABEL_ENV=es6 babel src --out-dir dist-es6 --source-maps inline",
-    "build-es5": "rm -fr dist && BABEL_ENV=es5 babel src --out-dir dist --source-maps inline",
-    "build": "npm run build-clean && npm run build-es6 && npm run build-es5",
-    "test": "npm run lint && npm run build && npm run test-node",
-    "test-node": "node test/node.js"
+    "clean": "rm -fr dist dist-es6 && mkdir -p dist/es5 dist/esm dist/es6",
+    "build-es6": "BABEL_ENV=es6 babel src --out-dir dist/es6 --source-maps --ignore 'node_modules/'",
+    "build-esm": "BABEL_ENV=esm babel src --out-dir dist/esm --source-maps --ignore 'node_modules/'",
+    "build-es5": "BABEL_ENV=es5 babel src --out-dir dist/es5 --source-maps --ignore 'node_modules/'",
+    "build": "npm run clean && npm run build-es6 && npm run build-esm && npm run build-es5"
   },
   "dependencies": {
     "@deck.gl/core": "^6.3.0-alpha.1",

diff --git a/modules/experimental-layers/test/node-dist.js b/modules/experimental-layers/test/node-dist.js
diff --git a/modules/experimental-layers/test/node.js b/modules/experimental-layers/test/node.js
diff --git a/modules/json/.babelrc b/modules/json/.babelrc
@@ -0,0 +1,3 @@
+{
+  "extends": "../../.babelrc"
+}
diff --git a/modules/json/package.json b/modules/json/package.json
@@ -16,21 +16,21 @@
     "type": "git",
     "url": "https://github.com/uber/deck.gl.git"
   },
-  "main": "dist/index.js",
-  "module": "dist-es6/index.js",
+  "main": "dist/es5/index.js",
+  "module": "dist/esm/index.js",
+  "esnext": "dist/es6/index.js",
   "files": [
     "dist",
-    "dist-es6",
-    "src"
+    "src",
+    "README.md"
   ],
   "sideEffects": false,
   "scripts": {
-    "build-clean": "rm -fr dist dist-es6 && mkdir -p dist dist-es6",
-    "build-es6": "rm -fr dist-es6 && BABEL_ENV=es6 babel src --out-dir dist-es6 --source-maps inline",
-    "build-es5": "rm -fr dist && BABEL_ENV=es5 babel src --out-dir dist --source-maps inline",
-    "build": "npm run build-clean && npm run build-es6 && npm run build-es5",
-    "test": "npm run lint && npm run build && npm run test-node",
-    "test-node": "node test/node.js"
+    "clean": "rm -fr dist dist-es6 && mkdir -p dist/es5 dist/esm dist/es6",
+    "build-es6": "BABEL_ENV=es6 babel src --out-dir dist/es6 --source-maps --ignore 'node_modules/'",
+    "build-esm": "BABEL_ENV=esm babel src --out-dir dist/esm --source-maps --ignore 'node_modules/'",
+    "build-es5": "BABEL_ENV=es5 babel src --out-dir dist/es5 --source-maps --ignore 'node_modules/'",
+    "build": "npm run clean && npm run build-es6 && npm run build-esm && npm run build-es5"
   },
   "dependencies": {
     "@deck.gl/core": "^6.3.0-alpha.1",

diff --git a/modules/layers/package.json b/modules/layers/package.json
@@ -21,7 +21,8 @@
   "esnext": "dist/es6/index.js",
   "files": [
     "dist",
-    "src"
+    "src",
+    "README.md"
   ],
   "sideEffects": false,
   "scripts": {

diff --git a/modules/main/README.md b/modules/main/README.md
@@ -1,5 +1,70 @@
-# deck.gl "Main" Module
 
-This is an umbrella module for [deck.gl](http://deck.gl/#/) react users.
+# deck.gl
 
-Note: This module is mainly supported for legacy reasons, it just imports and re-exports the `@deck.gl/core`, `@deck.gl/layers` and `@deck.gl/react` modules.
+A WebGL2-powered, highly performant framework for large-scale data visualization.
+
+[API Documentation](http://deck.gl/#/documentation)
+
+[![docs](http://i.imgur.com/mvfvgf0.jpg)](https://uber.github.io/deck.gl)
+
+## Installation
+
+```
+npm install deck.gl
+```
+
+## Using deck.gl
+
+deck.gl offers an extensive catalog of pre-packaged visualization "layers", including [ScatterplotLayer](http://deck.gl/#/documentation/deckgl-api-reference/layers/scatterplot-layer), [ArcLayer](http://deck.gl/#/documentation/deckgl-api-reference/layers/arc-layer), [TextLayer](http://deck.gl/#/documentation/deckgl-api-reference/layers/text-layer), [GeoJsonLayer](http://deck.gl/#/documentation/deckgl-api-reference/layers/geojson-layer), etc. The input to a layer is usually an array of JSON objects. Each layer offers highly-flexible API to customize how the data should be rendered.
+
+Example constructing a deck.gl ScatterplotLayer: 
+
+```js
+import {ScatterplotLayer} from '@deck.gl/layers';
+
+/**
+ * data is an array of object in the shape of:
+ * {
+ *   "name":"Montgomery St. (MONT)",
+ *   "address":"598 Market Street, San Francisco CA 94104",
+ *   "entries":"43430",
+ *   "exits":"45128",
+ *   "coordinates":[-122.401407,37.789256]
+ * }
+ */
+const scatterplotLayer = new ScatterplotLayer({
+  id: 'bart-stations',
+  data: 'https://github.com/uber-common/deck.gl-data/blob/master/website/bart-stations.json',
+  getRadius: d => Math.sqrt(d.entries) / 100,
+  getPosition: d => d.coordinates,
+  getColor: [255, 228, 0],
+});
+```
+
+## Using deck.gl with React
+
+```js
+import DeckGL from 'deck.gl';
+
+<DeckGL width="100%" height="100%" longitude={-122.4} latitude={37.78} zoom={8} controller={true} layers={[scatterplotLayer]} />
+```
+
+## Using deck.gl with Pure JS
+
+```js
+import {Deck} from '@deck.gl/core';
+
+const deck = new Deck({
+  container: document.body,
+  width: '100vw',
+  height: '100vh',
+  longitude: -122.4,
+  latitude: 37.78,
+  zoom: 8,
+  controller: true,
+  layers: [scatterplotLayer]
+});
+```
+
+
+Questions? Submit an issue on our [GitHub page](https://www.github.com/uber/deck.gl/issues).
diff --git a/modules/main/package.json b/modules/main/package.json
@@ -19,7 +19,8 @@
   "files": [
     "dist",
     "deckgl.min.js",
-    "src"
+    "src",
+    "README.md"
   ],
   "scripts": {
     "build": "./build.sh",

diff --git a/modules/mapbox/package.json b/modules/mapbox/package.json
@@ -16,21 +16,21 @@
     "type": "git",
     "url": "https://github.com/uber/deck.gl.git"
   },
-  "main": "dist/index.js",
-  "module": "dist-es6/index.js",
+  "main": "dist/es5/index.js",
+  "module": "dist/esm/index.js",
+  "esnext": "dist/es6/index.js",
   "files": [
     "dist",
-    "dist-es6",
-    "src"
+    "src",
+    "README.md"
   ],
   "sideEffects": false,
   "scripts": {
-    "build-clean": "rm -fr dist dist-es6 && mkdir -p dist dist-es6",
-    "build-es6": "rm -fr dist-es6 && BABEL_ENV=es6 babel src --out-dir dist-es6 --source-maps inline",
-    "build-es5": "rm -fr dist && BABEL_ENV=es5 babel src --out-dir dist --source-maps inline",
-    "build": "npm run build-clean && npm run build-es6 && npm run build-es5",
-    "test": "npm run lint && npm run build && npm run test-node",
-    "test-node": "node test/node.js"
+    "clean": "rm -fr dist dist-es6 && mkdir -p dist/es5 dist/esm dist/es6",
+    "build-es6": "BABEL_ENV=es6 babel src --out-dir dist/es6 --source-maps --ignore 'node_modules/'",
+    "build-esm": "BABEL_ENV=esm babel src --out-dir dist/esm --source-maps --ignore 'node_modules/'",
+    "build-es5": "BABEL_ENV=es5 babel src --out-dir dist/es5 --source-maps --ignore 'node_modules/'",
+    "build": "npm run clean && npm run build-es6 && npm run build-esm && npm run build-es5"
   },
   "dependencies": {
     "@deck.gl/core": "^6.3.0-alpha.1"

diff --git a/modules/react/package.json b/modules/react/package.json
@@ -16,17 +16,21 @@
     "type": "git",
     "url": "https://github.com/uber/deck.gl.git"
   },
-  "main": "dist/index.js",
+  "main": "dist/es5/index.js",
+  "module": "dist/esm/index.js",
+  "esnext": "dist/es6/index.js",
   "files": [
     "dist",
-    "src"
+    "src",
+    "README.md"
   ],
   "sideEffects": false,
   "scripts": {
-    "build-clean": "rm -fr dist dist-es6 && mkdir -p dist dist-es6",
-    "build-es6": "rm -fr dist-es6 && BABEL_ENV=es6 babel src --out-dir dist-es6 --source-maps inline",
-    "build-es5": "rm -fr dist && BABEL_ENV=es5 babel src --out-dir dist --source-maps inline",
-    "build": "npm run build-clean && npm run build-es5"
+    "clean": "rm -fr dist dist-es6 && mkdir -p dist/es5 dist/esm dist/es6",
+    "build-es6": "BABEL_ENV=es6 babel src --out-dir dist/es6 --source-maps --ignore 'node_modules/'",
+    "build-esm": "BABEL_ENV=esm babel src --out-dir dist/esm --source-maps --ignore 'node_modules/'",
+    "build-es5": "BABEL_ENV=es5 babel src --out-dir dist/es5 --source-maps --ignore 'node_modules/'",
+    "build": "npm run clean && npm run build-es6 && npm run build-esm && npm run build-es5"
   },
   "dependencies": {
     "@deck.gl/core": "^6.3.0-alpha.1",