mirror of
https://github.com/jashkenas/coffeescript.git
synced 2026-01-12 08:17:59 -05:00
344 lines
15 KiB
HTML
344 lines
15 KiB
HTML
<!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_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="coffeescript.html">
|
||
coffeescript.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="register.html">
|
||
register.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>
|
||
</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="sswrap ">
|
||
<a class="ss" 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 = <span class="hljs-built_in">require</span> <span class="hljs-string">'./coffeescript'</span>
|
||
{ compile } = CoffeeScript</pre></div></div>
|
||
|
||
</li>
|
||
|
||
|
||
<li id="section-2">
|
||
<div class="annotation">
|
||
|
||
<div class="sswrap ">
|
||
<a class="ss" href="#section-2">§</a>
|
||
</div>
|
||
<p>Use <code>window.eval</code> to evaluate code, rather than just <code>eval</code>, to run the
|
||
script in a clean global scope rather than inheriting the scope of the
|
||
CoffeeScript compiler. (So that <code>cake test:browser</code> also works in Node,
|
||
use either <code>window.eval</code> or <code>global.eval</code> as appropriate).</p>
|
||
|
||
</div>
|
||
|
||
<div class="content"><div class='highlight'><pre>CoffeeScript.<span class="hljs-built_in">eval</span> = <span class="hljs-function"><span class="hljs-params">(code, options = {})</span> -></span>
|
||
options.bare ?= <span class="hljs-literal">on</span>
|
||
globalRoot = <span class="hljs-keyword">if</span> window? <span class="hljs-keyword">then</span> window <span class="hljs-keyword">else</span> global
|
||
globalRoot[<span class="hljs-string">'eval'</span>] compile code, options</pre></div></div>
|
||
|
||
</li>
|
||
|
||
|
||
<li id="section-3">
|
||
<div class="annotation">
|
||
|
||
<div class="sswrap ">
|
||
<a class="ss" 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.run = <span class="hljs-function"><span class="hljs-params">(code, options = {})</span> -></span>
|
||
options.bare = <span class="hljs-literal">on</span>
|
||
options.shiftLine = <span class="hljs-literal">on</span>
|
||
<span class="hljs-built_in">Function</span>(compile code, options)()</pre></div></div>
|
||
|
||
</li>
|
||
|
||
|
||
<li id="section-4">
|
||
<div class="annotation">
|
||
|
||
<div class="sswrap ">
|
||
<a class="ss" href="#section-4">§</a>
|
||
</div>
|
||
<p>Export this more limited <code>CoffeeScript</code> than what is exported by
|
||
<code>index.coffee</code>, which is intended for a Node environment.</p>
|
||
|
||
</div>
|
||
|
||
<div class="content"><div class='highlight'><pre>module.<span class="hljs-built_in">exports</span> = CoffeeScript</pre></div></div>
|
||
|
||
</li>
|
||
|
||
|
||
<li id="section-5">
|
||
<div class="annotation">
|
||
|
||
<div class="sswrap ">
|
||
<a class="ss" href="#section-5">§</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="hljs-keyword">return</span> <span class="hljs-keyword">unless</span> window?</pre></div></div>
|
||
|
||
</li>
|
||
|
||
|
||
<li id="section-6">
|
||
<div class="annotation">
|
||
|
||
<div class="sswrap ">
|
||
<a class="ss" href="#section-6">§</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="hljs-keyword">if</span> btoa? <span class="hljs-keyword">and</span> <span class="hljs-built_in">JSON</span>?
|
||
<span class="hljs-function"> <span class="hljs-title">compile</span> = <span class="hljs-params">(code, options = {})</span> -></span>
|
||
options.inlineMap = <span class="hljs-literal">true</span>
|
||
CoffeeScript.compile code, options</pre></div></div>
|
||
|
||
</li>
|
||
|
||
|
||
<li id="section-7">
|
||
<div class="annotation">
|
||
|
||
<div class="sswrap ">
|
||
<a class="ss" href="#section-7">§</a>
|
||
</div>
|
||
<p>Load a remote script from the current domain via XHR.</p>
|
||
|
||
</div>
|
||
|
||
<div class="content"><div class='highlight'><pre>CoffeeScript.load = <span class="hljs-function"><span class="hljs-params">(url, callback, options = {}, hold = <span class="hljs-literal">false</span>)</span> -></span>
|
||
options.sourceFiles = [url]
|
||
xhr = <span class="hljs-keyword">if</span> window.ActiveXObject
|
||
<span class="hljs-keyword">new</span> window.ActiveXObject(<span class="hljs-string">'Microsoft.XMLHTTP'</span>)
|
||
<span class="hljs-keyword">else</span>
|
||
<span class="hljs-keyword">new</span> window.XMLHttpRequest()
|
||
xhr.open <span class="hljs-string">'GET'</span>, url, <span class="hljs-literal">true</span>
|
||
xhr.overrideMimeType <span class="hljs-string">'text/plain'</span> <span class="hljs-keyword">if</span> <span class="hljs-string">'overrideMimeType'</span> <span class="hljs-keyword">of</span> xhr
|
||
xhr.onreadystatechange = <span class="hljs-function">-></span>
|
||
<span class="hljs-keyword">if</span> xhr.readyState <span class="hljs-keyword">is</span> <span class="hljs-number">4</span>
|
||
<span class="hljs-keyword">if</span> xhr.status <span class="hljs-keyword">in</span> [<span class="hljs-number">0</span>, <span class="hljs-number">200</span>]
|
||
param = [xhr.responseText, options]
|
||
CoffeeScript.run param... <span class="hljs-keyword">unless</span> hold
|
||
<span class="hljs-keyword">else</span>
|
||
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span> <span class="hljs-string">"Could not load <span class="hljs-subst">#{url}</span>"</span>
|
||
callback param <span class="hljs-keyword">if</span> callback
|
||
xhr.send <span class="hljs-literal">null</span></pre></div></div>
|
||
|
||
</li>
|
||
|
||
|
||
<li id="section-8">
|
||
<div class="annotation">
|
||
|
||
<div class="sswrap ">
|
||
<a class="ss" href="#section-8">§</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>CoffeeScript.runScripts = <span class="hljs-function">-></span>
|
||
scripts = window.document.getElementsByTagName <span class="hljs-string">'script'</span>
|
||
coffeetypes = [<span class="hljs-string">'text/coffeescript'</span>, <span class="hljs-string">'text/literate-coffeescript'</span>]
|
||
coffees = (s <span class="hljs-keyword">for</span> s <span class="hljs-keyword">in</span> scripts <span class="hljs-keyword">when</span> s.type <span class="hljs-keyword">in</span> coffeetypes)
|
||
index = <span class="hljs-number">0</span>
|
||
<span class="hljs-function">
|
||
<span class="hljs-title">execute</span> = -></span>
|
||
param = coffees[index]
|
||
<span class="hljs-keyword">if</span> param <span class="hljs-keyword">instanceof</span> <span class="hljs-built_in">Array</span>
|
||
CoffeeScript.run param...
|
||
index++
|
||
execute()
|
||
|
||
<span class="hljs-keyword">for</span> script, i <span class="hljs-keyword">in</span> coffees
|
||
<span class="hljs-keyword">do</span> (script, i) ->
|
||
options = literate: script.type <span class="hljs-keyword">is</span> coffeetypes[<span class="hljs-number">1</span>]
|
||
source = script.src <span class="hljs-keyword">or</span> script.getAttribute(<span class="hljs-string">'data-src'</span>)
|
||
<span class="hljs-keyword">if</span> source
|
||
options.filename = source
|
||
CoffeeScript.load source,
|
||
<span class="hljs-function"><span class="hljs-params">(param)</span> -></span>
|
||
coffees[i] = param
|
||
execute()
|
||
options
|
||
<span class="hljs-literal">true</span>
|
||
<span class="hljs-keyword">else</span></pre></div></div>
|
||
|
||
</li>
|
||
|
||
|
||
<li id="section-9">
|
||
<div class="annotation">
|
||
|
||
<div class="sswrap ">
|
||
<a class="ss" href="#section-9">§</a>
|
||
</div>
|
||
<p><code>options.filename</code> defines the filename the source map appears as
|
||
in Developer Tools. If a script tag has an <code>id</code>, use that as the
|
||
filename; otherwise use <code>coffeescript</code>, or <code>coffeescript1</code> etc.,
|
||
leaving the first one unnumbered for the common case that there’s
|
||
only one CoffeeScript script block to parse.</p>
|
||
|
||
</div>
|
||
|
||
<div class="content"><div class='highlight'><pre> options.filename = <span class="hljs-keyword">if</span> script.id <span class="hljs-keyword">and</span> script.id <span class="hljs-keyword">isnt</span> <span class="hljs-string">''</span> <span class="hljs-keyword">then</span> script.id <span class="hljs-keyword">else</span> <span class="hljs-string">"coffeescript<span class="hljs-subst">#{<span class="hljs-keyword">if</span> i <span class="hljs-keyword">isnt</span> <span class="hljs-number">0</span> <span class="hljs-keyword">then</span> i <span class="hljs-keyword">else</span> <span class="hljs-string">''</span>}</span>"</span>
|
||
options.sourceFiles = [<span class="hljs-string">'embedded'</span>]
|
||
coffees[i] = [script.innerHTML, options]
|
||
|
||
execute()</pre></div></div>
|
||
|
||
</li>
|
||
|
||
|
||
<li id="section-10">
|
||
<div class="annotation">
|
||
|
||
<div class="sswrap ">
|
||
<a class="ss" href="#section-10">§</a>
|
||
</div>
|
||
<p>Listen for window load, both in decent browsers and in IE.
|
||
Only attach this event handler on startup for the
|
||
non-ES module version of the browser compiler, to preserve
|
||
backward compatibility while letting the ES module version
|
||
be importable without side effects.</p>
|
||
|
||
</div>
|
||
|
||
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">if</span> this <span class="hljs-keyword">is</span> window
|
||
<span class="hljs-keyword">if</span> window.addEventListener
|
||
window.addEventListener <span class="hljs-string">'DOMContentLoaded'</span>, CoffeeScript.runScripts, <span class="hljs-literal">no</span>
|
||
<span class="hljs-keyword">else</span>
|
||
window.attachEvent <span class="hljs-string">'onload'</span>, CoffeeScript.runScripts</pre></div></div>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
</body>
|
||
</html>
|