Feature/babel6 simple

.babelrc

@@ -1,3 +1,10 @@
 {
-	"stage": 0
+	"env": {
+		"development": {
+			"presets": [
+				"react-hmre"
+			]
+		}
+	},
+	"presets": ["es2015", "react", "stage-0"]
 }

.nvmrc

@@ -0,0 +1 @@
+v5

example/lib/components/Modal/Modal.js

@@ -8,7 +8,7 @@ export default class Modal extends Component {
 	static propTypes = {
 		isOpen: PropTypes.bool,
 		children: PropTypes.node.isRequired
-	}
+	};
 
 	render() {
 		let { isOpen, children } = this.props;

example/lib/components/Placeholder/Placeholder.js

@@ -10,13 +10,13 @@ export default class Placeholder extends Component {
 		type: PropTypes.oneOf(['animal', 'bacon', 'beard', 'bear', 'cat', 'food', 'city', 'nature', 'people']),
 		width: PropTypes.number,
 		height: PropTypes.number
-	}
+	};
 
 	static defaultProps = {
 		type: 'animal',
 		width: 150,
 		height: 150
-	}
+	};
 
 	getImageUrl() {
 		let { type, width, height } = this.props;

example/lib/components/RandomButton/RandomButton.js

@@ -1,5 +1,5 @@
 import { Component, PropTypes } from 'react';
-import sample from 'lodash/collection/sample';
+const sample = require('lodash/sample');
 
 import s from './RandomButton.css';
 
@@ -12,7 +12,7 @@ export default class RandomButton extends Component {
 		 * List of possible labels.
 		 */
 		variants: PropTypes.array.isRequired
-	}
+	};
 
 	constructor(props) {
 		super();

loaders/examples.loader.js

@@ -6,7 +6,12 @@ var md = createRenderer();
 var evalPlaceholder = '<%{#eval#}%>';
 var codePlaceholder = '<%{#code#}%>';
 
-var requireAnythingRegex = /require\s*\(([^)]+)\)/g;
+// Need to supply the regex test as a string for reuse in unit tests
+// Currently, trying to change flags throws a TypeError
+// Slated for change in ES6, but not possible now:
+// https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/RegExp#Description
+var requireAnythingTest = 'require\\s*\\(([^)]+)\\)';
+var requireAnythingRegex = new RegExp(requireAnythingTest, 'g');
 var simpleStringRegex = /^"([^"]+)"$|^'([^']+)'$/;
 
 function readExamples(markdown) {
@@ -88,6 +93,7 @@ function examplesLoader(source, map) {
 }
 
 _.assign(examplesLoader, {
+	requireAnythingTest: requireAnythingTest,
 	requireAnythingRegex: requireAnythingRegex,
 	simpleStringRegex: simpleStringRegex,
 	readExamples: readExamples,

package.json

@@ -28,67 +28,73 @@
     "node": ">=0.12.0"
   },
   "dependencies": {
-    "babel-core": "5.8.30",
-    "babel-loader": "5.3.2",
-    "babel-plugin-react-transform": "1.1.1",
-    "babel-runtime": "5.8.25",
+    "babel-core": "6.4.5",
+    "babel-loader": "6.2.2",
+    "babel-plugin-react-transform": "2.0.0",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "babel-preset-stage-0": "^6.3.13",
+    "babel-runtime": "6.3.19",
     "chalk": "1.1.1",
-    "classnames": "~2.2.2",
-    "codemirror": "5.10.0",
+    "classnames": "~2.2.3",
+    "codemirror": "5.11.0",
+    "cross-env": "^1.0.7",
     "css-loader": "0.23.1",
-    "express": "4.13.3",
+    "express": "4.13.4",
     "findup": "0.1.5",
-    "glob": "6.0.3",
-    "html-webpack-plugin": "1.7.0",
+    "glob": "6.0.4",
+    "html-webpack-plugin": "2.8.1",
     "json-loader": "0.5.4",
-    "lodash": "3.10.1",
-    "markdown-it": "5.0.3",
+    "lodash": "4.2.1",
+    "markdown-it": "5.1.0",
     "markdown-react-js": "0.3.0",
     "minimist": "1.2.0",
-    "postcss-initial": "1.4.0",
+    "postcss-initial": "1.4.1",
     "postcss-loader": "0.8.0",
     "prettyjson": "1.1.3",
-    "react-codemirror": "0.2.3",
+    "react-codemirror": "0.2.5",
     "react-docgen": "2.7.0",
     "react-sticky": "~3.0.0",
-    "react-transform-catch-errors": "1.0.1",
-    "react-transform-hmr": "1.0.1",
-    "redbox-react": "1.2.0",
+    "react-transform-catch-errors": "1.0.2",
+    "react-transform-hmr": "1.0.2",
+    "redbox-react": "1.2.2",
     "style-loader": "0.13.0",
-    "webpack": "1.12.9",
-    "webpack-dev-middleware": "1.4.0",
-    "webpack-hot-middleware": "2.6.0",
-    "webpack-merge": "0.7.1"
+    "webpack": "1.12.13",
+    "webpack-dev-middleware": "1.5.1",
+    "webpack-hot-middleware": "2.6.4",
+    "webpack-merge": "0.7.3"
   },
   "peerDependencies": {
     "react": ">=0.14.0",
     "react-dom": ">=0.14.0"
   },
   "devDependencies": {
-    "babel-eslint": "4.1.3",
-    "chai": "~3.4.1",
+    "babel-eslint": "4.1.8",
+    "babel-preset-react-hmre": "^1.1.0",
+    "babel-standalone": "^6.4.4",
+    "chai": "~3.5.0",
     "css-modules-require-hook": "~2.1.0",
     "dog-names": "~1.0.2",
     "eslint": "1.10.3",
-    "eslint-plugin-react": "3.14.0",
-    "expect-react-shallow": "~1.0.0",
+    "eslint-plugin-react": "3.16.1",
+    "expect-react-shallow": "~1.1.0",
     "gulp": "3.9.0",
     "gulp-gh-pages": "0.5.4",
-    "mocha": "~2.3.4",
+    "mocha": "~2.4.5",
     "mock-require": "~1.2.1",
     "postcss-modules-extract-imports": "~1.0.0",
     "postcss-modules-scope": "~1.0.0",
-    "react": "~0.14.5",
-    "react-dom": "~0.14.5",
+    "react": "~0.14.7",
+    "react-dom": "~0.14.7",
     "react-modal": "~0.6.1"
   },
   "scripts": {
     "test": "npm run lint && npm run mocha && npm run build",
-    "mocha": "mocha test",
+    "mocha": "cross-env NODE_ENV=test mocha test",
     "mocha:watch": "mocha --watch --reporter min test",
     "start": "./bin/styleguidist server --config example/styleguide.config.js",
     "lint": "eslint src --ext .js",
-    "build": "./bin/styleguidist build --config example/styleguide.config.js",
+    "build": "cross-env NODE_ENV=production ./bin/styleguidist build --config example/styleguide.config.js",
     "publish": "npm run build && gulp gh-pages"
   },
   "keywords": [

src/make-webpack-config.js

@@ -15,7 +15,6 @@ module.exports = function(env) {
 	var cssLoader = 'css?modules&importLoaders=1&localIdentName=ReactStyleguidist-[name]__[local]!postcss';
 
 	var codeMirrorPath = getPackagePath('codemirror');
-	var reactTransformPath = getPackagePath('babel-plugin-react-transform');
 
 	var includes = [
 		__dirname,
@@ -74,7 +73,7 @@ module.exports = function(env) {
 				}
 			],
 			noParse: [
-				/babel-core\/browser.js/
+				/babel-standalone/
 			]
 		},
 		postcss: function() {
@@ -114,10 +113,7 @@ module.exports = function(env) {
 					{
 						test: /\.jsx?$/,
 						include: includes,
-						loader: 'babel',
-						query: {
-							stage: 0
-						}
+						loader: 'babel'
 					}
 				]
 			}
@@ -145,28 +141,7 @@ module.exports = function(env) {
 					{
 						test: /\.jsx?$/,
 						include: includes,
-						loader: 'babel',
-						query: {
-							stage: 0,
-							plugins: [
-								reactTransformPath
-							],
-							extra: {
-								'react-transform': {
-									transforms: [
-										{
-											transform: 'react-transform-hmr',
-											imports: ['react'],
-											locals: ['module']
-										},
-										{
-											transform: 'react-transform-catch-errors',
-											imports: ['react', 'redbox-react']
-										}
-									]
-								}
-							}
-						}
+						loader: 'babel'
 					}
 				]
 			}

src/rsg-components/Components/Components.js

@@ -5,7 +5,7 @@ export default class Components extends Component {
 	static propTypes = {
 		highlightTheme: PropTypes.string.isRequired,
 		components: PropTypes.array.isRequired
-	}
+	};
 
 	renderComponents() {
 		let { highlightTheme, components } = this.props;

src/rsg-components/Editor/Editor.js

@@ -4,7 +4,7 @@ import 'codemirror/lib/codemirror.css';
 
 import _ from 'lodash';
 import { Component, PropTypes } from 'react';
-import debounce from 'lodash/function/debounce';
+import debounce from 'lodash/debounce';
 import Codemirror from 'react-codemirror';
 
 import s from './Editor.css';
@@ -18,15 +18,16 @@ export default class Editor extends Component {
 		code: PropTypes.string.isRequired,
 		highlightTheme: PropTypes.string.isRequired,
 		onChange: PropTypes.func
-	}
+	};
+
 	static codemirrorOptions = {
 		mode: 'jsx',
 		lineNumbers: false,
 		lineWrapping: true,
 		smartIndent: false,
 		matchBrackets: true,
 		viewportMargin: Infinity
-	}
+	};
 
 	constructor() {
 		super();

src/rsg-components/Layout/Layout.js

@@ -9,7 +9,7 @@ export default class Layout extends Component {
 	static propTypes = {
 		config: PropTypes.object.isRequired,
 		components: PropTypes.array.isRequired
-	}
+	};
 
 	renderComponens() {
 		let { config, components } = this.props;

src/rsg-components/Markdown/Markdown.js

@@ -25,7 +25,7 @@ export default class Markdown extends Component {
 	static propTypes = {
 		text: PropTypes.string.isRequired,
 		className: PropTypes.string
-	}
+	};
 
 	render() {
 		let classes = cx(s.root, this.props.className);

src/rsg-components/Playground/Playground.js

@@ -9,7 +9,7 @@ export default class Playground extends Component {
 		highlightTheme: PropTypes.string.isRequired,
 		code: PropTypes.string.isRequired,
 		evalInContext: PropTypes.func.isRequired,
-	}
+	};
 
 	constructor(props) {
 		super();
@@ -22,7 +22,7 @@ export default class Playground extends Component {
 		this.setState({
 			code: newCode
 		});
-	}
+	};
 
 	componentWillReceiveProps(nextProps) {
 		let { code } = nextProps;

src/rsg-components/Preview/Preview.js

@@ -2,7 +2,7 @@
 
 import React, { Component, PropTypes } from 'react';
 import ReactDOM from 'react-dom';
-import babel from 'babel-core/browser';
+import {transform} from 'babel-standalone';
 import Wrapper from 'rsg-components/Wrapper';
 
 import s from './Preview.css';
@@ -11,7 +11,7 @@ export default class Preview extends Component {
 	static propTypes = {
 		code: PropTypes.string.isRequired,
 		evalInContext: PropTypes.func.isRequired
-	}
+	};
 
 	constructor() {
 		super();
@@ -37,7 +37,10 @@ export default class Preview extends Component {
 	}
 
 	compileCode(code) {
-		return babel.transform(code, {stage: 0}).code;
+		return transform(code, {
+			presets: ['es2015', 'react', 'stage-0'],
+			ignore: [/node_modules/]
+		}).code;
 	}
 
 	executeCode() {

src/rsg-components/Props/Props.js

@@ -1,5 +1,5 @@
 import { Component, PropTypes } from 'react';
-import trim from 'lodash/string/trim';
+import trim from 'lodash/trim';
 import Markdown from 'rsg-components/Markdown';
 
 import s from './Props.css';
@@ -16,7 +16,7 @@ export function unquote(string) {
 export default class Props extends Component {
 	static propTypes = {
 		props: PropTypes.object.isRequired
-	}
+	};
 
 	renderRows(props) {
 		let rows = [];

src/rsg-components/ReactComponent/ReactComponent.js

@@ -9,7 +9,7 @@ export default class ReactComponent extends Component {
 	static propTypes = {
 		highlightTheme: PropTypes.string.isRequired,
 		component: PropTypes.object.isRequired
-	}
+	};
 
 	renderDescription() {
 		let description = this.props.component.props.description;

src/rsg-components/Wrapper/Wrapper.js

@@ -3,7 +3,7 @@ import { Component, PropTypes } from 'react';
 export default class Wrapper extends Component {
 	static propTypes = {
 		children: PropTypes.node.isRequired
-	}
+	};
 
 	render() {
 		return this.props.children;

src/templates/index.html

@@ -2,7 +2,7 @@
 <html>
 	<head>
 		<meta charset="utf-8">
-		<title>{%=o.htmlWebpackPlugin.options.title%}</title>
+		<title><%=htmlWebpackPlugin.options.title%></title>
 	</head>
 	<body>
 		<div id="app"></div>