/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. 

  2. 

  3. <html>
    4. 

  4. <head>
    5. 

  5.   <title>browser.coffee</title>
    6. 

  6.   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    7. 

  7.   <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    8. 

  8.   <link rel="stylesheet" media="all" href="docco.css" />
    9. 

  9. </head>
    10. 

  10. <body>
    11. 

  11.   <div id="container">
    12. 

  12.     <div id="background"></div>
    13. 

  13.     
    14. 

  14.       <ul id="jump_to">
    15. 

  15.         <li>
    16. 

  16.           <a class="large" href="javascript:void(0);">Jump To &hellip;</a>
    17. 

  17.           <a class="small" href="javascript:void(0);">+</a>
    18. 

  18.           <div id="jump_wrapper">
    19. 

  19.           <div id="jump_page_wrapper">
    20. 

  20.             <div id="jump_page">
    21. 

  21.               
    22. 

  22.                 
    23. 

  23.                 <a class="source" href="browser.html">
    24. 

  24.                   browser.coffee
    25. 

  25.                 </a>
    26. 

  26.               
    27. 

  27.                 
    28. 

  28.                 <a class="source" href="cake.html">
    29. 

  29.                   cake.coffee
    30. 

  30.                 </a>
    31. 

  31.               
    32. 

  32.                 
    33. 

  33.                 <a class="source" href="coffee-script.html">
    34. 

  34.                   coffee-script.coffee
    35. 

  35.                 </a>
    36. 

  36.               
    37. 

  37.                 
    38. 

  38.                 <a class="source" href="command.html">
    39. 

  39.                   command.coffee
    40. 

  40.                 </a>
    41. 

  41.               
    42. 

  42.                 
    43. 

  43.                 <a class="source" href="grammar.html">
    44. 

  44.                   grammar.coffee
    45. 

  45.                 </a>
    46. 

  46.               
    47. 

  47.                 
    48. 

  48.                 <a class="source" href="helpers.html">
    49. 

  49.                   helpers.coffee
    50. 

  50.                 </a>
    51. 

  51.               
    52. 

  52.                 
    53. 

  53.                 <a class="source" href="index.html">
    54. 

  54.                   index.coffee
    55. 

  55.                 </a>
    56. 

  56.               
    57. 

  57.                 
    58. 

  58.                 <a class="source" href="lexer.html">
    59. 

  59.                   lexer.coffee
    60. 

  60.                 </a>
    61. 

  61.               
    62. 

  62.                 
    63. 

  63.                 <a class="source" href="nodes.html">
    64. 

  64.                   nodes.coffee
    65. 

  65.                 </a>
    66. 

  66.               
    67. 

  67.                 
    68. 

  68.                 <a class="source" href="optparse.html">
    69. 

  69.                   optparse.coffee
    70. 

  70.                 </a>
    71. 

  71.               
    72. 

  72.                 
    73. 

  73.                 <a class="source" href="register.html">
    74. 

  74.                   register.coffee
    75. 

  75.                 </a>
    76. 

  76.               
    77. 

  77.                 
    78. 

  78.                 <a class="source" href="repl.html">
    79. 

  79.                   repl.coffee
    80. 

  80.                 </a>
    81. 

  81.               
    82. 

  82.                 
    83. 

  83.                 <a class="source" href="rewriter.html">
    84. 

  84.                   rewriter.coffee
    85. 

  85.                 </a>
    86. 

  86.               
    87. 

  87.                 
    88. 

  88.                 <a class="source" href="scope.html">
    89. 

  89.                   scope.litcoffee
    90. 

  90.                 </a>
    91. 

  91.               
    92. 

  92.                 
    93. 

  93.                 <a class="source" href="sourcemap.html">
    94. 

  94.                   sourcemap.litcoffee
    95. 

  95.                 </a>
    96. 

  96.               
    97. 

  97.             </div>
    98. 

  98.           </div>
    99. 

  99.         </li>
    100. 

  100.       </ul>
    101. 

  101.     
    102. 

  102.     <ul class="sections">
    103. 

  103.         
    104. 

  104.           <li id="title">
    105. 

  105.               <div class="annotation">
    106. 

  106.                   <h1>browser.coffee</h1>
    107. 

  107.               </div>
    108. 

  108.           </li>
    109. 

  109.         
    110. 

  110.         
    111. 

  111.         
    112. 

  112.         <li id="section-1">
    113. 

  113.             <div class="annotation">
    114. 

  114.               
    115. 

  115.               <div class="pilwrap ">
    116. 

  116.                 <a class="pilcrow" href="#section-1">&#182;</a>
    117. 

  117.               </div>
    118. 

  118.               <p>This <strong>Browser</strong> compatibility layer extends core CoffeeScript functions
    119. 

  119. to make things work smoothly when compiling code directly in the browser.
    120. 

  120. We add support for loading remote Coffee scripts via <strong>XHR</strong>, and
    121. 

  121. <code>text/coffeescript</code> script tags, source maps via data-URLs, and so on.</p>
    122. 

  122. 

  123.             </div>
    124. 

  124.             
    125. 

  125.             <div class="content"><div class='highlight'><pre>
    126. 

  126. CoffeeScript = <span class="hljs-built_in">require</span> <span class="hljs-string">'./coffee-script'</span>
    127. 

  127. CoffeeScript.<span class="hljs-built_in">require</span> = <span class="hljs-built_in">require</span>
    128. 

  128. compile = CoffeeScript.compile</pre></div></div>
    129. 

  129.             
    130. 

  130.         </li>
    131. 

  131.         
    132. 

  132.         
    133. 

  133.         <li id="section-2">
    134. 

  134.             <div class="annotation">
    135. 

  135.               
    136. 

  136.               <div class="pilwrap ">
    137. 

  137.                 <a class="pilcrow" href="#section-2">&#182;</a>
    138. 

  138.               </div>
    139. 

  139.               <p>Use standard JavaScript <code>eval</code> to eval code.</p>
    140. 

  140. 

  141.             </div>
    142. 

  142.             
    143. 

  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. 

  144.   options.bare ?= <span class="hljs-literal">on</span>
    145. 

  145.   eval compile code, options</pre></div></div>
    146. 

  146.             
    147. 

  147.         </li>
    148. 

  148.         
    149. 

  149.         
    150. 

  150.         <li id="section-3">
    151. 

  151.             <div class="annotation">
    152. 

  152.               
    153. 

  153.               <div class="pilwrap ">
    154. 

  154.                 <a class="pilcrow" href="#section-3">&#182;</a>
    155. 

  155.               </div>
    156. 

  156.               <p>Running code does not provide access to this scope.</p>
    157. 

  157. 

  158.             </div>
    159. 

  159.             
    160. 

  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. 

  161.   options.bare = <span class="hljs-literal">on</span>
    162. 

  162.   options.shiftLine = <span class="hljs-literal">on</span>
    163. 

  163.   Function(compile code, options)()</pre></div></div>
    164. 

  164.             
    165. 

  165.         </li>
    166. 

  166.         
    167. 

  167.         
    168. 

  168.         <li id="section-4">
    169. 

  169.             <div class="annotation">
    170. 

  170.               
    171. 

  171.               <div class="pilwrap ">
    172. 

  172.                 <a class="pilcrow" href="#section-4">&#182;</a>
    173. 

  173.               </div>
    174. 

  174.               <p>If we’re not in a browser environment, we’re finished with the public API.</p>
    175. 

  175. 

  176.             </div>
    177. 

  177.             
    178. 

  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. 

  179.             
    180. 

  180.         </li>
    181. 

  181.         
    182. 

  182.         
    183. 

  183.         <li id="section-5">
    184. 

  184.             <div class="annotation">
    185. 

  185.               
    186. 

  186.               <div class="pilwrap ">
    187. 

  187.                 <a class="pilcrow" href="#section-5">&#182;</a>
    188. 

  188.               </div>
    189. 

  189.               <p>Include source maps where possible. If we’ve got a base64 encoder, a
    190. 

  190. JSON serializer, and tools for escaping unicode characters, we’re good to go.
    191. 

  191. 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>
    192. 

  192. 

  193.             </div>
    194. 

  194.             
    195. 

  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. 

  196.   <span class="hljs-function"><span class="hljs-title">compile</span> = <span class="hljs-params">(code, options = {})</span> -&gt;</span>
    197. 

  197.     options.sourceMap = <span class="hljs-literal">true</span>
    198. 

  198.     options.inline = <span class="hljs-literal">true</span>
    199. 

  199.     {js, v3SourceMap} = CoffeeScript.compile code, options
    200. 

  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. 

  201.             
    202. 

  202.         </li>
    203. 

  203.         
    204. 

  204.         
    205. 

  205.         <li id="section-6">
    206. 

  206.             <div class="annotation">
    207. 

  207.               
    208. 

  208.               <div class="pilwrap ">
    209. 

  209.                 <a class="pilcrow" href="#section-6">&#182;</a>
    210. 

  210.               </div>
    211. 

  211.               <p>Load a remote script from the current domain via XHR.</p>
    212. 

  212. 

  213.             </div>
    214. 

  214.             
    215. 

  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. 

  216.   options.sourceFiles = [url]
    217. 

  217.   xhr = <span class="hljs-keyword">if</span> <span class="hljs-built_in">window</span>.ActiveXObject
    218. 

  218.     <span class="hljs-keyword">new</span> <span class="hljs-built_in">window</span>.ActiveXObject(<span class="hljs-string">'Microsoft.XMLHTTP'</span>)
    219. 

  219.   <span class="hljs-keyword">else</span>
    220. 

  220.     <span class="hljs-keyword">new</span> <span class="hljs-built_in">window</span>.XMLHttpRequest()
    221. 

  221.   xhr.open <span class="hljs-string">'GET'</span>, url, <span class="hljs-literal">true</span>
    222. 

  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. 

  223.   xhr.<span class="hljs-function"><span class="hljs-title">onreadystatechange</span> = -&gt;</span>
    224. 

  224.     <span class="hljs-keyword">if</span> xhr.readyState <span class="hljs-keyword">is</span> <span class="hljs-number">4</span>
    225. 

  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. 

  226.         param = [xhr.responseText, options]
    227. 

  227.         CoffeeScript.run param... <span class="hljs-keyword">unless</span> hold
    228. 

  228.       <span class="hljs-keyword">else</span>
    229. 

  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. 

  230.       callback param <span class="hljs-keyword">if</span> callback
    231. 

  231.   xhr.send <span class="hljs-literal">null</span></pre></div></div>
    232. 

  232.             
    233. 

  233.         </li>
    234. 

  234.         
    235. 

  235.         
    236. 

  236.         <li id="section-7">
    237. 

  237.             <div class="annotation">
    238. 

  238.               
    239. 

  239.               <div class="pilwrap ">
    240. 

  240.                 <a class="pilcrow" href="#section-7">&#182;</a>
    241. 

  241.               </div>
    242. 

  242.               <p>Activate CoffeeScript in the browser by having it compile and evaluate
    243. 

  243. all script tags with a content-type of <code>text/coffeescript</code>.
    244. 

  244. This happens on page load.</p>
    245. 

  245. 

  246.             </div>
    247. 

  247.             
    248. 

  248.             <div class="content"><div class='highlight'><pre><span class="hljs-function"><span class="hljs-title">runScripts</span> = -&gt;</span>
    249. 

  249.   scripts = <span class="hljs-built_in">window</span>.<span class="hljs-built_in">document</span>.getElementsByTagName <span class="hljs-string">'script'</span>
    250. 

  250.   coffeetypes = [<span class="hljs-string">'text/coffeescript'</span>, <span class="hljs-string">'text/literate-coffeescript'</span>]
    251. 

  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. 

  252.   index = <span class="hljs-number">0</span>
    253. 

  253. 

  254.   <span class="hljs-function"><span class="hljs-title">execute</span> = -&gt;</span>
    255. 

  255.     param = coffees[index]
    256. 

  256.     <span class="hljs-keyword">if</span> param <span class="hljs-keyword">instanceof</span> Array
    257. 

  257.       CoffeeScript.run param...
    258. 

  258.       index++
    259. 

  259.       execute()
    260. 

  260. 

  261.   <span class="hljs-keyword">for</span> script, i <span class="hljs-keyword">in</span> coffees
    262. 

  262.     <span class="hljs-keyword">do</span> <span class="hljs-function"><span class="hljs-params">(script, i)</span> -&gt;</span>
    263. 

  263.       options = <span class="hljs-attribute">literate</span>: script.type <span class="hljs-keyword">is</span> coffeetypes[<span class="hljs-number">1</span>]
    264. 

  264.       source = script.src <span class="hljs-keyword">or</span> script.getAttribute(<span class="hljs-string">'data-src'</span>)
    265. 

  265.       <span class="hljs-keyword">if</span> source
    266. 

  266.         CoffeeScript.load source,
    267. 

  267.           <span class="hljs-function"><span class="hljs-params">(param)</span> -&gt;</span>
    268. 

  268.             coffees[i] = param
    269. 

  269.             execute()
    270. 

  270.           options
    271. 

  271.           <span class="hljs-literal">true</span>
    272. 

  272.       <span class="hljs-keyword">else</span>
    273. 

  273.         options.sourceFiles = [<span class="hljs-string">'embedded'</span>]
    274. 

  274.         coffees[i] = [script.innerHTML, options]
    275. 

  275. 

  276.   execute()</pre></div></div>
    277. 

  277.             
    278. 

  278.         </li>
    279. 

  279.         
    280. 

  280.         
    281. 

  281.         <li id="section-8">
    282. 

  282.             <div class="annotation">
    283. 

  283.               
    284. 

  284.               <div class="pilwrap ">
    285. 

  285.                 <a class="pilcrow" href="#section-8">&#182;</a>
    286. 

  286.               </div>
    287. 

  287.               <p>Listen for window load, both in decent browsers and in IE.</p>
    288. 

  288. 

  289.             </div>
    290. 

  290.             
    291. 

  291.             <div class="content"><div class='highlight'><pre><span class="hljs-keyword">if</span> <span class="hljs-built_in">window</span>.addEventListener
    292. 

  292.   <span class="hljs-built_in">window</span>.addEventListener <span class="hljs-string">'DOMContentLoaded'</span>, runScripts, <span class="hljs-literal">no</span>
    293. 

  293. <span class="hljs-keyword">else</span>
    294. 

  294.   <span class="hljs-built_in">window</span>.attachEvent <span class="hljs-string">'onload'</span>, runScripts</pre></div></div>
    295. 

  295.             
    296. 

  296.         </li>
    297. 

  297.         
    298. 

  298.     </ul>
    299. 

  299.   </div>
    300. 

  300. </body>
    301. 

  301. </html>
    302.