roy
Version:
Small functional language that compiles to JavaScript
236 lines (233 loc) • 8.98 kB
HTML
<html>
<head>
<title>Roy</title>
<meta charset="UTF-8" />
<style>
body {
font-family: 'Droid Sans', sans-serif;
font-size: 1.1em;
margin: 0;
padding: 0em;
color: #111;
background: #FFFFEE;
}
.CodeMirror, pre {
font-family: 'Droid Sans Mono', monospace;
}
pre {
font-size: 0.8em;
}
.CodeMirror {
background: #FFF;
}
.header div {
width: 33em;
margin: 0 auto;
}
h1 {
font-family: 'Pacifico', serif;
margin: 0;
font-size: 5em;
line-height: 1.4em;
height: 1.4em;
background: transparent url("logo.png") no-repeat 25% 10%;
}
a {
color: #88CC66;
}
a:hover {
text-decoration: none;
}
.header, .footer {
background: #111;
color: #FFFFEE;
text-align: center;
}
.footer {
padding: 1em;
}
h2 {
font-size: 1.5em;
color: #226644;
}
h3 {
font-size: 1.1em;
color: #88CC66;
}
#jscode, #output {
overflow: auto;
}
.content {
padding: 1em;
width: 33em;
margin: 0 auto;
}
</style>
<script src="http://www.google-analytics.com/ga.js" async="async"></script>
<script src="roy-min.js"></script>
<script src="codemirror2/lib/codemirror.js"></script>
<script src="codemirror2/lib/util/runmode.js"></script>
<script src="codemirror2/mode/roy/roy.js"></script>
<script src="codemirror2/mode/javascript/javascript.js"></script>
<link rel="stylesheet" href="codemirror2/lib/codemirror.css" />
<link href="http://fonts.googleapis.com/css?family=Droid+Sans:bold,Droid+Sans+Mono" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css" />
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-52294-7']);
_gaq.push(['_trackPageview']);
</script>
</head>
<body>
<div class="header">
<div>
<h1>Roy</h1>
</div>
</div>
<div class="content">
<h2>About</h2>
<p>Roy is an experimental programming language that targets JavaScript. It
tries to meld JavaScript semantics with some features common in static
functional languages:</p>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Type_inference#Hindley.E2.80.93Milner_type_inference_algorithm">Damas-Hindley-Milner type inference</a></li>
<li><a href="http://jashkenas.github.com/coffee-script/">Whitespace</a> <a href="http://www.haskell.org/haskellwiki/Haskell">significant</a> <a href="http://www.python.org/">syntax</a></li>
<li><a href="http://en.wikipedia.org/wiki/Tagged_union">Simple tagged unions</a></li>
<li><a href="http://en.wikipedia.org/wiki/Pattern_matching">Pattern matching</a></li>
<li><a href="http://en.wikipedia.org/wiki/Structural_type_system">Structural typing</a></li>
<li><a href="http://en.wikipedia.org/wiki/Monad_%28functional_programming%29#do-notation">Monad syntax</a></li>
</ul>
<p>Try the current version below. The code is on <a href="https://github.com/pufuwozu/roy">GitHub</a>. Follow <a href="http://twitter.com/roylangjs">@roylangjs</a> for news on development.</p>
<h2>Try</h2>
<h3>Roy input</h3>
<div>
<select id="exampleselect">
<option value="">Custom</option>
<option value="helloworld">Hello world</option>
<option value="types">Types</option>
<option value="funcs">Functions</option>
<option value="gcd">Greatest common divisor</option>
<option value="data">Tagged unions</option>
<option value="structural">Structural</option>
<option value="module">Module</option>
<option value="tracemonad">Tracing monad</option>
<option value="ajaxmonad">Ajax monad</option>
<option value="deferredmonad">Deferred monad</option>
</select>
</div>
<div id="roycode"></div>
<h3>JavaScript</h3>
<pre id="jscode" class="cm-s-default"></pre>
<input id="jsrun" type="button" value="Run" />
<h3>Output</h3>
<pre id="output"></pre>
<h2>Resources</h2>
<ul>
<li><a href="http://brianmckenna.org/blog/roy_ieee">IEEE Internet Computing article</a></li>
<li><a href="http://guide.roylang.org/en/latest/index.html">Incomplete docs</a></li>
<li><a href="https://github.com/pufuwozu/roy">GitHub</a></li>
<li><a href="https://twitter.com/roylangjs">Twitter</a></li>
<li><a href="http://brianmckenna.org/blog/">Author's blog</a></li>
<li><a href="http://webchat.freenode.net/?channels=roy">IRC channel (#roy on Freenode)</a></li>
</ul>
<iframe src="http://blip.tv/play/g_MngveLPwI.html?p=1" width="580" height="327" frameborder="0" allowfullscreen></iframe>
<embed type="application/x-shockwave-flash" src="http://a.blip.tv/api.swf#g_MngveLPwI" style="display:none"></embed>
</div>
<div class="footer">
Roy <span id="version"></span> © 2011 <a href="http://brianmckenna.org/">Brian McKenna</a>
</div>
<script>
var log = function() {
var i, args = [];
for(i = 0; i < arguments.length; i++) {
args.push(arguments[i]);
}
document.getElementById('output').innerHTML += args.join(' ') + '\n';
};
var newConsole = {};
// TODO: Properly include Underscore
_.each(['log', 'info', 'warn', 'error', 'trace', 'assert'], function(f) {
newConsole[f] = function() {
log.apply(null, arguments);
if(typeof console != 'undefined' && console[f]) {
if(console[f].apply) {
console[f].apply(console, arguments);
} else {
// IE
console[f]([].slice.call(arguments).join(" "));
}
}
};
});
(function() {
var editor = CodeMirror(document.getElementById("roycode"), {
mode: "roy",
onChange: royCompile,
lineNumbers: true
});
var addEvent = function(s, e, c) {
var el = document.getElementById(s);
if(el.addEventListener) {
el.addEventListener(e, c, false);
} else {
el.attachEvent('on' + e, c);
}
};
var examples = {};
var royCompile = function() {
var code;
try {
code = roy.compile(editor.getValue(), {}, {}, {
modules: {
dom: "document: {documentURI: String, getElementById: Function(String,{getAttribute: Function(String,String), innerHTML: String, innerText: String, tagName: String})}\n"
}
}).output;
CodeMirror.runMode(code, "javascript", document.getElementById("jscode"));
} catch(e) {
document.getElementById("jscode").innerHTML = e;
}
return code;
};
var sendRequest = function(url, callback) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if(request.readyState == 4) {
callback(request);
}
};
request.open("GET", url, true);
request.send(null);
};
addEvent("exampleselect", 'change', function() {
var value = document.getElementById("exampleselect").value;
if(!value) return;
if(examples[value]) {
editor.setValue(examples[value]);
royCompile();
} else {
sendRequest("examples/" + value + ".roy", function(request) {
examples[value] = request.responseText;
editor.setValue(examples[value]);
royCompile();
});
}
});
addEvent("roycode", 'change', royCompile);
addEvent("roycode", 'keyup', royCompile);
addEvent("jsrun", 'click', function() {
document.getElementById("output").innerHTML = "";
var code = royCompile();
var script = document.createElement("script");
script.text = "(function() {try {var console = newConsole;(function(){\n" + code + "\n})()} catch(e) {log(e);}})();";
document.body.appendChild(script);
});
sendRequest("package.json", function(request) {
var package = eval("(" + request.responseText + ")");
document.getElementById("version").innerHTML = package.version;
});
})();
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</body>
</html>