Merge pull request #6355 from plotly/webpack

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

Author: archmoj

.circleci/config.yml

@@ -404,13 +404,7 @@ jobs:
           name: Test plotly.min.js import using requirejs
           command: npm run test-requirejs
       - run:
-          name: Test plotly bundles againt unexpected characters
-          command: npm run no-bad-char
-      - run:
-          name: Display function constructors in plotly.js bundle
-          command: npm run log-new-func
-      - run:
-          name: Test certain bundles against function constructors
+          name: Display function constructors in all bundles
           command: npm run no-new-func
       - run:
           name: Test plotly bundles against es6

.gitignore

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

BUILDING.md

@@ -3,41 +3,6 @@ Depending on your needs you may require/import one of [the distributed plotly.js
 
 The sections below provide additional info in respect to alternative building frameworks.
 
-## Browserify example
-
-Given source file:
-```js
-// file: index.js
-var Plotly = require('plotly.js-dist-min');
-// ....
-```
-
-then simply run
-
-```sh
-browserify index.js > bundle.js
-```
-
----
-## Webpack
-
-For plotly.js to build with Webpack you will need to install [[email protected]+](https://github.com/hughsk/ify-loader) and add it to your `webpack.config.json`. This adds Browserify transform compatibility to Webpack which is necessary for some plotly.js dependencies.
-
-A repo that demonstrates how to build plotly.js with Webpack can be found [here](https://github.com/plotly/plotly-webpack). In short add `ify-loader` to the `module` section in your `webpack.config.js`:
-
-```js
-...
-    module: {
-        rules: [
-            {
-                test: /\.js$/,
-                loader: 'ify-loader'
-            }
-        ]
-    },
-...
-```
-
 ---
 ## Angular CLI
 

CONTRIBUTING.md

@@ -116,11 +116,7 @@ npm run pretest
 npm start
 ```
 
-This command bundles up the source files with source maps using
-[browserify](https://github.com/substack/node-browserify), starts a
-[watchify](https://github.com/substack/watchify) file watcher (making your
-dev plotly.js bundle update every time a source file is saved) and opens up a
-tab in your browser.
+This command bundles up the source files and opens up a tab in your browser.
 
 #### Step 6: Open up the console and start developing
 

README.md

@@ -108,7 +108,7 @@ There are two kinds of plotly.js bundles:
 
 ---
 ## Alternative ways to load and build plotly.js
-If your library needs to bundle or directly load [plotly.js/lib/index.js](https://github.com/plotly/plotly.js/blob/master/lib/index.js) or parts of its modules similar to [index-basic](https://github.com/plotly/plotly.js/blob/master/lib/index-basic.js) in some other way than via an official or a custom bundle, or in case you want to tweak the default build configurations of `browserify` or `webpack`, etc. then please visit [`BUILDING.md`](https://github.com/plotly/plotly.js/blob/master/BUILDING.md).
+If your library needs to bundle or directly load [plotly.js/lib/index.js](https://github.com/plotly/plotly.js/blob/master/lib/index.js) or parts of its modules similar to [index-basic](https://github.com/plotly/plotly.js/blob/master/lib/index-basic.js) in some other way than via an official or a custom bundle, or in case you want to tweak the default build configurations, then please visit [`BUILDING.md`](https://github.com/plotly/plotly.js/blob/master/BUILDING.md).
 
 ---
 ## Documentation

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;