test時だけルール違反してrefを使う。

Author: na-trium-144

app/terminal/page.tsx

@@ -2,7 +2,7 @@
 
 import { Heading } from "@/markdown/heading";
 import "mocha/mocha.css";
-import { Fragment, useEffect, useState } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 import { langConstants, RuntimeLang } from "@my-code/runtime/languages";
 import { ReplTerminal } from "./repl";
 import { EditorComponent } from "./editor";
@@ -202,7 +202,11 @@ function AnsiColorSample() {
 }
 
 function MochaTest() {
-  const runtimeRef = useRuntimeAll();
+  const runtimeAll = useRuntimeAll();
+  const runtimeRef = useRef(runtimeAll);
+  for (const lang of Object.keys(runtimeAll) as RuntimeLang[]) {
+    runtimeRef.current[lang] = runtimeAll[lang];
+  }
 
   const [searchParams, setSearchParams] = useState<string>("");
   useEffect(() => {

packages/runtime/src/context.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ReactNode, RefObject, useEffect, useRef } from "react";
+import { ReactNode, useEffect } from "react";
 import { RuntimeContext } from "./interface";
 import { RuntimeLang } from "./languages";
 import { TypeScriptProvider, useTypeScript } from "./typescript/runtime";
@@ -12,14 +12,14 @@ import { WorkerProvider } from "./worker/runtime";
 
 export function useRuntime(language: RuntimeLang): RuntimeContext {
   const runtimes = useRuntimeAll();
-  const runtime = runtimes.current[language];
+  const runtime = runtimes[language];
   const { init } = runtime;
   useEffect(() => {
     init?.();
   }, [init]);
   return runtime;
 }
-export function useRuntimeAll(): RefObject<Record<RuntimeLang, RuntimeContext>> {
+export function useRuntimeAll(): Record<RuntimeLang, RuntimeContext> {
   // すべての言語のcontextをインスタンス化
   const pyodide = usePyodide();
   const ruby = useRuby();
@@ -28,16 +28,15 @@ export function useRuntimeAll(): RefObject<Record<RuntimeLang, RuntimeContext>>
   const wandboxCpp = useWandbox("cpp");
   const wandboxRust = useWandbox("rust");
 
-  const runtimes = useRef<Record<RuntimeLang, RuntimeContext>>({} as never);
-  runtimes.current.python = pyodide;
-  runtimes.current.ruby = ruby;
-  runtimes.current.javascript = jsEval;
-  runtimes.current.typescript = typescript;
-  runtimes.current.cpp = wandboxCpp;
-  runtimes.current.rust = wandboxRust;
-
   // initはしない。呼び出し側でする必要がある
-  return runtimes;
+  return {
+    python: pyodide,
+    ruby: ruby,
+    javascript: jsEval,
+    typescript: typescript,
+    cpp: wandboxCpp,
+    rust: wandboxRust,
+  };
 }
 export function RuntimeProvider({ children }: { children: ReactNode }) {
   return (

packages/runtime/tests/vitest-all.tsx

@@ -14,8 +14,9 @@ const RuntimeLoader = ({
 }: {
   runtimeRef: RefObject<Record<RuntimeLang, RuntimeContext> | null>;
 }) => {
-  const runtimes = useRuntimeAll();
-  runtimeRef.current = runtimes.current;
+  const runtimeAll = useRuntimeAll();
+  // eslint-disable-next-line react-hooks/refs
+  runtimeRef.current = runtimeAll;
   return null;
 };