CoffeeScript Source Map Demo

Goals

I love CoffeeScript because it simplifies programming (especially OO programming) with javascript. It's workable debugging it with lots of console.logs, but I'd like to use node-debug. I'd also like to get real line numbers from the CoffeeScript when an exception is thrown.

1. Include CoffeeScript in a server-side Javascript project.
2. Use CoffeeScript with node-inspector (breakpoints).
3. Get an accurate stack trace when an exception is thrown.

You can accomplish #1 with

require('coffee-script/register')
require('mystuff.coffee')

However, you need to generate sourcemaps to be able to map lines in the compiled Javascript to the original CoffeeScript lines.

Looks like node-source-map-support is the solution to #3.

Things I tried

1. Precompile CoffeeScript to js with maps

Compile from the command line, include in a JS file

$ coffee -c -m precompiled/**/*.coffee
$ ./node_modules/.bin/node-debug precompiled/start.js

Seems to be OK, but webkit is confused about location of coffee files (because map "sourceRoot": "../.." is relative to where we compiled from).

This is workable, but I need a way to make this part of my build process.

2. Compile using gulp

The gulp-coffeescript module proclaims to make source maps, but I couldn't get it to work without modifying the project.

$ node gulped/compile.js
$ ./node_modules/.bin/node-debug gulped/start.js

Here's my compile.js script.

The map files didn't come out right. Due to a bug, sourceRoot is set to "/source/". So, webkit can't find them.

  ...
  "sourceRoot": "/source/",
  ...

So, I modified the project to allow an empty string for sourceRoot, and voila!

This is great, because we can use gulp to watch for and compile CoffeeScript files, and gitignore the .js.map files.

I'd also like to gitignore the compiled .js, but it has to stay there for when we require() it (or else we'd have to write some new convoluted require())

Todo: test with '**/*.coffee' style blobs.

Note: I saw the includeContent flag which may come in handy later.

3. Enhance coffee-script/register to generate inline sourcemap

OK, so remember this?

require('coffee-script/register')
require('mystuff.coffee')

Wouldn't it be cool if that generated the sourceMap?

I noticed the sourcemaps format has a sourcesContent element. I also noticed that ```sourceMappingURL`` at the bottom of the Javascript could be a data URI. It would be killer if the CoffeeScript register loadFile function could build the map and slam it into the bottom of the JS. Something like this loadFile function.

Unfortunately, it doesn't seem to work.

$ node register/start.js

I can see the sourceMappingURL data, and I'm pretty sure the sourceMaps are correct. But webkit isn't recognizing it. Presumably, by the time my loadFile function runs, node-debug has already primed the browser with the relevant maps, and new ones are not loaded.

Similar results with node debug register/start.js ... apparently node does not yet support sourcemaps.

4. requireCSWithMap

Since gulp still generates .js that needs to be required using a temp path, I wrote my my own requireCSwithMap() to generate the map (using a temporary filename) then require the .temp.js. I also threw in source-map-support to prove that it works.

var requireCSwithMap = require('./requireCSwithMap').requireCSwithMap;
var b = requireCSwithMap('./include/b.coffee').b;

This works quite nicely.

Where to go from here?

I'm going to bounce #4 off a colleague, and see whether he prefers that approach (with .gitignored temp files). If not, I'll go back and attempt gulp source maps with temp directories and a simpler requireCSFromTemp() method so that .js and .map can be hidden/ignored.