wandbox周りなどリファクタ

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 { ExecFile } from "../terminal/exec";
 import { useChangeTheme } from "./themeToggle";
 import {
   tomorrow,
   atomOneDark,
 } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import { ReactNode } from "react";
+import { RuntimeLang } from "@/terminal/runtime";
+import { ReplTerminal } from "@/terminal/repl";
 
 export function StyledMarkdown({ content }: { content: string }) {
   return (
@@ -94,6 +95,19 @@ function CodeComponent({
     className || ""
   );
   if (match) {
+    let runtimeLang: RuntimeLang | undefined = undefined;
+    switch (match[1]) {
+      case "python":
+        runtimeLang = "python";
+        break;
+      case "cpp":
+      case "c++":
+        runtimeLang = "cpp";
+        break;
+      default:
+        console.warn(`Unsupported language for runtime: ${match[1]}`);
+        break;
+    }
     if (match[2] === "-exec" && match[3]) {
       /*
       ```python-exec:main.py
@@ -105,24 +119,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,25 +132,21 @@ 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]) {
       // ファイル名指定がある場合、ファイルエディター
@@ -180,7 +177,6 @@ function CodeComponent({
         <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

@@ -1,19 +1,17 @@
 # my.code(); Runtime API
 
-## runtime.ts
+## runtime.tsx
 
 各言語のランタイムはRuntimeContextインターフェースの実装を返すフックを実装する必要があります。
 
-runtime.ts の `useRuntime(lang)` は各言語のフックを呼び出し、その中で指定された言語のランタイムを返します。
+runtime.tsx の `useRuntime(lang)` は各言語のフックを呼び出し、その中で指定された言語のランタイムを返します。
 
 関数はすべてuseCallbackやuseMemoなどを用いレンダリングごとに同じインスタンスを返すように実装してください。
 
 ### 共通
 
 * ready: `boolean`
     * ランタイムの初期化が完了したか、不要である場合true
-* tabSize: `number`
-    * REPLおよびコードエディターののタブ幅を指定します。
 * mutex?: `MutexInterface`
     * ランタイムに排他制御が必要な場合、MutexInterfaceのインスタンスを返してください。
 * interrupt?: `() => Promise<void>`
@@ -48,10 +46,6 @@ runtime.ts の `useRuntime(lang)` は各言語のフックを呼び出し、そ
     ]
     ```
     が返されるようにします。
-* prompt?: `string`
-    * REPLの1行目のプロンプト文字列を指定します。
-* promptMore?: `string`
-    * REPLの2行目以降のプロンプト文字列を指定します。
 
 ### ファイル実行用
 
@@ -61,6 +55,17 @@ runtime.ts の `useRuntime(lang)` は各言語のフックを呼び出し、そ
 * getCommandlineStr: `(filenames: string[]) => string`
     * 指定されたファイルを実行するためのコマンドライン引数文字列を返します。表示用です。
 
+### LangConstant
+
+言語ごとに固定の定数です。
+
+* tabSize: `number`
+    * REPLおよびコードエディターののタブ幅を指定します。1以上
+* prompt?: `string`
+    * REPLの1行目のプロンプト文字列を指定します。
+* promptMore?: `string`
+    * REPLの2行目以降のプロンプト文字列を指定します。省略時はpromptが使われます
+
 ## embedContext.tsx
 
 Replの実行結果(`replOutputs`)、ユーザーが編集したファイル(`files`)、ファイルの実行結果(`execResults`)の情報を保持します。
@@ -113,6 +118,14 @@ EditorComponent コンポーネントを提供します。
 
 ### Pyodide (Python)
 
-Pyodide を web worker で動かしています。
-ランタイムの初期化に時間がかかるため、バックグラウンドで初期化を行います。
+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,14 @@ 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";
 
 interface EditorProps {
   language?: AceLang;
-  tabSize: number;
   filename: string;
   initContent: string;
   readonly?: boolean;
@@ -88,7 +88,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"

app/terminal/python/page.tsx

@@ -14,7 +14,6 @@ export default function PythonPage() {
       />
       <EditorComponent
         language="python"
-        tabSize={4}
         filename="main.py"
         initContent="print('hello, world!')"
       />

app/terminal/python/pyodide.tsx app/terminal/python/runtime.tsxapp/terminal/python/pyodide.tsx renamed to app/terminal/python/runtime.tsx

@@ -208,6 +208,11 @@ export function PyodideProvider({ children }: { children: ReactNode }) {
     return initCommands;
   }, []);
 
+  const getCommandlineStr = useCallback(
+    (filenames: string[]) => `python ${filenames[0]}`,
+    []
+  );
+
   return (
     <PyodideContext.Provider
       value={{
@@ -218,10 +223,7 @@ export function PyodideProvider({ children }: { children: ReactNode }) {
         runFiles,
         interrupt,
         splitReplExamples,
-        prompt: ">>> ",
-        promptMore: "... ",
-        tabSize: 4,
-        getCommandlineStr: (filenames: string[]) => `python ${filenames[0]}`,
+        getCommandlineStr,
       }}
     >
       {children}

app/terminal/repl.tsx

@@ -13,7 +13,7 @@ import {
 } from "./terminal";
 import { Terminal } from "@xterm/xterm";
 import { useEmbedContext } from "./embedContext";
-import { emptyMutex, RuntimeLang, useRuntime } from "./runtime";
+import { emptyMutex, langConstants, RuntimeLang, useRuntime } from "./runtime";
 
 export interface ReplOutput {
   type: "stdout" | "stderr" | "error" | "return" | "trace" | "system"; // 出力の種類
@@ -71,15 +71,16 @@ export function ReplTerminal({
 
   const {
     ready: runtimeReady,
-    tabSize,
     mutex: runtimeMutex = emptyMutex,
     interrupt: runtimeInterrupt,
     runCommand,
     checkSyntax,
     splitReplExamples,
-    prompt = "> ",
-    promptMore = prompt,
   } = useRuntime(language);
+  const { tabSize, prompt, promptMore } = langConstants(language);
+  if (!prompt) {
+    console.warn(`prompt not defined for language: ${language}`);
+  }
 
   if (!runCommand) {
     throw new Error(`runCommand not available for language: ${language}`);
@@ -136,7 +137,7 @@ export function ReplTerminal({
         inputBuffer.current = newBuffer();
         for (let i = 0; i < inputBuffer.current.length; i++) {
           terminalInstanceRef.current.write(
-            i === 0 ? prompt : promptMore || prompt
+            (i === 0 ? prompt : (promptMore ?? prompt)) ?? "> "
           );
           if (language) {
             terminalInstanceRef.current.write(