@shuvi/router-react 0.0.1-pre.1 → 0.0.1-pre.10

package/esm/Link.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { State, PathRecord } from '@shuvi/router';
+/**
+ * The public API for rendering a history-aware <a>.
+ */
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+    replace?: boolean;
+    state?: State;
+    to: PathRecord;
+}

package/esm/Link.js

@@ -0,0 +1,66 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useHref, useNavigate, useResolvedPath } from '.';
+import { pathToString } from '@shuvi/router';
+import { __DEV__ } from './constants';
+import { useCurrentRoute } from './hooks';
+function isModifiedEvent(event) {
+    return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+}
+/**
+ * The public API for rendering a history-aware <a>.
+ */
+export const Link = React.forwardRef(function LinkWithRef(_a, ref) {
+    var { onClick, replace: replaceProp = false, state, target, to } = _a, rest = __rest(_a, ["onClick", "replace", "state", "target", "to"]);
+    let href = useHref(to);
+    let navigate = useNavigate();
+    const location = useCurrentRoute();
+    let path = useResolvedPath(to);
+    function handleClick(event) {
+        if (onClick)
+            onClick(event);
+        if (!event.defaultPrevented && // onClick prevented default
+            event.button === 0 && // Ignore everything but left clicks
+            (!target || target === '_self') && // Let browser handle "target=_blank" etc.
+            !isModifiedEvent(event) // Ignore clicks with modifier keys
+        ) {
+            event.preventDefault();
+            // If the URL hasn't changed, a regular <a> will do a replace instead of
+            // a push, so do the same here.
+            let replace = !!replaceProp || pathToString(location) === pathToString(path);
+            navigate(to, { replace, state });
+        }
+    }
+    return (
+    // @ts-ignore
+    React.createElement("a", Object.assign({}, rest, { href: href, onClick: handleClick, ref: ref, target: target })));
+});
+if (__DEV__) {
+    Link.displayName = 'Link';
+    Link.propTypes = {
+        onClick: PropTypes.func,
+        replace: PropTypes.bool,
+        state: PropTypes.object,
+        target: PropTypes.string,
+        // @ts-ignore proptypes's bug?
+        to: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.shape({
+                pathname: PropTypes.string,
+                search: PropTypes.string,
+                hash: PropTypes.string
+            })
+        ]).isRequired
+    };
+}

package/esm/MemoryRouter.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { IMemoryRouterProps } from './types';
+/**
+ * A <Router> that stores all entries in memory.
+ */
+export declare function MemoryRouter({ basename, children, routes, initialEntries, initialIndex }: IMemoryRouterProps): React.ReactElement;
+export declare namespace MemoryRouter {
+    var displayName: string;
+    var propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        routes: PropTypes.Requireable<(object | null | undefined)[]>;
+        initialEntries: PropTypes.Requireable<(string | PropTypes.InferProps<{
+            pathname: PropTypes.Requireable<string>;
+            search: PropTypes.Requireable<string>;
+            hash: PropTypes.Requireable<string>;
+            state: PropTypes.Requireable<object>;
+            key: PropTypes.Requireable<string>;
+        }> | null | undefined)[]>;
+        initialIndex: PropTypes.Requireable<number>;
+    };
+}

package/esm/MemoryRouter.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createMemoryHistory, createRouter } from '@shuvi/router';
+import { Router } from './Router';
+import { __DEV__ } from './constants';
+/**
+ * A <Router> that stores all entries in memory.
+ */
+export function MemoryRouter({ basename, children, routes, initialEntries, initialIndex }) {
+    let routerRef = React.useRef();
+    if (routerRef.current == null) {
+        routerRef.current = createRouter({
+            basename,
+            routes: routes || [],
+            history: createMemoryHistory({ initialEntries, initialIndex })
+        });
+    }
+    return React.createElement(Router, { children: children, router: routerRef.current });
+}
+if (__DEV__) {
+    MemoryRouter.displayName = 'MemoryRouter';
+    MemoryRouter.propTypes = {
+        children: PropTypes.node,
+        routes: PropTypes.arrayOf(PropTypes.object),
+        initialEntries: PropTypes.arrayOf(PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.shape({
+                pathname: PropTypes.string,
+                search: PropTypes.string,
+                hash: PropTypes.string,
+                state: PropTypes.object,
+                key: PropTypes.string
+            })
+        ])),
+        initialIndex: PropTypes.number
+    };
+}

