Skip to content

Switch to rackt eslint config #173

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Nov 3, 2015
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 5 additions & 9 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -1,19 +1,15 @@
{
"extends": "eslint-config-airbnb",
"extends": "eslint-config-rackt",
"env": {
"browser": true,
"mocha": true,
"node": true
},
"rules": {
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2,
"react/react-in-jsx-scope": 2,

//Temporarirly disabled due to a possible bug in babel-eslint (todomvc example)
"block-scoped-var": 0,
// Temporarily disabled for test/* until babel/babel-eslint#33 is resolved
"padded-blocks": 0
"valid-jsdoc": 2,
"react/jsx-uses-react": 1,
"react/jsx-no-undef": 2,
"react/wrap-multilines": 2
},
"plugins": [
"react"
Expand Down
92 changes: 46 additions & 46 deletions docs/api.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ ReactDOM.render(
<MyRootComponent />
</Provider>,
rootEl
);
)
```

##### React Router 0.13
Expand All @@ -34,8 +34,8 @@ Router.run(routes, Router.HistoryLocation, (Handler, routerState) => { // note "
<Handler routerState={routerState} />
</Provider>,
document.getElementById('root')
);
});
)
})
```

##### React Router 1.0
Expand All @@ -46,7 +46,7 @@ ReactDOM.render(
<Router history={history}>...</Router>
</Provider>,
targetEl
);
)
```

### `connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])`
Expand Down Expand Up @@ -99,7 +99,7 @@ Returns the wrapped component instance. Only available if you pass `{ withRef: t
##### Inject just `dispatch` and don't listen to store

```js
export default connect()(TodoApp);
export default connect()(TodoApp)
```

##### Inject `dispatch` and every field in the global state
Expand All @@ -109,151 +109,151 @@ export default connect()(TodoApp);
>listen to a relevant slice of the state.

```js
export default connect(state => state)(TodoApp);
export default connect(state => state)(TodoApp)
```

##### Inject `dispatch` and `todos`

```js
function mapStateToProps(state) {
return { todos: state.todos };
return { todos: state.todos }
}

export default connect(mapStateToProps)(TodoApp);
export default connect(mapStateToProps)(TodoApp)
```

##### Inject `todos` and all action creators (`addTodo`, `completeTodo`, ...)

```js
import * as actionCreators from './actionCreators';
import * as actionCreators from './actionCreators'

function mapStateToProps(state) {
return { todos: state.todos };
return { todos: state.todos }
}

export default connect(mapStateToProps, actionCreators)(TodoApp);
export default connect(mapStateToProps, actionCreators)(TodoApp)
```

##### Inject `todos` and all action creators (`addTodo`, `completeTodo`, ...) as `actions`

```js
import * as actionCreators from './actionCreators';
import { bindActionCreators } from 'redux';
import * as actionCreators from './actionCreators'
import { bindActionCreators } from 'redux'

function mapStateToProps(state) {
return { todos: state.todos };
return { todos: state.todos }
}

function mapDispatchToProps(dispatch) {
return { actions: bindActionCreators(actionCreators, dispatch) };
return { actions: bindActionCreators(actionCreators, dispatch) }
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoApp);
export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)
```

##### Inject `todos` and a specific action creator (`addTodo`)

```js
import { addTodo } from './actionCreators';
import { bindActionCreators } from 'redux';
import { addTodo } from './actionCreators'
import { bindActionCreators } from 'redux'

function mapStateToProps(state) {
return { todos: state.todos };
return { todos: state.todos }
}

function mapDispatchToProps(dispatch) {
return bindActionCreators({ addTodo }, dispatch);
return bindActionCreators({ addTodo }, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoApp);
export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)
```

##### Inject `todos`, todoActionCreators as `todoActions`, and counterActionCreators as `counterActions`

```js
import * as todoActionCreators from './todoActionCreators';
import * as counterActionCreators from './counterActionCreators';
import { bindActionCreators } from 'redux';
import * as todoActionCreators from './todoActionCreators'
import * as counterActionCreators from './counterActionCreators'
import { bindActionCreators } from 'redux'

function mapStateToProps(state) {
return { todos: state.todos };
return { todos: state.todos }
}

function mapDispatchToProps(dispatch) {
return {
todoActions: bindActionCreators(todoActionCreators, dispatch),
counterActions: bindActionCreators(counterActionCreators, dispatch)
};
}
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoApp);
export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)
```

##### Inject `todos`, and todoActionCreators and counterActionCreators together as `actions`

```js
import * as todoActionCreators from './todoActionCreators';
import * as counterActionCreators from './counterActionCreators';
import { bindActionCreators } from 'redux';
import * as todoActionCreators from './todoActionCreators'
import * as counterActionCreators from './counterActionCreators'
import { bindActionCreators } from 'redux'

function mapStateToProps(state) {
return { todos: state.todos };
return { todos: state.todos }
}

function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(Object.assign({}, todoActionCreators, counterActionCreators), dispatch)
};
}
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoApp);
export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)
```

##### Inject `todos`, and all todoActionCreators and counterActionCreators directly as props

```js
import * as todoActionCreators from './todoActionCreators';
import * as counterActionCreators from './counterActionCreators';
import { bindActionCreators } from 'redux';
import * as todoActionCreators from './todoActionCreators'
import * as counterActionCreators from './counterActionCreators'
import { bindActionCreators } from 'redux'

function mapStateToProps(state) {
return { todos: state.todos };
return { todos: state.todos }
}

function mapDispatchToProps(dispatch) {
return bindActionCreators(Object.assign({}, todoActionCreators, counterActionCreators), dispatch);
return bindActionCreators(Object.assign({}, todoActionCreators, counterActionCreators), dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoApp);
export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)
```

##### Inject `todos` of a specific user depending on props

```js
import * as actionCreators from './actionCreators';
import * as actionCreators from './actionCreators'

function mapStateToProps(state, ownProps) {
return { todos: state.todos[ownProps.userId] };
return { todos: state.todos[ownProps.userId] }
}

export default connect(mapStateToProps)(TodoApp);
export default connect(mapStateToProps)(TodoApp)
```

##### Inject `todos` of a specific user depending on props, and inject `props.userId` into the action

```js
import * as actionCreators from './actionCreators';
import * as actionCreators from './actionCreators'

function mapStateToProps(state) {
return { todos: state.todos };
return { todos: state.todos }
}

function mergeProps(stateProps, dispatchProps, ownProps) {
return Object.assign({}, ownProps, {
todos: stateProps.todos[ownProps.userId],
addTodo: (text) => dispatchProps.addTodo(ownProps.userId, text)
});
})
}

export default connect(mapStateToProps, actionCreators, mergeProps)(TodoApp);
export default connect(mapStateToProps, actionCreators, mergeProps)(TodoApp)
```
26 changes: 13 additions & 13 deletions docs/quick-start.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export default class Counter extends Component {
<button onClick={this.props.onIncrement}>
{this.props.value}
</button>
);
)
}
}
```
Expand All @@ -64,30 +64,30 @@ We will use the `connect()` function provided by `react-redux` to turn a “dumb
##### `containers/CounterContainer.js`

```js
import { Component } from 'react';
import { connect } from 'react-redux';
import { Component } from 'react'
import { connect } from 'react-redux'

