/documentation/docs/browser.html
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 …</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">¶</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">¶</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> -></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">¶</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> -></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">¶</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">¶</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> -></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">¶</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> -></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> = -></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">¶</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> = -></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> = -></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> -></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> -></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">¶</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>