Change build targets (visgl#5528)

jcolot · Feb 25, 2021 · ecd82ba · ecd82ba
1 parent de1054d
commit ecd82ba
Show file tree

Hide file tree

Showing 22 changed files with 30 additions and 59 deletions.
diff --git a/.nycrc b/.nycrc
@@ -1,5 +1,7 @@
 {
-  "extends": "node_modules/ocular-dev-tools/templates/.nycrc",
+  "all": "true",
+  "sourceMap": false,
+  "instrument": true,
   "include": [
     "modules/**/src/**/*.js"
   ],

diff --git a/docs/developer-guide/building-apps.md b/docs/developer-guide/building-apps.md
@@ -10,22 +10,18 @@ deck.gl and luma.gl provide a lot of functionality and the amount of code these
 There are multiple techniques used in JavaScript.
 
 
-### Choosing a dist folder
+### Choosing an entry point
 
-When installed from npm, deck.gl and related libraries come with three separate `dist` sub folders.
+When installed from npm, deck.gl and related libraries come with two separate distributions.
 
-| Folder     | `mainField` | Description   |
+| Directory     | `mainField` | Description   |
 | ---        | ---         | --- |
-| `dist/es5` | `main`      | All code is transpiled into ES5 and exports/imports are transpiled into `commonjs` requires. The main reason to use this distribution is if your bundler does not support tree-shaking using `import`/`export` |
+| `dist/es5` | `main`      | All code is transpiled to be compatible with the most commonly adopted evergreen browsers (see below). Exports/imports are transpiled into `commonjs` requires. The main reason to use this distribution is under Node.js (e.g. unit tests), or if your bundler does not support tree-shaking using `import`/`export`. |
 | `dist/esm` | `module`    | Same as `dist/es5`, except `export` and `import` statements are left untranspiled to enable tree shaking. |
-| `dist/es6` | `esnext`    | This distribution uses `babel-preset-env` and with very few exceptions essentially untranspiled ES6/ES2015 code. This is the smallest distribution, that will three-shake best, and is intended to be the best choice if you are only targeting "evergreen" browsers. |
 
-You will have to check the documentation of your particular bundler to see what configuration options are available:
+You will have to check the documentation of your particular bundler to see what configuration options are available. Webpack picks `module` main field over `main` if it is available. You can also explicitly choose one distribution by specifying a `resolve.mainFields` array.
 
-* Webpack 4 allows you to choose the `esnext` distribution by specifying a `resolve.mainFields` array.
-* Webpack 2 and later will pick `module` main field over `main` if it is available.
-
-For other bundlers, please refer to the respective documentation.
+The transpilation target is set to `>0.2%, maintained node versions, not ie 11, not dead, not chrome 49` resolved by [browserslist](https://github.com/browserslist/browserslist). To support older or less common browsers, you may use `@babel/preset-ev` in your babel settings and include `node_modules`.
 
 
 ### About Tree-Shaking
@@ -40,20 +36,19 @@ Note that tree-shaking still has limitations:
 * Naturally, an application that uses all the functionality offered by the library will benefit little from tree shaking, whereas a small app that only uses a few layers should expect bigger savings.
 
 
-### Bundle Size Number
+### Bundle Size Numbers
 
 So, what bundle size impact should you expect? When do you know if you have set up your bundler optimally. To help answer these questions, we provide some numbers you can compare against. deck.gl has scripts that measure the size of a minified bundle after each build, which allows us to provide comparison numbers between releases.
 
-| Dist | 6.0 Bundle (Compressed) | 5.2 Bundle (Compr.) | 5.1 Bundle (Compr.) | Comments |
-| ---  | ---                     | ---                 | ---                 | ---      |
-| ES6  | 530 KB (142 KB)         | 527 KB (141 KB)     | N/A                 | Minimally transpiled, almost "pure" ES6 |
-| ESM  | 633 KB (153 KB)         | 715 KB (159 KB)     | 708 KB (169 KB)     | Transpiled, tree-shaking enabled   |
-| ES5  | 695 KB (167 KB)         | 748 KB (166 KB)     | 754 KB (176 KB)     | Transpiled to ES5, no tree-shaking |
+| Entry point | 8.5 Bundle (Compressed) | 8.4 Bundle (Compressed) | Comments |
+| ---  | ---                     | ---                 | ---                 |
+| esm  | 398 KB (115 KB)         | 485 KB (128 KB)     | Transpiled, tree-shaking enabled   |
+| es5  | 686 KB (178 KB)         | 812 KB (197 KB)     | Transpiled, no tree-shaking |
 
 Notes:
 
-* Numbers represent the minified bundle size of a minimal application, bundled with Webpack 4, which means that the ES6 and ESM distribution results benefit from some tree shaking.
-* The number in parenthesis is the compressed bundle size. This is how much bigger you might expect your compressed bundle to get by adding deck.gl as a dependency to your application.
+* Numbers represent the bundle size of a minimal application, bundled with Webpack 4, which means that the untransipiled and the ESM distribution results benefit from some tree shaking.
+* The number in parenthesis is the compressed bundle size. This is how much bigger you might expect your gzipped bundle to get by adding deck.gl as a dependency to your application.
 
 
 ### Future Work

diff --git a/docs/upgrade-guide.md b/docs/upgrade-guide.md
@@ -2,6 +2,12 @@
 
 ## Upgrading from deck.gl v8.4 to v8.5
 
+### Transpilation
+
+The module entry point is now only lightly transpiled for the most commonly used evergreen browsers. This change offers significant savings on bundle size. If your application needs to support older browsers such as IE 11, make sure to include `node_modules` in your babel config.
+
+### Layers
+
 - `TextLayer`'s `backgroundColor` prop is deprecated. Use `background: true` and `getBackgroundColor` instead.
 - `TextLayer`'s default `fontSettings` have changed. When using `sdf`, the default `buffer` is now `4` and the default `radius` is now `12`.
 - `PathLayer`'s `rounded` prop is deprecated, replaced by two separate flags `jointRounded` and `capRounded`.

diff --git a/modules/aggregation-layers/package.json b/modules/aggregation-layers/package.json
@@ -18,7 +18,6 @@
   },
   "main": "dist/es5/index.js",
   "module": "dist/esm/index.js",
-  "esnext": "dist/es6/index.js",
   "files": [
     "dist",
     "src",

diff --git a/modules/arcgis/package.json b/modules/arcgis/package.json
@@ -18,7 +18,6 @@
   },
   "main": "dist/es5/index.js",
   "module": "dist/esm/index.js",
-  "esnext": "dist/es6/index.js",
   "files": [
     "dist",
     "src",

diff --git a/modules/carto/package.json b/modules/carto/package.json
@@ -20,7 +20,6 @@
   },
   "main": "dist/es5/index.js",
   "module": "dist/esm/index.js",
-  "esnext": "dist/es6/index.js",
   "files": [
     "dist",
     "src",

diff --git a/modules/core/package.json b/modules/core/package.json
@@ -18,7 +18,6 @@
   },
   "main": "dist/es5/index.js",
   "module": "dist/esm/index.js",
-  "esnext": "dist/es6/index.js",
   "files": [
     "dist",
     "src",

diff --git a/modules/extensions/package.json b/modules/extensions/package.json
@@ -18,7 +18,6 @@
   },
   "main": "dist/es5/index.js",
   "module": "dist/esm/index.js",
-  "esnext": "dist/es6/index.js",
   "files": [
     "dist",
     "src",

diff --git a/modules/geo-layers/package.json b/modules/geo-layers/package.json
@@ -18,7 +18,6 @@
   },
   "main": "dist/es5/index.js",
   "module": "dist/esm/index.js",
-  "esnext": "dist/es6/index.js",
   "files": [
     "dist",
     "src",

diff --git a/modules/google-maps/package.json b/modules/google-maps/package.json
@@ -18,7 +18,6 @@
   },
   "main": "dist/es5/index.js",
   "module": "dist/esm/index.js",
-  "esnext": "dist/es6/index.js",
   "files": [
     "dist",
     "src",

diff --git a/modules/json/package.json b/modules/json/package.json
@@ -18,7 +18,6 @@
   },
   "main": "dist/es5/index.js",
   "module": "dist/esm/index.js",
-  "esnext": "dist/es6/index.js",
   "files": [
     "dist",
     "src",

diff --git a/modules/layers/package.json b/modules/layers/package.json
@@ -17,7 +17,6 @@
   },
   "main": "dist/es5/index.js",
   "module": "dist/esm/index.js",
-  "esnext": "dist/es6/index.js",
   "files": [
     "dist",
     "src",

diff --git a/modules/main/package.json b/modules/main/package.json
@@ -15,7 +15,6 @@
   },
   "main": "dist/es5/index.js",
   "module": "dist/esm/index.js",
-  "esnext": "dist/es6/index.js",
   "files": [
     "dist",
     "src",

diff --git a/modules/mapbox/package.json b/modules/mapbox/package.json
@@ -18,7 +18,6 @@
   },
   "main": "dist/es5/index.js",
   "module": "dist/esm/index.js",
-  "esnext": "dist/es6/index.js",
   "files": [
     "dist",
     "src",

diff --git a/modules/mesh-layers/package.json b/modules/mesh-layers/package.json
@@ -18,7 +18,6 @@
   },
   "main": "dist/es5/index.js",
   "module": "dist/esm/index.js",
-  "esnext": "dist/es6/index.js",
   "files": [
     "dist",
     "src",

diff --git a/modules/react/package.json b/modules/react/package.json
@@ -18,7 +18,6 @@
   },
   "main": "dist/es5/index.js",
   "module": "dist/esm/index.js",
-  "esnext": "dist/es6/index.js",
   "files": [
     "dist",
     "src"

diff --git a/modules/test-utils/package.json b/modules/test-utils/package.json
@@ -18,7 +18,6 @@
   },
   "main": "dist/es5/index.js",
   "module": "dist/esm/index.js",
-  "esnext": "dist/es6/index.js",
   "files": [
     "dist",
     "src"

diff --git a/package.json b/package.json
@@ -64,7 +64,7 @@
     "gl": "^4.9.0",
     "glsl-transpiler": "^1.8.3",
     "jsdom": "^15.0.0",
-    "ocular-dev-tools": "^0.2.3",
+    "ocular-dev-tools": "^0.3.0",
     "pre-commit": "^1.2.2",
     "pre-push": "^0.1.1",
     "raw-loader": "^0.5.1",

diff --git a/scripts/bundle.config.js b/scripts/bundle.config.js
@@ -60,7 +60,7 @@ const config = {
         // Compile ES2015 using babel
         test: /\.js$/,
         loader: 'babel-loader',
-        include: [/src/, /bundle/],
+        include: [/src/, /bundle/, /esm/],
         options: {
           presets: [['@babel/preset-env', {forceAllTransforms: true}]],
           // all of the helpers will reference the module @babel/runtime to avoid duplication

diff --git a/test/bench/node.js b/test/bench/node.js
@@ -1,12 +1,3 @@
-require('@babel/register')({
-  presets: [
-    [
-      '@babel/env',
-      {
-        targets: {node: '14'}
-      }
-    ]
-  ]
-});
+require('@babel/register');
 
 require('./index');
diff --git a/test/node.js b/test/node.js
@@ -1,13 +1,4 @@
-require('@babel/register')({
-  presets: [
-    [
-      '@babel/env',
-      {
-        targets: {node: '14'}
-      }
-    ]
-  ]
-});
+require('@babel/register');
 
 // Polyfill for loaders
 // TODO - @loaders.gl/polyfills seems to freeze the tests

diff --git a/yarn.lock b/yarn.lock
@@ -8772,10 +8772,10 @@ octokit-pagination-methods@^1.1.0:
   resolved "https://registry.yarnpkg.com/octokit-pagination-methods/-/octokit-pagination-methods-1.1.0.tgz#cf472edc9d551055f9ef73f6e42b4dbb4c80bea4"
   integrity sha512-fZ4qZdQ2nxJvtcasX7Ghl+WlWS/d9IgnBIwFZXVNNZUmzpno91SX5bc5vuxiuKoCtK78XxGGNuSCrDC7xYB3OQ==
 
-ocular-dev-tools@^0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/ocular-dev-tools/-/ocular-dev-tools-0.2.3.tgz#b9a6b44342e6ff51c2d303c2ff7367c524d031c7"
-  integrity sha512-r12HhjfpjCzsx/DH/zJn0s9kkWA4Tf0zVvt43i2jEseS2zB2N9NTbCIp71WI8O3vFcHpU+Pnr3yhePCeLR0eMw==
+ocular-dev-tools@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/ocular-dev-tools/-/ocular-dev-tools-0.3.0.tgz#772732393dc678ba98af77ad02c1143b6d7d02fc"
+  integrity sha512-rXbr6S8QlvBSz2KUXVVQjh39YATpKR6/e1xJoIYgVNvOrKnDEaLTgKHXBLQcb9wdiK+KqkN3oXvwi2Zj5eo+ew==
   dependencies:
     "@babel/cli" "^7.8.7"
     "@babel/core" "^7.8.7"