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
|
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';
import { makeInterface } from '../fields/Schema';
import { ObjectField } from '../fields/ObjectField';
import { RefField } from '../fields/RefField';
import { DocServer } from '../client/DocServer';
import { resolvedPorts } from '../client/util/CurrentUserUtils';
@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") {
e.preventDefault();
const script = CompileScript(this.text, {
addReturn: true, typecheck: false,
params: { makeInterface: "any" }
});
if (!script.compiled) {
this.executedCommands.push({ command: this.text, result: "Compile Error" });
} else {
const result = script.run({ makeInterface }, e => this.executedCommands.push({ command: this.text, result: e.message || e }));
result.success && this.executedCommands.push({ command: this.text, result: result.result });
}
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> */}
<pre>{command.result instanceof RefField || command.result instanceof ObjectField ? "object" : String(command.result)}</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>
);
}
}
(async function () {
DocServer.init(window.location.protocol, window.location.hostname, resolvedPorts.socket, "repl");
ReactDOM.render(<Repl />, document.getElementById("root"));
})();
|
