source-map-explorer 1.4.0 → 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/index.js

@@ -1,79 +1,105 @@
 #!/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.  Accepts regular expressions.',
-'      --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'),
-    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,
-    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';
@@ -83,8 +109,8 @@ function loadSourceMap(jsFile, mapFile) {
   try {
     jsData = fs.readFileSync(jsFile).toString();
   } catch(err) {
-    if (err.code === "ENOENT" ) {
-      console.error("File not found! -- ", err.message);
+    if (err.code === 'ENOENT' ) {
+      console.error('File not found! -- ', err.message);
       return null;
     } else {
       throw err;
@@ -125,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('');
 }
@@ -140,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 = new RegExp(finds[i]),
-        after = replaces[i];
+      after = replaces[i];
     sizes = mapKeys(sizes, function(source) {
       return source.replace(before, after);
     });
@@ -171,7 +197,7 @@ function expandGlob(args) {
     var files = glob.sync(arg1);
     if (files.length > 2) {
       throw new Error(
-          'Glob should match exactly 2 files but matched ' + files.length + ' ' + arg1);
+        '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) {
@@ -189,67 +215,81 @@ function expandGlob(args) {
 
 if (require.main === module) {
 
-var args = docopt(doc, {version: '1.4.0'});
-expandGlob(args);
-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 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')))
+  };
 
-var html = fs.readFileSync(path.join(__dirname, 'tree-viz.html')).toString();
+  var html = fs.readFileSync(path.join(__dirname, 'tree-viz.html')).toString();
 
-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);
+  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);
-}
+  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);
+  });
 
 }
 

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "source-map-explorer",
-  "version": "1.4.0",
+  "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,6 @@
     "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",
@@ -37,6 +36,7 @@
   },
   "devDependencies": {
     "chai": "^3.3.0",
+    "eslint": "^4.1.1",
     "mocha": "^2.3.3"
   }
 }

package/test.js

@@ -29,31 +29,31 @@ 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});
+        .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});
+        .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',
+      '<script.js.map>': 'testdata/foo.min.js.map'
     });
 
     expect(expandGlob({