terminalコンポーネントはapp/に戻してみる

Author: na-trium-144

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

@@ -8,7 +8,7 @@ import { useState, FormEvent, useEffect } from "react";
 // } from "../actions/questionExample";
 // import { getLanguageName } from "../pagesList";
 import { DynamicMarkdownSection } from "./pageContent";
-import { useEmbedContext } from "@my-code/runtime/embedContext";
+import { useEmbedContext } from "@/terminal/embedContext";
 import { useChatHistoryContext } from "./chatHistory";
 import { askAI } from "@/actions/chatActions";
 

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

@@ -2,14 +2,13 @@ import Markdown, { Components, ExtraProps } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import removeComments from "remark-remove-comments";
 import remarkCjkFriendly from "remark-cjk-friendly";
-import { EditorComponent, getAceLang } from "@my-code/runtime/editor";
-import { ExecFile } from "@my-code/runtime/exec";
+import { EditorComponent } from "@/terminal/editor";
+import { ExecFile } from "@/terminal/exec";
 import { JSX, ReactNode } from "react";
-import { getRuntimeLang } from "@my-code/runtime/languages";
-import { ReplTerminal } from "@my-code/runtime/repl";
+import { getAceLang, getRuntimeLang, MarkdownLang } from "@my-code/runtime/languages";
+import { ReplTerminal } from "@/terminal/repl";
 import {
   getSyntaxHighlighterLang,
-  MarkdownLang,
   StyledSyntaxHighlighter,
 } from "./styledSyntaxHighlighter";
 

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

