言語の定義をリファクタ、1箇所に統一

Author: na-trium-144

app/[lang]/[pageId]/markdown.tsx

@@ -5,12 +5,9 @@ import remarkCjkFriendly from "remark-cjk-friendly";
 import { EditorComponent } from "@/terminal/editor";
 import { ExecFile } from "@/terminal/exec";
 import { JSX, ReactNode } from "react";
-import { getAceLang, getRuntimeLang, MarkdownLang } from "@my-code/runtime/languages";
+import { langConstants, MarkdownLang } from "@my-code/runtime/languages";
 import { ReplTerminal } from "@/terminal/repl";
-import {
-  getSyntaxHighlighterLang,
-  StyledSyntaxHighlighter,
-} from "./styledSyntaxHighlighter";
+import { StyledSyntaxHighlighter } from "./styledSyntaxHighlighter";
 
 export function StyledMarkdown({ content }: { content: string }) {
   return (
@@ -92,7 +89,7 @@ function CodeComponent({
     className || ""
   );
   if (match) {
-    const runtimeLang = getRuntimeLang(match[1] as MarkdownLang | undefined);
+    const language = langConstants(match[1] as MarkdownLang | undefined);
     if (match[2] === "-exec" && match[3]) {
       /*
       ```python-exec:main.py
@@ -104,10 +101,10 @@ function CodeComponent({
         hello, world!
       ---------------------------
       */
-      if (runtimeLang) {
+      if (language.runtime) {
         return (
           <ExecFile
-            language={runtimeLang}
+            language={language}
             filenames={match[3].split(",")}
             content={String(props.children || "").replace(/\n$/, "")}
           />
@@ -120,39 +117,35 @@ function CodeComponent({
           `${match[1]}-repl without terminal id! content: ${String(props.children).slice(0, 20)}...`
         );
       }
-      if (runtimeLang) {
+      if (language.runtime) {
         return (
           <ReplTerminal
             terminalId={match[3]}
-            language={runtimeLang}
+            language={language}
             initContent={String(props.children || "").replace(/\n$/, "")}
           />
         );
       }
     } else if (match[3]) {
       // ファイル名指定がある場合、ファイルエディター
-      const aceLang = getAceLang(match[1] as MarkdownLang | undefined);
       return (
         <EditorComponent
-          language={aceLang}
+          language={language}
           filename={match[3]}
           readonly={match[2] === "-readonly"}
           initContent={String(props.children || "").replace(/\n$/, "")}
         />
       );
     }
-    const syntaxHighlighterLang = getSyntaxHighlighterLang(
-      match[1] as MarkdownLang | undefined
-    );
     return (
-      <StyledSyntaxHighlighter language={syntaxHighlighterLang}>
+      <StyledSyntaxHighlighter language={language}>
         {String(props.children || "").replace(/\n$/, "")}
       </StyledSyntaxHighlighter>
     );
   } else if (String(props.children).includes("\n")) {
     // 言語指定なしコードブロック
     return (
-      <StyledSyntaxHighlighter language={undefined}>
+      <StyledSyntaxHighlighter language={langConstants(undefined)}>
         {String(props.children || "").replace(/\n$/, "")}
       </StyledSyntaxHighlighter>
     );
@@ -170,4 +163,4 @@ export function InlineCode({ children }: { children: ReactNode }) {
       {children}
     </code>
   );
-}
+}

app/[lang]/[pageId]/styledSyntaxHighlighter.tsx

@@ -6,7 +6,7 @@ import {
   tomorrowNight,
 } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import { lazy, Suspense, useEffect, useState } from "react";
-import { MarkdownLang, SyntaxHighlighterLang } from "@my-code/runtime/languages";
+import { LangConstants } from "@my-code/runtime/languages";
 
 // SyntaxHighlighterはファイルサイズがでかいので & HydrationErrorを起こすので、SSRを無効化する
 const SyntaxHighlighter = lazy(() => {
@@ -17,59 +17,9 @@ const SyntaxHighlighter = lazy(() => {
   }
 });
 
-export function getSyntaxHighlighterLang(
-  lang: MarkdownLang | undefined
-): SyntaxHighlighterLang | undefined {
-  switch (lang) {
-    case "python":
-    case "py":
-      return "python";
-    case "ruby":
-    case "rb":
-      return "ruby";
-    case "cpp":
-    case "c++":
-      return "cpp";
-    case "rust":
-    case "rs":
-      return "rust";
-    case "javascript":
-    case "js":
-      return "javascript";
-    case "typescript":
-    case "ts":
-      return "typescript";
-    case "bash":
-    case "sh":
-      return "bash";
-    case "powershell":
-      return "powershell";
-    case "json":
-      return "json";
-    case "toml":
-      return "ini";
-    case "html":
-      return "html";
-    case "makefile":
-      return "makefile";
-    case "cmake":
-      return "cmake";
-    case "csv": // not supported
-    case "text":
-    case "txt":
-    case undefined:
-      return undefined;
-    default:
-      lang satisfies never;
-      console.error(
-        `getSyntaxHighlighterLang() does not handle language ${lang}`
-      );
-      return undefined;
-  }
-}
 export function StyledSyntaxHighlighter(props: {
   children: string;
-  language: SyntaxHighlighterLang | undefined;
+  language: LangConstants;
 }) {
   const theme = useChangeTheme();
   const codetheme = theme === "tomorrow" ? tomorrow : tomorrowNight;
@@ -80,7 +30,7 @@ export function StyledSyntaxHighlighter(props: {
   return initHighlighter ? (
     <Suspense fallback={<FallbackPre>{props.children}</FallbackPre>}>
       <SyntaxHighlighter
-        language={props.language}
+        language={props.language.rsh}
         PreTag="div"
         className="border-2 border-current/20 mx-2 my-2 rounded-box p-4! bg-base-300! text-base-content!"
         style={codetheme}

app/terminal/editor.tsx

@@ -4,7 +4,7 @@ import { lazy, Suspense, useEffect, useState } from "react";
 import clsx from "clsx";
 import { useChangeTheme } from "@/themeToggle";
 import { useEmbedContext } from "./embedContext";
-import { AceLang, langConstants } from "@my-code/runtime/languages";
+import { LangConstants } from "@my-code/runtime/languages";
 
 // https://github.com/securingsincity/react-ace/issues/27 により普通のimportができない
 const AceEditor = lazy(async () => {
@@ -32,7 +32,7 @@ const AceEditor = lazy(async () => {
 });
 
 interface EditorProps {
-  language?: AceLang;
+  language: LangConstants;
   filename: string;
   initContent: string;
   readonly?: boolean;
@@ -58,6 +58,15 @@ export function EditorComponent(props: EditorProps) {
   // 最小8行 or 初期内容+1行
   const editorHeight = Math.max(props.initContent.split("\n").length + 1, 8);
 
+  if (
+    process.env.NODE_ENV === "development" &&
+    props.language.ace === undefined
+  ) {
+    throw new Error(
+      `language ${props.language.originalLang} does not have ace mode defined!`
+    );
+  }
+
   return (
     <div className="border border-accent border-2 shadow-md m-2 rounded-box overflow-hidden">
       <div className="flex flex-row items-center bg-base-200">
@@ -108,9 +117,9 @@ export function EditorComponent(props: EditorProps) {
         >
           <AceEditor
             name={`ace-editor-${props.filename}`}
-            mode={props.language}
+            mode={props.language.ace ?? "text"}
             theme={theme}
-            tabSize={langConstants(props.language || "text").tabSize}
+            tabSize={props.language.tabSize ?? 4}
             width="100%"
             height={editorHeight * (fontSize + 1) + "px"}
             className="font-mono!" // Aceのデフォルトフォントを上書き

app/terminal/exec.tsx

@@ -11,7 +11,7 @@ import { writeOutput } from "./repl";
 import { useEffect, useState } from "react";
 import { useEmbedContext } from "./embedContext";
 import clsx from "clsx";
-import { RuntimeLang } from "@my-code/runtime/languages";
+import { LangConstants } from "@my-code/runtime/languages";
 import { useRuntime } from "@my-code/runtime/context";
 
 interface ExecProps {
@@ -20,7 +20,7 @@ interface ExecProps {
    * C++の場合はソースコード(.cpp)を全部指定する。
    */
   filenames: string[];
-  language: RuntimeLang;
+  language: LangConstants;
   content: string;
 }
 export function ExecFile(props: ExecProps) {
@@ -33,10 +33,16 @@ export function ExecFile(props: ExecProps) {
       }
     },
   });
-  const { files, clearExecResult, addExecOutput, writeFile } = useEmbedContext();
+  const { files, clearExecResult, addExecOutput, writeFile } =
+    useEmbedContext();
 
+  if (props.language.runtime === undefined) {
+    throw new Error(
+      `Language ${props.language.originalLang} does not have a runtime environment.`
+    );
+  }
   const { ready, runFiles, getCommandlineStr, runtimeInfo, interrupt } =
-    useRuntime(props.language);
+    useRuntime(props.language.runtime);
 
   // ユーザーがクリックした時(triggered) && ランタイムが準備できた時に、実際にinitCommandを実行する(executing)
   const [executionState, setExecutionState] = useState<
@@ -135,7 +141,7 @@ export function ExecFile(props: ExecProps) {
           <div className="tooltip-content bg-secondary/60 backdrop-blur-xs">
             ブラウザ上で動作する
             <span className="mx-0.5">
-              {runtimeInfo?.prettyLangName || props.language}
+              {runtimeInfo?.prettyLangName || props.language.runtime}
             </span>
             {runtimeInfo?.version && (
               <span className="mr-0.5">{runtimeInfo?.version}</span>

app/terminal/highlight.ts

@@ -1,6 +1,6 @@
 import chalk from "chalk";
 chalk.level = 3;
-import { RuntimeLang } from "@my-code/runtime/languages";
+import { LangConstants } from "@my-code/runtime/languages";
 
 export async function importPrism() {
   if (typeof window !== "undefined") {
@@ -15,28 +15,6 @@ export async function importPrism() {
   }
 }
 
-type PrismLang = "python" | "ruby" | "javascript";
-
-function getPrismLanguage(language: RuntimeLang): PrismLang {
-  switch (language) {
-    case "python":
-      return "python";
-    case "ruby":
-      return "ruby";
-    case "javascript":
-      return "javascript";
-    case "cpp":
-    case "typescript":
-    case "rust":
-      throw new Error(
-        `highlight for ${language} is disabled because it should not support REPL`
-      );
-    default:
-      language satisfies never;
-      throw new Error(`Prism language not implemented for: ${language}`);
-  }
-}
-
 const nothing = (text: string): string => text;
 
 // PrismのトークンクラスとANSIコードをマッピング
@@ -87,13 +65,19 @@ const prismToAnsi: Record<string, (text: string) => string> = {
 export function highlightCodeToAnsi(
   Prism: typeof import("prismjs"),
   code: string,
-  language: RuntimeLang
+  language: LangConstants
 ): string {
+  if (!language.prism) {
+    console.error(
+      `Language ${language.originalLang} does not have a Prism definition.`
+    );
+    return code;
+  }
   // Prismでハイライト処理を行い、HTML文字列を取得
   const highlightedHtml = Prism.highlight(
     code,
-    Prism.languages[getPrismLanguage(language)],
-    getPrismLanguage(language)
+    Prism.languages[language.prism],
+    language.prism
   );
 
   // 一時的なDOM要素を作成してパース
@@ -141,4 +125,3 @@ export function highlightCodeToAnsi(
     ""
   );
 }
-

app/terminal/page.tsx

@@ -5,8 +5,7 @@ import "mocha/mocha.css";
 import { Fragment, useEffect, useRef, useState } from "react";
 import { useWandbox } from "@my-code/runtime/wandbox/runtime";
 import { RuntimeContext } from "@my-code/runtime/interface";
-import { getAceLang, RuntimeLang } from "@my-code/runtime/languages";
-import { useEmbedContext } from "./embedContext";
+import { langConstants, RuntimeLang } from "@my-code/runtime/languages";
 import { defineTests } from "@my-code/runtime/tests";
 import { usePyodide } from "@my-code/runtime/worker/pyodide";
 import { useRuby } from "@my-code/runtime/worker/ruby";
@@ -130,26 +129,26 @@ function RuntimeSample({
       {config.repl && (
         <ReplTerminal
           terminalId="1"
-          language={lang}
+          language={langConstants(lang)}
           initContent={config.replInitContent}
         />
       )}
       {config.editor &&
         Object.entries(config.editor).map(([filename, initContent]) => (
           <EditorComponent
             key={filename}
-            language={getAceLang(lang)}
+            language={langConstants(lang)}
             filename={filename}
             initContent={initContent}
           />
         ))}
       {config.exec && (
-        <ExecFile filenames={config.exec} language={lang} content="" />
+        <ExecFile filenames={config.exec} language={langConstants(lang)} content="" />
       )}
       {config.readonlyFiles?.map((filename) => (
         <EditorComponent
           key={filename}
-          language={getAceLang(lang)}
+          language={langConstants(lang)}
           filename={filename}
           initContent=""
           readonly