package/esm/Router.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { IRouterProps } from './types';
+/**
+ * Provides location context for the rest of the app.
+ *
+ * Note: You usually won't render a <Router> directly. Instead, you'll render a
+ * router that is more specific to your environment such as a <BrowserRouter>
+ * in web browsers or a <StaticRouter> for server rendering.
+ */
+export declare function Router({ children, static: staticProp, router }: IRouterProps): React.ReactElement;
+export declare namespace Router {
+    var displayName: string;
+    var propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        router: PropTypes.Requireable<object>;
+        static: PropTypes.Requireable<boolean>;
+    };
+}

package/esm/Router.js

@@ -0,0 +1,43 @@
+import React, { useRef, useReducer } from 'react';
+import PropTypes from 'prop-types';
+import invariant from '@shuvi/utils/lib/invariant';
+import { RouterContext, RouteContext } from './contexts';
+import { useInRouterContext } from './hooks';
+import { __DEV__ } from './constants';
+import { useIsomorphicEffect } from './utils';
+/**
+ * Provides location context for the rest of the app.
+ *
+ * Note: You usually won't render a <Router> directly. Instead, you'll render a
+ * router that is more specific to your environment such as a <BrowserRouter>
+ * in web browsers or a <StaticRouter> for server rendering.
+ */
+export function Router({ children = null, static: staticProp = false, router }) {
+    invariant(!useInRouterContext(), `You cannot render a <Router> inside another <Router>.` +
+        ` You never need more than one.`);
+    const contextVal = React.useMemo(() => {
+        return {
+            static: staticProp,
+            router: router
+        };
+    }, [staticProp, router]);
+    const unmount = useRef(false);
+    const forceupdate = useReducer(s => s * -1, 1)[1];
+    useIsomorphicEffect(() => () => (unmount.current = true), []);
+    useIsomorphicEffect(() => router.listen(() => {
+        if (unmount.current) {
+            return;
+        }
+        forceupdate();
+    }), [router]);
+    return (React.createElement(RouterContext.Provider, { value: contextVal },
+        React.createElement(RouteContext.Provider, { children: children, value: router.current })));
+}
+if (__DEV__) {
+    Router.displayName = 'Router';
+    Router.propTypes = {
+        children: PropTypes.node,
+        router: PropTypes.object,
+        static: PropTypes.bool
+    };
+}

package/esm/RouterView.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare function RouterView(): React.ReactElement | null;
+export declare namespace RouterView {
+    var displayName: string;
+}

package/esm/RouterView.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { joinPaths } from '@shuvi/router/lib/utils';
+import { useCurrentRoute } from './hooks';
+import { __DEV__ } from './constants';
+import { MatchedRouteContext } from './contexts';
+import { warningOnce, readOnly } from './utils';
+const defaultElement = React.createElement(RouterView, null);
+export function RouterView() {
+    let { depth, pathname: parentPathname, params: parentParams } = React.useContext(MatchedRouteContext);
+    const { matches } = useCurrentRoute();
+    if (!matches) {
+        return null;
+    }
+    // Otherwise render an element.
+    const matched = matches[depth];
+    if (!matched) {
+        if (__DEV__) {
+            warningOnce(parentPathname, false, `Use <RouterView/> under path "${parentPathname}", but it has no children routes.` +
+                `\n\n` +
+                `Please remove the <RouterView/>.`);
+        }
+        return null;
+    }
+    const { route, params, pathname } = matched;
+    const element = route.component
+        ? React.createElement(route.component, route.props)
+        : defaultElement;
+    return (React.createElement(MatchedRouteContext.Provider, { children: element, value: {
+            depth: depth + 1,
+            params: readOnly(Object.assign(Object.assign({}, parentParams), params)),
+            pathname: joinPaths([parentPathname, pathname]),
+            route
+        } }));
+}
+if (__DEV__) {
+    RouterView.displayName = 'RouterView';
+}

package/esm/constants.d.ts

@@ -0,0 +1 @@
+export declare const __DEV__: boolean;

package/esm/constants.js

@@ -0,0 +1 @@
+export const __DEV__ = process.env.NODE_ENV !== 'production';

package/esm/contexts.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IRoute } from '@shuvi/router';
+import { IRouterContextObject, IRouteContextObject } from './types';
+export declare const RouterContext: React.Context<IRouterContextObject>;
+export declare const RouteContext: React.Context<IRoute<import("@shuvi/router").IRouteRecord<any>>>;
+export declare const MatchedRouteContext: React.Context<IRouteContextObject>;

package/esm/contexts.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { readOnly } from './utils';
+import { __DEV__ } from './constants';
+export const RouterContext = React.createContext(null);
+if (__DEV__) {
+    RouterContext.displayName = 'Router';
+}
+export const RouteContext = React.createContext(null);
+if (__DEV__) {
+    RouterContext.displayName = 'Route';
+}
+export const MatchedRouteContext = React.createContext({
+    depth: 0,
+    params: readOnly({}),
+    pathname: '',
+    route: null
+});
+if (__DEV__) {
+    MatchedRouteContext.displayName = 'MatchedRoute';
+}

