Progress

Author: Ives van Hoorne

packages/codesandbox-playground/.storybook/addons.js

@@ -1,2 +1,4 @@
+import '@storybook/addon-knobs/register';
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
+import 'storybook-addon-jsx/register';

packages/codesandbox-playground/package.json

@@ -10,9 +10,11 @@
   "license": "MIT",
   "private": false,
   "devDependencies": {
-    "@storybook/addon-actions": "^3.2.17",
-    "@storybook/addon-links": "^3.2.17",
-    "@storybook/react": "^3.2.17",
+    "@storybook/addon-actions": "=3.2.18",
+    "@storybook/addon-knobs": "=3.2.18",
+    "@storybook/addon-links": "=3.2.18",
+    "@storybook/react": "=3.2.18",
+    "storybook-addon-jsx": "^5.1.0",
     "typescript": "^2.6.2"
   },
   "peerDependencies": {
@@ -23,6 +25,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "codemirror": "^5.32.0"
+    "codemirror": "^5.32.0",
+    "prop-types": "^15.6.0"
   }
 }

packages/codesandbox-playground/src/components/Preview/Preview.js

@@ -1,41 +1,63 @@
 import React from 'react';
-import { listen, dispatch } from 'codesandbox-api';
+import PropTypes from 'prop-types';
 
 export default class Preview extends React.PureComponent {
+  static propTypes = {
+    files: PropTypes.shape({
+      path: PropTypes.shape({
+        code: PropTypes.string.isRequired,
+      }),
+    }).isRequired,
+    dependencies: PropTypes.objectOf(PropTypes.string),
+    resources: PropTypes.arrayOf(PropTypes.string),
+  };
+
+  static defaultProps = {
+    dependencies: {},
+    resources: [],
+  };
+
   setupFrame = el => {
-    listen(this.handleMessage);
+    // listen(this.handleMessage);
+    if (el) {
+      this.frame = el;
+      this.frame.onload = () => {
+        this.sendCode();
+      };
+    }
   };
 
   sendCode = () => {
-    const module = {
-      code: 'console.log(require("react")); console.log(require("react-dom"))',
-      path: 'index.js',
-    };
-    this.frame.postMessage(
+    const modules = Object.keys(this.props.files).map(path => ({
+      ...this.props.files[path],
+      path,
+    }));
+
+    this.frame.contentWindow.postMessage(
       {
         type: 'compile',
         codesandbox: true,
-        modules: [module],
-        path: 'index.js',
-        externalResources: [],
-        dependencies: { react: '15.5.4', 'react-dom': '15.5.4' },
+        version: 2,
+        modules,
+        entry: '/index.js',
+        externalResources: this.props.resources,
+        dependencies: this.props.dependencies,
       },
       '*'
     );
   };
 
   handleMessage = (data, source) => {
-    if (data.type === 'initialized') {
-      this.frame = source;
-      this.sendCode();
-    }
+    // if (data.type === 'initialized') {
+    //   this.frame = source;
+    // }
   };
 
   render() {
     return (
       <iframe
-        style={{ width: '100%', height: '100%' }}
-        src="http://localhost:3001"
+        style={{ width: '100%', height: '1000px', border: 'none' }}
+        src="https://sandbox.codesandbox.io"
         ref={this.setupFrame}
       />
     );

packages/codesandbox-playground/stories/index.js

@@ -1,23 +1,40 @@
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
 
-import { Button, Welcome } from '@storybook/react/demo';
+import Preview from '../src/components/Preview';
 
-import Playground from '../src';
+const stories = storiesOf('Preview', module);
 
-storiesOf('Welcome', module).add('to Storybook', () => (
-  <Welcome showApp={linkTo('Button')} />
+stories.add('with one file', () => (
+  <Preview
+    files={{
+      '/index.js': {
+        code: `document.body.innerHTML = \`<div>$\{require('uuid')()}</div>\``,
+      },
+    }}
+    dependencies={{
+      uuid: 'latest',
+    }}
+  />
 ));
 
-storiesOf('Button', module)
-  .add('with text', () => (
-    <Button onClick={action('clicked')}>Hello Button</Button>
-  ))
-  .add('with some emoji', () => (
-    <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
-  ));
+stories.add('with multiple files', () => (
+  <Preview
+    files={{
+      '/index.js': {
+        code: `
+            import Hello from './Hello.js';
 
-storiesOf('Playground', module).add('with text', () => <Playground />);
+            document.body.innerHTML = JSON.stringify(Hello);
+          `,
+      },
+      '/Hello.js': {
+        code: `export default "Hello from another file!"`,
+      },
+    }}
+    dependencies={{
+      uuid: 'latest',
+    }}
+  />
+));