diff --git a/.prettierrc.examples b/.prettierrc.examples new file mode 100644 index 00000000..1d6941b2 --- /dev/null +++ b/.prettierrc.examples @@ -0,0 +1,8 @@ +{ + "bracketSpacing": false, + "jsxBracketSameLine": true, + "parser": "flow", + "printWidth": 40, + "singleQuote": true, + "trailingComma": "es5" +} \ No newline at end of file diff --git a/examples/components-and-props/composing-components.js b/examples/components-and-props/composing-components.js index 9158dd0c..f81f7668 100644 --- a/examples/components-and-props/composing-components.js +++ b/examples/components-and-props/composing-components.js @@ -15,4 +15,4 @@ function App() { ReactDOM.render( , document.getElementById('root') -); \ No newline at end of file +); diff --git a/examples/components-and-props/extracting-components-continued.js b/examples/components-and-props/extracting-components-continued.js index bcb6547b..bcd08b85 100644 --- a/examples/components-and-props/extracting-components-continued.js +++ b/examples/components-and-props/extracting-components-continued.js @@ -4,9 +4,11 @@ function formatDate(date) { function Avatar(props) { return ( - {props.user.name} + {props.user.name} ); } @@ -37,16 +39,19 @@ function Comment(props) { const comment = { date: new Date(), - text: 'I hope you enjoy learning React!', + text: + 'I hope you enjoy learning React!', author: { name: 'Hello Kitty', - avatarUrl: 'http://placekitten.com/g/64/64' - } + avatarUrl: + 'http://placekitten.com/g/64/64', + }, }; ReactDOM.render( , + author={comment.author} + />, document.getElementById('root') -); \ No newline at end of file +); diff --git a/examples/components-and-props/extracting-components.js b/examples/components-and-props/extracting-components.js index 720624ea..1ad153c3 100644 --- a/examples/components-and-props/extracting-components.js +++ b/examples/components-and-props/extracting-components.js @@ -6,9 +6,11 @@ function Comment(props) { return (
- {props.author.name} + {props.author.name}
{props.author.name}
@@ -25,16 +27,19 @@ function Comment(props) { const comment = { date: new Date(), - text: 'I hope you enjoy learning React!', + text: + 'I hope you enjoy learning React!', author: { name: 'Hello Kitty', - avatarUrl: 'http://placekitten.com/g/64/64' - } + avatarUrl: + 'http://placekitten.com/g/64/64', + }, }; ReactDOM.render( , + author={comment.author} + />, document.getElementById('root') -); \ No newline at end of file +); diff --git a/examples/components-and-props/rendering-a-component.js b/examples/components-and-props/rendering-a-component.js index d42e1681..5458b516 100644 --- a/examples/components-and-props/rendering-a-component.js +++ b/examples/components-and-props/rendering-a-component.js @@ -6,4 +6,4 @@ const element = ; ReactDOM.render( element, document.getElementById('root') -); \ No newline at end of file +); diff --git a/examples/es5-syntax-example.js b/examples/es5-syntax-example.js index 6d1e2033..122f7c39 100644 --- a/examples/es5-syntax-example.js +++ b/examples/es5-syntax-example.js @@ -1,3 +1,5 @@ const element =

Hello, world!

