Use Babel instead of JSXTransformer to compile examples in the browser (

fix #16)

package.json

@@ -48,7 +48,6 @@
     "prettyjson": "1.1.3",
     "react-codemirror": "0.1.7",
     "react-docgen": "2.3.1",
-    "react-tools": "0.13.3",
     "react-transform-catch-errors": "1.0.0",
     "react-transform-hmr": "1.0.1",
     "redbox-react": "1.1.1",

src/components/Preview/Preview.css

@@ -1,6 +1,8 @@
 .playgroundError {
 	margin: -1rem -1rem -1.2rem;
 	padding: 1rem;
+	line-height: 1.2;
+	font-size: .9rem;
 	color: #fff;
 	background: #c00;
 }

src/components/Preview/Preview.js

@@ -2,7 +2,7 @@
 
 import React, { Component, PropTypes } from 'react';
 import ReactDOM from 'react-dom';
-import reactTools from 'react-tools';
+import babel from 'babel-core/browser';
 import Wrapper from 'components/Wrapper';
 
 import s from './Preview.css';
@@ -29,29 +29,26 @@ export default class Preview extends Component {
 		}
 	}
 
-	compileCode() {
-		// TODO: Babel
-		return reactTools.transform(this.props.code, {
-			harmony: true
-		});
+	compileCode(code) {
+		return babel.transform(code, {stage: 0}).code;
 	}
 
 	executeCode() {
 		let mountNode = this.refs.mount;
 
-		try {
-			ReactDOM.unmountComponentAtNode(mountNode);
-		}
-		finally {
-			/* */
-		}
+		ReactDOM.unmountComponentAtNode(mountNode);
 
 		this.setState({
 			error: null
 		});
 
+		let { code } = this.props;
+		if (!code) {
+			return;
+		}
+
 		try {
-			let compiledCode = this.compileCode();
+			let compiledCode = this.compileCode(code);
 			let component = eval(compiledCode);  /* eslint no-eval:0 */
 			let wrappedComponent = (
 				<Wrapper>
@@ -72,7 +69,7 @@ export default class Preview extends Component {
 		let { error } = this.state;
 		if (error) {
 			return (
-				<div className={s.playgroundError}>{error}</div>
+				<pre className={s.playgroundError}>{error}</pre>
 			);
 		}
 		else {

src/make-webpack-config.js

@@ -64,6 +64,9 @@ module.exports = function(env) {
 		],
 		module: {
 			loaders: [
+			],
+			noParse: [
+				/babel-core\/browser.js/
 			]
 		},
 		postcss: function() {