Implement RuntimeContext type and useRuntime hook, refactor exec.tsx and repl.tsx

Co-authored-by: na-trium-144 <100704180+na-trium-144@users.noreply.github.com>

Author: Copilot

app/terminal/exec.tsx

@@ -1,17 +1,17 @@
 "use client";
 
-import { usePyodide } from "./python/pyodide";
 import {
   clearTerminal,
   getRows,
   hideCursor,
   systemMessageColor,
   useTerminal,
 } from "./terminal";
-import { useWandbox } from "./wandbox/wandbox";
-import { ReplOutput, writeOutput } from "./repl";
+import { writeOutput } from "./repl";
 import { useState } from "react";
 import { useEmbedContext } from "./embedContext";
+import { useRuntime } from "./runtime";
+import { useWandbox } from "./wandbox/wandbox";
 
 export type ExecLang = "python" | "cpp";
 
@@ -36,63 +36,50 @@ export function ExecFile(props: ExecProps) {
   });
   const sectionContext = useEmbedContext();
 
-  const pyodide = usePyodide();
+  const runtime = useRuntime(props.language);
   const wandbox = useWandbox();
 
   // 表示するコマンドライン文字列
   let commandline: string;
-  // trueの間 (初期化しています...) と表示される
-  let runtimeInitializing: boolean;
-  // 初期化処理が必要な場合の関数
-  let beforeExec: (() => Promise<void>) | null = null;
+  if (props.language === "python") {
+    if (props.filenames.length !== 1) {
+      throw new Error("Pythonの実行にはファイル名が1つ必要です");
+    }
+    commandline = `python ${props.filenames[0]}`;
+  } else if (props.language === "cpp") {
+    if (!props.filenames || props.filenames.length === 0) {
+      throw new Error("C++の実行には filenames プロパティが必要です");
+    }
+    commandline = wandbox.getCommandlineStr("C++", props.filenames);
+  } else {
+    props.language satisfies never;
+    commandline = `エラー: 非対応の言語 ${props.language}`;
+  }
+
+  const runtimeInitializing = runtime.initializing;
+  const beforeExec = runtime.ready ? null : runtime.init;
+  const exec = () => runtime.runFiles(props.filenames);
+
   // 実行中です... と表示される
   const [isExecuting, setIsExecuting] = useState<boolean>(false);
