Merge pull request #42 from styfle/prettier

Prettier

Author: styfle

.prettierrc.json

@@ -0,0 +1,13 @@
+{
+    "parser": "typescript",
+    "printWidth": 100,
+    "tabWidth": 4,
+    "useTabs": false,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "all",
+    "bracketSpacing": true,
+    "jsxBracketSameLine": false,
+    "arrowParens": "avoid",
+    "proseWrap": "never"
+}

package-lock.json

@@ -8,6 +8,9 @@
     "start": "node dist/server.js",
     "build": "webpack",
     "watch": "webpack --watch",
+    "prettier": "prettier \"./src/**/*.ts\" \"./src/**/*.tsx\"" ,
+    "prettier:check": "npm run prettier -- --list-different",
+    "prettier:write": "npm run prettier -- --write",
     "test": "tsc --outDir . --sourceMap false && tape tests/**/*.js",
     "release": "npm version patch && git push --follow-tags && npm publish"
   },
@@ -22,6 +25,7 @@
     "@types/react-dom": "^16.0.3",
     "@types/tape": "^4.2.31",
     "awesome-typescript-loader": "^3.4.1",
+    "prettier": "1.10.2",
     "source-map-loader": "^0.2.3",
     "tape": "^4.8.0",
     "typescript": "^2.6.2",

package.json

@@ -6,7 +6,7 @@ import { propsUrl, containerId } from './constants';
 fetch(propsUrl)
     .then(o => o.json())
     .then((props: AppProps) => {
-        const app = (<App {...props} />);
+        const app = <App {...props} />;
         const el = document.getElementById(containerId);
         hydrate(app, el);
     });

src/browser.tsx

@@ -6,7 +6,7 @@ import Main from './main';
 import Menu from './menu';
 
 interface AppState {
-    listItems: string[],
+    listItems: string[];
     disabled: boolean;
 }
 
@@ -28,46 +28,41 @@ export default class App extends React.Component<AppProps, AppState> {
     // the list - imagine this being updated with the results of AJAX calls, etc
     handleAdd = () => {
         this.setState(prevState => ({
-            listItems: prevState.listItems.concat('Item ' + prevState.listItems.length)
+            listItems: prevState.listItems.concat('Item ' + prevState.listItems.length),
         }));
-    }
-    
+    };
+
     handleSort = () => {
         this.setState(prevState => ({
-            listItems: prevState.listItems.sort()
+            listItems: prevState.listItems.sort(),
         }));
-    }
-    
+    };
+
     render() {
         const { menuItems } = this.props;
         const { listItems, disabled } = this.state;
 
-        return (<div>
-            <Menu items={menuItems} />
-            <Main>
-                <Header
-                    title="Hello React"
-                    sub="This is an example using React & TypeScript"
-                />
-                <ul>
-                    {listItems.map((item, i) =>
-                        <li key={i}>{item}</li>
-                    )}
-                </ul>
-                <Button
-                    onClick={this.handleAdd}
-                    disabled={disabled}
-                    type="primary"
-                    text="Add Item"
-                />
-                <span>&nbsp;</span>
-                <Button
-                    onClick={this.handleSort}
-                    disabled={disabled}
-                    type="warning"
-                    text="Sort Items"
-                />
-            </Main>
-        </div>);
+        return (
+            <div>
+                <Menu items={menuItems} />
+                <Main>
+                    <Header title="Hello React" sub="This is an example using React & TypeScript" />
+                    <ul>{listItems.map((item, i) => <li key={i}>{item}</li>)}</ul>
+                    <Button
+                        onClick={this.handleAdd}
+                        disabled={disabled}
+                        type="primary"
+                        text="Add Item"
+                    />
+                    <span>&nbsp;</span>
+                    <Button
+                        onClick={this.handleSort}
+                        disabled={disabled}
+                        type="warning"
+                        text="Sort Items"
+                    />
+                </Main>
+            </div>
+        );
     }
-}
+}

src/components/app.tsx

@@ -7,13 +7,17 @@ interface ButtonProps {
     onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
-export default function Button (props: ButtonProps) {
+export default function Button(props: ButtonProps) {
     const { type, text, disabled, onClick } = props;
 
-    return (<button type="button"
-        onClick={onClick}
-        disabled={disabled || false}
-        className={'btn btn-' + type}>
-        {text}
-    </button>);
-}
+    return (
+        <button
+            type="button"
+            onClick={onClick}
+            disabled={disabled || false}
+            className={'btn btn-' + type}
+        >
+            {text}
+        </button>
+    );
+}

src/components/button.tsx

@@ -7,8 +7,10 @@ interface Props {
 
 export default function Header(props: Props) {
     const { title, sub } = props;
-    return (<header role="banner">
-        <h1>{title}</h1>
-        <p>{sub}</p>
-    </header>);
-}
+    return (
+        <header role="banner">
+            <h1>{title}</h1>
+            <p>{sub}</p>
+        </header>
+    );
+}

src/components/header.tsx

@@ -3,6 +3,8 @@ import * as React from 'react';
 export default function Main(props: { children: React.ReactNode[] }) {
     const { children } = props;
     return (
-        <div role="main" className="container">{children}</div>
+        <div role="main" className="container">
+            {children}
+        </div>
     );
-}
+}

src/components/main.tsx

@@ -1,6 +1,12 @@
 import * as React from 'react';
 
-export default function MenuItem (props: MenuItemProps) {
+export default function MenuItem(props: MenuItemProps) {
     const { id, href, text } = props;
-    return (<li><a id={id} href={href}>{text}</a></li>);
-}
+    return (
+        <li>
+            <a id={id} href={href}>
+                {text}
+            </a>
+        </li>
+    );
+}

src/components/menu-item.tsx

@@ -11,13 +11,9 @@ export default function Menu(props: Props) {
         <nav className="navbar navbar-default">
             <div className="container">
                 <ul className="nav navbar-nav">
-                {items.map( (o,i) => 
-                    <MenuItem
-                        key={o.id}
-                        id={o.id}
-                        text={o.text}
-                        href={o.href} />
-                )}
+                    {items.map((o, i) => (
+                        <MenuItem key={o.id} id={o.id} text={o.text} href={o.href} />
+                    ))}
                 </ul>
             </div>
         </nav>