<!DOCTYPE html> <html> <head> <title>browser.coffee</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <ul id="jump_to"> <li> <a class="large" href="javascript:void(0);">Jump To …</a> <a class="small" href="javascript:void(0);">+</a> <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="browser.html"> browser.coffee </a> <a class="source" href="cake.html"> cake.coffee </a> <a class="source" href="coffee-script.html"> coffee-script.coffee </a> <a class="source" href="command.html"> command.coffee </a> <a class="source" href="grammar.html"> grammar.coffee </a> <a class="source" href="helpers.html"> helpers.coffee </a> <a class="source" href="index.html"> index.coffee </a> <a class="source" href="lexer.html"> lexer.coffee </a> <a class="source" href="nodes.html"> nodes.coffee </a> <a class="source" href="optparse.html"> optparse.coffee </a> <a class="source" href="repl.html"> repl.coffee </a> <a class="source" href="rewriter.html"> rewriter.coffee </a> <a class="source" href="scope.html"> scope.litcoffee </a> <a class="source" href="sourcemap.html"> sourcemap.litcoffee </a> </div> </li> </ul> <ul class="sections"> <li id="title"> <div class="annotation"> <h1>browser.coffee</h1> </div> </li> <li id="section-1"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-1">¶</a> </div> <p>This <strong>Browser</strong> compatibility layer extends core CoffeeScript functions to make things work smoothly when compiling code directly in the browser. We add support for loading remote Coffee scripts via <strong>XHR</strong>, and <code>text/coffeescript</code> script tags, source maps via data-URLs, and so on. </p> </div> <div class="content"><div class='highlight'><pre> CoffeeScript = require <span class="string">'./coffee-script'</span> CoffeeScript.require = require compile = CoffeeScript.compile</pre></div></div> </li> <li id="section-2"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-2">¶</a> </div> <p>Use standard JavaScript <code>eval</code> to eval code. </p> </div> <div class="content"><div class='highlight'><pre>CoffeeScript.<span class="function"><span class="title">eval</span></span> = (code, options = {}) -> options.bare ?= <span class="literal">on</span> eval compile code, options</pre></div></div> </li> <li id="section-3"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-3">¶</a> </div> <p>Running code does not provide access to this scope. </p> </div> <div class="content"><div class='highlight'><pre>CoffeeScript.<span class="function"><span class="title">run</span></span> = (code, options = {}) -> options.bare = <span class="literal">on</span> options.shiftLine = <span class="literal">on</span> Function(compile code, options)()</pre></div></div> </li> <li id="section-4"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-4">¶</a> </div> <p>If we're not in a browser environment, we're finished with the public API. </p> </div> <div class="content"><div class='highlight'><pre><span class="keyword">return</span> <span class="keyword">unless</span> window?</pre></div></div> </li> <li id="section-5"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-5">¶</a> </div> <p>Include source maps where possible. If we've got a base64 encoder, a JSON serializer, and tools for escaping unicode characters, we're good to go. Ported from <a href="https://developer.mozilla.org/en-US/docs/DOM/window.btoa">https://developer.mozilla.org/en-US/docs/DOM/window.btoa</a> </p> </div> <div class="content"><div class='highlight'><pre><span class="keyword">if</span> btoa? <span class="keyword">and</span> JSON? <span class="keyword">and</span> unescape? <span class="keyword">and</span> encodeURIComponent? <span class="function"><span class="title">compile</span></span> = (code, options = {}) -> options.sourceMap = <span class="literal">true</span> options.inline = <span class="literal">true</span> {js, v3SourceMap} = CoffeeScript.compile code, options <span class="string">"<span class="subst">#{js}</span>\n//@ sourceMappingURL=data:application/json;base64,<span class="subst">#{btoa unescape encodeURIComponent v3SourceMap}</span>\n//@ sourceURL=coffeescript"</span></pre></div></div> </li> <li id="section-6"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-6">¶</a> </div> <p>Load a remote script from the current domain via XHR. </p> </div> <div class="content"><div class='highlight'><pre>CoffeeScript.<span class="function"><span class="title">load</span></span> = (url, callback, options = {}) -> options.sourceFiles = [url] xhr = <span class="keyword">if</span> window.ActiveXObject <span class="keyword">new</span> window.ActiveXObject(<span class="string">'Microsoft.XMLHTTP'</span>) <span class="keyword">else</span> <span class="keyword">new</span> window.XMLHttpRequest() xhr.open <span class="string">'GET'</span>, url, <span class="literal">true</span> xhr.overrideMimeType <span class="string">'text/plain'</span> <span class="keyword">if</span> <span class="string">'overrideMimeType'</span> <span class="keyword">of</span> xhr xhr.<span class="function"><span class="title">onreadystatechange</span></span> = -> <span class="keyword">if</span> xhr.readyState <span class="keyword">is</span> <span class="number">4</span> <span class="keyword">if</span> xhr.status <span class="keyword">in</span> [<span class="number">0</span>, <span class="number">200</span>] CoffeeScript.run xhr.responseText, options <span class="keyword">else</span> <span class="keyword">throw</span> <span class="keyword">new</span> Error <span class="string">"Could not load <span class="subst">#{url}</span>"</span> callback() <span class="keyword">if</span> callback xhr.send <span class="literal">null</span></pre></div></div> </li> <li id="section-7"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-7">¶</a> </div> <p>Activate CoffeeScript in the browser by having it compile and evaluate all script tags with a content-type of <code>text/coffeescript</code>. This happens on page load. </p> </div> <div class="content"><div class='highlight'><pre><span class="function"><span class="title">runScripts</span></span> = -> scripts = window.document.getElementsByTagName <span class="string">'script'</span> coffeetypes = [<span class="string">'text/coffeescript'</span>, <span class="string">'text/literate-coffeescript'</span>] coffees = (s <span class="keyword">for</span> s <span class="keyword">in</span> scripts <span class="keyword">when</span> s.type <span class="keyword">in</span> coffeetypes) index = <span class="number">0</span> length = coffees.length <span class="keyword">do</span> <span class="function"><span class="title">execute</span></span> = -> script = coffees[index++] mediatype = script?.type <span class="keyword">if</span> mediatype <span class="keyword">in</span> coffeetypes options = {literate: mediatype <span class="keyword">is</span> <span class="string">'text/literate-coffeescript'</span>} <span class="keyword">if</span> script.src CoffeeScript.load script.src, execute, options <span class="keyword">else</span> options.sourceFiles = [<span class="string">'embedded'</span>] CoffeeScript.run script.innerHTML, options execute() <span class="literal">null</span></pre></div></div> </li> <li id="section-8"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-8">¶</a> </div> <p>Listen for window load, both in decent browsers and in IE. </p> </div> <div class="content"><div class='highlight'><pre><span class="keyword">if</span> window.addEventListener window.addEventListener <span class="string">'DOMContentLoaded'</span>, runScripts, <span class="literal">no</span> <span class="keyword">else</span> window.attachEvent <span class="string">'onload'</span>, runScripts</pre></div></div> </li> </ul> </div> </body> </html>