added palyground stuffs

Author: prasanna1211

docs/client/components/PlaygroundPage/PlaygroundWithPreview/Preview.js

@@ -1,14 +1,105 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import { transform } from 'babel-standalone';
 
 import styles from './styles.scss';
 
-const Preview = ({ code }) => (
-  <div className={styles.preview}>
-    <div className="header">
-      Preview
-    </div>
-    {code}
-  </div>
-);
+class Preview extends React.Component {
+  constructor(props) {
+    super(props);
 
-export default Preview;
+    this.state = {
+      error: null
+    }
+    this.setTimeout = this.setTimeout.bind(this);
+    this.compileCode = this.compileCode.bind(this);
+    this.buildScope = this.buildScope.bind(this);
+    this.executeCode = this.executeCode.bind(this);
+  }
+
+  componentDidMount() {
+    this.executeCode();
+  }
+
+  componentDidUpdate (prevProps) {
+    clearTimeout(this.timeoutID);
+    if (this.props.code !== prevProps.code) {
+      this.executeCode();
+    }
+  }
+
+  setTimeout () {
+    clearTimeout(this.timeoutID);
+    this.timeoutID = setTimeout(...arguments);
+  }
+
+  compileCode () {
+    const code = `
+      (function (${Object.keys(this.props.scope).join(', ')}, mountNode) {
+        ${this.props.code}
+      });`;
+
+    return transform(code, {
+      presets: ['es2015', 'stage-0', 'react']
+    }).code;
+  }
+
+  buildScope (mountNode) {
+    return Object.keys(this.props.scope).map(key => this.props.scope[key]).concat(mountNode);
+  }
+
+  executeCode () {
+    const mountNode = this.refs.mount;
+    const scope = this.buildScope(mountNode);
+
+    try {
+      ReactDOM.unmountComponentAtNode(mountNode);
+    } catch (e) {
+      console.log(e);
+    }
+    try {
+      
+      const x = eval(this.compileCode())(...scope);
+      ReactDOM.render(x, mountNode);
+      if (this.state.error) {
+        this.setState({ error: null });
+      }
+    } catch (err) {
+      console.log(err);
+      this.setTimeout(() => {
+        this.setState({ error: err.toString() });
+      }, 500);
+    }
+  }
+
+  render () {
+    return (
+      <div className={styles.preview}>
+        <div ref="mount" />
+      </div>
+    );
+  }
+
+  // render() {
+  //   return (
+  //     <div className={styles.preview}>
+  //       <div className="header">
+  //         Preview
+  //       </div>
+  //       {code}
+  //     </div>
+  //   );
+  // }
+}
+
+Preview.propTypes = {
+  code: PropTypes.string.isRequired,
+  scope: PropTypes.object,
+};
+
+Preview.defaultProps = {
+  scope: { React },
+};
+
+export default Preview;

docs/client/components/PlaygroundPage/PlaygroundWithPreview/index.js

@@ -4,11 +4,16 @@ import Playground from './Playground';
 import styles from './styles.scss';
 
 const defaultCode = `
-  const Example = (
-    <div>
-      Example Component
-    </div>
-  );
+  class Example extends React.Component {
+    render() {
+      return (
+        <div>
+          Example
+        </div>
+      )
+    }
+  }
+  return <Example />;
 `;
 
 class PlaygroundWithPreview extends React.Component {
@@ -33,7 +38,7 @@ class PlaygroundWithPreview extends React.Component {
             code={defaultCode}
           />
           <Preview
-            
+            code={defaultCode}
           />
         </div>
         {activeComponent}

docs/package.json

@@ -19,6 +19,7 @@
     "lodash": "^4.17.10",
     "node-sass": "^4.9.0",
     "postcss-loader": "^2.1.5",
+    "prop-types": "^15.6.2",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-flexbox-grid": "^2.1.2",