feat: create go() and <Link>

Author: streamich

README.md

@@ -46,6 +46,7 @@ const MyComponent = mock();
   - Generators
      - [`<Audio>`](./docs/Audio.md)
      - [`<LocalStorage>`](./docs/LocalStorage.md)
+     - `<Redirect>`
      - [`<Speak>`](./docs/Speak.md)
      - [`<Vibrate>`](./docs/Vibrate.md)
      - `<Video>`

docs/route.md

@@ -57,14 +57,18 @@ so, simply use:
 
 ## Multiple routers
 
-You can have many routers operating on the same page in parallel. All you have to do is specify a *namespace* using the `ns` props.
+You can have many routers operating on the same page in parallel. All you have to do is specify a *namespace* using the `ns` prop.
 
 ```jsx
 <Router ns='secret'>
   <Route ns='secret' />
 </Router>
 ```
 
+This allows you to route by basically anything, not just the current page location. You can have *app-inside-app* that has its
+own routing logic.
+
+
 ## Reference
 
 ### `<Router>`
@@ -139,6 +143,27 @@ interface TRouteMatchResult {
      - `matches` - optionsl, array of matches returned by `String.prototype.match()` function.
 
 
+### `go()`
+
+Utility function that changes the current browser location. Has the following signature:
+
+```ts
+go: (url: string, params?: IGoParams) => void;
+
+interface IGoParams {
+  replace?: boolean;
+  title?: string;
+  state?: any;
+}
+```
+
+  - `url` - required, string, URL where to navigate the browser. Usually you want to use a relative route with leading slash, like `/users`.
+  - `replace` - whether to to use [`.replaceState()`](https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_replaceState()_method)
+  rather than default [`.pushState()`](https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method) when invoking History API.
+  - `title` - title to specify in `.pushState()` or `.replaceState()` methods.
+  - `state` - any serializable JavaScript object to store with the current history state. Useful, for example, to store current scroll position.
+
+
 ## Example
 
 ### With Redux

src/route/Link.ts

@@ -0,0 +1,51 @@
+// Props to: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/Link.js
+import {Component} from 'react';
+import {h} from '../util';
+import {go} from '.';
+
+const isModifiedEvent = (event) =>
+  !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+
+export interface ILinkProps {
+  onClick?: (event) => void;
+  target?: string;
+  replace?: boolean;
+  state?: any;
+  to?: string;
+  innerRef?: (el) => void;
+}
+
+export class Link extends Component<ILinkProps, any> {
+  onClick = (event) => {
+    const {onClick, replace, target, to, state} = this.props;
+
+    if (onClick) {
+      onClick(event);
+    }
+
+    if (!event.defaultPrevented && // onClick prevented default
+      event.button === 0 && // ignore everything but left clicks
+      !target && // let browser handle "target=_blank" etc.
+      !isModifiedEvent(event) // ignore clicks with modifier keys
+    ) {
+      event.preventDefault();
+
+      go(to, {
+        replace,
+        state: typeof state === 'function' ? state() : state
+      });
+    }
+  };
+
+  render () {
+    const {props, onClick} = this;
+    const {replace, to, innerRef: ref, ...rest} = this.props;
+
+    return h('a', {
+      ...rest,
+      href: to,
+      ref,
+      onClick,
+    });
+  }
+}

src/route/__story__/StoryRouteExample2.tsx

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

src/route/index.ts

@@ -129,3 +129,15 @@ export class Route extends Component<IRouteMatch, any> {
     });
   }
 }
+
+export interface IGoParams {
+  replace?: boolean;
+  title?: string;
+  state?: any;
+}
+
+export type TGo = (url: string, params: IGoParams) => void;
+
+export const go = (url, {replace, title = '', state}: IGoParams = {}) => {
+  history[replace ? 'replaceState' : 'pushState'](state, title || '', url);
+};

src/util.ts

@@ -28,7 +28,7 @@ export const on = (obj, ...args) => obj.addEventListener(...args);
 
 export const off = (obj, ...args) => obj.removeEventListener(...args);
 
-export const ns = (name) => `@@${name}`;
+export const ns = (name) => `@@libreact/${name}`;
 
 const hasSymbols = typeof Symbol !== 'undefined';