kotovalexarian-likes-github/jashkenas--coffeescript
1
0
Fork 0
mirror of https://github.com/jashkenas/coffeescript.git synced 2022-11-09 12:23:24 -05:00
Code Releases Activity

Update v2 docs for 2.0.0-beta3

Browse source
This commit is contained in:
Geoffrey Booth 2017-06-30 10:52:11 -07:00
parent b1b34d328a
commit ebe8493020
10 changed files with 3549 additions and 1116 deletions
Download patch file Download diff file Expand all files Collapse all files

9
docs/v2/annotated-source/command.html
View file

@ -238,7 +238,10 @@ sources = []
sourceCode = []
notSources = {}
watchedDirs = {}
optionParser = <span class="hljs-literal">null</span></pre></div></div>
optionParser = <span class="hljs-literal">null</span>
exports.buildCSOptionParser = buildCSOptionParser = <span class="hljs-function">-&gt;</span>
<span class="hljs-keyword">new</span> optparse.OptionParser SWITCHES, BANNER</pre></div></div>
</li>
@ -256,6 +259,7 @@ Many flags cause us to divert before compiling anything. Flags passed after
</div>
<div class="content"><div class='highlight'><pre>exports.run = <span class="hljs-function">-&gt;</span>
optionParser = buildCSOptionParser()
parseOptions()</pre></div></div>
</li>
@ -771,7 +775,6 @@ same directory as the <code>.js</code> file.</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-function"><span class="hljs-title">parseOptions</span> = -&gt;</span>
optionParser = <span class="hljs-keyword">new</span> optparse.OptionParser SWITCHES, BANNER
o = opts = optionParser.parse process.argv[<span class="hljs-number">2.</span>.]
o.compile <span class="hljs-keyword">or</span>= !!o.output
o.run = <span class="hljs-keyword">not</span> (o.compile <span class="hljs-keyword">or</span> o.<span class="hljs-built_in">print</span> <span class="hljs-keyword">or</span> o.map)
@ -856,7 +859,7 @@ shown.</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-function"><span class="hljs-title">usage</span> = -&gt;</span>
printLine (<span class="hljs-keyword">new</span> optparse.OptionParser SWITCHES, BANNER).help()</pre></div></div>
printLine optionParser.help()</pre></div></div>
</li>

268
docs/v2/annotated-source/grammar.html
View file

