TypeScript sourcemaps support

[guybedford]

Better piping is needed at https://github.com/systemjs/builder/blob/master/compilers/esm.js#L105 to handle the source map generation flow.

[guybedford]

This is now merged.

[guybedford]

Released in 0.13.2.

[cherrydev]

This still appears to be busted. When I set sourceMaps: true I get external source maps with the wrong line offsets. When I set sourceMaps: "inline" my typescript files the .ts files in Chrome actually show me the generated javascript instead of the typescript source (but at least the line offsets are correct?). I'm using TypeScript 1.5.3 and systemjs-builder 0.13.5.

Edit: Also tried with TypeScript 1.6.0-beta and dailies.

[smajl]

@guybedford My sincere apologies that I am bothering you, but can I ask, how to properly generate sourcemaps when building from typescript? Build passes but all I get in a sourcemaps file is this: {"version":3,"sources":[],"names":[],"mappings":"","file":"app-build.js"}

My app structure:

www/...
system.config.js
gulpfile.js
...

Contents of system.config.js:

System.config({
  baseURL: "www",
  defaultJSExtensions: true,
  transpiler: "typescript",
  typescriptOptions: {
    "module": "commonjs"
  },
  paths: {
    "app": "ts"
  },

  packages: {
    "ts": {
      "main": "app",
      "defaultExtension": "ts"
    }
  },

  map: {
    "typescript": "/node_modules/typescript/lib/typescript"
  }
});

My gulp task:

var Builder = require('systemjs-builder');
gulp.task('scripts', function() {
  var builder = new Builder();

  builder.loadConfig('system.config.js').then(function() {
    return builder.buildStatic('app', 'www/js/app-build.js', { sourceMaps: true });
  });
});

[guybedford]

@smajl thanks I will check this out when I can. Have you tried looking at https://github.com/frankwallis/plugin-typescript?

[smajl]

@guybedford I looked into that and managed to bundle the app with sourcemaps using plugin-typescript - unfortunately line numbers are off. Also I have trouble loading the mentioned plugin when bundling - I have to temporarily change baseUrl to point to www, otherwise it tries to load the plugin from the root folder insted of www/jspm_packages/....

[guybedford]

@smajl that sounds like an improvement in the source maps support there? Let me know if you need further help here at all.

[bnolan]

I'm having this problem too, can't generate sourcemaps, just get an empty one:

{"version":3,"sources":[],"names":[],"mappings":"","file":"build.js"}

[justindujardin]

@guybedford I had a similar problem and dug into it a bit. I was able to get my source-map to work by doing three things:

1. Patch es6-module-loader so that it would not use inline source-maps when transpiling Typescript (the compiler doesn't look at inline maps from what I can see.) I left the option to use them there by specifying inlineSourceMaps as true in typescriptOptions.
2. Patch systemjs-builder to restore the sourceRoot
3. Specifying inlineSourceMap as false in my systemjs config typescriptOptions object as shown below.

System.config({
  baseUrl: './source/',
  transpiler: 'typescript',
  typescriptOptions: {
    resolveTypings: true,
    emitDecoratorMetadata: true,
    sourceMap: true,
    inlineSourceMap: false
  },
  packages: {
    'pow-core': {
      main: './all.ts',
      defaultExtension: 'ts'
    }
  },
  map: {
    typescript: './node_modules/typescript/lib/typescript.js'
  },
  defaultJSExtensions: true
});

Now my coveralls report shows the original Typescript source files for builds: https://coveralls.io/builds/4383025

---

You can workaround it by using my fork:

npm install justindujardin/builder.git#typescript-source-maps
npm install justindujardin/systemjs.git#typescript-source-maps

[blackbird529]

@smajl and @guybedford I am having a similar issue with a project I am working on to the one @smajl commented on back on Oct 14. We are currently bundling our app using jspm and plugin-typescript and generating a sourcemap for the bundle. The sourcemap generates just fine without any errors but when we fire up debug in the chrome dev tools and put a breakpoint in one of our .ts source files, its mapping to the the wrong line of javascript. We found that you can test the mapping between the bundled .js file and the mapped TS source by clicking on the line numbers in the bundled .js file to set a breakpoint in it. When you do that, the debugger will actually switch to the ts source file to the line it thinks the line of js should be mapped to and set the breakpoint there. When we do this from our bundled .js file, it maps back to the correct ts file, but is usually 2 - 3 lines higher in the ts source code than the actual lines of code it should be mapped too. @smajl have you had any success getting the mappings synced without the offset issue?

[smajl]

@blackbird529 Unfortunately not, I still have the line numbers off. I am currently loading .ts files in development directly, so I don't need sourcemaps but it would be great if this works correctly.

[blackbird529]

Ah, gotcha @smajl. Thanks for the update! @guybedford is this a known systemjs-builder issue or plugin-typescript issue by chance or is the thinking that it is a TypeScript transpiler issue?