TypeScript実行環境を追加

* `@typescript/vfs` で型チェック&トランスパイル
* typescriptで生成されたjsファイルをjsEvalのコンテキストに渡すため、writeFile()とrunFiles()の動作を変更しています
  * writeFile() が更新後の全ファイルをpromiseで返し、 runFiles() はcontextからファイルを取得する代わりに引数で受け取る
  * (runFiles() の呼び出し側は常にfilesをContextから取ってきて引数に渡さないといけなくなる)

Author: na-trium-144

.gitignore

@@ -42,3 +42,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+
+/public/typescript/

app/terminal/README.md

@@ -51,8 +51,9 @@ runtime.tsx の `useRuntime(lang)` は各言語のフックを呼び出し、そ
 
 ### ファイル実行用
 
-* runFiles: `(filenames: string[]) => Promise<ReplOutput[]>`
-    * 指定されたファイルを実行します。ファイルの中身はEmbedContextから取得されます。
+* runFiles: `(filenames: string[], files: Record<string, string>) => Promise<ReplOutput[]>`
+    * 指定されたファイルを実行します。
+    * EmbedContextから取得したfilesを呼び出し側で引数に渡します
     * 呼び出し側でmutexのロックはせず、必要であればrunFiles()内でロックします。
 * getCommandlineStr: `(filenames: string[]) => string`
     * 指定されたファイルを実行するためのコマンドライン引数文字列を返します。表示用です。

app/terminal/editor.tsx

@@ -73,7 +73,7 @@ export function EditorComponent(props: EditorProps) {
   const code = files[props.filename] || props.initContent;
   useEffect(() => {
     if (!files[props.filename]) {
-      writeFile(props.filename, props.initContent);
+      writeFile({ [props.filename]: props.initContent });
     }
   }, [files, props.filename, props.initContent, writeFile]);
 
@@ -92,7 +92,7 @@ export function EditorComponent(props: EditorProps) {
             // codeの内容が変更された場合のみ表示する
             (props.readonly || code == props.initContent) && "invisible"
           )}
-          onClick={() => writeFile(props.filename, props.initContent)}
+          onClick={() => writeFile({ [props.filename]: props.initContent })}
         >
           {/*<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->*/}
           <svg
@@ -131,7 +131,7 @@ export function EditorComponent(props: EditorProps) {
         enableLiveAutocompletion={true}
         enableSnippets={false}
         value={code}
-        onChange={(code: string) => writeFile(props.filename, code)}
+        onChange={(code: string) => writeFile({ [props.filename]: code })}
       />
     </div>
   );

app/terminal/embedContext.tsx

