PageRenderTime 32ms CodeModel.GetById 14ms app.highlight 12ms RepoModel.GetById 2ms app.codeStats 0ms

/documentation/docs/browser.html

http://github.com/jashkenas/coffee-script
HTML | 301 lines | 213 code | 88 blank | 0 comment | 0 complexity | 5d1fa6cd4cbb9fbb88170d0c9779ee6b MD5 | raw file
  1<!DOCTYPE html>
  2
  3<html>
  4<head>
  5  <title>browser.coffee</title>
  6  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  7  <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
  8  <link rel="stylesheet" media="all" href="docco.css" />
  9</head>
 10<body>
 11  <div id="container">
 12    <div id="background"></div>
 13    
 14      <ul id="jump_to">
 15        <li>
 16          <a class="large" href="javascript:void(0);">Jump To &hellip;</a>
 17          <a class="small" href="javascript:void(0);">+</a>
 18          <div id="jump_wrapper">
 19          <div id="jump_page_wrapper">
 20            <div id="jump_page">
 21              
 22                
 23                <a class="source" href="browser.html">
 24                  browser.coffee
 25                </a>
 26              
 27                
 28                <a class="source" href="cake.html">
 29                  cake.coffee
 30                </a>
 31              
 32                
 33                <a class="source" href="coffee-script.html">
 34                  coffee-script.coffee
 35                </a>
 36              
 37                
 38                <a class="source" href="command.html">
 39                  command.coffee
 40                </a>
 41              
 42                
 43                <a class="source" href="grammar.html">
 44                  grammar.coffee
 45                </a>
 46              
 47                
 48                <a class="source" href="helpers.html">
 49                  helpers.coffee
 50                </a>
 51              
 52                
 53                <a class="source" href="index.html">
 54                  index.coffee
 55                </a>
 56              
 57                
 58                <a class="source" href="lexer.html">
 59                  lexer.coffee
 60                </a>
 61              
 62                
 63                <a class="source" href="nodes.html">
 64                  nodes.coffee
 65                </a>
 66              
 67                
 68                <a class="source" href="optparse.html">
 69                  optparse.coffee
 70                </a>
 71              
 72                
 73                <a class="source" href="register.html">
 74                  register.coffee
 75                </a>
 76              
 77                
 78                <a class="source" href="repl.html">
 79                  repl.coffee
 80                </a>
 81              
 82                
 83                <a class="source" href="rewriter.html">
 84                  rewriter.coffee
 85                </a>
 86              
 87                
 88                <a class="source" href="scope.html">
 89                  scope.litcoffee
 90                </a>
 91              
 92                
 93                <a class="source" href="sourcemap.html">
 94                  sourcemap.litcoffee
 95                </a>
 96              
 97            </div>
 98          </div>
 99        </li>
