Getting overmind ready (codesandbox#2443)

* Fixes

* Remove console.log

* Push

* fix linting issues

* added live user

* Fix LiveUser erro

* Fix type error

* Apply suggestions from code review

Co-Authored-By: Michaël De Boey <[email protected]>

* Apply type styling fix

* Fix types

Author: CompuIves

.eslintrc

@@ -41,13 +41,7 @@
       }
     ],
     "no-param-reassign": ["error", { "props": false }],
-    "camelcase": [
-      "error",
-      {
-        "allow": ["UNSAFE_componentDidMount", "_id$", "^UNSAFE_"],
-        "properties": "never"
-      }
-    ],
+    "camelcase": 0,
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
     "jsx-a11y/href-no-hash": "off",

packages/app/.eslintignore

@@ -1,2 +1 @@
-src/app/overmind/**/*
 src/app/vscode/**/*

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

@@ -87,17 +87,17 @@ export class VSCode extends React.Component<Props> implements Editor {
   sandbox: Props['sandbox'];
   currentModule: Props['currentModule'];
   currentTitle: string;
-  currentDirectoryShortid: string | undefined;
+  currentDirectoryShortid: string | null;
   settings: Props['settings'];
   dependencies: Props['dependencies'] | undefined;
   tsconfig: Props['tsconfig'] | undefined;
   disposeInitializer?: Function;
-  lintWorker: Worker | undefined;
+  lintWorker: Worker | null;
   editor?: any;
   monaco?: any;
   receivingCode: boolean = false;
   codeSandboxAPIListener: () => void;
-  sizeProbeInterval: number | null;
+  sizeProbeInterval: number | undefined;
 
   modelSelectionListener: {
     dispose: () => void;
@@ -121,7 +121,7 @@ export class VSCode extends React.Component<Props> implements Editor {
     this.tsconfig = props.tsconfig;
 
     this.lintWorker = null;
-    this.sizeProbeInterval = null;
+    this.sizeProbeInterval = undefined;
 
     this.resizeEditor = debounce(this.resizeEditorInstantly, 150);
     this.commitLibChanges = debounce(this.commitLibChangesInstantly, 300);
@@ -562,7 +562,9 @@ export class VSCode extends React.Component<Props> implements Editor {
         // Something went wrong while composing the operation, so we're opting for a full sync
         console.error(e);
 
-        this.props.onModuleStateMismatch();
+        if (this.props.onModuleStateMismatch) {
+          this.props.onModuleStateMismatch();
+        }
       }
 
       requestAnimationFrame(() => {
@@ -650,7 +652,11 @@ export class VSCode extends React.Component<Props> implements Editor {
     pushStack = false,
     model = this.editor.getActiveCodeEditor().getModel()
   ) => {
-    const results = [];
+    const results: Array<{
+      range: unknown;
+      text: string;
+      forceMoveMarkers?: boolean;
+    }> = [];
     let index = 0;
     const currentEOLLength = model.getEOL().length;
     let eolChanged = false;
@@ -723,9 +729,15 @@ export class VSCode extends React.Component<Props> implements Editor {
     Object.keys(operationsJSON).forEach(moduleShortid => {
       const operation = TextOperation.fromJSON(operationsJSON[moduleShortid]);
 
-      const moduleId = this.sandbox.modules.find(
+      const foundModule = this.sandbox.modules.find(
         m => m.shortid === moduleShortid
-      ).id;
+      );
+
+      if (!foundModule) {
+        return;
+      }
+
+      const moduleId = foundModule.id;
 
       const modulePath =
         '/sandbox' +
@@ -754,7 +766,9 @@ export class VSCode extends React.Component<Props> implements Editor {
           }
         } catch (e) {
           // Something went wrong while applying
-          this.props.onModuleStateMismatch();
+          if (this.props.onModuleStateMismatch) {
+            this.props.onModuleStateMismatch();
+          }
         }
       } else {
         this.liveOperationCode = '';
@@ -766,7 +780,7 @@ export class VSCode extends React.Component<Props> implements Editor {
             model.object.textEditorModel
           );
 
-          if (this.props.onChange) {
+          if (this.props.onChange && module) {
             this.props.onChange(
               model.object.textEditorModel.getValue(),
               module.shortid
@@ -878,7 +892,7 @@ export class VSCode extends React.Component<Props> implements Editor {
     if (!this.lintWorker) {
       this.lintWorker = new LinterWorker();
 
-      this.lintWorker.addEventListener('message', event => {
+      this.lintWorker!.addEventListener('message', event => {
         const { markers, version } = event.data;
 
         requestAnimationFrame(() => {
@@ -1033,7 +1047,7 @@ export class VSCode extends React.Component<Props> implements Editor {
       return;
     }
 
-    const mode = await getMode(title, this.monaco);
+    const mode = (await getMode(title, this.monaco)) || '';
     if (this.settings.lintEnabled) {
       if (
         ['javascript', 'typescript', 'typescriptreact', 'vue'].includes(mode)

packages/app/src/app/components/CodeEditor/types.ts

@@ -12,13 +12,13 @@ export interface Editor {
   changeSandbox?: (
     sandbox: Sandbox,
     newCurrentModule: Module,
-    dependencies: Object
+    dependencies: { [name: string]: string }
   ) => Promise<any>;
   setErrors?: (errors: Array<ModuleError>) => any;
   setCorrections?: (corrections: Array<ModuleCorrection>) => any;
   updateModules?: () => any;
   changeSettings?: (settings: Settings) => any;
-  changeDependencies?: (deps: Object) => any;
+  changeDependencies?: (deps: { [name: string]: string }) => any;
   changeModule?: (
     module: Module,
     errors?: Array<ModuleError>,

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

@@ -250,7 +250,7 @@ export default {
   },
   massCreateModules(
     sandboxId: string,
-    directoryShortid: string,
+    directoryShortid: string | null,
     modules: Module[],
     directories: Directory[]
   ): Promise<{

packages/app/src/app/overmind/effects/connection.ts

@@ -4,7 +4,7 @@ const listeners = new Map();
 
 export default {
   addListener(listener: (connected: boolean) => void) {
-    const disposer = addListener(listener ? listener : () => {});
+    const disposer = addListener(listener);
     listeners.set(listener, disposer);
   },
   removeListener(listener: (connected: boolean) => void) {

packages/app/src/app/overmind/effects/fsSync.ts

@@ -92,7 +92,6 @@ async function syncDependencyTypings(
           if (process.env.NODE_ENV === 'development') {
             console.warn('Trouble fetching types for ' + depName);
           }
-          return {};
         }
       })
     );
@@ -139,28 +138,36 @@ export default {
       sendFiles();
 
       try {
-        fs.stat('/sandbox/package.json', (e, stat) => {
-          if (e) {
+        fs.stat('/sandbox/package.json', (packageJsonError, stat) => {
+          if (packageJsonError) {
             return;
           }
 
           if (stat.mtime.toString() !== lastMTime.toString()) {
             lastMTime = stat.mtime;
 
-            fs.readFile('/sandbox/package.json', async (err, rv) => {
-              if (e) {
-                console.error(e);
-                return;
+            fs.readFile(
+              '/sandbox/package.json',
+              async (packageJsonReadError, rv) => {
+                if (packageJsonReadError) {
+                  console.error(packageJsonReadError);
+                  return;
+                }
+
+                fs.stat('/sandbox/tsconfig.json', (tsConfigError, result) => {
+                  // If tsconfig exists we want to sync the types
+                  syncDependencyTypings(
+                    rv.toString(),
+                    Boolean(tsConfigError) || !result
+                  );
+                });
               }
-
-              fs.stat('/sandbox/tsconfig.json', (err, result) => {
-                // If tsconfig exists we want to sync the types
-                syncDependencyTypings(rv.toString(), Boolean(err) || !result);
-              });
-            });
+            );
           }
         });
-      } catch (e) {}
+      } catch (e) {
+        // Do nothing
+      }
     }, 1000);
 
     self.addEventListener('message', evt => {

packages/app/src/app/overmind/effects/git/export-to-github.ts

@@ -1,6 +1,6 @@
+import { Sandbox } from '@codesandbox/common/lib/types';
 import JSZip from 'jszip';
 import { createZip, BLOB_ID } from '../zip/create-zip';
-import { Sandbox } from '@codesandbox/common/lib/types';
 
 export default async function deploy(sandbox: Sandbox) {
   // We first get the zip file, this is what we essentially need to have deployed.

packages/app/src/app/overmind/effects/live/clients.ts

@@ -1,4 +1,4 @@
-import { Client, TextOperation } from 'ot';
+import { Client } from 'ot';
 
 export type SendOperation = (
   moduleShortid: string,
@@ -88,9 +88,9 @@ export default (
 
       return client;
     },
-    create(moduleShortid, revision) {
+    create(moduleShortid, initialRevision) {
       const client = new CodeSandboxOTClient(
-        revision,
+        initialRevision,
         moduleShortid,
         (revision, operation) => {
           sendOperation(

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

@@ -8,6 +8,7 @@ import {
   Directory,
   RoomInfo,
   Sandbox,
+  LiveMessageEvent,
 } from '@codesandbox/common/lib/types';
 import { getTextOperation } from '@codesandbox/common/lib/utils/diff';
 import clientsFactory from './clients';
@@ -110,7 +111,7 @@ export default {
   // TODO: Need to take an action here
   listen(
     action: (payload: {
-      event: string;
+      event: LiveMessageEvent;
       _isOwnMessage: boolean;
       data: object;
     }) => {}
@@ -183,7 +184,7 @@ export default {
         moduleShortid,
         operation
       );
-      return this.send('live:module_state', {});
+      this.send('live:module_state', {});
     }
   },
   sendUserCurrentModule(moduleShortid: string) {