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.config = langs[lang];
this.term = { pty: null, live: false }; this.term = { pty: null, live: false };
this.code = ""; 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); this.run().catch(console.error);
ws.on("message", this.handleClientMessage); ws.on("message", this.handleClientMessage);
} }

2
backend/src/server.ts
View File

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

7
frontend/pages/app.ejs
View File

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

38
frontend/src/app.ts
View File

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