source-map-explorer 1.3.1 → 1.5.0

package/.eslintrc.js

@@ -0,0 +1,27 @@
+module.exports = {
+    "env": {
+        "commonjs": true,
+        "mocha": true,
+        "node": true
+    },
+    "extends": "eslint:recommended",
+    "rules": {
+        "indent": [
+            "error",
+            2
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "single"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ],
+        "no-console": 0
+    }
+};

package/.travis.yml

@@ -1,4 +1,4 @@
 sudo: false  # Use container-based infrastructure
 language: node_js
 node_js:
-  - "0.12"
+  - "4"

package/README.md

@@ -1,17 +1,17 @@
 [![Build Status](https://travis-ci.org/danvk/source-map-explorer.svg?branch=v1.1.0)](https://travis-ci.org/danvk/source-map-explorer) [![NPM version](http://img.shields.io/npm/v/source-map-explorer.svg)](https://www.npmjs.org/package/source-map-explorer)
-# source-map-explorer 
-Analyze and debug JavaScript code bloat through source maps.
+# source-map-explorer
+Analyze and debug JavaScript (or Sass or LESS) code bloat through source maps.
 
-The source map explorer determines which file each byte in your minified JS came from. It shows you a [treemap][] visualization to help you debug where all the code is coming from.
+The source map explorer determines which file each byte in your minified code came from. It shows you a [treemap][] visualization to help you debug where all the code is coming from. Check out this [Chrome Developer video][video] (3:25) for a demo of the tool in action.
 
 Install:
 
-    npm install source-map-explorer
+    npm install -g source-map-explorer
 
 Use:
 
     source-map-explorer bundle.min.js
-    source-map-explorer bundle.min.js bundle.min.js.map 
+    source-map-explorer bundle.min.js bundle.min.js.map
 
 This will open up a visualization of how the space is used in your minified bundle:
 
@@ -34,7 +34,7 @@ in the bundle (perhaps because of out-of-date dependencies).
       "foo.js": 137
     }
     ```
-    
+
 * `--tsv`: output tab-delimited values instead of displaying a visualization:
 
     ```
@@ -43,7 +43,7 @@ in the bundle (perhaps because of out-of-date dependencies).
     dist/bar.js	62
     dist/foo.js	137
     ```
-    
+
     If you just want a list of files, you can do `source-map-explorer --tsv foo.min.js | sed 1d | cut -f1`.
 
 * `--html`: output HTML to stdout. By default, source-map-explorer writes HTML to a temporary file and opens it in your default browser. If you want to save the output (e.g. to share), pipe it to a file:
@@ -51,15 +51,17 @@ in the bundle (perhaps because of out-of-date dependencies).
     ```
     source-map-explorer --html foo.min.js > tree.html
     ```
-    
+
 * `--replace`, `--with`: The paths in source maps sometimes have artifacts that are difficult to get rid of. These flags let you do simple find & replaces on the paths. For example:
 
     ```
     source-map-explorer foo.min.js --replace 'dist/' --with ''
     ```
-    
+
     You can specify these flags multiple times. Be aware that the find/replace is done _after_ eliminating shared prefixes between paths.
 
+    These are regular expressions.
+
 * `--noroot`: By default, source-map-explorer finds common prefixes between all source files and eliminates them, since they add complexity to the visualization with no real benefit. But if you want to disable this behavior, set the `--noroot` flag.
 
 ## Generating source maps
@@ -130,3 +132,4 @@ source-map-explorer path/to/foo.min.js{,.map}
 [exorcist]: https://github.com/thlorenz/exorcist
 [inline]: /README.md#types-of-source-maps
 [treemap]: https://github.com/martine/webtreemap
+[video]: https://www.youtube.com/watch?v=7aY9BoMEpG8

package/index.js

@@ -1,84 +1,121 @@
 #!/usr/bin/env node
 
 var doc = [
-'Analyze and debug space usage through source maps.',
-'',
-'Usage:',
-'  source-map-explorer <script.js> [<script.js.map>]',
-'  source-map-explorer [--json | --html | --tsv] <script.js> [<script.js.map>] [--replace=BEFORE --with=AFTER]... [--noroot]',
-'  source-map-explorer -h | --help | --version',
-'',
-'If the script file has an inline source map, you may omit the map parameter.',
-'',
-'Options:',
-'  -h --help  Show this screen.',
-'  --version  Show version.',
-'',
-'     --json  Output JSON (on stdout) instead of generating HTML',
-'             and opening the browser.',
-'     --tsv   Output TSV (on stdout) instead of generating HTML',
-'             and opening the browser.',
-'     --html  Output HTML (on stdout) rather than opening a browser.',
-'',
-'   --noroot  To simplify the visualization, source-map-explorer',
-'             will remove any prefix shared by all sources. If you',
-'             wish to disable this behavior, set --noroot.',
-'',
-'  --replace=BEFORE  Apply a simple find/replace on source file',
-'                    names. This can be used to fix some oddities',
-'                    with paths which appear in the source map',
-'                    generation process.',
-'      --with=AFTER  See --replace.',
+  'Analyze and debug space usage through source maps.',
+  '',
+  'Usage:',
+  '  source-map-explorer <script.js> [<script.js.map>]',
+  '  source-map-explorer [--json | --html | --tsv] [-m | --only-mapped] <script.js> [<script.js.map>] [--replace=BEFORE --with=AFTER]... [--noroot]',
+  '  source-map-explorer -h | --help | --version',
+  '',
+  'If the script file has an inline source map, you may omit the map parameter.',
+  '',
+  'Options:',
+  '  -h --help  Show this screen.',
+  '  --version  Show version.',
+  '',
+  '     --json  Output JSON (on stdout) instead of generating HTML',
+  '             and opening the browser.',
+  '     --tsv   Output TSV (on stdout) instead of generating HTML',
+  '             and opening the browser.',
+  '     --html  Output HTML (on stdout) rather than opening a browser.',
+  '',
+  '  -m --onlymapped  Exclude "unmapped" bytes from the output.',
+  '                   This will result in total counts less than the file size',
+  '',
+  '',
+  '   --noroot  To simplify the visualization, source-map-explorer',
+  '             will remove any prefix shared by all sources. If you',
+  '             wish to disable this behavior, set --noroot.',
+  '',
+  '  --replace=BEFORE  Apply a simple find/replace on source file',
+  '                    names. This can be used to fix some oddities',
+  '                    with paths which appear in the source map',
+  '                    generation process.  Accepts regular expressions.',
+  '      --with=AFTER  See --replace.'
 ].join('\n');
 
 var fs = require('fs'),
-    path = require('path'),
-    sourcemap = require('source-map'),
-    convert = require('convert-source-map'),
-    temp = require('temp'),
-    open = require('open'),
-    _ = require('underscore'),
-    docopt = require('docopt').docopt,
-    fileURL = require('file-url'),
-    btoa = require('btoa');
+  glob = require('glob'),
+  path = require('path'),
+  sourcemap = require('source-map'),
+  convert = require('convert-source-map'),
+  temp = require('temp'),
+  open = require('open'),
+  _ = require('underscore'),
+  docopt = require('docopt').docopt,
+  btoa = require('btoa');
 
-function computeGeneratedFileSizes(mapConsumer, generatedJs) {
+function computeSpans(mapConsumer, generatedJs) {
   var lines = generatedJs.split('\n');
-  var sourceExtrema = {};  // source -> {min: num, max: num}
+  var spans = [];
   var numChars = 0;
-  var lastSource = null;
+  var lastSource = false;  // not a string, not null.
   for (var line = 1; line <= lines.length; line++) {
     var lineText = lines[line - 1];
     var numCols = lineText.length;
     for (var column = 0; column < numCols; column++, numChars++) {
       var pos = mapConsumer.originalPositionFor({line:line, column:column});
       var source = pos.source;
-      if (source == null) {
-        // Often this is from the '// #sourceMap' comment itself.
-        continue;
-      }
 
-      if (source != lastSource) {
-        if (!(source in sourceExtrema)) {
-          sourceExtrema[source] = {min: numChars};
-          lastSource = source;
-        } else {
-          // source-map reports odd positions for bits between files.
-        }
+      if (source !== lastSource) {
+        lastSource = source;
+        spans.push({source: source, numChars: 1});
       } else {
-        sourceExtrema[source].max = numChars;
+        spans[spans.length - 1].numChars += 1;
       }
     }
   }
-  return _.mapObject(sourceExtrema, function(v) {
-    return v.max - v.min + 1
-  });
+  return spans;
+}
+
+var UNMAPPED = '<unmapped>';
+
+/**
+ * Calculate the number of bytes contributed by each source file.
+ * @returns {
+ *  counts: {[sourceFile: string]: number},
+ *  numUnmapped: number,
+ *  totalBytes: number
+ * }
+ */
+function computeGeneratedFileSizes(mapConsumer, generatedJs) {
+  var spans = computeSpans(mapConsumer, generatedJs);
+
+  var numUnmapped = 0;
+  var counts = {};
+  var totalBytes = 0;
+  for (var i = 0; i < spans.length; i++) {
+    var span = spans[i];
+    var numChars = span.numChars;
+    totalBytes += numChars;
+    if (span.source === null) {
+      numUnmapped += numChars;
+    } else {
+      counts[span.source] = (counts[span.source] || 0) + span.numChars;
+    }
+  }
+  return {
+    counts: counts,
+    numUnmapped: numUnmapped,
+    totalBytes: totalBytes
+  };
 }
 
 var SOURCE_MAP_INFO_URL = 'https://github.com/danvk/source-map-explorer/blob/master/README.md#generating-source-maps';
 
 function loadSourceMap(jsFile, mapFile) {
-  var jsData = fs.readFileSync(jsFile).toString();
+  var jsData;
+  try {
+    jsData = fs.readFileSync(jsFile).toString();
+  } catch(err) {
+    if (err.code === 'ENOENT' ) {
+      console.error('File not found! -- ', err.message);
+      return null;
+    } else {
+      throw err;
+    }
+  }
 
   var mapConsumer;
   if (mapFile) {
@@ -114,7 +151,7 @@ function loadSourceMap(jsFile, mapFile) {
 function commonPathPrefix(array){
   if (array.length == 0) return '';
   var A= array.concat().sort(),
-  a1= A[0].split(/(\/)/), a2= A[A.length-1].split(/(\/)/), L= a1.length, i= 0;
+    a1= A[0].split(/(\/)/), a2= A[A.length-1].split(/(\/)/), L= a1.length, i= 0;
   while(i<L && a1[i] === a2[i]) i++;
   return a1.slice(0, i).join('');
 }
@@ -129,13 +166,13 @@ function adjustSourcePaths(sizes, findRoot, finds, replaces) {
     var prefix = commonPathPrefix(_.keys(sizes));
     var len = prefix.length;
     if (len) {
-      sizes = mapKeys(sizes, function(source) { return source.slice(len); })
+      sizes = mapKeys(sizes, function(source) { return source.slice(len); });
     }
   }
 
   for (var i = 0; i < finds.length; i++) {
-    var before = finds[i],
-        after = replaces[i];
+    var before = new RegExp(finds[i]),
+      after = replaces[i];
     sizes = mapKeys(sizes, function(source) {
       return source.replace(before, after);
     });
@@ -151,75 +188,117 @@ function validateArgs(args) {
   }
 }
 
+// On Windows, it's helpful if source-map-explorer can expand globs itself.
+// See https://github.com/danvk/source-map-explorer/issues/52
+function expandGlob(args) {
+  var arg1 = args['<script.js>'];
+  var arg2 = args['<script.js.map>'];
+  if (arg1 && !arg2) {
+    var files = glob.sync(arg1);
+    if (files.length > 2) {
+      throw new Error(
+        'Glob should match exactly 2 files but matched ' + files.length + ' ' + arg1);
+    } else if (files.length === 2) {
+      // allow the JS and source map file to match in either order.
+      if (files[0].indexOf('.map') >= 0) {
+        var tmp = files[0];
+        files[0] = files[1];
+        files[1] = tmp;
+      }
+      args['<script.js>'] = files[0];
+      args['<script.js.map>'] = files[1];
+    }
+  }
+  return args;
+}
+
 
 if (require.main === module) {
 
-var args = docopt(doc, {version: '1.1.1'});
-validateArgs(args);
-var data = loadSourceMap(args['<script.js>'], args['<script.js.map>']);
-if (!data) {
-  process.exit(1);
-}
-var mapConsumer = data.mapConsumer,
+  var args = docopt(doc, {version: '1.5.0'});
+  expandGlob(args);
+  validateArgs(args);
+  var data = loadSourceMap(args['<script.js>'], args['<script.js.map>']);
+  if (!data) {
+    process.exit(1);
+  }
+  var mapConsumer = data.mapConsumer,
     jsData = data.jsData;
 
-var sizes = computeGeneratedFileSizes(mapConsumer, jsData);
+  var sizes = computeGeneratedFileSizes(mapConsumer, jsData);
+  var counts = sizes.counts;
 
-if (_.size(sizes) == 1) {
-  console.error('Your source map only contains one source (',
-                _.keys(sizes)[0], ')');
-  console.error("This typically means that your source map doesn't map all the way back to the original sources.");
-  console.error("This can happen if you use browserify+uglifyjs, for example, and don't set the --in-source-map flag to uglify.");
-  console.error('See ', SOURCE_MAP_INFO_URL);
-  process.exit(1);
-}
+  if (_.size(counts) == 1) {
+    console.error('Your source map only contains one source (',
+      _.keys(counts)[0], ')');
+    console.error('This typically means that your source map doesn\'t map all the way back to the original sources.');
+    console.error('This can happen if you use browserify+uglifyjs, for example, and don\'t set the --in-source-map flag to uglify.');
+    console.error('See ', SOURCE_MAP_INFO_URL);
+    process.exit(1);
+  }
 
-sizes = adjustSourcePaths(sizes, !args['--noroot'], args['--replace'], args['--with']);
+  counts = adjustSourcePaths(counts, !args['--noroot'], args['--replace'], args['--with']);
 
-if (args['--json']) {
-  console.log(JSON.stringify(sizes, null, '  '));
-  process.exit(0);
-}
+  var onlyMapped = args['--only-mapped'] || args['-m'];
+  var numUnmapped = sizes.numUnmapped;
+  if (!onlyMapped) {
+    counts[UNMAPPED] = numUnmapped;
+  }
+  if (numUnmapped) {
+    var totalBytes = sizes.totalBytes;
+    var pct = 100 * numUnmapped / totalBytes;
+    console.warn(
+      'Unable to map', numUnmapped, '/', totalBytes,
+      'bytes (' + pct.toFixed(2) + '%)');
+  }
 
-if (args['--tsv']) {
-  console.log('Source\tSize');
-  _.each(sizes, function(source, size) { console.log(size + '\t' + source); })
-  process.exit(0);
-}
+  if (args['--json']) {
+    console.log(JSON.stringify(counts, null, '  '));
+    process.exit(0);
+  }
 
-var assets = {
-  underscoreJs: btoa(fs.readFileSync(require.resolve('underscore'))),
-  webtreemapJs: btoa(fs.readFileSync(require.resolve('./vendor/webtreemap.js'))),
-  webtreemapCss: btoa(fs.readFileSync(require.resolve('./vendor/webtreemap.css'))),
-};
+  if (args['--tsv']) {
+    console.log('Source\tSize');
+    _.each(counts, function(source, size) { console.log(size + '\t' + source); });
+    process.exit(0);
+  }
 
-var html = fs.readFileSync(path.join(__dirname, 'tree-viz.html')).toString();
+  var assets = {
+    underscoreJs: btoa(fs.readFileSync(require.resolve('underscore'))),
+    webtreemapJs: btoa(fs.readFileSync(require.resolve('./vendor/webtreemap.js'))),
+    webtreemapCss: btoa(fs.readFileSync(require.resolve('./vendor/webtreemap.css')))
+  };
 
-html = html.replace('INSERT TREE HERE', JSON.stringify(sizes, null, '  '))
-           .replace('INSERT TITLE HERE', args['<script.js>'])
-           .replace('INSERT underscore.js HERE', 'data:application/javascript;base64,' + assets.underscoreJs)
-           .replace('INSERT webtreemap.js HERE', 'data:application/javascript;base64,' + assets.webtreemapJs)
-           .replace('INSERT webtreemap.css HERE', 'data:text/css;base64,' + assets.webtreemapCss);
+  var html = fs.readFileSync(path.join(__dirname, 'tree-viz.html')).toString();
 
-if (args['--html']) {
-  console.log(html);
-  process.exit(0);
-}
+  html = html.replace('INSERT TREE HERE', JSON.stringify(counts, null, '  '))
+    .replace('INSERT TITLE HERE', args['<script.js>'])
+    .replace('INSERT underscore.js HERE', 'data:application/javascript;base64,' + assets.underscoreJs)
+    .replace('INSERT webtreemap.js HERE', 'data:application/javascript;base64,' + assets.webtreemapJs)
+    .replace('INSERT webtreemap.css HERE', 'data:text/css;base64,' + assets.webtreemapCss);
+
+  if (args['--html']) {
+    console.log(html);
+    process.exit(0);
+  }
 
-var tempName = temp.path({suffix: '.html'});
-fs.writeFileSync(tempName, html);
-open(tempName, function(error) {
-  if (!error) return;
-  console.error('Unable to open web browser.');
-  console.error('Either run with --html, --json or --tsv, or view HTML for the visualization at:');
-  console.error(tempName);
-});
+  var tempName = temp.path({suffix: '.html'});
+  fs.writeFileSync(tempName, html);
+  open(tempName, function(error) {
+    if (!error) return;
+    console.error('Unable to open web browser.');
+    console.error('Either run with --html, --json or --tsv, or view HTML for the visualization at:');
+    console.error(tempName);
+  });
 
 }
 
 // Exports are here mostly for testing.
 module.exports = {
+  loadSourceMap: loadSourceMap,
+  computeGeneratedFileSizes: computeGeneratedFileSizes,
   adjustSourcePaths: adjustSourcePaths,
   mapKeys: mapKeys,
-  commonPathPrefix: commonPathPrefix
+  commonPathPrefix: commonPathPrefix,
+  expandGlob: expandGlob
 };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "source-map-explorer",
-  "version": "1.3.1",
+  "version": "1.5.0",
   "description": "Analyze and debug space usage through source maps",
   "main": "index.js",
   "bin": {
     "source-map-explorer": "index.js"
   },
   "scripts": {
-    "test": "mocha"
+    "test": "mocha && eslint *.js"
   },
   "repository": {
     "type": "git",
@@ -28,7 +28,7 @@
     "btoa": "^1.1.2",
     "convert-source-map": "^1.1.1",
     "docopt": "^0.6.2",
-    "file-url": "^1.0.1",
+    "glob": "^7.1.2",
     "open": "0.0.5",
     "source-map": "^0.5.1",
     "temp": "^0.8.3",
@@ -36,6 +36,7 @@
   },
   "devDependencies": {
     "chai": "^3.3.0",
+    "eslint": "^4.1.1",
     "mocha": "^2.3.3"
   }
 }

package/test.js

@@ -3,7 +3,8 @@ var expect = require('chai').expect;
 var sourceMapExplorer = require('./index'),
   adjustSourcePaths = sourceMapExplorer.adjustSourcePaths,
   mapKeys = sourceMapExplorer.mapKeys,
-  commonPathPrefix = sourceMapExplorer.commonPathPrefix;
+  commonPathPrefix = sourceMapExplorer.commonPathPrefix,
+  expandGlob = sourceMapExplorer.expandGlob;
 
 describe('source-map-explorer', function() {
   describe('commonPathPrefix', function() {
@@ -28,14 +29,39 @@ describe('source-map-explorer', function() {
   describe('adjustSourcePaths', function() {
     it('should factor out a common prefix', function() {
       expect(adjustSourcePaths({'/src/foo.js': 10, '/src/bar.js': 20}, true, [], []))
-          .to.deep.equal({'foo.js': 10, 'bar.js': 20});
+        .to.deep.equal({'foo.js': 10, 'bar.js': 20});
       expect(adjustSourcePaths({'/src/foo.js': 10, '/src/foodle.js': 20}, true, [], []))
-          .to.deep.equal({'foo.js': 10, 'foodle.js': 20});
+        .to.deep.equal({'foo.js': 10, 'foodle.js': 20});
     });
 
     it('should find/replace', function() {
       expect(adjustSourcePaths({'/src/foo.js': 10, '/src/foodle.js': 20}, false, ['src'], ['dist']))
-          .to.deep.equal({'/dist/foo.js': 10, '/dist/foodle.js': 20});
+        .to.deep.equal({'/dist/foo.js': 10, '/dist/foodle.js': 20});
+    });
+
+    it('should find/replace with regexp', function() {
+      expect(adjustSourcePaths({'/src/foo.js': 10, '/src/foodle.js': 20}, false, ['foo.'], ['bar.']))
+        .to.deep.equal({'/src/bar.js': 10, '/src/bar.le.js': 20});
+    });
+
+    it('should find/replace with regexp, can be used to add root', function() {
+      expect(adjustSourcePaths({'/foo/foo.js': 10, '/foo/foodle.js': 20}, false, ['^/foo'], ['/bar']))
+        .to.deep.equal({'/bar/foo.js': 10, '/bar/foodle.js': 20});
+    });
+  });
+
+  describe('command line parsing', function() {
+    expect(expandGlob({'<script.js>': 'testdata/foo.min.js*'})).to.deep.equal({
+      '<script.js>': 'testdata/foo.min.js',
+      '<script.js.map>': 'testdata/foo.min.js.map'
+    });
+
+    expect(expandGlob({
+      '<script.js>': 'foo.min.js',
+      '<script.js.map>': 'foo.min.js.map'
+    })).to.deep.equal({
+      '<script.js>': 'foo.min.js',
+      '<script.js.map>': 'foo.min.js.map'
     });
   });
 });

package/tree-viz.html

@@ -28,6 +28,18 @@ body {
 <div id='map'></div>
 </body>
 
+<script>
+// https://stackoverflow.com/a/18650828/388951
+function formatBytes(bytes, decimals) {
+  if (bytes == 0) return '0 B';
+  var k = 1000,
+      dm = decimals || 2,
+      sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
+      i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
+</script>
+
 
 <script>
 var tree = INSERT TREE HERE;
@@ -70,7 +82,7 @@ function addNode(path, size) {
 function addSizeToTitle(node, total) {
   var size = node.data['$area'],
       pct = 100.0 * size / total;
-  node.name += ' • ' + size.toLocaleString() + ' • ' + pct.toFixed(2) + '%';
+  node.name += ' • ' + formatBytes(size) + ' • ' + pct.toFixed(1) + '%';
   node.children.forEach(function(x) { addSizeToTitle(x, total) });
 }