Merge branch 'master' into pr-christianalfoni-2816

Author: christianalfoni

packages/app/config/build.js

@@ -33,14 +33,14 @@ const staticAssets = [
     from: isDev
       ? 'standalone-packages/codesandbox-browserfs/build'
       : 'standalone-packages/codesandbox-browserfs/dist',
-    to: 'static/browserfs4',
+    to: 'static/browserfs5',
   },
   // For caching purposes
   {
     from: isDev
       ? 'standalone-packages/codesandbox-browserfs/build'
       : 'standalone-packages/codesandbox-browserfs/dist',
-    to: 'static/browserfs3',
+    to: 'static/browserfs4',
   },
 ];
 

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

@@ -3,7 +3,7 @@ import Linter from 'eslint/lib/linter';
 import monkeypatch from './monkeypatch-babel-eslint';
 
 self.importScripts(
-  `${process.env.CODESANDBOX_HOST}/static/browserfs4/browserfs.min.js`
+  `${process.env.CODESANDBOX_HOST}/static/browserfs5/browserfs.min.js`
 );
 
 /* eslint-disable global-require */

packages/app/src/app/components/Preview/DevTools/Terminal/index.tsx

@@ -1,16 +1,14 @@
+import './styles.css';
+
+import { listen } from 'codesandbox-api';
 import React from 'react';
+import PlusIcon from 'react-icons/lib/md/add';
 import { withTheme } from 'styled-components';
-import { listen } from 'codesandbox-api';
-
 import uuid from 'uuid';
-import PlusIcon from 'react-icons/lib/md/add';
-
-import './styles.css';
 
 import { Shell } from './Shell';
 import { TerminalComponent } from './Shell/Term';
 import { ShellTabs } from './ShellTabs';
-
 import { ShellT, TerminalWithFit } from './types';
 import { DevToolProps } from '..';
 
@@ -34,6 +32,7 @@ class DevToolTerminal extends React.Component<
   };
 
   term: TerminalWithFit;
+  messageQueue: any[];
   listener: () => void;
   node?: HTMLElement;
   timeout?: number;
