Skip to content

Instantly share code, notes, and snippets.

@cheery
Last active August 29, 2015 13:57
Show Gist options
  • Save cheery/9546663 to your computer and use it in GitHub Desktop.
Save cheery/9546663 to your computer and use it in GitHub Desktop.
Source Maps and Coffeescript Modules

Source Maps and Coffeescript Modules

In these files, the browser compiles and loads the coffee-script code, with a module system provided by the bootloader in main.js.

The source maps in this gist are not working. They are giving me line after the source of the logging in Chrome 33. In firefox 27, it doesn't seem to work at all.

I would like you to solve a problem for me: Figure out how to get the source maps working in this setting. Provide an option for embedding the source along the source map and the code. Provide way to specify a source URL, to make it easier to locate the module.

As a reward, you are making client-side browser development bit less intimidating.

Setup

  • Git clone this gist
  • Reach your coffee-script.js:
mkdir lib
pushd lib
wget http://coffeescript.org/extras/coffee-script.js
popd
  • Compile the main.coffee
coffee -c main.coffee
  • Start up some temporary server
python -m SimpleHTTPServer
  • Browse to the page and check the source maps in the inspector to see what is output.
  • Solve the problem!

PS. The module loader needs to be customizable. One solution never fits everybody.

PS. PS. The eval doesn't work here. It penalizes in performance.

console.log "hello"
require "assistance!"
console.log "world"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SourceMaps and Coffeescript Modules</title>
</head>
<body>
<script src="lib/coffee-script.js"></script>
<script src="main.js"></script>
</body>
</html>
window.addEventListener 'load', () ->
console.log 'hello'
sourceURL = 'demo.coffee'
wget sourceURL, (source) -> runModule source, {sourceURL}
runModule = (source, options={}) ->
require = (text) ->
console.log 'require', text
module = {loaded:false}
if true
js = compileWithSourceMaps(source, options.sourceURL)
else
js = CoffeeScript.compile source, bare:true
Function("require", "module", js)(require, module)
module.loaded = true
return module
compileWithSourceMaps = (source, sourceURL) ->
if btoa? and JSON? and unescape? and encodeURIComponent?
options = {
bare: true
sourceMap: true
inline: true
}
{js, v3SourceMap} = CoffeeScript.compile source, options
js = "#{js}\n//# sourceMappingURL=data:application/json;base64,#{btoa unescape encodeURIComponent v3SourceMap}\n//# sourceURL=#{sourceURL}"
else
js = CoffeeScript.compile source, bare:true
return js
wget = (url, success) ->
xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.responseType = 'text'
xhr.onload = () ->
if @status == 200
success @response
xhr.send()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment