This repository has been archived by the owner on Aug 23, 2020. It is now read-only.
forked from jacqueswww/vyper-in-browser
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
108 lines (99 loc) · 3.77 KB
/
index.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
108
<!DOCTYPE html>
<html>
<head>
<link href="css/pure-min.css" rel="stylesheet" />
<script src="js/vue.min.js"></script>
<script>
window.languagePluginUrl = "pyodide/";
document.addEventListener("DOMContentLoaded", function(event) {
var app = new Vue({
el: '#app',
data: {
loaded: false,
load_status: "Downloading a bunch of compile WASM & JS files ...",
code: "test: public(uint256)",
compiled_output: {},
vyper_version: "<not loaded>",
},
methods: {
init_vyper: function() {
var _this = this;
this.load_status = "Loading pyodide (python interpreter)...";
languagePluginLoader.then(() => {
// pyodide is now ready to use...
this.load_status = "Loading vyper module...";
pyodide.loadPackage(["vyper"]).then(() => {
this.load_status = "Vyper loaded!";
this.vyper_version = pyodide.runPython('import vyper; vyper.__version__');
pyodide.runPython('from vyper import compile_code');
_this.loaded = true;
});
});
},
compile: function() {
// console.log(pyodide.runPython('import vyper; vyper.__version__; from vyper.compiler import compile_code'));
// console.log(pyodide.runPython('compile_code("a: public(uint256)", ["abi", "bytecode"])'));
try {
this.compiled_output = {};
var out = pyodide.runPython('compile_code("""' + this.code + '""", ["abi", "bytecode"])');
this.compiled_output = out;
} catch (error) {
this.compiled_output.error = error.message;
}
}
},
mounted: function() {
this.init_vyper();
}
});
});
</script>
<script src="pyodide/pyodide.js"></script>
<style>
#bottom_container {
position: fixed;
bottom: 0;
width: 100%;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
textarea {
min-width: 600px;
min-height: 200px
}
code {
border: 1px solid #eee;
margin: 1em;
word-wrap: break-word;
}
</style>
</head>
<html>
<div id="app">
<div v-show="!loaded">
{{ load_status }}
</div>
<div v-show="loaded">
<h3> Vyper Code </h3>
<textarea v-model="code"></textarea><br>
<a class="pure-button pure-button-primary" v-on:click="compile">Compile</a><br>
<b v-model="compiled_output" style="min-width: 600px; min-height: 200px"></b>
<div v-if="compiled_output.error !== undefined">
<h4>Error</h4>
<pre> {{ compiled_output.error }} </pre>
</div>
<div v-if="compiled_output.abi !== undefined">
<h4>ABI</h4>
<code > {{ compiled_output.abi }} </code>
</div>
<div v-if="compiled_output.bytecode !== undefined">
<h4>Bytecode</h4>
<code > {{ compiled_output.bytecode }} </code>
</div>
<div id="bottom_container">
Vyper Version: {{ vyper_version }}
</div>
</div>
</div>
</html>