fix(sandpack-react): prevent crash upon deleting last visible file (#661

)

Co-authored-by: Danilo Woznica <[email protected]>

sandpack-react/src/components/CodeEditor/CodeMirror.tsx

@@ -110,7 +110,7 @@ export interface CodeMirrorRef {
 export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
   (
     {
-      code,
+      code = "",
       filePath,
       fileType,
       onCodeUpdate,

sandpack-react/src/contexts/sandpackContext.test.tsx

@@ -54,6 +54,38 @@ describe(SandpackProvider, () => {
       ]);
     });
 
+    it("deletes the activeFile and set the following visibleFile as active", () => {
+      const root = create(
+        <SandpackProvider
+          template="react"
+          options={{ activeFile: "/App.js", visibleFiles: ["/styles.css"] }}
+        />
+      );
+
+      const instance = root.getInstance();
+
+      instance.runSandpack();
+      instance.deleteFile("/App.js");
+
+      expect(instance.state.activeFile).toBe("/styles.css");
+    });
+
+    it("deletes the activeFile and set the entry file if there no visibleFile left", () => {
+      const root = create(
+        <SandpackProvider
+          template="react"
+          options={{ activeFile: "/App.js", visibleFiles: [] }}
+        />
+      );
+
+      const instance = root.getInstance();
+
+      instance.runSandpack();
+      instance.deleteFile("/App.js");
+
+      expect(instance.state.activeFile).toBe("/package.json");
+    });
+
     it("updates a file", () => {
       const instance = createContext();
 
@@ -105,7 +137,7 @@ describe(SandpackProvider, () => {
       expect(instance.state.editorState).toBe("dirty");
     });
 
-    it("should return a pristine value after reseting files", () => {
+    it("should return a pristine value after reset files", () => {
       const instance = createContext();
 
       expect(instance.state.editorState).toBe("pristine");

sandpack-react/src/contexts/sandpackContext.tsx

@@ -519,12 +519,31 @@ export class SandpackProviderClass extends React.PureComponent<
   };
 
   deleteFile = (path: string): void => {
-    this.setState(({ visibleFiles, files }) => {
+    this.setState(({ visibleFiles, files, activeFile }) => {
       const newFiles = { ...files };
       delete newFiles[path];
 
+      const remainingVisibleFiles = visibleFiles.filter(
+        (openPath) => openPath !== path
+      );
+      const deletedLastVisibleFile = remainingVisibleFiles.length === 0;
+
+      if (deletedLastVisibleFile) {
+        const nextFile = Object.keys(files)[Object.keys(files).length - 1];
+
+        return {
+          visibleFiles: [nextFile],
+          activeFile: nextFile,
+          files: newFiles,
+        };
+      }
+
       return {
-        visibleFiles: visibleFiles.filter((openPath) => openPath !== path),
+        visibleFiles: remainingVisibleFiles,
+        activeFile:
+          path === activeFile
+            ? remainingVisibleFiles[remainingVisibleFiles.length - 1]
+            : activeFile,
         files: newFiles,
       };
     }, this.updateClients);