UglifyJS/lib/index.html

<!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>
    	<style>
    	
    	body {
    	    padding: 0; 
    	    margin: 0; 
    	    line-height: 100%; 
    	    position: fixed; 
    	    top: 0; 
    	    left: 0; 
    	    width: 100%; 
    	    height: 100%;
    	}
    	
    	textarea {
            -moz-box-sizing: border-box;
    		box-sizing: border-box;
    	    width: 33.333%; 
    	    height: 100%; 
    	    font-size: 12px; 
    	    float: left;
    	    font-family: "Andale Mono";
            padding: 0 5px 26px 5px;
    	}

    	#controls {
    		position: fixed;
    		bottom: 0;
    		left: 0;
            height: 25px;
            width: 100%;
    	}

        #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;
        }

        #lenstat {
            float: right;
            margin: 5px 8px 0 0;
        }
    	
    	</style>
	</head>
	<body>
		<textarea id="source" onkeyup="compile()">// `main` functions may binding to a onload event 
// Functions can defined without `function` keyword, with and without `type`
main(){

    // Unary operators
    // Two variants of `isset` operator. Which is better?
    bool _seted = true, _empty;
    console.log("`_seted` is", _seted?? ? "seted" : "empty");
    console.log("`_empty` is", isset _empty ? "seted" : "empty");

    // `clone` operator 
    Array _first = [584], _second = clone _first;
    _first.push(404);
    console.log("`_first`:",_first,"`_second`:",_second);

    // Binary operators
    // `pow` operator
    console.log("5 ** 3 =", 5 ** 3);

    // `modulo` operator
    console.log("10 %% 4 = ", 10 %% 4);

    // `isset` conditional assigment
    int a, b = 4;
    console.log("`a` is", a, ", now `a` is", a ?= b); 
    console.log("`a` is", a, ", now `a` still", a ?= 584);

    // `isset` binary conditional
    int x, y = 5;
    console.log("`x` is", x, ", `y` is", y, ", x ? y = ", x ? y), x = 1;
    console.log("`x` is", x, ", `y` is", y, ", x ? y = ", x ? y);

    // `is` operator
    console.log("'hello'", "hello" is String ? "is" : "isnt", "`String`");

    // `isnt` operator
    console.log("'goodby'", "goodby" isnt Number ? "isnt" : "is", "`Number`");

    // Boolean alternatives
    console.log("`yes` and `no`", yes is Boolean && no is Boolean ? "is" : "isnt", "`Boolean`");
    console.log("`on` and `off`", on is Boolean && off is Boolean ? "is" : "isnt", "`Boolean`");

    // Strings
    // New quotes symbol, multi-lining and templating
    console.log(`

        Hello!
        My name is ColaScript, and i know who you are }:->
        User agent: @{navigator.userAgent}
        Vendor: {{navigator.vendor}}

    `);

    // Raw strings
    console.log(r"\n \r \t some@email.ru");

    // Multiline RegExp's
    RegExp isEmail = /
        ([\w-\.]+)
        @
        ((?:[\w]+\.)+)
        ([a-zA-Z]{2,4})
    /; 
    String email = r'some@email.ru';
    console.log("@email {{ isEmail.test(email) ? "is" : "isnt" }} valid email adress");

    // Arrays
    // Empty getter and setter ( pushig )
    Array arr = [2, 4, 8, 16, 32];
    console.log("Last element of `arr` is", arr[]), arr[] = 64;
    console.log("Now last element of `arr` is", arr[]);

    // Splice assigment
    arr[2..4] = [3, 2, 1];
    console.log("`arr` is", arr);

    // Range
    console.log("`[0..10]` is", [0..10]);

    // Calling function
    console.log(Profile(
        "Dan", "Green",
        "HTML5", "JavaScript", "Dart", "PHP", "CSS3", "LESS", "Qt",
        age : 19,
        petName : "Felix"
    ));
}

