fix: consider object output

MR-Addict · Sep 22, 2024 · 08377dd · 08377dd
1 parent 91945f8
commit 08377dd
Show file tree

Hide file tree

Showing 10 changed files with 438 additions and 331 deletions.
diff --git a/backend/Cargo.lock b/backend/Cargo.lock
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -12,23 +12,23 @@
   "devDependencies": {
     "@babel/standalone": "^7.25.6",
     "@types/node": "^22.5.5",
-    "@types/react": "^18.3.5",
+    "@types/react": "^18.3.8",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
     "ace-builds": "^1.36.2",
     "autoprefixer": "^10.4.20",
     "clsx": "^2.1.1",
     "million": "^3.1.11",
-    "postcss": "^8.4.45",
+    "postcss": "^8.4.47",
     "prettier": "^3.3.3",
     "pyodide": "^0.26.2",
     "react": "^18.3.1",
     "react-ace": "^12.0.0",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
-    "tailwindcss": "^3.4.11",
+    "tailwindcss": "^3.4.12",
     "typescript": "^5.6.2",
-    "vite": "^5.4.5",
+    "vite": "^5.4.7",
     "zod": "^3.23.8"
   },
   "prettier": {

diff --git a/frontend/src/components/Output/Output.module.css b/frontend/src/components/Output/Output.module.css
@@ -13,7 +13,7 @@
 }
 
 .line {
-  @apply whitespace-pre-wrap;
+  @apply whitespace-pre-wrap flex flex-row gap-1;
 }
 
 /* wrap button */

diff --git a/frontend/src/components/Output/Output.tsx b/frontend/src/components/Output/Output.tsx
@@ -56,9 +56,14 @@ export default function Output() {
           <p className={style.line}>&gt; Sorry, there is no output</p>
         )}
         {output.data.map((line, index) => (
-          <p key={index} data-color={line.color} className={style.line}>
-            {"> " + line.msg}
-          </p>
+          <div key={index} data-color={line.color} className={style.line}>
+            <span>&gt;</span>
+            <ul>
+              {line.msg.map((msg, index) => (
+                <li key={index}>{typeof msg === "string" ? msg : JSON.stringify(msg, null, 2)}</li>
+              ))}
+            </ul>
+          </div>
         ))}
       </div>
 

diff --git a/frontend/src/contexts/AppProvider.tsx b/frontend/src/contexts/AppProvider.tsx
@@ -89,13 +89,13 @@ export const AppContextProvider = ({ children }: AppContextProviderProps) => {
     // start new worker
     const newWorker = new Worker(workers[lang], { type: "classic", name: `${lang}-worker` });
     newWorker.onmessage = (event: MessageEvent) => {
-      const parsedOutput = Output.safeParse(event.data.output);
       const parsedLang = Language.safeParse(event.data.lang);
+      const parsedOutput = Output.safeParse(event.data.output);
       if (!parsedOutput.success || !parsedLang.success) return;
-      setOutputs((prev) => ({
-        ...prev,
-        [parsedLang.data]: { status: parsedOutput.data.status, data: [...prev[lang].data, ...parsedOutput.data.data] }
-      }));
+
+      const data = parsedOutput.data.data;
+      const status = parsedOutput.data.status;
+      setOutputs((prev) => ({ ...prev, [parsedLang.data]: { status, data: [...prev[lang].data, ...data] } }));
     };
     setWorker(newWorker);
   }, [editor.lang]);

diff --git a/frontend/src/types/output.ts b/frontend/src/types/output.ts
@@ -4,7 +4,7 @@ const Output = z.object({
   status: z.enum(["idle", "loading", "running", "finished"]),
   data: z.array(
     z.object({
-      msg: z.string(),
+      msg: z.array(z.any()),
       color: z.enum(["red", "yellow", "normal"])
     })
   )

diff --git a/frontend/src/workers/javascript-worker.js b/frontend/src/workers/javascript-worker.js
@@ -1,7 +1,7 @@
 const postmessage = (status, msg) => self.postMessage({ lang: "javascript", output: { status, data: msg } });
 
-self.console.error = (...msg) => postmessage("running", [{ color: "red", msg: msg.join(" ") }]);
-self.console.log = (...msgs) => postmessage("running", [{ color: "normal", msg: msgs.join(" ") }]);
+self.console.error = (...msg) => postmessage("running", [{ color: "red", msg }]);
+self.console.log = (...msg) => postmessage("running", [{ color: "normal", msg }]);
 
 self.onmessage = async (event) => {
   const { data, ...context } = event.data;

diff --git a/frontend/src/workers/python-worker.js b/frontend/src/workers/python-worker.js
@@ -2,7 +2,7 @@ self.importScripts("https://cdn.jsdelivr.net/pyodide/v0.26.2/full/pyodide.js");
 
 let pyodide = null;
 
-const postmessage = (status, msg) => self.postMessage({ lang: "python", output: { status, data: msg } });
+const postmessage = (status, msg) => self.postMessage({ lang: "python", output: { status, data: [msg] } });
 const stderr = (msg) => postmessage("running", [{ color: "red", msg }]);
 const stdout = (msg) => {
   // if the message is FLUSHHH, then ignore it

diff --git a/frontend/src/workers/typescript-worker.js b/frontend/src/workers/typescript-worker.js
@@ -2,8 +2,8 @@ self.importScripts("https://mirrors.sustech.edu.cn/cdnjs/ajax/libs/babel-standal
 
 const postmessage = (status, msg) => self.postMessage({ lang: "typescript", output: { status, data: msg } });
 
-self.console.error = (...msg) => postmessage("running", [{ color: "red", msg: msg.join(" ") }]);
-self.console.log = (...msgs) => postmessage("running", [{ color: "normal", msg: msgs.join(" ") }]);
+self.console.error = (...msg) => postmessage("running", [{ color: "red", msg }]);
+self.console.log = (...msg) => postmessage("running", [{ color: "normal", msg }]);
 
 async function waitBabelReady() {
   Babel.transform("", { filename: "typescript.ts", presets: ["typescript"] });