From e53288f495b659a0f6a8ff89baae0e2a8cade464 Mon Sep 17 00:00:00 2001 From: Oliver Turner Date: Sun, 7 Feb 2016 11:53:32 +0000 Subject: [PATCH 1/6] Waypoint before updating eslint config to presets --- .babelrc | 17 ++++++++ app/css/base.sass | 5 ++- conf/make-webpack-config.js | 15 +++---- conf/tmpl.html | 14 ++----- package.json | 82 ++++++++++++++++++++----------------- 5 files changed, 74 insertions(+), 59 deletions(-) create mode 100644 .babelrc diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..68c957f --- /dev/null +++ b/.babelrc @@ -0,0 +1,17 @@ +{ + "env": { + "development": { + "presets": [ + "react-hmre" + ] + }, + "production": { + "plugins": [ + "transform-react-remove-prop-types", + "transform-react-constant-elements", + "transform-react-inline-elements" + ] + } + }, + "presets": ["es2015", "react", "stage-0"] +} diff --git a/app/css/base.sass b/app/css/base.sass index c415e25..9e4846e 100644 --- a/app/css/base.sass +++ b/app/css/base.sass @@ -3,7 +3,7 @@ * box-sizing: border-box -html, body, #app +html, body height: 100% body @@ -11,3 +11,6 @@ body a color: #00D8FF + +.app + height: 100vh diff --git a/conf/make-webpack-config.js b/conf/make-webpack-config.js index c991f17..357e777 100644 --- a/conf/make-webpack-config.js +++ b/conf/make-webpack-config.js @@ -1,5 +1,6 @@ var fs = require('fs'); var webpack = require('webpack'); +var autoprefixer = require('autoprefixer'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var HtmlWebpackPlugin = require('html-webpack-plugin'); @@ -11,7 +12,7 @@ module.exports = function(options) { options.lint = fs.existsSync(__dirname + '/../.eslintrc') && options.lint !== false; var localIdentName = options.production ? '[hash:base64]' : '[path]-[local]-[hash:base64:5]'; - var cssLoaders = 'style!css?localIdentName=' + localIdentName + '!autoprefixer?browsers=last 2 versions'; + var cssLoaders = 'style!css?module&localIdentName=' + localIdentName + '!postcss?browsers=last 2 versions'; var scssLoaders = cssLoaders + '!sass'; var sassLoaders = scssLoaders + '?indentedSyntax=sass'; var lessLoaders = cssLoaders + '!less'; @@ -23,8 +24,6 @@ module.exports = function(options) { lessLoaders = extractForProduction(lessLoaders); } - var jsLoaders = ['babel']; - return { entry: options.production ? './app/index.jsx' : [ 'webpack-dev-server/client?http://localhost:8080', @@ -48,14 +47,9 @@ module.exports = function(options) { ] : [], loaders: [ { - test: /\.js$/, - exclude: /node_modules/, - loaders: jsLoaders, - }, - { - test: /\.jsx$/, + test: /\.jsx?$/, exclude: /node_modules/, - loaders: options.production ? jsLoaders : ['react-hot'].concat(jsLoaders), + loaders: ['babel'], }, { test: /\.css$/, @@ -117,5 +111,6 @@ module.exports = function(options) { template: './conf/tmpl.html', }), ], + postcss: [autoprefixer] }; }; diff --git a/conf/tmpl.html b/conf/tmpl.html index 5b0de82..afd83a9 100644 --- a/conf/tmpl.html +++ b/conf/tmpl.html @@ -1,17 +1,11 @@ - + - + + Yet Another React Starter Kit - {% if (o.htmlWebpackPlugin.options.production) { %} - - {% } %} -
- - {% for (var chunk in o.htmlWebpackPlugin.files.chunks) { %} - - {% } %} +
diff --git a/package.json b/package.json index f929653..26433b1 100644 --- a/package.json +++ b/package.json @@ -4,53 +4,59 @@ "description": "My React starter kit. Webpack, Babel, Sass, React 0.14 and more.", "main": "app/index.js", "scripts": { - "test": "./node_modules/karma/bin/karma start conf/karma.conf.js --single-run", - "test:watch": "./node_modules/karma/bin/karma start conf/karma.conf.js", - "test:coverage": "./node_modules/karma/bin/karma start conf/karma.coverage.conf.js --single-run", - "test:ci": "./node_modules/karma/bin/karma start conf/karma.ci.conf.js --single-run", - "start": "./node_modules/.bin/webpack-dev-server --config conf/webpack.config.js --hot --progress --colors --content-base ./build", - "build": "./node_modules/.bin/webpack --config conf/webpack.production.js", + "karma": "cross-env NODE_ENV=test karma start", + "test": "npm run karma conf/karma.conf.js -- --single-run", + "test:watch": "npm run karma conf/karma.conf.js", + "test:coverage": "npm run karma conf/karma.coverage.conf.js -- --single-run", + "test:ci": "npm run karma conf/karma.ci.conf.js -- --single-run", + "start": "webpack-dev-server --config conf/webpack.config.js --hot --progress --colors --content-base ./build", + "build": "cross-env NODE_ENV=production webpack --config conf/webpack.production.js", "build:gh": "npm run build && node ./build-gh-pages.js && rm -r ./dist" }, "author": "Brad Daily ", "license": "MIT", "dependencies": { - "react": "^0.14.0", - "react-dom": "^0.14.0" + "babel-preset-es2015": "^6.3.13", + "babel-preset-react": "^6.3.13", + "babel-preset-stage-0": "^6.3.13", + "cross-env": "^1.0.7", + "react": "^0.14.7", + "react-dom": "^0.14.7" }, "devDependencies": { - "autoprefixer-loader": "^2.0.0", - "babel-core": "^5.0.0", - "babel-eslint": "^4.0.0", - "babel-loader": "^5.0.0", - "chai": "^3.4.1", - "css-loader": "^0.14.0", - "eslint": "^0.17.1", - "eslint-loader": "^0.7.0", - "extract-text-webpack-plugin": "^0.8.2", - "file-loader": "^0.8.1", - "gh-pages": "^0.2.0", - "html-webpack-plugin": "^1.1.0", - "isparta": "^3.0.0", - "isparta-instrumenter-loader": "^0.2.1", - "karma": "^0.12.31", + "babel-core": "^6.4.5", + "babel-eslint": "^4.1.8", + "babel-loader": "^6.2.2", + "babel-preset-react-hmre": "^1.1.0", + "chai": "^3.5.0", + "css-loader": "^0.23.1", + "eslint": "^2.0.0-rc.0", + "eslint-loader": "^1.2.1", + "extract-text-webpack-plugin": "^1.0.1", + "file-loader": "^0.8.5", + "gh-pages": "^0.9.0", + "html-webpack-plugin": "^2.8.1", + "isparta": "^4.0.0", + "isparta-instrumenter-loader": "^1.0.0", + "karma": "^0.13.19", "karma-chai": "^0.1.0", - "karma-coverage": "^0.2.7", - "karma-mocha": "^0.1.10", - "karma-mocha-reporter": "^1.0.2", + "karma-coverage": "^0.5.3", + "karma-mocha": "^0.2.1", + "karma-mocha-reporter": "^1.1.5", "karma-notify-reporter": "^0.1.1", - "karma-phantomjs-launcher": "^0.1.4", - "karma-webpack": "^1.5.0", - "less": "^2.4.0", - "less-loader": "^2.1.0", - "mocha": "^2.3.4", + "karma-phantomjs-launcher": "^1.0.0", + "karma-webpack": "^1.7.0", + "less": "^2.6.0", + "less-loader": "^2.2.2", + "mocha": "^2.4.5", "node-sass": "^3.4.2", - "react-addons-test-utils": "^0.14.0", - "react-hot-loader": "^1.2.3", - "sass-loader": "^1.0.0", - "style-loader": "^0.12.0", - "url-loader": "^0.5.5", - "webpack": "^1.9.0", - "webpack-dev-server": "^1.9.0" + "phantomjs-prebuilt": "^2.1.4", + "postcss-loader": "^0.8.0", + "react-addons-test-utils": "^0.14.7", + "sass-loader": "^3.1.2", + "style-loader": "^0.13.0", + "url-loader": "^0.5.7", + "webpack": "^1.12.13", + "webpack-dev-server": "^1.14.1" } } From f4f64d81fde78ee5a55ab90ff741fccc344222b2 Mon Sep 17 00:00:00 2001 From: Oliver Turner Date: Sun, 7 Feb 2016 13:14:00 +0000 Subject: [PATCH 2/6] Linting adapted for OP's style --- .eslintrc | 23 ++++++++ .nvmrc | 1 + app/components/Application/__tests__/index.js | 4 +- app/components/Application/index.jsx | 4 +- app/components/Header/__tests__/index.js | 6 +- app/components/Header/index.jsx | 14 ++--- app/css/base.sass | 2 +- conf/karma.ci.conf.js | 4 +- conf/karma.conf.js | 2 +- conf/karma.coverage.conf.js | 2 +- conf/make-karma-config.js | 8 +-- conf/make-webpack-config.js | 23 ++++---- conf/phantomjs-shim.js | 58 +++++++++---------- package.json | 11 ++++ 14 files changed, 98 insertions(+), 64 deletions(-) create mode 100644 .eslintrc create mode 100644 .nvmrc diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..8452952 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,23 @@ +{ + "env": { + "browser": true, + "amd": true, + "es6": true, + "mocha": true + }, + "extends": ["standard", "standard-react", "standard-jsx"], + "parser": "babel-eslint", + "rules": { + "strict": 0, + "comma-dangle": [2, "always-multiline"], + "jsx-quotes": [2, "prefer-double"], + "no-multi-spaces": 0, + "no-underscore-dangle": 0, + "quotes": [2, "single"], + "semi": [2, "always"], + "space-before-function-paren": 0 + }, + "globals": { + "expect": true + } +} diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..47e5d40 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +v5 diff --git a/app/components/Application/__tests__/index.js b/app/components/Application/__tests__/index.js index 46e9828..9fd8d5e 100644 --- a/app/components/Application/__tests__/index.js +++ b/app/components/Application/__tests__/index.js @@ -3,8 +3,8 @@ import ReactTestUtils from 'react-addons-test-utils'; import Application from '../index.jsx'; import styles from '../style.sass'; -describe('Application', function() { - it('displays the component', function() { +describe('Application', function () { + it('displays the component', function () { const application = ReactTestUtils.renderIntoDocument( ); diff --git a/app/components/Application/index.jsx b/app/components/Application/index.jsx index 1de2518..6738224 100644 --- a/app/components/Application/index.jsx +++ b/app/components/Application/index.jsx @@ -10,14 +10,14 @@ import Header from '../Header'; import styles from './style'; export default class Application extends React.Component { - render() { + render () { return

