Add flow-type into the Stack

.babelrc

@@ -1,5 +1,5 @@
 {
-  "presets": ["es2015-node6", "stage-1", "react"],
+  "presets": ["es2015-node6", "stage-1", "react", "flow"],
   "plugins": [
     "transform-decorators-legacy",
     "add-module-exports",

.flowconfig

@@ -0,0 +1,16 @@
+[ignore]
+.*/node_modules/fbjs/*
+
+
+[include]
+./src/browser/App.react.js
+
+[libs]
+
+[options]
+module.ignore_non_literal_requires=true
+esproposal.class_instance_fields=enable
+esproposal.class_static_fields=enable
+esproposal.decorators=ignore
+esproposal.export_star_as=enable
+strip_root=true

flow-typed/declarations.js

@@ -0,0 +1,10 @@
+/*
+  If Flow throws "Required module not found", altough module is not missing,
+  add new "declare module" statement here for that library.
+*/
+
+declare module 'react-helmet' {
+  declare module.exports: any;
+}
+
+declare var webpackIsomorphicTools: Object;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "Haystack",
   "description": "Blueberry JS stack",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": true,
   "engines": {
     "node": ">=6.9",
@@ -16,7 +16,7 @@
     "production": "yarn run production:build && yarn rollbar:sourcemaps:upload && yarn run production:server",
     "eslint": "eslint ./src",
     "jest": " jest",
-    "test": "jest",
+    "test": "flow && jest",
     "test:watch": "jest --watch",
     "webpack": "rimraf ./dist && webpack --config ./webpack/webpack.config.js",
     "rollbar:sourcemaps:upload": "node scripts/rollbarSourceMaps.js"
@@ -29,7 +29,9 @@
     "TondaHack"
   ],
   "devDependencies": {
+    "babel-cli": "^6.24.0",
     "babel-eslint": "^7.1.1",
+    "babel-preset-flow": "^6.23.0",
     "chokidar": "^1.6.1",
     "enzyme": "^2.7.0",
     "enzyme-to-json": "^1.4.5",
@@ -38,6 +40,7 @@
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^3.0.2",
     "eslint-plugin-react": "^6.9.0",
+    "flow-bin": "^0.42.0",
     "jest": "^18.1.0",
     "react-addons-test-utils": "^15.4.2"
   },

src/browser/App.react.js

@@ -1,11 +1,12 @@
+// @flow
 import Helmet from 'react-helmet';
 import React from 'react';
 import logo from '../../assets/images/haystack_logo.png';
 
 const App = () => (
   <div>
     <Helmet title="Haystack" />
-    <button onClick={e => window.console.log(e)}>
+    <button onClick={(e: Event) => window.console.log(e)}>
       Haystack
       <img alt="logo" src={logo} />
     </button>

src/browser/BrowserProvider.react.js

@@ -1,3 +1,4 @@
-const BrowserProvider = ({ children }) => children;
+// @flow
 
+const BrowserProvider = ({ children } : Object) : Object => children;
 export default BrowserProvider;

src/browser/main.js

@@ -1,19 +1,24 @@
+// @flow
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App.react';
 import BrowserProvider from './BrowserProvider.react';
 
+type Module = {
+      hot: { accept: (Component: Function, callback: (updatedComponent: Function) => void) => void }
+  } | Object;
+
 const renderApp = () => {
   ReactDOM.render(
     <BrowserProvider>
       <App />
     </BrowserProvider>,
-    window.document.getElementById('app')
+    window.document.getElementById('app'),
   );
 };
 
 if (module && module.hot && module.hot.accept) {
-  module.hot.accept(App, renderApp);
+  (module: Module).hot.accept(App, renderApp);
 }
 
 renderApp();

src/server/frontend/Html.react.js

@@ -1,9 +1,28 @@
-/* eslint-disable react/no-danger */
+// @flow
+/* eslint-disable react/no-danger  */
+/* eslint-disable react/no-unused-prop-types */
 import React, { PropTypes as RPT } from 'react';
+import type { Helmet } from 'react-helmet';
 import Rollbar from './scripts/Rollbar';
 import Script from './Script.react';
 
-const Html = ({ bodyHtml, javascripts = {}, helmet, options }) => (
+export type Options = {
+  disableJS?: boolean
+}
+
+type Javascripts = {
+  vendor?: string,
+  app?: string
+}
+
+type HtmlProps = {
+  bodyHtml: string,
+  javascripts: Javascripts,
+  helmet: Helmet,
+  options: Options
+}
+
+const Html = ({ bodyHtml, javascripts = {}, helmet, options }: HtmlProps) => (
   <html lang="en">
     <head>
       <meta charSet="utf-8" />

src/server/frontend/Script.react.js

@@ -1,9 +1,12 @@
+// @flow
 import React, { PropTypes as RPT } from 'react';
 
-const Script = ({ src }) => (<script src={src} type="text/javascript" />);
+const Script = (props: { src: string }) => (
+  <script src={props.src} type="text/javascript" />
+);
 
 Script.propTypes = {
-  src: RPT.string.isRequired
+  src: RPT.string.isRequired,
 };
 
 export default Script;

src/server/frontend/errors/NotFound.react.js

@@ -1,14 +1,15 @@
+// @flow
 import React, { PropTypes as RPT } from 'react';
 
-const NotFound = ({ path }) => (
+const NotFound = ({ path }: { path: string }) => (
   <div>
     <h1>404: Needle ({path}) not found in Haystack :(</h1>
     You can redirect to <a href="/">home</a>.
   </div>
 );
 
 NotFound.propTypes = {
-  path: RPT.string.isRequired
+  path: RPT.string.isRequired,
 };
 
 export default NotFound;

src/server/frontend/index.js

@@ -1,4 +1,6 @@
+// @flow
 import express from 'express';
+import type { Express, $Request, $Response } from 'express';
 import path from 'path';
 import PrettyError from 'pretty-error';
 import React from 'react';
@@ -7,12 +9,12 @@ import NotFound from './errors/NotFound.react';
 import App from '../../browser/App.react';
 import render from './render';
 
-const app = express();
+const app: Express = express();
 const prettyError = new PrettyError();
 
 app.use('/assets', express.static(path.join(__dirname, '..', '..', '..', 'dist', 'public', 'assets')));
 
-app.get('*', (req, res, next) => {
+app.get('*', (req: $Request, res: $Response, next: Function) => {
   try {
     if (req.path === '/unknown') {
       return res.status(404).send(render(<NotFound path={req.path} />));
@@ -24,7 +26,7 @@ app.get('*', (req, res, next) => {
 });
 
 // Internal server error handled by nice formatted HTML
-app.use((err, req, res, next) => {
+app.use((err: Error, req: $Request, res: $Response, next: Function) => {
   console.error('Internal server error at %s', req.path);
   console.error(prettyError.render(err));
 

src/server/frontend/render.js

@@ -1,10 +1,12 @@
+// @flow
 import Helmet from 'react-helmet';
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import Html from './Html.react';
 import ServerProvider from './ServerProvider.react';
+import type { Options } from './Html.react';
 
-export default function render(app, options = {}) {
+export default function render(app : Object, options : Options = {}) {
   const appHtml = ReactDOMServer.renderToString(<ServerProvider>{app}</ServerProvider>);
 
   const { javascript: javascripts } = webpackIsomorphicTools.assets();