Implement basic execution system and UI

This is a rather large commit that includes all of the following:
- React UI with code editor, runtime renderer and input-output panes
- Language providers for a sample language and Brainfuck
- Implementation of code execution in a web worker
- All-at-once unabortable execution of program fully functional
This commit is contained in:
Nilay Majorwar
2021-12-14 21:58:13 +05:30
parent 8746c803d7
commit 01ba292b9f
35 changed files with 3532 additions and 3529 deletions

58
ui/MainLayout.tsx Normal file
View File

@ -0,0 +1,58 @@
import React from "react";
import { Mosaic, MosaicNode, MosaicWindow } from "react-mosaic-component";
// IDs of windows in the mosaic layout
type WINDOW_ID = "editor" | "renderer" | "input" | "output";
const WindowTitles = {
editor: "Code Editor",
renderer: "Visualization",
input: "User Input",
output: "Execution Output",
};
type Props = {
renderEditor: () => React.ReactNode;
renderRenderer: () => React.ReactNode;
renderInput: () => React.ReactNode;
renderOutput: () => React.ReactNode;
};
export const MainLayout = (props: Props) => {
const MOSAIC_MAP = {
editor: props.renderEditor,
renderer: props.renderRenderer,
input: props.renderInput,
output: props.renderOutput,
};
const INITIAL_LAYOUT: MosaicNode<WINDOW_ID> = {
direction: "row",
first: "editor",
second: {
direction: "column",
first: "renderer",
second: {
direction: "row",
first: "input",
second: "output",
},
},
};
return (
<Mosaic<keyof typeof MOSAIC_MAP>
className="mosaic-blueprint-theme bp3-dark"
initialValue={INITIAL_LAYOUT}
renderTile={(windowId, path) => (
<MosaicWindow<number>
path={path}
title={WindowTitles[windowId]}
toolbarControls={<span />}
>
{MOSAIC_MAP[windowId]()}
</MosaicWindow>
)}
/>
);
};