Binary support (codesandbox#284)

* Move to workspaces

* Enable experimental workspaces

* Lerna

* Intermediate

* Nice

* Intermediate

* Progress

* Reorganize

* Binary support

* Test commit

* UI

* More commits

* changes

* Better support

* Fix eslint

* Updates

* Almost done

* Change Prettier

* Fix tests

* Build api before linting

* Update CirleCI image

* Add flag

* Perf improvements

* Perf improvements

* IE11 support

* Performance improvements

* Fix scaling

* Fix build script

* Update config

* Fix Gatsby static assets

* Fix host

* Wave adjustment

* Fix URL of embed

* Fix width artifacts for 1280px width

* Update media queries

* Fix false positives for low performance mode

* Update footer & process feedback

* Add 'New Sandbox' page

* Update navigation button

* Fix tests

* Add entry fallback for smoother deployment

* Export to GitHub

* Fix ESLint

* Fix ESLint

* Fix merge conflict in yarn.lock

* Add new article to homepage

Author: CompuIves

.eslintrc

@@ -9,7 +9,8 @@
   },
   "globals": {
     "Raven": true,
-    "VERSION": true
+    "VERSION": true,
+    "$PropertyType": true
   },
   "rules": {
     "react/jsx-filename-extension": 0,

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:8.2.1
+FROM node:9
 LABEL maintainer "Ives van Hoorne"
 
 RUN mkdir /usr/src/app

Dockerfile.prod

@@ -1,4 +1,4 @@
-FROM node:8.2.1
+FROM node:9
 LABEL maintainer "Ives van Hoorne"
 
 COPY package.json /app/package.json

config/webpack.common.js

@@ -53,12 +53,6 @@ module.exports = {
 
   module: {
     rules: [
-      {
-        test: /\.js$/,
-        loader: 'eslint-loader',
-        enforce: 'pre',
-        include: [paths.appSrc, paths.embedSrc],
-      },
       {
         test: /\.js$/,
         include: [paths.src, /@emmetio/],

config/webpack.prod.js

@@ -2,6 +2,7 @@ const merge = require('webpack-merge');
 const webpack = require('webpack');
 const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const ManifestPlugin = require('webpack-manifest-plugin');
 const childProcess = require('child_process');
 const commonConfig = require('./webpack.common');
 
@@ -212,5 +213,8 @@ module.exports = merge(commonConfig, {
     // You can remove this if you don't use Moment.js:
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
     new webpack.IgnorePlugin(/\/src\/node_modules/),
+    new ManifestPlugin({
+      fileName: 'file-manifest.json',
+    }),
   ],
 });

package.json

@@ -86,6 +86,7 @@
     "webpack-bundle-analyzer": "^2.9.0",
     "webpack-dev-middleware": "^1.11.0",
     "webpack-dev-server": "^2.5.1",
+    "webpack-manifest-plugin": "^1.3.2",
     "webpack-merge": "^4.1.0",
     "whatwg-fetch": "^2.0.3",
     "worker-loader": "^0.8.1"
@@ -127,6 +128,7 @@
     "gulp-rev": "^7.1.2",
     "hash-sum": "^1.0.2",
     "humps": "CompuIves/humps",
+    "is-image": "^2.0.0",
     "jszip": "^3.1.3",
     "lodash": "^4.17.2",
     "match-sorter": "^1.8.1",

src/app/components/Input.js

@@ -1,14 +1,14 @@
 import styled from 'styled-components';
 
-export default styled.input`
+const Input = styled.input`
   transition: 0.3s ease border-color;
   background-color: rgba(0, 0, 0, 0.3);
   border: none;
   outline: none;
   border-radius: 4px;
   color: white;
   padding: 0.25em;
-  width: inherit;
+  width: ${({ block }) => (block ? '100%' : 'inherit')};
   box-sizing: border-box;
 
   border: 1px solid
@@ -19,3 +19,7 @@ export default styled.input`
     border-color: ${props => props.theme.secondary.clearer(0.6)};
   }
 `;
+
+export default Input;
+
+export const TextArea = Input.withComponent('textarea');

…/app/containers/Deployment/OpaqueLogo.js src/app/components/OpaqueLogo.jssrc/app/containers/Deployment/OpaqueLogo.js renamed to src/app/components/OpaqueLogo.js src/app/containers/Deployment/OpaqueLogo.js renamed to src/app/components/OpaqueLogo.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import Centered from 'app/components/flex/Centered';
+import Input from 'app/components/Input';
+import Button from 'app/components/buttons/Button';
+
+const Container = styled(Centered)`
+  height: 100%;
+  color: rgba(255, 255, 255, 0.9);
+`;
+
+const Title = styled.div`
+  font-size: 2rem;
+  margin-top: 3rem;
+  margin: 1rem 0;
+`;
+
+const SubTitle = styled.div`
+  font-size: 1.5rem;
+  color: rgba(255, 255, 255, 0.7);
+`;
+
+const Image = styled.img`
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+
+  max-width: 80%;
+  max-height: 70%;
+`;
+
+const MaxWidth = styled.form`
+  display: flex;
+  justify-content: centered;
+  flex-direction: row;
+  width: 80%;
+
+  input {
+    flex: 4;
+    font-size: 1.5rem;
+  }
+
+  button {
+    flex: 1;
+    margin-left: 1rem;
+  }
+`;
+
+type Props = {
+  id: string,
+  code: string,
+  title: string,
+  isNotSynced: boolean,
+  changeCode: (id: string, code: string) => Object,
+  saveCode: ?() => void,
+};
+
+export default class ImageViewer extends React.Component<Props> {
+  onSubmit = e => {
+    e.preventDefault();
+
+    this.props.saveCode();
+  };
+
+  changeCode = e => {
+    this.props.changeCode(this.props.id, e.target.value);
+  };
+
+  render() {
+    return (
+      <Container horizontal>
+        <Title>Image</Title>
+        <SubTitle>
+          We refer to these files by URL, you can edit this url to change the
+          image.
+        </SubTitle>
+
+        <Image src={this.props.code} alt={this.props.title} />
+
+        <MaxWidth onSubmit={this.onSubmit}>
+          <Input
+            innerRef={el => {
+              this.input = el;
+            }}
+            onChange={this.changeCode}
+            value={this.props.code}
+          />
+          <Button disabled={!this.props.isNotSynced} type="submit">
+            Save
+          </Button>
+        </MaxWidth>
+      </Container>
+    );
+  }
+}

src/app/components/sandbox/CodeEditor/ImageViewer.js

@@ -1,12 +1,25 @@
 import React from 'react';
 import Loadable from 'react-loadable';
+
 import Loading from 'app/components/Loading';
-import { Preferences } from 'common/types';
+import Title from 'app/components/text/Title';
+import SubTitle from 'app/components/text/SubTitle';
+import Centered from 'app/components/flex/Centered';
+import Margin from 'app/components/spacing/Margin';
+import { Preferences, Module, Directory } from 'common/types';
+
+import isImage from 'is-image';
 
 import Monaco from './Monaco';
+import ImageViewer from './ImageViewer';
 
 type Props = {
   preferences: Preferences,
+  id: string,
+  modules: Array<Module>,
+  directories: Array<Directory>,
+  changeCode: (id: string, code: string) => Object,
+  saveCode: ?() => void,
 };
 
 const CodeMirror = Loadable({
@@ -15,6 +28,40 @@ const CodeMirror = Loadable({
 });
 
 export default (props: Props) => {
+  const module = props.modules.find(m => m.id === props.id);
+
+  if (module) {
+    if (module.isBinary) {
+      if (isImage(module.title)) {
+        return (
+          <ImageViewer
+            changeCode={props.changeCode}
+            saveCode={props.saveCode}
+            code={module.code}
+            title={module.title}
+            id={module.id}
+            isNotSynced={module.isNotSynced}
+          />
+        );
+      }
+
+      return (
+        <Margin top={2}>
+          <Centered horizontal vertical>
+            <Title>This file is too big to edit</Title>
+            <SubTitle>
+              We will add support for this as soon as possible.
+            </SubTitle>
+
+            <a href={module.code} target="_blank" rel="noreferrer noopener">
+              Open file externally
+            </a>
+          </Centered>
+        </Margin>
+      );
+    }
+  }
+
   // We are phasing towards Monaco, the only thing missing is vim mode. So use
   // CodeMirror until we have proper support
   if (props.preferences.vimMode || props.preferences.codeMirror) {