package/esm/hooks.d.ts

@@ -0,0 +1,41 @@
+import { IParams, IPathMatch, Blocker, Path, PathRecord, IRouter, IPathPattern } from '@shuvi/router';
+import { INavigateFunction } from './types';
+export declare function useCurrentRoute(): import("@shuvi/router").IRoute<import("@shuvi/router").IRouteRecord<any>>;
+/**
+ * Blocks all navigation attempts. This is useful for preventing the page from
+ * changing until some condition is met, like saving form data.
+ */
+export declare function useBlocker(blocker: Blocker, when?: boolean): void;
+/**
+ * Returns the full href for the given "to" value. This is useful for building
+ * custom links that are also accessible and preserve right-click behavior.
+ */
+export declare function useHref(to: PathRecord): string;
+/**
+ * Returns true if this component is a descendant of a <Router>.
+ */
+export declare function useInRouterContext(): boolean;
+/**
+ * Returns true if the URL for the given "to" value matches the current URL.
+ * This is useful for components that need to know "active" state, e.g.
+ * <NavLink>.
+ */
+export declare function useMatch(pattern: IPathPattern): IPathMatch | null;
+/**
+ * Returns an imperative method for changing the location. Used by <Link>s, but
+ * may also be used by other elements to change the location.
+ */
+export declare function useNavigate(): INavigateFunction;
+/**
+ * Returns an object of key/value pairs of the dynamic params from the current
+ * URL that were matched by the route path.
+ */
+export declare function useParams(): IParams;
+/**
+ * Resolves the pathname of the given `to` value against the current location.
+ */
+export declare function useResolvedPath(to: PathRecord): Path;
+/**
+ * Returns the current router object
+ */
+export declare function useRouter(): IRouter;

package/esm/hooks.js

@@ -0,0 +1,108 @@
+import React, { useContext } from 'react';
+import { matchPathname } from '@shuvi/router';
+import invariant from '@shuvi/utils/lib/invariant';
+import { RouterContext, RouteContext, MatchedRouteContext } from './contexts';
+import { warning } from './utils';
+export function useCurrentRoute() {
+    return useContext(RouteContext);
+}
+/**
+ * Blocks all navigation attempts. This is useful for preventing the page from
+ * changing until some condition is met, like saving form data.
+ */
+export function useBlocker(blocker, when = true) {
+    invariant(useInRouterContext(), `useBlocker() may be used only in the context of a <Router> component.`);
+    const { router } = useContext(RouterContext);
+    React.useEffect(() => {
+        if (!when)
+            return;
+        let unblock = router.block((tx) => {
+            let autoUnblockingTx = Object.assign(Object.assign({}, tx), { retry() {
+                    // Automatically unblock the transition so it can play all the way
+                    // through before retrying it. TODO: Figure out how to re-enable
+                    // this block if the transition is cancelled for some reason.
+                    unblock();
+                    tx.retry();
+                } });
+            blocker(autoUnblockingTx);
+        });
+        return unblock;
+    }, [router, blocker, when]);
+}
+/**
+ * Returns the full href for the given "to" value. This is useful for building
+ * custom links that are also accessible and preserve right-click behavior.
+ */
+export function useHref(to) {
+    invariant(useInRouterContext(), `useHref() may be used only in the context of a <Router> component.`);
+    const { router } = useContext(RouterContext);
+    const path = useResolvedPath(to);
+    return router.resolve(path).href;
+}
+/**
+ * Returns true if this component is a descendant of a <Router>.
+ */
+export function useInRouterContext() {
+    return useContext(RouterContext) != null;
+}
+/**
+ * Returns true if the URL for the given "to" value matches the current URL.
+ * This is useful for components that need to know "active" state, e.g.
+ * <NavLink>.
+ */
+export function useMatch(pattern) {
+    invariant(useInRouterContext(), `useMatch() may be used only in the context of a <Router> component.`);
+    const { pathname } = useCurrentRoute();
+    return matchPathname(pattern, pathname);
+}
+/**
+ * Returns an imperative method for changing the location. Used by <Link>s, but
+ * may also be used by other elements to change the location.
+ */
+export function useNavigate() {
+    invariant(useInRouterContext(), `useNavigate() may be used only in the context of a <Router> component.`);
+    const { router } = useContext(RouterContext);
+    const { pathname } = useContext(MatchedRouteContext);
+    const activeRef = React.useRef(false);
+    React.useEffect(() => {
+        activeRef.current = true;
+    });
+    let navigate = React.useCallback((to, options = {}) => {
+        if (activeRef.current) {
+            if (typeof to === 'number') {
+                router.go(to);
+            }
+            else {
+                let { path } = router.resolve(to, pathname);
+                (!!options.replace ? router.replace : router.push).call(router, path, options.state);
+            }
+        }
+        else {
+            warning(false, `You should call navigate() in a useEffect, not when ` +
+                `your component is first rendered.`);
+        }
+    }, [router, pathname]);
+    return navigate;
+}
+/**
+ * Returns an object of key/value pairs of the dynamic params from the current
+ * URL that were matched by the route path.
+ */
+export function useParams() {
+    return useContext(MatchedRouteContext).params;
+}
+/**
+ * Resolves the pathname of the given `to` value against the current location.
+ */
+export function useResolvedPath(to) {
+    const { router } = useContext(RouterContext);
+    const { pathname } = useContext(MatchedRouteContext);
+    return React.useMemo(() => router.resolve(to, pathname).path, [to, pathname]);
+}
+/**
+ * Returns the current router object
+ */
+export function useRouter() {
+    invariant(useInRouterContext(), `useRouter() may be used only in the context of a <Router> component.`);
+    return useContext(RouterContext).router;
+}

