[CS2] JSX documentation, Try CoffeeScript improvements (#4583)
* Update browser compiler * Argument parsing tests require CommonJS environment * JSX section in the docs * Breaking change note for < and > operators * Fix JSX example * Try CoffeeScript improvements: set the hash automatically, remove ‘link’ button, automatically save code in localStorage * Fix the code editors’ handling of tab-indented code * Fix JSX example to work with React * Compiled, not rendered
This commit is contained in:
Geoffrey Booth
GitHub
parent
a3a1fb0dd7
commit
1f31073201
File diff suppressed because one or more lines are too long
|
|
@ -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> 
|
||||
<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>
|
||||
|
|
@ -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">
|
||||
|
|
@ -724,6 +725,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><</code> and <code>></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 +736,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>
|
||||
|
||||
|
|
@ -850,7 +857,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>=></code> becomes an ES <code>=></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>=></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 +971,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>=></code> becomes an ES <code>=></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 > app.js
|
||||
coffee --print *.coffee | babel --presets env > 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>
|
||||
|
|
@ -3121,6 +3128,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><</code> and <code>></code>. You can interpolate CoffeeScript code inside a tag using <code>{</code> and <code>}</code>. To avoid compiler errors, when using <code><</code> and <code>></code> to mean “less than” or “greater than,” you should wrap the operators in spaces to distinguish them from XML tags. So <code>i < len</code>, not <code>i<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">
|
||||
|
|
@ -3619,6 +3678,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><</code> and <code>></code> Operators</h3>
|
||||
<p>With the addition of <a href="#jsx">JSX</a>, the <code><</code> and <code>></code> characters serve as both the “less than” and “greater than” operators and as the delimiters for XML tags, like <code><div></code>. For best results, in general you should always wrap the operators in spaces to distinguish them from XML tags: <code>i < len</code>, not <code>i<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>
|
||||
|
|
@ -4270,17 +4334,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 +4370,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 +4378,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,17 +4419,27 @@ $(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()
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
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>
|
||||
|
|
@ -1 +0,0 @@
|
|||
<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>
|
||||
|
Before Width: | Height: | Size: 436 B |
|
|
@ -0,0 +1,3 @@
|
|||
### JSX and the `<` and `>` Operators
|
||||
|
||||
With the addition of [JSX](#jsx), the `<` and `>` characters serve as both the “less than” and “greater than” operators and as the delimiters for XML tags, like `<div>`. For best results, in general you should always wrap the operators in spaces to distinguish them from XML tags: `i < len`, not `i<len`. 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.
|
||||
|
|
@ -6,7 +6,7 @@ The biggest change in CoffeeScript 2 is that now the CoffeeScript compiler produ
|
|||
|
||||
Support for ES2015+ syntax is important to ensure compatibility with frameworks that assume ES2015. Now that CoffeeScript compiles classes to the ES `class` keyword, it’s possible to `extend` 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 [function parameter default values](#breaking-changes-default-values) should behave the same in CoffeeScript as in JavaScript.
|
||||
|
||||
Many ES2015+ features have been backported to CoffeeScript 1.11 and 1.12, including [modules](#modules), [`for…of`](#generator-iteration), and [tagged template literals](#tagged-template-literals). One major new feature unique to CoffeeScript 2 is support for ES2017’s [async functions](#async-functions). More details are in the [changelog](#changelog).
|
||||
Many ES2015+ features have been backported to CoffeeScript 1.11 and 1.12, including [modules](#modules), [`for…of`](#generator-iteration), and [tagged template literals](#tagged-template-literals). Major new features unique to CoffeeScript 2 are support for ES2017’s [async functions](#async-functions) and for [JSX](#jsx). More details are in the [changelog](#changelog).
|
||||
|
||||
There are very few [breaking changes from CoffeeScript 1.x to 2](#breaking-changes); we hope the upgrade process is smooth for most projects.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
## JSX
|
||||
|
||||
[JSX](https://facebook.github.io/react/docs/introducing-jsx.html) is JavaScript containing interspersed XML elements. While conceived for [React](https://facebook.github.io/react/), it is not specific to any particular library or framework.
|
||||
|
||||
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 [Babel with the React JSX transform](https://babeljs.io/docs/plugins/transform-react-jsx/). CoffeeScript does _not_ output `React.createElement` 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.
|
||||
|
||||
Just like in JSX and HTML, denote XML tags using `<` and `>`. You can interpolate CoffeeScript code inside a tag using `{` and `}`. To avoid compiler errors, when using `<` and `>` to mean “less than” or “greater than,” you should wrap the operators in spaces to distinguish them from XML tags. So `i < len`, not `i<len`. 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.
|
||||
|
||||
```
|
||||
codeFor('jsx')
|
||||
```
|
||||
|
||||
Older plugins or forks of CoffeeScript supported JSX syntax and referred to it as CSX or CJSX. They also often used a `.cjsx` file extension, but this is no longer necessary; regalar `.coffee` will do.
|
||||
|
|
@ -40,14 +40,14 @@ Once installed, you should have access to the `coffee` command, which can execut
|
|||
|
||||
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 [CoffeeScript 1.x](/v1/). CoffeeScript 2 [breaks compatibility](#breaking-changes) with certain CoffeeScript 1.x features in order to conform with the ES2015+ specifications, and generate more idiomatic output (a CoffeeScript `=>` becomes an ES `=>`; a CoffeeScript `class` becomes an ES `class`; and so on).
|
||||
|
||||
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 [Babel](http://babeljs.io/), [Rollup](https://github.com/rollup/rollup) or [Traceur Compiler](https://github.com/google/traceur-compiler). In general, [CoffeeScript 2’s output is supported as is by Node.js 7.6+](http://node.green/), except for modules which require transpilation.
|
||||
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 [Babel](http://babeljs.io/), [Rollup](https://github.com/rollup/rollup) or [Traceur Compiler](https://github.com/google/traceur-compiler). In general, [CoffeeScript 2’s output is supported as is by Node.js 7.6+](http://node.green/), except for modules and JSX which require transpilation.
|
||||
|
||||
There are many great task runners for setting up JavaScript build chains, such as [Gulp](http://gulpjs.com/), [Webpack](https://webpack.github.io/), [Grunt](https://gruntjs.com/) and [Broccoli](http://broccolijs.com/). If you’re looking for a very minimal solution to get started, you can use [babel-preset-env](https://babeljs.io/docs/plugins/preset-env/) and the command line:
|
||||
|
||||
```bash
|
||||
npm install --global coffeescript@next
|
||||
npm install --save-dev coffeescript@next babel-cli babel-preset-env
|
||||
coffee -p *.coffee | babel --presets env > app.js
|
||||
coffee --print *.coffee | babel --presets env > app.js
|
||||
```
|
||||
|
||||
### Node.js
|
||||
|
|
|
|||
|
|
@ -106,6 +106,9 @@
|
|||
<section id="embedded">
|
||||
<%= htmlFor('embedded') %>
|
||||
</section>
|
||||
<section id="jsx">
|
||||
<%= htmlFor('jsx') %>
|
||||
</section>
|
||||
</section>
|
||||
<section id="literate">
|
||||
<%= htmlFor('literate') %>
|
||||
|
|
@ -166,6 +169,9 @@
|
|||
<section id="breaking-changes-super-extends">
|
||||
<%= htmlFor('breaking_changes_super_extends') %>
|
||||
</section>
|
||||
<section id="breaking-changes-jsx-and-the-less-than-and-greater-than-operators">
|
||||
<%= htmlFor('breaking_changes_jsx_and_the_less_than_and_greater_than_operators') %>
|
||||
</section>
|
||||
<section id="breaking-changes-literate-coffeescript">
|
||||
<%= htmlFor('breaking_changes_literate_coffeescript') %>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -13,17 +13,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
|
||||
|
|
@ -60,6 +49,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) ->
|
||||
|
|
@ -67,13 +57,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 ->
|
||||
|
|
@ -83,17 +98,27 @@ $(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()
|
||||
|
|
|
|||
|
|
@ -90,6 +90,9 @@
|
|||
<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">
|
||||
|
|
@ -159,6 +162,9 @@
|
|||
<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><</code> and <code>></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>
|
||||
|
|
@ -167,5 +173,8 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
<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> 
|
||||
<button type="button" class="btn btn-primary" data-action="link" data-example="try-coffeescript"><%= include('documentation/images/link.svg') %></button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
return unless require?
|
||||
{buildCSOptionParser} = require '../lib/coffeescript/command'
|
||||
|
||||
optionParser = buildCSOptionParser()
|
||||
|
|
|
|||
Loading…
Reference in New Issue