@ -446,6 +446,7 @@ token stream.</p>
Identifier: [
o <span class="hljs-string">'IDENTIFIER'</span>, <span class="hljs-function">-&gt;</span> <span class="hljs-keyword">new</span> IdentifierLiteral $<span class="hljs-number">1</span>
o <span class="hljs-string">'CSX_TAG'</span>, <span class="hljs-function">-&gt;</span> <span class="hljs-keyword">new</span> CSXTag $<span class="hljs-number">1</span>
]
Property: [
@ -541,6 +542,7 @@ the ordinary <strong>Assign</strong> is that these allow numbers and strings as
<div class="content"><div class='highlight'><pre> AssignObj: [
o <span class="hljs-string">'ObjAssignable'</span>, <span class="hljs-function">-&gt;</span> <span class="hljs-keyword">new</span> Value $<span class="hljs-number">1</span>
o <span class="hljs-string">'ObjRestValue'</span>
o <span class="hljs-string">'ObjAssignable : Expression'</span>, <span class="hljs-function">-&gt;</span> <span class="hljs-keyword">new</span> Assign LOC(<span class="hljs-number">1</span>)(<span class="hljs-keyword">new</span> Value $<span class="hljs-number">1</span>), $<span class="hljs-number">3</span>, <span class="hljs-string">'object'</span>,
operatorToken: LOC(<span class="hljs-number">2</span>)(<span class="hljs-keyword">new</span> Literal $<span class="hljs-number">2</span>)
o <span class="hljs-string">'ObjAssignable :
@ -574,6 +576,40 @@ the ordinary <strong>Assign</strong> is that these allow numbers and strings as
<div class="pilwrap ">
<a class="pilcrow" href="#section-22">&#182;</a>
</div>
<p>Object literal spread properties.</p>
</div>
<div class="content"><div class='highlight'><pre> ObjRestValue: [
o <span class="hljs-string">'SimpleObjAssignable ...'</span>, <span class="hljs-function">-&gt;</span> <span class="hljs-keyword">new</span> Splat <span class="hljs-keyword">new</span> Value $<span class="hljs-number">1</span>
o <span class="hljs-string">'ObjSpreadExpr ...'</span>, <span class="hljs-function">-&gt;</span> <span class="hljs-keyword">new</span> Splat $<span class="hljs-number">1</span>
]
ObjSpreadExpr: [
o <span class="hljs-string">'ObjSpreadIdentifier'</span>
o <span class="hljs-string">'Object'</span>
o <span class="hljs-string">'Parenthetical'</span>
o <span class="hljs-string">'Super'</span>
o <span class="hljs-string">'This'</span>
o <span class="hljs-string">'SUPER Arguments'</span>, <span class="hljs-function">-&gt;</span> <span class="hljs-keyword">new</span> SuperCall LOC(<span class="hljs-number">1</span>)(<span class="hljs-keyword">new</span> Super), $<span class="hljs-number">2</span>
o <span class="hljs-string">'SimpleObjAssignable Arguments'</span>, <span class="hljs-function">-&gt;</span> <span class="hljs-keyword">new</span> Call (<span class="hljs-keyword">new</span> Value $<span class="hljs-number">1</span>), $<span class="hljs-number">2</span>
o <span class="hljs-string">'ObjSpreadExpr Arguments'</span>, <span class="hljs-function">-&gt;</span> <span class="hljs-keyword">new</span> Call $<span class="hljs-number">1</span>, $<span class="hljs-number">2</span>
]
ObjSpreadIdentifier: [
o <span class="hljs-string">'SimpleObjAssignable . Property'</span>, <span class="hljs-function">-&gt;</span> (<span class="hljs-keyword">new</span> Value $<span class="hljs-number">1</span>).add(<span class="hljs-keyword">new</span> Access $<span class="hljs-number">3</span>)
o <span class="hljs-string">'SimpleObjAssignable INDEX_START IndexValue INDEX_END'</span>, <span class="hljs-function">-&gt;</span> (<span class="hljs-keyword">new</span> Value $<span class="hljs-number">1</span>).add($<span class="hljs-number">3</span>)
]</pre></div></div>
</li>
<li id="section-23">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-23">&#182;</a>
</div>
<p>A return statement from a function body.</p>
</div>
@ -596,11 +632,11 @@ the ordinary <strong>Assign</strong> is that these allow numbers and strings as
</li>
<li id="section-23">
<li id="section-24">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-23">&#182;</a>
<a class="pilcrow" href="#section-24">&#182;</a>
</div>
<p>A block comment.</p>
@ -613,11 +649,11 @@ the ordinary <strong>Assign</strong> is that these allow numbers and strings as
</li>
<li id="section-24">
<li id="section-25">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-24">&#182;</a>
<a class="pilcrow" href="#section-25">&#182;</a>
</div>
<p>The <strong>Code</strong> node is the function literal. It’s defined by an indented block
of <strong>Block</strong> preceded by a function arrow, with an optional parameter list.</p>
@ -632,11 +668,11 @@ of <strong>Block</strong> preceded by a function arrow, with an optional paramet
</li>
<li id="section-25">
<li id="section-26">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-25">&#182;</a>
<a class="pilcrow" href="#section-26">&#182;</a>
</div>
<p>CoffeeScript has two different symbols for functions. <code>-&gt;</code> is for ordinary
functions, and <code>=&gt;</code> is for functions bound to the current value of <em>this</em>.</p>
@ -651,11 +687,11 @@ functions, and <code>=&gt;</code> is for functions bound to the current value of
</li>
<li id="section-26">
<li id="section-27">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-26">&#182;</a>
<a class="pilcrow" href="#section-27">&#182;</a>
</div>
<p>An optional, trailing comma.</p>
@ -669,11 +705,11 @@ functions, and <code>=&gt;</code> is for functions bound to the current value of
</li>
<li id="section-27">
<li id="section-28">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-27">&#182;</a>
<a class="pilcrow" href="#section-28">&#182;</a>
</div>
<p>The list of parameters that a function accepts can be of any length.</p>
@ -690,11 +726,11 @@ functions, and <code>=&gt;</code> is for functions bound to the current value of
</li>
<li id="section-28">
<li id="section-29">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-28">&#182;</a>
<a class="pilcrow" href="#section-29">&#182;</a>
</div>
<p>A single parameter in a function definition can be ordinary, or a splat
that hoovers up the remaining arguments.</p>
@ -711,11 +747,11 @@ that hoovers up the remaining arguments.</p>
</li>
<li id="section-29">
<li id="section-30">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-29">&#182;</a>
<a class="pilcrow" href="#section-30">&#182;</a>
</div>
<p>Function Parameters</p>
@ -731,11 +767,11 @@ that hoovers up the remaining arguments.</p>
</li>
<li id="section-30">
<li id="section-31">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-30">&#182;</a>
<a class="pilcrow" href="#section-31">&#182;</a>
</div>
<p>A splat that occurs outside of a parameter list.</p>
@ -748,11 +784,11 @@ that hoovers up the remaining arguments.</p>
</li>
<li id="section-31">
<li id="section-32">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-31">&#182;</a>
<a class="pilcrow" href="#section-32">&#182;</a>
</div>
<p>Variables and properties that can be assigned to.</p>
@ -768,11 +804,11 @@ that hoovers up the remaining arguments.</p>
</li>
<li id="section-32">
<li id="section-33">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-32">&#182;</a>
<a class="pilcrow" href="#section-33">&#182;</a>
</div>
<p>Everything that can be assigned to.</p>
@ -787,11 +823,11 @@ that hoovers up the remaining arguments.</p>
</li>
<li id="section-33">
<li id="section-34">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-33">&#182;</a>
<a class="pilcrow" href="#section-34">&#182;</a>
</div>
<p>The types of things that can be treated as values – assigned to, invoked
as functions, indexed into, named as a class, etc.</p>
@ -810,11 +846,11 @@ as functions, indexed into, named as a class, etc.</p>
</li>
<li id="section-34">
<li id="section-35">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-34">&#182;</a>
<a class="pilcrow" href="#section-35">&#182;</a>
</div>
<p>A <code>super</code>-based expression that can be used as a value.</p>
@ -828,11 +864,11 @@ as functions, indexed into, named as a class, etc.</p>
</li>
<li id="section-35">
<li id="section-36">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-35">&#182;</a>
<a class="pilcrow" href="#section-36">&#182;</a>
</div>
<p>The general group of accessors into an object, by property, by prototype
or by array index or slice.</p>
@ -851,11 +887,11 @@ or by array index or slice.</p>
</li>
<li id="section-36">
<li id="section-37">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-36">&#182;</a>
<a class="pilcrow" href="#section-37">&#182;</a>
</div>
<p>Indexing into an object or array using bracket notation.</p>
@ -874,11 +910,11 @@ or by array index or slice.</p>
</li>
<li id="section-37">
<li id="section-38">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-37">&#182;</a>
<a class="pilcrow" href="#section-38">&#182;</a>
</div>
<p>In CoffeeScript, an object literal is simply a list of assignments.</p>
@ -891,11 +927,11 @@ or by array index or slice.</p>
</li>
<li id="section-38">
<li id="section-39">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-38">&#182;</a>
<a class="pilcrow" href="#section-39">&#182;</a>
</div>
<p>Assignment of properties within an object literal can be separated by
comma, as in JavaScript, or simply by newline.</p>
@ -913,11 +949,11 @@ comma, as in JavaScript, or simply by newline.</p>
</li>
<li id="section-39">
<li id="section-40">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-39">&#182;</a>
<a class="pilcrow" href="#section-40">&#182;</a>
</div>
<p>Class definitions have optional bodies of prototype property assignments,
and optional references to the superclass.</p>
@ -1002,11 +1038,11 @@ and optional references to the superclass.</p>
</li>
<li id="section-40">
<li id="section-41">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-40">&#182;</a>
<a class="pilcrow" href="#section-41">&#182;</a>
</div>
<p>Ordinary function invocation, or a chained series of calls.</p>
@ -1022,11 +1058,11 @@ and optional references to the superclass.</p>
</li>
<li id="section-41">
<li id="section-42">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-41">&#182;</a>
<a class="pilcrow" href="#section-42">&#182;</a>
</div>
<p>An optional existence check on a function.</p>
@ -1040,11 +1076,11 @@ and optional references to the superclass.</p>
</li>
<li id="section-42">
<li id="section-43">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-42">&#182;</a>
<a class="pilcrow" href="#section-43">&#182;</a>
</div>
<p>The list of arguments to a function call.</p>
@ -1058,11 +1094,11 @@ and optional references to the superclass.</p>
</li>
<li id="section-43">
<li id="section-44">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-43">&#182;</a>
<a class="pilcrow" href="#section-44">&#182;</a>
</div>
<p>A reference to the <em>this</em> current object.</p>
@ -1076,11 +1112,11 @@ and optional references to the superclass.</p>
</li>
<li id="section-44">
<li id="section-45">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-44">&#182;</a>
<a class="pilcrow" href="#section-45">&#182;</a>
</div>
<p>A reference to a property on <em>this</em>.</p>
@ -1093,11 +1129,11 @@ and optional references to the superclass.</p>
</li>
<li id="section-45">
<li id="section-46">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-45">&#182;</a>
<a class="pilcrow" href="#section-46">&#182;</a>
</div>
<p>The array literal.</p>
@ -1111,11 +1147,11 @@ and optional references to the superclass.</p>
</li>
<li id="section-46">
<li id="section-47">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-46">&#182;</a>
<a class="pilcrow" href="#section-47">&#182;</a>
</div>
<p>Inclusive and exclusive range dots.</p>
@ -1129,11 +1165,11 @@ and optional references to the superclass.</p>
</li>
<li id="section-47">
<li id="section-48">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-47">&#182;</a>
<a class="pilcrow" href="#section-48">&#182;</a>
</div>
<p>The CoffeeScript range literal.</p>
@ -1146,11 +1182,11 @@ and optional references to the superclass.</p>
</li>
<li id="section-48">
<li id="section-49">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-48">&#182;</a>
<a class="pilcrow" href="#section-49">&#182;</a>
</div>
<p>Array slice literals.</p>
@ -1166,11 +1202,11 @@ and optional references to the superclass.</p>
</li>
<li id="section-49">
<li id="section-50">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-49">&#182;</a>
<a class="pilcrow" href="#section-50">&#182;</a>
</div>
<p>The <strong>ArgList</strong> is both the list of objects passed into a function call,
as well as the contents of an array literal
@ -1189,11 +1225,11 @@ as well as the contents of an array literal
</li>
<li id="section-50">
<li id="section-51">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-50">&#182;</a>
<a class="pilcrow" href="#section-51">&#182;</a>
</div>
<p>Valid arguments are Blocks or Splats.</p>
@ -1208,11 +1244,11 @@ as well as the contents of an array literal
</li>
<li id="section-51">
<li id="section-52">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-51">&#182;</a>
<a class="pilcrow" href="#section-52">&#182;</a>
</div>
<p>Just simple, comma-separated, required arguments (no fancy syntax). We need
this to be separate from the <strong>ArgList</strong> for use in <strong>Switch</strong> blocks, where
@ -1228,11 +1264,11 @@ having the newlines wouldn’t make sense.</p>
</li>
<li id="section-52">
<li id="section-53">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-52">&#182;</a>
<a class="pilcrow" href="#section-53">&#182;</a>
</div>
<p>The variants of <em>try/catch/finally</em> exception handling blocks.</p>
@ -1248,11 +1284,11 @@ having the newlines wouldn’t make sense.</p>
</li>
<li id="section-53">
<li id="section-54">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-53">&#182;</a>
<a class="pilcrow" href="#section-54">&#182;</a>
</div>
<p>A catch clause names its error and runs a block of code.</p>
@ -1267,11 +1303,11 @@ having the newlines wouldn’t make sense.</p>
</li>
<li id="section-54">
<li id="section-55">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-54">&#182;</a>
<a class="pilcrow" href="#section-55">&#182;</a>
</div>
<p>Throw an exception object.</p>
@ -1284,11 +1320,11 @@ having the newlines wouldn’t make sense.</p>
</li>
<li id="section-55">
<li id="section-56">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-55">&#182;</a>
<a class="pilcrow" href="#section-56">&#182;</a>
</div>
<p>Parenthetical expressions. Note that the <strong>Parenthetical</strong> is a <strong>Value</strong>,
not an <strong>Expression</strong>, so if you need to use an expression in a place
@ -1305,11 +1341,11 @@ the trick.</p>
</li>
<li id="section-56">
<li id="section-57">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-56">&#182;</a>
<a class="pilcrow" href="#section-57">&#182;</a>
</div>
<p>The condition portion of a while loop.</p>
@ -1325,11 +1361,11 @@ the trick.</p>
</li>
<li id="section-57">
<li id="section-58">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-57">&#182;</a>
<a class="pilcrow" href="#section-58">&#182;</a>
</div>
<p>The while loop can either be normal, with a block of expressions to execute,
or postfix, with a single expression. There is no do..while.</p>
@ -1351,11 +1387,11 @@ or postfix, with a single expression. There is no do..while.</p>
</li>
<li id="section-58">
<li id="section-59">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-58">&#182;</a>
<a class="pilcrow" href="#section-59">&#182;</a>
</div>
<p>Array, object, and range comprehensions, at the most generic level.
Comprehensions can either be normal, with a block of expressions to execute,
@ -1383,11 +1419,11 @@ or postfix, with a single expression.</p>
</li>
<li id="section-59">
<li id="section-60">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-59">&#182;</a>
<a class="pilcrow" href="#section-60">&#182;</a>
</div>
<p>An array of all accepted values for a variable inside the loop.
This enables support for pattern matching.</p>
@ -1404,11 +1440,11 @@ This enables support for pattern matching.</p>
</li>
<li id="section-60">
<li id="section-61">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-60">&#182;</a>
<a class="pilcrow" href="#section-61">&#182;</a>
</div>
<p>An array or range comprehension has variables for the current element
and (optional) reference to the current index. Or, <em>key, value</em>, in the case
@ -1424,11 +1460,11 @@ of object comprehensions.</p>
</li>
<li id="section-61">
<li id="section-62">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-61">&#182;</a>
<a class="pilcrow" href="#section-62">&#182;</a>
</div>
<p>The source of a comprehension is an array or object with an optional guard
clause. If it’s an array comprehension, you can also choose to step through
@ -1463,11 +1499,11 @@ in fixed-size increments.</p>
</li>
<li id="section-62">
<li id="section-63">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-62">&#182;</a>
<a class="pilcrow" href="#section-63">&#182;</a>
</div>
<p>An individual <strong>When</strong> clause, with action.</p>
@ -1481,11 +1517,11 @@ in fixed-size increments.</p>
</li>
<li id="section-63">
<li id="section-64">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-63">&#182;</a>
<a class="pilcrow" href="#section-64">&#182;</a>
</div>
<p>The most basic form of <em>if</em> is a condition and an action. The following
if-related rules are broken up along these lines in order to avoid
@ -1501,11 +1537,11 @@ ambiguity.</p>
</li>
<li id="section-64">
<li id="section-65">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-64">&#182;</a>
<a class="pilcrow" href="#section-65">&#182;</a>
</div>
<p>The full complement of <em>if</em> expressions, including postfix one-liner
<em>if</em> and <em>unless</em>.</p>
@ -1522,11 +1558,11 @@ ambiguity.</p>
</li>
<li id="section-65">
<li id="section-66">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-65">&#182;</a>
<a class="pilcrow" href="#section-66">&#182;</a>
</div>
<p>Arithmetic and logical operators, working on one or more operands.
Here they are grouped by order of precedence. The actual precedence rules
@ -1553,11 +1589,11 @@ rules are necessary.</p>
</li>
<li id="section-66">
<li id="section-67">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-66">&#182;</a>
<a class="pilcrow" href="#section-67">&#182;</a>
</div>
<p><a href="http://coffeescript.org/#existential-operator">The existential operator</a>.</p>
@ -1595,25 +1631,13 @@ rules are necessary.</p>
</li>
<li id="section-67">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-67">&#182;</a>
</div>
<h2 id="precedence">Precedence</h2>
</div>
</li>
<li id="section-68">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-68">&#182;</a>
</div>
<h2 id="precedence">Precedence</h2>
</div>
@ -1626,6 +1650,18 @@ rules are necessary.</p>
<div class="pilwrap ">
<a class="pilcrow" href="#section-69">&#182;</a>
</div>
</div>
</li>
<li id="section-70">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-70">&#182;</a>
</div>
<p>Operators at the top of this list have higher precedence than the ones lower
down. Following these rules is what makes <code>2 + 3 * 4</code> parse as:</p>
<pre><code><span class="hljs-number">2</span> + (<span class="hljs-number">3</span> * <span class="hljs-number">4</span>)
@ -1665,25 +1701,13 @@ down. Following these rules is what makes <code>2 + 3 * 4</code> parse as:</p>
</li>
<li id="section-70">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-70">&#182;</a>
</div>
<h2 id="wrapping-up">Wrapping Up</h2>
</div>
</li>
<li id="section-71">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-71">&#182;</a>
</div>
<h2 id="wrapping-up">Wrapping Up</h2>
</div>
@ -1696,6 +1720,18 @@ down. Following these rules is what makes <code>2 + 3 * 4</code> parse as:</p>
<div class="pilwrap ">
<a class="pilcrow" href="#section-72">&#182;</a>
</div>
</div>
</li>
<li id="section-73">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-73">&#182;</a>
</div>
<p>Finally, now that we have our <strong>grammar</strong> and our <strong>operators</strong>, we can create
our <strong>Jison.Parser</strong>. We do this by processing all of our rules, recording all
terminals (every symbol which does not appear as the name of a rule above)
@ -1714,11 +1750,11 @@ as “tokens”.</p>
</li>
<li id="section-73">
<li id="section-74">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-73">&#182;</a>
<a class="pilcrow" href="#section-74">&#182;</a>
</div>
<p>Initialize the <strong>Parser</strong> with our list of terminal <strong>tokens</strong>, our <strong>grammar</strong>
rules, and the name of the root. Reverse the operators because Jison orders

504
docs/v2/annotated-source/lexer.html
View file

File diff suppressed because it is too large Load diff

1121
docs/v2/annotated-source/nodes.html
View file

File diff suppressed because it is too large Load diff

2
docs/v2/annotated-source/optparse.html
View file

@ -135,6 +135,8 @@ Use it like so:</p>
options = parser.parse process.argv
</code></pre><p>The first non-option is considered to be the start of the file (and file
option) list, and all subsequent arguments are left unparsed.</p>
<p>The <code>coffee</code> command uses an instance of <strong>OptionParser</strong> to parse its
command-line arguments in <code>src/command.coffee</code>.</p>
</div>

2
docs/v2/annotated-source/repl.html
View file

@ -258,7 +258,7 @@ Unwrap that too.</p>
</div>
<div class="content"><div class='highlight'><pre> ast = <span class="hljs-keyword">new</span> Block [
<span class="hljs-keyword">new</span> Assign (<span class="hljs-keyword">new</span> Value <span class="hljs-keyword">new</span> Literal <span class="hljs-string">'_'</span>), ast, <span class="hljs-string">'='</span>
<span class="hljs-keyword">new</span> Assign (<span class="hljs-keyword">new</span> Value <span class="hljs-keyword">new</span> Literal <span class="hljs-string">'__'</span>), ast, <span class="hljs-string">'='</span>
]
js = ast.compile {bare: <span class="hljs-literal">yes</span>, locals: Object.keys(context), referencedVars}
cb <span class="hljs-literal">null</span>, runInContext js, context, filename

161
docs/v2/annotated-source/rewriter.html
View file

@ -124,6 +124,9 @@ parentheses, and generally clean things up.</p>
</div>
<div class="content"><div class='highlight'><pre>
{throwSyntaxError} = <span class="hljs-built_in">require</span> <span class="hljs-string">'./helpers'</span></pre></div></div>
</li>
@ -199,6 +202,7 @@ corrected before implicit parentheses can be wrapped around blocks of code.</p>
@tagPostfixConditionals()
@addImplicitBracesAndParens()
@addLocationDataToGeneratedTokens()
@enforceValidCSXAttributes()
@fixOutdentLocationData()
@tokens</pre></div></div>
@ -225,16 +229,18 @@ our feet.</p>
i += block.call <span class="hljs-keyword">this</span>, token, i, tokens <span class="hljs-keyword">while</span> token = tokens[i]
<span class="hljs-literal">true</span>
detectEnd: <span class="hljs-function"><span class="hljs-params">(i, condition, action)</span> -&gt;</span>
detectEnd: <span class="hljs-function"><span class="hljs-params">(i, condition, action, opts = {})</span> -&gt;</span>
{tokens} = <span class="hljs-keyword">this</span>
levels = <span class="hljs-number">0</span>
<span class="hljs-keyword">while</span> token = tokens[i]
<span class="hljs-keyword">return</span> action.call <span class="hljs-keyword">this</span>, token, i <span class="hljs-keyword">if</span> levels <span class="hljs-keyword">is</span> <span class="hljs-number">0</span> <span class="hljs-keyword">and</span> condition.call <span class="hljs-keyword">this</span>, token, i
<span class="hljs-keyword">return</span> action.call <span class="hljs-keyword">this</span>, token, i - <span class="hljs-number">1</span> <span class="hljs-keyword">if</span> <span class="hljs-keyword">not</span> token <span class="hljs-keyword">or</span> levels &lt; <span class="hljs-number">0</span>
<span class="hljs-keyword">if</span> token[<span class="hljs-number">0</span>] <span class="hljs-keyword">in</span> EXPRESSION_START
levels += <span class="hljs-number">1</span>
<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> token[<span class="hljs-number">0</span>] <span class="hljs-keyword">in</span> EXPRESSION_END
levels -= <span class="hljs-number">1</span>
<span class="hljs-keyword">if</span> levels &lt; <span class="hljs-number">0</span>
<span class="hljs-keyword">return</span> <span class="hljs-keyword">if</span> opts.returnOnNegativeLevel
<span class="hljs-keyword">return</span> action.call <span class="hljs-keyword">this</span>, token, i
i += <span class="hljs-number">1</span>
i - <span class="hljs-number">1</span></pre></div></div>
@ -266,18 +272,16 @@ dispatch them here.</p>
<a class="pilcrow" href="#section-8">&#182;</a>
</div>
<p>The lexer has tagged the opening parenthesis of a method call. Match it with
its paired close. We have the mis-nested outdent case included here for
calls that close on the same line, just before their outdent.</p>
its paired close.</p>
</div>
<div class="content"><div class='highlight'><pre> closeOpenCalls: <span class="hljs-function">-&gt;</span>
<span class="hljs-function"> <span class="hljs-title">condition</span> = <span class="hljs-params">(token, i)</span> -&gt;</span>
token[<span class="hljs-number">0</span>] <span class="hljs-keyword">in</span> [<span class="hljs-string">')'</span>, <span class="hljs-string">'CALL_END'</span>] <span class="hljs-keyword">or</span>
token[<span class="hljs-number">0</span>] <span class="hljs-keyword">is</span> <span class="hljs-string">'OUTDENT'</span> <span class="hljs-keyword">and</span> @tag(i - <span class="hljs-number">1</span>) <span class="hljs-keyword">is</span> <span class="hljs-string">')'</span>
token[<span class="hljs-number">0</span>] <span class="hljs-keyword">in</span> [<span class="hljs-string">')'</span>, <span class="hljs-string">'CALL_END'</span>]
<span class="hljs-function">
<span class="hljs-title">action</span> = <span class="hljs-params">(token, i)</span> -&gt;</span>
@tokens[<span class="hljs-keyword">if</span> token[<span class="hljs-number">0</span>] <span class="hljs-keyword">is</span> <span class="hljs-string">'OUTDENT'</span> <span class="hljs-keyword">then</span> i - <span class="hljs-number">1</span> <span class="hljs-keyword">else</span> i][<span class="hljs-number">0</span>] = <span class="hljs-string">'CALL_END'</span>
token[<span class="hljs-number">0</span>] = <span class="hljs-string">'CALL_END'</span>
@scanTokens (token, i) -&gt;
@detectEnd i + <span class="hljs-number">1</span>, condition, action <span class="hljs-keyword">if</span> token[<span class="hljs-number">0</span>] <span class="hljs-keyword">is</span> <span class="hljs-string">'CALL_START'</span>
@ -292,7 +296,7 @@ calls that close on the same line, just before their outdent.</p>
<div class="pilwrap ">
<a class="pilcrow" href="#section-9">&#182;</a>
</div>
<p>The lexer has tagged the opening parenthesis of an indexing operation call.
<p>The lexer has tagged the opening bracket of an indexing operation call.
Match it with its paired close.</p>
</div>
@ -417,7 +421,7 @@ add them.</p>
@scanTokens (token, i, tokens) -&gt;
[tag] = token
[prevTag] = prevToken = <span class="hljs-keyword">if</span> i &gt; <span class="hljs-number">0</span> <span class="hljs-keyword">then</span> tokens[i - <span class="hljs-number">1</span>] <span class="hljs-keyword">else</span> []
[nextTag] = <span class="hljs-keyword">if</span> i &lt; tokens.length - <span class="hljs-number">1</span> <span class="hljs-keyword">then</span> tokens[i + <span class="hljs-number">1</span>] <span class="hljs-keyword">else</span> []
[nextTag] = nextToken = <span class="hljs-keyword">if</span> i &lt; tokens.length - <span class="hljs-number">1</span> <span class="hljs-keyword">then</span> tokens[i + <span class="hljs-number">1</span>] <span class="hljs-keyword">else</span> []
<span class="hljs-function"> <span class="hljs-title">stackTop</span> = -&gt;</span> stack[stack.length - <span class="hljs-number">1</span>]
startIdx = i</pre></div></div>
@ -473,30 +477,35 @@ class declaration or if-conditionals)</p>
<div class="content"><div class='highlight'><pre><span class="hljs-function"> <span class="hljs-title">inImplicitControl</span> = -&gt;</span> inImplicit() <span class="hljs-keyword">and</span> stackTop()?[<span class="hljs-number">0</span>] <span class="hljs-keyword">is</span> <span class="hljs-string">'CONTROL'</span>
<span class="hljs-function">
<span class="hljs-title">startImplicitCall</span> = <span class="hljs-params">(j)</span> -&gt;</span>
idx = j ? i
<span class="hljs-title">startImplicitCall</span> = <span class="hljs-params">(idx)</span> -&gt;</span>
stack.push [<span class="hljs-string">'('</span>, idx, ours: <span class="hljs-literal">yes</span>]
tokens.splice idx, <span class="hljs-number">0</span>, generate <span class="hljs-string">'CALL_START'</span>, <span class="hljs-string">'('</span>
i += <span class="hljs-number">1</span> <span class="hljs-keyword">if</span> <span class="hljs-keyword">not</span> j?
<span class="hljs-function">
<span class="hljs-title">endImplicitCall</span> = -&gt;</span>
stack.pop()
tokens.splice i, <span class="hljs-number">0</span>, generate <span class="hljs-string">'CALL_END'</span>, <span class="hljs-string">')'</span>, [<span class="hljs-string">''</span>, <span class="hljs-string">'end of input'</span>, token[<span class="hljs-number">2</span>]]
i += <span class="hljs-number">1</span>
<span class="hljs-function">
<span class="hljs-title">startImplicitObject</span> = <span class="hljs-params">(j, startsLine = <span class="hljs-literal">yes</span>)</span> -&gt;</span>
idx = j ? i
<span class="hljs-title">startImplicitObject</span> = <span class="hljs-params">(idx, startsLine = <span class="hljs-literal">yes</span>)</span> -&gt;</span>
stack.push [<span class="hljs-string">'{'</span>, idx, sameLine: <span class="hljs-literal">yes</span>, startsLine: startsLine, ours: <span class="hljs-literal">yes</span>]
val = <span class="hljs-keyword">new</span> String <span class="hljs-string">'{'</span>
val.generated = <span class="hljs-literal">yes</span>
tokens.splice idx, <span class="hljs-number">0</span>, generate <span class="hljs-string">'{'</span>, val, token
i += <span class="hljs-number">1</span> <span class="hljs-keyword">if</span> <span class="hljs-keyword">not</span> j?
<span class="hljs-function">
<span class="hljs-title">endImplicitObject</span> = <span class="hljs-params">(j)</span> -&gt;</span>
j = j ? i
stack.pop()
tokens.splice j, <span class="hljs-number">0</span>, generate <span class="hljs-string">'}'</span>, <span class="hljs-string">'}'</span>, token
i += <span class="hljs-number">1</span></pre></div></div>
i += <span class="hljs-number">1</span>
<span class="hljs-function">
<span class="hljs-title">implicitObjectContinues</span> = <span class="hljs-params">(j)</span> =&gt;</span>
nextTerminatorIdx = <span class="hljs-literal">null</span>
@detectEnd j,
<span class="hljs-function"><span class="hljs-params">(token)</span> -&gt;</span> token[<span class="hljs-number">0</span>] <span class="hljs-keyword">is</span> <span class="hljs-string">'TERMINATOR'</span>
(token, i) -&gt; nextTerminatorIdx = i
returnOnNegativeLevel: <span class="hljs-literal">yes</span>
<span class="hljs-keyword">return</span> <span class="hljs-literal">no</span> <span class="hljs-keyword">unless</span> nextTerminatorIdx?
@looksObjectish nextTerminatorIdx + <span class="hljs-number">1</span></pre></div></div>
</li>
@ -507,12 +516,14 @@ class declaration or if-conditionals)</p>
<div class="pilwrap ">
<a class="pilcrow" href="#section-18">&#182;</a>
</div>
<p>Don’t end an implicit call on next indent if any of these are in an argument</p>
<p>Don’t end an implicit call/object on next indent if any of these are in an argument/value</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> inImplicitCall() <span class="hljs-keyword">and</span> tag <span class="hljs-keyword">in</span> [<span class="hljs-string">'IF'</span>, <span class="hljs-string">'TRY'</span>, <span class="hljs-string">'FINALLY'</span>, <span class="hljs-string">'CATCH'</span>,
<span class="hljs-string">'CLASS'</span>, <span class="hljs-string">'SWITCH'</span>]
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (
(inImplicitCall() <span class="hljs-keyword">or</span> inImplicitObject()) <span class="hljs-keyword">and</span> tag <span class="hljs-keyword">in</span> CONTROL_IN_IMPLICIT <span class="hljs-keyword">or</span>
inImplicitObject() <span class="hljs-keyword">and</span> prevTag <span class="hljs-keyword">is</span> <span class="hljs-string">':'</span> <span class="hljs-keyword">and</span> tag <span class="hljs-keyword">is</span> <span class="hljs-string">'FOR'</span>
)
stack.push [<span class="hljs-string">'CONTROL'</span>, i, ours: <span class="hljs-literal">yes</span>]
<span class="hljs-keyword">return</span> forward(<span class="hljs-number">1</span>)
@ -535,8 +546,12 @@ class declaration or if-conditionals)</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> prevTag <span class="hljs-keyword">not</span> <span class="hljs-keyword">in</span> [<span class="hljs-string">'=&gt;'</span>, <span class="hljs-string">'-&gt;'</span>, <span class="hljs-string">'['</span>, <span class="hljs-string">'('</span>, <span class="hljs-string">','</span>, <span class="hljs-string">'{'</span>, <span class="hljs-string">'TRY'</span>, <span class="hljs-string">'ELSE'</span>, <span class="hljs-string">'='</span>]
endImplicitCall() <span class="hljs-keyword">while</span> inImplicitCall()
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> prevTag <span class="hljs-keyword">not</span> <span class="hljs-keyword">in</span> [<span class="hljs-string">'=&gt;'</span>, <span class="hljs-string">'-&gt;'</span>, <span class="hljs-string">'['</span>, <span class="hljs-string">'('</span>, <span class="hljs-string">','</span>, <span class="hljs-string">'{'</span>, <span class="hljs-string">'ELSE'</span>, <span class="hljs-string">'='</span>]
<span class="hljs-keyword">while</span> inImplicitCall() <span class="hljs-keyword">or</span> inImplicitObject() <span class="hljs-keyword">and</span> prevTag <span class="hljs-keyword">isnt</span> <span class="hljs-string">':'</span>
<span class="hljs-keyword">if</span> inImplicitCall()
endImplicitCall()
<span class="hljs-keyword">else</span>
endImplicitObject()
stack.pop() <span class="hljs-keyword">if</span> inImplicitControl()
stack.push [tag, i]
<span class="hljs-keyword">return</span> forward(<span class="hljs-number">1</span>)</pre></div></div>
@ -599,7 +614,7 @@ f a, f() b, f? c, h[0] d etc.</p>
tag <span class="hljs-keyword">is</span> <span class="hljs-string">'?'</span> <span class="hljs-keyword">and</span> i &gt; <span class="hljs-number">0</span> <span class="hljs-keyword">and</span> <span class="hljs-keyword">not</span> tokens[i - <span class="hljs-number">1</span>].spaced) <span class="hljs-keyword">and</span>
(nextTag <span class="hljs-keyword">in</span> IMPLICIT_CALL <span class="hljs-keyword">or</span>
nextTag <span class="hljs-keyword">in</span> IMPLICIT_UNSPACED_CALL <span class="hljs-keyword">and</span>
<span class="hljs-keyword">not</span> tokens[i + <span class="hljs-number">1</span>]?.spaced <span class="hljs-keyword">and</span> <span class="hljs-keyword">not</span> tokens[i + <span class="hljs-number">1</span>]?.newLine)
<span class="hljs-keyword">not</span> nextToken.spaced <span class="hljs-keyword">and</span> <span class="hljs-keyword">not</span> nextToken.newLine)
tag = token[<span class="hljs-number">0</span>] = <span class="hljs-string">'FUNC_EXIST'</span> <span class="hljs-keyword">if</span> tag <span class="hljs-keyword">is</span> <span class="hljs-string">'?'</span>
startImplicitCall i + <span class="hljs-number">1</span>
<span class="hljs-keyword">return</span> forward(<span class="hljs-number">2</span>)</pre></div></div>
@ -617,11 +632,6 @@ f a, f() b, f? c, h[0] d etc.</p>
<pre><code>f
a: b
c: d
</code></pre><p>and</p>
<pre><code>f
<span class="hljs-number">1</span>
a: b
b: c
</code></pre><p>Don’t accept implicit calls of this type, when on the same line
as the control structures below as that may misinterpret constructs like:</p>
<pre><code><span class="hljs-keyword">if</span> f
@ -674,7 +684,9 @@ that creates grammatical ambiguities.</p>
<span class="hljs-keyword">when</span> @tag(i - <span class="hljs-number">1</span>) <span class="hljs-keyword">in</span> EXPRESSION_END <span class="hljs-keyword">then</span> start[<span class="hljs-number">1</span>]
<span class="hljs-keyword">when</span> @tag(i - <span class="hljs-number">2</span>) <span class="hljs-keyword">is</span> <span class="hljs-string">'@'</span> <span class="hljs-keyword">then</span> i - <span class="hljs-number">2</span>
<span class="hljs-keyword">else</span> i - <span class="hljs-number">1</span>
s -= <span class="hljs-number">2</span> <span class="hljs-keyword">while</span> @tag(s - <span class="hljs-number">2</span>) <span class="hljs-keyword">is</span> <span class="hljs-string">'HERECOMMENT'</span></pre></div></div>
s -= <span class="hljs-number">2</span> <span class="hljs-keyword">while</span> @tag(s - <span class="hljs-number">2</span>) <span class="hljs-keyword">is</span> <span class="hljs-string">'HERECOMMENT'</span>
startsLine = s <span class="hljs-keyword">is</span> <span class="hljs-number">0</span> <span class="hljs-keyword">or</span> @tag(s - <span class="hljs-number">1</span>) <span class="hljs-keyword">in</span> LINEBREAKS <span class="hljs-keyword">or</span> tokens[s - <span class="hljs-number">1</span>].newLine</pre></div></div>
</li>
@ -685,23 +697,6 @@ that creates grammatical ambiguities.</p>
<div class="pilwrap ">
<a class="pilcrow" href="#section-26">&#182;</a>
</div>
<p>Mark if the value is a for loop</p>
</div>
<div class="content"><div class='highlight'><pre> @insideForDeclaration = nextTag <span class="hljs-keyword">is</span> <span class="hljs-string">'FOR'</span>
startsLine = s <span class="hljs-keyword">is</span> <span class="hljs-number">0</span> <span class="hljs-keyword">or</span> @tag(s - <span class="hljs-number">1</span>) <span class="hljs-keyword">in</span> LINEBREAKS <span class="hljs-keyword">or</span> tokens[s - <span class="hljs-number">1</span>].newLine</pre></div></div>
</li>
<li id="section-27">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-27">&#182;</a>
</div>
<p>Are we just continuing an already declared object?</p>
</div>
@ -718,11 +713,11 @@ that creates grammatical ambiguities.</p>
</li>
<li id="section-28">
<li id="section-27">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-28">&#182;</a>
<a class="pilcrow" href="#section-27">&#182;</a>
</div>
<p>End implicit calls when chaining method calls
like e.g.:</p>
@ -741,11 +736,11 @@ like e.g.:</p>
</li>
<li id="section-29">
<li id="section-28">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-29">&#182;</a>
<a class="pilcrow" href="#section-28">&#182;</a>
</div>
<p>Mark all enclosing objects as not sameLine</p>
@ -763,11 +758,11 @@ like e.g.:</p>
</li>
<li id="section-30">
<li id="section-29">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-30">&#182;</a>
<a class="pilcrow" href="#section-29">&#182;</a>
</div>
<p>Close implicit calls when reached end of argument list</p>
@ -779,29 +774,30 @@ like e.g.:</p>
</li>
<li id="section-31">
<li id="section-30">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-31">&#182;</a>
<a class="pilcrow" href="#section-30">&#182;</a>
</div>
<p>Close implicit objects such as:
return a: 1, b: 2 unless true</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> inImplicitObject() <span class="hljs-keyword">and</span> <span class="hljs-keyword">not</span> @insideForDeclaration <span class="hljs-keyword">and</span> sameLine <span class="hljs-keyword">and</span>
tag <span class="hljs-keyword">isnt</span> <span class="hljs-string">'TERMINATOR'</span> <span class="hljs-keyword">and</span> prevTag <span class="hljs-keyword">isnt</span> <span class="hljs-string">':'</span>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> inImplicitObject() <span class="hljs-keyword">and</span> sameLine <span class="hljs-keyword">and</span>
tag <span class="hljs-keyword">isnt</span> <span class="hljs-string">'TERMINATOR'</span> <span class="hljs-keyword">and</span> prevTag <span class="hljs-keyword">isnt</span> <span class="hljs-string">':'</span> <span class="hljs-keyword">and</span>
<span class="hljs-keyword">not</span> (tag <span class="hljs-keyword">in</span> [<span class="hljs-string">'POST_IF'</span>, <span class="hljs-string">'FOR'</span>, <span class="hljs-string">'WHILE'</span>, <span class="hljs-string">'UNTIL'</span>] <span class="hljs-keyword">and</span> startsLine <span class="hljs-keyword">and</span> implicitObjectContinues(i + <span class="hljs-number">1</span>))
endImplicitObject()</pre></div></div>
</li>
<li id="section-32">
<li id="section-31">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-32">&#182;</a>
<a class="pilcrow" href="#section-31">&#182;</a>
</div>
<p>Close implicit objects when at end of line, line didn’t end with a comma
and the implicit object didn’t start the line or the next line doesn’t look like
@ -819,11 +815,11 @@ the continuation of an object.</p>
</li>
<li id="section-33">
<li id="section-32">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-33">&#182;</a>
<a class="pilcrow" href="#section-32">&#182;</a>
</div>
<p>Close implicit object if comma is the last character
and what comes after doesn’t look like it belongs.
@ -838,17 +834,16 @@ e = <span class="hljs-number">2</span>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> tag <span class="hljs-keyword">is</span> <span class="hljs-string">','</span> <span class="hljs-keyword">and</span> <span class="hljs-keyword">not</span> @looksObjectish(i + <span class="hljs-number">1</span>) <span class="hljs-keyword">and</span> inImplicitObject() <span class="hljs-keyword">and</span>
<span class="hljs-keyword">not</span> @insideForDeclaration <span class="hljs-keyword">and</span>
(nextTag <span class="hljs-keyword">isnt</span> <span class="hljs-string">'TERMINATOR'</span> <span class="hljs-keyword">or</span> <span class="hljs-keyword">not</span> @looksObjectish(i + <span class="hljs-number">2</span>))</pre></div></div>
</li>
<li id="section-34">
<li id="section-33">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-34">&#182;</a>
<a class="pilcrow" href="#section-33">&#182;</a>
</div>
<p>When nextTag is OUTDENT the comma is insignificant and
should just be ignored so embed it in the implicit object.</p>
@ -866,6 +861,27 @@ array further up the stack, so give it a chance.</p>
</li>
<li id="section-34">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-34">&#182;</a>
</div>
<p>Make sure only strings and wrapped expressions are used in CSX attributes</p>
</div>
<div class="content"><div class='highlight'><pre> enforceValidCSXAttributes: <span class="hljs-function">-&gt;</span>
@scanTokens (token, i, tokens) -&gt;
<span class="hljs-keyword">if</span> token.csxColon
next = tokens[i + <span class="hljs-number">1</span>]
<span class="hljs-keyword">if</span> next[<span class="hljs-number">0</span>] <span class="hljs-keyword">not</span> <span class="hljs-keyword">in</span> [<span class="hljs-string">'STRING_START'</span>, <span class="hljs-string">'STRING'</span>, <span class="hljs-string">'('</span>]
throwSyntaxError <span class="hljs-string">'expected wrapped or quoted CSX attribute'</span>, next[<span class="hljs-number">2</span>]
<span class="hljs-keyword">return</span> <span class="hljs-number">1</span></pre></div></div>
</li>
<li id="section-35">
<div class="annotation">
@ -965,6 +981,10 @@ blocks are added.</p>
<span class="hljs-keyword">for</span> j <span class="hljs-keyword">in</span> [<span class="hljs-number">1.</span><span class="hljs-number">.2</span>] <span class="hljs-keyword">when</span> @tag(i + j) <span class="hljs-keyword">in</span> [<span class="hljs-string">'OUTDENT'</span>, <span class="hljs-string">'TERMINATOR'</span>, <span class="hljs-string">'FINALLY'</span>]
tokens.splice i + j, <span class="hljs-number">0</span>, @indentation()...
<span class="hljs-keyword">return</span> <span class="hljs-number">2</span> + j
<span class="hljs-keyword">if</span> tag <span class="hljs-keyword">in</span> [<span class="hljs-string">'-&gt;'</span>, <span class="hljs-string">'=&gt;'</span>] <span class="hljs-keyword">and</span> (@tag(i + <span class="hljs-number">1</span>) <span class="hljs-keyword">is</span> <span class="hljs-string">','</span> <span class="hljs-keyword">or</span> @tag(i + <span class="hljs-number">1</span>) <span class="hljs-keyword">is</span> <span class="hljs-string">'.'</span> <span class="hljs-keyword">and</span> token.newLine)
[indent, outdent] = @indentation tokens[i]
tokens.splice i + <span class="hljs-number">1</span>, <span class="hljs-number">0</span>, indent, outdent
<span class="hljs-keyword">return</span> <span class="hljs-number">1</span>
<span class="hljs-keyword">if</span> tag <span class="hljs-keyword">in</span> SINGLE_LINERS <span class="hljs-keyword">and</span> @tag(i + <span class="hljs-number">1</span>) <span class="hljs-keyword">isnt</span> <span class="hljs-string">'INDENT'</span> <span class="hljs-keyword">and</span>
<span class="hljs-keyword">not</span> (tag <span class="hljs-keyword">is</span> <span class="hljs-string">'ELSE'</span> <span class="hljs-keyword">and</span> @tag(i + <span class="hljs-number">1</span>) <span class="hljs-keyword">is</span> <span class="hljs-string">'IF'</span>)
starter = tag
@ -1179,7 +1199,7 @@ EXPRESSION_END = []
</div>
<div class="content"><div class='highlight'><pre>IMPLICIT_CALL = [
<span class="hljs-string">'IDENTIFIER'</span>, <span class="hljs-string">'PROPERTY'</span>, <span class="hljs-string">'NUMBER'</span>, <span class="hljs-string">'INFINITY'</span>, <span class="hljs-string">'NAN'</span>
<span class="hljs-string">'IDENTIFIER'</span>, <span class="hljs-string">'CSX_TAG'</span>, <span class="hljs-string">'PROPERTY'</span>, <span class="hljs-string">'NUMBER'</span>, <span class="hljs-string">'INFINITY'</span>, <span class="hljs-string">'NAN'</span>
<span class="hljs-string">'STRING'</span>, <span class="hljs-string">'STRING_START'</span>, <span class="hljs-string">'REGEX'</span>, <span class="hljs-string">'REGEX_START'</span>, <span class="hljs-string">'JS'</span>
<span class="hljs-string">'NEW'</span>, <span class="hljs-string">'PARAM_START'</span>, <span class="hljs-string">'CLASS'</span>, <span class="hljs-string">'IF'</span>, <span class="hljs-string">'TRY'</span>, <span class="hljs-string">'SWITCH'</span>, <span class="hljs-string">'THIS'</span>
<span class="hljs-string">'UNDEFINED'</span>, <span class="hljs-string">'NULL'</span>, <span class="hljs-string">'BOOL'</span>
@ -1254,6 +1274,21 @@ SINGLE_CLOSERS = [<span class="hljs-string">'TERMINATOR'</span>, <span class="
</li>
<li id="section-53">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-53">&#182;</a>
</div>
<p>Tokens that prevent a subsequent indent from ending implicit calls/objects</p>
</div>
<div class="content"><div class='highlight'><pre>CONTROL_IN_IMPLICIT = [<span class="hljs-string">'IF'</span>, <span class="hljs-string">'TRY'</span>, <span class="hljs-string">'FINALLY'</span>, <span class="hljs-string">'CATCH'</span>, <span class="hljs-string">'CLASS'</span>, <span class="hljs-string">'SWITCH'</span>]</pre></div></div>
</li>
</ul>
</div>
</body>

4
docs/v2/browser-compiler/coffeescript.js
View file

File diff suppressed because one or more lines are too long

293
docs/v2/index.html
View file

@ -553,8 +553,6 @@ textarea {
<div class="row">
<div class="col-xs-12 text-xs-right try-buttons">
<button type="button" class="btn btn-primary" data-action="run-code-example" data-example="try-coffeescript" data-run="true">▶</button>&emsp;
<button type="button" class="btn btn-primary" data-action="link" data-example="try-coffeescript"><svg aria-hidden="true" version="1.1" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>
</button>
</div>
</div>
</aside>
@ -599,7 +597,7 @@ textarea {
<a href="#conditionals" class="nav-link" data-action="sidebar-nav">If, Else, Unless, and Conditional Assignment</a>
</li>
<li class="nav-item">
<a href="#splats" class="nav-link" data-action="sidebar-nav">Splats…</a>
<a href="#splats" class="nav-link" data-action="sidebar-nav">Splats, or Rest Parameters/Spread Syntax</a>
</li>
<li class="nav-item">
<a href="#loops" class="nav-link" data-action="sidebar-nav">Loops and Comprehensions</a>
@ -655,6 +653,9 @@ textarea {
<li class="nav-item">
<a href="#embedded" class="nav-link" data-action="sidebar-nav">Embedded JavaScript</a>
</li>
<li class="nav-item">
<a href="#jsx" class="nav-link" data-action="sidebar-nav">JSX</a>
</li>
</ul>
</li>
<li class="nav-item">
@ -712,6 +713,9 @@ textarea {
<li class="nav-item">
<a href="#breaking-changes" class="nav-link" data-action="sidebar-nav">Breaking Changes From 1.x</a>
<ul class="nav">
<li class="nav-item">
<a href="#breaking-change-fat-arrow" class="nav-link" data-action="sidebar-nav">Bound (Fat Arrow) Functions</a>
</li>
<li class="nav-item">
<a href="#breaking-changes-default-values" class="nav-link" data-action="sidebar-nav">Default Values</a>
</li>
@ -724,6 +728,9 @@ textarea {
<li class="nav-item">
<a href="#breaking-changes-super-extends" class="nav-link" data-action="sidebar-nav"><code>super</code> and <code>extends</code></a>
</li>
<li class="nav-item">
<a href="#breaking-changes-jsx-and-the-less-than-and-greater-than-operators" class="nav-link" data-action="sidebar-nav">JSX and the <code>&lt;</code> and <code>&gt;</code> Operators</a>
</li>
<li class="nav-item">
<a href="#breaking-changes-literate-coffeescript" class="nav-link" data-action="sidebar-nav">Literate CoffeeScript Parsing</a>
</li>
@ -732,6 +739,9 @@ textarea {
<li class="nav-item">
<a href="#changelog" class="nav-link" data-action="sidebar-nav">Changelog</a>
</li>
<li class="nav-item">
<a href="/v1/" class="nav-link" data-action="sidebar-nav">Version 1.x Documentation</a>
</li>
</ul>
</nav>
@ -751,7 +761,7 @@ textarea {
<section id="overview">
<p><strong>CoffeeScript is a little language that compiles into JavaScript.</strong> Underneath that awkward Java-esque patina, JavaScript has always had a gorgeous heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way.</p>
<p>The golden rule of CoffeeScript is: <em>“It’s just JavaScript.”</em> The code compiles one-to-one into the equivalent JS, and there is no interpretation at runtime. You can use any existing JavaScript library seamlessly from CoffeeScript (and vice-versa). The compiled output is readable, pretty-printed, and tends to run as fast or faster than the equivalent handwritten JavaScript.</p>
<p><strong>Latest Version:</strong> <a href="https://github.com/jashkenas/coffeescript/tarball/2.0.0-beta2">2.0.0-beta2</a></p>
<p><strong>Latest Version:</strong> <a href="https://github.com/jashkenas/coffeescript/tarball/2.0.0-beta3">2.0.0-beta3</a></p>
<blockquote class="uneditable-code-block"><pre><code class="language-bash">npm install -g coffeescript@next
</code></pre>
</blockquote>
@ -850,7 +860,7 @@ cubes = (function() {
<h3>What’s New In CoffeeScript 2?</h3>
<p>The biggest change in CoffeeScript 2 is that now the CoffeeScript compiler produces modern, ES2015+ JavaScript. A CoffeeScript <code>=&gt;</code> becomes an ES <code>=&gt;</code>, a CoffeeScript <code>class</code> becomes an ES <code>class</code> and so on. With the exception of modules (<code>import</code> and <code>export</code> statements), all the ES2015+ features that CoffeeScript supports can run natively in Node 7.6+, meaning that Node can run CoffeeScript’s output without any further processing required. You can <a href="http://coffeescript.org/v2/test.html">run the tests in your browser</a> to see if your browser can do the same; Chrome has supported all features since version 55.</p>
<p>Support for ES2015+ syntax is important to ensure compatibility with frameworks that assume ES2015. Now that CoffeeScript compiles classes to the ES <code>class</code> keyword, it’s possible to <code>extend</code> an ES class; that wasn’t possible in CoffeeScript 1. Parity in how language features work is also important on its own; CoffeeScript “is just JavaScript,” and so things like <a href="#breaking-changes-default-values">function parameter default values</a> should behave the same in CoffeeScript as in JavaScript.</p>
<p>Many ES2015+ features have been backported to CoffeeScript 1.11 and 1.12, including <a href="#modules">modules</a>, <a href="#generator-iteration"><code>for…of</code></a>, and <a href="#tagged-template-literals">tagged template literals</a>. One major new feature unique to CoffeeScript 2 is support for ES2017’s <a href="#async-functions">async functions</a>. More details are in the <a href="#changelog">changelog</a>.</p>
<p>Many ES2015+ features have been backported to CoffeeScript 1.11 and 1.12, including <a href="#modules">modules</a>, <a href="#generator-iteration"><code>for…of</code></a>, and <a href="#tagged-template-literals">tagged template literals</a>. Major new features unique to CoffeeScript 2 are support for ES2017’s <a href="#async-functions">async functions</a> and for <a href="#jsx">JSX</a>. More details are in the <a href="#changelog">changelog</a>.</p>
<p>There are very few <a href="#breaking-changes">breaking changes from CoffeeScript 1.x to 2</a>; we hope the upgrade process is smooth for most projects.</p>
<h3>Why CoffeeScript When There’s ES2015?</h3>
<p>CoffeeScript introduced many new features to the JavaScript world, such as <a href="#fat-arrow"><code>=&gt;</code></a> and <a href="#destructuring">destructuring</a> and <a href="#classes">classes</a>. We are happy that ECMA has seen their utility and adopted them into ECMAScript.</p>
@ -964,11 +974,11 @@ cubes = (function() {
</ul>
<h3>ES2015+ Output</h3>
<p>CoffeeScript 2 outputs the latest ES2015+ syntax. If you’re looking for a single tool that takes CoffeeScript input and generates JavaScript output that runs in any JavaScript runtime, assuming you opt out of certain newer features, stick to <a href="/v1/">CoffeeScript 1.x</a>. CoffeeScript 2 <a href="#breaking-changes">breaks compatibility</a> with certain CoffeeScript 1.x features in order to conform with the ES2015+ specifications, and generate more idiomatic output (a CoffeeScript <code>=&gt;</code> becomes an ES <code>=&gt;</code>; a CoffeeScript <code>class</code> becomes an ES <code>class</code>; and so on).</p>
<p>Since the CoffeeScript 2 compiler outputs ES2015+ syntax, it is your responsibility to either ensure that your target JavaScript runtime(s) support all these features, or that you pass the output through another transpiler like <a href="http://babeljs.io/">Babel</a>, <a href="https://github.com/rollup/rollup">Rollup</a> or <a href="https://github.com/google/traceur-compiler">Traceur Compiler</a>. In general, <a href="http://node.green/">CoffeeScript 2’s output is supported as is by Node.js 7.6+</a>, except for modules which require transpilation.</p>
<p>Since the CoffeeScript 2 compiler outputs ES2015+ syntax, it is your responsibility to either ensure that your target JavaScript runtime(s) support all these features, or that you pass the output through another transpiler like <a href="http://babeljs.io/">Babel</a>, <a href="https://github.com/rollup/rollup">Rollup</a> or <a href="https://github.com/google/traceur-compiler">Traceur Compiler</a>. In general, <a href="http://node.green/">CoffeeScript 2’s output is supported as is by Node.js 7.6+</a>, except for modules and JSX which require transpilation.</p>
<p>There are many great task runners for setting up JavaScript build chains, such as <a href="http://gulpjs.com/">Gulp</a>, <a href="https://webpack.github.io/">Webpack</a>, <a href="https://gruntjs.com/">Grunt</a> and <a href="http://broccolijs.com/">Broccoli</a>. If you’re looking for a very minimal solution to get started, you can use <a href="https://babeljs.io/docs/plugins/preset-env/">babel-preset-env</a> and the command line:</p>
<blockquote class="uneditable-code-block"><pre><code class="language-bash">npm install --global coffeescript@next
npm install --save-dev coffeescript@next babel-cli babel-preset-env
coffee -p *.coffee | babel --presets env &gt; app.js
coffee --print *.coffee | babel --presets env &gt; app.js
</code></pre>
</blockquote><h3>Node.js</h3>
<p>If you’d like to use Node.js’ CommonJS to <code>require</code> CoffeeScript files, e.g. <code>require './app.coffee'</code>, you must first “register” CoffeeScript as an extension:</p>
@ -1378,8 +1388,8 @@ date = friday ? sue : jill;
</section>
<section id="splats">
<h2>Splats…</h2>
<p>The JavaScript <code>arguments</code> object is a useful way to work with functions that accept variable numbers of arguments. CoffeeScript provides splats <code>...</code>, both for function definition as well as invocation, making variable numbers of arguments a little bit more palatable.</p>
<h2>Splats, or Rest Parameters/Spread Syntax</h2>
<p>The JavaScript <code>arguments</code> object is a useful way to work with functions that accept variable numbers of arguments. CoffeeScript provides splats <code>...</code>, both for function definition as well as invocation, making variable numbers of arguments a little bit more palatable. ES2015 adopted this feature as their <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a>.</p>
<aside class="code-example container-fluid bg-ribbed-dark" data-example="splats">
<div class="row">
<div class="col-md-6 coffeescript-input-column">
@ -1405,9 +1415,11 @@ contenders = [
awardMedals contenders...
alert "Gold: " + gold
alert "Silver: " + silver
alert "The Field: " + rest
alert """
Gold: #{gold}
Silver: #{silver}
The Field: #{rest.join ', '}
"""
</textarea>
</div>
<div class="col-md-6 javascript-output-column">
@ -1425,11 +1437,7 @@ contenders = ["Michael Phelps", "Liu Xiang", "Yao Ming", "Allyson Felix", "Shawn
awardMedals(...contenders);
alert("Gold: " + gold);
alert("Silver: " + silver);
alert("The Field: " + rest);
alert(`Gold: ${gold}\nSilver: ${silver}\nThe Field: ${rest.join(', ')}`);
</textarea>
</div>
</div>
@ -1441,6 +1449,71 @@ alert("The Field: " + rest);
</div>
</aside>
<div id="array-spread" class="bookmark"></div>
<p>Splats also let us elide array elements…</p>
<aside class="code-example container-fluid bg-ribbed-dark" data-example="array_spread">
<div class="row">
<div class="col-md-6 coffeescript-input-column">
<textarea class="coffeescript-input" id="array_spread-coffee">popular = ['pepperoni', 'sausage', 'cheese']
unwanted = ['anchovies', 'olives']
all = [popular..., unwanted..., 'mushrooms']
</textarea>
</div>
<div class="col-md-6 javascript-output-column">
<textarea class="javascript-output" id="array_spread-js">var all, popular, unwanted;
popular = ['pepperoni', 'sausage', 'cheese'];
unwanted = ['anchovies', 'olives'];
all = [...popular, ...unwanted, 'mushrooms'];
</textarea>
</div>
</div>
<div class="row">
<div class="col-xs-12 text-xs-right">
<button type="button" class="btn btn-primary" data-action="run-code-example" data-example="array_spread" data-run="all"><small>▶</small>&ensp;all</button>
</div>
</div>
</aside>
<div id="object-spread" class="bookmark"></div>
<p>…and object properties.</p>
<aside class="code-example container-fluid bg-ribbed-dark" data-example="object_spread">
<div class="row">
<div class="col-md-6 coffeescript-input-column">
<textarea class="coffeescript-input" id="object_spread-coffee">user =
name: 'Werner Heisenberg'
occupation: 'theoretical physicist'
currentUser = { user..., status: 'Uncertain' }
</textarea>
</div>
<div class="col-md-6 javascript-output-column">
<textarea class="javascript-output" id="object_spread-js">var currentUser, user;
user = {
name: 'Werner Heisenberg',
occupation: 'theoretical physicist'
};
currentUser = Object.assign({}, user, {
status: 'Uncertain'
});
</textarea>
</div>
</div>
<div class="row">
<div class="col-xs-12 text-xs-right">
<button type="button" class="btn btn-primary" data-action="run-code-example" data-example="object_spread" data-run="JSON.stringify%28currentUser%29"><small>▶</small>&ensp;JSON.stringify(currentUser)</button>
</div>
</div>
</aside>
<p>In ECMAScript this is called <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread syntax</a>, and has been supported for arrays since ES2015 but is <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator#Spread_in_object_literals">coming soon for objects</a>. Until object spread syntax is officially supported, the CoffeeScript compiler outputs the same polyfill as <a href="https://babeljs.io/docs/plugins/transform-object-rest-spread/">Babel’s rest spread transform</a>; but once it is supported, we will revise the compiler’s output. Note that there are <a href="https://developers.google.com/web/updates/2017/06/object-rest-spread">very subtle differences</a> between the polyfill and the current proposal.</p>
</section>
<section id="loops">
@ -3121,6 +3194,58 @@ function time() {
</aside>
</section>
<section id="jsx">
<h2>JSX</h2>
<p><a href="https://facebook.github.io/react/docs/introducing-jsx.html">JSX</a> is JavaScript containing interspersed XML elements. While conceived for <a href="https://facebook.github.io/react/">React</a>, it is not specific to any particular library or framework.</p>
<p>CoffeeScript supports interspersed XML elements, without the need for separate plugins or special settings. The XML elements will be compiled as such, outputting JSX that could be parsed like any normal JSX file, for example by <a href="https://babeljs.io/docs/plugins/transform-react-jsx/">Babel with the React JSX transform</a>. CoffeeScript does <em>not</em> output <code>React.createElement</code> calls or any code specific to React or any other framework. It is up to you to attach another step in your build chain to convert this JSX to whatever function calls you wish the XML elements to compile to.</p>
<p>Just like in JSX and HTML, denote XML tags using <code>&lt;</code> and <code>&gt;</code>. You can interpolate CoffeeScript code inside a tag using <code>{</code> and <code>}</code>. To avoid compiler errors, when using <code>&lt;</code> and <code>&gt;</code> to mean “less than” or “greater than,” you should wrap the operators in spaces to distinguish them from XML tags. So <code>i &lt; len</code>, not <code>i&lt;len</code>. The compiler tries to be forgiving when it can be sure what you intend, but always putting spaces around the “less than” and “greater than” operators will remove ambiguity.</p>
<aside class="code-example container-fluid bg-ribbed-dark" data-example="jsx">
<div class="row">
<div class="col-md-6 coffeescript-input-column">
<textarea class="coffeescript-input" id="jsx-coffee">renderStarRating = ({ rating, maxStars }) ->
<aside title={"Rating: #{rating} of #{maxStars} stars"}>
{for wholeStar in [0...Math.floor(rating)]
<Star className="wholeStar" key={wholeStar} />}
{if rating % 1 isnt 0
<Star className="halfStar" />}
{for emptyStar in [Math.ceil(rating)...maxStars]
<Star className="emptyStar" key={emptyStar} />}
</aside>
</textarea>
</div>
<div class="col-md-6 javascript-output-column">
<textarea class="javascript-output" id="jsx-js">var renderStarRating;
renderStarRating = function({rating, maxStars}) {
var emptyStar, wholeStar;
return <aside title={`Rating: ${rating} of ${maxStars} stars`}>
{(function() {
var i, ref, results;
results = [];
for (wholeStar = i = 0, ref = Math.floor(rating); 0 <= ref ? i < ref : i > ref; wholeStar = 0 <= ref ? ++i : --i) {
results.push(<Star className="wholeStar" key={wholeStar} />);
}
return results;
})()}
{(rating % 1 !== 0 ? <Star className="halfStar" /> : void 0)}
{(function() {
var i, ref, ref1, results;
results = [];
for (emptyStar = i = ref = Math.ceil(rating), ref1 = maxStars; ref <= ref1 ? i < ref1 : i > ref1; emptyStar = ref <= ref1 ? ++i : --i) {
results.push(<Star className="emptyStar" key={emptyStar} />);
}
return results;
})()}
</aside>;
};
</textarea>
</div>
</div>
</aside>
<p>Older plugins or forks of CoffeeScript supported JSX syntax and referred to it as CSX or CJSX. They also often used a <code>.cjsx</code> file extension, but this is no longer necessary; regalar <code>.coffee</code> will do.</p>
</section>
</section>
<section id="literate">
@ -3251,7 +3376,7 @@ The CoffeeScript logo is available in SVG for use in presentations.</li>
</section>
<section id="annotated-source">
<h2>Annotated Source</h2>
<p>You can browse the CoffeeScript 2.0.0-beta2 source in readable, annotated form <a href="http://coffeescript.org/v2/annotated-source/">here</a>. You can also jump directly to a particular source file:</p>
<p>You can browse the CoffeeScript 2.0.0-beta3 source in readable, annotated form <a href="http://coffeescript.org/v2/annotated-source/">here</a>. You can also jump directly to a particular source file:</p>
<ul>
<li><a href="http://coffeescript.org/v2/annotated-source/grammar.html">Grammar Rules — src/grammar</a></li>
<li><a href="http://coffeescript.org/v2/annotated-source/lexer.html">Lexing Tokens — src/lexer</a></li>
@ -3357,6 +3482,44 @@ Object.defineProperty(screen, 'height', {
<h2>Breaking Changes From CoffeeScript 1.x to 2</h2>
<p>CoffeeScript 2 aims to output as much idiomatic ES2015+ syntax as possible with as few breaking changes from CoffeeScript 1.x as possible. Some breaking changes, unfortunately, were unavoidable.</p>
<section id="breaking-change-fat-arrow">
<h3>Bound (fat arrow) functions</h3>
<p>In CoffeeScript 1.x, <code>=&gt;</code> compiled to a regular <code>function</code> but with references to <code>this</code>/<code>@</code> rewritten to use the outer scope’s <code>this</code>, or with the inner function bound to the outer scope via <code>.bind</code> (hence the name “bound function”). In CoffeeScript 2, <code>=&gt;</code> compiles to <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">ES2015’s <code>=&gt;</code></a>, which behaves slightly differently. The largest difference is that in ES2015, <code>=&gt;</code> functions lack an <code>arguments</code> object:</p>
<aside class="code-example container-fluid bg-ribbed-dark" data-example="breaking_change_fat_arrow">
<div class="row">
<div class="col-md-6 coffeescript-input-column">
<textarea class="coffeescript-input" id="breaking_change_fat_arrow-coffee">outer = ->
inner = => Array.from arguments
inner()
outer(1, 2) # Returns '' in CoffeeScript 1.x, '1, 2' in CoffeeScript 2
</textarea>
</div>
<div class="col-md-6 javascript-output-column">
<textarea class="javascript-output" id="breaking_change_fat_arrow-js">var outer;
outer = function() {
var inner;
inner = () => {
return Array.from(arguments);
};
return inner();
};
outer(1, 2);
</textarea>
</div>
</div>
<div class="row">
<div class="col-xs-12 text-xs-right">
<button type="button" class="btn btn-primary" data-action="run-code-example" data-example="breaking_change_fat_arrow" data-run="outer%281%2C%202%29"><small>▶</small>&ensp;outer(1, 2)</button>
</div>
</div>
</aside>
</section>
<section id="breaking-changes-default-values">
<h3>Default values for function parameters and destructured elements</h3>
<p>Per the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">ES2015 spec regarding function default parameters</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Default_values">destructuring default values</a>, default values are only applied when a value is missing or <code>undefined</code>. In CoffeeScript 1.x, the default value would be applied in those cases but also if the value was <code>null</code>.</p>
@ -3456,13 +3619,16 @@ f = function*() {
<blockquote class="uneditable-code-block"><pre><code class="language-coffee"><span class="class"><span class="keyword">class</span> <span class="title">B</span> <span class="keyword">extends</span> <span class="title">A</span></span>
constructor: <span class="function">-&gt;</span> <span class="keyword">this</span> <span class="comment"># Throws a compiler error</span>
</code></pre>
</blockquote><p>Class methods can’t be bound (i.e. you can’t define a class method using a fat arrow) though you can define such methods in the constructor instead:</p>
<blockquote class="uneditable-code-block"><pre><code class="language-coffee"><span class="class"><span class="keyword">class</span> <span class="title">B</span> <span class="keyword">extends</span> <span class="title">A</span></span>
method: <span class="function">=&gt;</span> <span class="comment"># Throws a compiler error</span>
</blockquote><p>ES2015 classes don’t allow bound (fat arrow) methods. The CoffeeScript compiler goes through some contortions to preserve support for them, but one thing that can’t be accomodated is calling a bound method before it is bound:</p>
<blockquote class="uneditable-code-block"><pre><code class="language-coffee"><span class="class"><span class="keyword">class</span> <span class="title">Base</span></span>
constructor: <span class="function">-&gt;</span>
<span class="keyword">super</span>()
@method = <span class="function">=&gt;</span> <span class="comment"># This works</span>
@onClick() <span class="comment"># This works</span>
clickHandler = @onClick
clickHandler() <span class="comment"># This throws a runtime error</span>
<span class="class"><span class="keyword">class</span> <span class="title">Component</span> <span class="keyword">extends</span> <span class="title">Base</span></span>
onClick: <span class="function">=&gt;</span>
<span class="built_in">console</span>.log <span class="string">'Clicked!'</span>, @
</code></pre>
</blockquote><p>Class methods can’t be used with <code>new</code> (uncommon):</p>
<blockquote class="uneditable-code-block"><pre><code class="language-coffee"><span class="class"><span class="keyword">class</span> <span class="title">Namespace</span></span>
@ -3619,6 +3785,11 @@ B = class B extends A {
</aside>
</section>
<section id="breaking-changes-jsx-and-the-less-than-and-greater-than-operators">
<h3>JSX and the <code>&lt;</code> and <code>&gt;</code> Operators</h3>
<p>With the addition of <a href="#jsx">JSX</a>, the <code>&lt;</code> and <code>&gt;</code> characters serve as both the “less than” and “greater than” operators and as the delimiters for XML tags, like <code>&lt;div&gt;</code>. For best results, in general you should always wrap the operators in spaces to distinguish them from XML tags: <code>i &lt; len</code>, not <code>i&lt;len</code>. The compiler tries to be forgiving when it can be sure what you intend, but always putting spaces around the “less than” and “greater than” operators will remove ambiguity.</p>
</section>
<section id="breaking-changes-literate-coffeescript">
<h3>Literate CoffeeScript parsing</h3>
@ -3630,6 +3801,17 @@ B = class B extends A {
</section>
<section id="changelog">
<h2>Changelog</h2>
<div class="anchor" id="2.0.0-beta3"></div>
<h2 class="header">
<a href="https://github.com/jashkenas/coffeescript/compare/2.0.0-beta2...2.0.0-beta3">2.0.0-beta3</a>
<span class="timestamp"> &mdash; <time datetime="2017-06-30">June 30, 2017</time></span>
</h2><ul>
<li><a href="#jsx">JSX</a> is now supported.</li>
<li><a href="#object-spread">Object rest/spread properties</a> are now supported.</li>
<li>Bound (fat arrow) methods are once again supported in classes; though an error will be thrown if you attempt to call the method before it is bound. See <a href="#breaking-changes-classes">breaking changes for classes</a>.</li>
<li>The REPL no longer warns about assigning to <code>_</code>.</li>
<li>Bugfixes for destructured nested default values and issues related to chaining or continuing expressions across multiple lines.</li>
</ul>
<div class="anchor" id="2.0.0-beta2"></div>
<h2 class="header">
<a href="https://github.com/jashkenas/coffeescript/compare/2.0.0-beta1...2.0.0-beta2">2.0.0-beta2</a>
@ -4270,17 +4452,6 @@ $(document).ready ->
window.location = event.target.href
, 260 # Wait for the sidebar to slide away before navigating
# Try CoffeeScript
toggleTry = ->
$('#try, #try-link').toggleClass 'active'
closeTry = ->
$('#try, #try-link').removeClass 'active'
$('[data-toggle="try"]').click toggleTry
$('[data-close="try"]').click closeTry
# Initialize Scrollspy for sidebar navigation; http://v4-alpha.getbootstrap.com/components/scrollspy/
# See also http://www.codingeverything.com/2014/02/BootstrapDocsSideBar.html and http://jsfiddle.net/KyleMit/v6zhz/
$('body').scrollspy
@ -4317,6 +4488,7 @@ $(document).ready ->
viewportMargin: Infinity
# Whenever the user edits the CoffeeScript side of a code example, update the JavaScript output
# If the editor is Try CoffeeScript, also update the hash and save this code in localStorage
if mode is 'coffeescript'
pending = null
editor.on 'change', (instance, change) ->
@ -4324,13 +4496,38 @@ $(document).ready ->
pending = setTimeout ->
lastCompilationStartTime = Date.now()
try
output = CoffeeScript.compile editor.getValue(), bare: yes
coffee = editor.getValue()
if index is 0 and $('#try').hasClass('active') # If this is the editor in Try CoffeeScript and it’s still visible
# Update the hash with the current code
link = "try:#{encodeURIComponent coffee}"
window.history.pushState {}, 'CoffeeScript', "#{location.href.split('#')[0]}##{link}"
# Save this to the user’s localStorage
try
if window.localStorage?
window.localStorage.setItem 'tryCoffeeScriptCode', coffee
catch exception
output = CoffeeScript.compile coffee, bare: yes
lastCompilationElapsedTime = Math.max(200, Date.now() - lastCompilationStartTime)
catch exception
output = "#{exception}"
editors[index + 1].setValue output
, lastCompilationElapsedTime
# Fix the code editors’ handling of tab-indented code
editor.addKeyMap
'Tab': (cm) ->
if cm.somethingSelected()
cm.indentSelection 'add'
else if /^\t/m.test cm.getValue()
# If any lines start with a tab, treat this as tab-indented code
cm.execCommand 'insertTab'
else
cm.execCommand 'insertSoftTab'
'Shift-Tab': (cm) ->
cm.indentSelection 'subtract'
'Enter': (cm) ->
cm.options.indentWithTabs = /^\t/m.test cm.getValue()
cm.execCommand 'newlineAndIndent'
# Handle the code example buttons
$('[data-action="run-code-example"]').click ->
@ -4340,22 +4537,34 @@ $(document).ready ->
js = "#{js}\nalert(#{unescape run});" unless run is yes
eval js
$('[data-action="link"]').click ->
index = $("##{$(@).data('example')}-coffee").data 'index'
coffee = editors[index].getValue()
link = "try:#{encodeURIComponent coffee}"
window.history.pushState {}, 'CoffeeScript', "#{location.href.split('#')[0]}##{link}"
# Try CoffeeScript
toggleTry = (checkLocalStorage = no) ->
if checkLocalStorage and window.localStorage?
try
coffee = window.localStorage.getItem 'tryCoffeeScriptCode'
if coffee?
editors[0].setValue coffee
catch exception
$('#try, #try-link').toggleClass 'active'
closeTry = ->
$('#try, #try-link').removeClass 'active'
$('[data-toggle="try"]').click toggleTry
$('[data-close="try"]').click closeTry
# Configure the initial state
if window.location.hash?
if window.location.hash is '#try'
toggleTry()
toggleTry yes
else if window.location.hash.indexOf('#try') is 0
editors[0].setValue decodeURIComponent window.location.hash[5..]
toggleTry()
else
initializeScrollspyFromHash window.location.hash
# Initializing the code editors might’ve thrown off our vertical scroll position
document.getElementById(window.location.hash.slice(1)).scrollIntoView()
</script>

2135
docs/v2/test.html
View file

File diff suppressed because it is too large Load diff