VSCode editor bugfixes

Author: CompuIves

packages/app/src/app/components/CodeEditor/VSCode/index.js

@@ -99,6 +99,13 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
   transpilationListener: ?Function;
   sizeProbeInterval: ?number;
 
+  modelSelectionListener: {
+    dispose: Function,
+  };
+  modelContentChangedListener: {
+    dispose: Function,
+  };
+
   constructor(props: Props) {
     super(props);
     this.state = {
@@ -160,16 +167,19 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
     window.removeEventListener('resize', this.resizeEditor);
     // Make sure that everything has run before disposing, to prevent any inconsistensies
 
-    // if (this.editor) {
-    //   this.editor.dispose();
-    // }
     if (this.lintWorker) {
       this.lintWorker.terminate();
     }
     if (this.transpilationListener) {
       this.transpilationListener();
     }
     clearInterval(this.sizeProbeInterval);
+    if (this.modelContentChangedListener) {
+      this.modelContentChangedListener.dispose();
+    }
+    if (this.modelSelectionListener) {
+      this.modelSelectionListener.dispose();
+    }
 
     if (this.disposeInitializer) {
       this.disposeInitializer();
@@ -274,22 +284,20 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
       monaco: this.monaco,
     };
 
-    let modelContentChangedListener;
-    let modelSelectionListener;
     editor.editorService.onDidActiveEditorChange(() => {
-      if (modelContentChangedListener) {
-        modelContentChangedListener.dispose();
+      if (this.modelContentChangedListener) {
+        this.modelContentChangedListener.dispose();
       }
-      if (modelSelectionListener) {
-        modelSelectionListener.dispose();
+      if (this.modelSelectionListener) {
+        this.modelSelectionListener.dispose();
       }
 
       const activeEditor = editor.getActiveCodeEditor();
 
       if (activeEditor) {
         activeEditor.updateOptions({ readOnly: this.props.readOnly });
 
-        modelContentChangedListener = activeEditor.onDidChangeModelContent(
+        this.modelContentChangedListener = activeEditor.onDidChangeModelContent(
           e => {
             const { isLive, sendTransforms } = this.props;
 
@@ -301,7 +309,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
           }
         );
 
-        modelSelectionListener = activeEditor.onDidChangeCursorSelection(
+        this.modelSelectionListener = activeEditor.onDidChangeCursorSelection(
           selectionChange => {
             // TODO: add another debounced action to send the current data. So we can
             // have the correct cursor pos no matter what
@@ -718,6 +726,12 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
     dependencies: $PropertyType<Props, 'dependencies'>
   ): Promise<null> =>
     new Promise(resolve => {
+      if (this.modelContentChangedListener) {
+        this.modelContentChangedListener.dispose();
+      }
+      if (this.modelSelectionListener) {
+        this.modelSelectionListener.dispose();
+      }
       this.sandbox = newSandbox;
       this.currentModule = newCurrentModule;
       this.dependencies = dependencies;
@@ -859,7 +873,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
           .map(error => {
             if (error) {
               return {
-                severity: this.monaco.Severity.Error,
+                severity: this.monaco.MarkerSeverity.Error,
                 startColumn: 1,
                 startLineNumber: error.line,
                 endColumn: error.column,
@@ -898,8 +912,8 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
               return {
                 severity:
                   correction.severity === 'warning'
-                    ? this.monaco.Severity.Warning
-                    : this.monaco.Severity.Notice,
+                    ? this.monaco.MarkerSeverity.Warning
+                    : this.monaco.MarkerSeverity.Notice,
                 startColumn: correction.column,
                 startLineNumber: correction.line,
                 endColumn: 1,

packages/app/src/app/store/actions.js

@@ -29,6 +29,18 @@ export function callVSCodeCallback({ props }) {
   }
 }
 
+export function callVSCodeCallbackError({ props }) {
+  const { cbID } = props;
+  if (cbID) {
+    if (window.cbs && window.cbs[cbID]) {
+      const errorMessage =
+        props.message || 'Something went wrong while saving the file.';
+      window.cbs[cbID](new Error(errorMessage), undefined);
+      delete window.cbs[cbID];
+    }
+  }
+}
+
 export function setWorkspace({ state, props }) {
   state.set('workspace.project.title', props.sandbox.title || '');
   state.set('workspace.project.description', props.sandbox.description || '');

packages/app/src/app/store/modules/editor/actions.js

@@ -480,7 +480,7 @@ export function updateTemplateIfSSE({ state, api }) {
   }
 }
 
-export function saveModuleCode({ props, state, api, recover }) {
+export function saveModuleCode({ props, state, api, recover, path }) {
   const sandbox = state.get('editor.currentSandbox');
   const moduleToSave = sandbox.modules.find(
     module => module.shortid === props.moduleShortid
@@ -504,6 +504,14 @@ export function saveModuleCode({ props, state, api, recover }) {
       );
 
       if (index > -1) {
+        state.set(
+          `editor.sandboxes.${newSandbox.id}.modules.${index}.insertedAt`,
+          x.insertedAt
+        );
+        state.set(
+          `editor.sandboxes.${newSandbox.id}.modules.${index}.updatedAt`,
+          x.updatedAt
+        );
         if (newModuleToSave.code === codeToSave) {
           state.set(
             `editor.sandboxes.${newSandbox.id}.modules.${index}.savedCode`,
@@ -515,14 +523,20 @@ export function saveModuleCode({ props, state, api, recover }) {
             `editor.sandboxes.${newSandbox.id}.modules.${index}.savedCode`,
             x.code
           );
-          throw new Error(
-            `The code of '${title}' changed while saving, will ignore the save now. Please try again with saving.`
-          );
+
+          return path.codeOutdated({
+            message: `The code of '${title}' changed while saving. Please try again with saving.`,
+          });
         }
       }
 
-      return x;
-    });
+      return path.success(x);
+    })
+    .catch(e =>
+      path.error({
+        message: e.message,
+      })
+    );
 }
 
 export function getCurrentModuleId({ state }) {
@@ -624,3 +638,19 @@ export function getSavedCode({ props, state }) {
 
   return {};
 }
+
+export function touchFile({ props, state }) {
+  const sandbox = state.get('editor.currentSandbox');
+  const moduleIndex = sandbox.modules.findIndex(
+    m => m.shortid === props.moduleShortid
+  );
+
+  if (moduleIndex > -1) {
+    state.set(
+      `editor.currentSandbox.modules.${moduleIndex}.updatedAt`,
+      new Date().toString()
+    );
+  }
+
+  return {};
+}

packages/app/src/app/store/modules/editor/model.js

@@ -34,6 +34,8 @@ const Directory = types.model({
   shortid: types.string,
   sourceId: types.string,
   title: types.string,
+  insertedAt: types.string,
+  updatedAt: types.string,
 });
 
 const Module = types.model({
@@ -45,6 +47,8 @@ const Module = types.model({
   shortid: types.string,
   sourceId: types.string,
   title: types.string,
+  insertedAt: types.string,
+  updatedAt: types.string,
 });
 
 const Git = types.model({

packages/app/src/app/store/modules/editor/sequences.js

@@ -1,7 +1,11 @@
 import { set, when, equals, toggle, increment } from 'cerebral/operators';
 import { state, props } from 'cerebral/tags';
 import * as actions from './actions';
-import { closeTabByIndex, callVSCodeCallback } from '../../actions';
+import {
+  closeTabByIndex,
+  callVSCodeCallback,
+  callVSCodeCallbackError,
+} from '../../actions';
 import { renameModule } from '../files/sequences';
 import {
   sendModuleSaved,
@@ -203,30 +207,40 @@ export const saveCode = [
   },
 
   actions.saveModuleCode,
-  actions.setModuleSaved,
-  callVSCodeCallback,
-  when(state`editor.currentSandbox.originalGit`),
   {
-    true: [
-      when(state`workspace.openedWorkspaceItem`, item => item === 'github'),
+    success: [
+      actions.setModuleSaved,
+      callVSCodeCallback,
+      when(state`editor.currentSandbox.originalGit`),
       {
-        true: fetchGitChanges,
+        true: [
+          when(state`workspace.openedWorkspaceItem`, item => item === 'github'),
+          {
+            true: fetchGitChanges,
+            false: [],
+          },
+        ],
         false: [],
       },
+      sendModuleSaved,
+
+      actions.updateTemplateIfSSE,
     ],
-    false: [],
-  },
-  sendModuleSaved,
 
-  actions.updateTemplateIfSSE,
+    error: [callVSCodeCallbackError],
+    codeOutdated: [
+      addNotification(props`message`, 'warning'),
+      callVSCodeCallbackError,
+    ],
+  },
 ];
 
 export const discardModuleChanges = [
   track('Code Discarded', {}),
   actions.getSavedCode,
   when(props`code`),
   {
-    true: [changeCode],
+    true: [changeCode, actions.touchFile],
     false: [],
   },
 ];

packages/app/src/app/store/modules/files/actions.js

@@ -191,6 +191,8 @@ export function createOptimisticModule({ state, props, utils }) {
     shortid: utils.createOptimisticId(),
     isBinary: props.isBinary === undefined ? false : props.isBinary,
     sourceId: state.get('editor.currentSandbox.sourceId'),
+    insertedAt: new Date().toString(),
+    updatedAt: new Date().toString(),
   };
 
   return { optimisticModule };
@@ -203,6 +205,8 @@ export function createOptimisticDirectory({ state, props, utils }) {
     directoryShortid: props.directoryShortid || null,
     shortid: utils.createOptimisticId(),
     sourceId: state.get('editor.currentSandbox.sourceId'),
+    insertedAt: new Date().toString(),
+    updatedAt: new Date().toString(),
   };
 
   return { optimisticDirectory };

packages/app/src/app/store/modules/files/sequences.js

@@ -2,7 +2,12 @@ import { push, set, concat } from 'cerebral/operators';
 import { state, props } from 'cerebral/tags';
 import { ensureOwnedEditable, closeModal } from '../../sequences';
 import { setCurrentModule, addNotification } from '../../factories';
-import { closeTabByIndex, setModal, callVSCodeCallback } from '../../actions';
+import {
+  closeTabByIndex,
+  setModal,
+  callVSCodeCallback,
+  callVSCodeCallbackError,
+} from '../../actions';
 import {
   sendModuleCreated,
   sendModuleDeleted,
@@ -55,7 +60,7 @@ export const massCreateModules = [
       sendMassModuleCreated,
       callVSCodeCallback,
     ],
-    error: [],
+    error: [callVSCodeCallbackError],
   },
 ];
 

standalone-packages/codesandbox-browserfs/src/backend/CodeSandboxEditorFS.ts

@@ -14,6 +14,8 @@ import { ErrorCode, ApiError } from '../core/api_error';
 export interface IModule {
   path: string;
   code: string | undefined;
+  updatedAt: string;
+  insertedAt: string;
 }
 
 export interface IManager {
@@ -159,7 +161,11 @@ export default class CodeSandboxEditorFS extends SynchronousFileSystem
 
     const stats = new Stats(
       FileType.FILE,
-      (moduleInfo.code || '').length
+      (moduleInfo.code || '').length,
+      undefined,
+      new Date(),
+      new Date(moduleInfo.updatedAt),
+      new Date(moduleInfo.insertedAt)
     );
 
     return stats;
@@ -178,7 +184,7 @@ export default class CodeSandboxEditorFS extends SynchronousFileSystem
 
     const { code = '' } = moduleInfo;
     const buffer = Buffer.from(code || '');
-    const stats = new Stats(FileType.FILE, buffer.length);
+    const stats = new Stats(FileType.FILE, buffer.length, undefined, new Date(), new Date(moduleInfo.updatedAt), new Date(moduleInfo.insertedAt));
 
     return new CodeSandboxFile(this, p, flag, stats, buffer);
   }

standalone-packages/monaco-typescript/src/fetchDependencyTypings.ts

@@ -307,6 +307,7 @@ const getFileTypes = (
 
   if (fetchedPaths[virtualPath]) return null;
 
+  console.log(`${depUrl}${depPath}`);
   return doFetch(`${depUrl}${depPath}`).then(typings => {
     if (fetchedPaths[virtualPath]) return null;
 
@@ -388,8 +389,8 @@ function fetchFromMeta(dependency, version, fetchedPaths) {
 }
 
 function fetchFromTypings(dependency, version, fetchedPaths) {
-  const depUrl = `${ROOT_URL}${dependency}@${version}`;
-  return doFetch(`${depUrl}/package.json`)
+  const depUrl = `${ROOT_URL}${dependency}@${version}/`;
+  return doFetch(`${depUrl}package.json`)
     .then(response => JSON.parse(response))
     .then(packageJSON => {
       const types = packageJSON.typings || packageJSON.types;