-
Notifications
You must be signed in to change notification settings - Fork 37
/
Copy pathdemo.html
108 lines (99 loc) · 3.89 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<html>
<head>
<title>Run LLVM Assembly In Your Browser</title>
</head>
<body onload="document.getElementById('the_output').value = ''">
<h2>Run LLVM Assembly In Your Browser</h2>
<p>
This is a demo of compiling and running <a href="http://llvm.org">LLVM</a> assembly in JavaScript.
</p>
<p>
Press the button to see it compile and run a tiny "hello world" program. You can also try modifying the LLVM assembly and pressing the button again - note though that <a href="http://llvm.org/docs/LangRef.html">LLVM assembly</a> is typed, so if you add characters to the string for example, you will need to adjust its length, both where it is defined and where it is used (otherwise you will get errors, which will show up in the output area).
</p>
<script src="llvm-as.js"></script>
<script src="llvm-dis.js"></script>
<script>
function process(input) {
try {
return llvmDis(llvmAs(input));
} catch (e) {
if (typeof e == 'string') {
return 'Error in compilation: ' + e;
} else {
throw e;
}
}
}
</script>
<hr>
<textarea id="the_input" cols=90 rows=13 style="background-color: #eeeeff; border: 1px solid black; margin-top: 0.3em; margin-bottom: 0.3em">
target triple = "i386-pc-linux-gnu"
@.str = private constant [15 x i8] c"hello, world!\0A\00"
define i32 @main() {
entry:
%str = getelementptr inbounds [15 x i8]* @.str, i32 0, i32 0
%call = call i32 (i8*, ...)* @printf(i8* %str)
ret i32 1
}
declare i32 @printf(i8*, ...)
</textarea>
<br>
<textarea id="the_output" cols=90 rows=5 style="border: 1px solid black; margin-bottom: 0.6em">
</textarea>
<br>
<script>
// emscripten stuff
arguments = [];
// For compiler
var compilerOutput = '';
print = function(x) {
compilerOutput += x;
};
var outputElement = document.getElementById('the_output');
function execute(ll) {
compilerOutput = '';
compile(ll);
outputElement.value = '';
var oldPrint = Module.print;
Module.print = function(x) {
outputElement.value += x + '\n';
};
try {
eval(compilerOutput);
} catch(e) {
outputElement.style.backgroundColor = '#ffe0e0';
Module.print('Error in execution: ' + e); // DEBUGGING + '|' + compilerOutput);
}
Module.print = oldPrint;
}
// For generated code
var Module = {};
</script>
<script src="compiler.js">
</script>
<script>
function doItAll() {
var ll = process(document.getElementById('the_input').value);
if (ll && ll[0] != 'E') {
outputElement.style.backgroundColor = '#eeffee';
execute(ll);
} else {
outputElement.style.backgroundColor = '#ffe0e0';
outputElement.value = ll; // error message
}
}
</script>
<input value="compile and run" type="button" onclick="doItAll()">
<hr>
<p>
This demo works by using parts of the LLVM toolchain (llvm-dis and llvm-as), compiled by <a href="http://emscripten.org/">emscripten</a> from C++ to JavaScript, to check the assembly for errors and pretty-print it. Then the emscripten compiler (originally written in JavaScript, but ported from the normal batch/shell mode to the browser environment) is run on the output, and the code executed directly.
</p>
<p>
This demo was done as a fun hacking project over a holiday vacation, so there are some caveats: The generated code is not optimized at all, so benchmarking is pointless; if you want to benchmark, run emscripten normally with <code>-O2</code>. Compilation speed has also not been optimized at all. Also, this demo has hardly been tested and glues together several codebases in ways they were not originally intended, there might be things that do not work.
</p>
<p>
<code><b><a href="https://github.com/kripken/llvm.js">Source code</a></b></code>
</p>
<a href="https://github.com/kripken/llvm.js"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
</body>
</html>