package/esm/index.d.ts

@@ -0,0 +1,8 @@
+export { generatePath } from './utils';
+export { MemoryRouter } from './MemoryRouter';
+export { RouterView } from './RouterView';
+export { Router } from './Router';
+export { Link } from './Link';
+export { withRouter } from './withRouter';
+export * from './hooks';
+export * from './types';

package/esm/index.js

@@ -0,0 +1,8 @@
+export { generatePath } from './utils';
+export { MemoryRouter } from './MemoryRouter';
+export { RouterView } from './RouterView';
+export { Router } from './Router';
+export { Link } from './Link';
+export { withRouter } from './withRouter';
+export * from './hooks';
+export * from './types';

package/esm/types.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import { IParams, InitialEntry, State, PathRecord, IRouteRecord as IOriginRouteRecord, IPartialRouteRecord as IOriginalRouteRecord, IRouter } from '@shuvi/router';
+export declare type IRouteRecord = IOriginRouteRecord<React.ReactNode>;
+export declare type IPartialRouteRecord = IOriginalRouteRecord;
+export interface IRouterContextObject {
+    static: boolean;
+    router: IRouter;
+}
+export interface IRouteContextObject {
+    depth: number;
+    params: IParams;
+    pathname: string;
+    route: IRouteRecord | null;
+}
+export interface IMemoryRouterProps {
+    basename?: string;
+    children?: React.ReactNode;
+    routes?: IRouteRecord[];
+    initialEntries?: InitialEntry[];
+    initialIndex?: number;
+}
+export interface INavigateProps {
+    to: PathRecord;
+    replace?: boolean;
+    state?: State;
+}
+export interface IOutletProps {
+}
+export interface IRouterProps {
+    children?: React.ReactNode;
+    static?: boolean;
+    router: IRouter;
+}
+export interface IRoutesProps {
+    basename?: string;
+    children?: React.ReactNode;
+}
+/**
+ * The interface for the navigate() function returned from useNavigate().
+ */
+export interface INavigateFunction {
+    (to: PathRecord, options?: {
+        replace?: boolean;
+        state?: State;
+    }): void;
+    (delta: number): void;
+}

package/esm/types.js

@@ -0,0 +1 @@
+export {};

package/esm/utils.d.ts

@@ -0,0 +1,9 @@
+import { IParams } from '@shuvi/router';
+export declare function useIsomorphicEffect(cb: any, deps: any): void;
+export declare const readOnly: <T extends unknown>(obj: T) => T;
+export declare function warning(cond: boolean, message: string): void;
+export declare function warningOnce(key: string, cond: boolean, message: string): void;
+/**
+ * Returns a path with params interpolated.
+ */
+export declare function generatePath(path: string, params?: IParams): string;

package/esm/utils.js

