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

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>

devtools/test_dashboard/server.mjs

@@ -0,0 +1,140 @@
+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 { context } from 'esbuild';
+import config from '../../esbuild-config.js';
+
+var args = minimist(process.argv.slice(2), {});
+var PORT = args.port || 3000;
+var strict = args.strict;
+var mathjax3 = args.mathjax3;
+var mathjax3chtml = args.mathjax3chtml;
+
+if(strict) {
+    config.entryPoints = ['./lib/index-strict.js'];
+}
+
+config.outfile = './build/plotly.js';
+
+var mockFolder = constants.pathToTestImageMocks;
+
+// mock list
+getMockFiles()
+    .then(readFiles)
+    .then(createMocksList)
+    .then(saveMockListToFile);
+
+var ctx = await context(config);
+devServer();
+console.log('watching esbuild...');
+await ctx.watch();
+
+function devServer() {
+    var server = http.createServer(ecstatic({
+        root: constants.pathToRoot,
+        cache: 0,
+        gzip: true,
+        cors: true
+    }));
+
+    // Start the server up!
+    server.listen(PORT);
+
+    // open up browser window
+    open('http://localhost:' + PORT + '/devtools/test_dashboard/index' + (
+        strict ? '-strict' :
+        mathjax3 ? '-mathjax3' :
+        mathjax3chtml ? '-mathjax3chtml' : ''
+    ) + '.html');
+}
+
+function getMockFiles() {
+    return new Promise(function(resolve, reject) {
+        fs.readdir(mockFolder, function(err, files) {
+            if(err) {
+                reject(err);
+            } else {
+                resolve(files);
+            }
+        });
+    });
+}
+
+function readFiles(files) {
+    var promises = files.map(function(file) {
+        var filePath = path.join(mockFolder, file);
+        return readFilePromise(filePath);
+    });
+
+    return Promise.all(promises);
+}
+
+function createMocksList(files) {
+    // eliminate pollutants (e.g .DS_Store) that can accumulate in the mock directory
+    var jsonFiles = files.filter(function(file) {
+        return file.name.substr(-5) === '.json';
+    });
+
+    var mocksList = jsonFiles.map(function(file) {
+        var contents = JSON.parse(file.contents);
+
+        // get plot type keywords from mocks
+        var types = contents.data.map(function(trace) {
+            return trace.type || 'scatter';
+        }).reduce(function(acc, type, i, arr) {
+            if(arr.lastIndexOf(type) === i) {
+                acc.push(type);
+            }
+            return acc;
+        }, []);
+
+        var filename = file.name.split(path.sep).pop();
+
+        return {
+            name: filename.slice(0, -5),
+            file: filename,
+            keywords: types.join(', ')
+        };
+    });
+
+    return mocksList;
+}
+
+function saveMockListToFile(mocksList) {
+    var filePath = path.join(constants.pathToBuild, 'test_dashboard_mocks.json');
+    var content = JSON.stringify(mocksList, null, 4);
+
+    return writeFilePromise(filePath, content);
+}
+
+function readFilePromise(file) {
+    return new Promise(function(resolve, reject) {
+        fs.readFile(file, { encoding: 'utf-8' }, function(err, contents) {
+            if(err) {
+                reject(err);
+            } else {
+                resolve({
+                    name: file,
+                    contents: contents
+                });
+            }
+        });
+    });
+}
+
+function writeFilePromise(path, contents) {
+    return new Promise(function(resolve, reject) {
+        fs.writeFile(path, contents, function(err) {
+            if(err) {
+                reject(err);
+            } else {
+                resolve(path);
+            }
+        });
+    });
+}

draftlogs/6909_change.md