// Functions
// Named, positional and splated arguments, with default values.
// Arrow functions.
Object Profile(String firstName, String secondName, String country = "Russia", Array skills..., age:, petName: "Tux"){
    skills.forEach((val) => val == "JavaScript" && console.log("JavaScript - It Awesome!"));
    return {
        firstName : firstName,
        secondName : secondName,
        age : age,
        country : country,
        skills : skills,
        petName : petName
    };
}
</textarea>
		<textarea id="translation"></textarea>
		<textarea id="result"></textarea>
		<div id="controls">  
            <div class="bg">&nbsp;</div>
            <div class="m">
                <button id="exec" onclick="exec()">Execute</button>
                <button id="benchmark" onclick="benchmark()">Benchmark</button>
                <input type="checkbox" id="is_js" onclick="compile()">
                <label for="is_js">js parser</label>
                <input type="checkbox" id="main_binding" onclick="compile()">
                <label for="main_binding">`main` binding</label>
                <span id="lenstat"></span>
            </div>
	</body>
	<script>
		var sourceArea = document.getElementById("source"), 
			translationArea = document.getElementById("translation"), 
			resultArea = document.getElementById("result"), 
            isjs = document.getElementById("is_js"),
            mainbinding = document.getElementById("main_binding"),
			source;

        if(!localStorage.source) localStorage.source = source = sourceArea.value;
		else sourceArea.value = source = localStorage.source;
        isjs.checked = localStorage.isjs == "t";
        mainbinding.checked = localStorage.mainbinding == "t";

		function compile(){
			source = sourceArea.value;
			localStorage.source = source;
            localStorage.isjs = isjs.checked ? "t" : "f";
            localStorage.mainbinding = mainbinding.checked ? "t" : "f";

			stream = new Cola.OutputStream({ beautify : true });
			compressor = new Cola.Compressor({ is_js : isjs.checked });

			try {
				// 1. compile
				ast = Cola.parse(source, { is_js : isjs.checked });
				if(!isjs.checked) ast = ast.toJavaScript({ main_binding : mainbinding.checked });
				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();
        		ast.mangle_names({ sort : true, toplevel : true });

        		stream = new Cola.OutputStream();
        		ast.print(stream);
				resultArea.value = stream.toString();
			} catch(e){
				translationArea.value = '';
				resultArea.value = '';

                throw e;
			}

            document.querySelector('#lenstat').innerHTML = sourceArea.value.length+" : "+translationArea.value.length+" : "+resultArea.value.length;
		}

        function benchmark(){
            console.time("ColaScript");
            eval(resultArea.result);
            console.timeEnd("ColaScript");
        }

		function exec(){
			eval(resultArea.value)
		}

		function Translate(){
			stream = new Cola.OutputStream({ beautify : true });
			translate(Cola.parse(source, null, isjs.checked)).print(stream);
			return stream.toString();
		}

		compile();
	</script>
</html>
Going to ColaScript!!! Start work on ColaScript translator. 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>`
First step is done. index.html - playground 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 {`
Demo updated. 2014-04-28 08:20:12 +00:00			`-moz-box-sizing: border-box;`
First step is done. index.html - playground 2014-04-15 10:52:01 +00:00			`box-sizing: border-box;`
			`width: 33.333%;`
			`height: 100%;`
			`font-size: 12px;`
			`float: left;`
			`font-family: "Andale Mono";`
Demo updated. 2014-04-28 08:20:12 +00:00			`padding: 0 5px 26px 5px;`
First step is done. index.html - playground 2014-04-15 10:52:01 +00:00			`}`

			`#controls {`
			`position: fixed;`
			`bottom: 0;`
			`left: 0;`
Demo updated. 2014-04-20 15:57:10 +00:00			`height: 25px;`
			`width: 100%;`
First step is done. index.html - playground 2014-04-15 10:52:01 +00:00			`}`
Demo updated. 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;`
			`}`
Demo updated. 2014-04-28 08:20:12 +00:00
			`#lenstat {`
			`float: right;`
			`margin: 5px 8px 0 0;`
			`}`
First step is done. index.html - playground 2014-04-15 10:52:01 +00:00
			`</style>`
Going to ColaScript!!! Start work on ColaScript translator. 2014-04-14 03:35:26 +00:00			`</head>`
			`<body>`
Demo updated. 2014-04-28 08:20:12 +00:00			<textarea id="source" onkeyup="compile()">// `main` functions may binding to a onload event
			// Functions can defined without `function` keyword, with and without `type`
			`main(){`

			`// Unary operators`
			// Two variants of `isset` operator. Which is better?
			`bool _seted = true, _empty;`
			console.log("`_seted` is", _seted?? ? "seted" : "empty");
			console.log("`_empty` is", isset _empty ? "seted" : "empty");

			// `clone` operator
			`Array _first = [584], _second = clone _first;`
			`_first.push(404);`
			console.log("`_first`:",_first,"`_second`:",_second);

			`// Binary operators`
			// `pow` operator
			`console.log("5 3 =", 5 3);`

			// `modulo` operator
			`console.log("10 %% 4 = ", 10 %% 4);`

			// `isset` conditional assigment
			`int a, b = 4;`
			console.log("`a` is", a, ", now `a` is", a ?= b);
			console.log("`a` is", a, ", now `a` still", a ?= 584);

			// `isset` binary conditional
			`int x, y = 5;`
			console.log("`x` is", x, ", `y` is", y, ", x ? y = ", x ? y), x = 1;
			console.log("`x` is", x, ", `y` is", y, ", x ? y = ", x ? y);

			// `is` operator
			console.log("'hello'", "hello" is String ? "is" : "isnt", "`String`");

			// `isnt` operator
			console.log("'goodby'", "goodby" isnt Number ? "isnt" : "is", "`Number`");

			`// Boolean alternatives`
			console.log("`yes` and `no`", yes is Boolean && no is Boolean ? "is" : "isnt", "`Boolean`");
			console.log("`on` and `off`", on is Boolean && off is Boolean ? "is" : "isnt", "`Boolean`");

			`// Strings`
			`// New quotes symbol, multi-lining and templating`
