Use appendFile and rename for VSCode to work correctly

Author: Christian Alfoni

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

@@ -503,9 +503,8 @@ export class ModelsHandler {
           model,
         });
       } catch (err) {
-        if (process.env.NODE_ENV === 'development') {
-          console.error('caught', err);
-        }
+        // This can throw when a file is deleted and you add new code to it. When
+        // saving it a new file is created
       }
     });
   }

packages/app/src/app/overmind/effects/vscode/SandboxFsSync/index.ts

@@ -1,6 +1,6 @@
+import browserFs from 'fs';
 import { dirname, join } from 'path';
 
-import browserFs from 'fs';
 import {
   getDirectoryPath,
   getModulePath,
@@ -17,7 +17,7 @@ import { protocolAndHost } from '@codesandbox/common/lib/utils/url-generator';
 import { json } from 'overmind';
 
 import { WAIT_INITIAL_TYPINGS_MS } from '../constants';
-import { mkdir, rename, rmdir, unlink, writeFile } from './utils';
+import { appendFile, mkdir, rename, rmdir, unlink, writeFile } from './utils';
 
 const global = getGlobal() as Window & { BrowserFS: any };
 
@@ -86,7 +86,7 @@ class SandboxFsSync {
         sandboxFs[path] = { ...d, type: 'directory' };
       }
 
-      browserFs.mkdirSync(join('/sandbox', path));
+      browserFs.mkdir(join('/sandbox', path), () => {});
     });
 
     sandbox.modules.forEach(m => {
@@ -98,23 +98,27 @@ class SandboxFsSync {
           type: 'file',
         };
 
-        browserFs.writeFileSync(join('/sandbox', path), m.code);
+        browserFs.writeFile(join('/sandbox', path), m.code, () => {});
       }
     });
 
     return sandboxFs;
   }
 
+  public appendFile(fs: SandboxFs, module: Module) {
+    const copy = json(module);
+
+    appendFile(fs, copy);
+    this.send('append-file', copy);
+    browserFs.appendFile(join('/sandbox', module.path), module.code, () => {});
+  }
+
   public writeFile(fs: SandboxFs, module: Module) {
     const copy = json(module);
 
     writeFile(fs, copy);
     this.send('write-file', copy);
-    browserFs.writeFileSync(
-      join('/sandbox', module.path),
-      module.code,
-      () => {}
-    );
+    browserFs.writeFile(join('/sandbox', module.path), module.code, () => {});
 
     if (module.title === 'package.json') {
       this.syncDependencyTypings();

packages/app/src/app/overmind/effects/vscode/SandboxFsSync/utils.ts

@@ -1,6 +1,10 @@
 import { Directory, Module, SandboxFs } from '@codesandbox/common/lib/types';
 import { json } from 'overmind';
 
+export const appendFile = (fs: SandboxFs, module: Module) => {
+  fs[module.path] = module;
+};
+
 export const writeFile = (fs: SandboxFs, module: Module) => {
   fs[module.path] = module;
 };

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

@@ -8,6 +8,7 @@ import { FileSystemConfiguration } from '../../../../../../../../../standalone-p
 import { IModule } from '../../../../../../../../../standalone-packages/codesandbox-browserfs/dist/node/backend/CodeSandboxFS';
 import { EXTENSIONS_LOCATION } from '../../constants';
 import {
+  appendFile,
   mkdir,
   rename,
   rmdir,
@@ -173,6 +174,11 @@ export async function initializeBrowserFS({
               }
               break;
             }
+            case 'append-file': {
+              const module = evt.data.$data;
+              appendFile(currentSandboxFs, module);
+              break;
+            }
             case 'write-file': {
               const module = evt.data.$data;
               writeFile(currentSandboxFs, module);

packages/app/src/app/overmind/namespaces/files/actions.ts

@@ -520,7 +520,7 @@ export const moduleCreated: AsyncAction<{
       }
     }
 
-    effects.vscode.sandboxFsSync.writeFile(state.editor.modulesByPath, module);
+    effects.vscode.sandboxFsSync.appendFile(state.editor.modulesByPath, module);
     actions.editor.internal.setCurrentModule(module);
 
     try {

standalone-packages/codesandbox-browserfs/src/core/FS.ts

@@ -634,7 +634,7 @@ export default class FS {
       }
       setImmediate(() => {
         this.stat(filename, (err, stat) => {
-          this.fileWatcher.triggerWatch(filename, 'change', stat);
+          this.fileWatcher.triggerWatch(filename, 'rename', stat);
         });
       });
       assertRoot(this.root).appendFile(normalizePath(filename), data, options.encoding, flag, options.mode, newCb);

standalone-packages/codesandbox-browserfs/src/core/file_watcher.ts

@@ -1,5 +1,6 @@
 // Typing info only.
 import * as _fs from 'fs';
+
 import Stats from './node_fs_stats';
 
 const EventEmitter = require('events');