Merge pull request #82 from ut-code/copilot/refactor-runtime-context-structure

Refactor terminal runtime contexts with unified RuntimeContext interface

Author: na-trium-144

app/[docs_id]/markdown.tsx

@@ -1,15 +1,16 @@
 import Markdown, { Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import SyntaxHighlighter from "react-syntax-highlighter";
-import { PythonEmbeddedTerminal } from "../terminal/python/embedded";
-import { type AceLang, EditorComponent } from "../terminal/editor";
-import { ExecFile, ExecLang } from "../terminal/exec";
+import { type AceLang, EditorComponent, getAceLang } from "../terminal/editor";
+import { ExecFile } from "../terminal/exec";
 import { useChangeTheme } from "./themeToggle";
 import {
   tomorrow,
   atomOneDark,
 } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import { ReactNode } from "react";
+import { getRuntimeLang, RuntimeLang } from "@/terminal/runtime";
+import { ReplTerminal } from "@/terminal/repl";
 
 export function StyledMarkdown({ content }: { content: string }) {
   return (
@@ -94,6 +95,7 @@ function CodeComponent({
     className || ""
   );
   if (match) {
+    const runtimeLang = getRuntimeLang(match[1]);
     if (match[2] === "-exec" && match[3]) {
       /*
       ```python-exec:main.py
@@ -105,24 +107,11 @@ function CodeComponent({
         hello, world!
       ---------------------------
       */
-      let execLang: ExecLang | undefined = undefined;
-      switch (match[1]) {
-        case "python":
-          execLang = "python";
-          break;
-        case "cpp":
-        case "c++":
-          execLang = "cpp";
-          break;
-        default:
-          console.warn(`Unsupported language for exec: ${match[1]}`);
-          break;
-      }
-      if (execLang) {
+      if (runtimeLang) {
         return (
           <div className="border border-primary border-2 shadow-md m-2 rounded-lg">
             <ExecFile
-              language={execLang}
+              language={runtimeLang}
               filenames={match[3].split(",")}
               content={String(props.children || "").replace(/\n$/, "")}
             />
@@ -131,56 +120,29 @@ function CodeComponent({
       }
     } else if (match[2] === "-repl") {
       // repl付きの言語指定
-      // 現状はPythonのみ対応
       if (!match[3]) {
         console.warn(
           `${match[1]}-repl without terminal id! content: ${String(props.children).slice(0, 20)}...`
         );
       }
-      switch (match[1]) {
-        case "python":
-          return (
-            <div className="bg-base-300 border border-primary border-2 shadow-md m-2 p-4 pr-1 rounded-lg">
-              <PythonEmbeddedTerminal
-                terminalId={match[3]}
-                content={String(props.children || "").replace(/\n$/, "")}
-              />
-            </div>
-          );
-        default:
-          console.warn(`Unsupported language for repl: ${match[1]}`);
-          break;
+      if (runtimeLang) {
+        return (
+          <div className="bg-base-300 border border-primary border-2 shadow-md m-2 p-4 pr-1 rounded-lg">
+            <ReplTerminal
+              terminalId={match[3]}
+              language={runtimeLang}
+              initContent={String(props.children || "").replace(/\n$/, "")}
+            />
+          </div>
+        );
       }
     } else if (match[3]) {
       // ファイル名指定がある場合、ファイルエディター
-      let aceLang: AceLang | undefined = undefined;
-      switch (match[1]) {
-        case "python":
-          aceLang = "python";
-          break;
-        case "cpp":
-        case "c++":
-          aceLang = "c_cpp";
-          break;
-        case "json":
-          aceLang = "json";
-          break;
-        case "csv":
-          aceLang = "csv";
-          break;
-        case "text":
-        case "txt":
-          aceLang = "text";
-          break;
-        default:
-          console.warn(`Unsupported language for editor: ${match[1]}`);
-          break;
-      }
+      const aceLang = getAceLang(match[1]);
       return (
         <div className="border border-primary border-2 shadow-md m-2 rounded-lg">
           <EditorComponent
             language={aceLang}
-            tabSize={4}
             filename={match[3]}
             readonly={match[2] === "-readonly"}
             initContent={String(props.children || "").replace(/\n$/, "")}

app/layout.tsx

@@ -5,11 +5,10 @@ import "./globals.css";
 import { Navbar } from "./navbar";
 import { Sidebar } from "./sidebar";
 import { ReactNode } from "react";
-import { PyodideProvider } from "./terminal/python/pyodide";
-import { WandboxProvider } from "./terminal/wandbox/wandbox";
 import { EmbedContextProvider } from "./terminal/embedContext";
 import { AutoAnonymousLogin } from "./accountMenu";
 import { SidebarMdProvider } from "./[docs_id]/dynamicMdContext";
+import { RuntimeProvider } from "./terminal/runtime";
 
 export const metadata: Metadata = {
   title: "Create Next App",
@@ -25,13 +24,15 @@ export default function RootLayout({
         <AutoAnonymousLogin />
         <SidebarMdProvider>
           <div className="drawer lg:drawer-open">
-            <input id="drawer-toggle" type="checkbox" className="drawer-toggle" />
+            <input
+              id="drawer-toggle"
+              type="checkbox"
+              className="drawer-toggle"
+            />
             <div className="drawer-content flex flex-col">
               <Navbar />
               <EmbedContextProvider>
-                <PyodideProvider>
-                  <WandboxProvider>{children}</WandboxProvider>
-                </PyodideProvider>
+                <RuntimeProvider>{children}</RuntimeProvider>
               </EmbedContextProvider>
             </div>
             <div className="drawer-side shadow-md z-50">

app/terminal/README.md

@@ -0,0 +1,131 @@
+# my.code(); Runtime API
+
+## runtime.tsx
+
+各言語のランタイムはRuntimeContextインターフェースの実装を返すフックを実装する必要があります。
+
+runtime.tsx の `useRuntime(lang)` は各言語のフックを呼び出し、その中で指定された言語のランタイムを返します。
+
+関数はすべてuseCallbackやuseMemoなどを用いレンダリングごとに同じインスタンスを返すように実装してください。
+
+### 共通
+
+* ready: `boolean`
+    * ランタイムの初期化が完了したか、不要である場合true
+* mutex?: `MutexInterface`
+    * ランタイムに排他制御が必要な場合、MutexInterfaceのインスタンスを返してください。
+* interrupt?: `() => Promise<void>`
+    * 実行中のコマンドを中断します。呼び出し側でmutexのロックはされません
+
+### REPL用
+
+* runCommand?: `(command: string) => Promise<ReplOutput[]>`
+    * コマンドを実行します。実行結果をReplOutputの配列で返します。
+    * runCommandを呼び出す際には呼び出し側 (主に repl.tsx) でmutexをロックします。複数のコマンドを連続実行したい場合があるからです。
+* checkSyntax?: `(code: string) => Promise<SyntaxStatus>`
+    * コードの構文チェックを行います。行がコマンドとして完結していれば`complete`、次の行に続く場合(if文の条件式の途中など)は`incomplete`を返してください。
+    * REPLでEnterを押した際の動作に影響します。
+    * 呼び出し側でmutexのロックはされません
+* splitReplExamples?: `(code: string) => ReplCommands[]`
+    * markdown内に記述されているREPLのサンプルコードをパースします。例えば
+    ```
+    >>> if True:
+    ...     print("Hello")
+    Hello
+    ```
+    をsplitReplExamplesに通すと
+    ```ts
+    [
+      {
+        command: 'if True:\n    print("Hello")',
+        output: {
+          type: 'output',
+          content: 'Hello'
+        }
+      }
+    ]
+    ```
+    が返されるようにします。
+
+### ファイル実行用
+
+* runFiles: `(filenames: string[]) => Promise<ReplOutput[]>`
+    * 指定されたファイルを実行します。ファイルの中身はEmbedContextから取得されます。
+    * 呼び出し側でmutexのロックはされません
+* getCommandlineStr: `(filenames: string[]) => string`
+    * 指定されたファイルを実行するためのコマンドライン引数文字列を返します。表示用です。
+
+### LangConstant
+
+言語ごとに固定の定数です。
+
+* tabSize: `number`
+    * REPLおよびコードエディターののタブ幅を指定します。1以上
+* prompt?: `string`
+    * REPLの1行目のプロンプト文字列を指定します。
+* promptMore?: `string`
+    * REPLの2行目以降のプロンプト文字列を指定します。省略時はpromptが使われます
+
+## embedContext.tsx
+
+Replの実行結果(`replOutputs`)、ユーザーが編集したファイル(`files`)、ファイルの実行結果(`execResults`)の情報を保持します。
+
+## terminal.tsx
+
+xterm.jsを制御する useTerminal() フックを提供します。
+リサイズやテーマ切り替えなどの処理を行います。
+
+引数:
+* getRows?: `(cols: number) => number`
+    * ターミナルの幅がcolsの場合の高さの最小値を指定します。
+    * 未指定または5未満の場合5になります。
+    * 内部でuseRefを使用しターミナル初期化完了の瞬間のgetRows関数インスタンスが呼び出されるので、一時オブジェクトでも大丈夫
+* onReady?: `() => void`
+    * ターミナルが初期化された際に呼び出されます。
+    * 内部でuseRefを使用しターミナル初期化完了の瞬間のonReady関数インスタンスが呼び出されるので、一時オブジェクトでも大丈夫
+
+返り値:
+* terminalRef: `RefObject<HTMLDivElement>`
+    * ターミナルを描画するためのdiv要素にこのrefを渡してください。
+* terminalInstanceRef: `RefObject<Terminal | null>`
+    * xterm.jsのTerminalインスタンスへのrefです。
+* termReady: `boolean`
+    * ターミナルが初期化されたかどうかを示します。
+
+## repl.tsx
+
+ReplTerminal コンポーネントを提供します。
+useRuntimeとuseTerminalを呼び出し、REPLの入出力、キーハンドリング処理を行います。
+
+また、実行したコマンド結果はEmbedContextに送信されます。
+
+シンタックスハイライトはprism.jsでパースしたものを独自処理で色付けしています。(highlight.ts 内の highlightCodeToAnsi 関数)
+パース処理の実装は不要ですがhighlight.tsに言語定義のインポートとswitch文分岐の追加が必要です。
+
+## editor.tsx
+
+EditorComponent コンポーネントを提供します。
+
+ファイルの内容はEmbedContextと同期されます。
+
+## exec.tsx
+
+実行ボタンと結果を表示する ExecFile コンポーネントを提供します。
+
+実行結果はEmbedContextに送信されます。
+
+## 各言語の実装
+
+### Pyodide (Python)
+
+Pyodide を web worker で動かしています。worker側のスクリプトは /public/python.worker.js にあります。
+
+### Wandbox (C++)
+
+wandbox.org のAPIを利用してC++コードを実行しています。C++以外にもいろいろな言語に対応しています。
+
+APIから利用可能なコンパイラとオプションのリストが得られるので、言語ごとにそこからオプションを選択するロジックを実装しています。
+
+C++ではg++の中でheadでない最新のものを選択し、warningスイッチオン、boost有効、std=最新を指定しています。
+また、コード実行時にシグナルハンドラーをユーザーのコードに挿入し、エラー時にスタックトレースを表示する処理とそれをjs側でパースする処理を実装しています。
+

app/terminal/editor.tsx

@@ -24,14 +24,37 @@ import { useEffect } from "react";
 import clsx from "clsx";
 import { useChangeTheme } from "../[docs_id]/themeToggle";
 import { useEmbedContext } from "./embedContext";
+import { langConstants } from "./runtime";
 // snippetを有効化するにはsnippetもimportする必要がある: import "ace-builds/src-min-noconflict/snippets/python";
 
 // mode-xxxx.js のファイル名と、AceEditorの mode プロパティの値が対応する
 export type AceLang = "python" | "c_cpp" | "json" | "csv" | "text";
+export function getAceLang(lang: string | undefined): AceLang {
+  // Markdownで指定される可能性のある言語名からAceLangを取得
+  switch (lang) {
+    case "python":
+    case "py":
+      return "python";
+    case "cpp":
+    case "c++":
+      return "c_cpp";
+    case "json":
+      return "json";
+    case "csv":
+      return "csv";
+    case "text":
+    case "txt":
+      return "text";
+    default:
+      console.warn(
+        `Unsupported language for ace editor: ${lang}, fallback to text mode.`
+      );
+      return "text";
+  }
+}
 
 interface EditorProps {
   language?: AceLang;
-  tabSize: number;
   filename: string;
   initContent: string;
   readonly?: boolean;
@@ -88,7 +111,7 @@ export function EditorComponent(props: EditorProps) {
         name={`ace-editor-${props.filename}`}
         mode={props.language}
         theme={theme}
-        tabSize={props.tabSize}
+        tabSize={langConstants(props.language || "text").tabSize}
         width="100%"
         height={
           Math.max((props.initContent.split("\n").length + 2) * 14, 128) + "px"