Demo code by default 2014-04-18 07:14:54 +00:00			console.log(`

			`Hello!`
			`My name is ColaScript, and i know who you are }:->`
Demo updated. 2014-04-28 08:20:12 +00:00			`User agent: @{navigator.userAgent}`
			`Vendor: {{navigator.vendor}}`
Demo code by default 2014-04-18 07:14:54 +00:00
			`);

Demo updated. 2014-04-28 08:20:12 +00:00			`// Raw strings`
			`console.log(r"\n \r \t some@email.ru");`
New features added. Operator `clone` and anonymous function definition `(){}`. 2014-04-20 07:31:03 +00:00
Demo updated. 2014-04-28 08:20:12 +00:00			`// Multiline RegExp's`
new demo 2014-04-18 18:33:08 +00:00			`RegExp isEmail = /`
Demo code by default 2014-04-18 07:14:54 +00:00			`([\w-\.]+)`
			`@`
			`((?:[\w]+\.)+)`
			`([a-zA-Z]{2,4})`
Demo updated. 2014-04-28 08:20:12 +00:00			`/;`
			`String email = r'some@email.ru';`
			`console.log("@email {{ isEmail.test(email) ? "is" : "isnt" }} valid email adress");`

			`// Arrays`
			`// Empty getter and setter ( pushig )`
			`Array arr = [2, 4, 8, 16, 32];`
			console.log("Last element of `arr` is", arr[]), arr[] = 64;
			console.log("Now last element of `arr` is", arr[]);

			`// Splice assigment`
			`arr[2..4] = [3, 2, 1];`
			console.log("`arr` is", arr);

			`// Range`
			console.log("`[0..10]` is", [0..10]);

			`// Calling function`
			`console.log(Profile(`
			`"Dan", "Green",`
			`"HTML5", "JavaScript", "Dart", "PHP", "CSS3", "LESS", "Qt",`
			`age : 19,`
			`petName : "Felix"`
			`));`
Demo code by default 2014-04-18 07:14:54 +00:00			`}`

Demo updated. 2014-04-28 08:20:12 +00:00			`// Functions`
			`// Named, positional and splated arguments, with default values.`
			`// Arrow functions.`
			`Object Profile(String firstName, String secondName, String country = "Russia", Array skills..., age:, petName: "Tux"){`
			`skills.forEach((val) => val == "JavaScript" && console.log("JavaScript - It Awesome!"));`
			`return {`
			`firstName : firstName,`
			`secondName : secondName,`
			`age : age,`
			`country : country,`
			`skills : skills,`
			`petName : petName`
			`};`
			`}`
			`</textarea>`
First step is done. index.html - playground 2014-04-15 10:52:01 +00:00			`<textarea id="translation"></textarea>`
			`<textarea id="result"></textarea>`
