Switch from browserify to webpack in order to be able to use most recent ES modules & allow JavaScript syntax beyond ES5

.circleci/config.yml

@@ -409,9 +409,6 @@ jobs:
       - run:
           name: Display function constructors in plotly.js bundle
           command: npm run log-new-func
-      - run:
-          name: Test certain bundles against function constructors
-          command: npm run no-new-func
       - run:
           name: Test plotly bundles against es6
           command: npm run no-es6-dist

.gitignore

@@ -4,6 +4,8 @@ build/*
 !build/plotcss.js
 !build/README.md
 
+dist/*.LICENSE.txt
+
 npm-debug.log*
 *.sublime*
 *~

devtools/regl_codegen/devtools.js

@@ -4,7 +4,7 @@
 
 var mocks = require('../../build/test_dashboard_mocks.json');
 var reglTraces = require('../../build/regl_traces.json');
-var Lib = require('@src/lib');
+var Lib = require('../../src/lib');
 
 // Our gracious testing object
 var Tabs = {
@@ -158,3 +158,5 @@ function handleOnLoad() {
         window.close();
     });
 }
+
+module.exports = Tabs;

devtools/regl_codegen/server.js

@@ -3,17 +3,24 @@ var path = require('path');
 var http = require('http');
 var ecstatic = require('ecstatic');
 var open = require('open');
-var browserify = require('browserify');
+var webpack = require('webpack');
 var minimist = require('minimist');
 
 var constants = require('../../tasks/util/constants');
-var makeWatchifiedBundle = require('../../tasks/util/watchified_bundle');
-var shortcutPaths = require('../../tasks/util/shortcut_paths');
+var config = require('../../webpack.config.js');
+config.optimization = { minimize: false };
 
 var args = minimist(process.argv.slice(2), {});
 var PORT = args.port || 3000;
 var strict = args.strict;
 
+var reglTraceList = [
+    'parcoords',
+    'scattergl',
+    'scatterpolargl',
+    'splom'
+];
+
 // Create server
 var static = ecstatic({
     root: constants.pathToRoot,
@@ -51,38 +58,53 @@ var server = http.createServer(function(req, res) {
 });
 
 
-// Make watchified bundle for plotly.js
-var bundlePlotly = makeWatchifiedBundle(strict, function() {
-    // open up browser window on first bundle callback
-    open('http://localhost:' + PORT + '/devtools/regl_codegen/index' + (strict ? '-strict' : '') + '.html');
-});
-
-// Bundle devtools code
-var devtoolsPath = path.join(constants.pathToRoot, 'devtools/regl_codegen');
-var devtools = browserify(path.join(devtoolsPath, 'devtools.js'), {
-    transform: [shortcutPaths]
-});
-
 // Start the server up!
 server.listen(PORT);
 
-var reglTraceList = [
-    'parcoords',
-    'scattergl',
-    'scatterpolargl',
-    'splom'
-];
-
-purgeGeneratedCode(reglTraceList);
+// open up browser window
+open('http://localhost:' + PORT + '/devtools/regl_codegen/index' + (strict ? '-strict' : '') + '.html');
 
 // Build and bundle all the things!
 getMockFiles()
     .then(readFiles)
     .then(createMocksList)
     .then(saveMockListToFile)
-    .then(saveReglTracesToFile.bind(null, reglTraceList))
-    .then(bundleDevtools)
-    .then(bundlePlotly);
+    .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);
+
+        purgeGeneratedCode(reglTraceList);
+    }
+});
 
 
 function getMockFiles() {
@@ -178,19 +200,6 @@ function writeFilePromise(path, contents) {
     });
 }
 
-function bundleDevtools() {
-    return new Promise(function(resolve, reject) {
-        devtools.bundle(function(err) {
-            if(err) {
-                console.error('Error while bundling!', JSON.stringify(String(err)));
-                return reject(err);
-            } else {
-                return resolve();
-            }
-        }).pipe(fs.createWriteStream(constants.pathToReglCodegenBundle));
-    });
-}
-
 function handleCodegen(data) {
     var trace = data.trace;
     var generated = data.generated;

devtools/test_dashboard/devtools.js

@@ -5,7 +5,7 @@
 var Fuse = require('fuse.js/dist/fuse.common.js');
 var mocks = require('../../build/test_dashboard_mocks.json');
 var credentials = require('../../build/credentials.json');
-var Lib = require('@src/lib');
+var Lib = require('../../src/lib');
 
 require('./perf');
 
@@ -268,3 +268,5 @@ function handleOnLoad() {
     Tabs.setPlotConfig();
     plotFromHash();
 }
+
+module.exports = Tabs;

devtools/test_dashboard/server.js

@@ -3,54 +3,101 @@ var path = require('path');
 var http = require('http');
 var ecstatic = require('ecstatic');
 var open = require('open');
-var browserify = require('browserify');
+var webpack = require('webpack');
 var minimist = require('minimist');
 
 var constants = require('../../tasks/util/constants');
-var makeWatchifiedBundle = require('../../tasks/util/watchified_bundle');
-var shortcutPaths = require('../../tasks/util/shortcut_paths');
+var config = require('../../webpack.config.js');
+config.optimization = { minimize: false };
+// If interested in development mode
+// config.mode = 'development';
 
 var args = minimist(process.argv.slice(2), {});
 var PORT = args.port || 3000;
 var strict = args.strict;
 var mathjax3 = args.mathjax3;
 var mathjax3chtml = args.mathjax3chtml;
 
-// Create server
-var server = http.createServer(ecstatic({
-    root: constants.pathToRoot,
-    cache: 0,
-    gzip: true,
-    cors: true
-}));
-
-// Make watchified bundle for plotly.js
-var bundlePlotly = makeWatchifiedBundle(strict, function() {
-    // open up browser window on first bundle callback
-    open('http://localhost:' + PORT + '/devtools/test_dashboard/index' + (
-        strict ? '-strict' :
-        mathjax3 ? '-mathjax3' :
-        mathjax3chtml ? '-mathjax3chtml' : ''
-    ) + '.html');
-});
-
-// Bundle devtools code
-var devtoolsPath = path.join(constants.pathToRoot, 'devtools/test_dashboard');
-var devtools = browserify(path.join(devtoolsPath, 'devtools.js'), {
-    transform: [shortcutPaths]
-});
+if(strict) config.entry = './lib/index-strict.js';
 
-// Start the server up!
-server.listen(PORT);
-
-// Build and bundle all the things!
+// mock list
 getMockFiles()
     .then(readFiles)
     .then(createMocksList)
-    .then(saveToFile)
-    .then(bundleDevtools)
-    .then(bundlePlotly);
+    .then(saveMockListToFile);
+
+// Devtools config
+var devtoolsConfig = {};
 
+var devtoolsPath = path.join(constants.pathToRoot, 'devtools/test_dashboard');
+devtoolsConfig.entry = path.join(devtoolsPath, 'devtools.js');
+
+devtoolsConfig.output = {
+    path: config.output.path,
+    filename: 'test_dashboard-bundle.js',
+    library: {
+        name: 'Tabs',
+        type: 'umd',
+        umdNamedDefine: true
+    }
+};
+
+devtoolsConfig.target = config.target;
+devtoolsConfig.plugins = config.plugins;
+devtoolsConfig.optimization = config.optimization;
+devtoolsConfig.mode = config.mode;
+
+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);
+    }
+
+    compiler.close(function(closeErr) {
+        if(!closeErr) {
+            var firstBundle = true;
+
+            compiler = webpack(config);
+            compiler.watch({}, function(err, stats) {
+                if(err) {
+                    console.log('err:', err);
+                } else if(stats.errors && stats.errors.length) {
+                    console.log('stats.errors:', stats.errors);
+                } else {
+                    console.log('success:', config.output.path + '/' + config.output.filename);
+
+                    if(firstBundle) {
+                        // Create server
+                        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');
+
+                        firstBundle = false;
+                    }
+                }
+            });
+        }
+    });
+});
 
 function getMockFiles() {
     return new Promise(function(resolve, reject) {
@@ -104,7 +151,7 @@ function createMocksList(files) {
     return mocksList;
 }
 
-function saveToFile(mocksList) {
+function saveMockListToFile(mocksList) {
     var filePath = path.join(constants.pathToBuild, 'test_dashboard_mocks.json');
     var content = JSON.stringify(mocksList, null, 4);
 
@@ -137,16 +184,3 @@ function writeFilePromise(path, contents) {
         });
     });
 }
-
-function bundleDevtools() {
-    return new Promise(function(resolve, reject) {
-        devtools.bundle(function(err) {
-            if(err) {
-                console.error('Error while bundling!', JSON.stringify(String(err)));
-                return reject(err);
-            } else {
-                return resolve();
-            }
-        }).pipe(fs.createWriteStream(constants.pathToTestDashboardBundle));
-    });
-}