cheery/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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.

  
## demo.coffee
console.log "hello"
require "assistance!"
console.log "world"

## index.html
<!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>

## main.coffee
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()
	<!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()