Skip to content

Commit a5284c2

Browse files
author
Andrew Schmadel
committed
make a REPL?
1 parent dc6d9c9 commit a5284c2

3 files changed

Lines changed: 28861 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<html>
2+
<head>
3+
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
4+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/codemirror.css">
5+
<title>babel-plugin-angularjs-annotate</title>
6+
</head>
7+
<style>
8+
body {
9+
padding: 0 2rem;
10+
}
11+
12+
h3 {
13+
margin-top: 0;
14+
}
15+
16+
.editors {
17+
display: flex;
18+
flex-wrap: nowrap;
19+
margin-bottom: 1rem;
20+
}
21+
22+
.editors > div {
23+
flex-grow: 1;
24+
flex-basis: 50%;
25+
margin: 0 1em;
26+
max-width: 50%;
27+
}
28+
29+
.editors > div > div {
30+
border: 1px solid #ccc;
31+
margin-bottom: 1em;
32+
}
33+
34+
#errors {
35+
display: none;
36+
color: red;
37+
margin-left: 1rem;
38+
}
39+
40+
#errorMsg {
41+
font-family: monospace;
42+
white-space: pre;
43+
}
44+
45+
label input {
46+
margin: 0 0.5em;
47+
}
48+
</style>
49+
<body>
50+
51+
<h1>babel-plugin-angularjs-annotate</h1>
52+
53+
<h2>Get It</h2>
54+
55+
<a href="https://github.com/schmod/babel-plugin-angularjs-annotate">On Github</a>
56+
57+
<h2>Try It</h2>
58+
<div class="editors">
59+
<div>
60+
<h3>Input</h3>
61+
<div id="input"></div>
62+
</div>
63+
<div>
64+
<h3>Output</h3>
65+
<div id="output"></div>
66+
<label for="es5">
67+
<input type="checkbox" id="es5" checked />transform ES2015 to ES5
68+
</label>
69+
</div>
70+
</div>
71+
72+
<div id="errors">
73+
<h3>Errors</h3>
74+
<div id="errorMsg"></div>
75+
</div>
76+
77+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/codemirror.js"></script>
78+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/mode/javascript/javascript.js"></script>
79+
80+
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script>
81+
<script src="repl/repl-browser.js"></script>
82+
83+
<script>
84+
var inputOpts = {
85+
mode: 'javascript',
86+
lineNumbers: true,
87+
matchBrackets: true,
88+
continueComments: "Enter"
89+
};
90+
91+
var outputOpts = {
92+
mode: 'javascript',
93+
lineNumbers: true,
94+
matchBrackets: true,
95+
continueComments: "Enter",
96+
readOnly: 'nocursor'
97+
};
98+
99+
var input = CodeMirror(document.getElementById('input'), inputOpts);
100+
var output = CodeMirror(document.getElementById('output'), outputOpts);
101+
102+
var change = function(cm){
103+
var es2015 = document.getElementById('es5').checked;
104+
try {
105+
document.getElementById('errors').style.display = 'none';
106+
var result = window.transform(cm.getValue(), es2015);
107+
output.setValue(result.code);
108+
} catch(e){
109+
console.error(e);
110+
document.getElementById('errors').style.display = 'block';
111+
document.getElementById('errorMsg').innerText = e.message;
112+
}
113+
};
114+
115+
input.on('change', change);
116+
document.getElementById('es5').onchange = function(){ change(input) }
117+
</script>
118+
</body>
119+
</html>

0 commit comments

Comments
 (0)