2014-04-14 03:35:26 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>ColaScript Playground</title>
|
|
|
|
|
<script src="./utils.js"></script>
|
|
|
|
|
<script src="./ast.js"></script>
|
|
|
|
|
<script src="./parse.js"></script>
|
|
|
|
|
<script src="./transform.js"></script>
|
|
|
|
|
<script src="./scope.js"></script>
|
|
|
|
|
<script src="./output.js"></script>
|
|
|
|
|
<script src="./compress.js"></script>
|
|
|
|
|
<script src="./sourcemap.js"></script>
|
|
|
|
|
<script src="./mozilla-ast.js"></script>
|
|
|
|
|
<script src="./translate.js"></script>
|
|
|
|
|
<script src="./std.js"></script>
|
2014-04-15 10:52:01 +00:00
|
|
|
<style>
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
line-height: 100%;
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
textarea {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
width: 33.333%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
float: left;
|
|
|
|
|
font-family: "Andale Mono";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#controls {
|
|
|
|
|
position: fixed;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
2014-04-20 15:57:10 +00:00
|
|
|
height: 25px;
|
|
|
|
|
width: 100%;
|
2014-04-15 10:52:01 +00:00
|
|
|
}
|
2014-04-20 15:57:10 +00:00
|
|
|
|
|
|
|
|
#controls .m {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#controls .bg {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-color: white;
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
}
|
2014-04-15 10:52:01 +00:00
|
|
|
|
|
|
|
|
</style>
|
2014-04-14 03:35:26 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2014-04-19 18:04:11 +00:00
|
|
|
<textarea id="source" onkeyup="compile()">main(){
|
2014-04-18 07:14:54 +00:00
|
|
|
console.log(`
|
|
|
|
|
|
|
|
|
|
Hello!
|
|
|
|
|
My name is ColaScript, and i know who you are }:->
|
|
|
|
|
@{navigator.userAgent}
|
|
|
|
|
|
|
|
|
|
`);
|
|
|
|
|
|
|
|
|
|
console.log("pow:", 5 ** 2, "; modulo:", 5 %% 3, ";");
|
|
|
|
|
|
2014-04-18 18:33:08 +00:00
|
|
|
Number a = 3.14, b = 584, c;
|
2014-04-18 07:14:54 +00:00
|
|
|
|
|
|
|
|
a ?= b; console.log(a);
|
|
|
|
|
a = undefined;
|
|
|
|
|
a ?= b; console.log(a);
|
|
|
|
|
|
2014-04-18 18:33:08 +00:00
|
|
|
console.log(a = c ? b);
|
|
|
|
|
c = 404;
|
|
|
|
|
console.log(a = c ? b);
|
|
|
|
|
|
|
|
|
|
b = undefined;
|
2014-04-20 07:31:03 +00:00
|
|
|
|
|
|
|
|
Array x, y;
|
|
|
|
|
x = [123];
|
|
|
|
|
y = clone x;
|
2014-04-20 18:56:47 +00:00
|
|
|
y[] = 321;
|
|
|
|
|
console.log('original:',x,'cloned:',y, y[]);
|
2014-04-20 07:31:03 +00:00
|
|
|
|
2014-04-23 17:05:34 +00:00
|
|
|
y[0..1] = [1..10];
|
|
|
|
|
console.log(y[0..4]);
|
|
|
|
|
|
2014-04-20 18:56:47 +00:00
|
|
|
y.forEach((val) => console.log(val));
|
2014-04-20 07:31:03 +00:00
|
|
|
|
2014-04-18 18:33:08 +00:00
|
|
|
console.log("a is {{isset a ? 'set' : 'undefiend'}}, b is {{b?? ? 'set' : 'undefined'}}");
|
|
|
|
|
|
2014-04-18 07:14:54 +00:00
|
|
|
console.log(`is:`, location.href is String, `; isnt:`, 123 isnt Number, ";");
|
|
|
|
|
|
|
|
|
|
if(yes === true && on === true && no === false && off === false) console.log('Boolean alternatives');
|
|
|
|
|
|
|
|
|
|
console.log('Raw string:', r`@test \n \t \r`);
|
2014-04-18 18:33:08 +00:00
|
|
|
RegExp isEmail = /
|
2014-04-18 07:14:54 +00:00
|
|
|
([\w-\.]+)
|
|
|
|
|
@
|
|
|
|
|
((?:[\w]+\.)+)
|
|
|
|
|
([a-zA-Z]{2,4})
|
|
|
|
|
/, email = r'danon0404@gmail.com';
|
|
|
|
|
console.log("@email is email:", isEmail.test(email));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
main();</textarea>
|
2014-04-15 10:52:01 +00:00
|
|
|
<textarea id="translation"></textarea>
|
|
|
|
|
<textarea id="result"></textarea>
|
2014-04-20 15:57:10 +00:00
|
|
|
<div id="controls">
|
|
|
|
|
<div class="bg"> </div>
|
|
|
|
|
<div class="m">
|
|
|
|
|
<button id="exec" onclick="exec()">Execute</button>
|
2014-04-22 13:33:43 +00:00
|
|
|
<button id="benchmark" onclick="benchmark()">Benchmark</button>
|
2014-04-20 15:57:10 +00:00
|
|
|
<input type="checkbox" id="is_js" onclick="compile()">
|
|
|
|
|
<label for="is_js">js parser</label>
|
|
|
|
|
<span id="lenstat"></span>
|
|
|
|
|
</div>
|
2014-04-14 03:35:26 +00:00
|
|
|
</body>
|
|
|
|
|
<script>
|
2014-04-15 10:52:01 +00:00
|
|
|
var sourceArea = document.getElementById("source"),
|
|
|
|
|
translationArea = document.getElementById("translation"),
|
|
|
|
|
resultArea = document.getElementById("result"),
|
2014-04-16 18:39:27 +00:00
|
|
|
isjs = document.getElementById("is_js"),
|
2014-04-15 10:52:01 +00:00
|
|
|
source;
|
2014-04-18 07:14:54 +00:00
|
|
|
|
|
|
|
|
if(!localStorage.source) localStorage.source = source = sourceArea.value;
|
|
|
|
|
else sourceArea.value = source = localStorage.source;
|
2014-04-16 18:39:27 +00:00
|
|
|
isjs.checked = localStorage.isjs == "t";
|
2014-04-14 03:35:26 +00:00
|
|
|
|
2014-04-15 10:52:01 +00:00
|
|
|
function compile(){
|
2014-04-14 03:35:26 +00:00
|
|
|
source = sourceArea.value;
|
|
|
|
|
localStorage.source = source;
|
2014-04-16 18:39:27 +00:00
|
|
|
localStorage.isjs = isjs.checked ? "t" : "f";
|
2014-04-15 10:52:01 +00:00
|
|
|
|
2014-04-22 13:33:43 +00:00
|
|
|
stream = new Cola.OutputStream({ beautify : true });
|
2014-04-18 06:10:20 +00:00
|
|
|
compressor = new Cola.Compressor({ is_js : isjs.checked });
|
2014-04-15 10:52:01 +00:00
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
// 1. compile
|
2014-04-18 06:10:20 +00:00
|
|
|
ast = Cola.parse(source, { is_js : isjs.checked });
|
2014-04-23 17:05:34 +00:00
|
|
|
if(!isjs.checked) ast = ast.toJavaScript({ main_binding : false });
|
2014-04-15 10:52:01 +00:00
|
|
|
ast.print(stream);
|
|
|
|
|
translationArea.value = stream.toString();
|
|
|
|
|
|
|
|
|
|
// 2. compress
|
|
|
|
|
ast.figure_out_scope();
|
|
|
|
|
ast = ast.transform(compressor);
|
|
|
|
|
|
|
|
|
|
// 3. mangle
|
|
|
|
|
ast.figure_out_scope();
|
|
|
|
|
ast.compute_char_frequency();
|
2014-04-22 13:33:43 +00:00
|
|
|
ast.mangle_names({ sort : true, toplevel : true });
|
2014-04-15 10:52:01 +00:00
|
|
|
|
2014-04-22 13:33:43 +00:00
|
|
|
stream = new Cola.OutputStream();
|
2014-04-15 10:52:01 +00:00
|
|
|
ast.print(stream);
|
|
|
|
|
resultArea.value = stream.toString();
|
|
|
|
|
} catch(e){
|
|
|
|
|
translationArea.value = '';
|
|
|
|
|
resultArea.value = '';
|
2014-04-20 18:56:47 +00:00
|
|
|
|
|
|
|
|
throw e;
|
2014-04-15 10:52:01 +00:00
|
|
|
}
|
2014-04-20 15:57:10 +00:00
|
|
|
|
|
|
|
|
document.querySelector('#lenstat').innerHTML = sourceArea.value.length+" : "+translationArea.value.length+" : "+resultArea.value.length;
|
2014-04-15 10:52:01 +00:00
|
|
|
}
|
|
|
|
|
|
2014-04-22 13:33:43 +00:00
|
|
|
function benchmark(){
|
|
|
|
|
console.time("Uncompressed");
|
|
|
|
|
eval(translationArea.result);
|
|
|
|
|
console.timeEnd("Uncompressed");
|
|
|
|
|
|
|
|
|
|
console.time("Compressed");
|
|
|
|
|
eval(resultArea.result);
|
|
|
|
|
console.timeEnd("Compressed");
|
|
|
|
|
}
|
|
|
|
|
|
2014-04-15 10:52:01 +00:00
|
|
|
function exec(){
|
|
|
|
|
eval(resultArea.value)
|
|
|
|
|
}
|
2014-04-14 03:35:26 +00:00
|
|
|
|
|
|
|
|
function Translate(){
|
2014-04-17 16:21:45 +00:00
|
|
|
stream = new Cola.OutputStream({ beautify : true });
|
2014-04-16 18:39:27 +00:00
|
|
|
translate(Cola.parse(source, null, isjs.checked)).print(stream);
|
2014-04-14 03:35:26 +00:00
|
|
|
return stream.toString();
|
|
|
|
|
}
|
2014-04-15 10:52:01 +00:00
|
|
|
|
|
|
|
|
compile();
|
2014-04-14 03:35:26 +00:00
|
|
|
</script>
|
|
|
|
|
</html>
|
