show error message when there is compilation error

This commit is contained in:
Sebastian 2022-12-09 11:46:09 -03:00
parent 24f6d8fc9a
commit f759c58a59
No known key found for this signature in database
GPG Key ID: BE4FF68352439FC1
2 changed files with 40 additions and 4 deletions

View File

@ -14,6 +14,31 @@ function setupLiveReload(): void {
window.location.reload();
return;
}
if (event.type === "file-updated-failed") {
const h1 = document.getElementById("overlay-text")
if (h1) {
h1.innerHTML = "compilation failed"
h1.style.color = 'red'
h1.style.margin = ''
}
const div = document.getElementById("overlay")
if (div) {
const content = JSON.stringify(event.data, undefined, 2)
const pre = document.createElement("pre");
pre.id = "error-text"
pre.style.margin = "";
pre.textContent = content;
div.style.backgroundColor = "rgba(0,0,0,0.8)";
div.style.flexDirection = 'column'
div.appendChild(pre);
}
console.error(event.data.error)
return;
}
if (event.type === "file-updated") {
window.location.reload();
return;
}
} catch (e) {
return;
}
@ -31,14 +56,17 @@ setupLiveReload();
function showReloadOverlay(): void {
const d = document.createElement("div");
d.id = "overlay"
d.style.position = "absolute";
d.style.width = "100%";
d.style.height = "100%";
d.style.color = "white";
d.style.backgroundColor = "rgba(0,0,0,0.5)";
d.style.display = "flex";
d.style.zIndex = String(Number.MAX_SAFE_INTEGER)
d.style.justifyContent = "center";
const h = document.createElement("h1");
h.id = "overlay-text"
h.style.margin = "auto";
h.innerHTML = "reloading...";
d.appendChild(h);

View File

@ -38,7 +38,6 @@ export async function serve(opts: {
app.use(PATHS.APP, express.static(opts.folder));
const server = https.createServer(httpServerOptions, app);
server.listen(opts.port);
logger.info(`serving ${opts.folder} on ${opts.port}`);
logger.info(` ${PATHS.APP}: application`);
logger.info(` ${PATHS.EXAMPLE}: examples`);
@ -74,21 +73,28 @@ export async function serve(opts: {
logger.info(`watching ${watchingFolder} for change`);
chokidar.watch(watchingFolder).on("change", (path, stats) => {
logger.trace(`changed ${path}`);
logger.info(`changed ${path}`);
sendToAllClients({ type: "file-updated-start", data: { path } });
if (opts.onUpdate) {
sendToAllClients({ type: "file-updated-start", data: { path } });
opts.onUpdate().then((result) => {
sendToAllClients({
type: "file-updated-done",
data: { path, result },
});
}).catch((error) => {
sendToAllClients({
type: "file-updated-failed",
data: { path, error },
});
});
} else {
sendToAllClients({ type: "file-change-done", data: { path } });
sendToAllClients({ type: "file-change", data: { path } });
}
});
if (opts.onUpdate) opts.onUpdate()
app.get(PATHS.EXAMPLE, function (req: any, res: any) {
res.set("Content-Type", "text/html");
res.send(
@ -107,5 +113,7 @@ export async function serve(opts: {
app.get(PATHS.NOTIFY, function (req: any, res: any) {
res.send("ok");
});
server.listen(opts.port);
}
}