Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 27 commits into from
Dec 22, 2022
Merged

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

Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
dc23266
switch from browserify to webpack & convert es6 to es5
archmoj Oct 25, 2022
834d411
skip no new-func for now
archmoj Oct 31, 2022
6b5b4c4
fix minified custom bundle script
archmoj Nov 1, 2022
2ddf5d6
improve handling of webpack when stats.error is empty but hasErrors
archmoj Nov 3, 2022
9818452
use webpack to generate strict regl code
archmoj Nov 3, 2022
047fda8
install raw-loader - uninstall browserify
archmoj Nov 7, 2022
bbf19c1
use ify-loader and raw-loader to compile glslify
archmoj Nov 7, 2022
4cdc04b
configuration for bundling stackgl using webpack
archmoj Nov 8, 2022
524f24d
bundle stackgl using webpack
archmoj Nov 8, 2022
3c42b19
ignore LICENSE.txt output files in dist
archmoj Nov 8, 2022
3a50892
replace webpack hasErrors calls - bug creates long logs
archmoj Nov 8, 2022
0abfdac
fix & update bundle options
archmoj Nov 8, 2022
addc012
delete tasks/util/strict_d3.js
archmoj Nov 9, 2022
d8161fb
remove watch script & delete tasks/watch.js
archmoj Nov 9, 2022
18d0bf3
create server & open browser after the first bundle
archmoj Nov 9, 2022
06226c3
pngjs is used by pixelmatch which is dev-dep
archmoj Nov 9, 2022
9fc5987
no need for buffer & asser fallbacks
archmoj Nov 9, 2022
d5a618c
Revert "skip no new-func for now"
archmoj Nov 9, 2022
937d65c
fixup webpack error handling
archmoj Nov 11, 2022
d2d03c0
no-new-func warn on all plotly.js outpus
archmoj Nov 11, 2022
7a289c5
revise no-new-func tests
archmoj Nov 11, 2022
fab0628
no longer need to run unexpected chars tests on CI which is slow
archmoj Nov 11, 2022
3b3211f
update BUILDING.md
archmoj Nov 11, 2022
ebc6530
update CONTRIBUTING.md
archmoj Nov 11, 2022
2cca25f
update README.md
archmoj Nov 11, 2022
ebd130e
draft log for PR 6355
archmoj Nov 11, 2022
458921f
use development mode and devtool option to improve debugging experience
archmoj Dec 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions .circleci/config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ build/*
!build/plotcss.js
!build/README.md

dist/*.LICENSE.txt

npm-debug.log*
*.sublime*
*~
Expand Down
4 changes: 3 additions & 1 deletion devtools/regl_codegen/devtools.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -158,3 +158,5 @@ function handleOnLoad() {
window.close();
});
}

module.exports = Tabs;
87 changes: 48 additions & 39 deletions devtools/regl_codegen/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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;
Expand Down
4 changes: 3 additions & 1 deletion devtools/test_dashboard/devtools.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand Down Expand Up @@ -268,3 +268,5 @@ function handleOnLoad() {
Tabs.setPlotConfig();
plotFromHash();
}

module.exports = Tabs;
128 changes: 81 additions & 47 deletions devtools/test_dashboard/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 };
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally even the test build would be minified, to give us further confidence we're testing the behavior of the real bundle, plus a sourcemap. Right now with no sourcemap all I see in the test dashboard is the single huge unminified bundle - all the code is there unmodified but it'd be a pain to connect it back to the source files during debugging.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The debugging is addressed in 458921f.
Now using development mode, the bundle content is different from production mode; but it builds & rebuilds faster.
This should be good for now. And we could further improve this configuration.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That'll work - what you see in the debugger isn't quite the same as the source files - it's been reformatted a bit and the require statements are transformed - but it's pretty close and easy to move from one to another 😄

// 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) {
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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));
});
}
Loading