blob: 01acb0e76f0c51053e9a2b2fdcaaeddbd71cd920 (
plain)
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
|
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { observer } from 'mobx-react';
import { observable, computed } from 'mobx';
import { CompileScript } from '../client/util/Scripting';
@observer
class Repl extends React.Component {
@observable text: string = "";
@observable executedCommands: { command: string, result: any }[] = [];
onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
this.text = e.target.value;
}
onKeyDown = (e: React.KeyboardEvent) => {
if (e.ctrlKey && e.key === "Enter") {
const script = CompileScript(this.text, { addReturn: true, typecheck: false });
if (!script.compiled) {
this.executedCommands.push({ command: this.text, result: "Compile Error" });
} else {
const result = script.run();
if (result.success) {
this.executedCommands.push({ command: this.text, result: result.result });
} else {
this.executedCommands.push({ command: this.text, result: result.error.message || result.error });
}
}
this.text = "";
}
}
@computed
get commands() {
return this.executedCommands.map(command => {
return (
<div style={{ marginTop: "5px" }}>
<p>{command.command}</p>
<pre>{JSON.stringify(command.result, null, 2)}</pre>
</div>
);
});
}
render() {
return (
<div>
<div style={{ verticalAlign: "bottom" }}>
{this.commands}
</div>
<textarea style={{ width: "100%", position: "absolute", bottom: "0px" }} value={this.text} onChange={this.onChange} onKeyDown={this.onKeyDown} />
</div>
);
}
}
ReactDOM.render(<Repl />, document.getElementById("root"));
|
