Merge branch 'master' into vscodeeffect

Author: christianalfoni

.eslintrc

@@ -27,19 +27,7 @@
     "import/no-cycle": "warn",
     "react/prop-types": 0,
     "arrow-parens": 0,
-    "prefer-destructuring": [
-      "error",
-      {
-        "VariableDeclarator": {
-          "array": false,
-          "object": true
-        },
-        "AssignmentExpression": {
-          "array": false,
-          "object": false
-        }
-      }
-    ],
+    "prefer-destructuring": 0,
     "no-async-promise-executor": "warn",
     "import/prefer-default-export": 0,
     "class-methods-use-this": 0,

package.json

@@ -85,9 +85,9 @@
     "husky": "^2.2.0",
     "lerna": "^3.16.4",
     "lint-staged": "^9.2.5",
-    "prettier": "1.18.2",
+    "prettier": "1.19.0",
     "pretty-quick": "^1.10.0",
-    "typescript": "3.7.1-rc",
+    "typescript": "3.7.2",
     "username": "^5.1.0"
   },
   "husky": {

packages/app/package.json

@@ -157,7 +157,7 @@
     "overmind": "^20.1.0-1572182984474",
     "overmind-devtools": "^19.0.0",
     "overmind-react": "^21.1.0-1572182984474",
-    "phoenix": "^1.3.0",
+    "phoenix": "^1.4.11",
     "postcss": "^6.0.9",
     "postcss-selector-parser": "^2.2.3",
     "posthtml": "^0.11.3",
@@ -309,7 +309,7 @@
     "terser": "^4.1.4",
     "terser-webpack-plugin": "^1.4.1",
     "thread-loader": "^2.1.2",
-    "typescript": "3.7.1-rc",
+    "typescript": "3.7.2",
     "url-loader": "1.0.1",
     "webpack": "^4.36.1",
     "webpack-bundle-analyzer": "^2.13.1",

packages/app/scripts/start.js

@@ -20,6 +20,7 @@ const { staticAssets } = require('../config/build');
 
 // Tools like Cloud9 rely on this.
 var DEFAULT_PORT = process.env.PORT || 3000;
+const PROXY_DOMAIN = 'https://codesandbox.io';
 var compiler;
 var handleCompile;
 var compileStart;
@@ -214,6 +215,7 @@ function addMiddleware(devServer, index) {
       rewrites: [{ from: /\/embed/, to: '/embed.html' }],
     })
   );
