feat: create <Router> and <Route> components

Author: streamich

docs/route.md

@@ -0,0 +1,18 @@
+# Route
+
+Routing components allow you to create implement single page app routing functionality.
+
+Contents:
+
+  - `<RouteProvider>`
+  - `<Route>`
+  - `go()`
+  - `withRoute()`
+
+## `<RouteProvider>`
+
+
+
+## `<Route>`
+
+

package.json

@@ -45,6 +45,7 @@
     "to-string-loader": "1.1.5",
     "gulp": "3.9.1",
     "gulp-typescript": "3",
+    "react-syntax-highlighter": "^6.1.2",
     "@types/node": "9.3.0",
     "@types/jest": "22.0.1",
     "@types/chai": "4.1.1",
@@ -67,8 +68,9 @@
     "test:client:coverage": "jest --coverage",
     "test:watch": "jest --watch",
     "pub": "npm publish --registry http://sinopia.devhsk.mol.dmgt.net:4873",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "storybook": "start-storybook -p 6007",
+    "build-storybook": "build-storybook",
+    "start": "npm run storybook"
   },
   "jest": {
     "moduleFileExtensions": [

src/route/index.ts

@@ -0,0 +1,130 @@
+import {Component} from 'react';
+import {LocationSensor} from '../LocationSensor';
+import {Provider, Consumer} from '../context';
+import {h, sym} from '../util';
+
+const $$location = sym('location');
+
+export interface IRouteProviderProps {
+  children?: any;
+  route?: string;
+  parent?: TRouteMatchResult;
+}
+
+export class Router extends Component<IRouteProviderProps, any> {
+  matches: number = 0;
+
+  onMatch = () => {
+    this.matches++;
+  };
+
+  renderProvider (route) {
+    this.matches = 0;
+
+    const element = h(Provider, {
+      name: $$location,
+      value: {
+        route,
+        onMatch: this.onMatch,
+        getMathces: () => this.matches,
+        parent: this.props.parent
+      }
+    }, this.props.children);
+
+    return element;
+  }
+
+  render () {
+    const {props} = this;
+    const {children, route} = props;
+
+    if(typeof route === 'string') {
+      return this.renderProvider(route);
+    }
+
+    return h(LocationSensor, {}, (value) => this.renderProvider(value.pathname));
+  }
+}
+
+export interface TRouteMatchResult {
+  length: number; // Length how many characters to truncate from route.
+  matches?: RegExpMatchArray;
+}
+
+export type TRouteMatcher = (route: string) => TRouteMatchResult;
+
+export interface IRouteMatch {
+  children?: React.ReactElement<any> | ((params) => React.ReactElement<any>);
+  comp?: React.ComponentClass<{}> | React.StatelessComponent<{}>;
+  exact?: boolean;
+  match?: TRouteMatcher | RegExp | string;
+  cnt?: number;
+  preserve?: boolean;
+}
+
+export class Route extends Component<IRouteMatch, any> {
+  static defaultProps = {
+    match: /.*/,
+    cnt: 0
+  };
+
+  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: $$location}, ({route, onMatch, getMathces, parent}) => {
+      const {children, match} = this.props;
+
+      if (getMathces() <= this.props.cnt) {
+        const matchResult = this.matcher()(route);
+
+        if (matchResult) {
+          (matchResult as any).parent = parent;
+          const {matches, length} = matchResult;
+
+          // Notify <RouteProvider> that we matched.
+          onMatch(this, matchResult);
+
+          if (!this.props.preserve && length) {
+            route = route.substr(length);
+          }
+
+          return h(Router, {route, parent: matchResult},
+            this.props.comp ?
+              h(this.props.comp) :
+              typeof children === 'function' ? children({matches, route, parent}) : children
+          );
+        }
+      }
+
+      return null;
+    });
+  }
+}

src/route/story.tsx

@@ -0,0 +1,105 @@
+import {createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import {docco} from 'react-syntax-highlighter/styles/hljs'
+import {LocationSensor} from '../LocationSensor';
+import {Router, Route} from '.';
+import ShowDocs from '../../.storybook/ShowDocs'
+
+storiesOf('Context/route', module)
+  .add('Documentation', () => h(ShowDocs, {name: 'route'}))
+  .add('Example', () =>
+    <Router>
+      <div>
+        <ul>
+          <li onClick={() => history.pushState(null, '', '/home.html')}>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>
+          <li onClick={() => history.pushState(null, '', '/404.html')}>404</li>
+        </ul>
+
+        <Route match='/home'>{() =>
+          <div>
+            <div>HOME</div>
+            <Route match='/intro'>
+              <div>INTRO</div>
+            </Route>
+            <Route children={<div>404</div>} />
+          </div>
+        }</Route>
+
+        <Route match={/^\/page\.html/} children={<div>PAGE</div>} />
+        <Route children={<div>404</div>} />
+
+        <br />
+        <hr />
+
+        <LocationSensor>{(state) =>
+          <pre style={{fontFamily: 'monospace'}}>
+            {JSON.stringify(state, null, 4)}
+          </pre>
+        }</LocationSensor>
+      </div>
+    </Router>
+  )
+  .add('Truncates route', () =>
+    <div>
+      <Router route='/api/users/43f23f-23f34f43r.json'>
+        <Route match='/api'>
+          <Route match='/users'>
+            <Route match={/.*/}>{(result) =>
+              <pre style={{fontFamily: 'monospace'}}>{JSON.stringify(result, null, 4)}</pre>
+            }</Route>
+          </Route>
+        </Route>
+      </Router>
+
+      <hr />
+
+      <pre style={{fontFamily: 'monospace'}}>{`
+<Router route='/api/users/43f23f-23f34f43r.json'>
+  <Route match='/api'>
+    <Route match='/users'>
+      <Route match={/.*/}>{(result) =>
+        <pre style={{fontFamily: 'monospace'}}>{JSON.stringify(result, null, 4)}</pre>
+      }</Route>
+    </Route>
+  </Route>
+</Router>
+      `}</pre>
+    </div>
+  )
+  .add('Preserve route', () =>
+    <div>
+      <Router route='/api/users/id/123'>
+        <Route preserve match='/api'>
+          <Route preserve match='/api/users'>
+            <Route preserve match='/api/users/id'>
+              <Route preserve match={/\/api\/users\/id\/(.*)/}>{(result) =>
+                <pre style={{fontFamily: 'monospace'}}>{JSON.stringify(result, null, 4)}</pre>
+              }</Route>
+            </Route>
+          </Route>
+        </Route>
+      </Router>
+
+      <hr />
+
+      <pre style={{fontFamily: 'monospace'}}>{`
+<Router route='/api/users/id/123'>
+  <Route preserve match='/api'>
+    <Route preserve match='/api/users'>
+      <Route preserve match='/api/users/id'>
+        <Route preserve match={/\/api\/users\/id\/(.*)/}>{(result) =>
+          <pre style={{fontFamily: 'monospace'}}>{JSON.stringify(result, null, 4)}</pre>
+        }</Route>
+      </Route>
+    </Route>
+  </Route>
+</Router>
+      `}</pre>
+    </div>
+  );