more refactoring, solid stuff now

Author: christianalfoni

packages/app/package.json

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

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

@@ -1,7 +1,8 @@
+import { actions, dispatch } from 'codesandbox-api';
+import debounce from 'lodash-es/debounce';
 // @ts-ignore
 import LinterWorker from 'worker-loader?publicPath=/&name=monaco-linter.[hash:8].worker.js!./LinterWorker';
-import { dispatch, actions } from 'codesandbox-api';
-import debounce from 'lodash-es/debounce';
+
 import { getCurrentModelPath } from './utils';
 
 const requireAMDModule = paths =>
@@ -11,14 +12,15 @@ export class Linter {
   private worker: LinterWorker;
   private editor;
   private monaco;
-  private template;
   private isDisposed: boolean = false;
   // Can the template change during session of sandbox?
-  constructor(template, editor, monaco) {
-    this.template = template;
+  constructor(editor, monaco) {
     this.editor = editor;
     this.monaco = monaco;
-    this.initialize();
+    this.worker = new LinterWorker();
+
+    // This should be disposed?
+    this.worker.addEventListener('message', this.onMessage);
   }
 
   dispose(): null {
@@ -29,13 +31,6 @@ export class Linter {
     return null;
   }
 
-  private initialize() {
-    this.worker = new LinterWorker();
-
-    // This should be disposed?
-    this.worker.addEventListener('message', this.onMessage);
-  }
-
   private onMessage = event => {
     const { markers, version } = event.data;
     const activeEditor = this.editor.getActiveCodeEditor();
@@ -63,22 +58,27 @@ export class Linter {
     }
   };
 
-  lint = debounce(async (code: string, title: string, version: number) => {
-    if (!title || this.isDisposed) {
-      return;
-    }
+  lint = debounce(
+    async (code: string, title: string, version: number, template: string) => {
+      if (!title || this.isDisposed) {
+        return;
+      }
 
-    const mode = (await this.getMonacoMode(title)) || '';
+      const mode = (await this.getMonacoMode(title)) || '';
 
-    if (['javascript', 'typescript', 'typescriptreact', 'vue'].includes(mode)) {
-      this.worker.postMessage({
-        code,
-        title,
-        version,
-        template: this.template,
-      });
-    }
-  }, 100);
+      if (
+        ['javascript', 'typescript', 'typescriptreact', 'vue'].includes(mode)
+      ) {
+        this.worker.postMessage({
+          code,
+          title,
+          version,
+          template,
+        });
+      }
+    },
+    100
+  );
 
   private async getMonacoMode(title: string) {
     if (title == null) return 'javascript';

…/overmind/effects/vscode/ModelHandler.ts …overmind/effects/vscode/ModelsHandler.tspackages/app/src/app/overmind/effects/vscode/ModelHandler.ts renamed to packages/app/src/app/overmind/effects/vscode/ModelsHandler.ts packages/app/src/app/overmind/effects/vscode/ModelHandler.ts renamed to packages/app/src/app/overmind/effects/vscode/ModelsHandler.ts

@@ -13,7 +13,7 @@ import { actions, dispatch } from 'codesandbox-api';
 import { css } from 'glamor';
 import { TextOperation } from 'ot';
 
-import { getModel } from './utils';
+import { getCurrentModelPath, getModel, getVSCodePath } from './utils';
 
 // @ts-ignore
 const fadeIn = css.keyframes('fadeIn', {
@@ -38,12 +38,12 @@ export type OnFileChangeData = {
 
 export type OnFileChangeCallback = (data: OnFileChangeData) => void;
 
-export class ModelHandler {
+export class ModelsHandler {
   private modelAddedListener: { dispose: Function };
   private modelRemovedListener: { dispose: Function };
   private onChangeCallback: OnFileChangeCallback;
   private sandbox: Sandbox;
-  private editor;
+  private editorApi;
   private monaco;
   private userClassesGenerated = {};
   private userSelectionDecorations = {};
@@ -57,15 +57,66 @@ export class ModelHandler {
     };
   } = {};
 
-  constructor(editor, monaco, sandbox: Sandbox, cb: OnFileChangeCallback) {
-    this.editor = editor;
+  constructor(editorApi, monaco, sandbox: Sandbox, cb: OnFileChangeCallback) {
+    this.editorApi = editorApi;
     this.monaco = monaco;
     this.sandbox = sandbox;
     this.onChangeCallback = cb;
     this.listenForChanges();
   }
 
-  applyOperations(operations: { [moduleShortid: string]: any }) {
+  public dispose(): null {
+    this.modelAddedListener.dispose();
+    this.modelRemovedListener.dispose();
+    Object.keys(this.modelListeners).forEach(p => {
+      this.modelListeners[p].listener.dispose();
+    });
+    this.modelListeners = {};
+
+    return null;
+  }
+
+  public changeModule = (module: Module) => {
+    const { sandbox } = this;
+
+    const path = getModulePath(sandbox.modules, sandbox.directories, module.id);
+
+    if (path && getCurrentModelPath(this.editorApi) !== path) {
+      return this.editorApi.openFile(path);
+    }
+
+    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;
+      }
+
+      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', ''));
+            }
+          });
+      }
+    });
+  };
+
+  public applyOperations(operations: { [moduleShortid: string]: any }) {
     const operationsJSON = operations.toJSON ? operations.toJSON() : operations;
 
     return Promise.all(
@@ -90,11 +141,9 @@ export class ModelHandler {
             moduleId
           );
 
-        const modelEditor =
-          this.editor &&
-          this.editor.editorService.editors.find(
-            editor => editor.resource && editor.resource.path === modulePath
-          );
+        const modelEditor = this.editorApi.editorService.editors.find(
+          editor => editor.resource && editor.resource.path === modulePath
+        );
 
         // Apply the code to the current module code itself
         const module = this.sandbox.modules.find(
@@ -143,18 +192,18 @@ export class ModelHandler {
     );
   }
 
-  updateUserSelections(
+  public updateUserSelections(
     module,
     userSelections: Array<UserSelection | EditorSelection>
   ) {
-    const model = getModel(this.editor);
+    const model = getModel(this.editorApi);
 
     if (!model) {
       return;
     }
 
     const lines = model.getLinesContent() || [];
-    const activeEditor = this.editor.getActiveEditor();
+    const activeEditor = this.editorApi.getActiveEditor();
 
     userSelections.forEach((data: EditorSelection & UserSelection) => {
       const { userId } = data;
@@ -320,21 +369,10 @@ export class ModelHandler {
     });
   }
 
-  dispose(): null {
-    this.modelAddedListener.dispose();
-    this.modelRemovedListener.dispose();
-    Object.keys(this.modelListeners).forEach(p => {
-      this.modelListeners[p].listener.dispose();
-    });
-    this.modelListeners = {};
-
-    return null;
-  }
-
   private applyOperationToModel(
     operation,
     pushStack = false,
-    model = this.editor.getActiveCodeEditor().getModel()
+    model = this.editorApi.getActiveCodeEditor().getModel()
   ) {
     const results: Array<{
       range: unknown;
@@ -405,7 +443,7 @@ export class ModelHandler {
   }
 
   private listenForChanges() {
-    this.modelAddedListener = this.editor.textFileService.modelService.onModelAdded(
+    this.modelAddedListener = this.editorApi.textFileService.modelService.onModelAdded(
       model => {
         if (this.modelListeners[model.uri.path] === undefined) {
           let module: Module;
@@ -433,7 +471,7 @@ export class ModelHandler {
       }
     );
 
-    this.modelRemovedListener = this.editor.textFileService.modelService.onModelRemoved(
+    this.modelRemovedListener = this.editorApi.textFileService.modelService.onModelRemoved(
       model => {
         if (this.modelListeners[model.uri.path]) {
           this.modelListeners[model.uri.path].listener.dispose();