@@ -25,7 +25,11 @@ type TerminalId = string;
 
 interface IEmbedContext {
   files: Record<Filename, string>;
-  writeFile: (name: Filename, content: string) => void;
+  // ファイルを書き込む。更新後のページ内の全ファイル内容を返す
+  // 返り値を使うことで再レンダリングを待たずに最新の内容を取得できる
+  writeFile: (
+    updatedFiles: Record<Filename, string>
+  ) => Promise<Record<Filename, string>>;
 
   replOutputs: Record<TerminalId, ReplCommand[]>;
   addReplOutput: (
@@ -72,16 +76,26 @@ export function EmbedContextProvider({ children }: { children: ReactNode }) {
   }, [pathname, currentPathname]);
 
   const writeFile = useCallback(
-    (name: Filename, content: string) => {
-      setFiles((files) => {
-        if (files[pathname]?.[name] !== content) {
-          files = { ...files };
-          files[pathname] = { ...(files[pathname] ?? {}) };
-          files[pathname][name] = content;
-          return files;
-        } else {
-          return files;
-        }
+    (updatedFiles: Record<Filename, string>) => {
+      return new Promise<Record<Filename, string>>((resolve) => {
+        setFiles((files) => {
+          let changed = false;
+          const newFiles = { ...files };
+          newFiles[pathname] = { ...(newFiles[pathname] ?? {}) };
+          for (const [name, content] of Object.entries(updatedFiles)) {
+            if (newFiles[pathname][name] !== content) {
+              changed = true;
+              newFiles[pathname][name] = content;
+            }
+          }
+          if (changed) {
+            resolve(newFiles[pathname]);
+            return newFiles;
+          } else {
+            resolve(files[pathname] || {});
+            return files;
+          }
+        });
       });
     },
     [pathname]

app/terminal/exec.tsx

@@ -31,7 +31,7 @@ export function ExecFile(props: ExecProps) {
       }
     },
   });
-  const { setExecResult } = useEmbedContext();
+  const { files, setExecResult } = useEmbedContext();
 
   const { ready, runFiles, getCommandlineStr } = useRuntime(props.language);
 
@@ -45,7 +45,7 @@ export function ExecFile(props: ExecProps) {
       (async () => {
         clearTerminal(terminalInstanceRef.current!);
         terminalInstanceRef.current!.write(systemMessageColor("実行中です..."));
-        const outputs = await runFiles(props.filenames);
+        const outputs = await runFiles(props.filenames, files);
         clearTerminal(terminalInstanceRef.current!);
         writeOutput(terminalInstanceRef.current!, outputs, false);
         // TODO: 1つのファイル名しか受け付けないところに無理やりコンマ区切りで全部のファイル名を突っ込んでいる
@@ -60,6 +60,7 @@ export function ExecFile(props: ExecProps) {
     runFiles,
     setExecResult,
     terminalInstanceRef,
+    files,
   ]);
 
   return (

app/terminal/page.tsx

@@ -74,6 +74,13 @@ const sampleConfig: Record<RuntimeLang, SampleConfig> = {
     },
     exec: ["main.js"],
   },
+  typescript: {
+    repl: false,
+    editor: {
+      "main.ts": 'function greet(name: string): void {\n  console.log("Hello, " + name + "!");\n}\n\ngreet("World");',
+    },
+    exec: ["main.ts"],
+  },
   cpp: {
     repl: false,
     editor: {

app/terminal/runtime.tsx

@@ -7,6 +7,7 @@ import { PyodideContext, usePyodide } from "./worker/pyodide";
 import { RubyContext, useRuby } from "./worker/ruby";
 import { JSEvalContext, useJSEval } from "./worker/jsEval";
 import { WorkerProvider } from "./worker/runtime";
+import { TypeScriptProvider, useTypeScript } from "./typescript/runtime";
 
 /**
  * Common runtime context interface for different languages
@@ -23,15 +24,20 @@ export interface RuntimeContext {
   checkSyntax?: (code: string) => Promise<SyntaxStatus>;
   splitReplExamples?: (content: string) => ReplCommand[];
   // file
-  runFiles: (filenames: string[]) => Promise<ReplOutput[]>;
+  runFiles: (filenames: string[], files: Record<string, string>) => Promise<ReplOutput[]>;
   getCommandlineStr?: (filenames: string[]) => string;
 }
 export interface LangConstants {
   tabSize: number;
   prompt?: string;
   promptMore?: string;
 }
-export type RuntimeLang = "python" | "ruby" | "cpp" | "javascript";
+export type RuntimeLang =
+  | "python"
+  | "ruby"
+  | "cpp"
+  | "javascript"
+  | "typescript";
 
 export function getRuntimeLang(
   lang: string | undefined
@@ -50,6 +56,9 @@ export function getRuntimeLang(
     case "javascript":
     case "js":
       return "javascript";
+    case "typescript":
+    case "ts":
+      return "typescript";
     default:
       console.warn(`Unsupported language for runtime: ${lang}`);
       return undefined;
@@ -60,6 +69,7 @@ export function useRuntime(language: RuntimeLang): RuntimeContext {
   const pyodide = usePyodide();
   const ruby = useRuby();
   const jsEval = useJSEval();
+  const typescript = useTypeScript(jsEval);
   const wandboxCpp = useWandbox("cpp");
 
   switch (language) {
@@ -69,6 +79,8 @@ export function useRuntime(language: RuntimeLang): RuntimeContext {
       return ruby;
     case "javascript":
       return jsEval;
+    case "typescript":
+      return typescript;
     case "cpp":
       return wandboxCpp;
     default:
@@ -81,7 +93,9 @@ export function RuntimeProvider({ children }: { children: ReactNode }) {
     <WorkerProvider context={PyodideContext} script="/pyodide.worker.js">
       <WorkerProvider context={RubyContext} script="/ruby.worker.js">
         <WorkerProvider context={JSEvalContext} script="/javascript.worker.js">
-          <WandboxProvider>{children}</WandboxProvider>
+          <WandboxProvider>
+            <TypeScriptProvider>{children}</TypeScriptProvider>
+          </WandboxProvider>
         </WorkerProvider>
       </WorkerProvider>
     </WorkerProvider>

app/terminal/typescript/runtime.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import ts, { CompilerOptions } from "typescript";
+import {
+  createSystem,
+  createVirtualTypeScriptEnvironment,
+  knownLibFilesForCompilerOptions,
+  VirtualTypeScriptEnvironment,
+} from "@typescript/vfs";
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { useEmbedContext } from "../embedContext";
+import { ReplOutput } from "../repl";
+import { RuntimeContext } from "../runtime";
+
+export const compilerOptions: CompilerOptions = {};
+
+const TypeScriptContext = createContext<VirtualTypeScriptEnvironment | null>(
+  null
+);
+export function TypeScriptProvider({ children }: { children: ReactNode }) {
+  const [tsEnv, setTSEnv] = useState<VirtualTypeScriptEnvironment | null>(null);
+  useEffect(() => {
+    if (tsEnv === null) {
+      const abortController = new AbortController();
+      (async () => {
+        const system = createSystem(new Map());
+        const libFiles = knownLibFilesForCompilerOptions(compilerOptions, ts);
+        const libFileContents = await Promise.all(
+          libFiles.map(async (libFile) => {
+            const response = await fetch(
+              `/typescript/${ts.version}/${libFile}`,
+              { signal: abortController.signal }
+            );
+            if (response.ok) {
+              return response.text();
+            } else {
+              return undefined;
+            }
+          })
+        );
+        libFiles.forEach((libFile, index) => {
+          const content = libFileContents[index];
+          if (content !== undefined) {
+            system.writeFile(`/${libFile}`, content);
+          }
+        });
+        const env = createVirtualTypeScriptEnvironment(
+          system,
+          [],
+          ts,
+          compilerOptions
+        );
+        setTSEnv(env);
+      })();
+      return () => {
+        abortController.abort();
+      };
+    }
+  }, [tsEnv]);
+  return (
+    <TypeScriptContext.Provider value={tsEnv}>
+      {children}
+    </TypeScriptContext.Provider>
+  );
+}
+
+export function useTypeScript(jsEval: RuntimeContext): RuntimeContext {
+  const tsEnv = useContext(TypeScriptContext);
+
+  const { writeFile } = useEmbedContext();
+  const runFiles = useCallback(
+    async (filenames: string[], files: Record<string, string>) => {
+      if (tsEnv === null) {
+        return [
+          { type: "error" as const, message: "TypeScript is not ready yet." },
+        ];
+      }
+
+      for (const [filename, content] of Object.entries(files)) {
+        tsEnv.createFile(filename, content);
+      }
+
+      const outputs: ReplOutput[] = [];
+
+      for (const diagnostic of tsEnv.languageService.getSyntacticDiagnostics(
+        filenames[0]
+      )) {
+        outputs.push({
+          type: "error",
+          message: ts.formatDiagnosticsWithColorAndContext([diagnostic], {
+            getCurrentDirectory: () => "",
+            getCanonicalFileName: (f) => f,
+            getNewLine: () => "\n",
+          }),
+        });
+      }
+
+      for (const diagnostic of tsEnv.languageService.getSemanticDiagnostics(
+        filenames[0]
+      )) {
+        outputs.push({
+          type: "error",
+          message: ts.formatDiagnosticsWithColorAndContext([diagnostic], {
+            getCurrentDirectory: () => "",
+            getCanonicalFileName: (f) => f,
+            getNewLine: () => "\n",
+          }),
+        });
+      }
+
+      const emitOutput = tsEnv.languageService.getEmitOutput(filenames[0]);
+      files = await writeFile(Object.fromEntries(emitOutput.outputFiles.map((of) => [of.name, of.text])));
+
+      console.log(emitOutput)
+      const jsOutputs = jsEval.runFiles([emitOutput.outputFiles[0].name], files);
+
+      return outputs.concat(await jsOutputs);
+    },
+    [tsEnv, writeFile, jsEval]
+  );
+  return {
+    ready: tsEnv !== null,
+    runFiles,
+    getCommandlineStr,
+  };
+}
+
+function getCommandlineStr(filenames: string[]) {
+  return `tsc ${filenames.join(" ")}`;
+}