fix adding operations to non existing models

Author: christianalfoni

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/index.ts

@@ -18,25 +18,30 @@ 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';
 import { Workbench } from './Workbench';
-import { VIM_EXTENSION_ID } from './constants';
 
 export type VsCodeOptions = {
   getCurrentSandbox: () => Sandbox;
   getCurrentModule: () => Module;
   getSandboxFs: () => SandboxFs;
   onCodeChange: (data: OnFileChangeData) => void;
+  onOperationApplied: (data: OnOperationAppliedData) => void;
   onSelectionChange: (selection: any) => void;
   reaction: Reaction;
   // These two should be removed
@@ -193,20 +198,19 @@ export class VSCodeEffect {
     }
   }
 
-  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 }) {
@@ -245,7 +249,8 @@ export class VSCodeEffect {
       this.editorApi,
       this.monaco,
       sandbox,
-      this.onFileChange
+      this.onFileChange,
+      this.onOperationApplied
     );
 
     this.fs.sync();
@@ -606,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/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/live/actions.ts

@@ -1,7 +1,6 @@
 import { LiveMessage, LiveMessageEvent } from '@codesandbox/common/lib/types';
 import { Action, AsyncAction, Operator } from 'app/overmind';
 import { withLoadApp } from 'app/overmind/factories';
-import { TextOperation } from 'ot';
 import { filter, fork, pipe } from 'overmind';
 
 import eventToTransform from '../../utils/event-to-transform';
@@ -101,25 +100,9 @@ export const applyTransformation: Action<{
   operation: any;
   moduleShortid: string;
 }> = ({ state, effects }, { operation, moduleShortid }) => {
-  let pendingOperation;
-
-  const existingPendingOperation =
-    state.editor.pendingOperations[moduleShortid];
-
-  if (existingPendingOperation) {
-    pendingOperation = TextOperation.fromJSON(existingPendingOperation)
-      .compose(operation)
-      .toJSON();
-  } else {
-    pendingOperation = operation.toJSON();
-  }
-
-  state.editor.pendingOperations[moduleShortid] = pendingOperation;
-  effects.vscode.applyOperations(state.editor.pendingOperations);
-  // this.props.signals.live.onOperationApplied();
-  // Removed this action... but this whole object thing here does not seem to make sense
-  state.editor.pendingOperations = {};
   state.live.receivingCode = false;
+
+  effects.vscode.applyOperation(moduleShortid, operation);
 };
 
 export const onCodeReceived: Action = ({ state }) => {
@@ -151,17 +134,6 @@ export const onSelectionChanged: Action<any> = (
   }
 };
 
-/*
-Not run anymore
-export const onSelectionDecorationsApplied: Action = ({ state }) => {
-  // We only clear it out if we actually need to. There is a reaction
-  // running that reacts to any change here
-  if (state.editor.pendingUserSelections.length) {
-    state.editor.pendingUserSelections = [];
-  }
-};
-*/
-
 export const onModeChanged: Action<{ mode: string }> = (
   { state, effects },
   { mode }

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

@@ -24,14 +24,6 @@ export const clearUserSelections: Action<any> = (
             color: null,
           },
         ]);
-        /*
-        state.editor.pendingUserSelections.push({
-          userId,
-          selection: null,
-          name: null,
-          color: null,
-        });
-        */
       }
     }
   };

packages/app/src/app/overmind/namespaces/live/liveMessageOperators.ts

@@ -343,9 +343,6 @@ export const onLiveMode: Operator<
     state.live.roomInfo.mode = data.mode;
   }
   actions.live.internal.clearUserSelections(null);
-  state.editor.pendingUserSelections = state.editor.pendingUserSelections.concat(
-    actions.live.internal.getSelectionsForModule(state.editor.currentModule)
-  );
 });
 
 export const onLiveChatEnabled: Operator<

packages/app/src/app/overmind/onInitialize.ts

@@ -64,6 +64,7 @@ export const onInitialize: OnInitialize = async (
     getCurrentSandbox: () => state.editor.currentSandbox,
     getCurrentModule: () => state.editor.currentModule,
     getSandboxFs: () => state.editor.modulesByPath,
+    onOperationApplied: actions.editor.onOperationApplied,
     onCodeChange: actions.editor.codeChanged,
     onSelectionChange: actions.live.onSelectionChanged,
     reaction: overmindInstance.reaction,