feat(sandpack-context): add file method (#512)

* Update 3 files * Update sandpackContext.tsx
codesandbox · Jun 22, 2022 · 3b76995 · 3b76995
1 parent 31480a8
commit 3b76995
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 21 deletions.
diff --git a/sandpack-react/src/contexts/sandpackContext.test.tsx b/sandpack-react/src/contexts/sandpackContext.test.tsx
@@ -7,6 +7,30 @@ import { SandpackProvider } from "./sandpackContext";
 
 describe(SandpackProvider, () => {
   describe("updateFile", () => {
+    it("adds a file", () => {
+      const root = create(<SandpackProvider template="react" />);
+      const instance = root.getInstance();
+
+      instance.addFile({ "new-file.js": "new-content" });
+
+      expect(instance.state.files["new-file.js"].code).toBe("new-content");
+    });
+
+    it("deletes a file", () => {
+      const root = create(<SandpackProvider template="react" />);
+      const instance = root.getInstance();
+
+      instance.deleteFile("/App.js");
+
+      expect(instance.state.files["/App.js"]).toBe(undefined);
+      expect(Object.keys(instance.state.files)).toEqual([
+        "/index.js",
+        "/styles.css",
+        "/public/index.html",
+        "/package.json",
+      ]);
+    });
+
     it("updates a file", () => {
       const root = create(<SandpackProvider template="react" />);
       const instance = root.getInstance();

diff --git a/sandpack-react/src/contexts/sandpackContext.tsx b/sandpack-react/src/contexts/sandpackContext.tsx
@@ -484,26 +484,18 @@ class SandpackProviderClass extends React.PureComponent<
 
   deleteFile = (path: string): void => {
     this.setState(({ visibleFiles, files }) => {
-      const newPaths = visibleFiles.filter((openPath) => openPath !== path);
-      const newFiles = Object.keys(files).reduce(
-        (acc: SandpackBundlerFiles, filePath) => {
-          if (filePath === path) {
-            return acc;
-          }
-          acc[filePath] = files[filePath];
-          return acc;
-        },
-        {}
-      );
+      const newFiles = { ...files };
+      delete newFiles[path];
 
       return {
-        visibleFiles: newPaths,
+        visibleFiles: visibleFiles.filter((openPath) => openPath !== path),
         files: newFiles,
       };
-    });
-    this.updateClients();
+    }, this.updateClients);
   };
 
+  addFile = this.updateFile;
+
   dispatchMessage = (message: SandpackMessage, clientId?: string): void => {
     if (this.state.sandpackStatus !== "running") {
       console.warn(
@@ -633,24 +625,30 @@ class SandpackProviderClass extends React.PureComponent<
       editorState,
       initMode,
       clients: this.clients,
-      closeFile: this.closeFile,
-      deleteFile: this.deleteFile,
+
       dispatch: this.dispatchMessage,
       errorScreenRegisteredRef: this.errorScreenRegistered,
       lazyAnchorRef: this.lazyAnchorRef,
       listen: this.addListener,
       loadingScreenRegisteredRef: this.loadingScreenRegistered,
-      openFile: this.openFile,
       openInCSBRegisteredRef: this.openInCSBRegistered,
       registerBundler: this.registerBundler,
-      resetAllFiles: this.resetAllFiles,
-      resetFile: this.resetFile,
       runSandpack: this.runSandpack,
-      setActiveFile: this.setActiveFile,
       unregisterBundler: this.unregisterBundler,
+      registerReactDevTools: this.registerReactDevTools,
+
+      /**
+       * File operations
+       */
+      openFile: this.openFile,
+      resetFile: this.resetFile,
+      resetAllFiles: this.resetAllFiles,
+      setActiveFile: this.setActiveFile,
       updateCurrentFile: this.updateCurrentFile,
       updateFile: this.updateFile,
-      registerReactDevTools: this.registerReactDevTools,
+      addFile: this.addFile,
+      closeFile: this.closeFile,
+      deleteFile: this.deleteFile,
     };
   };
 

diff --git a/sandpack-react/src/types.ts b/sandpack-react/src/types.ts
@@ -529,6 +529,7 @@ export interface SandpackState {
   registerBundler: (iframe: HTMLIFrameElement, clientId: string) => void;
   unregisterBundler: (clientId: string) => void;
   updateFile: (pathOrFiles: string | SandpackFiles, code?: string) => void;
+  addFile: (pathOrFiles: string | SandpackFiles, code?: string) => void;
   updateCurrentFile: (newCode: string) => void;
   openFile: (path: string) => void;
   closeFile: (path: string) => void;