@@ -0,0 +1,42 @@
+import { matchStringify } from '@shuvi/router';
+import { useLayoutEffect, useEffect } from 'react';
+import { __DEV__ } from './constants';
+export function useIsomorphicEffect(cb, deps) {
+    if (typeof window !== 'undefined') {
+        useLayoutEffect(cb, deps);
+    }
+    else {
+        useEffect(cb, deps);
+    }
+}
+export const readOnly = __DEV__
+    ? obj => Object.freeze(obj)
+    : obj => obj;
+export function warning(cond, message) {
+    if (!cond) {
+        if (typeof console !== 'undefined')
+            console.warn(message);
+        try {
+            // Welcome to debugging React Router!
+            //
+            // This error is thrown as a convenience so you can more easily
+            // find the source for a warning that appears in the console by
+            // enabling "pause on exceptions" in your JavaScript debugger.
+            throw new Error(message);
+        }
+        catch (e) { }
+    }
+}
+const alreadyWarned = {};
+export function warningOnce(key, cond, message) {
+    if (!cond && !alreadyWarned[key]) {
+        alreadyWarned[key] = true;
+        warning(false, message);
+    }
+}
+/**
+ * Returns a path with params interpolated.
+ */
+export function generatePath(path, params = {}) {
+    return matchStringify(path, params);
+}

package/esm/withRouter.d.ts

@@ -0,0 +1,8 @@
+import { IRouter } from '@shuvi/router';
+import { Runtime } from '@shuvi/service';
+import React from 'react';
+export declare type WithRouterProps = {
+    router: IRouter;
+};
+export declare type ExcludeRouterProps<P> = Pick<P, Exclude<keyof P, keyof WithRouterProps>>;
+export declare function withRouter<P extends WithRouterProps>(ComposedComponent: Runtime.IRouteComponent<React.ComponentType<P>, any>): Runtime.IRouteComponent<React.ComponentType<ExcludeRouterProps<P>>, any>;

package/esm/withRouter.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useRouter } from './hooks';
+export function withRouter(ComposedComponent) {
+    function WithRouterWrapper(props) {
+        return React.createElement(ComposedComponent, Object.assign({ router: useRouter() }, props));
+    }
+    WithRouterWrapper.getInitialProps = ComposedComponent.getInitialProps;
+    if (process.env.NODE_ENV !== 'production') {
+        const name = ComposedComponent.displayName || ComposedComponent.name || 'Unknown';
+        WithRouterWrapper.displayName = `withRouter(${name})`;
+    }
+    return WithRouterWrapper;
+}

package/lib/Link.js

