feat: improve Router

Author: streamich

README.md

@@ -32,7 +32,7 @@ const MyComponent = mock();
   - [Dummies](./docs/Dummies.md)
      - [`mock()`](./docs/mock.md) and [`loadable()`](./docs/loadable.md)
      - [`lazy()`](./docs/lazy.md), [`delayed()`](./docs/delayed.md), and [`viewport()`](./docs/viewport.md)
-  - [Inversion](./docs/inversion.md)
+  - [Inversion](./docs/Inversion.md)
      - [`invert()`](./docs/invert.md) and [`<Inverted>`](./docs/invert.md#inverted)
      - [`<State>`](./docs/State.md) and [`withState()`](./docs/State.md#withstate-hoc)
         - [`<Toggle>`](./docs/Toggle.md), [`withToggle()`](./docs/Toggle.md#withtoggle-hoc), and [`@withToggle`](./docs/Toggle.md#withtoggle-decorator)

docs/Introduction.md

@@ -3,7 +3,12 @@
 `libreact` is a collection of most essential React utilities you will probably need in any project.
 
 [Render prop](#render-props) and [FaCC](#facc) notation is usually used interchangeably as most `libreact`
-components support both interfaces.
+components support both interfaces. Also, most render prop components support
+[component prop](#component-prop) interface, with the following precedence:
+
+  1. FaCC
+  2. Render prop
+  3. Component prop
 
 
 ## Render props
@@ -55,11 +60,25 @@ h(MouseSensor, null, ({posX, posY}) => h('div')})
 ```
 
 
+## Component prop
+
+*Component prop* is when a component expects a `component` or `comp` prop that is
+itself a component.
+
+```jsx
+<Route match='/home' comp={Home} />
+<Route match='/user' component={User} />
+```
+
+`libreact` supports both ways of component prop (`comp` and `component`). Normally, when a component has a
+render prop interface it will also support the component prop interface.
+
+
 ## HOC
 
 HOC or *Higher Order Component* is a function that receives AND/OR returns React components.
 
 
 ## Enhancer
 
-*Enhancer* is a HOC that receives AND returns a React component.
+*Enhancer* is a HOC that receives AND returns a React components.

docs/inversion.md

@@ -4,7 +4,7 @@
 >
 > the action of inverting something or the state of being inverted.
 
-Inversion is a technique where one injects state and/or life-cycle methods into render-prop/FaCC.
+Inversion is a technique where one injects state and/or life-cycle methods into a render prop.
 
 This effectively allows you to have
 
@@ -16,13 +16,13 @@ This effectively allows you to have
 in JSX tree without having to write stateful React components.
 
   - [`invert()`](./invert.md) and [`<Inverted>`](./invert.md#inverted) - inverts DOM element `ref`.
-  - [`<State>`](./State.md) - inverts state and `.setState()` method.
+  - [`<State>`](./State.md) - inverts `.state` and `.setState()` method.
      - [`<Toggle>`](./Toggle.md), [`<Flipflop>`](./Flipflop.md), [`<Value>`](./Value.md), [`<Couter>`](./Counter.md), [`<List>`](./List.md), and [`<Map>`](./Map.md)
 
 
 ## Example
 
-A basic example, `cnt` is incremented by 1 on each click:
+A basic example, `cnt` is incremented by 1 on each click
 
 ```jsx
 <State init={{cnt: 0}}>
@@ -33,3 +33,13 @@ A basic example, `cnt` is incremented by 1 on each click:
   }
 <State>
 ```
+
+or the same using `<Counter>` component
+
+```jsx
+<Counter>{({value, inc}) =>
+  <div onClick={inc}>
+    {value}
+  </div>
+}</Counter>
+```

src/route/__story__/StoryRouteExample.tsx

@@ -1,12 +1,12 @@
 import {createElement as h} from 'react';
 import {LocationSensor} from '../../LocationSensor';
-import {Router, Route} from '..';
+import {Router, Route, Route404} from '..';
 
 const StoryRouteExample = () => (
   <Router>
     <div>
       <ul>
-        <li onClick={() => history.pushState(null, '', '/home.html')}>Home</li>
+        <li onClick={() => history.pushState(null, '', '/home')}>Home</li>
         <li onClick={() => history.pushState(null, '', '/home/intro.html')}>Home / Intro</li>
         <li onClick={() => history.pushState(null, '', '/home/more.html')}>Home / More</li>
         <li onClick={() => history.pushState(null, '', '/page.html')}>Page</li>
@@ -16,12 +16,12 @@ const StoryRouteExample = () => (
       <Route match='/home'>{() =>
         <div>
           <div>HOME</div>
-          <Route match='/intro' children={<div>INTRO</div>} />
-          <Route children={<div>HOME/404</div>} />
+          <Route match='/intro' children={<div>HOME/INTRO</div>} />
+          <Route404 children={<div>HOME/404</div>} />
         </div>
       }</Route>
-      <Route match={/^\/page\.html/} children={<div>PAGE</div>} />
-      <Route children={<div>404</div>} />
+      <Route match={/^\/page\.html/} render={<div>PAGE</div>} />
+      <Route404 children={<div>404</div>} />
 
       <br />
       <hr />
@@ -43,8 +43,8 @@ const StoryRouteExample = () => (
     <Route children={<div>HOME/404</div>} />
   </div>
 }</Route>
-<Route match={/^\/page\.html/} children={<div>PAGE</div>} />
-<Route children={<div>404</div>} />
+<Route match={/^\/page\.html/} render={<div>PAGE</div>} />
+<Route max={0} children={<div>404</div>} />
       `}</pre>
     </div>
   </Router>

src/route/index.ts

@@ -2,6 +2,7 @@ import {Component} from 'react';
 import {LocationSensor} from '../LocationSensor';
 import {Provider, Consumer} from '../context';
 import {h, ns} from '../util';
+import renderProp from '../util/renderProp';
 
 export interface IRouteProviderProps {
   children?: any;
@@ -13,7 +14,7 @@ export interface IRouteProviderProps {
 export class Router extends Component<IRouteProviderProps, any> {
   matches: number = 0;
 
-  onMatch = () => {
+  inc = () => {
     this.matches++;
   };
 
@@ -25,8 +26,8 @@ export class Router extends Component<IRouteProviderProps, any> {
       name: ns(`route/${this.props.ns}`),
       value: {
         route,
-        onMatch: this.onMatch,
-        getMatches: () => this.matches,
+        inc: this.inc,
+        count: () => this.matches,
         parent: this.props.parent
       }
     }, Array.isArray(children) ? h('div', null, children) : children);
@@ -55,18 +56,21 @@ export type TRouteMatcher = (route: string) => TRouteMatchResult;
 
 export interface IRouteMatch {
   children?: React.ReactElement<any> | ((params) => React.ReactElement<any>);
-  cnt?: number;
+  render?: React.ReactElement<any> | ((params) => React.ReactElement<any>);
   comp?: React.ComponentClass<any> | React.StatelessComponent<any>;
   exact?: boolean;
   match?: TRouteMatcher | RegExp | string;
+  min?: number;
+  max?: number;
   ns?: string;
   preserve?: boolean;
 }
 
 export class Route extends Component<IRouteMatch, any> {
   static defaultProps = {
     match: /.+/,
-    cnt: 0
+    min: 0,
+    max: Infinity
   };
 
   matcher (): TRouteMatcher {
@@ -99,38 +103,30 @@ export class Route extends Component<IRouteMatch, any> {
     };
   }
 
-  renderChildren (props) {
-    const {comp, children} = this.props;
-
-    return comp ?
-      h(comp, props) :
-      typeof children === 'function' ?
-        children(props) :
-        children;
-  }
-
   render () {
-    return h(Consumer, {name: ns(`route/${this.props.ns}`)}, ({route, onMatch, getMatches, parent}) => {
-      const {children, match, preserve} = this.props;
+    return h(Consumer, {name: ns(`route/${this.props.ns}`)}, ({route, inc, count, parent}) => {
+      const {children, match, preserve, min, max} = this.props;
+      const matchCount = count();
+      console.log('...');
+      console.log('matchCount', matchCount);
 
-      if (getMatches() <= this.props.cnt) {
+      if ((matchCount >= min) && (matchCount <= max)) {
         const matchResult = this.matcher()(route);
 
         if (matchResult) {
+          // Increment number of matched routes.
+          inc();
+
           (matchResult as any).parent = parent;
           const {matches, length} = matchResult;
-
-          // Notify <RouteProvider> that we matched.
-          onMatch(this, matchResult);
-
           let newRoute = route;
 
           if (!preserve && length) {
             newRoute = newRoute.substr(length);
           }
 
           return h(Router, {route: newRoute, parent: matchResult},
-            this.renderChildren({
+            renderProp(this.props, {
               match: route.substr(0, length),
               matches,
               route: newRoute,
@@ -145,4 +141,9 @@ export class Route extends Component<IRouteMatch, any> {
   }
 }
 
+export const Route404 = (props) => h(Route, {
+  max: 0,
+  ...props
+});
+
 export * from './go';

src/util/renderProp.ts

@@ -1,4 +1,4 @@
-import {isFn} from '../util';
+import {h, isFn} from '../util';
 
 const renderProp = (props, ...args) => {
   if (process.env.NODE_ENV !== 'production') {
@@ -17,13 +17,15 @@ const renderProp = (props, ...args) => {
     }
   }
 
-  const {children, render} = props;
+  const {children, comp, component, render} = props;
 
   return isFn(children) ?
     children(...args) :
     isFn(render) ?
       render(...args) :
-      (children || null);
+      (comp || component) ?
+        h(comp || component, args[0]) :
+        (children || render || null);
 };
 
 export default renderProp;