Merge pull request #331 from bvaughn/prettier-format-examples

Format examples with Prettier too

.prettierrc.examples

@@ -0,0 +1,8 @@
+{
+  "bracketSpacing": false,
+  "jsxBracketSameLine": true,
+  "parser": "flow",
+  "printWidth": 40,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

examples/components-and-props/extracting-components-continued.js

@@ -4,9 +4,11 @@ function formatDate(date) {
 
 function Avatar(props) {
   return (
-    <img className="Avatar"
+    <img
+      className="Avatar"
       src={props.user.avatarUrl}
-         alt={props.user.name} />
+      alt={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(
   <Comment
     date={comment.date}
     text={comment.text}
-    author={comment.author} />,
+    author={comment.author}
+  />,
   document.getElementById('root')
 );

examples/components-and-props/extracting-components.js

@@ -6,9 +6,11 @@ function Comment(props) {
   return (
     <div className="Comment">
       <div className="UserInfo">
-        <img className="Avatar"
+        <img
+          className="Avatar"
           src={props.author.avatarUrl}
-             alt={props.author.name} />
+          alt={props.author.name}
+        />
         <div className="UserInfo-name">
           {props.author.name}
         </div>
@@ -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(
   <Comment
     date={comment.date}
     text={comment.text}
-    author={comment.author} />,
+    author={comment.author}
+  />,
   document.getElementById('root')
 );

examples/es5-syntax-example.js

@@ -1,3 +1,5 @@
 const element = <h1>Hello, world!</h1>;
-const container = document.getElementById('root');
+const container = document.getElementById(
+  'root'
+);
 ReactDOM.render(element, container);

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 = (
-  <h1>
-    Hello, {formatName(user)}!
-  </h1>
+  <h1>Hello, {formatName(user)}!</h1>
 );
 
 ReactDOM.render(

examples/reconciliation/index-used-as-key.js

@@ -1,8 +1,16 @@
-const ToDo = (props) => (
+const ToDo = props => (
   <tr>
-    <td><label>{props.id}</label></td>
-    <td><input/></td>
-    <td><label>{props.createdAt.toTimeString()}</label></td>
+    <td>
+      <label>{props.id}</label>
+    </td>
+    <td>
+      <input />
+    </td>
+    <td>
+      <label>
+        {props.createdAt.toTimeString()}
+      </label>
+    </td>
   </tr>
 );
 
@@ -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
+      ...this.state.list,
     ];
     this.setState({
       list: newList,
-      todoCounter: nextId
+      todoCounter: nextId,
     });
   }
 
   render() {
     return (
       <div>
-        <code>key=index</code><br/>
-        <button onClick={this.addToStart.bind(this)}>
+        <code>key=index</code>
+        <br />
+        <button
+          onClick={this.addToStart.bind(
+            this
+          )}>
           Add New to Start
         </button>
-        <button onClick={this.addToEnd.bind(this)}>
+        <button
+          onClick={this.addToEnd.bind(
+            this
+          )}>
           Add New to End
         </button>
-        <button onClick={this.sortByEarliest.bind(this)}>
+        <button
+          onClick={this.sortByEarliest.bind(
+            this
+          )}>
           Sort by Earliest
         </button>
-        <button onClick={this.sortByLatest.bind(this)}>
+        <button
+          onClick={this.sortByLatest.bind(
+            this
+          )}>
           Sort by Latest
         </button>
         <table>
           <tr>
-            <th>ID</th><th></th><th>created at</th>
+            <th>ID</th>
+            <th />
+            <th>created at</th>
           </tr>
-          {
-            this.state.list.map((todo, index) => (
+          {this.state.list.map(
+            (todo, index) => (
               <ToDo
                 key={index}
                 {...todo}
               />
-            ))
-          }
+            )
+          )}
         </table>
       </div>
-    )
+    );
   }
 }
 

examples/reconciliation/no-index-used-as-key.js

@@ -1,8 +1,16 @@
-const ToDo = (props) => (
+const ToDo = props => (
   <tr>
-    <td><label>{props.id}</label></td>
-    <td><input/></td>
-    <td><label>{props.createdAt.toTimeString()}</label></td>
+    <td>
+      <label>{props.id}</label>
+    </td>
+    <td>
+      <input />
+    </td>
+    <td>
+      <label>
+        {props.createdAt.toTimeString()}
+      </label>
+    </td>
   </tr>
 );
 
@@ -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
+      ...this.state.list,
     ];
     this.setState({
       list: newList,
-      toDoCounter: nextId
+      toDoCounter: nextId,
     });
   }
 
   render() {
     return (
       <div>
-        <code>key=id</code><br/>
-        <button onClick={this.addToStart.bind(this)}>
+        <code>key=id</code>
+        <br />
+        <button
+          onClick={this.addToStart.bind(
+            this
+          )}>
           Add New to Start
         </button>
-        <button onClick={this.addToEnd.bind(this)}>
+        <button
+          onClick={this.addToEnd.bind(
+            this
+          )}>
           Add New to End
         </button>
-        <button onClick={this.sortByEarliest.bind(this)}>
+        <button
+          onClick={this.sortByEarliest.bind(
+            this
+          )}>
           Sort by Earliest
         </button>
-        <button onClick={this.sortByLatest.bind(this)}>
+        <button
+          onClick={this.sortByLatest.bind(
+            this
+          )}>
           Sort by Latest
         </button>
         <table>
           <tr>
-            <th>ID</th><th></th><th>created at</th>
+            <th>ID</th>
+            <th />
+            <th>created at</th>
           </tr>
-          {
-            this.state.list.map((todo, index) => (
+          {this.state.list.map(
+            (todo, index) => (
               <ToDo
                 key={todo.id}
                 {...todo}
               />
-            ))
-          }
+            )
+          )}
         </table>
       </div>
-    )
+    );
   }
 }
 

examples/tutorial-expanded-version.js

@@ -1,8 +1,10 @@
 <div className="shopping-list">
-  <h1>Shopping List for {props.name}</h1>
+  <h1>
+    Shopping List for {props.name}
+  </h1>
   <ul>
     <li>Instagram</li>
     <li>WhatsApp</li>
     <li>Oculus</li>
   </ul>
-</div>
+</div>;

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": {