Merge branch 'master' into editor-modules

Author: CompuIves

.all-contributorsrc

@@ -633,6 +633,16 @@
         "design",
         "ideas"
       ]
+    },
+    {
+      "login": "francoischalifour",
+      "name": "François Chalifour",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/6137112?v=4",
+      "profile": "https://francoischalifour.com",
+      "contributions": [
+        "bug",
+        "code"
+      ]
     }
   ],
   "repoType": "github"

README.md

@@ -1,4 +1,5 @@
-# [CodeSandbox](https://codesandbox.io) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-65-orange.svg?style=flat-square)](#contributors) [![CircleCI](https://circleci.com/gh/CompuIves/codesandbox-client.svg?style=svg)](https://circleci.com/gh/CompuIves/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) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-66-orange.svg?style=flat-square)](#contributors) [![CircleCI](https://circleci.com/gh/CompuIves/codesandbox-client.svg?style=svg)](https://circleci.com/gh/CompuIves/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)
 
 ![Banner](https://codesandbox.io/static/img/banner.png)
 
@@ -49,5 +50,27 @@ Thanks goes to these wonderful people
 | [<img src="https://avatars0.githubusercontent.com/u/1820292?v=4" width="100px;"/><br /><sub><b>Michel Weststrate</b></sub>](https://twitter.com/mweststrate)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=mweststrate "Code") | [<img src="https://avatars0.githubusercontent.com/u/52824?v=4" width="100px;"/><br /><sub><b>Oleg</b></sub>](https://kof.github.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=kof "Code") | [<img src="https://avatars0.githubusercontent.com/u/1127037?v=4" width="100px;"/><br /><sub><b>Paul Sherman</b></sub>](https://www.pshrmn.com)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Apshrmn "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=pshrmn "Code") | [<img src="https://avatars2.githubusercontent.com/u/9244507?v=4" width="100px;"/><br /><sub><b>Ro Savage</b></sub>](https://github.com/ro-savage)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=ro-savage "Code") | [<img src="https://avatars3.githubusercontent.com/u/13242392?v=4" width="100px;"/><br /><sub><b>Sam Denty</b></sub>](https://samdd.me)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=samdenty99 "Code") | [<img src="https://avatars1.githubusercontent.com/u/3087225?v=4" width="100px;"/><br /><sub><b>Zephraph</b></sub>](https://github.com/zephraph)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=zephraph "Code") | [<img src="https://avatars1.githubusercontent.com/u/1900735?v=4" width="100px;"/><br /><sub><b>Josh Waller</b></sub>](https://www.joshwaller.me)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Amdxprograms "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=mdxprograms "Code") [📖](https://github.com/CompuIves/codesandbox-client/commits?author=mdxprograms "Documentation") |
 | [<img src="https://avatars0.githubusercontent.com/u/1195863?v=4" width="100px;"/><br /><sub><b>Joe Ng'ethe</b></sub>](http://joey.co.ke)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=joeynimu "Code") | [<img src="https://avatars0.githubusercontent.com/u/576935?v=4" width="100px;"/><br /><sub><b>Carles Codony</b></sub>](https://github.com/bitblitter)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=bitblitter "Code") | [<img src="https://avatars2.githubusercontent.com/u/468006?v=4" width="100px;"/><br /><sub><b>Vytenis</b></sub>](https://github.com/FDiskas)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=FDiskas "Code") | [<img src="https://avatars1.githubusercontent.com/u/894149?v=4" width="100px;"/><br /><sub><b>Manuel Dugué</b></sub>](http://manueldugue.de)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Amdugue "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=mdugue "Code") | [<img src="https://avatars2.githubusercontent.com/u/5346497?v=4" width="100px;"/><br /><sub><b>Demian Dekoninck</b></sub>](https://dem.be)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=DemianD "Code") | [<img src="https://avatars2.githubusercontent.com/u/3144549?v=4" width="100px;"/><br /><sub><b>Drake Costa</b></sub>](http://www.saeris.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=Saeris "Code") | [<img src="https://avatars2.githubusercontent.com/u/433394?v=4" width="100px;"/><br /><sub><b>Marko Stijak</b></sub>](https://cxjs.io/)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=mstijak "Code") |
 | [<img src="https://avatars2.githubusercontent.com/u/10588170?v=4" width="100px;"/><br /><sub><b>Ilya</b></sub>](https://twitter.com/ilya_komar0ff)<br />[💬](#question-Komar0ff "Answering Questions") [🤔](#ideas-Komar0ff "Ideas, Planning, & Feedback") | [<img src="https://avatars2.githubusercontent.com/u/10627086?v=4" width="100px;"/><br /><sub><b>Emerson Laurentino</b></sub>](https://twitter.com/elaurent_)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=emersonlaurentino "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Aemersonlaurentino "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/180963?v=4" width="100px;"/><br /><sub><b>Aaron Reisman</b></sub>](https://github.com/lifeiscontent)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Alifeiscontent "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=lifeiscontent "Code") [📦](#platform-lifeiscontent "Packaging/porting to new platform") | [<img src="https://avatars2.githubusercontent.com/u/19484365?v=4" width="100px;"/><br /><sub><b>Colton Colcleasure</b></sub>](https://github.com/colshacol)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=colshacol "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Acolshacol "Bug reports") | [<img src="https://avatars0.githubusercontent.com/u/497242?v=4" width="100px;"/><br /><sub><b>PJ Walker</b></sub>](https://github.com/PJWalker)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3APJWalker "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=PJWalker "Code") | [<img src="https://avatars2.githubusercontent.com/u/29819102?v=4" width="100px;"/><br /><sub><b>Satya Rohith</b></sub>](https://satya.tech)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=satyarohith "Code") [📖](https://github.com/CompuIves/codesandbox-client/commits?author=satyarohith "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/17421347?v=4" width="100px;"/><br /><sub><b>Melanie Seltzer</b></sub>](https://www.melanieseltzer.io/)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=melanieseltzer "Code") |
-| [<img src="https://avatars1.githubusercontent.com/u/23313266?v=4" width="100px;"/><br /><sub><b>ZYSzys</b></sub>](http://zyszys.top)<br />[📖](https://github.com/CompuIves/codesandbox-client/commits?author=ZYSzys "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/1051509?v=4" width="100px;"/><br /><sub><b>Sara Vieira</b></sub>](http://iamsaravieira.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=SaraVieira "Code") [🎨](#design-SaraVieira "Design") [🤔](#ideas-SaraVieira "Ideas, Planning, & Feedback") |
+| [<img src="https://avatars1.githubusercontent.com/u/23313266?v=4" width="100px;"/><br /><sub><b>ZYSzys</b></sub>](http://zyszys.top)<br />[📖](https://github.com/CompuIves/codesandbox-client/commits?author=ZYSzys "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/1051509?v=4" width="100px;"/><br /><sub><b>Sara Vieira</b></sub>](http://iamsaravieira.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=SaraVieira "Code") [🎨](#design-SaraVieira "Design") [🤔](#ideas-SaraVieira "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/6137112?v=4" width="100px;"/><br /><sub><b>François Chalifour</b></sub>](https://francoischalifour.com)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Afrancoischalifour "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=francoischalifour "Code") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->
+
+## Backers
+
+Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/codesandbox#backer)]
+
+<a href="https://opencollective.com/codesandbox#backers" target="_blank"><img src="https://opencollective.com/codesandbox/backers.svg?width=890"></a>
+
+
+## Sponsors
+
+Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/codesandbox#sponsor)]
+
+<a href="https://opencollective.com/codesandbox/sponsor/0/website" target="_blank"><img src="https://opencollective.com/codesandbox/sponsor/0/avatar.svg"></a>
+<a href="https://opencollective.com/codesandbox/sponsor/1/website" target="_blank"><img src="https://opencollective.com/codesandbox/sponsor/1/avatar.svg"></a>
+<a href="https://opencollective.com/codesandbox/sponsor/2/website" target="_blank"><img src="https://opencollective.com/codesandbox/sponsor/2/avatar.svg"></a>
+<a href="https://opencollective.com/codesandbox/sponsor/3/website" target="_blank"><img src="https://opencollective.com/codesandbox/sponsor/3/avatar.svg"></a>
+<a href="https://opencollective.com/codesandbox/sponsor/4/website" target="_blank"><img src="https://opencollective.com/codesandbox/sponsor/4/avatar.svg"></a>
+<a href="https://opencollective.com/codesandbox/sponsor/5/website" target="_blank"><img src="https://opencollective.com/codesandbox/sponsor/5/avatar.svg"></a>
+<a href="https://opencollective.com/codesandbox/sponsor/6/website" target="_blank"><img src="https://opencollective.com/codesandbox/sponsor/6/avatar.svg"></a>
+<a href="https://opencollective.com/codesandbox/sponsor/7/website" target="_blank"><img src="https://opencollective.com/codesandbox/sponsor/7/avatar.svg"></a>
+<a href="https://opencollective.com/codesandbox/sponsor/8/website" target="_blank"><img src="https://opencollective.com/codesandbox/sponsor/8/avatar.svg"></a>
+<a href="https://opencollective.com/codesandbox/sponsor/9/website" target="_blank"><img src="https://opencollective.com/codesandbox/sponsor/9/avatar.svg"></a>

package.json

@@ -21,7 +21,7 @@
     "add-contributor": "all-contributors add",
     "generate": "all-contributors generate",
     "precommit": "lint-staged",
-    "postinstall": "rimraf packages/app/node_modules/styled-components && yarn lerna run install-dependencies --scope codesandbox-browserfs --scope sse-loading-screen --stream"
+    "postinstall": "rimraf packages/app/node_modules/styled-components && yarn lerna run install-dependencies --scope codesandbox-browserfs --scope sse-loading-screen --stream && opencollective postinstall"
   },
   "lint-staged": {
     "*.{js,css,json}": [
@@ -66,5 +66,13 @@
     "lerna": "^2.5.1",
     "lint-staged": "^5.0.0",
     "prettier": "^1.8.2"
+  },
+  "dependencies": {
+    "opencollective": "^1.0.3"
+  },
+  "collective": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/codesandbox",
+    "logo": "https://opencollective.com/codesandbox/logo.txt"
   }
-}
+}

packages/app/config/webpack.prod.js

@@ -111,16 +111,19 @@ module.exports = merge(commonConfig, {
       maximumFileSizeToCacheInBytes: 5242880,
 
       runtimeCaching: [
-        {
-          urlPattern: /api\/v1\/sandboxes/,
-          handler: 'networkFirst',
-          options: {
-            cache: {
-              maxEntries: 50,
-              name: 'sandboxes-cache',
-            },
-          },
-        },
+        // Don't add this runtime cache as this causes us to give back *old*
+        // API responses, this will lead people to believe that they lost work
+        // when they can't connect to our servers.
+        // {
+        //   urlPattern: /api\/v1\/sandboxes/,
+        //   handler: 'networkFirst',
+        //   options: {
+        //     cache: {
+        //       maxEntries: 50,
+        //       name: 'sandboxes-cache',
+        //     },
+        //   },
+        // },
         {
           urlPattern: /^https:\/\/unpkg\.com/,
           handler: 'cacheFirst',

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

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import type { Sandbox, Module } from 'common/types';
-import { listen, dispatch, registerFrame } from 'codesandbox-api';
+import { listen, dispatch, registerFrame, resetState } from 'codesandbox-api';
 import { debounce } from 'lodash-es';
 import io from 'socket.io-client';
 
@@ -336,6 +336,8 @@ class BasePreview extends React.Component<Props, State> {
   handleSandboxChange = (newId: string) => {
     this.serverPreview = getTemplate(this.props.sandbox.template).isServer;
 
+    resetState();
+
     const url = this.serverPreview
       ? getSSEUrl(newId)
       : frameUrl(newId, this.props.initialPath || '');
@@ -360,7 +362,12 @@ class BasePreview extends React.Component<Props, State> {
   handleMessage = (data: Object, source: any) => {
     if (data && data.codesandbox) {
       if (data.type === 'initialized' && source) {
-        registerFrame(source);
+        registerFrame(
+          source,
+          this.serverPreview
+            ? getSSEUrl(this.props.sandbox.id)
+            : frameUrl(this.props.sandbox.id)
+        );
 
         if (!this.state.frameInitialized && this.props.onInitialized) {
           this.disposeInitializer = this.props.onInitialized(this);

packages/app/src/app/pages/Dashboard/Content/Sandboxes/index.js

@@ -49,6 +49,7 @@ class Content extends React.Component {
           <DelayedAnimation
             delay={0.6}
             style={{
+              textAlign: 'center',
               marginTop: '2rem',
               fontWeight: 600,
               color: 'rgba(255, 255, 255, 0.5)',

packages/app/src/app/pages/Sandbox/SearchDependencies/DependencyHit/index.js

@@ -132,7 +132,7 @@ export default class DependencyHit extends React.PureComponent {
                 const tagName = getTagName(hit.tags, v);
                 return (
                   <option key={v}>
-                    {v} {tagName ? `- ${tagName}` : ''}
+                    {v} {tagName && `- ${tagName}`}
                   </option>
                 );
               })}

packages/app/src/app/pages/Search/Filters/Filter/elements.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export const Container = styled.div`
   padding: 1rem;
@@ -19,10 +19,37 @@ export const Container = styled.div`
     font-size: 0.875rem;
     padding-left: 2.5em;
   }
+
+  @media (max-width: 768px) {
+    ${props =>
+      !props.open &&
+      css`
+        height: 30px;
+        overflow: hidden;
+      `};
+  }
 `;
 
 export const Title = styled.div`
   font-weight: 300;
   font-size: 1.25rem;
   margin-bottom: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  svg {
+    display: none;
+    width: 30px;
+    height: 30px;
+    @media (max-width: 768px) {
+      display: block;
+    }
+  }
+`;
+
+export const Button = styled.button`
+  border: none;
+  background: inherit;
+  color: ${props => props.theme.white};
 `;

packages/app/src/app/pages/Search/Filters/Filter/index.js

@@ -1,21 +1,31 @@
-import React from 'react';
-
+import React, { Component } from 'react';
+import Down from 'react-icons/lib/md/expand-more';
+import Up from 'react-icons/lib/md/expand-less';
 import { RefinementList } from 'react-instantsearch/dom';
 
-import { Container, Title } from './elements';
+import { Container, Title, Button } from './elements';
 
-function Filter({ title, attributeName, operator, noSearch }) {
-  return (
-    <Container>
-      <Title>{title}</Title>
-      <RefinementList
-        withSearchBox={!noSearch}
-        showMore={!noSearch}
-        operator={operator}
-        attributeName={attributeName}
-      />
-    </Container>
-  );
-}
+class Filter extends Component {
+  state = { open: false };
 
+  toggle = () => this.setState(({ open }) => ({ open: !open }));
+  render() {
+    const { title, attributeName, operator, noSearch } = this.props;
+    const { open } = this.state;
+    return (
+      <Container open={open}>
+        <Title>
+          <span>{title}</span>
+          <Button onClick={this.toggle}>{open ? <Up /> : <Down />}</Button>
+        </Title>
+        <RefinementList
+          withSearchBox={!noSearch}
+          showMore={!noSearch}
+          operator={operator}
+          attributeName={attributeName}
+        />
+      </Container>
+    );
+  }
+}
 export default Filter;

packages/app/src/app/pages/Search/Filters/elements.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+export const Container = styled.aside`
+  flex: 1;
+  @media (max-width: 768px) {
+    width: 100%;
+  }
+`;