; -const container = document.getElementById('root'); -ReactDOM.render(element, container); \ No newline at end of file +const container = document.getElementById( + 'root' +); +ReactDOM.render(element, container); diff --git a/examples/introducing-jsx.js b/examples/introducing-jsx.js index adb32664..67013fa8 100644 --- a/examples/introducing-jsx.js +++ b/examples/introducing-jsx.js @@ -1,5 +1,7 @@ function formatName(user) { - return user.firstName + ' ' + user.lastName; + return ( + user.firstName + ' ' + user.lastName + ); } const user = { @@ -8,9 +10,7 @@ const user = { }; const element = ( -

- Hello, {formatName(user)}! -

+

Hello, {formatName(user)}!

); ReactDOM.render( diff --git a/examples/jsx-simple-example.js b/examples/jsx-simple-example.js index af770ebc..4fa46d3b 100644 --- a/examples/jsx-simple-example.js +++ b/examples/jsx-simple-example.js @@ -1,3 +1,3 @@ function hello() { return
Hello world!
; -} \ No newline at end of file +} diff --git a/examples/reconciliation/index-used-as-key.js b/examples/reconciliation/index-used-as-key.js index 9d7ff13c..bb4d4284 100644 --- a/examples/reconciliation/index-used-as-key.js +++ b/examples/reconciliation/index-used-as-key.js @@ -1,8 +1,16 @@ -const ToDo = (props) => ( +const ToDo = props => ( - - - + + + + + + + + + ); @@ -14,86 +22,114 @@ class ToDoList extends React.Component { this.state = { todoCounter: todoCounter, list: [ - { id: todoCounter, createdAt: date }, - ] - } + { + id: todoCounter, + createdAt: date, + }, + ], + }; } sortByEarliest() { - const sortedList = this.state.list.sort((a, b) => { - return a.createdAt - b.createdAt; - }); + const sortedList = this.state.list.sort( + (a, b) => { + return ( + a.createdAt - b.createdAt + ); + } + ); this.setState({ - list: [...sortedList] - }) + list: [...sortedList], + }); } sortByLatest() { - const sortedList = this.state.list.sort((a, b) => { - return b.createdAt - a.createdAt; - }); + const sortedList = this.state.list.sort( + (a, b) => { + return ( + b.createdAt - a.createdAt + ); + } + ); this.setState({ - list: [...sortedList] - }) + list: [...sortedList], + }); } addToEnd() { const date = new Date(); - const nextId = this.state.todoCounter + 1; + const nextId = + this.state.todoCounter + 1; const newList = [ ...this.state.list, - { id: nextId, createdAt: date } + {id: nextId, createdAt: date}, ]; this.setState({ list: newList, - todoCounter: nextId + todoCounter: nextId, }); } addToStart() { const date = new Date(); - const nextId = this.state.todoCounter + 1; + const nextId = + this.state.todoCounter + 1; const newList = [ - { id: nextId, createdAt: date }, - ...this.state.list + {id: nextId, createdAt: date}, + ...this.state.list, ]; this.setState({ list: newList, - todoCounter: nextId + todoCounter: nextId, }); } render() { - return( + return (
- key=index
- - - - - + + - { - this.state.list.map((todo, index) => ( + {this.state.list.map( + (todo, index) => ( - )) - } + ) + )}
IDcreated atID + created at
- ) + ); } } diff --git a/examples/reconciliation/no-index-used-as-key.js b/examples/reconciliation/no-index-used-as-key.js index b083118d..04e3ffad 100644 --- a/examples/reconciliation/no-index-used-as-key.js +++ b/examples/reconciliation/no-index-used-as-key.js @@ -1,8 +1,16 @@ -const ToDo = (props) => ( +const ToDo = props => ( - - - + + + + + + + + + ); @@ -13,87 +21,115 @@ class ToDoList extends React.Component { const toDoCounter = 1; this.state = { list: [ - { id: toDoCounter, createdAt: date }, + { + id: toDoCounter, + createdAt: date, + }, ], - toDoCounter: toDoCounter - } + toDoCounter: toDoCounter, + }; } sortByEarliest() { - const sortedList = this.state.list.sort((a, b) => { - return a.createdAt - b.createdAt; - }); + const sortedList = this.state.list.sort( + (a, b) => { + return ( + a.createdAt - b.createdAt + ); + } + ); this.setState({ - list: [...sortedList] - }) + list: [...sortedList], + }); } sortByLatest() { - const sortedList = this.state.list.sort((a, b) => { - return b.createdAt - a.createdAt; - }); + const sortedList = this.state.list.sort( + (a, b) => { + return ( + b.createdAt - a.createdAt + ); + } + ); this.setState({ - list: [...sortedList] - }) + list: [...sortedList], + }); } addToEnd() { const date = new Date(); - const nextId = this.state.toDoCounter + 1; + const nextId = + this.state.toDoCounter + 1; const newList = [ ...this.state.list, - { id: nextId, createdAt: date } + {id: nextId, createdAt: date}, ]; this.setState({ list: newList, - toDoCounter: nextId + toDoCounter: nextId, }); } addToStart() { const date = new Date(); - const nextId = this.state.toDoCounter + 1; + const nextId = + this.state.toDoCounter + 1; const newList = [ - { id: nextId, createdAt: date }, - ...this.state.list + {id: nextId, createdAt: date}, + ...this.state.list, ]; this.setState({ list: newList, - toDoCounter: nextId + toDoCounter: nextId, }); } render() { - return( + return (
- key=id
- - - - - + + - { - this.state.list.map((todo, index) => ( + {this.state.list.map( + (todo, index) => ( - )) - } + ) + )}
IDcreated atID + created at
- ) + ); } } diff --git a/examples/tutorial-expanded-version.js b/examples/tutorial-expanded-version.js index 767a233f..61a7d094 100644 --- a/examples/tutorial-expanded-version.js +++ b/examples/tutorial-expanded-version.js @@ -1,8 +1,10 @@
-

Shopping List for {props.name}

+

+ Shopping List for {props.name} +

  • Instagram
  • WhatsApp
  • Oculus
-
\ No newline at end of file +
; diff --git a/package.json b/package.json index 7ebc70ae..4b551bb2 100644 --- a/package.json +++ b/package.json @@ -79,10 +79,14 @@ "ci-check": "npm-run-all prettier:diff --parallel lint flow", "dev": "gatsby develop -H 0.0.0.0", "flow": "flow", + "format:source": "prettier --config .prettierrc --write \"{gatsby-*.js,{flow-typed,plugins,src}/**/*.js}\"", + "format:examples": "prettier --config .prettierrc.examples --write \"examples/**/*.js\"", "lint": "eslint .", "netlify": "yarn install && yarn build", - "prettier": "prettier --config .prettierrc --write \"{gatsby-*.js,{flow-typed,plugins,src}/**/*.js}\"", - "prettier:diff": "prettier --config .prettierrc --list-different \"{gatsby-*.js,{flow-typed,plugins,src}/**/*.js}\"", + "nit:source": "prettier --config .prettierrc --list-different \"{gatsby-*.js,{flow-typed,plugins,src}/**/*.js}\"", + "nit:examples": "prettier --config .prettierrc.examples --list-different \"examples/**/*.js\"", + "prettier": "yarn format:source && yarn format:examples", + "prettier:diff": "yarn nit:source && yarn nit:examples", "reset": "rimraf ./.cache" }, "devDependencies": {