Switch to esbuild for faster builds and also to allow using more modern JavaScript syntax and features

.circleci/config.yml

@@ -75,7 +75,7 @@ jobs:
     environment:
       # Alaska time (arbitrary timezone to test date logic)
       TZ: "America/Anchorage"
-    parallelism: 12
+    parallelism: 4
     working_directory: ~/plotly.js
     steps:
       - run: sudo apt-get update

CUSTOM_BUNDLE.md

@@ -55,26 +55,20 @@ npm run custom-bundle -- --traces scatter,scattergl --strict
 ```
 
 Use the `out` option to change the bundle filename (default `custom`).
-The new bundle will be created in the `dist/` directory and named `plotly-<out>.min.js` or `plotly-<out>.js` if unminified.
+The new bundle will be created in the `dist/` directory and named `plotly-<out>.js` and `plotly-<out>.min.js` for minified.
 ```sh
 npm run custom-bundle -- --out myBundleName
 ```
 
-Use the `unminified` option to disable compression.
-```sh
-npm run custom-bundle -- --unminified
-```
-
 # Example illustrating use of different options together
-To create an unminified custom bundle named `myScatters` including `scatter`, `scattergl` and `scatter3d` traces without any transforms:
+To create a custom bundle named `myScatters` including `scatter`, `scattergl` and `scatter3d` traces without any transforms:
 ```sh
 npm run custom-bundle -- \
-    --unminified \
     --out myScatters \
     --traces scatter,scattergl,scatter3d \
     --transforms none
 ```
 Or simply on one line:
 ```sh
-npm run custom-bundle -- --unminified --out myScatters --traces scatter,scattergl,scatter3d --transforms none
+npm run custom-bundle -- --out myScatters --traces scatter,scattergl,scatter3d --transforms none
 ```

devtools/regl_codegen/server.js → devtools/regl_codegen/server.mjs

@@ -1,14 +1,13 @@
-var fs = require('fs');
-var path = require('path');
-var http = require('http');
-var ecstatic = require('ecstatic');
-var open = require('open');
-var webpack = require('webpack');
-var minimist = require('minimist');
-
-var constants = require('../../tasks/util/constants');
-var config = require('../../webpack.config.js');
-config.optimization = { minimize: false };
+import fs from 'fs';
+import path from 'path';
+import http from 'http';
+import ecstatic from 'ecstatic';
+import open from 'open';
+import minimist from 'minimist';
+
+import constants from '../../tasks/util/constants.js';
+import { build } from 'esbuild';
+import config from '../../esbuild-config.js';
 
 var args = minimist(process.argv.slice(2), {});
 var PORT = args.port || 3000;
@@ -21,6 +20,8 @@ var reglTraceList = [
     'splom'
 ];
 
+
+
 // Create server
 var _static = ecstatic({
     root: constants.pathToRoot,
@@ -57,55 +58,25 @@ var server = http.createServer(function(req, res) {
     }
 });
 
-
-// Start the server up!
-server.listen(PORT);
-
-// open up browser window
-open('http://localhost:' + PORT + '/devtools/regl_codegen/index' + (strict ? '-strict' : '') + '.html');
-
 // Build and bundle all the things!
-getMockFiles()
+await getMockFiles()
     .then(readFiles)
     .then(createMocksList)
     .then(saveMockListToFile)
     .then(saveReglTracesToFile.bind(null, reglTraceList));
 
-// Devtools config
-var devtoolsConfig = {};
-
-var devtoolsPath = path.join(constants.pathToRoot, 'devtools/regl_codegen');
-devtoolsConfig.entry = path.join(devtoolsPath, 'devtools.js');
-
-devtoolsConfig.output = {
-    path: config.output.path,
-    filename: 'regl_codegen-bundle.js',
-    library: {
-        name: 'Tabs',
-        type: 'umd'
-    }
-};
-
-devtoolsConfig.target = config.target;
-devtoolsConfig.plugins = config.plugins;
-devtoolsConfig.optimization = config.optimization;
-devtoolsConfig.mode = 'production';
-
-var compiler;
-
-compiler = webpack(devtoolsConfig);
-compiler.run(function(devtoolsErr, devtoolsStats) {
-    if(devtoolsErr) {
-        console.log('err:', devtoolsErr);
-    } else if(devtoolsStats.errors && devtoolsStats.errors.length) {
-        console.log('stats.errors:', devtoolsStats.errors);
-    } else {
-        console.log('success:', devtoolsConfig.output.path + '/' + devtoolsConfig.output.filename);
+// Start the server up!
+server.listen(PORT);
 
-        purgeGeneratedCode(reglTraceList);
-    }
-});
+// open up browser window
+open('http://localhost:' + PORT + '/devtools/regl_codegen/index' + (strict ? '-strict' : '') + '.html');
 
+var devtoolsPath = path.join(constants.pathToRoot, 'devtools/regl_codegen');
+config.entryPoints = [path.join(devtoolsPath, 'devtools.js')];
+config.outfile = './build/regl_codegen-bundle.js';
+config.sourcemap = false;
+config.minify = false;
+await build(config);
 
 function getMockFiles() {
     return new Promise(function(resolve, reject) {
@@ -240,18 +211,3 @@ function handleCodegen(data) {
     var precompiled = header + imports + exports;
     fs.writeFileSync(pathToReglPrecompiledSrc, precompiled);
 }
-
-
-function purgeGeneratedCode(traces) {
-    var pathToReglCodegenSrc = constants.pathToReglCodegenSrc;
-
-    var files = fs.readdirSync(pathToReglCodegenSrc);
-    files.forEach(function(file) {
-        fs.unlinkSync(path.join(pathToReglCodegenSrc, file));
-    });
-
-    traces.forEach(function(trace) {
-        var pathToReglPrecompiledSrc = path.join(constants.pathToSrc, 'traces', trace, 'regl_precompiled.js');
-        fs.writeFileSync(pathToReglPrecompiledSrc, 'module.exports = {};\n');
-    });
-}

devtools/test_dashboard/index.html

@@ -22,7 +22,7 @@
   <div id="snapshot"></div>
 
   <script src="../../node_modules/mathjax-v2/MathJax.js?config=TeX-AMS-MML_SVG"></script>
-  <script charset="utf-8" id="source" src="../../build/plotly.js" type="module"></script>
+  <script charset="utf-8" id="source" src="../../build/plotly.js"></script>
   <script charset="utf-8" src="../../build/test_dashboard-bundle.js"></script>
 </body>
 </html>