@@ -6,6 +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";
 
 // SyntaxHighlighterはファイルサイズがでかいので & HydrationErrorを起こすので、SSRを無効化する
 const SyntaxHighlighter = lazy(() => {
@@ -16,49 +17,6 @@ const SyntaxHighlighter = lazy(() => {
   }
 });
 
-// Markdownで指定される可能性のある言語名を列挙
-export type MarkdownLang =
-  | "python"
-  | "py"
-  | "ruby"
-  | "rb"
-  | "cpp"
-  | "c++"
-  | "rust"
-  | "rs"
-  | "javascript"
-  | "js"
-  | "typescript"
-  | "ts"
-  | "bash"
-  | "sh"
-  | "powershell"
-  | "json"
-  | "toml"
-  | "csv"
-  | "html"
-  | "makefile"
-  | "cmake"
-  | "text"
-  | "txt";
-
-// react-syntax-highliter (hljs版) が対応している言語
-// https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_LANGUAGES_HLJS.MD を参照
-export type SyntaxHighlighterLang =
-  | "python"
-  | "ruby"
-  | "c"
-  | "cpp"
-  | "rust"
-  | "javascript"
-  | "typescript"
-  | "bash"
-  | "powershell"
-  | "html"
-  | "json"
-  | "ini"
-  | "makefile"
-  | "cmake";
 export function getSyntaxHighlighterLang(
   lang: MarkdownLang | undefined
 ): SyntaxHighlighterLang | undefined {

app/actions/chatActions.ts

@@ -3,7 +3,7 @@
 // import { z } from "zod";
 import { generateContent } from "./gemini";
 import { DynamicMarkdownSection } from "../[lang]/[pageId]/pageContent";
-import { ReplCommand, ReplOutput } from "@my-code/runtime/repl";
+import { ReplCommand, ReplOutput } from "@my-code/runtime/interface";
 import { addChat, ChatWithMessages } from "@/lib/chatHistory";
 
 type ChatResult =

app/layout.tsx

@@ -8,7 +8,7 @@ import "./globals.css";
 import { Navbar } from "./navbar";
 import { Sidebar } from "./sidebar";
 import { ReactNode } from "react";
-import { EmbedContextProvider } from "@my-code/runtime/embedContext";
+import { EmbedContextProvider } from "@/terminal/embedContext";
 import { AutoAnonymousLogin } from "./accountMenu";
 import { SidebarMdProvider } from "./sidebar";
 import { RuntimeProvider } from "@my-code/runtime/context";

app/sidebar.tsx

@@ -14,7 +14,7 @@ import {
 } from "react";
 import { DynamicMarkdownSection } from "./[lang]/[pageId]/pageContent";
 import clsx from "clsx";
-import { LanguageIcon } from "@my-code/runtime/icons";
+import { LanguageIcon } from "@/terminal/icons";
 import { RuntimeLang } from "@my-code/runtime/languages";
 
 export interface ISidebarMdContext {

packages/runtime/src/editor.tsx app/terminal/editor.tsxpackages/runtime/src/editor.tsx renamed to app/terminal/editor.tsx

@@ -4,8 +4,7 @@ import { lazy, Suspense, useEffect, useState } from "react";
 import clsx from "clsx";
 import { useChangeTheme } from "@/themeToggle";
 import { useEmbedContext } from "./embedContext";
-import { langConstants } from "./languages";
-import { MarkdownLang } from "@/[lang]/[pageId]/styledSyntaxHighlighter";
+import { AceLang, langConstants } from "@my-code/runtime/languages";
 
 // https://github.com/securingsincity/react-ace/issues/27 により普通のimportができない
 const AceEditor = lazy(async () => {
@@ -32,61 +31,6 @@ const AceEditor = lazy(async () => {
   }
 });
 
-// mode-xxxx.js のファイル名と、AceEditorの mode プロパティの値が対応する
-export type AceLang =
-  | "python"
-  | "ruby"
-  | "c_cpp"
-  | "rust"
-  | "javascript"
-  | "typescript"
-  | "json"
-  | "csv"
-  | "text";
-export function getAceLang(lang: MarkdownLang | undefined): AceLang {
-  // Markdownで指定される可能性のある言語名からAceLangを取得
-  switch (lang) {
-    case "python":
-    case "py":
-      return "python";
-    case "ruby":
-    case "rb":
-      return "ruby";
-    case "cpp":
-    case "c++":
-      return "c_cpp";
-    case "rust":
-    case "rs":
-      return "rust";
-    case "javascript":
-    case "js":
-      return "javascript";
-    case "typescript":
-    case "ts":
-      return "typescript";
-    case "json":
-      return "json";
-    case "csv":
-      return "csv";
-    case "sh":
-    case "bash":
-    case "powershell":
-    case "text":
-    case "txt":
-    case "html":
-    case "toml":
-    case "makefile":
-    case "cmake":
-    case undefined:
-      console.warn(`Ace editor mode not implemented for language: ${lang}`);
-      return "text";
-    default:
-      lang satisfies never;
-      console.error(`getAceLang() does not handle language ${lang}`);
-      return "text";
-  }
-}
-
 interface EditorProps {
   language?: AceLang;
   filename: string;

packages/runtime/src/embedContext.tsx app/terminal/embedContext.tsxpackages/runtime/src/embedContext.tsx renamed to app/terminal/embedContext.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { ReplCommand, ReplOutput } from "@my-code/runtime/interface";
 import { usePathname } from "next/navigation";
 import {
   createContext,
@@ -9,7 +10,6 @@ import {
   useEffect,
   useState,
 } from "react";
-import { ReplCommand, ReplOutput } from "./repl";
 
 /*
 ファイルの内容や埋め込みターミナルのログを1箇所でまとめて管理し、書き込み・読み込みできるようにする

packages/runtime/src/exec.tsx app/terminal/exec.tsxpackages/runtime/src/exec.tsx renamed to app/terminal/exec.tsx

@@ -10,9 +10,9 @@ import {
 import { writeOutput } from "./repl";
 import { useEffect, useState } from "react";
 import { useEmbedContext } from "./embedContext";
-import { RuntimeLang } from "./languages";
 import clsx from "clsx";
-import { useRuntime } from "./context";
+import { RuntimeLang } from "@my-code/runtime/languages";
+import { useRuntime } from "@my-code/runtime/context";
 
 interface ExecProps {
   /*

packages/runtime/src/highlight.ts app/terminal/highlight.tspackages/runtime/src/highlight.ts renamed to app/terminal/highlight.ts

@@ -1,6 +1,6 @@
 import chalk from "chalk";
 chalk.level = 3;
-import { RuntimeLang } from "./languages";
+import { RuntimeLang } from "@my-code/runtime/languages";
 
 export async function importPrism() {
   if (typeof window !== "undefined") {