63 lines
2.0 KiB
TypeScript
63 lines
2.0 KiB
TypeScript
import React from "react";
|
|
import { Colors, Text } from "@blueprintjs/core";
|
|
import {
|
|
WorkerParseError,
|
|
WorkerRuntimeError,
|
|
} from "../languages/worker-errors";
|
|
|
|
/** Format a ParseError for displaying as output */
|
|
const formatParseError = (error: WorkerParseError): string => {
|
|
const line = error.range.line + 1;
|
|
const start = error.range.charRange?.start;
|
|
const end = error.range.charRange?.end;
|
|
let cols: string | null = null;
|
|
if (start != null && end != null) cols = `col ${start + 1}-${end + 1}`;
|
|
else if (start != null) cols = `col ${start + 1}`;
|
|
else if (end != null) cols = `col ${end + 1}`;
|
|
return `ParseError: line ${line}, ${cols}\n${error.message}`;
|
|
};
|
|
|
|
export interface OutputViewerRef {
|
|
/** Reset output to show placeholder text */
|
|
reset: () => void;
|
|
/** Append string to the displayed output */
|
|
append: (str?: string) => void;
|
|
/** Add error text below the output text */
|
|
setError: (error: WorkerRuntimeError | WorkerParseError | null) => void;
|
|
}
|
|
|
|
const OutputViewerComponent = (_: {}, ref: React.Ref<OutputViewerRef>) => {
|
|
const [value, setValue] = React.useState<string | null>(null);
|
|
const [error, setError] = React.useState<string | null>(null);
|
|
|
|
React.useImperativeHandle(ref, () => ({
|
|
reset: () => {
|
|
setValue(null);
|
|
setError(null);
|
|
},
|
|
append: (s) => setValue((o) => (o || "") + (s || "")),
|
|
setError: (error: WorkerRuntimeError | WorkerParseError | null) => {
|
|
if (!error) setError(null);
|
|
else if (error.name === "RuntimeError")
|
|
setError("RuntimeError: " + error.message);
|
|
else if (error.name === "ParseError") setError(formatParseError(error));
|
|
},
|
|
}));
|
|
|
|
return (
|
|
<div style={{ padding: 10, fontSize: 16 }}>
|
|
<pre
|
|
style={{ margin: 0, whiteSpace: "pre-wrap", wordWrap: "break-word" }}
|
|
>
|
|
{value}
|
|
</pre>
|
|
{value && <div style={{ height: 10 }} />}
|
|
<Text style={{ fontFamily: "monospace", color: Colors.RED3 }}>
|
|
{error}
|
|
</Text>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const OutputViewer = React.forwardRef(OutputViewerComponent);
|