-  // 実際に実行する関数
-  let exec: (() => Promise<ReplOutput[]>) | null = null;
-  switch (props.language) {
-    case "python":
-      if (props.filenames.length !== 1) {
-        throw new Error("Pythonの実行にはファイル名が1つ必要です");
-      }
-      commandline = `python ${props.filenames[0]}`;
-      runtimeInitializing = pyodide.initializing;
-      beforeExec = pyodide.ready ? null : pyodide.init;
-      exec = () => pyodide.runFile(props.filenames[0]);
-      break;
-    case "cpp":
-      if (!props.filenames || props.filenames.length === 0) {
-        throw new Error("C++の実行には filenames プロパティが必要です");
-      }
-      commandline = wandbox.getCommandlineStr("C++", props.filenames);
-      runtimeInitializing = false;
-      exec = () => wandbox.runFiles("C++", props.filenames);
-      break;
-    default:
-      props.language satisfies never;
-      commandline = `エラー: 非対応の言語 ${props.language}`;
-      runtimeInitializing = false;
-      break;
-  }
 
   const onClick = async () => {
-    if (exec) {
-      if (beforeExec) {
-        clearTerminal(terminalInstanceRef.current!);
-        terminalInstanceRef.current!.write(
-          systemMessageColor("(初期化しています...しばらくお待ちください)")
-        );
-        await beforeExec();
-      }
-      clearTerminal(terminalInstanceRef.current!);
-      terminalInstanceRef.current!.write(systemMessageColor("実行中です..."));
-      setIsExecuting(true);
-      const outputs = await exec();
-      setIsExecuting(false);
+    if (beforeExec) {
       clearTerminal(terminalInstanceRef.current!);
-      writeOutput(terminalInstanceRef.current!, outputs, false);
-      // TODO: 1つのファイル名しか受け付けないところに無理やりコンマ区切りで全部のファイル名を突っ込んでいる
-      sectionContext?.setExecResult(props.filenames.join(","), outputs);
+      terminalInstanceRef.current!.write(
+        systemMessageColor("(初期化しています...しばらくお待ちください)")
+      );
+      await beforeExec();
     }
+    clearTerminal(terminalInstanceRef.current!);
+    terminalInstanceRef.current!.write(systemMessageColor("実行中です..."));
+    setIsExecuting(true);
+    const outputs = await exec();
+    setIsExecuting(false);
+    clearTerminal(terminalInstanceRef.current!);
+    writeOutput(terminalInstanceRef.current!, outputs, false);
+    // TODO: 1つのファイル名しか受け付けないところに無理やりコンマ区切りで全部のファイル名を突っ込んでいる
+    sectionContext?.setExecResult(props.filenames.join(","), outputs);
   };
   return (
     <div className="relative">

app/terminal/python/embedded.tsx

@@ -1,8 +1,6 @@
 "use client";
 
-import { useMemo } from "react";
-import { ReplTerminal, ReplOutput, ReplCommand } from "../repl";
-import { usePyodide } from "./pyodide";
+import { ReplTerminal } from "../repl";
 
 export function PythonEmbeddedTerminal({
   terminalId,
@@ -11,55 +9,11 @@ export function PythonEmbeddedTerminal({
   terminalId: string;
   content: string;
 }) {
-  const initCommands = useMemo(() => splitContents(content), [content]);
-  const {
-    init,
-    initializing,
-    ready,
-    runPython,
-    checkSyntax,
-    mutex,
-    interrupt,
-  } = usePyodide();
-
   return (
     <ReplTerminal
       terminalId={terminalId}
-      initRuntime={init}
-      runtimeInitializing={initializing}
-      runtimeReady={ready}
-      initCommand={initCommands}
-      mutex={mutex}
-      prompt=">>> "
-      promptMore="... "
       language="python"
-      tabSize={4}
-      sendCommand={runPython}
-      checkSyntax={checkSyntax}
-      interrupt={interrupt}
+      content={content}
     />
   );
 }
-
-function splitContents(contents: string): ReplCommand[] {
-  const initCommands: { command: string; output: ReplOutput[] }[] = [];
-  for (const line of contents.split("\n")) {
-    if (line.startsWith(">>> ")) {
-      // Remove the prompt from the command
-      initCommands.push({ command: line.slice(4), output: [] });
-    } else if (line.startsWith("... ")) {
-      if (initCommands.length > 0) {
-        initCommands[initCommands.length - 1].command += "\n" + line.slice(4);
-      }
-    } else {
-      // プロンプトを含まない行は前のコマンドの出力
-      if (initCommands.length > 0) {
-        initCommands[initCommands.length - 1].output.push({
-          type: "stdout",
-          message: line,
-        });
-      }
-    }
-  }
-  return initCommands;
-}

app/terminal/python/page.tsx

@@ -3,27 +3,14 @@
 import { EditorComponent } from "../editor";
 import { ExecFile } from "../exec";
 import { ReplTerminal } from "../repl";
-import { usePyodide } from "./pyodide";
 
 export default function PythonPage() {
-  const { init, ready, initializing, runPython, checkSyntax, mutex, interrupt } =
-    usePyodide();
   return (
     <div className="p-4 flex flex-col gap-4">
       <ReplTerminal
         terminalId=""
-        initRuntime={init}
-        runtimeInitializing={initializing}
-        runtimeReady={ready}
-        initMessage="Welcome to Pyodide Terminal!"
-        prompt=">>> "
-        promptMore="... "
         language="python"
-        tabSize={4}
-        mutex={mutex}
-        sendCommand={runPython}
-        checkSyntax={checkSyntax}
-        interrupt={interrupt}
+        initMessage="Welcome to Pyodide Terminal!"
       />
       <EditorComponent
         language="python"

app/terminal/python/pyodide.tsx

@@ -9,19 +9,14 @@ import {
   useContext,
   useEffect,
 } from "react";
-import { SyntaxStatus, ReplOutput } from "../repl";
+import { SyntaxStatus, ReplOutput, ReplCommand } from "../repl";
 import { Mutex, MutexInterface } from "async-mutex";
 import { useEmbedContext } from "../embedContext";
+import { RuntimeContext } from "../runtime";
 
-interface IPyodideContext {
-  init: () => Promise<void>;
-  initializing: boolean;
-  ready: boolean;
-  mutex: MutexInterface;
+interface IPyodideContext extends RuntimeContext {
   runPython: (code: string) => Promise<ReplOutput[]>;
   runFile: (name: string) => Promise<ReplOutput[]>;
-  checkSyntax: (code: string) => Promise<SyntaxStatus>;
-  interrupt: () => void;
 }
 
 const PyodideContext = createContext<IPyodideContext>(null!);
@@ -191,6 +186,44 @@ export function PyodideProvider({ children }: { children: ReactNode }) {
     [ready]
   );
 
+  const runFiles = useCallback(
+    async (filenames: string[]): Promise<ReplOutput[]> => {
+      if (filenames.length !== 1) {
+        return [
+          {
+            type: "error",
+            message: "Python execution requires exactly one filename",
+          },
+        ];
+      }
+      return runFile(filenames[0]);
+    },
+    [runFile]
+  );
+
+  const splitContents = useCallback((content: string): ReplCommand[] => {
+    const initCommands: { command: string; output: ReplOutput[] }[] = [];
+    for (const line of content.split("\n")) {
+      if (line.startsWith(">>> ")) {
+        // Remove the prompt from the command
+        initCommands.push({ command: line.slice(4), output: [] });
+      } else if (line.startsWith("... ")) {
+        if (initCommands.length > 0) {
+          initCommands[initCommands.length - 1].command += "\n" + line.slice(4);
+        }
+      } else {
+        // Lines without prompt are output from the previous command
+        if (initCommands.length > 0) {
+          initCommands[initCommands.length - 1].output.push({
+            type: "stdout",
+            message: line,
+          });
+        }
+      }
+    }
+    return initCommands;
+  }, []);
+
   return (
     <PyodideContext.Provider
       value={{
@@ -201,7 +234,12 @@ export function PyodideProvider({ children }: { children: ReactNode }) {
         checkSyntax,
         mutex: mutex.current,
         runFile,
+        runFiles,
         interrupt,
+        splitContents,
+        prompt: ">>> ",
+        promptMore: "... ",
+        tabSize: 4,
       }}
     >
       {children}