Source Maps

[nickdima]

Is coffee-react-transform creating source maps?

[AsaAyers]

I started working on this this morning.

Here is a sample of what it's producing right now. Javascript uses //# sourceMappingURL=... but that isn't valid CoffeeScript, so I currently have it using #//# sourceMappingURL=... in the hopes that it would work with existing tools. It doesn't. However exorcist detects sourceMappingURL doesn't pick up this version of it.

Even if I had sourcemaps 100% working right now though, they aren't useful yet. CoffeeScript would need to consume the sourcemaps as part of what it does. If it just ignores the line as a normal comment then what you end up sending to the browser will only go back to React.createElement("div", ...) and not <div>...</div>

I'd like CoffeeLint to consume them so it doesn't complain about things like line length based on transformed lines.

[jescalan]

I would say this is a valid request, and they actually can be useful immediately. It's not coffeescript's job to consume and generate multi-stage sourcemaps, and it won't ever do this, realistically. When you are running a 2-step compile like this on your own, you need to do the sourcemap management yourself.

So basically you'd run this transform, save away the sourcemap, then run the coffee transform, save that sourcemap, and combine the two using something like this library in whatever build pipeline you are using.

[jsdf]

Oh hey that is a pretty neat idea, I wasn't aware of that library

[benjie]

If you prefer you can use Mozilla's source-map library's applySourceMap method like apply-source-map does:

var Sauce = require('source-map')
var Consumer = Sauce.SourceMapConsumer
var Generator = Sauce.SourceMapGenerator

module.exports = function (map, from) {
  var generator = Generator.fromSourceMap(new Consumer(map))
  generator.applySourceMap(new Consumer(from))
  return generator.toString()
}

I've used this in my latest project, parallel-transpile, which uses Webpack loaders to transpile content via multiple steps from one folder to another using all your processors (multicore). I've not yet integrated CJSX source maps, but I'd certainly like to!

[jescalan]

This is the same thing that multi-stage-sourcemap does internally, just wraps it so it's a little bit less confusing and fewer lines of code 😀