Improvement: Support multiple bundles

[0xR]

This makes source-map-explorer really useful for situations where you are doing bundle splitting.

A simple version would just plot all the bundles next to each other on the toplevel. The cli tool would just have to support multiple JS files.

A more advanced version would visualise the files which are in multiple bundles. A possibility would be to show a number representing in how many bundles the files is. A hover could highlight the files in all its bundles.

[danvk]

That's an interesting idea. The syntax would be something like:

source-map-explorer dist/*.js

This would slightly conflict with the existing syntax:

source-map-explorer dist/foo.js dist/foo.js.map

But it should be easy to distinguish them using the file extension. I'd be happy to accept a PR for the simpler option (visualize them as independent top-level entries).

For the more advanced version, you could run source-map-explorer --tsv on each bundle and use comm, diff or sort | uniq -c to find files which are in multiple bundles.

[djeeg]

If you have gulp, this is a quick script to dump reports to the same directory, if a source map file doesnt exist it will error but the rest of the reports will finish

var scriptfiles = fs.readdirSync(options.srcPath)
	.filter(function(file) {
		return file.endsWith('.js');
	});
scriptfiles.map(function (scriptfilename) {
	var taskname = "sourcemapexplorer_" + scriptfilename;
	tasks.push(taskname);
	gulp.task(taskname, [], function (cb) {
		var proc = spawn("node_modules\\.bin\\source-map-explorer.cmd", [scriptfilename, scriptfilename + ".map", "--html"], {cwd: options.srcPath});
		var content = "";
		proc.stdout.on('data', function (data) {
			content += data.toString();
		});
		proc.stderr.on('data', function (data) {
			console.error(data.toString());
		});
		proc.on('close', function (err) {
			if(!err) {
				fs.writeFile(options.srcPath + "\\" + scriptfilename + ".html", content, 'utf8', function (err) {
					cb(err);
				});
			} else {
				cb(err);
			}
		});
	});
});

[Bessonov]

current workaround (without map file, but you can extend this):

find www/ -type f -maxdepth 1 -name '*.js' -exec bash -c 'npx source-map-explorer {} &' \;

[nikolay-borzov]

FYI I'm working on this feature. Is it okay if I change public API - particularly explore method arguments?

[estaub]

FYI I'm working on this feature. Is it okay if I change public API - particularly explore method arguments?

Suggestions: float a specific API proposal, and/or make it backward-compatible.
(I'm not a contributor.)

[nikolay-borzov]

I managed to keep CLI API unchanged. I'm talking about node API:
Current:

function explore(code, map, options)

Changed:

function explore({ codePath, mapPath, name }, options)

[danvk]

cc @jakub300 who worked on the API. @nikolay-borzov is the change just cosmetic? Could you create a new function that the old explore function calls? What is name?

[nikolay-borzov]

Yes, I can. I will try to keep explore untouched.
name is a bundle name. It's used instead of 'title' attribute in generateHtml to support multiple bundles within one HTML file.
Here is a preview of how it will look:

[nikolay-borzov]

Closing since this feature implemented in 1.7.0