chore(eslint): Correct code to respect eslint rules

.eslintrc

@@ -29,6 +29,7 @@
     "plugin:import/warnings"
   ],
   "rules": {
+    "react/prop-types": [2, { "ignore": ["children", "route", "previousRoute"] }],
     // Possible Errors
     "no-dupe-args": 2,
     "no-dupe-keys": 2,
@@ -50,7 +51,7 @@
     "no-unused-vars": [2, { "args": "none" }],
     "no-use-before-define": 0,
     // Style
-    "brace-style": [2, "1tbs"],
+    "brace-style": [1, "stroustrup"],
     "comma-spacing": [2, {"before": false, "after": true}],
     "comma-style": [2, "last"],
     "consistent-this":  [2, "that"],
@@ -64,6 +65,6 @@
     // ES6
     "no-var": 2,
     "no-this-before-super": 2,
-    "object-shorthand": 2
+    "object-shorthand": 0
   }
 }

src/modules/BaseLink.js

@@ -1,9 +1,9 @@
-import React, {Component} from "react";
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import {ifNot} from "./utils";
+import { ifNot } from './utils';
 
 // TODO
-const storeName='routerStore';
+const storeName = 'routerStore';
 
 /**
  * BaseLink component: it generates an anchor tag with href computed from props.routeName.
@@ -33,7 +33,7 @@ class BaseLink extends Component {
 
     // Get the router instance from the props (when explicitly passed) or from routerStore
     // It is passed to props for example when using withRoute wrapper
-    this.routerStore = props.routerStore;
+    this.routerStore = props[storeName];
     if (this.routerStore) {
       this.router = this.routerStore.router || null;
     }
@@ -86,11 +86,11 @@ class BaseLink extends Component {
   }
 
   render() {
-    const {routeName, routeParams, className } = this.props;
+    const {routeName, routeParams, className} = this.props;
 
     const href = this.buildUrl(routeName, routeParams);
     const onClick = this.clickHandler;
-    return React.createElement('a', { href: href, className: className, onClick: onClick}, this.props.children);
+    return React.createElement('a', {href: href, className: className, onClick: onClick}, this.props.children);
   }
 }
 
@@ -103,13 +103,14 @@ BaseLink.defaultProps = {
 
 BaseLink.propTypes = {
   // Defaults
-  routeOptions:     PropTypes.object,
-  routeParams:      PropTypes.object,
+  routeOptions: PropTypes.object,
+  routeParams: PropTypes.object,
   // Optional
-  router:           PropTypes.object, // when we don't pass/inject the routerStore then we need the router
-  routeName:        PropTypes.string, // not required because of onClick  could be passed instead
-  onClick:          PropTypes.func,
-  className:        PropTypes.string  // could be passed directly or forwarded (computed) from withRoute/withLink
+  router: PropTypes.object, // when we don't pass/inject the routerStore then we need the router
+  routeName: PropTypes.string, // not required because of onClick  could be passed instead
+  onClick: PropTypes.func,
+  className: PropTypes.string,  // could be passed directly or forwarded (computed) from withRoute/withLink
+  children: PropTypes.node
 };
 
 // If used withRoute or withLink (Optional)

src/modules/routeNode.js

@@ -1,11 +1,11 @@
-import React, { Component, createElement} from 'react';
+import { Component, createElement } from 'react';
 import PropTypes from 'prop-types';
-import { getDisplayName, ifNot} from './utils';
+import { getDisplayName, ifNot } from './utils';
 import { autorun } from 'mobx';
 import { inject } from 'mobx-react';
 
 
-function routeNode(nodeName, storeName='routerStore') { // route node Name, routerStore name
+function routeNode(nodeName, storeName = 'routerStore') { // route node Name, routerStore name
   return function routeNodeWrapper(RouteSegment) { // component Name
 
     @inject(storeName)
@@ -46,7 +46,7 @@ function routeNode(nodeName, storeName='routerStore') { // route node Name, rout
 
       // re-render this component and so the route-node (wrapped component)
       // only if it is the correct "transition node"
-      shouldComponentUpdate (newProps, newState) {
+      shouldComponentUpdate(newProps, newState) {
         return (newState.intersectionNode === nodeName);
       }
 

src/modules/utils.js

@@ -50,14 +50,14 @@ export function getComponent(route, routeNodeName, routesConfig) {
         if (currentLevel >= routeNodeLevel) {
           if (currentRoute.component) {
             // first found segment one level deeper than the routeNodeLevel
-            return currentRoute.component
+            return currentRoute.component;
           }
           throw new Error('route segment does not have a component field');
         }
         else {
           if (currentRoute.children) {
             currentLevel += 1;
-            return findComponent(currentRoute.children)
+            return findComponent(currentRoute.children);
           }
           break;
         }

src/modules/withLink.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 import PropTypes from 'prop-types';
 import BaseLink from './BaseLink';
 import withRoute from './withRoute';
@@ -34,7 +34,7 @@ function withLink(BaseComponent, storeName='routerStore') {
           {props.children}
         </BaseLink>
       </BaseComponent>
-    )
+    );
   }
 
   // All props passed from ComponentWithRoute
@@ -49,6 +49,7 @@ function withLink(BaseComponent, storeName='routerStore') {
     linkClassName:    PropTypes.string,
     onClick:          PropTypes.func,
     routeName:        PropTypes.string,
+    children: PropTypes.node,
     // Computed, injected to it
     className:        PropTypes.string
   };

src/modules/withRoute.js

@@ -1,7 +1,7 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
-import {ifNot, getDisplayName} from './utils';
+import { ifNot, getDisplayName } from './utils';
 
 
 /**
@@ -11,32 +11,32 @@ import {ifNot, getDisplayName} from './utils';
  * @param storeName - the mobx-router5 store instance name. Default 'routerStore'
  * @returns {ComponentWithRoute}
  */
