Merge pull request #3 from ndelangen/ndelangen/dev

FIX babel-core including react-display-name & UPGRADE babel & other packages

Author: robhrt7

.babelrc

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

example/lib/components/Button/Button.js

@@ -13,16 +13,16 @@ export default class Button extends Component {
 		children: PropTypes.string.isRequired,
 		color: PropTypes.string,
 		size: PropTypes.oneOf(['small', 'normal', 'large']),
-	}
+	};
 	static defaultProps = {
 		color: '#333',
 		size: 'normal'
-	}
+	};
 	static sizes = {
 		small: '10px',
 		normal: '14px',
 		large: '18px'
-	}
+	};
 
 	render() {
 		let styles = {

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;

loaders/examples.loader.js

@@ -3,7 +3,8 @@ var marked = require('marked');
 
 var evalPlaceholder = '<%{#eval#}%>';
 
-var requireAnythingRegex = /require\s*\(([^)]+)\)/g;
+var requireAnythingTest = 'require\\s*\\(([^)]+)\\)';
+var requireAnythingRegex = new RegExp(requireAnythingTest, 'g');
 var simpleStringRegex = /^"([^"]+)"$|^'([^']+)'$/;
 
 function readExamples(markdown) {
@@ -74,6 +75,7 @@ function examplesLoader(source, map) {
 }
 
 _.assign(examplesLoader, {
+	requireAnythingTest: requireAnythingTest,
 	requireAnythingRegex: requireAnythingRegex,
 	simpleStringRegex: simpleStringRegex,
 	readExamples: readExamples,

package.json

@@ -25,52 +25,60 @@
     "node": ">=0.12.0"
   },
   "dependencies": {
-    "babel-core": "5.8.30",
-    "babel-loader": "5.3.2",
-    "babel-plugin-react-display-name": "2.0.0",
-    "babel-plugin-react-transform": "1.1.1",
-    "chalk": "1.1.1",
+    "babel-core": "~6.9.0",
+    "babel-loader": "6.2.4",
+    "babel-preset-react-hmre": "^1.1.1",
+    "babel-plugin-react-transform": "2.0.2",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-0": "^6.5.0",
+    "chalk": "1.1.3",
     "codemirror": "5.8.0",
-    "css-loader": "0.21.0",
+    "cross-env": "^1.0.7",
+    "css-loader": "0.23.1",
     "express": "4.13.3",
-    "extract-text-webpack-plugin": "0.8.2",
+    "extract-text-webpack-plugin": "1.0.1",
     "findup": "0.1.5",
-    "glob": "5.0.15",
-    "lodash": "3.10.1",
+    "glob": "7.0.3",
+    "lodash": "4.12.0",
     "marked": "0.3.5",
     "minimist": "1.2.0",
     "postcss-advanced-variables": "1.2.2",
-    "postcss-loader": "0.7.0",
+    "postcss-loader": "0.9.1",
     "prettyjson": "1.1.3",
-    "react-codemirror": "0.1.7",
-    "react-transform-catch-errors": "1.0.0",
-    "react-transform-hmr": "1.0.1",
+    "react": "^0.14.8",
+    "react-codemirror": "0.2.6",
+    "react-dom": "^0.14.8",
+    "react-transform-catch-errors": "1.0.2",
+    "react-transform-hmr": "1.0.4",
     "redbox-react": "1.1.1",
     "sanitize.css": "3.0.0",
     "style-loader": "0.13.0",
-    "webpack": "1.12.2",
-    "webpack-dev-middleware": "1.2.0",
-    "webpack-hot-middleware": "2.4.1",
-    "webpack-merge": "0.2.0"
+    "webpack": "1.13.1",
+    "webpack-dev-middleware": "1.6.1",
+    "webpack-hot-middleware": "2.10.0",
+    "webpack-merge": "0.12.0"
   },
   "peerDependencies": {
     "react": ">=0.14.0",
     "react-dom": "~0.14.2"
   },
   "devDependencies": {
-    "babel-core": "~5.8.30",
-    "babel-eslint": "4.1.3",
-    "chai": "~3.4.1",
+    "babel-core": "~6.9.0",
+    "babel-eslint": "6.0.4",
+    "babel-preset-react-hmre": "^1.1.1",
+    "babel-standalone": "^6.7.7",
+    "chai": "~3.5.0",
     "css-modules-require-hook": "~2.0.2",
-    "eslint": "1.7.3",
-    "eslint-plugin-react": "3.6.3",
+    "eslint": "2.10.2",
+    "eslint-plugin-react": "5.1.1",
     "expect-react-shallow": "~1.0.0",
-    "gulp": "3.9.0",
+    "gulp": "3.9.1",
     "gulp-gh-pages": "0.5.4",
-    "mocha": "~2.3.3",
+    "mocha": "~2.4.5",
     "postcss-modules-extract-imports": "~1.0.0",
     "postcss-modules-scope": "~1.0.0",
-    "react": "~0.14.2"
+    "react": "^0.14.8"
   },
   "scripts": {
     "test": "npm run lint && npm run mocha && npm run build",

src/components/Editor/Editor.js

@@ -4,7 +4,6 @@ import 'codemirror/lib/codemirror.css';
 
 import _ from 'lodash';
 import { Component, PropTypes } from 'react';
-import debounce from 'lodash/function/debounce';
 import Codemirror from 'react-codemirror';
 
 import s from './Editor.css';
@@ -30,7 +29,7 @@ export default class Editor extends Component {
 
 	constructor() {
 		super();
-		this._handleChange = debounce(this.handleChange.bind(this), UPDATE_DELAY);
+		this._handleChange = _.debounce(this.handleChange.bind(this), UPDATE_DELAY);
 	}
 
 	componentWillMount() {

src/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 'components/Wrapper';
 
 import s from './Preview.css';
@@ -31,7 +31,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/make-webpack-config.js

@@ -15,13 +15,6 @@ module.exports = function(env) {
 		codeMirrorPath = path.join(__dirname, '../node_modules/codemirror');  // npm 2 or react-styleguidist develop
 	}
 
-	var reactTransformPath = path.join(__dirname, '../../babel-plugin-react-transform');  // npm 3
-	var reactDisplayNamePath = path.join(__dirname, '../../babel-plugin-react-display-name');  // npm 3
-	if (!fs.existsSync(reactTransformPath)) {
-		reactTransformPath = path.resolve(__dirname, '../node_modules/babel-plugin-react-transform');  // npm 2 or react-styleguidist develop
-		reactDisplayNamePath = path.resolve(__dirname, '../node_modules/babel-plugin-react-display-name');  // npm 2 or react-styleguidist develop
-	}
-
 	var includes = [
 		__dirname,
 		config.rootDir
@@ -61,7 +54,7 @@ module.exports = function(env) {
 			loaders: [
 			],
 			noParse: [
-				/babel-core\/browser.js/
+				/babel-standalone/
 			]
 		},
 		postcss: function() {
@@ -101,10 +94,7 @@ module.exports = function(env) {
 					{
 						test: /\.jsx?$/,
 						include: includes,
-						loader: 'babel',
-						query: {
-							stage: 0
-						}
+						loader: 'babel'
 					},
 					{
 						test: /\.css$/,
@@ -143,29 +133,7 @@ module.exports = function(env) {
 					{
 						test: /\.jsx?$/,
 						include: includes,
-						loader: 'babel',
-						query: {
-							stage: 0,
-							plugins: [
-								reactDisplayNamePath,
-								reactTransformPath
-							],
-							extra: {
-								'react-transform': {
-									transforms: [
-										{
-											transform: 'react-transform-hmr',
-											imports: ['react'],
-											locals: ['module']
-										},
-										{
-											transform: 'react-transform-catch-errors',
-											imports: ['react', 'redbox-react']
-										}
-									]
-								}
-							}
-						}
+						loader: 'babel'
 					},
 					{
 						test: /\.css$/,

src/utils/config.js

@@ -56,7 +56,8 @@ function readConfig() {
 		customConfig = require(configFilepath);
 		options = _.merge({}, options, customConfig);
 		options.rootDir = path.resolve(path.dirname(configFilepath), options.rootDir);
-	} else {
+	}
+	else {
 		options.rootDir = path.join(pathToSourceJSUser, options.rootDir);
 
 		options._styleguideDir = config.styleguideDir;

src/utils/utils.js

@@ -2,8 +2,9 @@ export function setComponentsNames(components) {
 	Object.keys(components).forEach(key => {
 		var component = components[key];
 
-		let module = component.module;
-		component.name = module.displayName || module.name;
+		let {module} = component;
+		component.name = module.displayName || module.name || module.default.name;
+
 		if (!component.name) {
 			throw Error(`Cannot detect component name for ${component.filepath}`);
 		}
@@ -16,6 +17,6 @@ export function globalizeComponents(components) {
 	Object.keys(components).forEach(key => {
 		var component = components[key];
 
-		global[component.name] = component.module;
+		global[component.name] = component.module.default || component.module;
 	});
 }

test/examples.loader.spec.js

@@ -12,7 +12,7 @@ describe('examples loader', () => {
 		beforeEach(() => {
 			expect(examplesLoader.requireAnythingRegex).to.be.an.instanceof(RegExp);
 			// we make a version without the /g flag
-			regex = new RegExp(examplesLoader.requireAnythingRegex, '');
+			regex = new RegExp(examplesLoader.requireAnythingTest);
 		});
 
 		it('should match require invocations', () => {
@@ -32,6 +32,8 @@ describe('examples loader', () => {
 		});
 
 		it('should match many requires in the same line correctly', () => {
+			// Revert to the /g flagged version used by examplesLoader
+			regex = new RegExp(examplesLoader.requireAnythingRegex);
 			var replaced = `require('foo');require('bar')`.replace(examplesLoader.requireAnythingRegex, 'x');
 			expect(replaced).to.equal('x;x');
 		});

test/utils.utils.spec.js

@@ -15,7 +15,7 @@ describe('utils', () => {
 					module: {name: 'Bar'}
 				}
 			]);
-			expect(_.pluck(result, 'name')).to.eql(['Foo', 'Bar']);
+			expect(_.map(result, 'name')).to.eql(['Foo', 'Bar']);
 		});
 	});