Code Monkey home page Code Monkey logo

coffeescript-sourcemap-demo's Introduction

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).

node-debug precompiled screenshot

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/",
  ...

node-debug gulp sourcemap screenshot

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

working sourcemaps

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.

require time source maps

source-map-support

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.

coffeescript-sourcemap-demo's People

Contributors

adamloving avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.