Playground improvements

Ives van Hoorne · Ives van Hoorne · commit 9b48877b9cad · 2018-02-24T14:13:46.000+01:00
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -116,6 +116,7 @@
     "circular-json": "^0.4.0",
     "codemirror": "^5.27.4",
     "codesandbox-api": "^0.0.14",
+    "codesandbox-import-utils": "^1.1.19",
     "color": "^0.11.4",
     "compare-versions": "^3.1.0",
     "css-modules-loader-core": "^1.1.0",
diff --git a/packages/app/src/sandbox/codesandbox-overlay/index.js b/packages/app/src/sandbox/codesandbox-overlay/index.js
@@ -0,0 +1,100 @@
+import { getParameters } from 'codesandbox-import-utils/lib/api/define';
+
+export default function createOverlay(modules) {
+  const normalized = Object.keys(modules).reduce(
+    (prev, next) => ({
+      ...prev,
+      [next.replace('/', '')]: {
+        content: modules[next].code,
+        isBinary: false,
+      },
+    }),
+    {}
+  );
+
+  const parameters = getParameters({ files: normalized });
+
+  return new Promise(resolve => {
+    const iframe = document.createElement('iframe');
+
+    iframe.setAttribute(
+      'style',
+      `transition: 0.3s ease background-color; position: fixed; bottom: 8px; right: 8px; height: 40px; width: 196px; background-color: rgba(0, 0, 0, 0.6); border-radius: 4px; border: 0; outline: 0; z-index: 214748366;`
+    );
+    iframe.setAttribute(
+      'onmouseover',
+      "this.style.backgroundColor='rgba(0, 0, 0, 0.7)';"
+    );
+    iframe.setAttribute(
+      'onmouseout',
+      "this.style.backgroundColor='rgba(0, 0, 0, 0.6)';"
+    );
+
+    iframe.onload = () => {
+      iframe.contentDocument.body.innerHTML = `
+        <form
+          action="https://codesandbox.io/api/v1/sandboxes/define"
+          method="POST"
+          target="_blank"
+          style="cursor:pointer;"
+        >
+        <input
+          type="hidden"
+          name="parameters"
+          value="${parameters}"
+        />
+          <div style="display:flex;align-items:center" onclick="javascript:document.forms[0].submit();">
+            <svg style="width:24px;height:24px;margin-right:8px;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px"
+              height="1024px" viewBox="0 0 1024 1024" enable-background="new 0 0 1024 1024" xml:space="preserve">
+              <g id="Layer_1">
+                <polyline
+                  fill="#FFFFFF"
+                  points="719.001,851 719.001,639.848 902,533.802 902,745.267 719.001,851"
+                />
+                <polyline
+                  fill="#FFFFFF"
+                  points="302.082,643.438 122.167,539.135 122.167,747.741 302.082,852.573 302.082,643.438"
+                />
+                <polyline
+                  fill="#FFFFFF"
+                  points="511.982,275.795 694.939,169.633 512.06,63 328.436,169.987 511.982,275.795"
+                />
+              </g>
+              <g id="Layer_2">
+                <polyline
+                  fill="none"
+                  stroke="#FFFFFF"
+                  stroke-width="80"
+                  stroke-miterlimit="10"
+                  points="899,287.833 509,513 509,963"
+                />
+                <line
+                  fill="none"
+                  stroke="#FFFFFF"
+                  stroke-width="80"
+                  stroke-miterlimit="10"
+                  x1="122.167"
+                  y1="289"
+                  x2="511.5"
+                  y2="513"
+                />
+                <polygon
+                  fill="none"
+                  stroke="#FFFFFF"
+                  stroke-width="80"
+                  stroke-miterlimit="10"
+                  points="121,739.083 510.917,963.042 901,738.333 901,288 511,62 121,289"
+                />
+              </g>
+          </svg>
+          <div style="font-size:.875rem; font-weight: 300; color: white; font-family: sans-serif">Open in CodeSandbox</div>
+        </div>
+      </form>
+      `;
+
+      resolve();
+    };
+
+    document.body.appendChild(iframe);
+  });
+}
diff --git a/packages/app/src/sandbox/compile.js b/packages/app/src/sandbox/compile.js
@@ -10,6 +10,7 @@ import Manager from './eval/manager';
 import { resetScreen } from './status-screen';
 
 import { inject, unmount } from './react-error-overlay/overlay';
+import createCodeSandboxOverlay from './codesandbox-overlay';
 import handleExternalResources from './external-resources';
 
 import defaultBoilerplates from './boilerplates/default-boilerplates';