Demo updated. 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>`
Array sugar added. 2014-04-22 13:33:43 +00:00			`<button id="benchmark" onclick="benchmark()">Benchmark</button>`
Demo updated. 2014-04-20 15:57:10 +00:00			`<input type="checkbox" id="is_js" onclick="compile()">`
			`<label for="is_js">js parser</label>`
Demo updated. 2014-04-28 08:20:12 +00:00			`<input type="checkbox" id="main_binding" onclick="compile()">`
			<label for="main_binding">`main` binding</label>
Demo updated. 2014-04-20 15:57:10 +00:00			`<span id="lenstat"></span>`
			`</div>`
Going to ColaScript!!! Start work on ColaScript translator. 2014-04-14 03:35:26 +00:00			`</body>`
			`<script>`
First step is done. index.html - playground 2014-04-15 10:52:01 +00:00			`var sourceArea = document.getElementById("source"),`
			`translationArea = document.getElementById("translation"),`
			`resultArea = document.getElementById("result"),`
Refactoring Step 2 2014-04-16 18:39:27 +00:00			`isjs = document.getElementById("is_js"),`
Demo updated. 2014-04-28 08:20:12 +00:00			`mainbinding = document.getElementById("main_binding"),`
First step is done. index.html - playground 2014-04-15 10:52:01 +00:00			`source;`
Demo code by default 2014-04-18 07:14:54 +00:00
			`if(!localStorage.source) localStorage.source = source = sourceArea.value;`
			`else sourceArea.value = source = localStorage.source;`
Refactoring Step 2 2014-04-16 18:39:27 +00:00			`isjs.checked = localStorage.isjs == "t";`
Demo updated. 2014-04-28 08:20:12 +00:00			`mainbinding.checked = localStorage.mainbinding == "t";`
Going to ColaScript!!! Start work on ColaScript translator. 2014-04-14 03:35:26 +00:00
First step is done. index.html - playground 2014-04-15 10:52:01 +00:00			`function compile(){`
Going to ColaScript!!! Start work on ColaScript translator. 2014-04-14 03:35:26 +00:00			`source = sourceArea.value;`
			`localStorage.source = source;`
Refactoring Step 2 2014-04-16 18:39:27 +00:00			`localStorage.isjs = isjs.checked ? "t" : "f";`
Demo updated. 2014-04-28 08:20:12 +00:00			`localStorage.mainbinding = mainbinding.checked ? "t" : "f";`
First step is done. index.html - playground 2014-04-15 10:52:01 +00:00
Array sugar added. 2014-04-22 13:33:43 +00:00			`stream = new Cola.OutputStream({ beautify : true });`
Adding std functions if need. 2014-04-18 06:10:20 +00:00			`compressor = new Cola.Compressor({ is_js : isjs.checked });`
First step is done. index.html - playground 2014-04-15 10:52:01 +00:00
			`try {`
			`// 1. compile`
Adding std functions if need. 2014-04-18 06:10:20 +00:00			`ast = Cola.parse(source, { is_js : isjs.checked });`
Demo updated. 2014-04-28 08:20:12 +00:00			`if(!isjs.checked) ast = ast.toJavaScript({ main_binding : mainbinding.checked });`
First step is done. index.html - playground 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();`
Array sugar added. 2014-04-22 13:33:43 +00:00			`ast.mangle_names({ sort : true, toplevel : true });`
First step is done. index.html - playground 2014-04-15 10:52:01 +00:00
Array sugar added. 2014-04-22 13:33:43 +00:00			`stream = new Cola.OutputStream();`
First step is done. index.html - playground 2014-04-15 10:52:01 +00:00			`ast.print(stream);`
			`resultArea.value = stream.toString();`
			`} catch(e){`
			`translationArea.value = '';`
			`resultArea.value = '';`
Array `arr[]` operator added. 2014-04-20 18:56:47 +00:00
			`throw e;`
First step is done. index.html - playground 2014-04-15 10:52:01 +00:00			`}`
Demo updated. 2014-04-20 15:57:10 +00:00
			`document.querySelector('#lenstat').innerHTML = sourceArea.value.length+" : "+translationArea.value.length+" : "+resultArea.value.length;`
First step is done. index.html - playground 2014-04-15 10:52:01 +00:00			`}`

Array sugar added. 2014-04-22 13:33:43 +00:00			`function benchmark(){`
Demo updated. 2014-04-28 08:20:12 +00:00			`console.time("ColaScript");`
Array sugar added. 2014-04-22 13:33:43 +00:00			`eval(resultArea.result);`
Demo updated. 2014-04-28 08:20:12 +00:00			`console.timeEnd("ColaScript");`
Array sugar added. 2014-04-22 13:33:43 +00:00			`}`

First step is done. index.html - playground 2014-04-15 10:52:01 +00:00			`function exec(){`
			`eval(resultArea.value)`
			`}`
Going to ColaScript!!! Start work on ColaScript translator. 2014-04-14 03:35:26 +00:00
			`function Translate(){`
Refactoring over! 2014-04-17 16:21:45 +00:00			`stream = new Cola.OutputStream({ beautify : true });`
Refactoring Step 2 2014-04-16 18:39:27 +00:00			`translate(Cola.parse(source, null, isjs.checked)).print(stream);`
Going to ColaScript!!! Start work on ColaScript translator. 2014-04-14 03:35:26 +00:00			`return stream.toString();`
			`}`
First step is done. index.html - playground 2014-04-15 10:52:01 +00:00
			`compile();`
Going to ColaScript!!! Start work on ColaScript translator. 2014-04-14 03:35:26 +00:00			`</script>`
			`</html>`