100      </ul>
101    
102    <ul class="sections">
103        
104          <li id="title">
105              <div class="annotation">
106                  <h1>browser.coffee</h1>
107              </div>
108          </li>
109        
110        
111        
112        <li id="section-1">
113            <div class="annotation">
114              
115              <div class="pilwrap ">
116                <a class="pilcrow" href="#section-1">&#182;</a>
117              </div>
118              <p>This <strong>Browser</strong> compatibility layer extends core CoffeeScript functions
119to make things work smoothly when compiling code directly in the browser.
120We add support for loading remote Coffee scripts via <strong>XHR</strong>, and
121<code>text/coffeescript</code> script tags, source maps via data-URLs, and so on.</p>
122
123            </div>
124            
125            <div class="content"><div class='highlight'><pre>
126CoffeeScript = <span class="hljs-built_in">require</span> <span class="hljs-string">'./coffee-script'</span>
127CoffeeScript.<span class="hljs-built_in">require</span> = <span class="hljs-built_in">require</span>
128compile = CoffeeScript.compile</pre></div></div>
129            
130        </li>
131        
132        
133        <li id="section-2">
134            <div class="annotation">
135              
136              <div class="pilwrap ">
137                <a class="pilcrow" href="#section-2">&#182;</a>
138              </div>
139              <p>Use standard JavaScript <code>eval</code> to eval code.</p>
140
141            </div>
142            
143            <div class="content"><div class='highlight'><pre>CoffeeScript.<span class="hljs-function"><span class="hljs-title">eval</span> = <span class="hljs-params">(code, options = {})</span> -&gt;</span>
144  options.bare ?= <span class="hljs-literal">on</span>
145  eval compile code, options</pre></div></div>
146            
147        </li>
148        
149        
150        <li id="section-3">
151            <div class="annotation">
152              
153              <div class="pilwrap ">
154                <a class="pilcrow" href="#section-3">&#182;</a>
155              </div>
156              <p>Running code does not provide access to this scope.</p>
157
158            </div>
159            
160            <div class="content"><div class='highlight'><pre>CoffeeScript.<span class="hljs-function"><span class="hljs-title">run</span> = <span class="hljs-params">(code, options = {})</span> -&gt;</span>
161  options.bare = <span class="hljs-literal">on</span>
162  options.shiftLine = <span class="hljs-literal">on</span>
163  Function(compile code, options)()</pre></div></div>
164            
165        </li>
166        
167        
168        <li id="section-4">
169            <div class="annotation">
170              
171              <div class="pilwrap ">
172                <a class="pilcrow" href="#section-4">&#182;</a>
173              </div>
174              <p>If we’re not in a browser environment, we’re finished with the public API.</p>
175
176            </div>
177            
178            <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>
179            
180        </li>
181        
182        
183        <li id="section-5">
184            <div class="annotation">
185              
186              <div class="pilwrap ">
187                <a class="pilcrow" href="#section-5">&#182;</a>
188              </div>
189              <p>Include source maps where possible. If we’ve got a base64 encoder, a
190JSON serializer, and tools for escaping unicode characters, we’re good to go.
191Ported 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>
192
193            </div>
194            
195            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">if</span> btoa? <span class="hljs-keyword">and</span> JSON? <span class="hljs-keyword">and</span> unescape? <span class="hljs-keyword">and</span> encodeURIComponent?
196  <span class="hljs-function"><span class="hljs-title">compile</span> = <span class="hljs-params">(code, options = {})</span> -&gt;</span>
197    options.sourceMap = <span class="hljs-literal">true</span>
198    options.inline = <span class="hljs-literal">true</span>
199    {js, v3SourceMap} = CoffeeScript.compile code, options
200    <span class="hljs-string">"<span class="hljs-subst">#{js}</span>\n//# sourceMappingURL=data:application/json;base64,<span class="hljs-subst">#{btoa unescape encodeURIComponent v3SourceMap}</span>\n//# sourceURL=coffeescript"</span></pre></div></div>
201            
202        </li>
203        
204        
205        <li id="section-6">
206            <div class="annotation">
207              
208              <div class="pilwrap ">
209                <a class="pilcrow" href="#section-6">&#182;</a>
210              </div>
211              <p>Load a remote script from the current domain via XHR.</p>
212
213            </div>
214            
215            <div class="content"><div class='highlight'><pre>CoffeeScript.<span class="hljs-function"><span class="hljs-title">load</span> = <span class="hljs-params">(url, callback, options = {}, hold = <span class="hljs-literal">false</span>)</span> -&gt;</span>
216  options.sourceFiles = [url]
217  xhr = <span class="hljs-keyword">if</span> <span class="hljs-built_in">window</span>.ActiveXObject
218    <span class="hljs-keyword">new</span> <span class="hljs-built_in">window</span>.ActiveXObject(<span class="hljs-string">'Microsoft.XMLHTTP'</span>)
219  <span class="hljs-keyword">else</span>
220    <span class="hljs-keyword">new</span> <span class="hljs-built_in">window</span>.XMLHttpRequest()
221  xhr.open <span class="hljs-string">'GET'</span>, url, <span class="hljs-literal">true</span>
222  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
223  xhr.<span class="hljs-function"><span class="hljs-title">onreadystatechange</span> = -&gt;</span>
224    <span class="hljs-keyword">if</span> xhr.readyState <span class="hljs-keyword">is</span> <span class="hljs-number">4</span>
225      <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>]
226        param = [xhr.responseText, options]
227        CoffeeScript.run param... <span class="hljs-keyword">unless</span> hold
228      <span class="hljs-keyword">else</span>
229        <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>
230      callback param <span class="hljs-keyword">if</span> callback
231  xhr.send <span class="hljs-literal">null</span></pre></div></div>
232            
233        </li>
234        
235        
236        <li id="section-7">
237            <div class="annotation">
238              
239              <div class="pilwrap ">
240                <a class="pilcrow" href="#section-7">&#182;</a>
241              </div>
242              <p>Activate CoffeeScript in the browser by having it compile and evaluate
243all script tags with a content-type of <code>text/coffeescript</code>.
244This happens on page load.</p>
245
246            </div>
247            
248            <div class="content"><div class='highlight'><pre><span class="hljs-function"><span class="hljs-title">runScripts</span> = -&gt;</span>
249  scripts = <span class="hljs-built_in">window</span>.<span class="hljs-built_in">document</span>.getElementsByTagName <span class="hljs-string">'script'</span>
250  coffeetypes = [<span class="hljs-string">'text/coffeescript'</span>, <span class="hljs-string">'text/literate-coffeescript'</span>]
251  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)
252  index = <span class="hljs-number">0</span>
253
254  <span class="hljs-function"><span class="hljs-title">execute</span> = -&gt;</span>
255    param = coffees[index]
256    <span class="hljs-keyword">if</span> param <span class="hljs-keyword">instanceof</span> Array
257      CoffeeScript.run param...
258      index++
259      execute()
260
261  <span class="hljs-keyword">for</span> script, i <span class="hljs-keyword">in</span> coffees
262    <span class="hljs-keyword">do</span> <span class="hljs-function"><span class="hljs-params">(script, i)</span> -&gt;</span>
263      options = <span class="hljs-attribute">literate</span>: script.type <span class="hljs-keyword">is</span> coffeetypes[<span class="hljs-number">1</span>]
264      source = script.src <span class="hljs-keyword">or</span> script.getAttribute(<span class="hljs-string">'data-src'</span>)
265      <span class="hljs-keyword">if</span> source
266        CoffeeScript.load source,
267          <span class="hljs-function"><span class="hljs-params">(param)</span> -&gt;</span>
268            coffees[i] = param
269            execute()
270          options
271          <span class="hljs-literal">true</span>
272      <span class="hljs-keyword">else</span>
273        options.sourceFiles = [<span class="hljs-string">'embedded'</span>]
274        coffees[i] = [script.innerHTML, options]
275
276  execute()</pre></div></div>
277            
278        </li>
279        
280        
281        <li id="section-8">
282            <div class="annotation">
283              
284              <div class="pilwrap ">
285                <a class="pilcrow" href="#section-8">&#182;</a>
286              </div>
287              <p>Listen for window load, both in decent browsers and in IE.</p>
288
289            </div>
290            
291            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">if</span> <span class="hljs-built_in">window</span>.addEventListener
292  <span class="hljs-built_in">window</span>.addEventListener <span class="hljs-string">'DOMContentLoaded'</span>, runScripts, <span class="hljs-literal">no</span>
293<span class="hljs-keyword">else</span>
294  <span class="hljs-built_in">window</span>.attachEvent <span class="hljs-string">'onload'</span>, runScripts</pre></div></div>
295            
296        </li>
297        
298    </ul>
299  </div>
300</body>
301</html>