-function withRoute(BaseComponent, storeName='routerStore') {
-
- /**
-  * Wrapper ComponentWithRoute around the BaseComponent
-  *
-  * The wrapper is injected with the mobx routerStore and decorated with @observer
-  * Notice that @inject will also create another wrapper around the ComponentWithRoute
-  *
-  * The component accepts all the props normally accepted by the BaseLink component and will forward them down to the wrapped component.
-  * If a linkClassName is passed then it will be passed down and used by the children only when the BaseComponent is created with `withLink` HOC.
-  * NOTE: the routerStore will be injected into the ComponentWithRoute.props, so it will also forwarded down to the wrapped component
-  *
-  * Any route changes will trigger a rendering of ComponentWithRoute.
-  * Also the wrapped BaseComponent and children will re-render because passing 3 extra changing props to it (apart from this.props):
-  *   - route: the mobx observable routerStore.route, used to trigger a re-rendering of the BaseComponent when the route changes
-  *   - previousRoute: the mobx observable routerStore.previousRoute, same as above
-  *   - className: if a prop `routeName` is passed to ComponentWithRoute then it adds an `active` className to the original className when routeName==routerStore.route
-  *
-  */
+function withRoute(BaseComponent, storeName = 'routerStore') {
+
+  /**
+   * Wrapper ComponentWithRoute around the BaseComponent
+   *
+   * The wrapper is injected with the mobx routerStore and decorated with @observer
+   * Notice that @inject will also create another wrapper around the ComponentWithRoute
+   *
+   * The component accepts all the props normally accepted by the BaseLink component and will forward them down to the wrapped component.
+   * If a linkClassName is passed then it will be passed down and used by the children only when the BaseComponent is created with `withLink` HOC.
+   * NOTE: the routerStore will be injected into the ComponentWithRoute.props, so it will also forwarded down to the wrapped component
+   *
+   * Any route changes will trigger a rendering of ComponentWithRoute.
+   * Also the wrapped BaseComponent and children will re-render because passing 3 extra changing props to it (apart from this.props):
+   *   - route: the mobx observable routerStore.route, used to trigger a re-rendering of the BaseComponent when the route changes
+   *   - previousRoute: the mobx observable routerStore.previousRoute, same as above
+   *   - className: if a prop `routeName` is passed to ComponentWithRoute then it adds an `active` className to the original className when routeName==routerStore.route
+   *
+   */
   @inject(storeName)
   @observer
   class ComponentWithRoute extends Component {
 
     static computeClassName(className, activeClassName, isActive) {
       return (className ? className.split(' ') : [])
-        .concat(isActive ? [activeClassName] : []).join(' ');
+      .concat(isActive ? [activeClassName] : []).join(' ');
     }
 
     constructor(props) {
@@ -66,7 +66,7 @@ function withRoute(BaseComponent, storeName='routerStore') {
         '[react-mobx-router5][withRoute] prop names `route` and `previousRoute` are reserved.'
       );
 
-      const {activeClassName, activeStrict, routeOptions, routeParams, linkClassName, onClick, routeName, className } = this.props;
+      const { activeClassName, activeStrict, routeOptions, routeParams, linkClassName, onClick, routeName, className } = this.props;
 
       let currentClassName = className || '';
       if (routeName) {
@@ -75,7 +75,7 @@ function withRoute(BaseComponent, storeName='routerStore') {
       }
 
       // De-referencing a mobx-observable will trigger a re-rendering (because of the @observer)
-      const {route, previousRoute}  = this.routerStore;
+      const { route, previousRoute } = this.routerStore;
       const newProps = {
         // Props Extra injected
         routerStore: this.routerStore,
@@ -96,7 +96,7 @@ function withRoute(BaseComponent, storeName='routerStore') {
         <BaseComponent {...newProps} >
           {this.props.children}
         </BaseComponent>
-      )
+      );
     }
   }
 
@@ -111,15 +111,16 @@ function withRoute(BaseComponent, storeName='routerStore') {
 
   ComponentWithRoute.propTypes = {
     // Defaults
-    activeClassName:  PropTypes.string,
-    activeStrict:     PropTypes.bool,
-    routeOptions:     PropTypes.object,
-    routeParams:      PropTypes.object,
+    activeClassName: PropTypes.string,
+    activeStrict: PropTypes.bool,
+    routeOptions: PropTypes.object,
+    routeParams: PropTypes.object,
     // Optional
-    linkClassName:    PropTypes.string,
-    onClick:          PropTypes.func,
-    routeName:        PropTypes.string,
-    className:        PropTypes.string
+    linkClassName: PropTypes.string,
+    onClick: PropTypes.func,
+    routeName: PropTypes.string,
+    className: PropTypes.string,
+    children: PropTypes.node
   };
 
   // Because @inject creates an extra HOC