feat: improve Router

Author: streamich

README.md

@@ -71,7 +71,7 @@ const MyComponent = mock();
      - [`<Provider>`](./docs/context.md#provider), [`<Consumer>`](./docs/context.md#consumer), [`withContext()`](./docs/context.md#withcontext), and `@withContext`
      - [`<Theme>`](./docs/theme.md#theme), [`<Themed>`](./docs/theme.md#themed), [`withTheme()`](./docs/theme.md#withtheme), and `@withTheme`
      - `<CssVars>`
-     - [`<Router>`](./docs/route.md#router), [`<Route>`](./docs/route.md#route), [`withRoute()`](./docs/route.md#withroute), and `@withRoute`
+     - [`<Router>`](./docs/route.md#router), [`<Route>`](./docs/route.md#route), [`withRoute()`](./docs/route.md#withroute), `@withRoute`, `go()`, and `<Go>`
      - `<Translations>`, `<Translate>`, `withTranslations`, and `@withTranslations`
   - [CSS resets](./docs/CSS-resets.md)
      - [`<CssResetEricMeyer>`](./docs/reset/CssResetEricMeyer.md) and [`<CssResetEricMeyerCondensed>`](./docs/reset/CssResetEricMeyerCondensed.md)

src/Link/index.ts

@@ -7,6 +7,7 @@ const isModifiedEvent = (event) =>
   !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
 
 export interface ILinkProps extends React.AllHTMLAttributes<any> {
+  bond?: boolean | string;
   replace?: boolean;
   state?: any | ((props: ILinkProps) => any);
   to?: string;
@@ -26,7 +27,7 @@ export class Link extends Component<ILinkProps, any> {
     (originalRef || noop)(el);
   };
 
-  onClick = (originalClick) => (event) => {
+  onClick = (originalClick?) => (event) => {
     (originalClick || noop)(event);
 
     const {replace, to, state} = this.props;
@@ -46,11 +47,23 @@ export class Link extends Component<ILinkProps, any> {
   };
 
   render () {
-    const {replace, state, to, a, ...rest} = this.props;
-    let element = renderProp(this.props, {
+    let {bond, replace, state, to, a, ...rest} = this.props;
+    const renderPropState: any = {
       go,
       to
-    });
+    };
+
+    if (bond) {
+      if (typeof bond !== 'string') {
+        bond = 'bond';
+      }
+
+      renderPropState[bond] = {
+        onClick: this.onClick()
+      };
+    }
+
+    let element = renderProp(this.props, renderPropState);
 
     if (!element) {
       return null;
@@ -61,10 +74,13 @@ export class Link extends Component<ILinkProps, any> {
     }
 
     const props: any = {
-      ref: this.ref(element.ref),
-      onClick: this.onClick(element.props.originalClick)
+      ref: this.ref(element.ref)
     };
 
+    if (!bond) {
+      props.onClick = this.onClick(element.props.originalClick);
+    }
+
     this.target = '';
 
     if (element.type === 'a') {

src/route/__story__/StoryRouteExample2.tsx

@@ -1,13 +1,13 @@
 import {h} from '../../util';
-import {Router, Route, go} from '..';
+import {Router, Route, go, Go} from '..';
 import {Link} from '../../Link';
 
 const StoryRouteExample2 = () => (
   <Router>
     <div>
       <ul>
         <li><a onClick={() => go('/')}>Home</a></li>
-        <li><Link to='/about'>About</Link></li>
+        <li><Go to='/about'>About</Go></li>
         <li><Link a to='/topics'><span>Topics</span></Link></li>
       </ul>
 

src/route/__story__/StoryRouteTruncateRoute.tsx

@@ -6,13 +6,17 @@ const StoryRouteTruncateRoute = () =>
   <div>
     <Router route='/api/users/123.json'>
       <Route match='/api'>
+        /api
         <div>
-          API
+        /api
         <Route match='/users'>
           <div>
-            USERS
+            /api/users
           <Route match={/.*/}>{(result) =>
-            <pre style={{fontFamily: 'monospace'}}>{JSON.stringify(result, null, 4)}</pre>
+            <div>
+              /api/users/.*
+              <pre style={{fontFamily: 'monospace'}}>{JSON.stringify(result, null, 4)}</pre>
+            </div>
           }</Route>
           </div>
         </Route>
@@ -25,11 +29,20 @@ const StoryRouteTruncateRoute = () =>
     <pre style={{fontFamily: 'monospace'}}>{`
 <Router route='/api/users/123.json'>
   <Route match='/api'>
+    <div>
+    /api
     <Route match='/users'>
+      <div>
+        /api/users
       <Route match={/.*/}>{(result) =>
-        <pre style={{fontFamily: 'monospace'}}>{JSON.stringify(result, null, 4)}</pre>
+        <div>
+          /api/users/.*
+          <pre style={{fontFamily: 'monospace'}}>{JSON.stringify(result, null, 4)}</pre>
+        </div>
       }</Route>
+      </div>
     </Route>
+    </div>
   </Route>
 </Router>
     `}</pre>

src/route/__tests__/index.test-server.tsx

@@ -34,7 +34,7 @@ describe('route SSR', () => {
       </Router>
     );
 
-    expect(html).to.equal('<div><span>1</span></div>');
+    expect(html).to.equal('<div><span>1</span><span>3</span><span>4</span></div>');
   });
 
   it('matches partial step', () => {

src/route/index.ts

@@ -3,10 +3,12 @@ import {LocationSensor} from '../LocationSensor';
 import {Provider, Consumer} from '../context';
 import {h, ns} from '../util';
 import renderProp from '../util/renderProp';
+import {Link, ILinkProps} from '../Link';
 
 export interface IRouteProviderProps {
   children?: any;
   ns?: string;
+  fullRoute?: string;
   route?: string;
   parent?: TRouteMatchResult;
 }
@@ -19,18 +21,19 @@ export class Router extends Component<IRouteProviderProps, any> {
   };
 
   renderProvider (route) {
-    const {children} = this.props;
+    const {children, fullRoute} = this.props;
     this.matches = 0;
 
     const element = h(Provider, {
       name: ns(`route/${this.props.ns}`),
       value: {
+        fullRoute: this.props.fullRoute || route,
         route,
         inc: this.inc,
         count: () => this.matches,
         parent: this.props.parent
       }
-    }, Array.isArray(children) ? h('div', null, children) : children);
+    }, renderProp(this.props));
 
     return element;
   }
@@ -54,8 +57,37 @@ export interface TRouteMatchResult {
 
 export type TRouteMatcher = (route: string) => TRouteMatchResult;
 
+export function createMatcher (match: string | RegExp | TRouteMatcher, exact?: boolean): TRouteMatcher {
+  let matcher: TRouteMatcher;
+
+  if (typeof match === 'function') {
+    return match;
+  }
+
+  let regex: RegExp;
+
+  if (typeof match === 'string') {
+    regex = new RegExp(`^(${match}${exact ? '$' : ''})`);
+  } else {
+    regex = match;
+  }
+
+  return (route: string) => {
+    const matches = route.match(regex);
+
+    if (!matches) {
+      return null;
+    }
+
+    return {
+      length: (matches && matches[1]) ? matches[1].length : 0,
+      matches
+    };
+  };
+}
+
 export interface IRouteMatch {
-  children?: React.ReactElement<any> | ((params) => React.ReactElement<any>);
+  children?: any;
   render?: React.ReactElement<any> | ((params) => React.ReactElement<any>);
   comp?: React.ComponentClass<any> | React.StatelessComponent<any>;
   component?: React.ComponentClass<any> | React.StatelessComponent<any>;
@@ -74,43 +106,13 @@ export class Route extends Component<IRouteMatch, any> {
     max: Infinity
   };
 
-  matcher (): TRouteMatcher {
-    const {match} = this.props;
-    let matcher: TRouteMatcher;
-
-    if (typeof match === 'function') {
-      return match;
-    }
-
-    let regex: RegExp;
-
-    if (typeof match === 'string') {
-      regex = new RegExp(`^(${match}${this.props.exact ? '$' : ''})`);
-    } else {
-      regex = match;
-    }
-
-    return (route: string) => {
-      const matches = route.match(regex);
-
-      if (!matches) {
-        return null;
-      }
-
-      return {
-        length: (matches && matches[1]) ? matches[1].length : 0,
-        matches
-      };
-    };
-  }
-
   render () {
     return h(Consumer, {name: ns(`route/${this.props.ns}`)}, ({route, inc, count, parent}) => {
-      const {children, match, preserve, min, max} = this.props;
+      const {children, exact, match, preserve, min, max} = this.props;
       const matchCount = count();
 
       if ((matchCount >= min) && (matchCount <= max)) {
-        const matchResult = this.matcher()(route);
+        const matchResult = createMatcher(match, exact)(route);
 
         if (matchResult) {
           // Increment number of matched routes.
@@ -124,7 +126,11 @@ export class Route extends Component<IRouteMatch, any> {
             newRoute = newRoute.substr(length);
           }
 
-          return h(Router, {route: newRoute, parent: matchResult},
+          return h(Router, {
+            fullRoute: route,
+            route: newRoute,
+            parent: matchResult
+          },
             renderProp(this.props, {
               match: route.substr(0, length),
               matches,
@@ -146,3 +152,19 @@ export const Route404 = (props) => h(Route, {
 });
 
 export * from './go';
+
+export interface IGoProps extends ILinkProps {
+  ns?: string;
+}
+
+export interface IGoState {
+
+}
+
+export class Go extends Component<IGoProps, IGoState> {
+  render () {
+    return h(Consumer, {name: ns(`route/${this.props.ns}`)}, ({fullRoute, route, inc, count, parent}) => {
+      return h(Link, this.props)
+    });
+  }
+}

src/util/renderProp.ts

@@ -17,15 +17,17 @@ const renderProp = (props, ...args) => {
     }
   }
 
-  const {children, component, comp = component, render} = props;
+  const {render, children = render, component, comp = component} = props;
 
   return isFn(children) ?
     children(...args) :
-    isFn(render) ?
-      render(...args) :
-      comp ?
-        h(comp, args[0]) :
-        (children || render || null);
+    comp ?
+      h(comp, args[0]) :
+      children && (typeof children !== 'object') ?
+        h('div', null, children) :
+        children instanceof Array ?
+          h('div', null, ...children) :
+          (children || null);
 };
 
 export default renderProp;