Add live typing and fix bug (codesandbox#3711)

Author: CompuIves

package.json

@@ -9,6 +9,7 @@
   "license": "GPL-3.0",
   "workspaces": {
     "packages": [
+      "packages/@types/ot",
       "packages/app",
       "packages/homepage",
       "packages/common",

packages/@types/ot/index.d.ts

@@ -0,0 +1,25 @@
+declare module 'ot' {
+  export type SerializedTextOperation = (string | number)[];
+
+  class TextOperation {
+    delete(length: number): TextOperation;
+    insert(str: string): TextOperation;
+    retain(length: number): TextOperation;
+
+    baseLength: number;
+    targetLength: number;
+
+    apply(code: string): string;
+    compose(operation: TextOperation): TextOperation;
+
+    static transform(left: TextOperation, right: TextOperation): TextOperation;
+    static isRetain(operation: TextOperation): boolean;
+    static isInsert(operation: TextOperation): boolean;
+    static isDelete(operation: TextOperation): boolean;
+
+    static fromJSON(operation: SerializedTextOperation): TextOperation;
+    toJSON(): SerializedTextOperation;
+  }
+
+  export { TextOperation };
+}

packages/@types/ot/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@types/ot",
+  "version": "1.0.0",
+  "description": "",
+  "typings": "./index.d.ts",
+  "scripts": {},
+  "keywords": [],
+  "author": "Ives van Hoorne",
+  "license": "MIT"
+}

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

@@ -1,3 +1,4 @@
+import { TextOperation } from 'ot';
 import { logBreadcrumb } from '@codesandbox/common/lib/utils/analytics/sentry';
 import { Blocker, blocker } from 'app/utils/blocker';
 
@@ -6,10 +7,13 @@ import { OTClient, synchronized_ } from './ot/client';
 export type SendOperation = (
   moduleShortid: string,
   revision: number,
-  operation: any
+  operation: TextOperation
 ) => Promise<unknown>;
 
-export type ApplyOperation = (moduleShortid: string, operation: any) => void;
+export type ApplyOperation = (
+  moduleShortid: string,
+  operation: TextOperation
+) => void;
 
 export class CodeSandboxOTClient extends OTClient {
   /*
@@ -19,14 +23,21 @@ export class CodeSandboxOTClient extends OTClient {
   */
   public awaitSynchronized: Blocker<void> | null;
   moduleShortid: string;
-  onSendOperation: (revision: number, operation: any) => Promise<unknown>;
-  onApplyOperation: (operation: any) => void;
+  onSendOperation: (
+    revision: number,
+    operation: TextOperation
+  ) => Promise<unknown>;
+
+  onApplyOperation: (operation: TextOperation) => void;
 
   constructor(
     revision: number,
     moduleShortid: string,
-    onSendOperation: (revision: number, operation: any) => Promise<unknown>,
-    onApplyOperation: (operation: any) => void
+    onSendOperation: (
+      revision: number,
+      operation: TextOperation
+    ) => Promise<unknown>,
+    onApplyOperation: (operation: TextOperation) => void
   ) {
     super(revision);
     this.moduleShortid = moduleShortid;
@@ -35,7 +46,7 @@ export class CodeSandboxOTClient extends OTClient {
   }
 
   lastAcknowledgedRevision: number = -1;
-  sendOperation(revision, operation) {
+  sendOperation(revision: number, operation: TextOperation) {
     // Whenever we send an operation we enable the blocker
     // that lets us wait for its resolvment when moving back
     // to synchronized state
@@ -72,7 +83,7 @@ export class CodeSandboxOTClient extends OTClient {
       });
   }
 
-  applyOperation(operation) {
+  applyOperation(operation: TextOperation) {
     this.onApplyOperation(operation);
   }
 
@@ -93,11 +104,11 @@ export class CodeSandboxOTClient extends OTClient {
     }
   }
 
-  applyClient(operation: any) {
+  applyClient(operation: TextOperation) {
     super.applyClient(operation);
   }
 
-  applyServer(operation: any) {
+  applyServer(operation: TextOperation) {
     super.applyServer(operation);
   }
 

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

@@ -11,15 +11,18 @@ import {
 import _debug from '@codesandbox/common/lib/utils/debug';
 import { Blocker, blocker } from 'app/utils/blocker';
 import { camelizeKeys } from 'humps';
-import { TextOperation } from 'ot';
+import { TextOperation, SerializedTextOperation } from 'ot';
 import { Channel, Presence, Socket } from 'phoenix';
 import uuid from 'uuid';
 
 import { OPTIMISTIC_ID_PREFIX } from '../utils';
 import clientsFactory from './clients';
 
 type Options = {
-  onApplyOperation(args: { moduleShortid: string; operation: any }): void;
+  onApplyOperation(args: {
+    moduleShortid: string;
+    operation: TextOperation;
+  }): void;
   provideJwtToken(): string;
   isLiveBlockerExperiement(): boolean;
   onOperationError(payload: {
@@ -93,7 +96,11 @@ class Live {
     awaitSend.resolve();
   }
 
-  private onSendOperation = async (moduleShortid, revision, operation) => {
+  private onSendOperation = async (
+    moduleShortid: string,
+    revision: number,
+    operation: TextOperation
+  ) => {
     logBreadcrumb({
       type: 'ot',
       message: `Sending ${JSON.stringify({
@@ -332,7 +339,7 @@ class Live {
     });
   }
 
-  sendCodeUpdate(moduleShortid: string, operation: any) {
+  sendCodeUpdate(moduleShortid: string, operation: TextOperation) {
     if (!operation) {
       return;
     }
@@ -465,13 +472,7 @@ class Live {
     return this.clients.getAll();
   }
 
-  applyClient(moduleShortid: string, operation: any) {
-    return this.clients
-      .get(moduleShortid)
-      .applyClient(TextOperation.fromJSON(operation));
-  }
-
-  applyServer(moduleShortid: string, operation: any) {
+  applyServer(moduleShortid: string, operation: SerializedTextOperation) {
     return this.clients
       .get(moduleShortid)
       .applyServer(TextOperation.fromJSON(operation));

packages/app/src/app/overmind/effects/live/ot/client.ts

@@ -1,11 +1,11 @@
 // translation of https://github.com/djspiewak/cccp/blob/master/agent/src/main/scala/com/codecommit/cccp/agent/state.scala
 /* eslint-disable react/no-access-state-in-setstate */
 
-type Operation = any;
+import { TextOperation } from 'ot';
 
 interface IState {
-  applyClient(client: OTClient, operation: Operation): IState;
-  applyServer(client: OTClient, operation: Operation): IState;
+  applyClient(client: OTClient, operation: TextOperation): IState;
+  applyServer(client: OTClient, operation: TextOperation): IState;
   serverAck(client: OTClient): IState;
   transformSelection<T>(selection: T): T;
   resend?(client: OTClient): void;
@@ -14,14 +14,14 @@ interface IState {
 // In the 'Synchronized' state, there is no pending operation that the client
 // has sent to the server.
 class Synchronized implements IState {
-  applyClient(client: OTClient, operation: Operation) {
+  applyClient(client: OTClient, operation: TextOperation) {
     // When the user makes an edit, send the operation to the server and
     // switch to the 'AwaitingConfirm' state
     client.sendOperation(client.revision, operation);
     return new AwaitingConfirm(operation);
   }
 
-  applyServer(client: OTClient, operation: Operation) {
+  applyServer(client: OTClient, operation: TextOperation) {
     // When we receive a new operation from the server, the operation can be
     // simply applied to the current document
     client.applyOperation(operation);
@@ -44,20 +44,20 @@ export const synchronized_ = new Synchronized();
 // In the 'AwaitingConfirm' state, there's one operation the client has sent
 // to the server and is still waiting for an acknowledgement.
 class AwaitingConfirm implements IState {
-  outstanding: Operation;
+  outstanding: TextOperation;
 
-  constructor(outstanding: Operation) {
+  constructor(outstanding: TextOperation) {
     // Save the pending operation
     this.outstanding = outstanding;
   }
 
-  applyClient(client: OTClient, operation: Operation) {
+  applyClient(client: OTClient, operation: TextOperation) {
     // When the user makes an edit, don't send the operation immediately,
     // instead switch to 'AwaitingWithBuffer' state
     return new AwaitingWithBuffer(this.outstanding, operation);
   }
 
-  applyServer(client: OTClient, operation: Operation) {
+  applyServer(client: OTClient, operation: TextOperation) {
     // This is another client's operation. Visualization:
     //
     //                   /\
@@ -68,7 +68,7 @@ class AwaitingConfirm implements IState {
     //  (can be applied  \/
     //  to the client's
     //  current document)
-    const pair = operation.constructor.transform(this.outstanding, operation);
+    const pair = TextOperation.transform(this.outstanding, operation);
     client.applyOperation(pair[1]);
     return new AwaitingConfirm(pair[0]);
   }
@@ -93,22 +93,22 @@ class AwaitingConfirm implements IState {
 // In the 'AwaitingWithBuffer' state, the client is waiting for an operation
 // to be acknowledged by the server while buffering the edits the user makes
 class AwaitingWithBuffer implements IState {
-  outstanding: Operation;
-  buffer: Operation;
+  outstanding: TextOperation;
+  buffer: TextOperation;
 
-  constructor(outstanding: Operation, buffer: Operation) {
+  constructor(outstanding: TextOperation, buffer: TextOperation) {
     // Save the pending operation and the user's edits since then
     this.outstanding = outstanding;
     this.buffer = buffer;
   }
 
-  applyClient(client: OTClient, operation: Operation) {
+  applyClient(client: OTClient, operation: TextOperation) {
     // Compose the user's changes onto the buffer
     const newBuffer = this.buffer.compose(operation);
     return new AwaitingWithBuffer(this.outstanding, newBuffer);
   }
 
-  applyServer(client: OTClient, operation: Operation) {
+  applyServer(client: OTClient, operation: TextOperation) {
     // Operation comes from another client
     //
     //                       /\
@@ -126,7 +126,7 @@ class AwaitingWithBuffer implements IState {
     // document
     //
     // * pair1[1]
-    const transform = operation.constructor.transform;
+    const transform = TextOperation.transform;
     const pair1 = transform(this.outstanding, operation);
     const pair2 = transform(this.buffer, pair1[1]);
     client.applyOperation(pair2[1]);
@@ -165,12 +165,12 @@ export abstract class OTClient {
   }
 
   // Call this method when the user changes the document.
-  applyClient(operation: Operation) {
+  applyClient(operation: TextOperation) {
     this.setState(this.state.applyClient(this, operation));
   }
 
   // Call this method with a new operation from the server
-  applyServer(operation: Operation) {
+  applyServer(operation: TextOperation) {
     this.revision++;
     this.setState(this.state.applyServer(this, operation));
   }
@@ -196,7 +196,7 @@ export abstract class OTClient {
     return this.state.transformSelection(selection);
   }
 
-  abstract sendOperation(revision: number, operation: Operation): void;
+  abstract sendOperation(revision: number, operation: TextOperation): void;
 
-  abstract applyOperation(operation: Operation): void;
+  abstract applyOperation(operation: TextOperation): void;
 }

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

@@ -8,6 +8,7 @@ import {
   ModuleTab,
   WindowOrientation,
 } from '@codesandbox/common/lib/types';
+import { TextOperation } from 'ot';
 import { getTextOperation } from '@codesandbox/common/lib/utils/diff';
 import { COMMENTS } from '@codesandbox/common/lib/utils/feature-flags';
 import { convertTypeToStatus } from '@codesandbox/common/lib/utils/notifications';
@@ -321,13 +322,11 @@ export const codeChanged: Action<{
   // never want to send that code update, since this actual code change goes through this
   // specific code flow already.
   if (state.live.isLive && module.code !== code) {
-    let operation;
+    let operation: TextOperation;
     if (event) {
       operation = eventToTransform(event, module.code).operation;
     } else {
-      const transform = getTextOperation(module.code, code);
-
-      operation = transform.operation;
+      operation = getTextOperation(module.code, code);
     }
 
     effects.live.sendCodeUpdate(moduleShortid, operation);
@@ -437,7 +436,7 @@ export const forkSandboxClicked: AsyncAction = async ({
   if (!state.editor.currentSandbox) {
     return;
   }
-  
+
   await actions.editor.internal.forkSandbox({
     sandboxId: state.editor.currentSandbox.id,
   });