chore: remove unused variable reactDefinitionFile

* chore: rename utils.ts to fileoperations.ts

* feat: replace node-pty with E2B sandboxes

* added debounced function in the editor

* fix: move socket connection to useRef

* fix: wait until terminals are killed to close the container

* fix: ensure container remains open until all owner connections are closed

* fix: sync files to container instead of local file system

* fix: set project file permissions so that they belong to the terminal user

* fix: use the container URL for the preview panel

* fix: count only the current user's sandboxes towards the limit

* fix: remove hardcoded reference to localhost

* fix: add error handling to the backend

* docs: add information about E2B

---------

Co-authored-by: Akhilesh Rangani <akhileshrangani4@gmail.com>

backend/server/src/index.ts

@@ -192,6 +192,8 @@ io.on("connection", async (socket) => {
 
     // todo: send diffs + debounce for efficiency
     socket.on("saveFile", async (fileId: string, body: string) => {
+      if (!fileId) return; // handles saving when no file is open
+
       try {
         if (Buffer.byteLength(body, "utf-8") > MAX_BODY_SIZE) {
           socket.emit(

frontend/app/(app)/code/[id]/page.tsx

@@ -63,14 +63,6 @@ const CodeEditor = dynamic(() => import("@/components/editor"), {
   loading: () => <Loading />,
 })
 
-function getReactDefinitionFile() {
-  const reactDefinitionFile = fs.readFileSync(
-    "node_modules/@types/react/index.d.ts",
-    "utf8"
-  )
-  return reactDefinitionFile
-}
-
 export default async function CodePage({ params }: { params: { id: string } }) {
   const user = await currentUser()
   const sandboxId = params.id
@@ -94,8 +86,6 @@ export default async function CodePage({ params }: { params: { id: string } }) {
     return notFound()
   }
 
-  const reactDefinitionFile = getReactDefinitionFile()
-
   return (
     <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
       <Room id={sandboxId}>
@@ -104,7 +94,6 @@ export default async function CodePage({ params }: { params: { id: string } }) {
           <CodeEditor
             userData={userData}
             sandboxData={sandboxData}
-            reactDefinitionFile={reactDefinitionFile}
           />
         </div>
       </Room>

frontend/components/editor/index.tsx

@@ -35,11 +35,9 @@ import { ImperativePanelHandle } from "react-resizable-panels"
 export default function CodeEditor({
   userData,
   sandboxData,
-  reactDefinitionFile,
 }: {
   userData: User
   sandboxData: Sandbox
-  reactDefinitionFile: string
 }) {
   const socketRef = useRef<Socket | null>(null);
 
@@ -105,6 +103,16 @@ export default function CodeEditor({
   const [provider, setProvider] = useState<TypedLiveblocksProvider>()
   const userInfo = useSelf((me) => me.info)
   
+  // Liveblocks providers map to prevent reinitializing providers
+  type ProviderData = {
+    provider: LiveblocksProvider<never, never, never, never>;
+    yDoc: Y.Doc;
+    yText: Y.Text;
+    binding?: MonacoBinding;
+    onSync: (isSynced: boolean) => void;
+  };
+  const providersMap = useRef(new Map<string, ProviderData>());
+
   // Refs for libraries / features
   const editorContainerRef = useRef<HTMLDivElement>(null)
   const monacoRef = useRef<typeof monaco | null>(null)
@@ -332,10 +340,15 @@ export default function CodeEditor({
 
     if (!editorRef || !tab || !model) return
 
-    const yDoc = new Y.Doc()
-    const yText = yDoc.getText(tab.id)
-    const yProvider: any = new LiveblocksProvider(room, yDoc)
+    let providerData: ProviderData;
   
+    // When a file is opened for the first time, create a new provider and store in providersMap.
+    if (!providersMap.current.has(tab.id)) {
+      const yDoc = new Y.Doc();
+      const yText = yDoc.getText(tab.id);
+      const yProvider = new LiveblocksProvider(room, yDoc);
+
+      // Inserts the file content into the editor once when the tab is changed.
       const onSync = (isSynced: boolean) => {
         if (isSynced) {
           const text = yText.toString()
@@ -353,22 +366,51 @@ export default function CodeEditor({
 
       yProvider.on("sync", onSync)
 
-    setProvider(yProvider)
+      // Save the provider to the map.
+      providerData = { provider: yProvider, yDoc, yText, onSync };
+      providersMap.current.set(tab.id, providerData);
+
+    } else {
+      // When a tab is opened that has been open before, reuse the existing provider.
+      providerData = providersMap.current.get(tab.id)!;
+    }
 
     const binding = new MonacoBinding(
-      yText,
+      providerData.yText,
       model,
       new Set([editorRef]),
-      yProvider.awareness as Awareness
-    )
+      providerData.provider.awareness as unknown as Awareness
+    );
+
+    providerData.binding = binding;
+  
+    setProvider(providerData.provider);
 
     return () => {
-      yDoc.destroy()
-      yProvider.destroy()
-      binding.destroy()
-      yProvider.off("sync", onSync)
+      // Cleanup logic
+      if (binding) {
+        binding.destroy();
       }
-  }, [editorRef, room, activeFileContent])
+      if (providerData.binding) {
+        providerData.binding = undefined;
+      }
+    };
+  }, [room, activeFileContent]);
+
+    // Added this effect to clean up when the component unmounts
+    useEffect(() => {
+      return () => {
+        // Clean up all providers when the component unmounts
+        providersMap.current.forEach((data) => {
+          if (data.binding) {
+            data.binding.destroy();
+          }
+          data.provider.disconnect();
+          data.yDoc.destroy();
+        });
+        providersMap.current.clear();
+      };
+    }, []);
 
   // Connection/disconnection effect
   useEffect(() => {