SSE Sync (codesandbox#1275)

* SSE Sync

* Fix tests

* Put env back in for integration tests

* Move back to .io

* Don't do all transforms for babel dev

Author: CompuIves

packages/app/config/babel.dev.js

@@ -7,7 +7,7 @@ module.exports = {
   presets: [
     // Latest stable ECMAScript features
     require.resolve('@babel/preset-flow'),
-    process.env.NODE_ENV === 'test' && [
+    [
       require.resolve('@babel/preset-env'),
       {
         targets: {
@@ -18,7 +18,7 @@ module.exports = {
         // Disable polyfill transforms
         useBuiltIns: false,
         modules: false,
-        forceAllTransforms: true,
+        forceAllTransforms: !process.env.LOCAL_DEV,
       },
     ],
     // JSX, Flow

packages/app/package.json

@@ -7,7 +7,7 @@
     "uglify-es": "npm:terser"
   },
   "scripts": {
-    "start": "cross-env LOCAL_SERVER=1 node scripts/start.js",
+    "start": "cross-env LOCAL_SERVER=1 LOCAL_DEV=1 node scripts/start.js",
     "start:sandbox": "cross-env SANDBOX_ONLY=true node scripts/start.js",
     "start:dev_api": "node scripts/start.js",
     "start:test": "cross-env LOCAL_SERVER=1 SANDBOX_ONLY=true node scripts/start.js",

packages/app/src/app/components/Preview/index.js

@@ -39,6 +39,7 @@ type Props = {
   alignDirection?: 'right' | 'bottom',
   delay?: number,
   setServerStatus?: (status: string) => void,
+  syncSandbox?: (updates: any) => void,
 };
 
 type State = {
@@ -148,6 +149,7 @@ class BasePreview extends React.Component<Props, State> {
     modules: {
       [path: string]: any,
     },
+    ignoreNextUpdate: boolean,
   };
   // TODO: Find typedefs for this
   $socket: ?any;
@@ -179,10 +181,7 @@ class BasePreview extends React.Component<Props, State> {
     // when the user navigates the iframe app, which shows the loading screen
     this.initialPath = props.initialPath;
 
-    this.lastSent = {
-      sandboxId: props.sandbox.id,
-      modules: this.getModulesToSend(),
-    };
+    this.initializeLastSent();
 
     if (this.serverPreview) {
       this.connectTimeout = null;
@@ -198,6 +197,14 @@ class BasePreview extends React.Component<Props, State> {
     window.openNewWindow = this.openNewWindow;
   }
 
+  initializeLastSent = () => {
+    this.lastSent = {
+      sandboxId: this.props.sandbox.id,
+      modules: this.getModulesToSend(),
+      ignoreNextUpdate: false,
+    };
+  };
+
   componentWillUpdate(nextProps: Props, nextState: State) {
     if (
       nextState.frameInitialized !== this.state.frameInitialized &&
@@ -295,6 +302,14 @@ class BasePreview extends React.Component<Props, State> {
         });
       });
 
+      socket.on('sandbox:update', message => {
+        this.lastSent.ignoreNextUpdate = true;
+
+        if (this.props.syncSandbox) {
+          this.props.syncSandbox({ updates: message.updates });
+        }
+      });
+
       socket.on('sandbox:start', () => {
         sseTerminalMessage(`sandbox ${this.props.sandbox.id} started.`);
 
@@ -405,6 +420,7 @@ class BasePreview extends React.Component<Props, State> {
       : frameUrl(newId, this.props.initialPath || '');
 
     if (this.serverPreview) {
+      this.initializeLastSent();
       this.setupSSESockets();
     }
     this.setState(
@@ -553,8 +569,10 @@ class BasePreview extends React.Component<Props, State> {
 
         this.lastSent.modules = modulesToSend;
 
-        if (Object.keys(diff).length > 0 && this.$socket) {
+        const ignoreUpdate = this.lastSent.ignoreNextUpdate;
+        if (!ignoreUpdate && Object.keys(diff).length > 0 && this.$socket) {
           this.$socket.emit('sandbox:update', diff);
+          this.lastSent.ignoreNextUpdate = false;
         }
       } else {
         dispatch({

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

@@ -330,6 +330,7 @@ class Preview extends React.Component<Props, State> {
                   setServerStatus={(status: string) => {
                     signals.server.statusChanged({ status });
                   }}
+                  syncSandbox={signals.files.syncSandbox}
                 />
               ) : (
                 <RunOnClick

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/Tasks.js

@@ -71,7 +71,7 @@ export default class Tasks extends React.PureComponent<Props> {
   };
 
   render() {
-    if (!this.props.package) {
+    if (!this.props.package || !this.props.package.scripts) {
       return null;
     }
 

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

@@ -6,7 +6,58 @@ import { MAX_FILE_SIZE } from 'codesandbox-import-utils/lib/is-text';
 import denormalize from 'codesandbox-import-utils/lib/create-sandbox/denormalize';
 import track from 'common/utils/analytics';
 
-import { resolveModuleWrapped } from '../../utils/resolve-module-wrapped';
+import {
+  resolveModuleWrapped,
+  resolveDirectoryWrapped,
+} from '../../utils/resolve-module-wrapped';
+
+export function processSSEUpdates({ state, props, controller }) {
+  const newSandbox = props.sandbox;
+  const oldSandbox = state.get('editor.currentSandbox');
+
+  props.updates.forEach(update => {
+    const { op, path, type } = update;
+    if (type === 'file') {
+      const resolveModuleOld = resolveModuleWrapped(oldSandbox);
+      const resolveModuleNew = resolveModuleWrapped(newSandbox);
+      const oldModule = resolveModuleOld(path);
+      if (op === 'update') {
+        const newModule = resolveModuleNew(path);
+
+        if (oldModule) {
+          const modulePos = oldSandbox.modules.indexOf(oldModule);
+          state.merge(
+            `editor.sandboxes.${oldSandbox.id}.modules.${modulePos}`,
+            newModule
+          );
+        } else {
+          state.push(`editor.sandboxes.${oldSandbox.id}.modules`, newModule);
+        }
+      } else if (op === 'delete') {
+        controller.getSignal('files.removeModule')({
+          moduleShortid: oldModule.shortid,
+        });
+      }
+    } else {
+      const resolveDirectoryOld = resolveDirectoryWrapped(oldSandbox);
+      const resolveDirectoryNew = resolveDirectoryWrapped(newSandbox);
+
+      if (op === 'update') {
+        // Create
+        const newDirectory = resolveDirectoryNew(path);
+        state.push(
+          `editor.sandboxes.${oldSandbox.id}.directories`,
+          newDirectory
+        );
+      } else {
+        const oldDirectory = resolveDirectoryOld(path);
+        controller.getSignal('files.removeDirectory')({
+          directoryShortid: oldDirectory.shortid,
+        });
+      }
+    }
+  });
+}
 
 export function whenModuleIsSelected({ state, props, path }) {
   const currentModule = state.get('editor.currentModule');

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

@@ -18,5 +18,8 @@ export default Module({
     directoryDeleted: sequences.deleteDirectory,
     moduleDeleted: sequences.deleteModule,
     createModulesByPath: sequences.createModulesByPath,
+    syncSandbox: sequences.syncSandbox,
+    removeModule: sequences.removeModule,
+    removeDirectory: sequences.removeDirectory,
   },
 });

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

@@ -7,6 +7,7 @@ import {
   setModal,
   callVSCodeCallback,
   callVSCodeCallbackError,
+  getSandbox,
 } from '../../actions';
 import {
   sendModuleCreated,
@@ -35,6 +36,21 @@ export const getUploadedFiles = [
   },
 ];
 
+export const syncSandbox = [
+  set(props`id`, state`editor.currentId`),
+  getSandbox,
+  {
+    success: [actions.processSSEUpdates],
+    error: [
+      addNotification(
+        "We weren't able to retrieve the latest files of the sandbox, please refresh",
+        'error'
+      ),
+    ],
+    notFound: [],
+  },
+];
+
 export const removeModule = [
   ensureOwnedEditable,
   actions.whenModuleIsSelected,

packages/app/src/app/store/utils/resolve-module-wrapped.js

@@ -1,4 +1,4 @@
-import { resolveModule } from 'common/sandbox/modules';
+import { resolveModule, resolveDirectory } from 'common/sandbox/modules';
 
 export const resolveModuleWrapped = sandbox => (path: string) => {
   try {
@@ -7,3 +7,11 @@ export const resolveModuleWrapped = sandbox => (path: string) => {
     return undefined;
   }
 };
+
+export const resolveDirectoryWrapped = sandbox => (path: string) => {
+  try {
+    return resolveDirectory(path, sandbox.modules, sandbox.directories);
+  } catch (e) {
+    return undefined;
+  }
+};

packages/common/sandbox/modules.js

@@ -16,7 +16,7 @@ const throwError = (path: string) => {
   throw new Error(`Cannot find module in ${path}`);
 };
 
-export function getModulesInDirectory(
+export function resolveDirectory(
   _path: ?string,
   modules: Array<Module>,
   directories: Array<Directory>,
@@ -40,8 +40,8 @@ export function getModulesInDirectory(
 
   const foundDirectoryShortid = splitPath.reduce(
     (dirId: ?string, pathPart: string, i: number) => {
-      // Meaning this is the last argument, so the file
-      if (i === splitPath.length - 1) return dirId;
+      // Meaning this is the last argument, so the directory
+      if (i === splitPath.length) return dirId;
 
       if (pathPart === '..') {
         // Find the parent
@@ -67,6 +67,43 @@ export function getModulesInDirectory(
     startdirectoryShortid
   );
 
+  return directories.find(d => d.shortid === foundDirectoryShortid);
+}
+
+export function getModulesInDirectory(
+  _path: ?string,
+  modules: Array<Module>,
+  directories: Array<Directory>,
+  _startdirectoryShortid: ?string = undefined
+) {
+  if (!_path) return throwError('');
+
+  let path = _path;
+  // If paths start with {{sandboxRoot}} we see them as root paths
+  if (path.startsWith('{{sandboxRoot}}')) {
+    path = _path.replace('{{sandboxRoot}}/', './');
+  }
+
+  // Split path
+  const splitPath = path
+    .replace(/^.\//, '')
+    .split('/')
+    .filter(Boolean);
+
+  const dirPath = path
+    .replace(/^.\//, '')
+    .split('/')
+    .filter(Boolean);
+  dirPath.pop();
+
+  const dir = resolveDirectory(
+    dirPath.join('/') || '/',
+    modules,
+    directories,
+    _startdirectoryShortid
+  );
+  const foundDirectoryShortid = dir ? dir.shortid : null;
+
   const lastPath = splitPath[splitPath.length - 1];
   const modulesInFoundDirectory = modules.filter(
     // eslint-disable-next-line eqeqeq