switch文をterminal/以下に集約

Author: na-trium-144

app/[docs_id]/markdown.tsx

@@ -1,15 +1,15 @@
 import Markdown, { Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import SyntaxHighlighter from "react-syntax-highlighter";
-import { type AceLang, EditorComponent } from "../terminal/editor";
+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 { RuntimeLang } from "@/terminal/runtime";
+import { getRuntimeLang, RuntimeLang } from "@/terminal/runtime";
 import { ReplTerminal } from "@/terminal/repl";
 
 export function StyledMarkdown({ content }: { content: string }) {
@@ -95,19 +95,7 @@ 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;
-    }
+    const runtimeLang = getRuntimeLang(match[1]);
     if (match[2] === "-exec" && match[3]) {
       /*
       ```python-exec:main.py
@@ -150,29 +138,7 @@ function CodeComponent({
       }
     } 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

app/terminal/editor.tsx

@@ -29,6 +29,29 @@ import { langConstants } from "./runtime";
 
 // 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;

app/terminal/runtime.tsx

@@ -30,7 +30,24 @@ export interface LangConstants {
 }
 export type RuntimeLang = "python" | "cpp";
 
+export function getRuntimeLang(
+  lang: string | undefined
+): RuntimeLang | undefined {
+  // markdownで指定される可能性のある言語名からRuntimeLangを取得
+  switch (lang) {
+    case "python":
+    case "py":
+      return "python";
+    case "cpp":
+    case "c++":
+      return "cpp";
+    default:
+      console.warn(`Unsupported language for runtime: ${lang}`);
+      return undefined;
+  }
+}
 export function useRuntime(language: RuntimeLang): RuntimeContext {
+  // すべての言語のcontextをインスタンス化
   const pyodide = usePyodide();
   const wandboxCpp = useWandbox("cpp");