jashkenas--coffeescript/documentation/docs/browser.html

300 lines
12 KiB
HTML
Raw Normal View History

<!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 &hellip;</a>
<a class="small" href="javascript:void(0);">+</a>
<div id="jump_wrapper">
2014-08-26 12:24:29 -04:00
<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="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="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>
2013-03-18 01:06:33 -04:00
<ul class="sections">
<li id="title">
<div class="annotation">
<h1>browser.coffee</h1>
</div>
</li>
<li id="section-1">
<div class="annotation">
2013-03-18 01:06:33 -04:00
<div class="pilwrap ">
<a class="pilcrow" href="#section-1">&#182;</a>
2013-03-18 01:06:33 -04:00
</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
2014-01-29 23:54:00 -05:00
<code>text/coffeescript</code> script tags, source maps via data-URLs, and so on.</p>
</div>
2014-08-23 10:08:39 -04:00
<div class="content"><div class='highlight'><pre>
CoffeeScript = <span class="hljs-built_in">require</span> <span class="hljs-string">'./coffee-script'</span>
2014-01-29 23:54:00 -05:00
CoffeeScript.<span class="hljs-built_in">require</span> = <span class="hljs-built_in">require</span>
2013-03-18 01:06:33 -04:00
compile = CoffeeScript.compile</pre></div></div>
</li>
2013-03-18 01:06:33 -04:00
<li id="section-2">
<div class="annotation">
2013-03-18 01:06:33 -04:00
<div class="pilwrap ">
<a class="pilcrow" href="#section-2">&#182;</a>
</div>
2014-01-29 23:54:00 -05:00
<p>Use standard JavaScript <code>eval</code> to eval code.</p>
</div>
2016-09-22 16:19:43 -04:00
<div class="content"><div class='highlight'><pre>CoffeeScript.eval = <span class="hljs-function"><span class="hljs-params">(code, options = {})</span> -&gt;</span>
2014-01-29 23:54:00 -05:00
options.bare ?= <span class="hljs-literal">on</span>
2013-03-18 01:06:33 -04:00
eval compile code, options</pre></div></div>
</li>
2013-03-18 01:06:33 -04:00
<li id="section-3">
<div class="annotation">
2013-03-18 01:06:33 -04:00
<div class="pilwrap ">
<a class="pilcrow" href="#section-3">&#182;</a>
</div>
2014-01-29 23:54:00 -05:00
<p>Running code does not provide access to this scope.</p>
</div>
2016-09-22 16:19:43 -04:00
<div class="content"><div class='highlight'><pre>CoffeeScript.run = <span class="hljs-function"><span class="hljs-params">(code, options = {})</span> -&gt;</span>
options.bare = <span class="hljs-literal">on</span>
2014-01-29 23:54:00 -05:00
options.shiftLine = <span class="hljs-literal">on</span>
2013-03-18 01:06:33 -04:00
Function(compile code, options)()</pre></div></div>
</li>
2013-03-18 01:06:33 -04:00
<li id="section-4">
<div class="annotation">
2013-03-18 01:06:33 -04:00
<div class="pilwrap ">
<a class="pilcrow" href="#section-4">&#182;</a>
</div>
2014-08-23 10:08:39 -04:00
<p>If were not in a browser environment, were finished with the public API.</p>
</div>
2014-01-29 23:54:00 -05:00
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">return</span> <span class="hljs-keyword">unless</span> <span class="hljs-built_in">window</span>?</pre></div></div>
</li>
2013-03-18 01:06:33 -04:00
<li id="section-5">
<div class="annotation">
2013-03-18 01:06:33 -04:00
<div class="pilwrap ">
<a class="pilcrow" href="#section-5">&#182;</a>
</div>
2014-08-23 10:08:39 -04:00
<p>Include source maps where possible. If weve got a base64 encoder, a
JSON serializer, and tools for escaping unicode characters, were good to go.
2014-01-29 23:54:00 -05:00
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>
2016-09-22 16:19:43 -04:00
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">if</span> btoa? <span class="hljs-keyword">and</span> JSON?
<span class="hljs-function"> <span class="hljs-title">compile</span> = <span class="hljs-params">(code, options = {})</span> -&gt;</span>
options.inlineMap = <span class="hljs-literal">true</span>
CoffeeScript.compile code, options</pre></div></div>
</li>
2013-03-18 01:06:33 -04:00
<li id="section-6">
<div class="annotation">
2013-03-18 01:06:33 -04:00
<div class="pilwrap ">
<a class="pilcrow" href="#section-6">&#182;</a>
2013-03-18 01:06:33 -04:00
</div>
2014-01-29 23:54:00 -05:00
<p>Load a remote script from the current domain via XHR.</p>
2013-03-18 01:06:33 -04:00
</div>
2016-09-22 16:19:43 -04:00
<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> -&gt;</span>
2013-03-18 01:06:33 -04:00
options.sourceFiles = [url]
2014-01-29 23:54:00 -05:00
xhr = <span class="hljs-keyword">if</span> <span class="hljs-built_in">window</span>.ActiveXObject
<span class="hljs-keyword">new</span> <span class="hljs-built_in">window</span>.ActiveXObject(<span class="hljs-string">'Microsoft.XMLHTTP'</span>)
<span class="hljs-keyword">else</span>
<span class="hljs-keyword">new</span> <span class="hljs-built_in">window</span>.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
2016-09-22 16:19:43 -04:00
xhr.onreadystatechange = <span class="hljs-function">-&gt;</span>
2014-01-29 23:54:00 -05:00
<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> Error <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>
2013-03-18 01:06:33 -04:00
</li>
<li id="section-7">
<div class="annotation">
2013-03-18 01:06:33 -04:00
<div class="pilwrap ">
<a class="pilcrow" href="#section-7">&#182;</a>
</div>
<p>Activate CoffeeScript in the browser by having it compile and evaluate
2010-09-16 00:32:57 -04:00
all script tags with a content-type of <code>text/coffeescript</code>.
2014-01-29 23:54:00 -05:00
This happens on page load.</p>
</div>
2014-01-29 23:54:00 -05:00
<div class="content"><div class='highlight'><pre><span class="hljs-function"><span class="hljs-title">runScripts</span> = -&gt;</span>
scripts = <span class="hljs-built_in">window</span>.<span class="hljs-built_in">document</span>.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>
2016-09-22 16:19:43 -04:00
<span class="hljs-function">
<span class="hljs-title">execute</span> = -&gt;</span>
2014-01-29 23:54:00 -05:00
param = coffees[index]
<span class="hljs-keyword">if</span> param <span class="hljs-keyword">instanceof</span> Array
CoffeeScript.run param...
index++
execute()
<span class="hljs-keyword">for</span> script, i <span class="hljs-keyword">in</span> coffees
2016-09-22 16:19:43 -04:00
<span class="hljs-keyword">do</span> (script, i) -&gt;
options = literate: script.type <span class="hljs-keyword">is</span> coffeetypes[<span class="hljs-number">1</span>]
2015-04-15 11:26:30 -04:00
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
CoffeeScript.load source,
2015-02-03 11:31:43 -05:00
<span class="hljs-function"><span class="hljs-params">(param)</span> -&gt;</span>
2014-01-29 23:54:00 -05:00
coffees[i] = param
execute()
options
<span class="hljs-literal">true</span>
<span class="hljs-keyword">else</span>
options.sourceFiles = [<span class="hljs-string">'embedded'</span>]
coffees[i] = [script.innerHTML, options]
execute()</pre></div></div>
</li>
2013-03-18 01:06:33 -04:00
<li id="section-8">
<div class="annotation">
2013-03-18 01:06:33 -04:00
<div class="pilwrap ">
<a class="pilcrow" href="#section-8">&#182;</a>
</div>
2014-01-29 23:54:00 -05:00
<p>Listen for window load, both in decent browsers and in IE.</p>
</div>
2014-01-29 23:54:00 -05:00
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">if</span> <span class="hljs-built_in">window</span>.addEventListener
<span class="hljs-built_in">window</span>.addEventListener <span class="hljs-string">'DOMContentLoaded'</span>, runScripts, <span class="hljs-literal">no</span>
<span class="hljs-keyword">else</span>
<span class="hljs-built_in">window</span>.attachEvent <span class="hljs-string">'onload'</span>, runScripts</pre></div></div>
</li>
2013-03-18 01:06:33 -04:00
</ul>
</div>
</body>
</html>