From 91685f005e42f1b13f093ebe0058b89457bc7ad8 Mon Sep 17 00:00:00 2001 From: Alessandro Arnodo Date: Fri, 8 Jan 2016 00:23:16 +0100 Subject: [PATCH] feat: from eslint to standard --- .eslintignore | 6 ----- .eslintrc | 6 ----- .jsbeautifyrc | 43 ----------------------------- CHANGELOG.md | 10 +++++++ CONTRIBUTING.md | 2 +- README.md | 4 +-- devServer.js | 25 +++++++++-------- package.json | 14 +++++----- prodServer.js | 22 +++++++-------- src/components/App.js | 8 +++--- src/components/Counter.js | 18 ++++++------- src/components/Home.js | 36 ++++++++++++------------- src/main.js | 22 +++++++-------- src/routes.js | 14 +++++----- test/components/App.spec.js | 20 +++++++------- test/components/Counter.spec.js | 48 ++++++++++++++++----------------- test/components/Home.spec.js | 32 +++++++++++----------- test/index.js | 28 ++++++++++--------- test/utils.js | 10 +++---- webpack.config.dev.js | 10 +++---- webpack.config.prod.js | 14 +++++----- 21 files changed, 173 insertions(+), 219 deletions(-) delete mode 100644 .eslintignore delete mode 100755 .eslintrc delete mode 100644 .jsbeautifyrc diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index 7a9450a..0000000 --- a/.eslintignore +++ /dev/null @@ -1,6 +0,0 @@ -dist -node_modules -coverage -webpack.config.*.js -*Server.js -gh-pages diff --git a/.eslintrc b/.eslintrc deleted file mode 100755 index 2751ae3..0000000 --- a/.eslintrc +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "eslint-config-vesparny/react", - "globals": { - "__DEV__": true - } -} diff --git a/.jsbeautifyrc b/.jsbeautifyrc deleted file mode 100644 index 76d43a9..0000000 --- a/.jsbeautifyrc +++ /dev/null @@ -1,43 +0,0 @@ -{ - "html": { - "allowed_file_extensions": [html", "xml", "svg"], - "brace_style": "collapse", - "end_with_newline": false, - "indent_char": " ", - "indent_handlebars": false, - "indent_inner_html": false, - "indent_scripts": "keep", - "indent_size": 2, - "max_preserve_newlines": 0, - "preserve_newlines": true, - "wrap_line_length": 0 - }, - "css": { - "allowed_file_extensions": ["css", "scss", "sass", "less", "styl"], - "end_with_newline": false, - "indent_char": " ",r - "indent_size": 2, - "newline_between_rules": true, - "selector_separator": " ", - "selector_separator_newline": true - }, - "js": { - "allowed_file_extensions": ["js", "json"], - "brace_style": "collapse", - "break_chained_methods": false, - "indent_char": " ", - "indent_level": 0, - "indent_size": 2, - "indent_with_tabs": false, - "keep_array_indentation": false, - "keep_function_indentation": false, - "max_preserve_newlines": 0, - "preserve_newlines": true, - "space_after_anon_function": false, - "space_before_conditional": true, - "space_in_empty_paren": false, - "space_in_paren": false, - "unescape_strings": false, - "wrap_line_length": 0 - } -} diff --git a/CHANGELOG.md b/CHANGELOG.md index 71d9769..776cbfa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,13 @@ + +## [3.2.1](https://github.com/vesparny/react-kickstart/compare/3.2.0...v3.2.1) (2016-01-07) + + +### Bug Fixes + +* put fastclick back ([84a76f9](https://github.com/vesparny/react-kickstart/commit/84a76f9)) + + + # [3.2.0](https://github.com/vesparny/react-kickstart/compare/3.1.1...v3.2.0) (2016-01-07) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index c2464f5..4ff9167 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -7,7 +7,7 @@ Please do the following: -* Follow the existing styles (we have an `.editorconfig` file and we are using `eslint`). +* Follow the existing styles (we have an `.editorconfig` file and we are using [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)). * Add tests if needed. * Document your changes in the README (try to follow the convention you see in the rest of the file). * Use the command `npm run c` when ready to commit your changes. This will help you to provide proper commit messages that will be taken into account while generating the changelog. diff --git a/README.md b/README.md index 228db44..dfe2d7c 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,7 @@ [![Dependency status](https://david-dm.org/vesparny/react-kickstart/status.svg)](https://david-dm.org/vesparny/react-kickstart "Dependency status") [![Dev dependency status](https://david-dm.org/vesparny/react-kickstart/dev-status.svg)](https://david-dm.org/vesparny/react-kickstart#info=devDependencies "Dev dependency status") +[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard) ## Minimal It contains just the necessary to get started with React, I decided not to include flux libraries or other complicated stuff like server-rendering in here. @@ -22,7 +23,6 @@ See a [working demo](http://vesparny.github.io/react-kickstart/) * [babeljs](https://babeljs.io/) * unit tests ([tape](https://github.com/substack/tape/) + [sinon](http://sinonjs.org/)) examples with both [shallow-rendering](https://facebook.github.io/react/docs/test-utils.html#shallow-rendering) and [jsdom](https://github.com/tmpvar/jsdom) * code coverage with [isparta](https://github.com/douglasduteil/isparta) -* eslint configuration * development and production build ## Usage @@ -57,7 +57,7 @@ npm run build npm run build:start ``` -**Run eslint** +**Run code style check** ``` npm run lint ``` diff --git a/devServer.js b/devServer.js index fc4aae8..5bfc8a4 100755 --- a/devServer.js +++ b/devServer.js @@ -1,11 +1,10 @@ -var path = require('path'); -var express = require('express'); -var webpack = require('webpack'); -var config = require('./webpack.config.dev'); +var express = require('express') +var webpack = require('webpack') +var config = require('./webpack.config.dev') -var app = express(); +var app = express() -var compiler = webpack(config); +var compiler = webpack(config) app.use(require('webpack-dev-middleware')(compiler, { publicPath: config.output.publicPath, @@ -18,15 +17,15 @@ app.use(require('webpack-dev-middleware')(compiler, { chunkModules: false, modules: false } -})); +})) -app.use(require('webpack-hot-middleware')(compiler)); +app.use(require('webpack-hot-middleware')(compiler)) -app.use(express.static(__dirname + '/dist')); +app.use(express.static(__dirname + '/dist')) -app.listen(config._hotPort, 'localhost', function(err) { +app.listen(config._hotPort, 'localhost', function (err) { if (err) { - console.log(err); + console.log(err) } - console.info("==> 🌎 Listening on port %s. Open up http://localhost:%s/ in your browser.", config._hotPort, config._hotPort); -}); + console.info('==> 🌎 Listening on port %s. Open up http://localhost:%s/ in your browser.', config._hotPort, config._hotPort) +}) diff --git a/package.json b/package.json index 436e4aa..49afeae 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-kickstart", - "version": "3.2.0", + "version": "3.2.1", "description": "just another react + webpack boilerplate.", "private": true, "author": "Alessandro Arnodo (https://alessandro.arnodo.net)", @@ -21,10 +21,15 @@ "build:start": "better-npm-run build:start", "build": "rimraf dist && better-npm-run build", "release": "npm run lint && npm run test && npm run build && rimraf gh-pages && mkdir gh-pages && cd gh-pages && cp -r ../dist/* . && git init . && git remote add origin git@github.com:vesparny/react-kickstart.git && git checkout -b gh-pages && git add . && git commit -m 'publishing' && git push origin gh-pages -f", - "lint": "eslint .", + "lint": "standard", "changelog": "conventional-changelog -p angular -i CHANGELOG.md -w", "c": "git-cz" }, + "standard": { + "globals": [ + "__DEV__" + ] + }, "betterScripts": { "build": { "command": "webpack --config webpack.config.prod.js --progress --profile --colors", @@ -63,7 +68,6 @@ "autoprefixer": "^6.2.3", "babel-cli": "^6.4.0", "babel-core": "^6.4.0", - "babel-eslint": "^5.0.0-beta6", "babel-loader": "^6.2.1", "babel-plugin-react-transform": "^2.0.0", "babel-polyfill": "^6.3.14", @@ -74,9 +78,6 @@ "commitizen": "^2.4.6", "conventional-changelog": "^0.5.3", "css-loader": "^0.23.1", - "eslint": "^1.10.3", - "eslint-config-vesparny": "^1.2.1", - "eslint-plugin-react": "^3.14.0", "express": "^4.13.3", "extract-text-webpack-plugin": "^1.0.1", "glob": "^6.0.1", @@ -94,6 +95,7 @@ "redbox-react": "^1.2.0", "rimraf": "^2.5.0", "sinon": "^1.17.2", + "standard": "^5.4.1", "stats-webpack-plugin": "^0.2.2", "style-loader": "^0.13.0", "tap-spec": "^4.1.1", diff --git a/prodServer.js b/prodServer.js index 380c1f1..fe33c3b 100644 --- a/prodServer.js +++ b/prodServer.js @@ -1,16 +1,16 @@ -var path = require('path'); -var express = require('express'); -var app = express(); +var path = require('path') +var express = require('express') +var app = express() -app.use(express.static(__dirname + '/dist')); +app.use(express.static(__dirname + '/dist')) -app.get('*', function(req, res) { - res.sendFile(path.join(__dirname, 'dist/index.html')); -}); +app.get('*', function (req, res) { + res.sendFile(path.join(__dirname, 'dist/index.html')) +}) -app.listen(8000, 'localhost', function(err) { +app.listen(8000, 'localhost', function (err) { if (err) { - console.log(err); + console.log(err) } - console.info("==> 🌎 Listening on port %s. Open up http://localhost:%s/ in your browser.", 8000, 8000); -}); + console.info('==> 🌎 Listening on port %s. Open up http://localhost:%s/ in your browser.', 8000, 8000) +}) diff --git a/src/components/App.js b/src/components/App.js index 1221fc9..35b54fa 100755 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,12 +1,12 @@ -import React, {PropTypes} from 'react'; +import React, {PropTypes} from 'react' const App = ({children}) =>
{children} -
; + App.propTypes = typeof __DEV__ && { children: PropTypes.object.isRequired -}; +} -export default App; +export default App diff --git a/src/components/Counter.js b/src/components/Counter.js index a6fa2fc..6168b51 100644 --- a/src/components/Counter.js +++ b/src/components/Counter.js @@ -1,5 +1,5 @@ -import React, {PropTypes} from 'react'; -import style from './Counter.css'; +import React, {PropTypes} from 'react' +import style from './Counter.css' const Counter = React.createClass({ @@ -8,14 +8,14 @@ const Counter = React.createClass({ onIncrement: PropTypes.func.isRequired }, - increment() { + increment () { // maybe I'd like to do something here // for the moment I just call the callback passed from the parent - return this.props.onIncrement(); + return this.props.onIncrement() }, - render() { - const {count} = this.props; + render () { + const {count} = this.props return (
@@ -25,8 +25,8 @@ const Counter = React.createClass({ Increment
- ); + ) } -}); +}) -export default Counter; +export default Counter diff --git a/src/components/Home.js b/src/components/Home.js index aba7204..44a69d5 100644 --- a/src/components/Home.js +++ b/src/components/Home.js @@ -1,47 +1,47 @@ -import React from 'react'; -import Counter from './Counter'; +import React from 'react' +import Counter from './Counter' import { version, dependencies, homepage, devDependencies - } from '../../package.json'; -import style from './Home.css'; + } from '../../package.json' +import style from './Home.css' const Home = React.createClass({ - getInitialState() { + getInitialState () { return { counter: 0 - }; + } }, - getVersion() { - return version; + getVersion () { + return version }, - increment() { + increment () { this.setState({ counter: this.state.counter += 1 - }); + }) }, - render() { + render () { const deps = Object.keys(dependencies) - .map((dep, i) =>
  • {dep} : {dependencies[dep]}
    • ); + .map((dep, i) =>
  • {dep} : {dependencies[dep]}
    • ) const devDeps = Object.keys(devDependencies) - .map((dep, i) =>
  • {dep} : {devDependencies[dep]}
    • ); + .map((dep, i) =>
  • {dep} : {devDependencies[dep]}
    • ) return (

    - ⚛ react-kickstart + ⚛ react-kickstart

    version {version}

    GitHub
    - @vesparny + @vesparny
    - ); + ) } -}); +}) -export default Home; +export default Home diff --git a/src/main.js b/src/main.js index 59464b5..ca42d7d 100755 --- a/src/main.js +++ b/src/main.js @@ -1,22 +1,22 @@ -import 'babel-polyfill'; -import 'normalize.css'; -import './globals.css'; -import React from 'react'; -import ReactDOM from 'react-dom'; +import 'babel-polyfill' +import 'normalize.css' +import './globals.css' +import React from 'react' +import ReactDOM from 'react-dom' // only for GitHub pages // do prefer import { browserHistory } from 'react-router' -import Router, {hashHistory} from 'react-router'; -import attachFastClick from 'fastclick'; -import routes from './routes'; +import Router, {hashHistory} from 'react-router' +import attachFastClick from 'fastclick' +import routes from './routes' // Remove 300ms tap delay on mobile devices -attachFastClick.attach(document.body); +attachFastClick.attach(document.body) // Expose globally -window.React = React; +window.React = React ReactDOM.render( , - document.getElementById('root')); + document.getElementById('root')) diff --git a/src/routes.js b/src/routes.js index 6b7d58f..1738622 100644 --- a/src/routes.js +++ b/src/routes.js @@ -1,13 +1,13 @@ -import React from 'react'; -import {Route} from 'react-router'; -import App from './components/App'; -import Home from './components/Home'; +import React from 'react' +import {Route} from 'react-router' +import App from './components/App' +import Home from './components/Home' const routes = ( - + // put other routes here -); +) -export default routes; +export default routes diff --git a/test/components/App.spec.js b/test/components/App.spec.js index 7320914..ca43f1a 100644 --- a/test/components/App.spec.js +++ b/test/components/App.spec.js @@ -1,13 +1,13 @@ -import React from 'react'; -import App from '../../src/components/App'; -import * as utils from '../utils'; -import TestUtils from 'react-addons-test-utils'; -import test from 'tape'; +import React from 'react' +import App from '../../src/components/App' +import * as utils from '../utils' +import TestUtils from 'react-addons-test-utils' +import test from 'tape' test('App', (t) => { - const component = utils.shallowlyRenderedOutput(
    ); + const component = utils.shallowlyRenderedOutput(
    ) - t.ok(component.type === 'div', 'should have a div as container'); - t.ok(typeof TestUtils.isElementOfType(component.props.children) !== 'undefined', 'should contain children'); - t.end(); -}); + t.ok(component.type === 'div', 'should have a div as container') + t.ok(typeof TestUtils.isElementOfType(component.props.children) !== 'undefined', 'should contain children') + t.end() +}) diff --git a/test/components/Counter.spec.js b/test/components/Counter.spec.js index c7ee080..8f689b9 100644 --- a/test/components/Counter.spec.js +++ b/test/components/Counter.spec.js @@ -1,23 +1,23 @@ -import React from 'react'; -import Counter from '../../src/components/Counter'; -import TestUtils from 'react-addons-test-utils'; -import test from 'tape'; -import sinon from 'sinon'; +import React from 'react' +import Counter from '../../src/components/Counter' +import TestUtils from 'react-addons-test-utils' +import test from 'tape' +import sinon from 'sinon' const Home = React.createClass({ - getInitialState() { + getInitialState () { return { counter: 0 - }; + } }, - increment() { + increment () { this.setState({ counter: this.state.counter += 1 - }); + }) }, - render() { + render () { return (
    - ); + ) } -}); +}) test('Counter', (assert) => { - const tree = TestUtils.renderIntoDocument( < Home / > ); - let counter = TestUtils.findRenderedComponentWithType(tree, Counter); - TestUtils.Simulate.click(TestUtils.findRenderedDOMComponentWithTag(counter, 'button')); - assert.equal(counter.props.count, 1, 'should receive and increment counter'); - assert.equal(TestUtils.findRenderedDOMComponentWithTag(counter, 'h1').textContent, 'Count: 1', 'DOM populated accordingly'); + const tree = TestUtils.renderIntoDocument() + let counter = TestUtils.findRenderedComponentWithType(tree, Counter) + TestUtils.Simulate.click(TestUtils.findRenderedDOMComponentWithTag(counter, 'button')) + assert.equal(counter.props.count, 1, 'should receive and increment counter') + assert.equal(TestUtils.findRenderedDOMComponentWithTag(counter, 'h1').textContent, 'Count: 1', 'DOM populated accordingly') - const spy = sinon.spy(); - counter = TestUtils.renderIntoDocument(); - const button = TestUtils.findRenderedDOMComponentWithTag(counter, 'button'); - TestUtils.Simulate.click(button); - assert.ok(spy.calledOnce, 'onIncrement should get called when a click on button happens'); - assert.end(); -}); + const spy = sinon.spy() + counter = TestUtils.renderIntoDocument() + const button = TestUtils.findRenderedDOMComponentWithTag(counter, 'button') + TestUtils.Simulate.click(button) + assert.ok(spy.calledOnce, 'onIncrement should get called when a click on button happens') + assert.end() +}) diff --git a/test/components/Home.spec.js b/test/components/Home.spec.js index 8e33141..60c1daf 100644 --- a/test/components/Home.spec.js +++ b/test/components/Home.spec.js @@ -1,24 +1,24 @@ -import React from 'react'; -import Home from '../../src/components/Home'; -import * as utils from '../utils'; -import {version} from '../../package.json'; -import test from 'tape'; -import sinon from 'sinon'; -import {findWhere} from 'lodash'; +import React from 'react' +import Home from '../../src/components/Home' +import * as utils from '../utils' +import {version} from '../../package.json' +import test from 'tape' +import sinon from 'sinon' +import {findWhere} from 'lodash' test('Home', (t) => { - const component = utils.shallowlyRenderedOutput( < Home / > ); + const component = utils.shallowlyRenderedOutput() - t.equal(component.type, 'section', 'should contain one "
    " element'); - t.ok(findWhere(component.props.children.props.children, @vesparny), 'should show my twitter handle'); - t.equal(Home.prototype.getVersion(), version, 'should return the current version when called'); + t.equal(component.type, 'section', 'should contain one "
    " element') + t.ok(findWhere(component.props.children.props.children, @vesparny), 'should show my twitter handle') + t.equal(Home.prototype.getVersion(), version, 'should return the current version when called') - const spy = sinon.spy(); + const spy = sinon.spy() Home.prototype.increment.call({ state: { counter: 0 }, setState: spy - }); - t.ok(spy.calledOnce, 'increment should call setState() once invoked'); - t.end(); -}); + }) + t.ok(spy.calledOnce, 'increment should call setState() once invoked') + t.end() +}) diff --git a/test/index.js b/test/index.js index 6855734..928812e 100644 --- a/test/index.js +++ b/test/index.js @@ -1,20 +1,22 @@ -import {jsdom} from 'jsdom'; -import sinon from 'sinon'; -import glob from 'glob'; -import path from 'path'; +import {jsdom} from 'jsdom' +import sinon from 'sinon' +import glob from 'glob' +import path from 'path' -global.document = jsdom(''); -global.window = document.defaultView; -global.navigator = global.window.navigator; +global.document = jsdom('') +global.window = document.defaultView +global.navigator = global.window.navigator -global.sinon = sinon; -global.__DEV__ = true; +global.sinon = sinon +global.__DEV__ = true // ensure requiring css not to throw require.extensions['.css'] = () => { - return null; -}; + return null +} // require all specs -glob('test/**/*.spec.js', (err, files) => - files.forEach(file => require(path.resolve(process.cwd(), file)))); +glob('test/**/*.spec.js', (err, files) => { + console.error(err) + files.forEach(file => require(path.resolve(process.cwd(), file))) +}) diff --git a/test/utils.js b/test/utils.js index 25f22a6..68c7185 100644 --- a/test/utils.js +++ b/test/utils.js @@ -1,8 +1,8 @@ -import TestUtils from 'react-addons-test-utils'; +import TestUtils from 'react-addons-test-utils' -export function shallowlyRenderedOutput(Component) { - const shallowRenderer = TestUtils.createRenderer(); - shallowRenderer.render(Component); +export function shallowlyRenderedOutput (Component) { + const shallowRenderer = TestUtils.createRenderer() + shallowRenderer.render(Component) - return shallowRenderer.getRenderOutput(); + return shallowRenderer.getRenderOutput() } diff --git a/webpack.config.dev.js b/webpack.config.dev.js index ed8f893..dd58c1c 100755 --- a/webpack.config.dev.js +++ b/webpack.config.dev.js @@ -1,8 +1,6 @@ -'use strict'; - -var path = require('path'); -var webpack = require('webpack'); -var HtmlWebpackPlugin = require('html-webpack-plugin'); +var path = require('path') +var webpack = require('webpack') +var HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { devtool: 'eval', @@ -46,4 +44,4 @@ module.exports = { postcss: [ require('postcss-modules-values') ] -}; +} diff --git a/webpack.config.prod.js b/webpack.config.prod.js index 10655eb..ff5d18c 100644 --- a/webpack.config.prod.js +++ b/webpack.config.prod.js @@ -1,10 +1,8 @@ -'use strict'; - -var path = require('path'); -var webpack = require('webpack'); -var HtmlWebpackPlugin = require('html-webpack-plugin'); -var ExtractTextPlugin = require('extract-text-webpack-plugin'); -var StatsPlugin = require('stats-webpack-plugin'); +var path = require('path') +var webpack = require('webpack') +var HtmlWebpackPlugin = require('html-webpack-plugin') +var ExtractTextPlugin = require('extract-text-webpack-plugin') +var StatsPlugin = require('stats-webpack-plugin') module.exports = { devtool: 'source-map', @@ -55,4 +53,4 @@ module.exports = { require('autoprefixer'), require('postcss-modules-values') ] -}; +}