Accept Input Source Maps

[LucasSloan]

The typescript compiler produces sources maps mapping from the javascript it produces to the typescript sources it compiled. This is great, but doesn't go far enough if there are tools which generate the sources that are consumed by the typescript compiler.

For example, Tsickle preprocesses typescript sources before passing them to the typescript compiler. As things stand we've had to implement a hack to get our source maps to work. We use a compiler host which performs the tsickle transforms as the typescript compiler reads files, saves the resulting source maps and then compose them with the source maps produced by the typescript compiler as they're emitted.

Instead the typescript compiler could accept source maps as input alongside sources, and compose the input source maps with the source maps produced by the compiler.

The ideal api would be that the typescript compiler would look for either a. an inline source map as a comment in the source file or b. a file in the same directory with the name {source file name}.ts.map, which shouldn't require any crazy file resolution.

[mhegazy]

For Tsickle, i would say the better way is to implement it as a transformation on the compiler. this saves you the double pass in the compiler. #13940 exposes the APIs needed to achieve this.

[LucasSloan]

Tsickle may not be the best example. The actual motivating reason for this issue is the Angular compiler is going to produce source maps in typescript it compiles from templates (html).

[nippur72]

Another example is the html to tsx a templating tool that I use (yet to be released). Without sourcemaps debugging is rather difficult.

[Daiz]

This is also something I would be interested in - I'm working on a TypeScript project that involves writing a small DSL which I would like to transpile to TypeScript code. With input source maps I could presumably just write a source map like you'd do for any other transpiler, and then TSC could use it as input so that the final JS could be mapped nicely back to the original DSL code.

While I could always just make the DSL compile directly to JS too, I would really like to do it with TS instead so that the code can be type checked for possible scripting errors (as the DSL interacts with TS modules).

[ygoe]

I was looking for some tool that can bundle any kind of multiple source files into a single file, transpile new JavaScript to something suitable for today's browsers and then minify all that. uglify-es can't bundle or transpile. rollup can't transpile or minify. babel can't do source maps. tsc can't bundle or do source maps either. I'm about to give up on JavaScript. Or I might revert to some stupid text-replace bundling (which is really just some full-file include) and pass that to uglify, but I'd need to create a source map for that myself then. Not production-ready.

[zaoqi]

@ygoe There is a tool for concat multiple source files
https://www.npmjs.com/package/tool-cat-with-sourcemap

#!/usr/bin/env node

const {SourceNode, SourceMapConsumer, SourceMapGenerator} = require('source-map')
const fs=require('fs')
const assert=require('assert').strict
const args=require('yargs')
      .usage('Usage: $0 -s [output/sourcemap] -o [output] <file> ...')
      .help('h').alias('h', 'help')
      .example('$0 -s sourcemap.json -o c.ts a.ts b.ts','concat a.ts and b.ts, write c.ts and sourcemap.json')
      .demandOption(['s','o'])
      .argv
const files=args._
assert(files.length>0)

const sn = new SourceNode(
    1,
    1,
    "global",
    files.map(file=>new SourceNode(1,1,file,[fs.readFileSync(file,'utf-8')])))

const x=sn.toStringWithSourceMap({file: ''})
fs.writeFileSync(args.s, x.map.toString())
fs.writeFileSync(args.o, x.code)

[nmain]

As mentioned in #34608, it would be useful if tsc, when accepting input sourcemaps, not only generated output sourcemaps based on them, but provided error reporting that used the sourcemaps as well.