feat: add LICENCE

Author: MR-Addict

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Cael
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

frontend/src/components/Output/Output.module.css

@@ -8,7 +8,11 @@
 
 /* output message */
 .output {
-  @apply whitespace-pre-wrap p-2 bg-stone-100 font-mono empty:hidden;
+  @apply overflow-x-auto p-2 bg-stone-100 font-mono empty:hidden;
+}
+
+.output p {
+  @apply whitespace-nowrap;
 }
 
 .wrapper[data-status="error"] .output {

frontend/src/components/Output/Output.tsx

@@ -7,12 +7,18 @@ import { useAppContext } from "@/contexts/AppProvider";
 
 export default function Output() {
   const { output, setOutput } = useAppContext();
+  const lines = output.msg.split("\n").filter((line) => line !== "");
 
   if (output.status === "idle" || output.status === "loading") return null;
 
   return (
     <div data-status={output.status} className={clsx(style.wrapper, "dark:text-gray-300")}>
-      <p className={clsx(style.output, "dark:bg-zinc-800")}>{output.msg || "Sorry, there is no output"}</p>
+      <div className={clsx(style.output, "dark:bg-zinc-800")}>
+        {lines.length === 0 && <p>Sorry, there is no output</p>}
+        {lines.map((line) => (
+          <p key={line}>{line}</p>
+        ))}
+      </div>
       <button
         type="button"
         className={clsx(style["clear-button"], "dark:text-gray-400 sm:hover:text-blue-600 sm:dark:hover:text-gray-300")}

frontend/src/workers/pyodide-worker.js

@@ -2,30 +2,29 @@ self.importScripts("https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js");
 
 let message = "";
 let pyodide = null;
+
 const stderr = (msg) => (message += msg + "\n");
 const stdout = (msg) => (message += msg + "\n");
-const indexURL = "https://cdn.jsdelivr.net/pyodide/v0.25.0/full/";
 const postmessage = (status, msg) => self.postMessage({ lang: "python", output: { status, msg } });
 
 async function waitPyodideReady() {
   postmessage("loading", "Python is loading, please wait...");
-  pyodide = await loadPyodide({ indexURL, stdout, stderr });
+  pyodide = await loadPyodide({ stdout, stderr });
   postmessage("idle", "Python is ready");
 }
 
-waitPyodideReady();
-
 self.onmessage = async (event) => {
   const { data, ...context } = event.data;
 
-  // add all the context to the worker
-  for (const key of Object.keys(context)) self[key] = context[key];
-
-  if (!pyodide) await waitPyodideReady();
-
   // only run the code if the language is python
   const { lang, code } = event.data;
   if (lang === "python") {
+    // add all the context to the worker
+    for (const key of Object.keys(context)) self[key] = context[key];
+
+    // wait for pyodide to be ready
+    if (!pyodide) await waitPyodideReady();
+
     if (!code) postmessage("error", "Python code is empty");
     else {
       try {
@@ -41,3 +40,5 @@ self.onmessage = async (event) => {
     }
   }
 };
+
+waitPyodideReady();