style: add flow types and linting

clean up the code a little by adding flow-types and some strict eslint rules

.babelrc

@@ -1,5 +1,6 @@
 {
   "presets": [
+    "flow",
     [
       "env",
       {
@@ -12,6 +13,7 @@
   "env": {
     "test": {
       "presets": [
+        "flow",
         "env",
         "react",
         "stage-0"

.flowconfig

@@ -0,0 +1,14 @@
+[ignore]
+.*/node_modules/config-chain/test/broken.json
+<PROJECT_ROOT>/node_modules/fbjs/.*
+
+[include]
+src/*
+
+[libs]
+
+[lints]
+
+[options]
+
+[strict]

package.json

@@ -10,12 +10,14 @@
   "browser": "dist/react-show-more-list.min.js",
   "scripts": {
     "build": "bili --js babel --format cjs,es,umd,umd-min --external react",
-    "prebuild": "yarn test:fast",
+    "prebuild": "yarn test:fast && yarn lint && yarn typecheck",
+    "lint": "eslint src",
+    "typecheck": "yarn flow check",
     "prepush": "yarn test:fast",
     "prepublishOnly": "yarn build",
     "test": "yarn test:fast --ci --colors --silent --coverage",
     "test:fast": "jest --colors",
-    "test:watch": "jest --watch",
+    "test:watch": "yarn flow && jest --watch",
     "cz": "git-cz",
     "travis-deploy-once": "travis-deploy-once",
     "semantic-release": "semantic-release"
@@ -24,6 +26,20 @@
     "type": "git",
     "url": "https://github.com/tedconf/react-show-more.git"
   },
+  "eslintConfig": {
+    "extends": "airbnb",
+    "plugins": [
+      "flowtype"
+    ],
+    "parser": "babel-eslint",
+    "env": {
+      "browser": true
+    },
+    "rules": {
+      "function-paren-newline": 0,
+      "react/jsx-filename-extension": 0
+    }
+  },
   "files": [
     "dist"
   ],
@@ -47,6 +63,7 @@
     "@semantic-release/changelog": "1.0.0",
     "@semantic-release/git": "3.0.0",
     "@semantic-release/npm": "3.0.1",
+    "babel-eslint": "8.2.1",
     "babel-jest": "22.1.0",
     "babel-plugin-external-helpers": "6.22.0",
     "babel-preset-env": "1.6.1",
@@ -61,6 +78,12 @@
     "enzyme": "3.3.0",
     "enzyme-adapter-react-16": "1.1.1",
     "enzyme-to-json": "3.3.1",
+    "eslint": "^4.9.0",
+    "eslint-config-airbnb": "16.1.0",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
+    "eslint-plugin-react": "^7.4.0",
+    "flow-bin": "0.65.0",
     "jest": "22.1.4",
     "raf": "3.4.0",
     "react": "16.2.0",
@@ -102,5 +125,9 @@
       "@semantic-release/npm",
       "@semantic-release/git"
     ]
+  },
+  "dependencies": {
+    "babel-preset-flow": "6.23.0",
+    "eslint-plugin-flowtype": "2.43.0"
   }
 }

src/index.js

@@ -1,35 +1,58 @@
-import { Component } from "react";
+// @flow
+import { Component } from 'react';
+import type { Node } from 'react';
 
-class ShowMore extends Component {
+type ReturnedChildren = {
+  current?: Array<number>,
+  by?: number,
+  all?: Array<any>,
+  onMore?: null | () => void,
+};
+
+export type ShowMoreShape = {
+  by: number,
+  children: (ReturnedChildren) => Node,
+  onEnd: null | () => void,
+  items: Array<any>,
+  replace: boolean
+};
+
+type State = {
+  current: Array<number>,
+};
+
+class ShowMore extends Component<ShowMoreShape, State> {
   static defaultProps = {
     by: 1,
     onEnd: null,
     replace: false,
-    items: []
+    items: [],
   };
 
-  constructor(props) {
+  constructor(props: ShowMoreShape) {
     super(props);
 
     this.state = {
-      current: [0, props.by - 1]
+      current: [0, props.by - 1],
     };
   }
 
-  getNext = () => [
-    this.props.replace ? this.state.current[1] + 1 : 0,
-    this.state.current[1] + this.props.by
-  ];
-
-  onMore = () => {
-    this.setState(state => ({
-      current: this.getNext()
+  onMore = (): void => {
+    this.setState(() => ({
+      current: this.getNext(),
     }));
   };
 
-  getItemsChunk = current => items => items.slice(current[0], current[1] + 1);
+  getNext = (): Array<number> => [
+    this.props.replace ? this.state.current[1] + 1 : 0,
+    this.state.current[1] + this.props.by,
+  ];
+
+  getItemsChunk = (current: Array<number>) => (items: Array<any>): Array<any> => (
+    items.slice(current[0], current[1] + 1)
+  );
 
-  isLastChunk = chunk => {
+  isLastChunk = (chunk: Array<number>): boolean => {
     const { onEnd } = this.props;
     const isLast = chunk[1] >= this.props.items.length - 1;
     if (isLast && typeof onEnd === 'function') {
@@ -38,22 +61,24 @@ class ShowMore extends Component {
     return isLast;
   };
 
-  render() {
-    const onMore = this.onMore;
+  render(): Node {
+    const { onMore } = this;
     const { current } = this.state;
-    const { children, items, by, onEnd } = this.props;
+    const {
+      children,
+      items,
+      by,
+    } = this.props;
 
     const chunk = this.getItemsChunk(current)(items);
 
     const isLastPage = this.isLastChunk(current);
-    if (typeof children === "function") {
+    if (typeof children === 'function') {
       return children({
         current: chunk,
         by,
         all: items,
-        onMore: isLastPage
-          ? null
-          : onMore
+        onMore: isLastPage ? null : onMore,
       });
     }
     return null;

src/index.spec.js

@@ -1,5 +1,7 @@
 /* eslint-env jest */
+/* globals shallow, MOCK */
 
+import React from 'react';
 import ShowMore from './';
 
 describe('<ShowMore /> with defaults', () => {
@@ -39,7 +41,7 @@ describe('<ShowMore /> with defaults', () => {
           </div>
         </React.Fragment>
       )}
-    </ShowMore>
+    </ShowMore>,
   );
 
   test('renders children', () => {
@@ -89,7 +91,6 @@ describe('<ShowMore /> with advanced config', () => {
         current,
         onMore,
         by,
-        onEnd,
         all,
       }) => (
         <React.Fragment>
@@ -114,7 +115,7 @@ describe('<ShowMore /> with advanced config', () => {
           </div>
         </React.Fragment>
       )}
-    </ShowMore>
+    </ShowMore>,
   );
 
   test('renders children', () => {
@@ -150,7 +151,7 @@ describe('<ShowMore /> with advanced config', () => {
 
   test('props:by provides current `by` value', () => {
     const actual = index.find('#by').text();
-    const expected = '4'
+    const expected = '4';
     expect(actual).toBe(expected);
   });
 
@@ -169,7 +170,6 @@ describe('<ShowMore /> with advanced config & \'perfect\' `by` number', () => {
         current,
         onMore,
         by,
-        onEnd,
         all,
       }) => (
         <React.Fragment>
@@ -194,7 +194,7 @@ describe('<ShowMore /> with advanced config & \'perfect\' `by` number', () => {
           </div>
         </React.Fragment>
       )}
-    </ShowMore>
+    </ShowMore>,
   );
 
   test('renders children', () => {
@@ -230,7 +230,7 @@ describe('<ShowMore /> with advanced config & \'perfect\' `by` number', () => {
 
   test('props:by provides current `by` value', () => {
     const actual = index.find('#by').text();
-    const expected = '3'
+    const expected = '3';
     expect(actual).toBe(expected);
   });
 

test-setup.js

@@ -1,4 +1,3 @@
-/* global React, shallow, render, mount */
 const React = require('react');
 const {
   configure,