use webpack to generate strict regl code

plotly · archmoj · Dec 22, 2022 · Oct 25, 2022 · Oct 31, 2022 · Nov 1, 2022
commit 9818452bf2d53aaedd08ef262d2c48028fc2b3fe
diff --git a/devtools/regl_codegen/devtools.js b/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;
diff --git a/devtools/regl_codegen/server.js b/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,54 @@ 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.hasErrors()) {
+        if(!devtoolsStats.errors) console.log(devtoolsStats);
+        else console.log('stats.errors:', devtoolsStats.errors);
+    } else {
+        console.log('success:', devtoolsConfig.output.path + '/' + devtoolsConfig.output.filename);
+
+        purgeGeneratedCode(reglTraceList);
+    }
+});


 function getMockFiles() {
@@ -178,19 +201,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;