runtimeにinit()を追加し、必要な時だけ初期化

Author: na-trium-144

app/terminal/README.md

@@ -10,6 +10,11 @@ runtime.tsx の `useRuntime(lang)` は各言語のフックを呼び出し、そ
 
 ### 共通
 
+* init?: `() => void`
+    * useRuntime() 内のuseEffectで呼び出されます。
+    * ランタイムの初期化にコストがかかるものは、init()されたときにだけ初期化するようにします。
+    * useRuntime() が複数回使われた場合はinitも複数回呼ばれます。
+    * 初期化は非同期に行い、完了する前にreturnしてよいです。
 * ready: `boolean`
     * ランタイムの初期化が完了したか、不要である場合true
 * mutex?: `MutexInterface`

app/terminal/page.tsx

@@ -163,6 +163,7 @@ function MochaTest() {
       mocha.setup("bdd");
 
       for (const lang of Object.keys(runtimeRef.current) as RuntimeLang[]) {
+        runtimeRef.current[lang].init?.();
         defineTests(lang, runtimeRef, filesRef);
       }
 

app/terminal/runtime.tsx

@@ -1,8 +1,10 @@
+"use client";
+
 import { MutexInterface } from "async-mutex";
 import { ReplOutput, SyntaxStatus, ReplCommand } from "./repl";
 import { useWandbox, WandboxProvider } from "./wandbox/runtime";
 import { AceLang } from "./editor";
-import { ReactNode } from "react";
+import { ReactNode, useEffect } from "react";
 import { PyodideContext, usePyodide } from "./worker/pyodide";
 import { RubyContext, useRuby } from "./worker/ruby";
 import { JSEvalContext, useJSEval } from "./worker/jsEval";
@@ -16,6 +18,7 @@ import { TypeScriptProvider, useTypeScript } from "./typescript/runtime";
  *
  */
 export interface RuntimeContext {
+  init?: () => void;
   ready: boolean;
   mutex?: MutexInterface;
   interrupt?: () => void;
@@ -24,7 +27,10 @@ export interface RuntimeContext {
   checkSyntax?: (code: string) => Promise<SyntaxStatus>;
   splitReplExamples?: (content: string) => ReplCommand[];
   // file
-  runFiles: (filenames: string[], files: Readonly<Record<string, string>>) => Promise<ReplOutput[]>;
+  runFiles: (
+    filenames: string[],
+    files: Readonly<Record<string, string>>
+  ) => Promise<ReplOutput[]>;
   getCommandlineStr?: (filenames: string[]) => string;
 }
 export interface LangConstants {
@@ -73,21 +79,32 @@ export function useRuntime(language: RuntimeLang): RuntimeContext {
   const typescript = useTypeScript(jsEval);
   const wandboxCpp = useWandbox("cpp");
 
+  let runtime: RuntimeContext;
   switch (language) {
     case "python":
-      return pyodide;
+      runtime = pyodide;
+      break;
     case "ruby":
-      return ruby;
+      runtime = ruby;
+      break;
     case "javascript":
-      return jsEval;
+      runtime = jsEval;
+      break;
     case "typescript":
-      return typescript;
+      runtime = typescript;
+      break;
     case "cpp":
-      return wandboxCpp;
+      runtime = wandboxCpp;
+      break;
     default:
       language satisfies never;
       throw new Error(`Runtime not implemented for language: ${language}`);
   }
+  const { init } = runtime;
+  useEffect(() => {
+    init?.();
+  }, [init]);
+  return runtime;
 }
 export function RuntimeProvider({ children }: { children: ReactNode }) {
   return (

app/terminal/typescript/runtime.tsx

@@ -8,6 +8,7 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useRef,
   useState,
 } from "react";
 import { useEmbedContext } from "../embedContext";
@@ -16,18 +17,21 @@ import { RuntimeContext } from "../runtime";
 
 export const compilerOptions: CompilerOptions = {};
 
-const TypeScriptContext = createContext<VirtualTypeScriptEnvironment | null>(
-  null
-);
+const TypeScriptContext = createContext<{
+  init: () => void;
+  tsEnv: VirtualTypeScriptEnvironment | null;
+}>({ init: () => undefined, tsEnv: null });
 export function TypeScriptProvider({ children }: { children: ReactNode }) {
   const [tsEnv, setTSEnv] = useState<VirtualTypeScriptEnvironment | null>(null);
-
-  useEffect(() => {
-    // useEffectはサーバーサイドでは実行されないが、
+  const initializing = useRef(false);
+  const init = useCallback(() => {
+    if (initializing.current) {
+      return;
+    }
+    initializing.current = true;
     // typeof window !== "undefined" でガードしないとなぜかesbuildが"typescript"を
     // サーバーサイドでのインポート対象とみなしてしまう。
     if (tsEnv === null && typeof window !== "undefined") {
-      const abortController = new AbortController();
       (async () => {
         const ts = await import("typescript");
         const vfs = await import("@typescript/vfs");
@@ -39,8 +43,7 @@ export function TypeScriptProvider({ children }: { children: ReactNode }) {
         const libFileContents = await Promise.all(
           libFiles.map(async (libFile) => {
             const response = await fetch(
-              `/typescript/${ts.version}/${libFile}`,
-              { signal: abortController.signal }
+              `/typescript/${ts.version}/${libFile}`
             );
             if (response.ok) {
               return response.text();
@@ -63,20 +66,17 @@ export function TypeScriptProvider({ children }: { children: ReactNode }) {
         );
         setTSEnv(env);
       })();
-      return () => {
-        abortController.abort();
-      };
     }
   }, [tsEnv, setTSEnv]);
   return (
-    <TypeScriptContext.Provider value={tsEnv}>
+    <TypeScriptContext.Provider value={{ init, tsEnv }}>
       {children}
     </TypeScriptContext.Provider>
   );
 }
 
 export function useTypeScript(jsEval: RuntimeContext): RuntimeContext {
-  const tsEnv = useContext(TypeScriptContext);
+  const { init, tsEnv } = useContext(TypeScriptContext);
 
   const { writeFile } = useEmbedContext();
   const runFiles = useCallback(
@@ -139,6 +139,7 @@ export function useTypeScript(jsEval: RuntimeContext): RuntimeContext {
     [tsEnv, writeFile, jsEval]
   );
   return {
+    init,
     ready: tsEnv !== null,
     runFiles,
     getCommandlineStr,

app/terminal/worker/runtime.tsx

@@ -96,6 +96,13 @@ export function WorkerProvider({
   }
 
   const initializeWorker = useCallback(async () => {
+    if (!mutex.current.isLocked()) {
+      throw new Error(`mutex of context must be locked for initializeWorker`);
+    }
+    if (workerRef.current) {
+      return;
+    }
+
     let worker: Worker;
     lang satisfies RuntimeLang;
     switch (lang) {
@@ -137,12 +144,12 @@ export function WorkerProvider({
     });
   }, [lang]);
 
-  // Initialization effect
-  useEffect(() => {
-    initializeWorker().then(() => setReady(true));
-    return () => {
-      workerRef.current?.terminate();
-    };
+  // First initialization
+  const init = useCallback(() => {
+    // すでに初期化済みだった場合initializeWorker()がreturnしなにもしない
+    void mutex.current.runExclusive(() =>
+      initializeWorker().then(() => setReady(true))
+    );
   }, [initializeWorker]);
 
   const interrupt = useCallback(() => {
@@ -161,6 +168,7 @@ export function WorkerProvider({
         messageCallbacks.current.clear();
 
         workerRef.current?.terminate();
+        workerRef.current = null;
         setReady(false);
 
         void mutex.current.runExclusive(async () => {
@@ -278,6 +286,7 @@ export function WorkerProvider({
   return (
     <context.Provider
       value={{
+        init,
         ready,
         runCommand,
         checkSyntax,