JS Source Maps support

.gitignore

@@ -11,4 +11,4 @@ lib
 !test/**/node_modules
 .vscode/
 .idea/
-*.min.js
+*.min.js

package.json

@@ -38,6 +38,7 @@
     "resolve": "^1.4.0",
     "sanitize-filename": "^1.6.1",
     "serve-static": "^1.12.4",
+    "source-map": "^0.6.1",
     "uglify-es": "^3.2.1",
     "v8-compile-cache": "^1.1.0",
     "worker-farm": "^1.4.1",
@@ -47,6 +48,7 @@
     "babel-cli": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "bsb-js": "^1.0.1",
+    "codecov": "^3.0.0",
     "coffeescript": "^2.0.3",
     "cross-env": "^5.1.1",
     "eslint": "^4.13.0",
@@ -66,7 +68,7 @@
     "rimraf": "^2.6.1",
     "stylus": "^0.54.5",
     "typescript": "^2.6.2",
-    "codecov": "^3.0.0"
+    "sourcemap-validator": "^1.0.6"
   },
   "scripts": {
     "test": "cross-env NODE_ENV=test mocha",

src/Asset.js

@@ -23,6 +23,7 @@ class Asset {
     this.options = options;
     this.encoding = 'utf8';
     this.type = path.extname(this.name).slice(1);
+    this.relativename = path.relative(this.options.rootDir, this.name);
 
     this.processed = false;
     this.contents = null;

src/Bundle.js

@@ -16,6 +16,11 @@ class Bundle {
     this.assets = new Set();
     this.childBundles = new Set();
     this.siblingBundles = new Map();
+    this.offsets = new Map();
+  }
+
+  addOffset(asset, line, column) {
+    this.offsets.set(asset.relativename, {line, column});
   }
 
   addAsset(asset) {
@@ -66,15 +71,23 @@ class Bundle {
     newHashes.set(this.name, hash);
 
     let promises = [];
+    let mappings = [];
     if (!oldHashes || oldHashes.get(this.name) !== hash) {
       promises.push(this._package(bundler));
     }
 
     for (let bundle of this.childBundles.values()) {
-      promises.push(bundle.package(bundler, oldHashes, newHashes));
+      if (bundle.type === 'map') {
+        mappings.push(bundle);
+      } else {
+        promises.push(bundle.package(bundler, oldHashes, newHashes));
+      }
     }
 
     await Promise.all(promises);
+    for (let bundle of mappings) {
+      await bundle.package(bundler, oldHashes, newHashes);
+    }
     return newHashes;
   }
 

src/Bundler.js

@@ -68,6 +68,11 @@ class Bundler extends EventEmitter {
       logLevel: typeof options.logLevel === 'number' ? options.logLevel : 3,
       mainFile: this.mainFile,
       hmrPort: options.hmrPort || 0,
+      rootDir: Path.dirname(this.mainFile),
+      sourcemaps:
+        typeof options.sourcemaps === 'boolean'
+          ? options.sourcemaps
+          : !isProduction,
       hmrHostname: options.hmrHostname || ''
     };
   }
@@ -161,6 +166,8 @@ class Bundler extends EventEmitter {
 
       if (process.env.NODE_ENV === 'production') {
         process.exitCode = 1;
+      } else if (process.env.NODE_ENV === 'test' && !this.hmr) {
+        throw err;
       }
     } finally {
       this.pending = false;

src/assets/CoffeeScriptAsset.js

@@ -7,7 +7,15 @@ class CoffeeScriptAsset extends JSAsset {
     let coffee = await localRequire('coffeescript', this.name);
 
     // Transpile Module using CoffeeScript and parse result as ast format through babylon
-    this.contents = coffee.compile(code, {});
+    let transpiled = coffee.compile(code, {
+      sourceMap: this.options.sourcemaps
+    });
+    if (transpiled.sourceMap) {
+      this.sourcemap = transpiled.sourceMap.generate();
+      this.sourcemap.sources = [this.relativename];
+      this.sourcemap.sourcesContent = [this.contents];
+    }
+    this.contents = this.options.sourcemaps ? transpiled.js : transpiled;
     return await super.parse(this.contents);
   }
 }

src/assets/JSAsset.js

@@ -10,6 +10,7 @@ const fsVisitor = require('../visitors/fs');
 const babel = require('../transforms/babel');
 const generate = require('babel-generator').default;
 const uglify = require('../transforms/uglify');
+const sourceMaps = require('../utils/SourceMaps');
 
 const IMPORT_RE = /\b(?:import\b|export\b|require\s*\()/;
 const GLOBAL_RE = /\b(?:process|__dirname|__filename|global|Buffer)\b/;
@@ -117,16 +118,41 @@ class JSAsset extends Asset {
   }
 
   generate() {
-    // TODO: source maps
-    let code = this.isAstDirty
-      ? generate(this.ast).code
-      : this.outputCode || this.contents;
+    let code;
+    if (this.isAstDirty) {
+      let opts = {
+        sourceMaps: this.options.sourcemaps,
+        sourceFileName: this.options.sourcemaps ? this.relativename : undefined
+      };
+      let generated = generate(this.ast, opts, this.contents);
+      if (this.sourcemap && generated.map) {
+        this.sourcemap = sourceMaps.extendSourceMap(
+          this.sourcemap,
+          generated.map
+        );
+      } else {
+        this.sourcemap = this.options.sourcemaps ? generated.map : undefined;
+      }
+      code = generated.code;
+    }
+    code = code ? code : this.outputCode || this.contents;
+
+    if (this.options.sourcemaps) {
+      this.sourcemap = this.sourcemap
+        ? this.sourcemap
+        : sourceMaps.getEmptyMap(this.relativename, this.contents);
+    }
+
     if (this.globals.size > 0) {
       code = Array.from(this.globals.values()).join('\n') + '\n' + code;
+      this.sourcemap = this.options.sourcemaps
+        ? sourceMaps.offsetSourceMap(this.sourcemap, this.globals.size)
+        : undefined;
     }
 
     return {
-      js: code
+      js: code,
+      map: this.sourcemap
     };
   }
 

src/assets/TypeScriptAsset.js

@@ -23,12 +23,22 @@ class TypeScriptAsset extends JSAsset {
       );
     }
     transpilerOptions.compilerOptions.noEmit = false;
+    transpilerOptions.compilerOptions.sourceMap = this.options.sourcemaps;
 
     // Transpile Module using TypeScript and parse result as ast format through babylon
-    this.contents = typescript.transpileModule(
-      code,
-      transpilerOptions
-    ).outputText;
+    let transpiled = typescript.transpileModule(code, transpilerOptions);
+    this.sourcemap = transpiled.sourceMapText;
+    if (this.sourcemap) {
+      this.sourcemap = JSON.parse(this.sourcemap);
+      this.sourcemap.sourcesContent = [this.contents];
+      // Remove the sourcemap URL
+      let content = transpiled.outputText;
+      transpiled.outputText = content.substring(
+        0,
+        content.lastIndexOf('//# sourceMappingURL')
+      );
+    }
+    this.contents = transpiled.outputText;
     return await super.parse(this.contents);
   }
 }