@@ -46,9 +45,17 @@ class DevToolTerminal extends React.Component<
 
   setTerminal = (terminal: TerminalWithFit) => {
     this.term = terminal;
+
+    this.messageQueue.forEach(this.handleMessage);
+    this.messageQueue.length = 0;
   };
 
   handleMessage = (data: any) => {
+    if (!this.term) {
+      this.messageQueue.push(data);
+      return;
+    }
+
     if (data.type === 'terminal:message') {
       this.term.write(data.data);
 

packages/app/src/app/index.html

@@ -48,7 +48,7 @@
 	</script>
 	<!-- End Google Tag Manager -->
 	<!-- <script async src="//cdn.headwayapp.co/widget.js"></script> -->
-	<script src="<%= webpackConfig.output.publicPath %>static/browserfs4/browserfs<%=process.env.NODE_ENV
+	<script src="<%= webpackConfig.output.publicPath %>static/browserfs5/browserfs<%=process.env.NODE_ENV
       === 'development' ? '' : '.min'%>.js"
 	 type="text/javascript"></script>
 

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

@@ -73,6 +73,7 @@ type ModalName =
   | 'preferences'
   | 'privacyServerWarning'
   | 'share'
+  | 'searchDependencies'
   | 'signInForTemplates';
 export const modalOpened: Action<{ modal: ModalName; message?: string }> = (
   { state, effects },

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

@@ -28,6 +28,11 @@ import {
   transformModule,
 } from '../utils/sandbox';
 import apiFactory, { Api, ApiConfig } from './apiFactory';
+import {
+  SandboxAPIResponse,
+  IModuleAPIResponse,
+  IDirectoryAPIResponse,
+} from './types';
 
 let api: Api;
 
@@ -67,7 +72,7 @@ export default {
     return api.get(`/dependencies/${name}@latest`);
   },
   async getSandbox(id: string): Promise<Sandbox> {
-    const sandbox = await api.get<Sandbox>(`/sandboxes/${id}`);
+    const sandbox = await api.get<SandboxAPIResponse>(`/sandboxes/${id}`);
 
     // We need to add client side properties for tracking
     return transformSandbox(sandbox);
@@ -77,13 +82,13 @@ export default {
       ? `/sandboxes/fork/${id}`
       : `/sandboxes/${id}/fork`;
 
-    const sandbox = await api.post<Sandbox>(url, body || {});
+    const sandbox = await api.post<SandboxAPIResponse>(url, body || {});
 
     return transformSandbox(sandbox);
   },
   createModule(sandboxId: string, module: Module): Promise<Module> {
     return api
-      .post(`/sandboxes/${sandboxId}/modules`, {
+      .post<IModuleAPIResponse>(`/sandboxes/${sandboxId}/modules`, {
         module: {
           title: module.title,
           directoryShortid: module.directoryShortid,
@@ -93,14 +98,19 @@ export default {
       })
       .then(transformModule);
   },
-  deleteModule(sandboxId: string, moduleShortid: string): Promise<void> {
-    return api.delete(`/sandboxes/${sandboxId}/modules/${moduleShortid}`);
+  async deleteModule(sandboxId: string, moduleShortid: string): Promise<void> {
+    await api.delete<IModuleAPIResponse>(
+      `/sandboxes/${sandboxId}/modules/${moduleShortid}`
+    );
   },
   saveModuleCode(sandboxId: string, module: Module): Promise<Module> {
     return api
-      .put(`/sandboxes/${sandboxId}/modules/${module.shortid}`, {
-        module: { code: module.code },
-      })
+      .put<IModuleAPIResponse>(
+        `/sandboxes/${sandboxId}/modules/${module.shortid}`,
+        {
+          module: { code: module.code },
+        }
+      )
       .then(transformModule);
   },
   saveModules(sandboxId: string, modules: Module[]) {
@@ -131,14 +141,14 @@ export default {
     });
   },
   savePrivacy(sandboxId: string, privacy: 0 | 1 | 2) {
-    return api.patch(`/sandboxes/${sandboxId}/privacy`, {
+    return api.patch<SandboxAPIResponse>(`/sandboxes/${sandboxId}/privacy`, {
       sandbox: {
         privacy,
       },
     });
   },
   saveFrozen(sandboxId: string, isFrozen: boolean) {
-    return api.put(`/sandboxes/${sandboxId}`, {
+    return api.put<SandboxAPIResponse>(`/sandboxes/${sandboxId}`, {
       sandbox: {
         is_frozen: isFrozen,
       },
@@ -176,9 +186,12 @@ export default {
     );
   },
   saveModuleTitle(sandboxId: string, moduleShortid: string, title: string) {
-    return api.put(`/sandboxes/${sandboxId}/modules/${moduleShortid}`, {
-      module: { title },
-    });
+    return api.put<IModuleAPIResponse>(
+      `/sandboxes/${sandboxId}/modules/${moduleShortid}`,
+      {
+        module: { title },
+      }
+    );
   },
   getPopularSandboxes(date: string): Promise<PopularSandboxes> {
     return api.get(`/sandboxes/popular?start_date=${date}`);
@@ -202,7 +215,7 @@ export default {
     title: string
   ): Promise<Directory> {
     return api
-      .post(`/sandboxes/${sandboxId}/directories`, {
+      .post<IDirectoryAPIResponse>(`/sandboxes/${sandboxId}/directories`, {
         directory: {
           title,
           directoryShortid,
@@ -215,16 +228,19 @@ export default {
     moduleShortid: string,
     directoryShortid: string
   ) {
-    return api.put(`/sandboxes/${sandboxId}/modules/${moduleShortid}`, {
-      module: { directoryShortid },
-    });
+    return api.put<IDirectoryAPIResponse>(
+      `/sandboxes/${sandboxId}/modules/${moduleShortid}`,
+      {
+        module: { directoryShortid },
+      }
+    );
   },
   saveDirectoryDirectory(
     sandboxId: string,
     sourceDirectoryShortid: string,
     targetDirectoryShortId: string
   ) {
-    return api.put(
+    return api.put<IDirectoryAPIResponse>(
       `/sandboxes/${sandboxId}/directories/${sourceDirectoryShortid}`,
       {
         directory: { directoryShortid: targetDirectoryShortId },
@@ -241,9 +257,12 @@ export default {
     directoryShortid: string,
     title: string
   ) {
-    return api.put(`/sandboxes/${sandboxId}/directories/${directoryShortid}`, {
-      directory: { title },
-    });
+    return api.put<IDirectoryAPIResponse>(
+      `/sandboxes/${sandboxId}/directories/${directoryShortid}`,
+      {
+        directory: { title },
+      }
+    );
   },
   getUploads(): Promise<UploadedFilesInfo> {
     return api.get('/users/current_user/uploads');
@@ -271,13 +290,14 @@ export default {
       modules,
       directories,
     })) as {
-      modules: Module[];
-      directories: Directory[];
+      modules: IModuleAPIResponse[];
+      directories: IDirectoryAPIResponse[];
     };
 
-    data.modules = data.modules.map(transformModule);
-    data.directories = data.directories.map(transformDirectory);
-    return data;
+    return {
+      modules: data.modules.map(transformModule),
+      directories: data.directories.map(transformDirectory),
+    };
   },
   createGit(
     sandboxId: string,

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

@@ -0,0 +1,28 @@
+import { Sandbox } from '@codesandbox/common/lib/types';
+
+export interface IModuleAPIResponse {
+  id: string;
+  shortid: string;
+  code: string | null;
+  directoryShortid: string | null;
+  isBinary: boolean;
+  sourceId: string;
+  title: string;
+  insertedAt: string;
+  updatedAt: string;
+}
+
+export interface IDirectoryAPIResponse {
+  id: string;
+  shortid: string;
+  directoryShortid: string | null;
+  sourceId: string;
+  title: string;
+  insertedAt: string;
+  updatedAt: string;
+}
+
+export type SandboxAPIResponse = Omit<Sandbox, 'environmentVariables'> & {
+  modules: IModuleAPIResponse[];
+  directories: IDirectoryAPIResponse[];
+};

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

@@ -7,12 +7,13 @@ import {
   Module,
   Directory,
   RoomInfo,
-  Sandbox,
   LiveMessageEvent,
+  Sandbox,
 } from '@codesandbox/common/lib/types';
 import { getTextOperation } from '@codesandbox/common/lib/utils/diff';
 import clientsFactory from './clients';
 import { transformSandbox } from '../utils/sandbox';
+import { SandboxAPIResponse } from '../api/types';
 
 type Options = {
   onApplyOperation(args: { moduleShortid: string; operation: any }): void;
@@ -21,12 +22,16 @@ type Options = {
 
 type JoinChannelResponse = {
   sandboxId: string;
-  sandbox: Sandbox;
+  sandbox: SandboxAPIResponse;
   moduleState: object;
   liveUserId: string;
   roomInfo: RoomInfo;
 };
 
+type JoinChannelTransformedResponse = JoinChannelResponse & {
+  sandbox: Sandbox;
+};
+
 declare global {
   interface Window {
     socket: any;
@@ -102,16 +107,17 @@ export default {
         .receive('error', resp => reject(resp));
     });
   },
-  joinChannel(roomId: string): Promise<JoinChannelResponse> {
+  joinChannel(roomId: string): Promise<JoinChannelTransformedResponse> {
     channel = this.getSocket().channel(`live:${roomId}`, {});
 
     return new Promise((resolve, reject) => {
       channel
         .join()
         .receive('ok', resp => {
           const result = camelizeKeys(resp) as JoinChannelResponse;
+          // @ts-ignore
           result.sandbox = transformSandbox(result.sandbox);
-          resolve(result);
+          resolve(result as JoinChannelTransformedResponse);
         })
         .receive('error', resp => reject(camelizeKeys(resp)));
     });

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

@@ -1,7 +1,15 @@
+import { Module } from '@codesandbox/common/lib/types';
+
 const getKey = (id, moduleShortid) => `recover:${id}:${moduleShortid}:code`;
 
 export default {
-  save(currentId, version, module, code, savedCode) {
+  save(
+    currentId: string,
+    version: number,
+    module: Module,
+    code: string,
+    savedCode: string | null
+  ) {
     try {
       localStorage.setItem(
         getKey(currentId, module.shortid),
@@ -18,15 +26,15 @@ export default {
     }
   },
 
-  remove(currentId, module) {
+  remove(currentId: string, module: Module) {
     try {
       localStorage.removeItem(getKey(currentId, module.shortid));
     } catch (e) {
       // Too bad
     }
   },
 
-  clearSandbox(currentId) {
+  clearSandbox(currentId: string) {
     try {
       Object.keys(localStorage)
         .filter(key => key.startsWith(`recover:${currentId}`))
@@ -38,7 +46,7 @@ export default {
     }
   },
 
-  getRecoverList(currentId, modules) {
+  getRecoverList(currentId: string, modules: Module[]) {
     const localKeys = Object.keys(localStorage).filter(key =>
       key.startsWith(`recover:${currentId}`)
     );