Merge branch 'vscodeeffect' of https://github.com/codesandbox/codesandbox-client into vscodeeffect

Author: christianalfoni

packages/app/src/app/components/CodeEditor/Monaco/MonacoReactComponent.js

@@ -35,10 +35,9 @@ class MonacoEditor extends React.PureComponent {
     }
 
     // eslint-disable-next-line global-require
-    require('app/overmind/effects/vscode/vscode-script-loader').default(
-      ['vs/editor/editor.main'],
-      false
-    )(() => {
+    require('app/overmind/effects/vscode/vscode-script-loader').default(false, [
+      'vs/editor/editor.main',
+    ])(() => {
       this.initMonaco();
     });
   };

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

@@ -34,12 +34,22 @@ export type OnFileChangeData = {
   model?: any;
 };
 
+export type OnOperationAppliedData = {
+  moduleShortid: string;
+  title: string;
+  code: string;
+  model: any;
+};
+
 export type OnFileChangeCallback = (data: OnFileChangeData) => void;
 
+export type OnOperationAppliedCallback = (data: OnOperationAppliedData) => void;
+
 export class ModelsHandler {
   private modelAddedListener: { dispose: Function };
   private modelRemovedListener: { dispose: Function };
   private onChangeCallback: OnFileChangeCallback;
+  private onOperationAppliedCallback: OnOperationAppliedCallback;
   private sandbox: Sandbox;
   private editorApi;
   private monaco;
@@ -55,11 +65,18 @@ export class ModelsHandler {
     };
   } = {};
 
-  constructor(editorApi, monaco, sandbox: Sandbox, cb: OnFileChangeCallback) {
+  constructor(
+    editorApi,
+    monaco,
+    sandbox: Sandbox,
+    onChangeCallback: OnFileChangeCallback,
+    onOperationAppliedCallback: OnOperationAppliedCallback
+  ) {
     this.editorApi = editorApi;
     this.monaco = monaco;
     this.sandbox = sandbox;
-    this.onChangeCallback = cb;
+    this.onChangeCallback = onChangeCallback;
+    this.onOperationAppliedCallback = onOperationAppliedCallback;
     this.listenForChanges();
   }
 
@@ -77,80 +94,43 @@ export class ModelsHandler {
   public changeModule = async (module: Module) => {
     if (getCurrentModelPath(this.editorApi) !== module.path) {
       const file = await this.editorApi.openFile(module.path);
-
       return file.getModel();
     }
 
     return Promise.resolve(getModel(this.editorApi));
   };
 
-  public applyOperations(operations: { [moduleShortid: string]: any }) {
-    const operationsJSON = operations.toJSON ? operations.toJSON() : operations;
+  public async applyOperation(moduleShortid: string, operation: any) {
+    const module = this.sandbox.modules.find(m => m.shortid === moduleShortid);
 
-    return Promise.all(
-      Object.keys(operationsJSON).map(moduleShortid => {
-        const operation = TextOperation.fromJSON(operationsJSON[moduleShortid]);
-
-        const foundModule = this.sandbox.modules.find(
-          m => m.shortid === moduleShortid
-        );
-
-        if (!foundModule) {
-          return Promise.resolve();
-        }
-
-        const modulePath = '/sandbox' + foundModule.path;
-
-        const modelEditor = this.editorApi.editorService.editors.find(
-          editor => editor.resource && editor.resource.path === modulePath
-        );
+    if (!module) {
+      return;
+    }
 
-        // Apply the code to the current module code itself
-        const module = this.sandbox.modules.find(
-          m => m.shortid === moduleShortid
-        );
+    const modulePath = '/sandbox' + module.path;
 
-        if (!modelEditor) {
-          if (!module) {
-            return Promise.resolve();
-          }
+    const modelEditor = this.editorApi.editorService.editors.find(
+      editor => editor.resource && editor.resource.path === modulePath
+    );
 
-          try {
-            const code = operation.apply(module.code || '');
-
-            // Should this run? We are applying changes from the outside,
-            // should not trigger a change?
-            this.onChangeCallback({
-              code,
-              moduleShortid: module.shortid,
-              title: module.title,
-            });
-          } catch (e) {
-            throw new Error('Module state mismatch');
-          }
+    let model;
 
-          return Promise.resolve();
-        }
+    if (modelEditor) {
+      model = (await modelEditor.textModelReference).object;
+    } else {
+      model = await this.editorApi.textFileService.models.loadOrCreate(
+        this.monaco.Uri.file(modulePath)
+      );
+    }
 
-        return modelEditor.textModelReference.then(model => {
-          this.applyOperationToModel(
-            operation,
-            false,
-            model.object.textEditorModel
-          );
+    this.applyOperationToModel(operation, false, model.textEditorModel);
 
-          if (module) {
-            // Should this really run? We have applied from the outside
-            this.onChangeCallback({
-              code: model.object.textEditorModel.getValue(),
-              moduleShortid: module.shortid,
-              title: module.title,
-              model,
-            });
-          }
-        });
-      })
-    );
+    this.onOperationAppliedCallback({
+      code: model.textEditorModel.getValue(),
+      moduleShortid: module.shortid,
+      title: module.title,
+      model: model.textEditorModel,
+    });
   }
 
   public updateUserSelections(

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

@@ -1,3 +1,5 @@
 export const EXTENSIONS_LOCATION = process.env.VSCODE
   ? '/vscode/extensions-bundle'
   : '/public/vscode-extensions/v10';
+
+export const VIM_EXTENSION_ID = 'vscodevim.vim';

packages/app/src/app/overmind/effects/vscode/extensionHostWorker/workers/ext-host-worker.ts

@@ -42,7 +42,7 @@ self.addEventListener('message', async e => {
       process.env = data.data.env || {};
       process.env.HOME = '/home';
 
-      loader()(() => {
+      loader(true)(() => {
         ctx.require(
           ['vs/workbench/services/extensions/node/extensionHostProcess'],
           () => {

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

@@ -18,14 +18,19 @@ import { listen } from 'codesandbox-api';
 import FontFaceObserver from 'fontfaceobserver';
 import * as childProcess from 'node-services/lib/child_process';
 
+import { VIM_EXTENSION_ID } from './constants';
 import {
   initializeCustomTheme,
   initializeExtensionsFolder,
   initializeSettings,
   initializeThemeCache,
 } from './initializers';
 import { Linter } from './Linter';
-import { ModelsHandler, OnFileChangeData } from './ModelsHandler';
+import {
+  ModelsHandler,
+  OnFileChangeData,
+  OnOperationAppliedData,
+} from './ModelsHandler';
 import sandboxFsSync from './sandboxFsSync';
 import { getSelection } from './utils';
 import loadScript from './vscode-script-loader';
@@ -36,6 +41,7 @@ export type VsCodeOptions = {
   getCurrentModule: () => Module;
   getSandboxFs: () => SandboxFs;
   onCodeChange: (data: OnFileChangeData) => void;
+  onOperationApplied: (data: OnOperationAppliedData) => void;
   onSelectionChange: (selection: any) => void;
   reaction: Reaction;
   // These two should be removed
@@ -117,7 +123,7 @@ export class VSCodeEffect {
     this.initialized = Promise.all([
       new FontFaceObserver('dm').load(),
       new Promise(resolve => {
-        loadScript(['vs/editor/codesandbox.editor.main'])(resolve);
+        loadScript(true, ['vs/editor/codesandbox.editor.main'])(resolve);
       }),
       sandboxFsSync.initialize({
         getSandboxFs: options.getSandboxFs,
@@ -174,7 +180,7 @@ export class VSCodeEffect {
 
   public setVimExtensionEnabled(enabled: boolean) {
     if (enabled) {
-      this.enableExtension('vscodevim.vim');
+      this.enableExtension(VIM_EXTENSION_ID);
     } else {
       // Auto disable vim extension
       if (
@@ -188,24 +194,23 @@ export class VSCodeEffect {
         );
       }
 
-      this.disableExtension('vscodevim.vim');
+      this.disableExtension(VIM_EXTENSION_ID);
     }
   }
 
-  public async applyOperations(operations: {
-    [x: string]: (string | number)[];
-  }) {
+  public async applyOperation(
+    moduleShortid: string,
+    operation: (string | number)[]
+  ) {
     this.isApplyingCode = true;
 
-    // The call to "apployOperations" should "try" and treat error as "moduleStateMismatch"
-    // this.props.onModuleStateMismatch();
-
     try {
-      await this.modelsHandler.applyOperations(operations);
+      await this.modelsHandler.applyOperation(moduleShortid, operation);
     } catch (error) {
       this.isApplyingCode = false;
       throw error;
     }
+    this.isApplyingCode = false;
   }
 
   public updateOptions(options: { readOnly: boolean }) {
@@ -244,7 +249,8 @@ export class VSCodeEffect {
       this.editorApi,
       this.monaco,
       sandbox,
-      this.onFileChange
+      this.onFileChange,
+      this.onOperationApplied
     );
 
     this.fs.sync();
@@ -397,7 +403,7 @@ export class VSCodeEffect {
     initializeSettings();
 
     if (localStorage.getItem('settings.vimmode') === 'true') {
-      this.enableExtension('vscodevim.vim');
+      this.enableExtension(VIM_EXTENSION_ID);
     }
 
     this.workbench.addWorkbenchActions();
@@ -605,13 +611,16 @@ export class VSCodeEffect {
     }
   };
 
-  private onFileChange = (data: OnFileChangeData) => {
-    if (this.isApplyingCode) {
-      return;
+  private onOperationApplied = (data: OnOperationAppliedData) => {
+    if (data.moduleShortid === this.options.getCurrentModule().shortid) {
+      this.lint(data.title, data.model);
     }
 
-    this.lint(data.title, data.model);
+    this.options.onOperationApplied(data);
+  };
 
+  private onFileChange = (data: OnFileChangeData) => {
+    this.lint(data.title, data.model);
     this.options.onCodeChange(data);
   };
 

packages/app/src/app/overmind/effects/vscode/vscode-script-loader.ts

@@ -364,7 +364,7 @@ function initializeRequires() {
   });
 }
 
-export default function(requiredModule?: string[], isVSCode = true) {
+export default function(isVSCode: boolean, requiredModule?: string[]) {
   var METADATA = isVSCode ? VSCODE_METADATA : MONACO_METADATA;
   var IS_FILE_PROTOCOL = global.location.protocol === 'file:';
   var DIRNAME = null;

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

@@ -171,6 +171,24 @@ export const codeSaved: AsyncAction<{
   }
 );
 
+export const onOperationApplied: Action<{
+  moduleShortid: string;
+  code: string;
+}> = ({ state, actions }, { code, moduleShortid }) => {
+  const module = state.editor.currentSandbox.modules.find(
+    m => m.shortid === moduleShortid
+  );
+
+  if (!module) {
+    return;
+  }
+
+  actions.editor.internal.setModuleCode({
+    module,
+    code,
+  });
+};
+
 export const codeChanged: Action<{
   moduleShortid: string;
   code: string;
@@ -332,11 +350,6 @@ export const moduleSelected: Action<{
     actions.editor.internal.setCurrentModule(module);
 
     if (state.live.isLive) {
-      /*
-      state.editor.pendingUserSelections = actions.live.internal.getSelectionsForModule(
-        module
-      );
-      */
       effects.vscode.updateUserSelections(
         actions.live.internal.getSelectionsForModule(module)
       );

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

@@ -5,7 +5,6 @@ import { ViewConfig } from '@codesandbox/common/lib/templates/template';
 import {
   DevToolsTabPosition,
   DiffTab,
-  EditorSelection,
   Module,
   ModuleCorrection,
   ModuleError,
@@ -38,10 +37,6 @@ type State = {
   error: string | null;
   isResizing: boolean;
   changedModuleShortids: string[];
-  pendingOperations: {
-    [id: string]: Array<string | number>;
-  };
-  pendingUserSelections: EditorSelection[];
   currentTabId: string;
   tabs: Tabs;
   errors: ModuleError[];
@@ -88,8 +83,6 @@ export const state: State = {
   errors: [],
   sessionFrozen: true,
   corrections: [],
-  pendingOperations: {},
-  pendingUserSelections: [],
   isInProjectView: false,
   forceRender: 0,
   initialPath: '/',

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

@@ -472,6 +472,7 @@ export const moduleCreated: AsyncAction<{
       module.id = updatedModule.id;
       module.shortid = updatedModule.shortid;
 
+      effects.vscode.fs.writeFile(state.editor.modulesByPath, module);
       state.editor.currentModuleShortid = module.shortid;
 
       if (state.live.isCurrentEditor) {