worker/ディレクトリに移動し、createRuntime()ではなくProviderを直接定義

Author: na-trium-144

app/terminal/exec.tsx

@@ -83,7 +83,7 @@ export function ExecFile(props: ExecProps) {
           ▶ 実行
         </button>
         <code className="text-sm ml-4">
-          {getCommandlineStr(props.filenames)}
+          {getCommandlineStr?.(props.filenames)}
         </code>
       </div>
       <div className="bg-base-300 p-4 pt-2 rounded-b-lg">

app/terminal/javascript/page.tsx

@@ -3,18 +3,18 @@ import { Heading } from "@/[docs_id]/markdown";
 import "mocha/mocha.js";
 import "mocha/mocha.css";
 import { useEffect, useRef, useState } from "react";
-import { usePyodide } from "./python/runtime";
-import { useRuby } from "./ruby/runtime";
 import { useWandbox } from "./wandbox/runtime";
 import { RuntimeContext, RuntimeLang } from "./runtime";
 import { useEmbedContext } from "./embedContext";
 import { defineTests } from "./tests";
-import { useJavaScript } from "./javascript/runtime";
+import { usePyodide } from "./worker/pyodide";
+import { useRuby } from "./worker/ruby";
+import { useJSEval } from "./worker/jsEval";
 
 export default function RuntimeTestPage() {
   const pyodide = usePyodide();
   const ruby = useRuby();
-  const javascript = useJavaScript();
+  const javascript = useJSEval();
   const wandboxCpp = useWandbox("cpp");
   const runtimeRef = useRef<Record<RuntimeLang, RuntimeContext>>(null!);
   runtimeRef.current = {

app/terminal/javascript/runtime.tsx

@@ -1,11 +1,12 @@
 import { MutexInterface } from "async-mutex";
 import { ReplOutput, SyntaxStatus, ReplCommand } from "./repl";
-import { PyodideProvider, usePyodide } from "./python/runtime";
-import { RubyProvider, useRuby } from "./ruby/runtime";
 import { useWandbox, WandboxProvider } from "./wandbox/runtime";
-import { JavaScriptProvider, useJavaScript } from "./javascript/runtime";
 import { AceLang } from "./editor";
 import { ReactNode } from "react";
+import { PyodideContext, usePyodide } from "./worker/pyodide";
+import { RubyContext, useRuby } from "./worker/ruby";
+import { JSEvalContext, useJSEval } from "./worker/jsEval";
+import { WorkerProvider } from "./worker/runtime";
 
 /**
  * Common runtime context interface for different languages
@@ -23,7 +24,7 @@ export interface RuntimeContext {
   splitReplExamples?: (content: string) => ReplCommand[];
   // file
   runFiles: (filenames: string[]) => Promise<ReplOutput[]>;
-  getCommandlineStr: (filenames: string[]) => string;
+  getCommandlineStr?: (filenames: string[]) => string;
 }
 export interface LangConstants {
   tabSize: number;
@@ -58,32 +59,32 @@ export function useRuntime(language: RuntimeLang): RuntimeContext {
   // すべての言語のcontextをインスタンス化
   const pyodide = usePyodide();
   const ruby = useRuby();
+  const jsEval = useJSEval();
   const wandboxCpp = useWandbox("cpp");
-  const javascript = useJavaScript();
 
   switch (language) {
     case "python":
       return pyodide;
     case "ruby":
       return ruby;
+    case "javascript":
+      return jsEval;
     case "cpp":
       return wandboxCpp;
-    case "javascript":
-      return javascript;
     default:
       language satisfies never;
       throw new Error(`Runtime not implemented for language: ${language}`);
   }
 }
 export function RuntimeProvider({ children }: { children: ReactNode }) {
   return (
-    <PyodideProvider>
-      <RubyProvider>
-        <WandboxProvider>
-          <JavaScriptProvider>{children}</JavaScriptProvider>
-        </WandboxProvider>
-      </RubyProvider>
-    </PyodideProvider>
+    <WorkerProvider context={PyodideContext} script="/pyodide.worker.js">
+      <WorkerProvider context={RubyContext} script="/ruby.worker.js">
+        <WorkerProvider context={JSEvalContext} script="/javascript.worker.js">
+          <WandboxProvider>{children}</WandboxProvider>
+        </WorkerProvider>
+      </WorkerProvider>
+    </WorkerProvider>
   );
 }