Seems like creating your own React starter kit is a right of passage. So, here's mine.

-

For more information, see the Readme.

+

For more information, see theReadme.

; diff --git a/app/components/Header/__tests__/index.js b/app/components/Header/__tests__/index.js index 612ebba..8fb1dfe 100644 --- a/app/components/Header/__tests__/index.js +++ b/app/components/Header/__tests__/index.js @@ -4,14 +4,14 @@ import ReactTestUtils from 'react-addons-test-utils'; import Header from '../index.jsx'; import styles from '../style.sass'; -describe('Header', function() { - it('displays the title', function() { +describe('Header', function () { + it('displays the title', function () { const header = ReactTestUtils.renderIntoDocument(
); const title = ReactTestUtils.findRenderedDOMComponentWithClass(header, styles.title); - const dom = ReactDOM.findDOMNode(title); + const dom = ReactDOM.findDOMNode(title); expect(dom.textContent).to.equal('YARSK'); }); diff --git a/app/components/Header/index.jsx b/app/components/Header/index.jsx index 801f2aa..260db9a 100644 --- a/app/components/Header/index.jsx +++ b/app/components/Header/index.jsx @@ -11,23 +11,23 @@ import styles from './style'; /** * Reference an image and get back a URL automatically via webpack. * webpack takes care of versioning, bundling for production, etc. -*/ + */ import logoURL from './images/react-logo.svg'; export default class Header extends React.Component { - render() { + render () { return
- +

YARSK

(Yet{' '} - Another{' '} - React{' '} - Starter{' '} - Kit) + Another{' '} + React{' '} + Starter{' '} + Kit)

; diff --git a/app/css/base.sass b/app/css/base.sass index 9e4846e..bc1f93f 100644 --- a/app/css/base.sass +++ b/app/css/base.sass @@ -12,5 +12,5 @@ body a color: #00D8FF -.app +:global(.app) height: 100vh diff --git a/conf/karma.ci.conf.js b/conf/karma.ci.conf.js index 7f375aa..4630ff6 100644 --- a/conf/karma.ci.conf.js +++ b/conf/karma.ci.conf.js @@ -1,10 +1,10 @@ var karmaFactory = require('./make-karma-config.js'); -module.exports = function(config) { +module.exports = function (config) { config.set(karmaFactory({ coverage: true, coverageReporters: [ - { type: 'text' }, + {type: 'text'}, ], })); }; diff --git a/conf/karma.conf.js b/conf/karma.conf.js index 8460ffe..914aaee 100644 --- a/conf/karma.conf.js +++ b/conf/karma.conf.js @@ -1,6 +1,6 @@ var karmaFactory = require('./make-karma-config.js'); -module.exports = function(config) { +module.exports = function (config) { config.set(karmaFactory({ notify: true, })); diff --git a/conf/karma.coverage.conf.js b/conf/karma.coverage.conf.js index 371ef4e..7c57fb8 100644 --- a/conf/karma.coverage.conf.js +++ b/conf/karma.coverage.conf.js @@ -1,6 +1,6 @@ var karmaFactory = require('./make-karma-config.js'); -module.exports = function(config) { +module.exports = function (config) { config.set(karmaFactory({ notify: true, coverage: true, diff --git a/conf/make-karma-config.js b/conf/make-karma-config.js index 9da4b90..c13f945 100644 --- a/conf/make-karma-config.js +++ b/conf/make-karma-config.js @@ -1,6 +1,6 @@ var webpackConfig = require('./webpack.config.js'); -module.exports = function(options) { +module.exports = function (options) { var karmaConfig = { frameworks: ['mocha', 'chai'], @@ -17,7 +17,7 @@ module.exports = function(options) { }, webpackMiddleware: { - noInfo: true, + noInfo: true, }, reporters: ['mocha'], @@ -46,8 +46,8 @@ module.exports = function(options) { karmaConfig.coverageReporter = { dir: '../coverage', reporters: options.coverageReporters || [ - { type: 'text' }, - { type: 'html' }, + {type: 'text'}, + {type: 'html'}, ], }; diff --git a/conf/make-webpack-config.js b/conf/make-webpack-config.js index 357e777..fd02c56 100644 --- a/conf/make-webpack-config.js +++ b/conf/make-webpack-config.js @@ -1,15 +1,16 @@ var fs = require('fs'); +var path = require('path'); var webpack = require('webpack'); var autoprefixer = require('autoprefixer'); -var ExtractTextPlugin = require("extract-text-webpack-plugin"); +var ExtractTextPlugin = require('extract-text-webpack-plugin'); var HtmlWebpackPlugin = require('html-webpack-plugin'); function extractForProduction(loaders) { return ExtractTextPlugin.extract('style', loaders.substr(loaders.indexOf('!'))); } -module.exports = function(options) { - options.lint = fs.existsSync(__dirname + '/../.eslintrc') && options.lint !== false; +module.exports = function (options) { + options.lint = fs.existsSync(path.resolve(__dirname, '..', '.eslintrc')) && options.lint !== false; var localIdentName = options.production ? '[hash:base64]' : '[path]-[local]-[hash:base64:5]'; var cssLoaders = 'style!css?module&localIdentName=' + localIdentName + '!postcss?browsers=last 2 versions'; @@ -69,19 +70,19 @@ module.exports = function(options) { }, { test: /\.png$/, - loader: "url?limit=100000&mimetype=image/png", + loader: 'url?limit=100000&mimetype=image/png', }, { test: /\.svg$/, - loader: "url?limit=100000&mimetype=image/svg+xml", + loader: 'url?limit=100000&mimetype=image/svg+xml', }, { test: /\.gif$/, - loader: "url?limit=100000&mimetype=image/gif", + loader: 'url?limit=100000&mimetype=image/gif', }, { test: /\.jpg$/, - loader: "file", + loader: 'file', }, ], }, @@ -91,8 +92,8 @@ module.exports = function(options) { plugins: options.production ? [ // Important to keep React file size down new webpack.DefinePlugin({ - "process.env": { - "NODE_ENV": JSON.stringify("production"), + 'process.env': { + 'NODE_ENV': JSON.stringify('production'), }, }), new webpack.optimize.DedupePlugin(), @@ -101,7 +102,7 @@ module.exports = function(options) { warnings: false, }, }), - new ExtractTextPlugin("app.[hash].css"), + new ExtractTextPlugin('app.[hash].css'), new HtmlWebpackPlugin({ template: './conf/tmpl.html', production: true, @@ -111,6 +112,6 @@ module.exports = function(options) { template: './conf/tmpl.html', }), ], - postcss: [autoprefixer] + postcss: [autoprefixer], }; }; diff --git a/conf/phantomjs-shim.js b/conf/phantomjs-shim.js index 12fe3bb..ecaf86c 100644 --- a/conf/phantomjs-shim.js +++ b/conf/phantomjs-shim.js @@ -1,35 +1,33 @@ -(function() { +(function () { + var Ap = Array.prototype; + var slice = Ap.slice; + var Fp = Function.prototype; -var Ap = Array.prototype; -var slice = Ap.slice; -var Fp = Function.prototype; + if (!Fp.bind) { + // PhantomJS doesn't support Function.prototype.bind natively, so + // polyfill it whenever this module is required. + Fp.bind = function (context) { + var func = this; + var args = slice.call(arguments, 1); -if (!Fp.bind) { - // PhantomJS doesn't support Function.prototype.bind natively, so - // polyfill it whenever this module is required. - Fp.bind = function(context) { - var func = this; - var args = slice.call(arguments, 1); + function bound() { + var invokedAsConstructor = func.prototype && (this instanceof func); + return func.apply( + // Ignore the context parameter when invoking the bound function + // as a constructor. Note that this includes not only constructor + // invocations using the new keyword but also calls to base class + // constructors such as BaseClass.call(this, ...) or super(...). + !invokedAsConstructor && context || this, + args.concat(slice.call(arguments)) + ); + } - function bound() { - var invokedAsConstructor = func.prototype && (this instanceof func); - return func.apply( - // Ignore the context parameter when invoking the bound function - // as a constructor. Note that this includes not only constructor - // invocations using the new keyword but also calls to base class - // constructors such as BaseClass.call(this, ...) or super(...). - !invokedAsConstructor && context || this, - args.concat(slice.call(arguments)) - ); - } - - // The bound function must share the .prototype of the unbound - // function so that any object created by one constructor will count - // as an instance of both constructors. - bound.prototype = func.prototype; - - return bound; - }; -} + // The bound function must share the .prototype of the unbound + // function so that any object created by one constructor will count + // as an instance of both constructors. + bound.prototype = func.prototype; + return bound; + }; + } })(); diff --git a/package.json b/package.json index 26433b1..55a2a6a 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "description": "My React starter kit. Webpack, Babel, Sass, React 0.14 and more.", "main": "app/index.js", "scripts": { + "lint:js": "eslint ./app ./conf ./build-gh-pages.js", "karma": "cross-env NODE_ENV=test karma start", "test": "npm run karma conf/karma.conf.js -- --single-run", "test:watch": "npm run karma conf/karma.conf.js", @@ -24,14 +25,24 @@ "react-dom": "^0.14.7" }, "devDependencies": { + "autoprefixer": "^6.3.1", "babel-core": "^6.4.5", "babel-eslint": "^4.1.8", "babel-loader": "^6.2.2", + "babel-plugin-transform-react-constant-elements": "^6.4.0", + "babel-plugin-transform-react-inline-elements": "^6.4.0", + "babel-plugin-transform-react-remove-prop-types": "^0.2.1", "babel-preset-react-hmre": "^1.1.0", "chai": "^3.5.0", "css-loader": "^0.23.1", "eslint": "^2.0.0-rc.0", + "eslint-config-standard": "^5.1.0", + "eslint-config-standard-jsx": "^1.1.0", + "eslint-config-standard-react": "^2.2.0", "eslint-loader": "^1.2.1", + "eslint-plugin-promise": "^1.0.8", + "eslint-plugin-react": "^3.16.1", + "eslint-plugin-standard": "^1.3.2", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.8.5", "gh-pages": "^0.9.0", From 92f2d69e0b57e9c6fe9983eb451afb5dcf78adee Mon Sep 17 00:00:00 2001 From: Oliver Turner Date: Sun, 7 Feb 2016 13:26:14 +0000 Subject: [PATCH 3/6] Final tweaks and amends --- .eslintrc | 23 ----------------------- .eslintrc.example | 13 +++++++++---- app/components/Application/index.jsx | 4 ++-- 3 files changed, 11 insertions(+), 29 deletions(-) delete mode 100644 .eslintrc diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index 8452952..0000000 --- a/.eslintrc +++ /dev/null @@ -1,23 +0,0 @@ -{ - "env": { - "browser": true, - "amd": true, - "es6": true, - "mocha": true - }, - "extends": ["standard", "standard-react", "standard-jsx"], - "parser": "babel-eslint", - "rules": { - "strict": 0, - "comma-dangle": [2, "always-multiline"], - "jsx-quotes": [2, "prefer-double"], - "no-multi-spaces": 0, - "no-underscore-dangle": 0, - "quotes": [2, "single"], - "semi": [2, "always"], - "space-before-function-paren": 0 - }, - "globals": { - "expect": true - } -} diff --git a/.eslintrc.example b/.eslintrc.example index 68a427f..8452952 100644 --- a/.eslintrc.example +++ b/.eslintrc.example @@ -3,16 +3,21 @@ "browser": true, "amd": true, "es6": true, - "mocha": true, + "mocha": true }, + "extends": ["standard", "standard-react", "standard-jsx"], "parser": "babel-eslint", "rules": { "strict": 0, "comma-dangle": [2, "always-multiline"], - "quotes": "single", + "jsx-quotes": [2, "prefer-double"], + "no-multi-spaces": 0, "no-underscore-dangle": 0, + "quotes": [2, "single"], + "semi": [2, "always"], + "space-before-function-paren": 0 }, "globals": { - "expect": true, - }, + "expect": true + } } diff --git a/app/components/Application/index.jsx b/app/components/Application/index.jsx index 6738224..5859cad 100644 --- a/app/components/Application/index.jsx +++ b/app/components/Application/index.jsx @@ -16,8 +16,8 @@ export default class Application extends React.Component {
-

Seems like creating your own React starter kit is a right of passage. So, here's mine.

-

For more information, see theReadme.

+

Seems like creating your own React starter kit is a rite of passage. So, here's mine.

+

For more information, see the Readme.

; From e9900e7f1a44b48bc081869fe6a1b67bd64f3295 Mon Sep 17 00:00:00 2001 From: Oliver Turner Date: Sun, 7 Feb 2016 13:51:06 +0000 Subject: [PATCH 4/6] Added a stateless function example: Header/SubHeader --- app/components/Header/index.jsx | 11 +++-------- app/components/Header/subheader.jsx | 15 +++++++++++++++ 2 files changed, 18 insertions(+), 8 deletions(-) create mode 100644 app/components/Header/subheader.jsx diff --git a/app/components/Header/index.jsx b/app/components/Header/index.jsx index 260db9a..d1bc773 100644 --- a/app/components/Header/index.jsx +++ b/app/components/Header/index.jsx @@ -1,5 +1,7 @@ import React from 'react'; +import SubHeader from './subheader'; + /** * Import locally scoped styles using css-loader * See style.sass in this directory. @@ -21,14 +23,7 @@ export default class Header extends React.Component {

YARSK

- -

- (Yet{' '} - Another{' '} - React{' '} - Starter{' '} - Kit) -

+ Yet Another React Starter Kit
; } diff --git a/app/components/Header/subheader.jsx b/app/components/Header/subheader.jsx new file mode 100644 index 0000000..3b05e45 --- /dev/null +++ b/app/components/Header/subheader.jsx @@ -0,0 +1,15 @@ +const React = require('react') + +import styles from './style' + +const SubHeader = ({children}) => ( +

+ {children.split(' ').map((word) => { + const arr = word.split('') + return ({arr.shift()}{arr.join('')} ) + } + )} +

+) + +export default SubHeader From 115b39ba25479f15cc2787a1613a49a5eb2a4d03 Mon Sep 17 00:00:00 2001 From: Oliver Turner Date: Thu, 11 Feb 2016 15:25:41 +0000 Subject: [PATCH 5/6] Implemented OP's requested amends --- .eslintrc.example | 2 +- .nvmrc | 1 - app/components/Header/__tests__/index.js | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) delete mode 100644 .nvmrc diff --git a/.eslintrc.example b/.eslintrc.example index 8452952..2164c6e 100644 --- a/.eslintrc.example +++ b/.eslintrc.example @@ -15,7 +15,7 @@ "no-underscore-dangle": 0, "quotes": [2, "single"], "semi": [2, "always"], - "space-before-function-paren": 0 + "space-before-function-paren": [2, "never"] }, "globals": { "expect": true diff --git a/.nvmrc b/.nvmrc deleted file mode 100644 index 47e5d40..0000000 --- a/.nvmrc +++ /dev/null @@ -1 +0,0 @@ -v5 diff --git a/app/components/Header/__tests__/index.js b/app/components/Header/__tests__/index.js index 8fb1dfe..b6624eb 100644 --- a/app/components/Header/__tests__/index.js +++ b/app/components/Header/__tests__/index.js @@ -11,7 +11,7 @@ describe('Header', function () { ); const title = ReactTestUtils.findRenderedDOMComponentWithClass(header, styles.title); - const dom = ReactDOM.findDOMNode(title); + const dom = ReactDOM.findDOMNode(title); expect(dom.textContent).to.equal('YARSK'); }); From a9afe402e50da959b992b633118f050ed699d947 Mon Sep 17 00:00:00 2001 From: Oliver Turner Date: Wed, 17 Feb 2016 16:06:51 +0000 Subject: [PATCH 6/6] Resolved formatting issues --- app/components/Application/__tests__/index.js | 4 ++-- app/components/Header/__tests__/index.js | 4 ++-- conf/karma.ci.conf.js | 2 +- conf/karma.conf.js | 2 +- conf/karma.coverage.conf.js | 2 +- conf/make-karma-config.js | 2 +- conf/make-webpack-config.js | 2 +- conf/phantomjs-shim.js | 4 ++-- 8 files changed, 11 insertions(+), 11 deletions(-) diff --git a/app/components/Application/__tests__/index.js b/app/components/Application/__tests__/index.js index 9fd8d5e..46e9828 100644 --- a/app/components/Application/__tests__/index.js +++ b/app/components/Application/__tests__/index.js @@ -3,8 +3,8 @@ import ReactTestUtils from 'react-addons-test-utils'; import Application from '../index.jsx'; import styles from '../style.sass'; -describe('Application', function () { - it('displays the component', function () { +describe('Application', function() { + it('displays the component', function() { const application = ReactTestUtils.renderIntoDocument( ); diff --git a/app/components/Header/__tests__/index.js b/app/components/Header/__tests__/index.js index b6624eb..612ebba 100644 --- a/app/components/Header/__tests__/index.js +++ b/app/components/Header/__tests__/index.js @@ -4,8 +4,8 @@ import ReactTestUtils from 'react-addons-test-utils'; import Header from '../index.jsx'; import styles from '../style.sass'; -describe('Header', function () { - it('displays the title', function () { +describe('Header', function() { + it('displays the title', function() { const header = ReactTestUtils.renderIntoDocument(
); diff --git a/conf/karma.ci.conf.js b/conf/karma.ci.conf.js index 4630ff6..3f68eac 100644 --- a/conf/karma.ci.conf.js +++ b/conf/karma.ci.conf.js @@ -1,6 +1,6 @@ var karmaFactory = require('./make-karma-config.js'); -module.exports = function (config) { +module.exports = function(config) { config.set(karmaFactory({ coverage: true, coverageReporters: [ diff --git a/conf/karma.conf.js b/conf/karma.conf.js index 914aaee..8460ffe 100644 --- a/conf/karma.conf.js +++ b/conf/karma.conf.js @@ -1,6 +1,6 @@ var karmaFactory = require('./make-karma-config.js'); -module.exports = function (config) { +module.exports = function(config) { config.set(karmaFactory({ notify: true, })); diff --git a/conf/karma.coverage.conf.js b/conf/karma.coverage.conf.js index 7c57fb8..371ef4e 100644 --- a/conf/karma.coverage.conf.js +++ b/conf/karma.coverage.conf.js @@ -1,6 +1,6 @@ var karmaFactory = require('./make-karma-config.js'); -module.exports = function (config) { +module.exports = function(config) { config.set(karmaFactory({ notify: true, coverage: true, diff --git a/conf/make-karma-config.js b/conf/make-karma-config.js index c13f945..a5b9d76 100644 --- a/conf/make-karma-config.js +++ b/conf/make-karma-config.js @@ -1,6 +1,6 @@ var webpackConfig = require('./webpack.config.js'); -module.exports = function (options) { +module.exports = function(options) { var karmaConfig = { frameworks: ['mocha', 'chai'], diff --git a/conf/make-webpack-config.js b/conf/make-webpack-config.js index fd02c56..ab8f9fb 100644 --- a/conf/make-webpack-config.js +++ b/conf/make-webpack-config.js @@ -9,7 +9,7 @@ function extractForProduction(loaders) { return ExtractTextPlugin.extract('style', loaders.substr(loaders.indexOf('!'))); } -module.exports = function (options) { +module.exports = function(options) { options.lint = fs.existsSync(path.resolve(__dirname, '..', '.eslintrc')) && options.lint !== false; var localIdentName = options.production ? '[hash:base64]' : '[path]-[local]-[hash:base64:5]'; diff --git a/conf/phantomjs-shim.js b/conf/phantomjs-shim.js index ecaf86c..108e3c5 100644 --- a/conf/phantomjs-shim.js +++ b/conf/phantomjs-shim.js @@ -1,4 +1,4 @@ -(function () { +(function() { var Ap = Array.prototype; var slice = Ap.slice; var Fp = Function.prototype; @@ -6,7 +6,7 @@ if (!Fp.bind) { // PhantomJS doesn't support Function.prototype.bind natively, so // polyfill it whenever this module is required. - Fp.bind = function (context) { + Fp.bind = function(context) { var func = this; var args = slice.call(arguments, 1);