Refactor Graphviz component and improve code formatting

Author: kamiazya

src/components/Graphviz/index.tsx

@@ -1,9 +1,9 @@
-// import { type GraphvizOptions, graphviz } from 'd3-graphviz';
 import { translate } from '@docusaurus/Translate';
 import type { Engine } from '@hpcc-js/wasm-graphviz';
-import { useGraphviz } from '@site/src/contexts/Graphviz';
 import { useEffect, useState } from 'react';
 
+import { useGraphviz } from '@site/src/contexts/Graphviz';
+
 interface GraphvizProps {
   /**
    * A string containing a graph representation using the Graphviz DOT language.

src/components/TSGraphvizPreviewEditor/index.tsx

@@ -27,7 +27,7 @@ function TSGraphvizPreviewEditor({ script, className }: Props): JSX.Element {
     if (!dot && container.status === 'ready') {
       container.run(script).then(setDot);
     }
-  }, [dot, container]);
+  }, [dot, container.status, container.run, script, setDot]);
 
   const [tsCode, setTsCode] = useState<string>(script);
   const onChangeCallback = useCallback(

src/contexts/Graphviz/index.tsx

@@ -9,7 +9,7 @@ import {
   useState,
 } from 'react';
 
-const GraphVizContext = createContext<Graphviz>(null);
+const GraphVizContext = createContext<Graphviz | null>(null);
 
 type GraphvizAPI = {
   status: 'loading' | 'ready';

src/contexts/WebContainer/index.tsx

@@ -16,7 +16,7 @@ export interface Container {
   run(script: string): Promise<string>;
 }
 
-const ContainerContext = createContext<Container | null>(null);
+const ContainerContext = createContext<WebContainer | null>(null);
 
 const SCRIPT = `
 const { Script, createContext } = require('node:vm');
@@ -61,13 +61,11 @@ type Status = 'booted' | 'installing' | 'ready' | 'processing';
 export const ContainerProvider: FC<{ children: ReactNode }> = memo(
   ({ children }) => {
     const [instance, setInstance] = useState<WebContainer>();
-    const [status, setStatus] = useState<Status>();
     useEffect(() => {
       (async () => {
         const instance = await WebContainer.boot({
           coep: 'none',
         });
-        setStatus('booted');
         await instance.mount({
           'package.json': {
             file: {
@@ -98,50 +96,51 @@ export const ContainerProvider: FC<{ children: ReactNode }> = memo(
         });
         setInstance(instance);
       })();
-    }, [setStatus, setInstance]);
-
-    const init = useCallback(async () => {
-      if (!instance || status !== 'booted') {
-        return;
-      }
-      setStatus('installing');
-      const install = await instance.spawn('npm', ['install']);
-      if ((await install.exit) === 0) {
-        setStatus('ready');
-      }
-    }, [instance, status, setStatus]);
-
-    const run = useCallback(
-      async (script: string) => {
-        console.log('run', script, instance, status);
-        if (!instance || status !== 'ready') {
-          return;
-        }
-        setStatus('processing');
-        try {
-          await instance.fs.writeFile('./diagram.ts', script);
-          const exec = await instance.spawn('node', ['./main.js']);
-          console.log('exit', await exec.exit);
-          return await instance.fs.readFile('./diagram.dot', 'utf8');
-        } finally {
-          await instance.fs.rm('./diagram.ts', { force: true });
-          await instance.fs.rm('./diagram.dot', { force: true });
-          setStatus('ready');
-        }
-      },
-      [instance, status, setStatus],
-    );
+    }, [setInstance]);
 
     return (
-      <ContainerContext.Provider value={{ status, init, run }}>
+      <ContainerContext.Provider value={instance}>
         {children}
       </ContainerContext.Provider>
     );
   },
 );
 
 export const useContainer = (): Container => {
-  const { status, init, run } = useContext(ContainerContext);
+  const instance = useContext(ContainerContext);
+  const [status, setStatus] = useState<Status>('booted');
+  const init = useCallback(async () => {
+    if (!instance || status !== 'booted') {
+      return;
+    }
+    setStatus('installing');
+    const install = await instance.spawn('npm', ['install']);
+    if ((await install.exit) === 0) {
+      setStatus('ready');
+    }
+  }, [instance, status, setStatus]);
+
+  const run = useCallback(
+    async (script: string) => {
+      console.log('run', script, instance, status);
+      if (!instance || status !== 'ready') {
+        return;
+      }
+      setStatus('processing');
+      try {
+        await instance.fs.writeFile('./diagram.ts', script);
+        const exec = await instance.spawn('node', ['./main.js']);
+        console.log('exit', await exec.exit);
+        return await instance.fs.readFile('./diagram.dot', 'utf8');
+      } finally {
+        await instance.fs.rm('./diagram.ts', { force: true });
+        await instance.fs.rm('./diagram.dot', { force: true });
+        setStatus('ready');
+      }
+    },
+    [instance, status, setStatus],
+  );
+
   useEffect(() => {
     if (status === 'booted') {
       init();

src/theme/Root.tsx

@@ -3,7 +3,8 @@ import type { ReactNode } from 'react';
 import { GraphvizProvider } from '@site/src/contexts/Graphviz';
 import { ContainerProvider } from '@site/src/contexts/WebContainer';
 
-const Root = ({ children }: { children: ReactNode }): JSX.Element => {  return (
+const Root = ({ children }: { children: ReactNode }): JSX.Element => {
+  return (
     <ContainerProvider>
       <GraphvizProvider>{children}</GraphvizProvider>
     </ContainerProvider>