Adds react library configuration.

Author: ctrlplusb

.babelrc

@@ -1,23 +1,22 @@
 {
   "presets": [
     ["env", { "targets": { "node": true } }],
-    "stage-3"
-  ],
-  "plugins": [
-    "syntax-flow",
-    "transform-flow-strip-types"
+    "stage-3",
+    "react"
   ],
   "env": {
     "commonjs": {
       "presets": [
         "latest",
-        "stage-3"
+        "stage-3",
+        "react"
       ],
     },
     "umd": {
       "presets": [
         ["latest", { "es2015": { "modules": false } }],
-        "stage-3"
+        "stage-3",
+        "react"
       ],
     }
   }

package.json

@@ -35,27 +35,32 @@
     "test:coverage": "yarn run test -- --coverage",
     "test:coverage:deploy": "yarn run coverage && codecov"
   },
+  "peerDependencies": {
+    "react": ">=15.0.0"
+  },
   "devDependencies": {
     "app-root-dir": "1.0.2",
     "babel-cli": "6.18.0",
     "babel-core": "6.21.0",
     "babel-eslint": "7.1.1",
     "babel-jest": "18.0.0",
     "babel-loader": "6.2.10",
-    "babel-plugin-syntax-flow": "6.18.0",
-    "babel-plugin-transform-flow-strip-types": "6.21.0",
     "babel-polyfill": "6.20.0",
     "babel-preset-env": "1.1.4",
     "babel-preset-latest": "6.16.0",
+    "babel-preset-react": "^6.16.0",
     "babel-preset-stage-3": "6.17.0",
     "babel-register": "6.18.0",
     "codecov": "1.0.1",
     "cross-env": "3.1.3",
+    "enzyme": "^2.7.0",
+    "enzyme-to-json": "^1.4.5",
     "eslint": "3.12.2",
     "eslint-config-airbnb": "13.0.0",
     "eslint-plugin-flowtype": "2.29.2",
     "eslint-plugin-import": "2.2.0",
     "eslint-plugin-jsx-a11y": "2.2.3",
+    "eslint-plugin-react": "^6.8.0",
     "flow-bin": "0.37.4",
     "flow-coverage-report": "^0.2.0",
     "flow-typed": "^2.0.0",
@@ -65,8 +70,12 @@
     "jest": "18.1.0",
     "pretty-bytes": "4.0.2",
     "ramda": "0.23.0",
+    "react": "^15.4.1",
+    "react-addons-test-utils": "^15.4.1",
+    "react-dom": "^15.4.1",
     "readline-sync": "1.4.5",
     "rimraf": "2.5.4",
+    "sinon": "^1.17.7",
     "webpack": "2.2.0-rc.3",
     "webpack-dev-middleware": "1.9.0",
     "webpack-hot-middleware": "2.14.0"
@@ -80,6 +89,9 @@
     "collectCoverageFrom": [
       "src/**/*.{js,jsx}"
     ],
+    "snapshotSerializers": [
+      "<rootDir>/node_modules/enzyme-to-json/serializer"
+    ],
     "testPathIgnorePatterns": [
       "<rootDir>/(commonjs|coverage|flow-typed|node_modules|tools|umd)/"
     ]

src/MyComponent.js

@@ -0,0 +1,14 @@
+/* @flow */
+
+import React, { PropTypes } from 'react';
+
+// $FlowFixMe - using propTypes
+function MyComponent({ msg }) {
+  return <h1>{msg}</h1>;
+}
+
+MyComponent.propTypes = {
+  msg: PropTypes.string.isRequired,
+};
+
+export default MyComponent;

src/index.js

@@ -2,8 +2,10 @@
 
 import helloWorld from './helloWorld';
 import goodbyeWorld from './goodbyeWorld';
+import MyComponent from './MyComponent';
 
 export {
   helloWorld,
   goodbyeWorld,
+  MyComponent,
 };

test/.eslintrc

@@ -1,5 +1,6 @@
 {
   "rules": {
-    "import/no-extraneous-dependencies": 0
+    "import/no-extraneous-dependencies": 0,
+    "no-console": 0
   }
 }

test/MyComponent.test.js

@@ -0,0 +1,15 @@
+/* @flow */
+
+import React from 'react';
+import MyComponent from '../src/MyComponent';
+import describeComponent from './__helpers__/describeComponent';
+
+describeComponent('MyComponent', () => {
+  it('renders', () => {
+    expect(<MyComponent msg="foo" />).toMatchSnapshot();
+  });
+
+  it('propTypes', () => {
+    expect(() => <MyComponent />).toThrowError('Failed prop type');
+  });
+});

test/__helpers__/describeComponent.js

@@ -0,0 +1,19 @@
+/* @flow */
+
+import sinon from 'sinon';
+
+export default function describeComponent(desc : string, body : Function) {
+  describe(desc, () => {
+    // Since react will console.error propType warnings, that which we'd rather have
+    // as errors, we use sinon.js to stub it into throwing these warning as errors
+    // instead.
+    beforeAll(() => {
+      sinon.stub(console, 'error', (warning) => { throw new Error(warning); });
+    });
+
+    // While not forgetting to restore it afterwards
+    afterAll(() => { console.error.restore(); });
+
+    body();
+  });
+}

test/__snapshots__/MyComponent.test.js.snap

@@ -0,0 +1,4 @@
+exports[`MyComponent renders 1`] = `
+<MyComponent
+  msg="foo" />
+`;

tools/webpack/configFactory.js

@@ -25,6 +25,12 @@ function webpackConfigFactory({ target } : Args) {
       library: libraryName,
       libraryTarget: 'umd',
     },
+    externals: {
+      react: {
+        root: 'React',
+        umd: 'react',
+      },
+    },
     plugins: removeEmpty([
       new webpack.DefinePlugin({
         'process.env.NODE_ENV': JSON.stringify('production'),