@@ -0,0 +1 @@
+ - Switch from webpack to esbuild for fast builds & testing as well as allowing modern JavaScript beyond es5 [[#6909](https://github.com/plotly/plotly.js/pull/6909)]

draftlogs/7124_change.md

@@ -0,0 +1,2 @@
+ - Update esbuild to v23.1; Node v18 required for development [[#7116](https://github.com/plotly/plotly.js/pull/7124)]
+

esbuild-config.js

@@ -0,0 +1,29 @@
+var glsl = require('esbuild-plugin-glsl').glsl;
+var environmentPlugin = require('esbuild-plugin-environment').environmentPlugin;
+const stylePlugin = require('esbuild-style-plugin');
+
+module.exports = {
+    entryPoints: ['./lib/index.js'],
+    format: 'iife',
+    globalName: 'Plotly',
+    bundle: true,
+    minify: false,
+    sourcemap: false,
+    plugins: [
+        stylePlugin(),
+        glsl({
+            minify: true,
+        }),
+        environmentPlugin({
+            NODE_DEBUG: false,
+        }),
+    ],
+    alias: {
+        stream: 'stream-browserify',
+    },
+    define: {
+        global: 'window',
+    },
+    target: 'es2016',
+    logLevel: 'info',
+};

package.json

@@ -20,39 +20,42 @@
     "visualization",
     "plotly"
   ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "scripts": {
-    "custom-bundle": "node tasks/custom_bundle.js",
-    "bundle": "node tasks/bundle.js",
-    "extra-bundles": "node tasks/extra_bundles.js",
+    "custom-bundle": "node tasks/custom_bundle.mjs",
+    "bundle": "node tasks/bundle.mjs",
+    "extra-bundles": "node tasks/extra_bundles.mjs",
     "locales": "node tasks/locales.js",
-    "schema": "node tasks/schema.js",
+    "schema": "node tasks/schema.mjs",
     "stats": "node tasks/stats.js",
     "find-strings": "node tasks/find_locale_strings.js",
     "preprocess": "node tasks/preprocess.js",
     "use-draftlogs": "node tasks/use_draftlogs.js",
     "empty-draftlogs": "node tasks/empty_draftlogs.js",
     "empty-dist": "node tasks/empty_dist.js",
     "build": "npm run empty-dist && npm run preprocess && npm run find-strings && npm run bundle && npm run extra-bundles && npm run locales && npm run schema dist && npm run stats",
-    "regl-codegen": "node devtools/regl_codegen/server.js",
-    "cibuild": "npm run empty-dist && npm run preprocess && node tasks/cibundle.js",
+    "regl-codegen": "node devtools/regl_codegen/server.mjs",
+    "cibuild": "npm run empty-dist && npm run preprocess && node tasks/cibundle.mjs",
     "lint": "npx @biomejs/biome lint",
     "lint-fix": "npx @biomejs/biome format ./test/image/mocks --write; npx @biomejs/biome lint --write || true",
     "pretest": "node tasks/pretest.js",
     "test-jasmine": "karma start test/jasmine/karma.conf.js",
-    "test-mock": "node tasks/test_mock.js",
+    "test-mock": "node tasks/test_mock.mjs",
     "test-image": "node test/image/compare_pixels_test.js",
     "test-export": "node test/image/export_test.js",
     "test-syntax": "node tasks/test_syntax.js && npm run find-strings -- --no-output",
     "test-bundle": "node tasks/test_bundle.js",
     "test-amdefine": "node tasks/test_amdefine.js",
     "test-requirejs": "node tasks/test_requirejs.js",
-    "test-plain-obj": "node tasks/test_plain_obj.js",
+    "test-plain-obj": "node tasks/test_plain_obj.mjs",
     "test": "npm run test-jasmine -- --nowatch && npm run test-bundle && npm run test-image && npm run test-export && npm run test-syntax && npm run lint",
-    "b64": "python3 test/image/generate_b64_mocks.py && node devtools/test_dashboard/server.js",
-    "mathjax3": "node devtools/test_dashboard/server.js --mathjax3",
-    "mathjax3chtml": "node devtools/test_dashboard/server.js --mathjax3chtml",
-    "strict": "node devtools/test_dashboard/server.js --strict",
-    "start": "node devtools/test_dashboard/server.js",
+    "b64": "python3 test/image/generate_b64_mocks.py && node devtools/test_dashboard/server.mjs",
+    "mathjax3": "node devtools/test_dashboard/server.mjs --mathjax3",
+    "mathjax3chtml": "node devtools/test_dashboard/server.mjs --mathjax3chtml",
+    "strict": "node devtools/test_dashboard/server.mjs --strict",
+    "start": "node devtools/test_dashboard/server.mjs",
     "baseline": "node test/image/make_baseline.js",
     "noci-baseline": "npm run cibuild && ./tasks/noci_test.sh image && git checkout dist && echo 'Please do not commit unless the change was expected!'",
     "preversion": "check-node-version --node 18 --npm 10 && npm-link-check && npm ls --prod --all",
@@ -90,6 +93,7 @@
     "d3-interpolate": "^3.0.1",
     "d3-time": "^1.1.0",
     "d3-time-format": "^2.2.3",
+    "esbuild-style-plugin": "^1.6.3",
     "fast-isnumeric": "^1.1.4",
     "gl-mat4": "^1.2.0",
     "gl-text": "^1.4.0",
@@ -121,19 +125,21 @@
     "world-calendars": "^1.0.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@babel/plugin-transform-modules-commonjs": "^7.23.3",
-    "@babel/preset-env": "^7.23.9",
     "@biomejs/biome": "1.8.3",
     "amdefine": "^1.0.1",
-    "babel-loader": "^9.1.3",
+    "assert": "^2.1.0",
     "browserify-transform-tools": "^1.7.0",
     "bubleify": "^2.0.0",
+    "buffer": "^6.0.3",
     "canvas": "^2.11.2",
     "check-node-version": "^4.2.1",
     "chttps": "^1.0.6",
     "deep-equal": "^2.2.3",
     "ecstatic": "^4.1.4",
+    "esbuild": "^0.23.1",
+    "esbuild-plugin-browserify-adapter": "^0.1.4",
+    "esbuild-plugin-environment": "^0.4.0",
+    "esbuild-plugin-glsl": "^1.2.2",
     "extra-iterable": "^2.5.22",
     "falafel": "^2.2.5",
     "fs-extra": "^10.1.0",
@@ -147,20 +153,19 @@
     "jsdom": "^24.1.1",
     "karma": "^6.4.2",
     "karma-chrome-launcher": "^3.2.0",
+    "karma-esbuild": "^2.3.0",
     "karma-firefox-launcher": "^2.1.2",
     "karma-ie-launcher": "^1.0.0",
     "karma-jasmine": "^3.3.1",
     "karma-jasmine-spec-tags": "^1.3.0",
     "karma-spec-reporter": "^0.0.36",
     "karma-verbose-reporter": "^0.0.8",
     "karma-viewport": "1.0.2",
-    "karma-webpack": "^5.0.0",
     "lodash": "^4.17.21",
     "madge": "^8.0.0",
     "mathjax-v2": "npm:mathjax@2.7.5",
     "mathjax-v3": "npm:mathjax@^3.2.2",
     "minify-stream": "^2.1.0",
-    "node-polyfill-webpack-plugin": "^4.0.0",
     "npm-link-check": "^5.0.1",
     "open": "^8.4.2",
     "pixelmatch": "^5.3.0",
@@ -175,8 +180,6 @@
     "through2": "^4.0.2",
     "transform-loader": "^0.2.4",
     "true-case-path": "^2.2.1",
-    "virtual-webgl": "^1.0.6",
-    "webpack": "^5.90.1",
-    "webpack-cli": "^5.1.4"
+    "virtual-webgl": "^1.0.6"
   }
 }

src/components/drawing/symbol_defs.js

@@ -1,7 +1,10 @@
 'use strict';
 
 var parseSvgPath = require('parse-svg-path');
-var round = require('@plotly/d3').round;
+var round = // require('@plotly/d3').round;
+    function(x, n) {
+        return n ? Math.round(x * (n = Math.pow(10, n))) / n : Math.round(x);
+    };
 
 /** Marker symbol definitions
  * users can specify markers either by number or name

src/plots/map/constants.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var sortObjectKeys = require('../../lib/sort_object_keys');
-var arcgisSatHybrid = require('./styles/arcgis-sat-hybrid.json'); // https://raw.githubusercontent.com/go2garret/maps/v1.0.0/LICENSE
-var arcgisSat = require('./styles/arcgis-sat.json');
+var arcgisSatHybrid = require('./styles/arcgis-sat-hybrid'); // https://raw.githubusercontent.com/go2garret/maps/v1.0.0/LICENSE
+var arcgisSat = require('./styles/arcgis-sat');
 
 
 var OSM = '© <a target="_blank" href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';

src/plots/map/styles/arcgis-sat-hybrid.json → src/plots/map/styles/arcgis-sat-hybrid.js

@@ -1,4 +1,4 @@
-{
+module.exports = {
   "version": 8,
   "name": "orto",
   "metadata": {"maputnik:renderer": "mlgljs"},
@@ -2013,4 +2013,4 @@
     }
   ],
   "id": "qebnlkra6"
-}
+};

src/plots/map/styles/arcgis-sat.json → src/plots/map/styles/arcgis-sat.js

@@ -1,4 +1,4 @@
-{
+module.exports = {
   "version": 8,
   "name": "orto",
   "metadata": {},
@@ -90,4 +90,4 @@
           }
       }
   ]
-}
+};

tasks/bundle.js → tasks/bundle.mjs

@@ -1,9 +1,9 @@
-var runSeries = require('run-series');
-var prependFile = require('prepend-file');
+import runSeries from 'run-series';
+import prependFile from 'prepend-file';
 
-var constants = require('./util/constants');
-var common = require('./util/common');
-var _bundle = require('./util/bundle_wrapper');
+import constants from './util/constants.js';
+import common from './util/common.js';
+import _bundle from './util/bundle_wrapper.mjs';
 
 var header = constants.licenseDist + '\n';
 var pathToPlotlyDist = constants.pathToPlotlyDist;
@@ -34,9 +34,18 @@ var tasks = [];
 // Bundle plotly.js
 tasks.push(function(done) {
     _bundle(pathToPlotlyIndex, pathToPlotlyDist, {
-        pathToMinBundle: pathToPlotlyDistMin
     }, function() {
         prependFile.sync(pathToPlotlyDist, header, common.throwOnError);
+
+        done();
+    });
+});
+
+// Bundle plotly.min.js
+tasks.push(function(done) {
+    _bundle(pathToPlotlyIndex, pathToPlotlyDistMin, {
+        minify: true,
+    }, function() {
         prependFile.sync(pathToPlotlyDistMin, header, common.throwOnError);
 
         done();
@@ -46,9 +55,18 @@ tasks.push(function(done) {
 // Bundle plotly.js-strict
 tasks.push(function(done) {
     _bundle(pathToPlotlyStrict, pathToPlotlyStrictDist, {
-        pathToMinBundle: pathToPlotlyStrictDistMin
     }, function() {
         prependFile.sync(pathToPlotlyStrictDist, header.replace('plotly.js', 'plotly.js (strict)'), common.throwOnError);
+
+        done();
+    });
+});
+
+// Bundle plotly.min.js-strict
+tasks.push(function(done) {
+    _bundle(pathToPlotlyStrict, pathToPlotlyStrictDistMin, {
+        minify: true,
+    }, function() {
         prependFile.sync(pathToPlotlyStrictDistMin, header.replace('plotly.js', 'plotly.js (strict - minified)'), common.throwOnError);
 
         done();
@@ -58,6 +76,7 @@ tasks.push(function(done) {
 // Bundle the geo assets
 tasks.push(function(done) {
     _bundle(pathToPlotlyGeoAssetsSrc, pathToPlotlyGeoAssetsDist, {
+        noPlugins: true,
         standalone: 'PlotlyGeoAssets'
     }, function() {
         prependFile.sync(pathToPlotlyGeoAssetsDist, header, common.throwOnError);
@@ -69,7 +88,7 @@ tasks.push(function(done) {
 // Bundle plotly.js with meta
 tasks.push(function(done) {
     _bundle(pathToPlotlyIndex, pathToPlotlyDistWithMeta, {
-        noCompress: true
+        noCompressAttributes: true
     }, function() {
         prependFile.sync(pathToPlotlyDistWithMeta, header, common.throwOnError);
 

tasks/cibundle.mjs

@@ -0,0 +1,44 @@
+import runSeries from 'run-series';
+import constants from './util/constants.js';
+import _bundle from './util/bundle_wrapper.mjs';
+
+/*
+ * Trimmed down version of ./bundle.js for CI testing
+ *
+ * Outputs:
+ *
+ *  - plotly.js bundle in build/
+ *  - plotly-geo-assets.js bundle in build/ (in accordance with test/image/index.html)
+ *  - plotly.min.js bundle in build/ (for minified_bundle test)
+ */
+
+// list of tasks to pass to run-series to not blow up
+// memory consumption.
+var tasks = [];
+
+// Bundle plotly.js
+tasks.push(function(done) {
+    _bundle(constants.pathToPlotlyIndex, constants.pathToPlotlyBuild, {
+        noCompressAttributes: true,
+    }, done)
+});
+
+// Bundle plotly.min.js
+tasks.push(function(done) {
+    _bundle(constants.pathToPlotlyIndex, constants.pathToPlotlyBuildMin, {
+        minify: true,
+        noCompressAttributes: true,
+    }, done)
+});
+
+// Bundle the geo assets
+tasks.push(function(done) {
+    _bundle(constants.pathToPlotlyGeoAssetsSrc, constants.pathToPlotlyGeoAssetsDist, {
+        noPlugins: true,
+        standalone: 'PlotlyGeoAssets'
+    }, done)
+});
+
+runSeries(tasks, function(err) {
+    if(err) throw err;
+});

tasks/custom_bundle.js → tasks/custom_bundle.mjs

@@ -1,9 +1,9 @@
-var path = require('path');
-var minimist = require('minimist');
-var runSeries = require('run-series');
+import path from 'path';
+import minimist from 'minimist';
+import runSeries from 'run-series';
 
-var partialBundle = require('./partial_bundle');
-var constants = require('./util/constants');
+import partialBundle from './partial_bundle.mjs';
+import constants from './util/constants.js';
 
 var allTransforms = constants.allTransforms;
 var allTraces = constants.allTraces;
@@ -67,11 +67,8 @@ if(process.argv.length > 2) {
         strict: strict,
     };
 
-    if(unminified) {
-        opts.dist = path.join(constants.pathToDist, 'plotly-' + out + '.js');
-    } else {
-        opts.distMin = path.join(constants.pathToDist, 'plotly-' + out + '.min.js');
-    }
+    opts.dist = path.join(constants.pathToDist, 'plotly-' + out + '.js');
+    opts.distMin = path.join(constants.pathToDist, 'plotly-' + out + '.min.js');
 
     console.log(opts);
 
@@ -82,6 +79,11 @@ if(process.argv.length > 2) {
 
     partialBundle(tasks, opts);
 
+    tasks = [
+        tasks[0],
+        tasks[unminified ? 1 : 2]
+    ];
+
     runSeries(tasks, function(err) {
         if(err) throw err;
     });

tasks/extra_bundles.js → tasks/extra_bundles.mjs

@@ -1,8 +1,8 @@
-var minimist = require('minimist');
-var runSeries = require('run-series');
+import minimist from 'minimist';
+import runSeries from 'run-series';
 
-var partialBundle = require('./partial_bundle');
-var constants = require('./util/constants');
+import partialBundle from './partial_bundle.mjs';
+import constants from './util/constants.js';
 var partialBundlePaths = constants.partialBundleNames.map(constants.makePartialBundleOpts);
 
 var list = partialBundlePaths;

tasks/partial_bundle.js → tasks/partial_bundle.mjs

@@ -1,8 +1,8 @@
-var prependFile = require('prepend-file');
+import prependFile from 'prepend-file';
 
-var constants = require('./util/constants');
-var common = require('./util/common');
-var _bundle = require('./util/bundle_wrapper');
+import constants from './util/constants.js';
+import common from './util/common.js';
+import _bundle from './util/bundle_wrapper.mjs';
 
 var header = constants.licenseDist + '\n';
 var allTransforms = constants.allTransforms;
@@ -11,7 +11,7 @@ var mainIndex = constants.mainIndex;
 var strictIndex = constants.strictIndex;
 
 // Bundle the plotly.js partial bundles
-module.exports = function partialBundle(tasks, opts) {
+export default function partialBundle(tasks, opts) {
     var name = opts.name;
     var index = opts.index;
     var deleteIndex = opts.deleteIndex;
@@ -55,18 +55,30 @@ module.exports = function partialBundle(tasks, opts) {
 
     tasks.push(function(done) {
         var bundleOpts = {
-            deleteIndex: deleteIndex,
-            pathToMinBundle: distMin
+            deleteIndex: deleteIndex && !distMin,
         };
 
         _bundle(index, dist, bundleOpts, function() {
             var headerDist = header.replace('plotly.js', 'plotly.js (' + name + ')');
-            var headerDistMin = header.replace('plotly.js', 'plotly.js (' + name + ' - minified)');
 
             if(dist) prependFile.sync(dist, headerDist, common.throwOnError);
+
+            done();
+        });
+    });
+
+    tasks.push(function(done) {
+        var bundleOpts = {
+            deleteIndex: deleteIndex,
+            minify: true,
+        };
+
+        _bundle(index, distMin, bundleOpts, function() {
+            var headerDistMin = header.replace('plotly.js', 'plotly.js (' + name + ' - minified)');
+
             if(distMin) prependFile.sync(distMin, headerDistMin, common.throwOnError);
 
             done();
         });
     });
-};
+}

tasks/schema.js → tasks/schema.mjs

@@ -1,8 +1,8 @@
-var fs = require('fs');
-var path = require('path');
+import fs from 'fs';
+import path from 'path';
 
-var constants = require('./util/constants');
-var plotlyNode = require('./util/plotly_node');
+import constants from './util/constants.js';
+import plotlyNode from './util/plotly_node.mjs';
 
 function caseInsensitive(a, b) {
     return a.toLowerCase().localeCompare(b.toLowerCase());

tasks/test_mock.js → tasks/test_mock.mjs

@@ -1,10 +1,13 @@
-var minimist = require('minimist');
-var path = require('path');
-var fs = require('fs');
+import minimist from 'minimist';
+import path from 'path';
+import fs from 'fs';
 
-var plotlyNode = require('./util/plotly_node');
+import plotlyNode from './util/plotly_node.mjs';
 var Plotly = plotlyNode('build/plotly.js');
 
+import { fileURLToPath } from 'url';
+var __dirname = path.dirname(fileURLToPath(import.meta.url));
+
 var pathToRoot = path.join(__dirname, '..');
 var pathToMocks = path.join(pathToRoot, 'test', 'image', 'mocks');
 

tasks/test_plain_obj.js → tasks/test_plain_obj.mjs

@@ -1,4 +1,4 @@
-var plotlyNode = require('./util/plotly_node');
+import plotlyNode from './util/plotly_node.mjs';
 var Plotly = plotlyNode('build/plotly.js');
 
 var assertValidate = function(fig, exp) {

tasks/util/bundle_wrapper.mjs

@@ -0,0 +1,84 @@
+import fsExtra from 'fs-extra';
+import prependFile from 'prepend-file';
+
+import { build } from 'esbuild';
+
+import esbuildConfig from '../../esbuild-config.js';
+import browserifyAdapter from 'esbuild-plugin-browserify-adapter';
+
+import transform from '../../tasks/compress_attributes.js';
+import common from './common.js';
+
+var basePlugins = esbuildConfig.plugins;
+
+/** Convenience bundle wrapper
+ *
+ * @param {string} pathToIndex path to index file to bundle
+ * @param {string} pathToBunlde path to destination bundle
+ * @param {object} opts
+ *  Bundle options:
+ *  - standalone {string}
+ *  Additional option:
+ *  - noCompressAttributes {boolean} skip attribute meta compression?
+ * @param {function} cb callback
+ *
+ * Otherwise outputs two file: one un-minified bundle and one minified bundle.
+ *
+ * Logs basename of bundle when completed.
+ */
+export default async function _bundle(pathToIndex, pathToBundle, opts, cb) {
+    opts = opts || {};
+
+    var config = {...esbuildConfig};
+
+    config.entryPoints = [pathToIndex];
+    config.outfile = pathToBundle;
+    config.minify = !!opts.minify;
+
+    if(!opts.noCompressAttributes) {
+        config.plugins = basePlugins.concat([browserifyAdapter(transform)]);
+    }
+
+    if(opts.noPlugins) config.plugins = [];
+
+    await build(config);
+
+    addWrapper(pathToBundle)
+
+    if(cb) cb();
+}
+
+// Until https://github.com/evanw/esbuild/pull/513 is merged
+// Thanks to https://github.com/prantlf and https://github.com/birkskyum
+function addWrapper(path){
+    prependFile.sync(
+        path,
+        [
+            '(',
+            ' function(root, factory) {',
+            '  if (typeof define === "function" && define.amd) {',
+            '   define(factory);',
+            '  } else if (typeof module === "object" && module.exports) {',
+            '   module.exports = factory();',
+            '  } else {',
+            '   root.moduleName = factory();',
+            '  }',
+            '} (typeof self !== "undefined" ? self : this, () => {',
+            ''
+        ].join('\n'),
+        common.throwOnError
+    );
+
+    fsExtra.appendFile(
+        path,
+        [
+            '',
+            'if (!(typeof define === "function" && define.amd)) {',
+            ' window.Plotly = Plotly;',
+            '}',
+            'return Plotly;',
+            '}));',
+        ].join('\n'),
+        common.throwOnError
+    );
+}

tasks/util/plotly_node.js → tasks/util/plotly_node.mjs

@@ -1,5 +1,5 @@
-var fs = require('fs');
-var JSDOM = require('jsdom').JSDOM;
+import fs from 'fs';
+import { JSDOM } from 'jsdom';
 
 var window = new JSDOM('', {
     runScripts: 'dangerously'
@@ -8,7 +8,7 @@ var window = new JSDOM('', {
 // Mock things that jsdom doesn't support out-of-the-box
 window.URL.createObjectURL = function() {};
 
-module.exports = function plotlyNode(plotlyPath) {
+export default function plotlyNode(plotlyPath) {
     // Execute source code by inserting a <script> tag containing it
     var scriptEl = window.document.createElement('script');
     scriptEl.textContent = fs.readFileSync(plotlyPath, { encoding: 'utf-8' });

test/jasmine/karma.conf.js

@@ -2,10 +2,8 @@
 
 var path = require('path');
 var minimist = require('minimist');
-var NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
-var LoaderOptionsPlugin = require('webpack').LoaderOptionsPlugin;
 var constants = require('../../tasks/util/constants');
-var webpackConfig = require('../../webpack.config.js');
+var esbuildConfig = require('../../esbuild-config.js');
 
 var isCI = Boolean(process.env.CI);
 
@@ -16,13 +14,12 @@ var argv = minimist(process.argv.slice(4), {
         'info',
         'nowatch', 'randomize',
         'failFast', 'doNotFailOnEmptyTestSuite',
-        'Chrome', 'Firefox', 'IE11',
+        'Chrome', 'Firefox',
         'verbose', 'showSkipped', 'report-progress', 'report-spec', 'report-dots'
     ],
     alias: {
         Chrome: 'chrome',
         Firefox: ['firefox', 'FF'],
-        IE11: ['ie11'],
         bundleTest: ['bundletest', 'bundle_test'],
         nowatch: 'no-watch',
         failFast: 'fail-fast',
@@ -67,7 +64,6 @@ if(argv.info) {
         '  - `--mathjax3`: to load mathjax v3 in relevant test',
         '  - `--Chrome` (alias `--chrome`): run test in (our custom) Chrome browser',
         '  - `--Firefox` (alias `--FF`, `--firefox`): run test in (our custom) Firefox browser',
-        '  - `--IE11` (alias -- `ie11`)`: run test in IE11 browser',
         '  - `--nowatch (dflt: `false`, `true` on CI)`: run karma w/o `autoWatch` / multiple run mode',
         '  - `--randomize` (dflt: `false`): randomize test ordering (useful to detect bad test teardown)',
         '  - `--failFast` (dflt: `false`): exit karma upon first test failure',
@@ -177,7 +173,17 @@ func.defaultConfig = {
 
     // frameworks to use
     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-    frameworks: ['jasmine', 'jasmine-spec-tags', 'webpack', 'viewport'],
+    frameworks: ['jasmine', 'jasmine-spec-tags', 'viewport'],
+
+    plugins: [
+        require('karma-jasmine'),
+        require('karma-jasmine-spec-tags'),
+        require('karma-viewport'),
+        require('karma-spec-reporter'),
+        require('karma-chrome-launcher'),
+        require('karma-firefox-launcher'),
+        require('karma-esbuild'),
+    ],
 
     // list of files / patterns to load in the browser
     //
@@ -262,26 +268,7 @@ func.defaultConfig = {
         }
     },
 
-    webpack: {
-        target: ['web', 'es5'],
-        module: {
-            rules: webpackConfig.module.rules
-        },
-        resolve: {
-            fallback: {
-                stream: require.resolve('stream-browserify')
-            }
-        },
-        plugins: [
-            new NodePolyfillPlugin({ additionalAliases: ['process'] }),
-            new LoaderOptionsPlugin({
-                // test: /\.xxx$/, // may apply this only for some modules
-                options: {
-                    library: webpackConfig.output.library
-                }
-            })
-        ]
-    },
+    esbuild: esbuildConfig,
 
     client: {
         // Options for `karma-jasmine-spec-tags`
@@ -328,27 +315,10 @@ func.defaultConfig = {
     failOnEmptyTestSuite: !argv.doNotFailOnEmptyTestSuite
 };
 
-func.defaultConfig.preprocessors[pathToCustomMatchers] = ['webpack'];
-func.defaultConfig.preprocessors[testFileGlob] = ['webpack'];
-
-if(isBundleTest) {
-    switch(basename(testFileGlob)) {
-        case 'minified_bundle':
-            func.defaultConfig.files.push(constants.pathToPlotlyBuildMin);
-            func.defaultConfig.module = {
-                rules: {
-                    test: /\.js$/,
-                    use: [
-                        'transform-loader?' + path.resolve(__dirname, 'tasks/compress_attributes.js')
-                    ]
-                }
-            };
-            break;
-        case 'plotschema':
-            // no tasks/compress_attributes in this case
-            break;
-    }
-} else {
+func.defaultConfig.preprocessors[pathToCustomMatchers] = ['esbuild'];
+func.defaultConfig.preprocessors[testFileGlob] = ['esbuild'];
+
+if(!isBundleTest) {
     func.defaultConfig.files.push(pathToJQuery);
 }
 
@@ -366,7 +336,6 @@ func.defaultConfig.files.push(testFileGlob);
 var browsers = func.defaultConfig.browsers;
 if(argv.Chrome) browsers.push('_Chrome');
 if(argv.Firefox) browsers.push('_Firefox');
-if(argv.IE11) browsers.push('IE');
 if(browsers.length === 0) browsers.push('_Chrome');
 
 module.exports = func;