Refactored to imperative file system approach

Author: christianalfoni

packages/app/package.json

@@ -150,9 +150,9 @@
     "normalizr": "^3.2.3",
     "onigasm": "^2.2.1",
     "ot": "^0.0.15",
-    "overmind": "^20.1.0-1571936446466",
+    "overmind": "^20.1.0-1572182984474",
     "overmind-devtools": "^19.0.0",
-    "overmind-react": "^21.1.0-1571936446466",
+    "overmind-react": "^21.1.0-1572182984474",
     "phoenix": "^1.3.0",
     "postcss": "^6.0.9",
     "postcss-selector-parser": "^2.2.3",

packages/app/src/app/overmind/effects/api/apiFactory.ts

@@ -3,7 +3,6 @@ import axios, { AxiosResponse, AxiosError, AxiosRequestConfig } from 'axios';
 import { logError } from '@codesandbox/common/lib/utils/analytics';
 import { values } from 'lodash-es';
 import { camelizeKeys, decamelizeKeys } from 'humps';
-import { Module } from '@codesandbox/common/lib/types';
 
 export const API_ROOT = '/api/v1';
 
@@ -28,9 +27,6 @@ export type Api = {
 
 export type ApiConfig = {
   provideJwtToken: () => string;
-  getModulesByPath: () => {
-    [path: string]: Module;
-  };
   getParsedConfigurations: () => any;
   onError: (error: string) => void;
 };

packages/app/src/app/overmind/effects/vscode/ModelsHandler.ts

@@ -88,33 +88,40 @@ export class ModelsHandler {
     return Promise.resolve();
   };
 
-  public updateModules = () => {
-    Object.keys(this.modelListeners).forEach(path => {
-      const shortid = this.modelListeners[path].moduleShortid;
-      const { model } = this.modelListeners[path];
-      const module = this.sandbox.modules.find(m => m.shortid === shortid);
-      if (!module) {
-        // Deleted
-        return;
-      }
+  public updateModules = () =>
+    Promise.all(
+      Object.keys(this.modelListeners).map(path => {
+        const shortid = this.modelListeners[path].moduleShortid;
+        const { model } = this.modelListeners[path];
+        const module = this.sandbox.modules.find(m => m.shortid === shortid);
+        if (!module) {
+          // Deleted
+          return Promise.resolve();
+        }
 
-      const modulePath = getVSCodePath(this.sandbox, module.id);
-
-      if (modulePath !== model.uri.path) {
-        this.editorApi.textFileService
-          .move(model.uri, this.monaco.Uri.file(modulePath))
-          .then(() => {
-            const editor = this.editorApi.getActiveCodeEditor();
-            const currentModel = editor && editor.getModel();
-            const isCurrentFile =
-              currentModel && currentModel.uri.path === path;
-            if (isCurrentFile) {
-              this.editorApi.openFile(modulePath.replace('/sandbox', ''));
-            }
-          });
-      }
-    });
-  };
+        const modulePath = getVSCodePath(this.sandbox, module.id);
+
+        if (modulePath !== model.uri.path) {
+          return this.editorApi.textFileService
+            .move(model.uri, this.monaco.Uri.file(modulePath))
+            .then(() => {
+              const editor = this.editorApi.getActiveCodeEditor();
+              const currentModel = editor && editor.getModel();
+              const isCurrentFile =
+                currentModel && currentModel.uri.path === path;
+              if (isCurrentFile) {
+                return this.editorApi.openFile(
+                  modulePath.replace('/sandbox', '')
+                );
+              }
+
+              return Promise.resolve();
+            });
+        }
+
+        return Promise.resolve();
+      })
+    );
 
   public applyOperations(operations: { [moduleShortid: string]: any }) {
     const operationsJSON = operations.toJSON ? operations.toJSON() : operations;

packages/app/src/app/overmind/effects/vscode/extensionHostWorker/common/fs.ts

@@ -1,4 +1,5 @@
-import { FileSystemConfiguration } from '../../../../../../../standalone-packages/codesandbox-browserfs';
+import { writeFile, rename, rmdir, unlink, mkdir } from '../../fs/utils';
+import { FileSystemConfiguration } from '../../../../../../../../../standalone-packages/codesandbox-browserfs';
 import { getTypeFetcher } from './type-downloader';
 import { EXTENSIONS_LOCATION } from '../../constants';
 
@@ -49,7 +50,7 @@ export async function initializeBrowserFS({
 } = {}) {
   return new Promise(async resolve => {
     const config = { ...BROWSER_FS_CONFIG };
-    let modulesByPath = {};
+    let currentSandboxFs = {};
 
     if (syncSandbox) {
       if (syncTypes) {
@@ -65,9 +66,7 @@ export async function initializeBrowserFS({
         fs: 'CodeSandboxEditorFS',
         options: {
           api: {
-            getState: () => ({
-              modulesByPath,
-            }),
+            getSandboxFs: () => currentSandboxFs,
           },
         },
       };
@@ -84,12 +83,42 @@ export async function initializeBrowserFS({
 
       if (syncSandbox) {
         self.addEventListener('message', evt => {
-          if (evt.data.$type === 'file-sync') {
-            modulesByPath = evt.data.$data;
+          switch (evt.data.$type) {
+            case 'sandbox-fs': {
+              currentSandboxFs = evt.data.$data;
 
-            if (!resolved) {
-              resolve();
-              resolved = true;
+              console.log('HEEEEEY', currentSandboxFs);
+
+              if (!resolved) {
+                resolve();
+                resolved = true;
+              }
+              break;
+            }
+            case 'writeFile': {
+              const { path, module } = evt.data.$data;
+              writeFile(currentSandboxFs, path, module);
+              break;
+            }
+            case 'rename': {
+              const { fromPath, toPath } = evt.data.$data;
+              rename(currentSandboxFs, fromPath, toPath);
+              break;
+            }
+            case 'rmdir': {
+              const { removePath } = evt.data.$data;
+              rmdir(currentSandboxFs, removePath);
+              break;
+            }
+            case 'unlink': {
+              const { removePath } = evt.data.$data;
+              unlink(currentSandboxFs, removePath);
+              break;
+            }
+            case 'mkdir': {
+              const { path, directory } = evt.data.$data;
+              mkdir(currentSandboxFs, path, directory);
+              break;
             }
           }
         });

…ermind/effects/vscode/browserFs/index.ts …/app/overmind/effects/vscode/fs/index.tspackages/app/src/app/overmind/effects/vscode/browserFs/index.ts renamed to packages/app/src/app/overmind/effects/vscode/fs/index.ts packages/app/src/app/overmind/effects/vscode/browserFs/index.ts renamed to packages/app/src/app/overmind/effects/vscode/fs/index.ts

@@ -1,14 +1,21 @@
+import { dirname } from 'path';
+
 import { getAbsoluteDependencies } from '@codesandbox/common/lib/utils/dependencies';
 import { getGlobal } from '@codesandbox/common/lib/utils/global';
 import { protocolAndHost } from '@codesandbox/common/lib/utils/url-generator';
 import { json } from 'overmind';
-
+import {
+  getDirectoryPath,
+  getModulePath,
+} from '@codesandbox/common/lib/sandbox/modules';
+import { SandboxFs, Module, Directory } from '@codesandbox/common/lib/types';
 import { EXTENSIONS_LOCATION } from '../constants';
 import { getTypeFetcher } from '../extensionHostWorker/common/type-downloader';
+import { writeFile, rename, rmdir, unlink, mkdir } from './utils';
 
 const global = getGlobal() as Window & { BrowserFS: any };
 
-const fs = global.BrowserFS.BFSRequire('fs');
+const browserFs = global.BrowserFS.BFSRequire('fs');
 const SERVICE_URL = 'https://ata-fetcher.cloud/api/v5/typings';
 
 let lastMTime = new Date(0);
@@ -108,40 +115,43 @@ async function syncDependencyTypings(
   }
 }
 
-function sendFiles(modulesByPath) {
+function sendSandboxFs(sandboxFs) {
   global.postMessage(
     {
       $broadcast: true,
-      $type: 'file-sync',
-      $data: json(modulesByPath),
+      $type: 'sandbox-fs',
+      $data: json(sandboxFs),
     },
     protocolAndHost()
   );
 
   try {
-    fs.stat('/sandbox/package.json', (packageJsonError, stat) => {
+    browserFs.stat('/sandbox/package.json', (packageJsonError, stat) => {
       if (packageJsonError) {
         return;
       }
 
       if (stat.mtime.toString() !== lastMTime.toString()) {
         lastMTime = stat.mtime;
 
-        fs.readFile(
+        browserFs.readFile(
           '/sandbox/package.json',
           async (packageJsonReadError, rv) => {
             if (packageJsonReadError) {
               console.error(packageJsonReadError);
               return;
             }
 
-            fs.stat('/sandbox/tsconfig.json', (tsConfigError, result) => {
-              // If tsconfig exists we want to sync the types
-              syncDependencyTypings(
-                rv.toString(),
-                Boolean(tsConfigError) || !result
-              );
-            });
+            browserFs.stat(
+              '/sandbox/tsconfig.json',
+              (tsConfigError, result) => {
+                // If tsconfig exists we want to sync the types
+                syncDependencyTypings(
+                  rv.toString(),
+                  Boolean(tsConfigError) || !result
+                );
+              }
+            );
           }
         );
       }
@@ -152,19 +162,15 @@ function sendFiles(modulesByPath) {
 }
 
 export default {
-  initialize(options: {
-    onModulesByPathChange: (modulesByPath: any) => void;
-    getModulesByPath: () => any;
-    getState: any;
-  }) {
+  initialize(options: { getSandboxFs: () => SandboxFs }) {
     self.addEventListener('message', evt => {
       if (evt.data.$type === 'request-data') {
         sendTypes();
-        sendFiles(options.getModulesByPath());
+        sendSandboxFs(options.getSandboxFs());
       }
     });
 
-    options.onModulesByPathChange(sendFiles);
+    sendSandboxFs(options.getSandboxFs());
 
     return new Promise((resolve, reject) => {
       window.BrowserFS.configure(
@@ -176,11 +182,7 @@ export default {
               fs: 'CodeSandboxEditorFS',
               options: {
                 api: {
-                  getState: () => ({
-                    modulesByPath: options.getState().editor.currentSandbox
-                      ? options.getState().editor.modulesByPath
-                      : {},
-                  }),
+                  getSandboxFs: options.getSandboxFs,
                 },
               },
             },
@@ -218,4 +220,102 @@ export default {
       );
     });
   },
+
+  create(modules: Module[], directories: Directory[]): SandboxFs {
+    const paths = {};
+
+    modules.forEach(m => {
+      const path = getModulePath(modules, directories, m.id);
+      if (path) {
+        paths[path] = {
+          ...m,
+          type: 'file',
+        };
+      }
+    });
+
+    directories.forEach(d => {
+      const path = getDirectoryPath(modules, directories, d.id);
+
+      // If this is a single directory with no children
+      if (!Object.keys(paths).some(p => dirname(p) === path)) {
+        paths[path] = { ...d, type: 'directory' };
+      }
+    });
+
+    return paths;
+  },
+
+  writeFile(fs: SandboxFs, path: string, module: Module) {
+    writeFile(fs, path, module);
+    global.postMessage(
+      {
+        $broadcast: true,
+        $type: 'write-file',
+        $data: {
+          path,
+          module: json(module),
+        },
+      },
+      protocolAndHost()
+    );
+  },
+
+  rename(fs: SandboxFs, fromPath: string, toPath: string) {
+    rename(fs, fromPath, toPath);
+    global.postMessage(
+      {
+        $broadcast: true,
+        $type: 'rename',
+        $data: {
+          fromPath,
+          toPath,
+        },
+      },
+      protocolAndHost()
+    );
+  },
+
+  rmdir(fs: SandboxFs, removePath: string) {
+    rmdir(fs, removePath);
+    global.postMessage(
+      {
+        $broadcast: true,
+        $type: 'rmdir',
+        $data: {
+          removePath,
+        },
+      },
+      protocolAndHost()
+    );
+  },
+
+  unlink(fs: SandboxFs, removePath: string) {
+    unlink(fs, removePath);
+    global.postMessage(
+      {
+        $broadcast: true,
+        $type: 'unlink',
+        $data: {
+          removePath,
+        },
+      },
+      protocolAndHost()
+    );
+  },
+
+  mkdir(fs: SandboxFs, path: string, directory: Directory) {
+    mkdir(fs, path, directory);
+    global.postMessage(
+      {
+        $broadcast: true,
+        $type: 'mkdir',
+        $data: {
+          path,
+          directory: json(directory),
+        },
+      },
+      protocolAndHost()
+    );
+  },
 };