better syncing

Author: christianalfoni

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

@@ -76,12 +76,14 @@ export class ModelsHandler {
     return null;
   }
 
-  public changeModule = (module: Module) => {
+  public changeModule = async (module: Module) => {
     if (getCurrentModelPath(this.editorApi) !== module.path) {
-      return this.editorApi.openFile(module.path);
+      const file = await this.editorApi.openFile(module.path);
+
+      return file.getModel();
     }
 
-    return Promise.resolve();
+    return Promise.resolve(getModel(this.editorApi));
   };
 
   public applyOperations(operations: { [moduleShortid: string]: any }) {

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

@@ -1,13 +1,15 @@
+import { commonPostMessage } from '@codesandbox/common/lib/utils/global';
+
+import { FileSystemConfiguration } from '../../../../../../../../../standalone-packages/codesandbox-browserfs';
+import { EXTENSIONS_LOCATION } from '../../constants';
 import {
-  writeFile,
+  mkdir,
   rename,
   rmdir,
   unlink,
-  mkdir,
+  writeFile,
 } from '../../sandboxFsSync/utils';
-import { FileSystemConfiguration } from '../../../../../../../../../standalone-packages/codesandbox-browserfs';
 import { getTypeFetcher } from './type-downloader';
-import { EXTENSIONS_LOCATION } from '../../constants';
 
 const global = self as any;
 
@@ -85,18 +87,12 @@ export async function initializeBrowserFS({
         console.error(e);
         return;
       }
-      let resolved = false;
 
       if (syncSandbox) {
         self.addEventListener('message', evt => {
           switch (evt.data.$type) {
             case 'sandbox-fs': {
               currentSandboxFs = evt.data.$data;
-
-              if (!resolved) {
-                resolve();
-                resolved = true;
-              }
               break;
             }
             case 'writeFile': {
@@ -126,10 +122,16 @@ export async function initializeBrowserFS({
             }
           }
         });
-      } else {
-        resolve();
+
+        commonPostMessage({
+          $broadcast: true,
+          $type: 'sync-sandbox',
+          $data: {},
+        });
       }
 
+      resolve();
+
       // BrowserFS is initialized and ready-to-use!
     });
   });

packages/app/src/app/overmind/effects/vscode/extensionHostWorker/common/type-downloader.ts

@@ -1,10 +1,11 @@
 import {
-  getGlobal,
   commonPostMessage,
+  getGlobal,
 } from '@codesandbox/common/lib/utils/global';
+
 import {
-  IModule,
   IManager,
+  IModule,
 } from '../../../../../../../../../standalone-packages/codesandbox-browserfs/dist/node/backend/CodeSandboxFS';
 
 const ctx = getGlobal();
@@ -32,6 +33,7 @@ export function getTypeFetcher() {
   self.addEventListener('message', evt => {
     if (evt.data.$type === 'typings-sync') {
       types = evt.data.$data;
+
       // This forces the file watchers to emit, which causes typescript to reload
       ctx.BrowserFS.BFSRequire('fs').rename(
         '/sandbox/node_modules/@types',
@@ -43,7 +45,7 @@ export function getTypeFetcher() {
 
   commonPostMessage({
     $broadcast: true,
-    $type: 'request-data',
+    $type: 'sync-types',
     $data: {},
   });
 

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

@@ -4,22 +4,21 @@ import {
   EditorSelection,
   Module,
   Sandbox,
-  Settings,
   SandboxFs,
+  Settings,
 } from '@codesandbox/common/lib/types';
 import {
   convertTypeToStatus,
   notificationState,
 } from '@codesandbox/common/lib/utils/notifications';
-import FontFaceObserver from 'fontfaceobserver';
 import { NotificationMessage } from '@codesandbox/notifications/lib/state';
 import { Reaction } from 'app/overmind';
 import prettify from 'app/src/app/utils/prettify';
 import { blocker } from 'app/utils/blocker';
 import { listen } from 'codesandbox-api';
+import FontFaceObserver from 'fontfaceobserver';
 import * as childProcess from 'node-services/lib/child_process';
 
-import sandboxFsSync from './sandboxFsSync';
 import {
   initializeCustomTheme,
   initializeExtensionsFolder,
@@ -28,6 +27,7 @@ import {
 } from './initializers';
 import { Linter } from './Linter';
 import { ModelsHandler, OnFileChangeData } from './ModelsHandler';
+import sandboxFsSync from './sandboxFsSync';
 import { getCode, getModel, getSelection, getVSCodePath } from './utils';
 import loadScript from './vscode-script-loader';
 import { Workbench } from './Workbench';
@@ -123,10 +123,7 @@ export class VSCodeEffect {
       sandboxFsSync.initialize({
         getSandboxFs: options.getSandboxFs,
       }),
-    ]).then(() => {
-      sandboxFsSync.sync();
-      return this.loadEditor(window.monaco, container);
-    });
+    ]).then(() => this.loadEditor(window.monaco, container));
 
     return this.initialized;
   }
@@ -262,16 +259,16 @@ export class VSCodeEffect {
       sandbox,
       this.onFileChange
     );
+
+    this.fs.sync();
   }
 
   public async openModule(module: Module) {
     await this.initialized;
-    await this.modelsHandler.changeModule(module);
-
-    const model = getModel(this.editorApi);
+    const model = await this.modelsHandler.changeModule(module);
 
     this.linter.lint(
-      getCode(this.editorApi),
+      model.getValue(),
       module.title,
       model.getVersionId(),
       this.options.getCurrentSandbox().template

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

@@ -1,22 +1,24 @@
 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 {
   getDirectoryPath,
   getModulePath,
 } from '@codesandbox/common/lib/sandbox/modules';
 import {
-  SandboxFs,
-  Module,
   Directory,
+  Module,
   Sandbox,
+  SandboxFs,
 } from '@codesandbox/common/lib/types';
+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 { blocker } from 'app/utils/blocker';
 import { json } from 'overmind';
+
 import { EXTENSIONS_LOCATION } from '../constants';
 import { getTypeFetcher } from '../extensionHostWorker/common/type-downloader';
-import { writeFile, rename, rmdir, unlink, mkdir } from './utils';
+import { mkdir, rename, rmdir, unlink, writeFile } from './utils';
 
 const global = getGlobal() as Window & { BrowserFS: any };
 
@@ -39,12 +41,27 @@ class SandboxFsSync {
   private options: SandboxFsSyncOptions;
   private types: any;
   private typesInfo: Promise<any>;
+  private initializingWorkers = blocker<void>();
+  // We do not want to send initial sandbox until
+  // all 3 filesystems are running
+  private workersInitializedCount = 0;
   public initialize(options: SandboxFsSyncOptions) {
     this.options = options;
     self.addEventListener('message', evt => {
-      if (evt.data.$type === 'request-data') {
-        this.sendTypes();
-        this.sync();
+      if (this.initializingWorkers.isResolved()) {
+        if (evt.data.$type === 'sync-types') {
+          this.syncDependencyTypings();
+        }
+
+        if (evt.data.$type === 'sync-sandbox') {
+          this.syncSandbox();
+        }
+      } else if (evt.data.$type === 'sync-sandbox') {
+        this.workersInitializedCount++;
+
+        if (this.workersInitializedCount === 3) {
+          this.initializingWorkers.resolve();
+        }
       }
     });
 
@@ -97,17 +114,18 @@ class SandboxFsSync {
     });
   }
 
-  public sync() {
-    global.postMessage(
-      {
-        $broadcast: true,
-        $type: 'sandbox-fs',
-        $data: json(this.options.getSandboxFs()),
-      },
-      protocolAndHost()
-    );
+  public async sync() {
+    await this.initializingWorkers.promise;
+
+    console.log('## SYNCING SANDBOX AND TYPINGS WITH WORKERS');
+    this.syncSandbox();
 
-    this.syncDependencyTypings();
+    try {
+      await this.syncDependencyTypings();
+    } catch (error) {
+      // Might not be a filesystem ready yet
+      // console.log('ERROR SYNCING', error);
+    }
   }
 
   public create(sandbox: Sandbox): SandboxFs {
@@ -138,21 +156,6 @@ class SandboxFsSync {
     return sandboxFs;
   }
 
-  public reset(sandbox: Sandbox): SandboxFs {
-    const sandboxFs = this.create(sandbox);
-
-    global.postMessage(
-      {
-        $broadcast: true,
-        $type: 'sandbox-fs',
-        $data: json(sandboxFs),
-      },
-      protocolAndHost()
-    );
-
-    return sandboxFs;
-  }
-
   public writeFile(fs: SandboxFs, module: Module) {
     writeFile(fs, json(module));
 
@@ -203,6 +206,17 @@ class SandboxFsSync {
     );
   }
 
+  private syncSandbox() {
+    global.postMessage(
+      {
+        $broadcast: true,
+        $type: 'sandbox-fs',
+        $data: json(this.options.getSandboxFs()),
+      },
+      protocolAndHost()
+    );
+  }
+
   private send(type: string, data: any) {
     global.postMessage(
       {
@@ -215,18 +229,14 @@ class SandboxFsSync {
   }
 
   private async syncDependencyTypings() {
-    try {
-      const syncDetails = await this.getDependencyTypingsSyncDetails();
-
-      if (syncDetails) {
-        this.types = await this.getDependencyTypings(
-          syncDetails.packageJsonContent,
-          syncDetails.autoInstall
-        );
-        this.sendTypes();
-      }
-    } catch (error) {
-      console.error('DependencyTypingsSync', error);
+    const syncDetails = await this.getDependencyTypingsSyncDetails();
+
+    if (syncDetails) {
+      this.types = await this.getDependencyTypings(
+        syncDetails.packageJsonContent,
+        syncDetails.autoInstall
+      );
+      this.sendTypes();
     }
   }
 

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

@@ -290,6 +290,7 @@ export const likeSandboxToggled: AsyncAction<{
   state.editor.sandboxes[id].userLiked = !state.editor.sandboxes[id].userLiked;
 };
 
+// This might be called from explorer or vscode
 export const moduleSelected: Action<{
   path?: string;
   id?: string;
@@ -313,9 +314,11 @@ export const moduleSelected: Action<{
       );
     }
 
-    actions.editor.internal.setCurrentModule(module);
+    if (module.shortid === state.editor.currentModuleShortid) {
+      return;
+    }
 
-    effects.vscode.openModule(module);
+    actions.editor.internal.setCurrentModule(module);
 
     if (state.live.isLive) {
       /*

packages/app/src/app/overmind/namespaces/editor/internalActions.ts

@@ -15,7 +15,6 @@ import { Action, AsyncAction } from 'app/overmind';
 import { sortObjectByKeys } from 'app/overmind/utils/common';
 import { getTemplate as computeTemplate } from 'codesandbox-import-utils/lib/create-sandbox/templates';
 import { mapValues } from 'lodash-es';
-import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
 
 export const ensureSandboxId: Action<string, string> = ({ state }, id) => {
   if (state.editor.sandboxes[id]) {
@@ -335,6 +334,7 @@ export const setCurrentModule: Action<Module> = (
   }
 
   state.editor.currentModuleShortid = module.shortid;
+  effects.vscode.openModule(module);
 };
 
 export const updateSandboxPackageJson: AsyncAction = async ({