MirrorMirror
/
riju
mirror of https://github.com/radian-software/riju.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Load editor more quickly, add loading indicator

This commit is contained in:
Radon Rosborough 2020-06-12 11:42:11 -06:00
parent ba84695d13
commit 0a05a0eb92
4 changed files with 18 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
backend/src/api.ts
View File

@ -21,28 +21,6 @@ export class Session {
this.config = langs[lang];
this.term = { pty: null, live: false };
this.code = "";
try {
this.ws.send(
JSON.stringify({
event: "setMonacoLanguage",
monacoLanguage: this.config.monacoLang,
})
);
} catch (err) {
//
}
if (this.config.template) {
try {
this.ws.send(
JSON.stringify({
event: "insertTemplate",
template: this.config.template,
})
);
} catch (err) {
//
}
}
this.run().catch(console.error);
ws.on("message", this.handleClientMessage);
}

2
backend/src/server.ts
View File

@ -33,7 +33,7 @@ app.get("/", (_, res) => {
app.get("/:lang", (req, res) => {
if (langs[req.params.lang]) {
res.render(appRoot.path + "/frontend/pages/app", {
name: langs[req.params.lang].name,
config: { id: req.params.lang, ...langs[req.params.lang] },
});
} else {
res.send(`No such language: ${req.params.lang}`);

7
frontend/pages/app.ejs
View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title><%= name %> - Riju</title>
<title><%= config.name %> - Riju</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
@ -10,7 +10,6 @@
crossorigin="anonymous"
/>
<link rel="stylesheet" href="/css/app.css" />
<script src="/js/app.js" async defer></script>
</head>
<body>
<div id="app">
@ -19,5 +18,9 @@
<button type="button" class="btn btn-success" id="runButton">Run</button>
<a href="/" class="btn btn-secondary" id="backButton">Switch to a different language</a>
</div>
<script>
window.rijuConfig = <%- JSON.stringify(config) %>;
</script>
<script src="/js/app.js"></script>
</body>
</html>

38
frontend/src/app.ts
View File

@ -6,7 +6,13 @@ import { FitAddon } from "xterm-addon-fit";
import "xterm/css/xterm.css";
const lang = document.location.pathname.slice(1);
interface RijuConfig {
id: string;
monacoLang: string;
template: string;
}
const config: RijuConfig = (window as any).rijuConfig;
const term = new Terminal();
const fitAddon = new FitAddon();
@ -16,17 +22,17 @@ term.open(document.getElementById("terminal"));
fitAddon.fit();
window.addEventListener("resize", () => fitAddon.fit());
term.write("Connecting to server...");
const initialRetryDelayMs = 200;
let retryDelayMs = initialRetryDelayMs;
let allowInsertingTemplate = true;
function tryConnect() {
console.log("Connecting to server...");
socket = new WebSocket(
(document.location.protocol === "http:" ? "ws://" : "wss://") +
document.location.host +
`/api/v1/ws?lang=${encodeURIComponent(lang)}`
`/api/v1/ws?lang=${encodeURIComponent(config.id)}`
);
socket.addEventListener("open", () => {
console.log("Successfully connected to server");
@ -53,25 +59,6 @@ function tryConnect() {
}
term.write(message.output);
return;
case "setMonacoLanguage":
if (typeof message.monacoLanguage !== "string") {
console.error("Unexpected message from server:", message);
return;
}
monaco.editor.setModelLanguage(
editor.getModel(),
message.monacoLanguage
);
return;
case "insertTemplate":
if (typeof message.template !== "string") {
console.error("Unexpected message from server:", message);
return;
}
if (allowInsertingTemplate) {
editor.getModel().setValue(message.template);
}
return;
default:
console.error("Unexpected message from server:", message);
return;
@ -106,9 +93,8 @@ const editor = monaco.editor.create(document.getElementById("editor"), {
scrollbar: { verticalScrollbarSize: 0 },
});
window.addEventListener("resize", () => editor.layout());
editor.onDidChangeModelContent(() => {
allowInsertingTemplate = false;
});
editor.getModel().setValue(config.template);
monaco.editor.setModelLanguage(editor.getModel(), config.monacoLang);
document.getElementById("runButton").addEventListener("click", () => {
socket.send(JSON.stringify({ event: "runCode", code: editor.getValue() }));