Missng variable added

frontend/pages/editor/[lang].js

@@ -1,7 +1,7 @@
 import MonacoEditor, { useMonaco } from "@monaco-editor/react";
 import { Circle, Code as Format, Home, PlayArrow } from "@mui/icons-material";
 import { LoadingButton } from "@mui/lab";
-import { Box, Button, Divider, Stack, Typography } from "@mui/material";
+import { Box, Button, Divider, Typography } from "@mui/material";
 import ansi from "ansicolor";
 import dynamic from "next/dynamic";
 import Head from "next/head";
@@ -20,7 +20,8 @@ const RijuTerminal = dynamic(() => import("../../components/RijuTerminal"), {
 const DEBUG = true;
 let clientDisposable = null;
 let servicesDisposable = null;
-const serviceLogBuffers = {};
+let serviceLogBuffers = {};
+let serviceLogLines = {};
 
 const CodeRunner = (props) => {
   const router = useRouter();
@@ -89,6 +90,7 @@ const CodeRunner = (props) => {
           setRunning(false);
           return;
         case "formattedCode":
+          setFormatting(false);
           if (
             typeof message.code !== "string" ||
             typeof message.originalCode !== "string"
@@ -99,7 +101,6 @@ const CodeRunner = (props) => {
           if (editorRef.current?.getValue() === message.originalCode) {
             editorRef.current?.setValue(message.code);
           }
-          setFormatting(false);
           return;
         case "lspStopped":
           setIsLspRequested(false);
@@ -399,9 +400,9 @@ const CodeRunner = (props) => {
           >
             <Typography sx={{ fontSize: 12 }}>Autocomplete</Typography>
           </LoadingButton>
-          <Button
+          <LoadingButton
             onClick={sendFormat}
-            disabled={isFormatting || isRunning}
+            loading={isFormatting}
             size="small"
             color="primary"
             variant="contained"
@@ -410,27 +411,23 @@ const CodeRunner = (props) => {
               visibility: config.format ? "visible" : "hidden",
             }}
             disableElevation
+            endIcon={<Format fontSize="small" />}
           >
-            <Stack direction="row" gap={1} alignItems="center">
+            <Typography sx={{ fontSize: 12 }}>Prettify</Typography>
-              <Typography sx={{ fontSize: 12 }}>Prettify</Typography>
+          </LoadingButton>
-              <Format fontSize="small" />
-            </Stack>
-          </Button>
           <Divider orientation="vertical" />
-          <Button
+          <LoadingButton
             onClick={showValue}
-            disabled={isRunning || isRunning}
+            loading={isRunning}
             size="small"
             color="success"
             variant="contained"
             sx={{ borderRadius: 0 }}
             disableElevation
+            endIcon={<PlayArrow fontSize="small" htmlColor="#fff" />}
           >
-            <Stack direction="row" gap={1} alignItems="center">
+            <Typography sx={{ fontSize: 12, color: "#fff" }}>Run</Typography>
-              <Typography sx={{ fontSize: 12, color: "#fff" }}>Run</Typography>
+          </LoadingButton>
-              <PlayArrow fontSize="small" htmlColor="#fff" />
-            </Stack>
-          </Button>
         </Box>
         <Divider />
         <Box

next.config.js

@@ -0,0 +1,25 @@
+// const isProd = process.env.NODE_ENV === "production";
+const isProd = false;
+
+module.exports = {
+  // assetPrefix: isProd ? "/riju" : "",
+  // assetPrefix: "/riju",
+  eslint: {
+    // Warning: This allows production builds to successfully complete even if
+    // your project has ESLint errors.
+    ignoreDuringBuilds: true,
+  },
+  basePath: isProd ? "/" : "",
+  reactStrictMode: true,
+  trailingSlash: isProd ? true : false,
+  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
+    if (!isServer) {
+      config.resolve.fallback.net = false;
+    }
+    config.resolve.alias.vscode = require.resolve(
+      "monaco-languageclient/lib/vscode-compatibility"
+    );
+
+    return config;
+  },
+};

package.json

@@ -3,13 +3,29 @@
   "version": "0.0.0",
   "license": "MIT",
   "private": true,
-  "type": "module",
+  "scripts": {
+    "dev": "next dev ./frontend",
+    "build": "next build ./frontend",
+    "start": "next start ./frontend",
+    "lint": "next lint ./frontend",
+    "export": "next export ./frontend",
+    "build:export": "yarn build && yarn export"
+  },
   "dependencies": {
     "@babel/core": "^7.12.10",
     "@babel/parser": "^7.13.11",
     "@babel/preset-env": "^7.12.11",
     "@balena/dockerignore": "^1.0.2",
+    "@emotion/react": "^11.4.1",
+    "@emotion/server": "^11.4.0",
+    "@emotion/styled": "^11.3.0",
+    "@monaco-editor/react": "^4.2.2",
+    "@mui/icons-material": "^5.0.0",
+    "@mui/lab": "^5.0.0-alpha.49",
+    "@mui/material": "^5.0.0",
+    "@mui/styles": "^5.0.0",
     "@sentry/node": "^6.11.0",
+    "ansicolor": "^1.1.95",
     "async-lock": "^1.2.6",
     "babel-loader": "^8.2.2",
     "babel-walk": "^3.0.0",
@@ -25,13 +41,18 @@
     "historic-readline": "^1.0.8",
     "jsonschema": "^1.4.0",
     "lodash": "^4.17.20",
-    "monaco-editor": "0.20.0",
+    "monaco-editor-webpack-plugin": "^4.1.2",
-    "monaco-editor-webpack-plugin": "1.9.0",
     "monaco-languageclient": "0.13.0",
+    "next": "11.0.1",
+    "next-transpile-modules": "^8.0.0",
+    "nprogress": "^0.2.0",
     "p-queue": "^6.6.2",
     "parse-passwd": "^1.0.0",
     "prettier": "^2.3.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "regenerator-runtime": "^0.13.7",
+    "setimmediate": "^1.0.5",
     "strip-ansi": "^6.0.0",
     "style-loader": "^2.0.0",
     "uuid": "^8.3.2",
@@ -39,7 +60,7 @@
     "webpack": "^4.44.2",
     "webpack-cli": "^4.3.0",
     "xterm": "^4.9.0",
-    "xterm-addon-fit": "^0.4.0",
+    "xterm-addon-fit": "^0.5.0",
     "yaml": "^1.10.0"
   }
 }