working 'Try CoffeeScript' in the docs

This commit is contained in:
Jeremy Ashkenas
2010-02-13 16:23:03 -05:00
parent a90bf75395
commit 844c756940
5 changed files with 90 additions and 7 deletions

View File

@@ -43,7 +43,7 @@ table {
td { td {
padding: 9px 15px 9px 0; padding: 9px 15px 9px 0;
} }
code, pre, tt { code, pre, tt, textarea {
font-family: Monaco, Consolas, "Lucida Console", monospace; font-family: Monaco, Consolas, "Lucida Console", monospace;
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
@@ -75,7 +75,7 @@ div.code {
position: absolute; position: absolute;
right: 8px; bottom: 8px; right: 8px; bottom: 8px;
} }
div.code pre { div.code pre, div.code textarea {
float: left; float: left;
width: 450px; width: 450px;
border-left: 1px dotted #559; border-left: 1px dotted #559;
@@ -84,4 +84,15 @@ div.code {
} }
div.code pre:first-child { div.code pre:first-child {
border-left: 0; border-left: 0;
} }
#repl_source {
border: 0;
padding: 5px 7px;
margin-left: 5px;
height: 250px;
resize: none;
}
#repl_results {
height: 260px;
}

View File

@@ -59,6 +59,7 @@
<p> <p>
<a href="#overview">Mini Overview</a><br /> <a href="#overview">Mini Overview</a><br />
<a href="#installation">Installation and Usage</a><br /> <a href="#installation">Installation and Usage</a><br />
<a href="#repl">Try CoffeeScript</a><br />
<a href="#whitespace">Significant Whitespace</a><br /> <a href="#whitespace">Significant Whitespace</a><br />
<a href="#functions">Functions and Invocation</a><br /> <a href="#functions">Functions and Invocation</a><br />
<a href="#assignment">Assignment</a><br /> <a href="#assignment">Assignment</a><br />
@@ -224,6 +225,25 @@ coffee --interactive
coffee --watch --lint experimental.coffee coffee --watch --lint experimental.coffee
coffee --print app/scripts/*.coffee > concatenation.js</pre> coffee --print app/scripts/*.coffee > concatenation.js</pre>
<h2 id="repl">Try CoffeeScript</h2>
<p>
Here's a live version of the CoffeeScript compiler, running within
your browser.<br /> Hit the <b>compile</b> button to generate JavaScript
on the right-hand side.
You can also paste in any of the examples from below.
</p>
<div class="code repl_wrapper">
<textarea id="repl_source">reverse: (string) ->
string.split('').reverse()
print reverse 'tpircseeffoc'</textarea>
<pre id="repl_results"></pre>
<button onclick="javascript: repl_compile();">compile</button>
<br class="clear" />
</div>
<h2>Language Reference</h2> <h2>Language Reference</h2>
<p> <p>
@@ -832,5 +852,18 @@ coffee --print app/scripts/*.coffee > concatenation.js</pre>
<script type="text/javascript" src="lib/coffee_script/nodes.js"></script> <script type="text/javascript" src="lib/coffee_script/nodes.js"></script>
<script type="text/javascript" src="lib/coffee_script/coffee-script.js"></script> <script type="text/javascript" src="lib/coffee_script/coffee-script.js"></script>
<script type="text/javascript">
window.repl_compile = function() {
var source = document.getElementById('repl_source').value;
var js = '';
try {
js = compile(source, {no_wrap: true});
} catch(error) {
alert(error);
}
document.getElementById('repl_results').innerHTML = js;
}
</script>
</body> </body>
</html> </html>

View File

@@ -45,6 +45,7 @@
<p> <p>
<a href="#overview">Mini Overview</a><br /> <a href="#overview">Mini Overview</a><br />
<a href="#installation">Installation and Usage</a><br /> <a href="#installation">Installation and Usage</a><br />
<a href="#repl">Try CoffeeScript</a><br />
<a href="#whitespace">Significant Whitespace</a><br /> <a href="#whitespace">Significant Whitespace</a><br />
<a href="#functions">Functions and Invocation</a><br /> <a href="#functions">Functions and Invocation</a><br />
<a href="#assignment">Assignment</a><br /> <a href="#assignment">Assignment</a><br />
@@ -321,6 +322,25 @@ coffee --interactive
coffee --watch --lint experimental.coffee coffee --watch --lint experimental.coffee
coffee --print app/scripts/*.coffee > concatenation.js</pre> coffee --print app/scripts/*.coffee > concatenation.js</pre>
<h2 id="repl">Try CoffeeScript</h2>
<p>
Here's a live version of the CoffeeScript compiler, running within
your browser.<br /> Hit the <b>compile</b> button to generate JavaScript
on the right-hand side.
You can also paste in any of the examples from below.
</p>
<div class="code repl_wrapper">
<textarea id="repl_source">reverse: (string) ->
string.split('').reverse()
print reverse 'tpircseeffoc'</textarea>
<pre id="repl_results"></pre>
<button onclick="javascript: repl_compile();">compile</button>
<br class="clear" />
</div>
<h2>Language Reference</h2> <h2>Language Reference</h2>
<p> <p>
@@ -1703,5 +1723,18 @@ html <span class="Keyword">=</span> <span class="String"><span class="String">&q
<script type="text/javascript" src="lib/coffee_script/nodes.js"></script> <script type="text/javascript" src="lib/coffee_script/nodes.js"></script>
<script type="text/javascript" src="lib/coffee_script/coffee-script.js"></script> <script type="text/javascript" src="lib/coffee_script/coffee-script.js"></script>
<script type="text/javascript">
window.repl_compile = function() {
var source = document.getElementById('repl_source').value;
var js = '';
try {
js = compile(source, {no_wrap: true});
} catch(error) {
alert(error);
}
document.getElementById('repl_results').innerHTML = js;
}
</script>
</body> </body>
</html> </html>

View File

@@ -1,5 +1,6 @@
(function(){ (function(){
var compiler, lexer, parser, path; var compiler, lexer, parser, path;
// Set up for both the browser and the server.
if ((typeof process !== "undefined" && process !== null)) { if ((typeof process !== "undefined" && process !== null)) {
process.mixin(require('./nodes')); process.mixin(require('./nodes'));
path = require('path'); path = require('path');
@@ -31,6 +32,10 @@
return this.pos; return this.pos;
} }
}; };
// Improved error messages.
parser.parseError = function parseError(message, hash) {
throw new Error('Unexpected ' + hash.token + ' on line ' + hash.line);
};
exports.VERSION = '0.5.0'; exports.VERSION = '0.5.0';
// Compile CoffeeScript to JavaScript, using the Coffee/Jison compiler. // Compile CoffeeScript to JavaScript, using the Coffee/Jison compiler.
exports.compile = function compile(code, options) { exports.compile = function compile(code, options) {

View File

@@ -1,3 +1,4 @@
# Set up for both the browser and the server.
if process? if process?
process.mixin require './nodes' process.mixin require './nodes'
path: require('path') path: require('path')
@@ -23,6 +24,10 @@ parser.lexer: {
showPosition: -> @pos showPosition: -> @pos
} }
# Improved error messages.
parser.parseError: (message, hash) ->
throw new Error 'Unexpected ' + hash.token + ' on line ' + hash.line
exports.VERSION: '0.5.0' exports.VERSION: '0.5.0'
# Compile CoffeeScript to JavaScript, using the Coffee/Jison compiler. # Compile CoffeeScript to JavaScript, using the Coffee/Jison compiler.
@@ -78,7 +83,3 @@ exports.ruby_compile_files: (paths, callback) ->
return unless message return unless message
puts message puts message
throw new Error "CoffeeScript compile error" throw new Error "CoffeeScript compile error"