+  let wsProxy;
   if (process.env.LOCAL_SERVER) {
     devServer.use(
       cors({
@@ -226,10 +228,21 @@ function addMiddleware(devServer, index) {
         credentials: true,
       })
     );
+    wsProxy = proxy({
+      target: PROXY_DOMAIN.replace('https', 'wss'),
+      changeOrigin: true,
+      ws: true,
+      autoRewrite: true,
+      protocolRewrite: true,
+      onProxyReqWs(proxyReq, req, socket, options, head) {
+        proxyReq.setHeader('Origin', PROXY_DOMAIN);
+      },
+    });
+    devServer.use('/socket', wsProxy);
     devServer.use(
       '/api',
       proxy({
-        target: 'https://codesandbox.io',
+        target: PROXY_DOMAIN,
         changeOrigin: true,
       })
     );
@@ -246,6 +259,8 @@ function addMiddleware(devServer, index) {
   // Finally, by now we have certainly resolved the URL.
   // It may be /index.html, so let the dev server try serving it again.
   devServer.use(devServer.middleware);
+
+  return { wsProxy };
 }
 
 function runDevServer(port, protocol, index) {
@@ -273,7 +288,7 @@ function runDevServer(port, protocol, index) {
   });
 
   // Our custom middleware proxies requests to /index.html or a remote API.
-  addMiddleware(devServer, index);
+  const { wsProxy } = addMiddleware(devServer, index);
 
   // Launch WebpackDevServer.
   devServer.listen(port, err => {
@@ -285,6 +300,10 @@ function runDevServer(port, protocol, index) {
     console.log(chalk.cyan('Starting the development server...'));
     openBrowser(port, protocol);
   });
+
+  if (wsProxy) {
+    devServer.listeningApp.on('upgrade', wsProxy.upgrade);
+  }
 }
 
 function run(port) {

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

@@ -75,7 +75,8 @@ export default {
   },
   connect() {
     if (!_socket) {
-      _socket = new Socket(`wss://${location.host}/socket`, {
+      const protocol = process.env.LOCAL_SERVER ? 'ws' : 'wss';
+      _socket = new Socket(`${protocol}://${location.host}/socket`, {
         params: {
           guardian_token: provideJwtToken(),
         },

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

@@ -12,6 +12,31 @@ type Options = {
   getToken(): string;
 };
 
+interface Object {
+  [key: string]: string;
+}
+
+interface ApiData {
+  builds: Object[];
+  config?: Object;
+  deploymentType?: string;
+  env?: Object;
+  files: File[];
+  forceNew?: boolean;
+  name: string;
+  public: boolean;
+  regions: string[];
+  routes: Object[];
+  scope?: string;
+  version: number;
+}
+
+interface File {
+  data: string;
+  encoding?: string;
+  file: string;
+}
+
 export default (() => {
   let _options: Options;
 
@@ -133,7 +158,7 @@ export default (() => {
 async function getApiData(contents: any, sandbox: Sandbox) {
   const template = getTemplate(sandbox.template);
 
-  let apiData: any = {
+  let apiData: Partial<ApiData> = {
     files: [],
   };
   let packageJSON: any = {};
@@ -159,7 +184,7 @@ async function getApiData(contents: any, sandbox: Sandbox) {
     nowJSON = packageJSON.now;
   }
 
-  const nowDefaults: any = {
+  const nowDefaults: Pick<ApiData, 'name' | 'public'> = {
     name: `csb-${sandbox.id}`,
     public: true,
   };
@@ -174,7 +199,7 @@ async function getApiData(contents: any, sandbox: Sandbox) {
   packageJSON.name = nowJSON.name || nowDefaults.name;
 
   apiData.name = nowJSON.name || nowDefaults.name;
-  apiData.deploymentType = nowJSON.type || nowDefaults.type;
+  apiData.deploymentType = nowJSON.type;
   apiData.public = nowJSON.public || nowDefaults.public;
 
   // if now v2 we need to tell now the version, builds and routes
@@ -217,7 +242,7 @@ async function getApiData(contents: any, sandbox: Sandbox) {
     // if person added some files but no package.json
     if (
       filePath === 'package.json' &&
-      !apiData.files.find(f => f.name === 'package.json')
+      !apiData.files.find(f => f.file === 'package.json')
     ) {
       apiData.files.push({
         file: 'package.json',

…Profile/Showcase/SandboxInfo/elements.js …Profile/Showcase/SandboxInfo/elements.tspackages/app/src/app/pages/Profile/Showcase/SandboxInfo/elements.js renamed to packages/app/src/app/pages/Profile/Showcase/SandboxInfo/elements.ts packages/app/src/app/pages/Profile/Showcase/SandboxInfo/elements.js renamed to packages/app/src/app/pages/Profile/Showcase/SandboxInfo/elements.ts

@@ -1,6 +1,7 @@
-import styled from 'styled-components';
 import delayEffect from '@codesandbox/common/lib/utils/animation/delay-effect';
 import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
 import { LikeHeart } from 'app/pages/common/LikeHeart';
 
 export const Container = styled.div`
@@ -18,7 +19,6 @@ export const Container = styled.div`
 `;
 
 export const Title = styled.h1`
-  font-weight: 400;
   margin: 0;
   padding: 0;
   box-sizing: border-box;

…es/Profile/Showcase/SandboxInfo/index.js …s/Profile/Showcase/SandboxInfo/index.tsxpackages/app/src/app/pages/Profile/Showcase/SandboxInfo/index.js renamed to packages/app/src/app/pages/Profile/Showcase/SandboxInfo/index.tsx packages/app/src/app/pages/Profile/Showcase/SandboxInfo/index.js renamed to packages/app/src/app/pages/Profile/Showcase/SandboxInfo/index.tsx

@@ -1,19 +1,30 @@
-import React from 'react';
+import Row from '@codesandbox/common/lib/components/flex/Row';
+import { Sandbox } from '@codesandbox/common/lib/types';
 import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
 import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
-import Row from '@codesandbox/common/lib/components/flex/Row';
+import React, { FunctionComponent } from 'react';
+
 import { Stat } from 'app/components/Stat';
-import SvgButton from './play-button.svg';
+import { useOvermind } from 'app/overmind';
+
 import {
   Container,
-  Title,
-  Like,
   Description,
-  Stats,
+  Like,
   PlayButtonContainer,
+  Stats,
+  Title,
 } from './elements';
+import SvgButton from './play-button.svg';
+
+type Props = {
+  sandbox: Sandbox;
+};
+export const SandboxInfo: FunctionComponent<Props> = ({ sandbox }) => {
+  const {
+    state: { isLoggedIn },
+  } = useOvermind();
 
-function SandboxInfo({ sandbox, isLoggedIn }) {
   return (
     <Container>
       <Row alignItems="center">
@@ -22,21 +33,24 @@ function SandboxInfo({ sandbox, isLoggedIn }) {
           {isLoggedIn ? <Like sandbox={sandbox} /> : null}
         </Title>
       </Row>
+
       <Row alignItems="flex-start">
         <div style={{ flex: 6 }}>
           <Description>{sandbox.description}</Description>
         </div>
+
         <Stats>
           <PlayButtonContainer to={sandboxUrl({ id: sandbox.id })}>
             <img alt="edit" src={SvgButton} />
           </PlayButtonContainer>
+
           <Stat name="likes" count={sandbox.likeCount} />
+
           <Stat name="views" count={sandbox.viewCount} />
+
           <Stat name="forks" count={sandbox.forkCount} />
         </Stats>
       </Row>
     </Container>
   );
-}
-
-export default SandboxInfo;
+};

packages/app/src/app/pages/Profile/Showcase/index.tsx

@@ -1,23 +1,22 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import { useOvermind } from 'app/overmind';
 
 import Column from '@codesandbox/common/lib/components/flex/Column';
 import Centered from '@codesandbox/common/lib/components/flex/Centered';
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
 import { Button } from '@codesandbox/common/lib/components/Button';
 
-import SandboxInfo from './SandboxInfo';
+import { SandboxInfo } from './SandboxInfo';
 import ShowcasePreview from '../../common/ShowcasePreview';
 
 import { ErrorTitle } from './elements';
 
-export const Showcase: React.FC<{}> = () => {
+export const Showcase: FunctionComponent = () => {
   const {
     state: {
       profile,
       profile: { isLoadingProfile },
       preferences: { settings },
-      isLoggedIn,
     },
     actions: {
       profile: { selectSandboxClicked },
@@ -62,13 +61,15 @@ export const Showcase: React.FC<{}> = () => {
           </Button>
         )}
       </Margin>
+
       <Margin top={2} style={{ width: '100%' }}>
         <Column alignItems="initial">
           <div style={{ flex: 2 }}>
             <ShowcasePreview sandbox={sandbox} settings={settings} />
           </div>
+
           <div style={{ flex: 1 }}>
-            <SandboxInfo sandbox={sandbox} isLoggedIn={isLoggedIn} />
+            <SandboxInfo sandbox={sandbox} />
           </div>
         </Column>
       </Margin>

packages/app/src/embed/components/Actions/elements.js

@@ -2,7 +2,6 @@ import styled from 'styled-components';
 import css from '@styled-system/css';
 import { HeartIconSVG, ReloadIconSVG, NewWindowIconSVG } from './icons';
 
-// TODO: Check if we still need previewVisible
 export const Container = styled.div(props =>
   css({
     position: 'absolute',
@@ -16,7 +15,7 @@ export const Container = styled.div(props =>
     },
 
     // 28 is the height of console
-    bottom: props.isDragging ? -32 : props.previewVisible ? 28 + 16 : 16,
+    bottom: props.isDragging ? -32 : props.offsetBottom ? 28 + 16 : 16,
     opacity: props.isDragging ? 0 : 1,
     transitionProperty: 'opacity, bottom',
     transitionDuration: theme =>