import Counter from '../components/Counter';
import { increment } from '../actionsCreators';
import Counter from '../components/Counter'
import { increment } from '../actionsCreators'

// Which part of the Redux global state does our component want to receive as props?
function mapStateToProps(state) {
return {
value: state.counter
};
}
}

// Which action creators does it want to receive by props?
function mapDispatchToProps(dispatch) {
return {
onIncrement: () => dispatch(increment())
};
}
}

export default connect(
mapStateToProps,
mapDispatchToProps
)(Counter);
)(Counter)

// You can also pass an object instead of defining `mapDispatchToProps`:
// export default connect(mapStateToProps, CounterActionCreators)(Counter);
Expand Down Expand Up @@ -129,22 +129,22 @@ Finally, how do we actually hook it up to the Redux store? We need to create the
The trick is to wrap the whole view hierarchy into a `<Provider>` from React Redux.

```js
import ReactDOM from 'react-dom';
import { Component } from 'react';
import { Provider } from 'react-redux';
import ReactDOM from 'react-dom'
import { Component } from 'react'
import { Provider } from 'react-redux'

class App extends Component {
render() {
// ...
}
}

const targetEl = document.getElementById('root');
const targetEl = document.getElementById('root')

ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
targetEl
);
)
```
10 changes: 5 additions & 5 deletions docs/troubleshooting.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,16 +24,16 @@ Router.run(routes, Router.HistoryLocation, (Handler, routerState) => { // note "
<Handler routerState={routerState} />
</Provider>,
document.getElementById('root')
);
});
)
})
```

Nested view:

```js
render() {
// Keep passing it down
return <RouteHandler routerState={this.props.routerState} />;
return <RouteHandler routerState={this.props.routerState} />
}
```

Expand All @@ -52,12 +52,12 @@ If that’s not practical for whatever reason (for example, if you’re using a

```
function mapStateToProps(state) {
return { todos: state.todos };
return { todos: state.todos }
}

export default connect(mapStateToProps, null, null, {
pure: false
})(TodoApp);
})(TodoApp)
```

This will remove the assumption that `TodoApp` is pure and cause it to update whenever its parent component renders. Note that this will make your application less performant, so only do this if you have no other option.
Expand Down
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,9 @@
"babel-core": "^5.8.22",
"babel-eslint": "^3.1.15",
"babel-loader": "^5.3.2",
"eslint": "^0.23",
"eslint-config-airbnb": "0.0.6",
"eslint-plugin-react": "^2.3.0",
"eslint": "^1.7.1",
"eslint-config-rackt": "1.1.0",
"eslint-plugin-react": "^3.6.3",
"expect": "^1.8.0",
"isparta": "^3.0.3",
"istanbul": "^0.3.17",
Expand Down
Loading