Merge branch 'master' into fix-embed-default-file

Author: siddharthkp

.all-contributorsrc

@@ -1320,6 +1320,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "siddharthkp",
+      "name": "Sid",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/1863771?v=4",
+      "profile": "https://sid.st",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "repoType": "github",

README.md

@@ -1,4 +1,4 @@
-# [CodeSandbox](https://codesandbox.io) [![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/codesandbox) [![All Contributors](https://img.shields.io/badge/all_contributors-140-orange.svg?style=flat-square)](#contributors) [![CircleCI](https://circleci.com/gh/codesandbox/codesandbox-client.svg?style=svg)](https://circleci.com/gh/codesandbox/codesandbox-client) [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf)](https://www.browserstack.com/automate/public-build/cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/)
+# [CodeSandbox](https://codesandbox.io) [![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/codesandbox) [![All Contributors](https://img.shields.io/badge/all_contributors-141-orange.svg?style=flat-square)](#contributors) [![CircleCI](https://circleci.com/gh/codesandbox/codesandbox-client.svg?style=svg)](https://circleci.com/gh/codesandbox/codesandbox-client) [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf)](https://www.browserstack.com/automate/public-build/cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/)
 
 [![Backers on Open Collective](https://opencollective.com/codesandbox/backers/badge.svg)](#backers)
 [![Sponsors on Open Collective](https://opencollective.com/codesandbox/sponsors/badge.svg)](#sponsors)
@@ -63,6 +63,7 @@ Thanks goes to these wonderful people
 | [<img src="https://avatars2.githubusercontent.com/u/8527474?v=4" width="100px;"/><br /><sub><b>Neville Mehta</b></sub>](https://twitter.com/ask_neville)<br />[💻](https://github.com/codesandbox/codesandbox-client/commits?author=nm123github "Code") | [<img src="https://avatars0.githubusercontent.com/u/1813468?v=4" width="100px;"/><br /><sub><b>Vasiliy</b></sub>](https://github.com/Yeti-or)<br />[💻](https://github.com/codesandbox/codesandbox-client/commits?author=Yeti-or "Code") | [<img src="https://avatars3.githubusercontent.com/u/2793951?v=4" width="100px;"/><br /><sub><b>Romain Lanz</b></sub>](https://slynova.io)<br />[💻](https://github.com/codesandbox/codesandbox-client/commits?author=RomainLanz "Code") | [<img src="https://avatars2.githubusercontent.com/u/1233790?v=4" width="100px;"/><br /><sub><b>LiBe</b></sub>](http://libe.toile-libre.org)<br />[💻](https://github.com/codesandbox/codesandbox-client/commits?author=libetl "Code") | [<img src="https://avatars0.githubusercontent.com/u/5333019?v=4" width="100px;"/><br /><sub><b>Jeremy Bolding</b></sub>](http://thecodechef.github.io)<br />[💻](https://github.com/codesandbox/codesandbox-client/commits?author=thecodechef "Code") | [<img src="https://avatars1.githubusercontent.com/u/9664363?v=4" width="100px;"/><br /><sub><b>Evan Bacon</b></sub>](https://twitter.com/baconbrix)<br />[💻](https://github.com/codesandbox/codesandbox-client/commits?author=EvanBacon "Code") | [<img src="https://avatars3.githubusercontent.com/u/6643991?v=4" width="100px;"/><br /><sub><b>Michaël De Boey</b></sub>](https://michaeldeboey.be)<br />[📝](#blog-MichaelDeBoey "Blogposts") [🐛](https://github.com/codesandbox/codesandbox-client/issues?q=author%3AMichaelDeBoey "Bug reports") [💻](https://github.com/codesandbox/codesandbox-client/commits?author=MichaelDeBoey "Code") [📖](https://github.com/codesandbox/codesandbox-client/commits?author=MichaelDeBoey "Documentation") [🚇](#infra-MichaelDeBoey "Infrastructure (Hosting, Build-Tools, etc)") [🔧](#tool-MichaelDeBoey "Tools") |
 | [<img src="https://avatars1.githubusercontent.com/u/14077091?v=4" width="100px;"/><br /><sub><b>gabeeden</b></sub>](https://github.com/gabeeden)<br />[💻](https://github.com/codesandbox/codesandbox-client/commits?author=gabeeden "Code") | [<img src="https://avatars0.githubusercontent.com/u/7698292?v=4" width="100px;"/><br /><sub><b>Tiffany White</b></sub>](https://tiffanywhite.dev)<br />[💻](https://github.com/codesandbox/codesandbox-client/commits?author=twhite96 "Code") | [<img src="https://avatars3.githubusercontent.com/u/32302360?v=4" width="100px;"/><br /><sub><b>James Bedford</b></sub>](http://www.dopest.tech)<br />[💻](https://github.com/codesandbox/codesandbox-client/commits?author=JABedford "Code") | [<img src="https://avatars0.githubusercontent.com/u/3314957?v=4" width="100px;"/><br /><sub><b>Scott</b></sub>](https://www.patreon.com/user?u=16255660)<br />[💻](https://github.com/codesandbox/codesandbox-client/commits?author=smolinari "Code") | [<img src="https://avatars1.githubusercontent.com/u/12200583?v=4" width="100px;"/><br /><sub><b>Dutiyesh Salunkhe</b></sub>](https://github.com/dutiyesh)<br />[💻](https://github.com/codesandbox/codesandbox-client/commits?author=dutiyesh "Code") | [<img src="https://avatars2.githubusercontent.com/u/13641726?v=4" width="100px;"/><br /><sub><b>Halit Ogunc</b></sub>](http://halit.dev)<br />[💻](https://github.com/codesandbox/codesandbox-client/commits?author=halitogunc "Code") | [<img src="https://avatars0.githubusercontent.com/u/22376783?v=4" width="100px;"/><br /><sub><b>Yash Joshi</b></sub>](https://github.com/jyash97)<br />[💻](https://github.com/codesandbox/codesandbox-client/commits?author=jyash97 "Code") |
 | [<img src="https://avatars3.githubusercontent.com/u/1769092?v=4" width="100px;"/><br /><sub><b>Yehor</b></sub>](https://github.com/batiskafff)<br />[💻](https://github.com/codesandbox/codesandbox-client/commits?author=batiskafff "Code") | [<img src="https://avatars2.githubusercontent.com/u/6972822?v=4" width="100px;"/><br /><sub><b>Jens de Rond</b></sub>](https://github.com/Jensderond)<br />[🐛](https://github.com/codesandbox/codesandbox-client/issues?q=author%3AJensderond "Bug reports") [💻](https://github.com/codesandbox/codesandbox-client/commits?author=Jensderond "Code") | [<img src="https://avatars2.githubusercontent.com/u/2502947?v=4" width="100px;"/><br /><sub><b>Benjamin Schachter</b></sub>](http://benjaminschachter.com)<br />[📖](https://github.com/codesandbox/codesandbox-client/commits?author=benschac "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/14234815?v=4" width="100px;"/><br /><sub><b>Rafael</b></sub>](https://github.com/RafaelKr)<br />[🐛](https://github.com/codesandbox/codesandbox-client/issues?q=author%3ARafaelKr "Bug reports") [💻](https://github.com/codesandbox/codesandbox-client/commits?author=RafaelKr "Code") | [<img src="https://avatars0.githubusercontent.com/u/19686979?v=4" width="100px;"/><br /><sub><b>baremetalfreak</b></sub>](https://github.com/baremetalfreak)<br />[💬](#question-baremetalfreak "Answering Questions") [🐛](https://github.com/codesandbox/codesandbox-client/issues?q=author%3Abaremetalfreak "Bug reports") [💻](https://github.com/codesandbox/codesandbox-client/commits?author=baremetalfreak "Code") | [<img src="https://avatars0.githubusercontent.com/u/13278577?v=4" width="100px;"/><br /><sub><b>Javed</b></sub>](https://github.com/JayBee007)<br />[💻](https://github.com/codesandbox/codesandbox-client/commits?author=JayBee007 "Code") | [<img src="https://avatars1.githubusercontent.com/u/29365693?v=4" width="100px;"/><br /><sub><b>R4M80MRX</b></sub>](https://github.com/R4M80MrX)<br />[💻](https://github.com/codesandbox/codesandbox-client/commits?author=R4M80MrX "Code") |
+| [<img src="https://avatars0.githubusercontent.com/u/1863771?v=4" width="100px;"/><br /><sub><b>Sid</b></sub>](https://sid.st)<br />[💻](https://github.com/codesandbox/codesandbox-client/commits?author=siddharthkp "Code") |
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 

package.json

@@ -8,6 +8,7 @@
     "url": "https://github.com/codesandbox/codesandbox-client"
   },
   "scripts": {
+    "commit": "concurrently \"yarn typecheck\" \"yarn lint\" && git commit -m",
     "build": "cross-env NODE_OPTIONS=\"--max-old-space-size=4096\" yarn build:deps && yarn build:prod",
     "build:prod": "cross-env NODE_OPTIONS=\"--max-old-space-size=4096\" lerna run build  --scope homepage --stream && lerna run build --scope app --stream && lerna run copy-assets --scope app --stream",
     "build:embed": "lerna run build:embed --scope app --stream && gulp",

packages/app/package.json

@@ -214,9 +214,9 @@
     "normalizr": "^3.2.3",
     "onigasm": "^2.2.1",
     "ot": "^0.0.15",
-    "overmind": "^19.0.1",
+    "overmind": "^19.1.1",
     "overmind-devtools": "^19.0.0",
-    "overmind-react": "^19.0.0",
+    "overmind-react": "^20.1.1",
     "phoenix": "^1.3.0",
     "postcss": "^6.0.9",
     "postcss-selector-parser": "^2.2.3",

packages/app/src/app/componentConnectors.ts

@@ -1,25 +1,38 @@
+import { json } from 'overmind';
 import { inject as mobxInject, observer as mobxObserver } from 'mobx-react';
 import { observer as mobxHooksObserver } from 'mobx-react-lite';
 import { connect } from './overmind';
 
-const isOvermind = location.search.includes('overmind=true');
+const isOvermind = localStorage.getItem('overmind') === 'true';
 
 export const inject: any = isOvermind
   ? () => component => component
-  : mobxInject;
+  : (...injects) => mobxInject('reaction', ...injects);
 
 export const observer: any = isOvermind ? connect : mobxObserver;
 
 export const hooksObserver: any = isOvermind ? connect : mobxHooksObserver;
 
 export const Observer = isOvermind
-  ? inject('store', 'signals')(
-      connect(({ store, signals, children }: any) =>
-        children({ store, signals })
-      )
+  ? connect(({ store, signals, reaction, children }: any) =>
+      children({ store, signals, reaction })
     )
   : inject('store', 'signals')(
-      observer(({ store, signals, children }: any) =>
-        children({ store, signals })
+      observer(({ store, signals, reaction, children }: any) =>
+        children({ store, signals, reaction })
       )
     );
+
+export const clone = isOvermind
+  ? json
+  : obj => {
+      if (obj.toJSON) {
+        return obj.toJSON();
+      }
+
+      if (obj.toJS) {
+        return obj.toJS();
+      }
+
+      return obj;
+    };

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

@@ -27,14 +27,15 @@ import { getTextOperation } from '@codesandbox/common/lib/utils/diff';
 // @ts-ignore
 import LinterWorker from 'worker-loader?publicPath=/&name=monaco-linter.[hash:8].worker.js!../Monaco/workers/linter';
 /* eslint-enable import/no-webpack-loader-syntax */
-
+import { clone } from 'app/componentConnectors';
 import eventToTransform from '../Monaco/event-to-transform';
 import MonacoEditorComponent, { EditorAPI } from './MonacoReactComponent';
 import { Container, GlobalStyles } from './elements';
 import getSettings from '../Monaco/settings';
 
 import { Props, Editor } from '../types';
 import getMode from '../Monaco/mode';
+
 import {
   lineAndColumnToIndex,
   indexToLineAndColumn,
@@ -698,7 +699,7 @@ export class VSCode extends React.Component<Props> implements Editor {
   };
 
   applyOperations = (operations: { [moduleShortid: string]: any }) => {
-    const operationsJSON = operations.toJSON();
+    const operationsJSON = operations.toJSON ? operations.toJSON() : operations;
 
     Object.keys(operationsJSON).forEach(moduleShortid => {
       const operation = TextOperation.fromJSON(operationsJSON[moduleShortid]);
@@ -1119,8 +1120,7 @@ export class VSCode extends React.Component<Props> implements Editor {
             <Configuration
               onChange={this.props.onChange}
               // Copy the object, we don't want mutations in the component
-              // @ts-ignore
-              currentModule={currentModule.toJSON()}
+              currentModule={clone(currentModule)}
               config={config}
               sandbox={this.sandbox}
               {...extraProps}

packages/app/src/app/components/SandboxList/SandboxList.tsx

@@ -73,11 +73,11 @@ export const SandboxList: React.FC<ISandboxListProps> = ({
             <StatBody>{s.likeCount}</StatBody>
             <StatBody>{s.viewCount}</StatBody>
             <StatBody>{s.forkCount}</StatBody>
-            {isCurrentUser && (
+            {isCurrentUser && onDelete ? (
               <DeleteBody>
                 <DeleteSandboxButton id={s.id} onDelete={onDelete} />
               </DeleteBody>
-            )}
+            ) : null}
           </SandboxRow>
         );
       })}

packages/app/src/app/index.js

@@ -3,6 +3,7 @@ import { render } from 'react-dom';
 import { ThemeProvider } from 'styled-components';
 import { Router } from 'react-router-dom';
 import { ApolloProvider } from 'react-apollo';
+import { reaction } from 'mobx';
 import { ApolloProvider as HooksProvider } from '@apollo/react-hooks';
 import { Provider } from 'mobx-react';
 import _debug from '@codesandbox/common/lib/utils/debug';
@@ -33,7 +34,7 @@ import { Routes as App } from './pages';
 import { Provider as OvermindProvider } from './overmind/Provider';
 import './split-pane.css';
 import { getTypeFetcher } from './vscode/extensionHostWorker/common/type-downloader';
-
+import overmindLogo from './overmind.png';
 import { vscode } from './vscode';
 import {
   initializeThemeCache,
@@ -123,7 +124,11 @@ async function boot(state, signals, overmind) {
       render(
         <Signals.Provider value={signals}>
           <Store.Provider value={state}>
-            <Provider store={state} signals={signals}>
+            <Provider
+              store={state}
+              signals={signals}
+              reaction={(cbA, cbB) => reaction(() => cbA(state), cbB)}
+            >
               <ApolloProvider client={client}>
                 <OvermindProvider value={overmind}>
                   <HooksProvider client={client}>
@@ -154,20 +159,51 @@ async function initialize() {
   let state = null;
   let overmind = null;
 
-  if (location.search.includes('overmind=true')) {
+  window.useOvermind = useIt => {
+    if (typeof useIt === 'undefined') {
+      return localStorage.getItem('overmind');
+    }
+
+    localStorage.setItem('overmind', JSON.stringify(useIt));
+    location.reload(true);
+
+    return useIt;
+  };
+
+  if (localStorage.getItem('overmind') === 'true') {
     await Promise.all([import('overmind'), import('./overmind')]).then(
       modules => {
         const createOvermind = modules[0].createOvermind;
         const config = modules[1].config;
 
         overmind = createOvermind(config, {
-          devtools: 'localhost:3032',
+          devtools:
+            window.opener && window.opener !== window && !window.chrome
+              ? false
+              : 'localhost:3031',
+          name: 'CodeSandbox',
           logProxies: true,
         });
 
-        getState = () => overmind.state;
+        getState = path =>
+          path
+            ? path.split('.').reduce((aggr, key) => aggr[key], overmind.state)
+            : overmind.state;
         getSignal = path =>
           path.split('.').reduce((aggr, key) => aggr[key], overmind.actions);
+
+        const logoContainer = document.createElement('div');
+        logoContainer.style.position = 'fixed';
+        logoContainer.style.bottom = '30px';
+        logoContainer.style.left = '10px';
+        logoContainer.style.zIndex = '999999';
+        logoContainer.style.width = '40px';
+        logoContainer.style.height = '40px';
+        logoContainer.style.borderRadius = '3px';
+        logoContainer.style.backgroundImage = `url(${overmindLogo})`;
+        logoContainer.style.backgroundSize = 'cover';
+        logoContainer.style.backgroundSize = 'cover';
+        document.body.appendChild(logoContainer);
       }
     );
   } else {
@@ -195,6 +231,9 @@ async function initialize() {
     getSignal = controller.getSignal.bind(controller);
   }
 
+  window.getState = getState;
+  window.getSignal = getSignal;
+
   // Configures BrowserFS to use the LocalStorage file system.
   window.BrowserFS.configure(
     {