@@ -1,4 +1,23 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -10,17 +29,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Link = void 0;
 const React = __importStar(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
 const _1 = require(".");
@@ -35,10 +48,10 @@ function isModifiedEvent(event) {
  */
 exports.Link = React.forwardRef(function LinkWithRef(_a, ref) {
     var { onClick, replace: replaceProp = false, state, target, to } = _a, rest = __rest(_a, ["onClick", "replace", "state", "target", "to"]);
-    let href = _1.useHref(to);
-    let navigate = _1.useNavigate();
-    const location = hooks_1.useCurrentRoute();
-    let path = _1.useResolvedPath(to);
+    let href = (0, _1.useHref)(to);
+    let navigate = (0, _1.useNavigate)();
+    const location = (0, hooks_1.useCurrentRoute)();
+    let path = (0, _1.useResolvedPath)(to);
     function handleClick(event) {
         if (onClick)
             onClick(event);
@@ -50,7 +63,7 @@ exports.Link = React.forwardRef(function LinkWithRef(_a, ref) {
             event.preventDefault();
             // If the URL hasn't changed, a regular <a> will do a replace instead of
             // a push, so do the same here.
-            let replace = !!replaceProp || router_1.pathToString(location) === router_1.pathToString(path);
+            let replace = !!replaceProp || (0, router_1.pathToString)(location) === (0, router_1.pathToString)(path);
             navigate(to, { replace, state });
         }
     }
@@ -65,6 +78,7 @@ if (constants_1.__DEV__) {
         replace: prop_types_1.default.bool,
         state: prop_types_1.default.object,
         target: prop_types_1.default.string,
+        // @ts-ignore proptypes's bug?
         to: prop_types_1.default.oneOfType([
             prop_types_1.default.string,
             prop_types_1.default.shape({

package/lib/MemoryRouter.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.MemoryRouter = void 0;
 const react_1 = __importDefault(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
 const router_1 = require("@shuvi/router");
@@ -14,10 +15,10 @@ const constants_1 = require("./constants");
 function MemoryRouter({ basename, children, routes, initialEntries, initialIndex }) {
     let routerRef = react_1.default.useRef();
     if (routerRef.current == null) {
-        routerRef.current = router_1.createRouter({
+        routerRef.current = (0, router_1.createRouter)({
             basename,
             routes: routes || [],
-            history: router_1.createMemoryHistory({ initialEntries, initialIndex })
+            history: (0, router_1.createMemoryHistory)({ initialEntries, initialIndex })
         });
     }
     return react_1.default.createElement(Router_1.Router, { children: children, router: routerRef.current });

package/lib/Router.js

@@ -1,15 +1,28 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
     return result;
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Router = void 0;
 const react_1 = __importStar(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
 const invariant_1 = __importDefault(require("@shuvi/utils/lib/invariant"));
@@ -25,7 +38,7 @@ const utils_1 = require("./utils");
  * in web browsers or a <StaticRouter> for server rendering.
  */
 function Router({ children = null, static: staticProp = false, router }) {
-    invariant_1.default(!hooks_1.useInRouterContext(), `You cannot render a <Router> inside another <Router>.` +
+    (0, invariant_1.default)(!(0, hooks_1.useInRouterContext)(), `You cannot render a <Router> inside another <Router>.` +
         ` You never need more than one.`);
     const contextVal = react_1.default.useMemo(() => {
         return {
@@ -33,10 +46,10 @@ function Router({ children = null, static: staticProp = false, router }) {
             router: router
         };
     }, [staticProp, router]);
-    const unmount = react_1.useRef(false);
-    const forceupdate = react_1.useReducer(s => s * -1, 1)[1];
-    utils_1.useIsomorphicEffect(() => () => (unmount.current = true), []);
-    utils_1.useIsomorphicEffect(() => router.listen(() => {
+    const unmount = (0, react_1.useRef)(false);
+    const forceupdate = (0, react_1.useReducer)(s => s * -1, 1)[1];
+    (0, utils_1.useIsomorphicEffect)(() => () => (unmount.current = true), []);
+    (0, utils_1.useIsomorphicEffect)(() => router.listen(() => {
         if (unmount.current) {
             return;
         }

package/lib/RouterView.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.RouterView = void 0;
 const react_1 = __importDefault(require("react"));
 const utils_1 = require("@shuvi/router/lib/utils");
 const hooks_1 = require("./hooks");
@@ -12,7 +13,7 @@ const utils_2 = require("./utils");
 const defaultElement = react_1.default.createElement(RouterView, null);
 function RouterView() {
     let { depth, pathname: parentPathname, params: parentParams } = react_1.default.useContext(contexts_1.MatchedRouteContext);
-    const { matches } = hooks_1.useCurrentRoute();
+    const { matches } = (0, hooks_1.useCurrentRoute)();
     if (!matches) {
         return null;
     }
@@ -20,7 +21,7 @@ function RouterView() {
     const matched = matches[depth];
     if (!matched) {
         if (constants_1.__DEV__) {
-            utils_2.warningOnce(parentPathname, false, `Use <RouterView/> under path "${parentPathname}", but it has no children routes.` +
+            (0, utils_2.warningOnce)(parentPathname, false, `Use <RouterView/> under path "${parentPathname}", but it has no children routes.` +
                 `\n\n` +
                 `Please remove the <RouterView/>.`);
         }
@@ -32,8 +33,8 @@ function RouterView() {
         : defaultElement;
     return (react_1.default.createElement(contexts_1.MatchedRouteContext.Provider, { children: element, value: {
             depth: depth + 1,
-            params: utils_2.readOnly(Object.assign(Object.assign({}, parentParams), params)),
-            pathname: utils_1.joinPaths([parentPathname, pathname]),
+            params: (0, utils_2.readOnly)(Object.assign(Object.assign({}, parentParams), params)),
+            pathname: (0, utils_1.joinPaths)([parentPathname, pathname]),
             route
         } }));
 }

package/lib/constants.js

@@ -1,3 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.__DEV__ = void 0;
 exports.__DEV__ = process.env.NODE_ENV !== 'production';

package/lib/contexts.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.MatchedRouteContext = exports.RouteContext = exports.RouterContext = void 0;
 const react_1 = __importDefault(require("react"));
 const utils_1 = require("./utils");
 const constants_1 = require("./constants");
@@ -16,7 +17,7 @@ if (constants_1.__DEV__) {
 }
 exports.MatchedRouteContext = react_1.default.createContext({
     depth: 0,
-    params: utils_1.readOnly({}),
+    params: (0, utils_1.readOnly)({}),
     pathname: '',
     route: null
 });

package/lib/hooks.js

@@ -1,22 +1,35 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
     return result;
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRouter = exports.useResolvedPath = exports.useParams = exports.useNavigate = exports.useMatch = exports.useInRouterContext = exports.useHref = exports.useBlocker = exports.useCurrentRoute = void 0;
 const react_1 = __importStar(require("react"));
 const router_1 = require("@shuvi/router");
 const invariant_1 = __importDefault(require("@shuvi/utils/lib/invariant"));
 const contexts_1 = require("./contexts");
 const utils_1 = require("./utils");
 function useCurrentRoute() {
-    return react_1.useContext(contexts_1.RouteContext);
+    return (0, react_1.useContext)(contexts_1.RouteContext);
 }
 exports.useCurrentRoute = useCurrentRoute;
 /**
@@ -24,8 +37,8 @@ exports.useCurrentRoute = useCurrentRoute;
  * changing until some condition is met, like saving form data.
  */
 function useBlocker(blocker, when = true) {
-    invariant_1.default(useInRouterContext(), `useBlocker() may be used only in the context of a <Router> component.`);
-    const { router } = react_1.useContext(contexts_1.RouterContext);
+    (0, invariant_1.default)(useInRouterContext(), `useBlocker() may be used only in the context of a <Router> component.`);
+    const { router } = (0, react_1.useContext)(contexts_1.RouterContext);
     react_1.default.useEffect(() => {
         if (!when)
             return;
@@ -48,8 +61,8 @@ exports.useBlocker = useBlocker;
  * custom links that are also accessible and preserve right-click behavior.
  */
 function useHref(to) {
-    invariant_1.default(useInRouterContext(), `useHref() may be used only in the context of a <Router> component.`);
-    const { router } = react_1.useContext(contexts_1.RouterContext);
+    (0, invariant_1.default)(useInRouterContext(), `useHref() may be used only in the context of a <Router> component.`);
+    const { router } = (0, react_1.useContext)(contexts_1.RouterContext);
     const path = useResolvedPath(to);
     return router.resolve(path).href;
 }
@@ -58,7 +71,7 @@ exports.useHref = useHref;
  * Returns true if this component is a descendant of a <Router>.
  */
 function useInRouterContext() {
-    return react_1.useContext(contexts_1.RouterContext) != null;
+    return (0, react_1.useContext)(contexts_1.RouterContext) != null;
 }
 exports.useInRouterContext = useInRouterContext;
 /**
@@ -67,9 +80,9 @@ exports.useInRouterContext = useInRouterContext;
  * <NavLink>.
  */
 function useMatch(pattern) {
-    invariant_1.default(useInRouterContext(), `useMatch() may be used only in the context of a <Router> component.`);
+    (0, invariant_1.default)(useInRouterContext(), `useMatch() may be used only in the context of a <Router> component.`);
     const { pathname } = useCurrentRoute();
-    return router_1.matchPathname(pattern, pathname);
+    return (0, router_1.matchPathname)(pattern, pathname);
 }
 exports.useMatch = useMatch;
 /**
@@ -77,9 +90,9 @@ exports.useMatch = useMatch;
  * may also be used by other elements to change the location.
  */
 function useNavigate() {
-    invariant_1.default(useInRouterContext(), `useNavigate() may be used only in the context of a <Router> component.`);
-    const { router } = react_1.useContext(contexts_1.RouterContext);
-    const { pathname } = react_1.useContext(contexts_1.MatchedRouteContext);
+    (0, invariant_1.default)(useInRouterContext(), `useNavigate() may be used only in the context of a <Router> component.`);
+    const { router } = (0, react_1.useContext)(contexts_1.RouterContext);
+    const { pathname } = (0, react_1.useContext)(contexts_1.MatchedRouteContext);
     const activeRef = react_1.default.useRef(false);
     react_1.default.useEffect(() => {
         activeRef.current = true;
@@ -95,7 +108,7 @@ function useNavigate() {
             }
         }
         else {
-            utils_1.warning(false, `You should call navigate() in a useEffect, not when ` +
+            (0, utils_1.warning)(false, `You should call navigate() in a useEffect, not when ` +
                 `your component is first rendered.`);
         }
     }, [router, pathname]);
@@ -107,15 +120,15 @@ exports.useNavigate = useNavigate;
  * URL that were matched by the route path.
  */
 function useParams() {
-    return react_1.useContext(contexts_1.MatchedRouteContext).params;
+    return (0, react_1.useContext)(contexts_1.MatchedRouteContext).params;
 }
 exports.useParams = useParams;
 /**
  * Resolves the pathname of the given `to` value against the current location.
  */
 function useResolvedPath(to) {
-    const { router } = react_1.useContext(contexts_1.RouterContext);
-    const { pathname } = react_1.useContext(contexts_1.MatchedRouteContext);
+    const { router } = (0, react_1.useContext)(contexts_1.RouterContext);
+    const { pathname } = (0, react_1.useContext)(contexts_1.MatchedRouteContext);
     return react_1.default.useMemo(() => router.resolve(to, pathname).path, [to, pathname]);
 }
 exports.useResolvedPath = useResolvedPath;
@@ -123,7 +136,7 @@ exports.useResolvedPath = useResolvedPath;
  * Returns the current router object
  */
 function useRouter() {
-    invariant_1.default(useInRouterContext(), `useRouter() may be used only in the context of a <Router> component.`);
-    return react_1.useContext(contexts_1.RouterContext).router;
+    (0, invariant_1.default)(useInRouterContext(), `useRouter() may be used only in the context of a <Router> component.`);
+    return (0, react_1.useContext)(contexts_1.RouterContext).router;
 }
 exports.useRouter = useRouter;

package/lib/index.js

@@ -1,18 +1,27 @@
 "use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.withRouter = exports.Link = exports.Router = exports.RouterView = exports.MemoryRouter = exports.generatePath = void 0;
 var utils_1 = require("./utils");
-exports.generatePath = utils_1.generatePath;
+Object.defineProperty(exports, "generatePath", { enumerable: true, get: function () { return utils_1.generatePath; } });
 var MemoryRouter_1 = require("./MemoryRouter");
-exports.MemoryRouter = MemoryRouter_1.MemoryRouter;
+Object.defineProperty(exports, "MemoryRouter", { enumerable: true, get: function () { return MemoryRouter_1.MemoryRouter; } });
 var RouterView_1 = require("./RouterView");
-exports.RouterView = RouterView_1.RouterView;
+Object.defineProperty(exports, "RouterView", { enumerable: true, get: function () { return RouterView_1.RouterView; } });
 var Router_1 = require("./Router");
-exports.Router = Router_1.Router;
+Object.defineProperty(exports, "Router", { enumerable: true, get: function () { return Router_1.Router; } });
 var Link_1 = require("./Link");
-exports.Link = Link_1.Link;
+Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return Link_1.Link; } });
 var withRouter_1 = require("./withRouter");
-exports.withRouter = withRouter_1.withRouter;
-__export(require("./hooks"));
+Object.defineProperty(exports, "withRouter", { enumerable: true, get: function () { return withRouter_1.withRouter; } });
+__exportStar(require("./hooks"), exports);
+__exportStar(require("./types"), exports);

package/lib/utils.js

@@ -1,14 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.generatePath = exports.warningOnce = exports.warning = exports.readOnly = exports.useIsomorphicEffect = void 0;
 const router_1 = require("@shuvi/router");
 const react_1 = require("react");
 const constants_1 = require("./constants");
 function useIsomorphicEffect(cb, deps) {
     if (typeof window !== 'undefined') {
-        react_1.useLayoutEffect(cb, deps);
+        (0, react_1.useLayoutEffect)(cb, deps);
     }
     else {
-        react_1.useEffect(cb, deps);
+        (0, react_1.useEffect)(cb, deps);
     }
 }
 exports.useIsomorphicEffect = useIsomorphicEffect;
@@ -43,6 +44,6 @@ exports.warningOnce = warningOnce;
  * Returns a path with params interpolated.
  */
 function generatePath(path, params = {}) {
-    return router_1.matchStringify(path, params);
+    return (0, router_1.matchStringify)(path, params);
 }
 exports.generatePath = generatePath;

package/lib/withRouter.js

@@ -3,11 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.withRouter = void 0;
 const react_1 = __importDefault(require("react"));
 const hooks_1 = require("./hooks");
 function withRouter(ComposedComponent) {
     function WithRouterWrapper(props) {
-        return react_1.default.createElement(ComposedComponent, Object.assign({ router: hooks_1.useRouter() }, props));
+        return react_1.default.createElement(ComposedComponent, Object.assign({ router: (0, hooks_1.useRouter)() }, props));
     }
     WithRouterWrapper.getInitialProps = ComposedComponent.getInitialProps;
     if (process.env.NODE_ENV !== 'production') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shuvi/router-react",
-  "version": "0.0.1-pre.1",
+  "version": "0.0.1-pre.10",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/shuvijs/shuvi.git",
@@ -12,7 +12,8 @@
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
   "files": [
-    "lib"
+    "lib",
+    "esm"
   ],
   "scripts": {
     "dev": "run-p watch:*",
@@ -27,8 +28,8 @@
     "node": ">= 12.0.0"
   },
   "dependencies": {
-    "@shuvi/router": "0.0.1-pre.1",
-    "@shuvi/service": "0.0.1-pre.1"
+    "@shuvi/router": "0.0.1-pre.10",
+    "@shuvi/service": "0.0.1-pre.10"
   },
   "devDependencies": {
     "@types/react": "^16.9.43",
@@ -38,5 +39,5 @@
   "peerDependencies": {
     "react": ">=16.8"
   },
-  "gitHead": "0bc0bc76e72ca5a339341e8b71d6bb6bb41409e8"
+  "gitHead": "a7309b27916427de62ba66c8cd6eb6db0f19dee9"
 }