commit 54293a16d88769815c799f2b5223c75bbda7b8d7 parent 2e28dfc97175aacd5e0db7408ce21ec6992393f9 Author: Konstantin Tarkus <koistya@gmail.com> Date: Thu, 21 Jan 2016 22:55:28 +0300 Merge pull request #343 from koistya/babel-update Upgrade Babel to v6.x Diffstat:
23 files changed, 88 insertions(+), 119 deletions(-)
diff --git a/.babelrc b/.babelrc @@ -1,3 +1,10 @@ { - "stage": 0 -} -\ No newline at end of file + "presets": [ + "es2015", + "stage-0", + "react" + ], + "plugins": [ + "transform-runtime" + ] +} diff --git a/docs/data-fetching.md b/docs/data-fetching.md @@ -10,7 +10,7 @@ export const path = '/products'; export const action = async () => { const response = await fetch('/api/products'); const data = await response.json(); - return <Layout><Products {...data}</Layout>; + return <Layout><Products {...data} /></Layout>; }; ``` diff --git a/docs/react-style-guide.md b/docs/react-style-guide.md @@ -120,8 +120,8 @@ Navigation.propTypes = { items: PropTypes.array.isRequired }; ```jsx // Navigation.js import React, { PropTypes } from 'react'; +import withStyles from 'isomorphic-style-loader/lib/withStyles'; import s from './Navigation.scss'; -import withStyles from '../../decorators/withStyles'; function Navigation() { return ( @@ -140,7 +140,7 @@ function Navigation() { Navigation.propTypes = { className: PropTypes.string }; -export default withStyles(s)(Navigation); +export default withStyles(Navigation, s); ``` ### Use higher-order components @@ -195,7 +195,6 @@ export default withViewport; import React from 'react'; import withViewport from './withViewport'; -@withViewport class MyComponent { render() { let { width, height } = this.props.viewport; @@ -203,7 +202,7 @@ class MyComponent { } } -export default MyComponent; +export default withViewport(MyComponent); ``` **[⬆ back to top](#table-of-contents)** diff --git a/package.json b/package.json @@ -5,61 +5,66 @@ "npm": ">=3.3 <4" }, "dependencies": { - "babel-core": "5.8.34", + "babel-polyfill": "^6.3.14", + "babel-runtime": "^6.3.19", "bluebird": "3.1.1", - "classnames": "2.2.1", + "classnames": "2.2.3", "eventemitter3": "1.1.1", "express": "4.13.3", "fastclick": "1.0.6", - "fbjs": "0.5.1", - "front-matter": "2.0.1", - "history": "1.16.0", + "fbjs": "0.6.1", + "front-matter": "2.0.5", + "history": "2.0.0-rc2", + "isomorphic-style-loader": "0.0.6", "jade": "1.11.0", "node-fetch": "1.3.3", "normalize.css": "3.0.3", - "react": "0.14.3", - "react-dom": "0.14.3", - "react-routing": "0.0.6", + "react": "0.14.6", + "react-dom": "0.14.6", + "react-routing": "0.0.7", "source-map-support": "0.4.0", - "whatwg-fetch": "0.10.1" + "whatwg-fetch": "0.11.0" }, "devDependencies": { "assets-webpack-plugin": "^3.2.0", - "autoprefixer": "^6.1.2", - "babel": "^5.8.34", - "babel-eslint": "^4.1.6", - "babel-loader": "^5.4.0", - "babel-plugin-react-transform": "^1.1.1", - "browser-sync": "^2.10.1", - "css-loader": "^0.23.0", + "autoprefixer": "^6.3.1", + "babel-cli": "^6.4.5", + "babel-eslint": "^5.0.0-beta6", + "babel-loader": "^6.2.1", + "babel-plugin-react-transform": "^2.0.0", + "babel-plugin-transform-runtime": "^6.4.3", + "babel-preset-es2015": "^6.3.13", + "babel-preset-react": "^6.3.13", + "babel-preset-stage-0": "^6.3.13", + "browser-sync": "^2.11.1", + "css-loader": "^0.23.1", "csscomb": "^3.1.8", "del": "^2.2.0", "eslint": "^1.10.3", - "eslint-config-airbnb": "^2.1.1", - "eslint-loader": "^1.1.1", - "eslint-plugin-react": "^3.11.3", + "eslint-config-airbnb": "^3.1.0", + "eslint-loader": "^1.2.0", + "eslint-plugin-react": "^3.15.0", + "extend": "^3.0.0", "file-loader": "^0.8.5", "gaze": "^0.5.2", "git-repository": "^0.1.1", - "glob": "^6.0.1", - "isomorphic-style-loader": "0.0.5", + "glob": "^6.0.4", "jest-cli": "^0.8.2", - "jscs": "^2.7.0", + "jscs": "^2.8.0", "json-loader": "^0.5.4", - "lodash.merge": "^3.3.2", "mkdirp": "^0.5.1", "ncp": "^2.0.0", - "postcss": "^5.0.13", + "postcss": "^5.0.14", "postcss-import": "^7.1.3", "postcss-loader": "^0.8.0", - "precss": "^1.3.0", + "precss": "^1.4.0", "raw-loader": "^0.5.1", - "react-transform-catch-errors": "^1.0.0", + "react-transform-catch-errors": "^1.0.1", "react-transform-hmr": "^1.0.1", "redbox-react": "^1.2.0", "replace": "^0.3.0", "url-loader": "^0.5.7", - "webpack": "^1.12.9", + "webpack": "^1.12.11", "webpack-hot-middleware": "^2.6.0", "webpack-middleware": "^1.4.0" }, diff --git a/src/client.js b/src/client.js @@ -7,7 +7,7 @@ * LICENSE.txt file in the root directory of this source tree. */ -import 'babel-core/polyfill'; +import 'babel-polyfill'; import ReactDOM from 'react-dom'; import FastClick from 'fastclick'; import Router from './routes'; diff --git a/src/components/ContactPage/ContactPage.js b/src/components/ContactPage/ContactPage.js @@ -8,12 +8,11 @@ */ import React, { Component, PropTypes } from 'react'; +import withStyles from 'isomorphic-style-loader/lib/withStyles'; import s from './ContactPage.scss'; -import withStyles from '../../decorators/withStyles'; const title = 'Contact Us'; -@withStyles(s) class ContactPage extends Component { static contextTypes = { @@ -37,4 +36,4 @@ class ContactPage extends Component { } -export default ContactPage; +export default withStyles(ContactPage, s); diff --git a/src/components/ContentPage/ContentPage.js b/src/components/ContentPage/ContentPage.js @@ -8,10 +8,9 @@ */ import React, { Component, PropTypes } from 'react'; +import withStyles from 'isomorphic-style-loader/lib/withStyles'; import s from './ContentPage.scss'; -import withStyles from '../../decorators/withStyles'; -@withStyles(s) class ContentPage extends Component { static propTypes = { @@ -38,4 +37,4 @@ class ContentPage extends Component { } -export default ContentPage; +export default withStyles(ContentPage, s); diff --git a/src/components/ErrorPage/ErrorPage.js b/src/components/ErrorPage/ErrorPage.js @@ -8,12 +8,11 @@ */ import React, { Component, PropTypes } from 'react'; +import withStyles from 'isomorphic-style-loader/lib/withStyles'; import s from './ErrorPage.scss'; -import withStyles from '../../decorators/withStyles'; const title = 'Error'; -@withStyles(s) class ErrorPage extends Component { static contextTypes = { @@ -36,4 +35,4 @@ class ErrorPage extends Component { } -export default ErrorPage; +export default withStyles(ErrorPage, s); diff --git a/src/components/Feedback/Feedback.js b/src/components/Feedback/Feedback.js @@ -8,10 +8,9 @@ */ import React, { Component } from 'react'; +import withStyles from 'isomorphic-style-loader/lib/withStyles'; import s from './Feedback.scss'; -import withStyles from '../../decorators/withStyles'; -@withStyles(s) class Feedback extends Component { render() { @@ -28,4 +27,4 @@ class Feedback extends Component { } -export default Feedback; +export default withStyles(Feedback, s); diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js @@ -8,11 +8,10 @@ */ import React, { Component } from 'react'; +import withStyles from 'isomorphic-style-loader/lib/withStyles'; import s from './Footer.scss'; -import withStyles from '../../decorators/withStyles'; import Link from '../Link'; -@withStyles(s) class Footer extends Component { render() { @@ -33,4 +32,4 @@ class Footer extends Component { } -export default Footer; +export default withStyles(Footer, s); diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js @@ -8,12 +8,11 @@ */ import React, { Component } from 'react'; +import withStyles from 'isomorphic-style-loader/lib/withStyles'; import s from './Header.scss'; -import withStyles from '../../decorators/withStyles'; import Link from '../Link'; import Navigation from '../Navigation'; -@withStyles(s) class Header extends Component { render() { @@ -36,4 +35,4 @@ class Header extends Component { } -export default Header; +export default withStyles(Header, s); diff --git a/src/components/Link/Link.js b/src/components/Link/Link.js @@ -28,7 +28,7 @@ class Link extends Component { onClick: PropTypes.func, }; - static handleClick = (event) => { + handleClick = (event) => { let allowTransition = true; let clickResult; @@ -65,7 +65,7 @@ class Link extends Component { render() { const { to, query, ...props } = this.props; - return <a href={Location.createHref(to, query)} onClick={Link.handleClick.bind(this)} {...props} />; + return <a href={Location.createHref(to, query)} {...props} onClick={this.handleClick} />; } } diff --git a/src/components/LoginPage/LoginPage.js b/src/components/LoginPage/LoginPage.js @@ -8,12 +8,11 @@ */ import React, { Component, PropTypes } from 'react'; +import withStyles from 'isomorphic-style-loader/lib/withStyles'; import s from './LoginPage.scss'; -import withStyles from '../../decorators/withStyles'; const title = 'Log In'; -@withStyles(s) class LoginPage extends Component { static contextTypes = { @@ -37,4 +36,4 @@ class LoginPage extends Component { } -export default LoginPage; +export default withStyles(LoginPage, s); diff --git a/src/components/Navigation/Navigation.js b/src/components/Navigation/Navigation.js @@ -9,11 +9,10 @@ import React, { Component, PropTypes } from 'react'; import cx from 'classnames'; +import withStyles from 'isomorphic-style-loader/lib/withStyles'; import s from './Navigation.scss'; -import withStyles from '../../decorators/withStyles'; import Link from '../Link'; -@withStyles(s) class Navigation extends Component { static propTypes = { @@ -35,4 +34,4 @@ class Navigation extends Component { } -export default Navigation; +export default withStyles(Navigation, s); diff --git a/src/components/NotFoundPage/NotFoundPage.js b/src/components/NotFoundPage/NotFoundPage.js @@ -8,12 +8,11 @@ */ import React, { Component, PropTypes } from 'react'; +import withStyles from 'isomorphic-style-loader/lib/withStyles'; import s from './NotFoundPage.scss'; -import withStyles from '../../decorators/withStyles'; const title = 'Page Not Found'; -@withStyles(s) class NotFoundPage extends Component { static contextTypes = { @@ -37,4 +36,4 @@ class NotFoundPage extends Component { } -export default NotFoundPage; +export default withStyles(NotFoundPage, s); diff --git a/src/components/RegisterPage/RegisterPage.js b/src/components/RegisterPage/RegisterPage.js @@ -8,12 +8,11 @@ */ import React, { Component, PropTypes } from 'react'; +import withStyles from 'isomorphic-style-loader/lib/withStyles'; import s from './RegisterPage.scss'; -import withStyles from '../../decorators/withStyles'; const title = 'New User Registration'; -@withStyles(s) class RegisterPage extends Component { static contextTypes = { @@ -37,4 +36,4 @@ class RegisterPage extends Component { } -export default RegisterPage; +export default withStyles(RegisterPage, s); diff --git a/src/components/TextBox/TextBox.js b/src/components/TextBox/TextBox.js @@ -8,8 +8,8 @@ */ import React, { Component, PropTypes } from 'react'; +import withStyles from 'isomorphic-style-loader/lib/withStyles'; import s from './TextBox.scss'; -import withStyles from '../../decorators/withStyles'; @withStyles(s) class TextBox extends Component { diff --git a/src/decorators/withViewport.js b/src/components/withViewport.js diff --git a/src/decorators/withStyles.js b/src/decorators/withStyles.js @@ -1,32 +0,0 @@ -/** - * React Starter Kit (https://www.reactstarterkit.com/) - * - * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved. - * - * This source code is licensed under the MIT license found in the - * LICENSE.txt file in the root directory of this source tree. - */ - -import React, { Component, PropTypes } from 'react'; - -function withStyles(...styles) { - return (BaseComponent) => class StyledComponent extends Component { - static contextTypes = { - insertCss: PropTypes.func.isRequired, - }; - - componentWillMount() { - this.removeCss = this.context.insertCss.apply(undefined, styles); - } - - componentWillUnmount() { - this.removeCss(); - } - - render() { - return <BaseComponent {...this.props} />; - } - }; -} - -export default withStyles; diff --git a/src/server.js b/src/server.js @@ -7,7 +7,7 @@ * LICENSE.txt file in the root directory of this source tree. */ -import 'babel-core/polyfill'; +import 'babel-polyfill'; import path from 'path'; import express from 'express'; import React from 'react'; @@ -27,7 +27,7 @@ server.use(express.static(path.join(__dirname, 'public'))); // // Register API middleware // ----------------------------------------------------------------------------- -server.use('/api/content', require('./api/content')); +server.use('/api/content', require('./api/content').default); // // Register server-side rendering middleware diff --git a/tools/run.js b/tools/run.js @@ -11,19 +11,21 @@ function format(time) { return time.toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, '$1'); } -async function run(fn, options) { +function run(fn, options) { + const task = typeof fn.default === 'undefined' ? fn : fn.default; const start = new Date(); - console.log(`[${format(start)}] Starting '${fn.name}'...`); - await fn(options); - const end = new Date(); - const time = end.getTime() - start.getTime(); - console.log(`[${format(end)}] Finished '${fn.name}' after ${time} ms`); + console.log(`[${format(start)}] Starting '${task.name}'...`); + return task(options).then(() => { + const end = new Date(); + const time = end.getTime() - start.getTime(); + console.log(`[${format(end)}] Finished '${task.name}' after ${time} ms`); + }); } if (process.mainModule.children.length === 0 && process.argv.length > 2) { delete require.cache[__filename]; - const module = process.argv[2]; - run(require('./' + module + '.js')).catch(err => console.error(err.stack)); + const module = require('./' + process.argv[2] + '.js').default; + run(module).catch(err => console.error(err.stack)); } export default run; diff --git a/tools/start.js b/tools/start.js @@ -41,9 +41,8 @@ async function start() { .forEach(x => x.query = { // Wraps all React components into arbitrary transforms // https://github.com/gaearon/babel-plugin-react-transform - plugins: ['react-transform'], - extra: { - 'react-transform': { + plugins: [ + ['react-transform', { transforms: [ { transform: 'react-transform-hmr', @@ -54,8 +53,8 @@ async function start() { imports: ['react', 'redbox-react'], }, ], - }, - }, + }], + ], }); }); diff --git a/tools/webpack.config.js b/tools/webpack.config.js @@ -9,7 +9,7 @@ import path from 'path'; import webpack from 'webpack'; -import merge from 'lodash.merge'; +import extend from 'extend'; import AssetsPlugin from 'assets-webpack-plugin'; const DEBUG = !process.argv.includes('--release'); @@ -109,7 +109,7 @@ const config = { // Configuration for the client-side bundle (client.js) // ----------------------------------------------------------------------------- -const clientConfig = merge({}, config, { +const clientConfig = extend(true, {}, config, { entry: './src/client.js', output: { path: path.join(__dirname, '../build/public'), @@ -146,7 +146,7 @@ const clientConfig = merge({}, config, { // Configuration for the server-side bundle (server.js) // ----------------------------------------------------------------------------- -const serverConfig = merge({}, config, { +const serverConfig = extend(true, {}, config, { entry: './src/server.js', output: { path: './build',