src/cli.js

@@ -34,6 +34,7 @@ program
   )
   .option('--no-hmr', 'disable hot module replacement')
   .option('--no-cache', 'disable the filesystem cache')
+  .option('--no-sourcemaps', 'disable sourcemaps')
   .option('-V, --version', 'output the version number')
   .action(bundle);
 
@@ -50,6 +51,7 @@ program
   )
   .option('--no-hmr', 'disable hot module replacement')
   .option('--no-cache', 'disable the filesystem cache')
+  .option('--no-sourcemaps', 'disable sourcemaps')
   .action(bundle);
 
 program

src/packagers/JSPackager.js

@@ -1,6 +1,8 @@
 const fs = require('fs');
 const path = require('path');
 const Packager = require('./Packager');
+const urlJoin = require('../utils/urlJoin');
+const lineCounter = require('../utils/textUtils').lineCounter;
 
 const prelude = {
   source: fs
@@ -23,6 +25,7 @@ class JSPackager extends Packager {
 
     let preludeCode = this.options.minify ? prelude.minified : prelude.source;
     await this.dest.write(preludeCode + '({');
+    this.lineOffset = lineCounter(preludeCode);
   }
 
   async addAsset(asset) {
@@ -52,7 +55,7 @@ class JSPackager extends Packager {
         deps[dep.name] = this.dedupe.get(mod.generated.js) || mod.id;
       }
     }
-
+    this.bundle.addOffset(asset, this.lineOffset, 0);
     await this.writeModule(asset.id, asset.generated.js, deps);
   }
 
@@ -64,6 +67,7 @@ class JSPackager extends Packager {
     wrapped += ']';
 
     this.first = false;
+    this.lineOffset += lineCounter(wrapped) - 1;
     await this.dest.write(wrapped);
   }
 
@@ -87,7 +91,15 @@ class JSPackager extends Packager {
       entry.push(this.bundle.entryAsset.id);
     }
 
-    await this.dest.end('},{},' + JSON.stringify(entry) + ')');
+    await this.dest.write('},{},' + JSON.stringify(entry) + ')');
+    // Add sourcemap url
+    await this.dest.write(
+      `\n//# sourceMappingURL=${urlJoin(
+        this.options.publicURL,
+        path.basename(this.bundle.name).slice(0, -3) + '.map'
+      )}`
+    );
+    await this.dest.end();
   }
 }
 

src/packagers/SourcemapPackager.js

@@ -0,0 +1,38 @@
+const path = require('path');
+const sourceMap = require('source-map');
+const Packager = require('./Packager');
+const sourceMapUtils = require('../utils/SourceMaps');
+
+class SourcemapPackager extends Packager {
+  async start() {
+    this.generator = new sourceMap.SourceMapGenerator({
+      file: path.basename(this.bundle.name)
+    });
+  }
+
+  getOffsets(asset) {
+    let parent = this.bundle.parentBundle;
+    return parent.offsets.get(asset.relativename) || {line: 0, column: 0};
+  }
+
+  async addAsset(asset) {
+    if (asset.generated.map) {
+      this.generator = sourceMapUtils.combineSourceMaps(
+        asset.generated.map,
+        this.generator,
+        this.getOffsets(asset).line
+      );
+    }
+  }
+
+  async writeMap() {
+    await this.dest.write(this.generator.toString());
+  }
+
+  async end() {
+    await this.writeMap();
+    await super.end();
+  }
+}
+
+module.exports = SourcemapPackager;

src/packagers/index.js

@@ -1,6 +1,7 @@
 const JSPackager = require('./JSPackager');
 const CSSPackager = require('./CSSPackager');
 const HTMLPackager = require('./HTMLPackager');
+const SourceMapPackager = require('./SourcemapPackager');
 const RawPackager = require('./RawPackager');
 
 class PackagerRegistry {
@@ -10,6 +11,7 @@ class PackagerRegistry {
     this.add('js', JSPackager);
     this.add('css', CSSPackager);
     this.add('html', HTMLPackager);
+    this.add('map', SourceMapPackager);
   }
 
   add(type, packager) {