fix: webcontainer error

xun082 · Jul 24, 2024 · 6521e66 · 6521e66
1 parent aa7d187
commit 6521e66
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 70 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -4,6 +4,7 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
+  reactStrictMode:false,
 
   async headers() {
     return [

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,7 +2,6 @@
 
 import { Inter } from 'next/font/google';
 
-import { WebContainerProvider } from '@/context/webContainer';
 import './globals.css';
 
 const inter = Inter({ subsets: ['latin'] });
@@ -14,9 +13,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={inter.className}>
-        <WebContainerProvider>{children}</WebContainerProvider>
-      </body>
+      <body className={inter.className}>{children}</body>
     </html>
   );
 }
diff --git a/src/components/edit/header/index.tsx b/src/components/edit/header/index.tsx
@@ -7,6 +7,7 @@ import { GoRepoForked } from 'react-icons/go';
 import { Avatar } from '@/components/common/Avatar';
 import { Button } from '@/components/ui/button';
 import AvatarPopover from '@/components/avatarPopover';
+import WebContainerProvider from '@/components/webContainerProvider';
 
 interface ProjectData {
   [key: string]: any;
@@ -55,6 +56,7 @@ export const Header: React.FC<HeaderProps> = ({ project, userInfo }) => {
           <Avatar src={userInfo.imgurl} className=" flex h-[3.5vh] w-[3.5vh]" />
         </AvatarPopover>
       </div>
+      <WebContainerProvider></WebContainerProvider>
     </header>
   );
 };
diff --git a/src/components/webContainerProvider/index.tsx b/src/components/webContainerProvider/index.tsx
@@ -0,0 +1,16 @@
+import React, { Fragment, useEffect, memo } from 'react';
+
+import { useWebContainerStore } from '@/store/webContainerStore';
+
+interface WebContainerProviderProps {}
+
+const WebContainerProvider: React.FC<WebContainerProviderProps> = () => {
+  const { initWebContainer } = useWebContainerStore();
+  useEffect(() => {
+    initWebContainer();
+  }, [initWebContainer]); // 注意这里需要将 initWebContainer 添加到依赖数组中
+
+  return <Fragment></Fragment>;
+};
+
+export default memo(WebContainerProvider);
diff --git a/src/context/webContainer.tsx b/src/context/webContainer.tsx
diff --git a/src/store/webContainerStore.tsx b/src/store/webContainerStore.tsx
@@ -0,0 +1,52 @@
+import { create } from 'zustand';
+import { WebContainer } from '@webcontainer/api';
+
+import { WebContainerFileSystemTreeSavePoint, saveFileSystemTree } from '@/utils';
+
+interface WebContainerState {
+  webContainerInstance: WebContainer | null;
+  isInitialized: boolean;
+}
+
+interface WebContainerActions {
+  initWebContainer: () => Promise<void>;
+  saveFileSystemOnUnload: () => void;
+}
+
+type WebContainerStore = WebContainerState & WebContainerActions;
+
+export const useWebContainerStore = create<WebContainerStore>((set, get) => ({
+  webContainerInstance: null,
+  isInitialized: false,
+
+  async initWebContainer() {
+    const { webContainerInstance, isInitialized } = get();
+
+    if (!isInitialized && !webContainerInstance) {
+      const newWebContainerInstance = await WebContainer.boot();
+
+      const treeData = localStorage.getItem(WebContainerFileSystemTreeSavePoint);
+
+      if (treeData) {
+        const fileSystemTree = JSON.parse(treeData);
+        await newWebContainerInstance.mount(fileSystemTree);
+      }
+
+      set({ webContainerInstance: newWebContainerInstance, isInitialized: true });
+
+      // Add the beforeunload listener here
+      window.addEventListener('beforeunload', get().saveFileSystemOnUnload);
+    }
+  },
+
+  saveFileSystemOnUnload() {
+    const { webContainerInstance } = get();
+
+    if (webContainerInstance) {
+      saveFileSystemTree(webContainerInstance);
+    }
+
+    // Remove the listener when the function is called
+    window.removeEventListener('beforeunload', this.saveFileSystemOnUnload);
+  },
+}));