@@ -129,6 +130,7 @@ async function compile({
   isModuleView = false,
   template,
   entry,
+  showOpenInCodeSandbox = true,
 }) {
   dispatch({
     type: 'start',
@@ -295,6 +297,10 @@ async function compile({
       initializeResizeListener();
     }
 
+    if (showOpenInCodeSandbox) {
+      createCodeSandboxOverlay(modules);
+    }
+
     try {
       // Testing
       const ttt = Date.now();
@@ -352,6 +358,7 @@ type Arguments = {
   externalResources: Array<string>,
   hasActions: boolean,
   template: string,
+  showOpenInCodeSandbox?: boolean,
 };
 
 const tasks: Array<Arguments> = [];
diff --git a/packages/codesandbox-playground/README.md b/packages/codesandbox-playground/README.md
@@ -1,22 +1,22 @@
-# SandPacker
+# SandPack
 
 A bundler that completely works in the browser, utilizing browser APIs.
 
 ## Why?
 
 Online code playgrounds are getting more popular: they provide an easy way to play with code without installation. Until a year ago it was very hard to play with bigger web applications in the browser; there was no bundler that was comparable with local bundlers and worked in the browser.
 
-CodeSandbox came along, and still had a pretty basic bundler. However, as CodeSandbox got more popular its bundler got more advanced. Nowadays the bundler has comparable parity with Webpack, and it would be a shame if others couldn't use the functionality.
+CodeSandbox came along, and still had a pretty basic bundler. However, as CodeSandbox got more popular its bundler got more advanced. Nowadays the bundler has comparable feature parity with Webpack, and it would be a shame if others couldn't use the functionality.
 
 This library acts as an interface with the bundler of CodeSandbox. It allows you to run any code on a web page, from Vue projects to React projects. With everything that CodeSandbox supports as well.
 
 ## So what can the bundler do?
 
 This is a list of features that the bundler supports, the list may be outdated.
 
-1. Hot Module Reloading API (`module.hot`).
+1. Hot Module Reloading API (`module.hot`)
 2. npm dependencies
-3. 17 transpilers
+3. Supports most common transpilers (vue, babel, typescript, css)
 4. Friendly error overlay
 5. Parallel transpiling
 6. On-demand transpiler loading
@@ -37,7 +37,9 @@ const m = new Manager(
   '#preview',
   {
     files: {
-      '/index.js': `console.log(require('uuid'))`,
+      '/index.js': {
+        code: `console.log(require('uuid'))`,
+      },
     },
     dependencies: {
       uuid: 'latest',
@@ -51,7 +53,9 @@ const m = new Manager(
 // how to hot update the preview.
 m.sendCode(
   {
-    '/index.js': `console.log('other code')`,
+    '/index.js': {
+      code: `console.log('other code')`,
+    },
   },
   {
     uuid: 'latest',
@@ -68,15 +72,24 @@ We included a React component you can use, the implementation is fairly simple.
 import Preview from 'codesandbox-playground/dist/components/Preview';
 
 const files = {
-  '/index.js': `
-    import uuid from 'uuid';
+  '/index.js': {
+    code: `
+    import preval from 'preval.macro';
 
-    console.log(uuid());
+    console.log(preval);
   `,
+  },
+  '.babelrc': {
+    // used for babel config
+    code: `
+      {}
+    `,
+  },
 };
 
 const dependencies = {
-  uuid: 'latest',
+  'babel-macros': 'latest',
+  'babel-plugin-preval': 'latest',
 };
 
 export default () => (
diff --git a/packages/codesandbox-playground/src/utils/frame.ts b/packages/codesandbox-playground/src/utils/frame.ts
@@ -15,11 +15,17 @@ export interface IDependencies {
   [depName: string]: string;
 }
 
+export interface IOptions {
+  showOpenInCodeSandbox?: boolean;
+  template?: string;
+}
+
 export function sendCode(
   frame: HTMLIFrameElement,
   files: IFiles,
   dependencies: IDependencies,
-  entry: string
+  entry: string,
+  options: IOptions = {}
 ) {
   const modules: IModules = Object.keys(files).reduce(
     (prev, next) => ({
@@ -33,11 +39,15 @@ export function sendCode(
   );
 
   modules['/package.json'] = {
-    code: JSON.stringify({
-      name: 'run',
-      main: entry,
-      dependencies,
-    }),
+    code: JSON.stringify(
+      {
+        name: 'run',
+        main: entry,
+        dependencies,
+      },
+      null,
+      2
+    ),
     path: '/package.json',
   };
 
@@ -50,7 +60,8 @@ export function sendCode(
       entry: entry,
       dependencies: dependencies,
       externalResources: [],
-      template: 'create-react-app',
+      template: options.template || 'create-react-app',
+      showOpenInCodeSandbox: options.showOpenInCodeSandbox || true,
     },
     '*'
   );
diff --git a/yarn.lock b/yarn.lock
@@ -3728,7 +3728,7 @@ codemirror@^5.27.4:
   version "5.31.0"
   resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.31.0.tgz#ecf3d057eb74174147066bfc7c5f37b4c4e07df2"
 
-codesandbox-import-utils@=1.1.19:
+codesandbox-import-utils@=1.1.19, codesandbox-import-utils@^1.1.19:
   version "1.1.19"
   resolved "https://registry.yarnpkg.com/codesandbox-import-utils/-/codesandbox-import-utils-1.1.19.tgz#e9756c8f6b5df89e28131d73078420b629612342"
   dependencies:
