Live bug fixes (codesandbox#1506)

* Add auto repair to Live

* Fix lint

* Update syncing status

* Add manual module sync

* Fix null check

* Revert yarn.lock

Author: CompuIves

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

@@ -275,7 +275,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
       // have the correct cursor pos no matter what
       const { onSelectionChanged, isLive } = this.props;
       // Reason 3 is update by mouse or arrow keys
-      if (isLive) {
+      if (isLive && editor.getModel()) {
         const lines = editor.getModel().getLinesContent() || [];
         const data = {
           primary: getSelection(lines, selectionChange.selection),
@@ -425,14 +425,21 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
     if (sendTransforms && changeEvent.changes) {
       this.liveOperationCode =
         this.liveOperationCode || this.currentModule.code || '';
-      const { operation, newCode } = eventToTransform(
-        changeEvent,
-        this.liveOperationCode
-      );
+      try {
+        const { operation, newCode } = eventToTransform(
+          changeEvent,
+          this.liveOperationCode
+        );
+
+        this.liveOperationCode = newCode;
 
-      this.liveOperationCode = newCode;
+        sendTransforms(operation);
+      } catch (e) {
+        // Something went wrong while composing the operation, so we're opting for a full sync
+        console.error(e);
 
-      sendTransforms(operation);
+        this.props.onModuleStateMismatch();
+      }
 
       requestAnimationFrame(() => {
         this.liveOperationCode = '';
@@ -570,9 +577,14 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
           return;
         }
 
-        const code = operation.apply(module.code || '');
-        if (this.props.onChange) {
-          this.props.onChange(code, module.shortid);
+        try {
+          const code = operation.apply(module.code || '');
+          if (this.props.onChange) {
+            this.props.onChange(code, module.shortid);
+          }
+        } catch (e) {
+          // Something went wrong while applying
+          this.props.onModuleStateMismatch();
         }
         return;
       }

packages/app/src/app/components/CodeEditor/Monaco/live-decorations.js

@@ -33,6 +33,10 @@ export function updateUserSelections(
       }
   >
 ) {
+  if (!editor.getModel()) {
+    return;
+  }
+
   const lines = editor.getModel().getLinesContent() || [];
 
   userSelections.forEach(data => {

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

@@ -512,14 +512,21 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
     if (sendTransforms && changeEvent.changes) {
       this.liveOperationCode =
         this.liveOperationCode || this.currentModule.code || '';
-      const { operation, newCode } = eventToTransform(
-        changeEvent,
-        this.liveOperationCode
-      );
+      try {
+        const { operation, newCode } = eventToTransform(
+          changeEvent,
+          this.liveOperationCode
+        );
 
-      this.liveOperationCode = newCode;
+        this.liveOperationCode = newCode;
 
-      sendTransforms(operation);
+        sendTransforms(operation);
+      } catch (e) {
+        // Something went wrong while composing the operation, so we're opting for a full sync
+        console.error(e);
+
+        this.props.onModuleStateMismatch();
+      }
 
       requestAnimationFrame(() => {
         this.liveOperationCode = '';
@@ -669,9 +676,14 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
           return;
         }
 
-        const code = operation.apply(module.code || '');
-        if (this.props.onChange) {
-          this.props.onChange(code, module.shortid);
+        try {
+          const code = operation.apply(module.code || '');
+          if (this.props.onChange) {
+            this.props.onChange(code, module.shortid);
+          }
+        } catch (e) {
+          // Something went wrong while applying
+          this.props.onModuleStateMismatch();
         }
         return;
       }

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

@@ -89,4 +89,5 @@ export type Props = {
   receivingCode?: boolean,
   onCodeReceived?: () => void,
   onSelectionChanged: (d: { selection: any, moduleShortid: string }) => void,
+  onModuleStateMismatch?: () => void,
 };

packages/app/src/app/pages/Sandbox/Editor/Content/index.js

@@ -483,6 +483,7 @@ class EditorPreview extends React.Component<Props, State> {
               isLive={store.live.isLive}
               onCodeReceived={signals.live.onCodeReceived}
               onSelectionChanged={signals.live.onSelectionChanged}
+              onModuleStateMismatch={signals.live.onModuleStateMismatch}
               onNpmDependencyAdded={name => {
                 if (sandbox.owned) {
                   signals.editor.addNpmDependency({ name, isDev: true });

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

@@ -310,18 +310,28 @@ export function sendChangeCurrentModule({ props, state, live }) {
 }
 
 export function clearUserSelections({ props, state }) {
-  const userIndex = state
-    .get('live.roomInfo.users')
-    .findIndex(u => u.id === props.data.live_user_id);
-
-  if (userIndex > -1) {
-    if (state.get(`live.roomInfo.users.${userIndex}`)) {
-      state.set(`live.roomInfo.users.${userIndex}.selection`, null);
-      state.push('editor.pendingUserSelections', {
-        userId: props.data.live_user_id,
-        selection: null,
-      });
+  const clearSelections = userId => {
+    const userIndex = state
+      .get('live.roomInfo.users')
+      .findIndex(u => u.id === userId);
+
+    if (userIndex > -1) {
+      if (state.get(`live.roomInfo.users.${userIndex}`)) {
+        state.set(`live.roomInfo.users.${userIndex}.selection`, null);
+        state.push('editor.pendingUserSelections', {
+          userId,
+          selection: null,
+        });
+      }
     }
+  };
+
+  if (!props.data) {
+    // All users
+
+    state.get('live.roomInfo.users').forEach(u => clearSelections(u.id));
+  } else {
+    clearSelections(props.data.live_user_id);
   }
 }
 
@@ -372,6 +382,10 @@ export function receiveTransformation({ ot, props, live }) {
   }
 }
 
+export function syncModuleState({ live }) {
+  live.send('live:module_state', {});
+}
+
 export function applyTransformation({ props, state }) {
   const sandbox = state.get('editor.currentSandbox');
   const module = sandbox.modules.find(

packages/app/src/app/store/modules/live/common-sequences.js

@@ -30,6 +30,10 @@ export const initializeLive = factories.withLoadApp([
       actions.unSetReceivingStatus,
       set(state`live.isLive`, true),
       set(state`live.error`, null),
+
+      // We do an extra manual sync of modules because in the time that the user joined there is a chance
+      // that new messages came in
+      actions.syncModuleState,
     ],
     error: set(state`live.error`, props`reason`),
   },

packages/app/src/app/store/modules/live/index.js

@@ -43,5 +43,6 @@ export default Module({
     onSendChat: sequences.sendChat,
     onChatEnabledChange: sequences.setChatEnabled,
     onFollow: sequences.setFollowing,
+    onModuleStateMismatch: sequences.syncModuleState,
   },
 });

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

@@ -391,3 +391,5 @@ export const setFollowing = [
     false: [],
   },
 ];
+
+export const syncModuleState = [actions.syncModuleState];

packages/app/src/app/store/providers/Live.js

@@ -60,10 +60,14 @@ export default Provider({
     sentMessages.set(_messageId, payload);
 
     return new Promise((resolve, reject) => {
-      channel
-        .push(event, payload)
-        .receive('ok', resolve)
-        .receive('error', reject);
+      if (channel) {
+        channel
+          .push(event, payload)
+          .receive('ok', resolve)
+          .receive('error', reject);
+      } else {
+        reject('Channel is not defined');
+      }
     });
   },
 });