@shuvi/router-react 0.0.1-rc.7 → 1.0.0-rc.0

package/esm/Link.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { State, PathRecord } from '@shuvi/router';
+/**
+ * The public API for rendering a history-aware `<a>`.
+ * ```ts
+ * // jump to `/about`
+ * <Link to="/about">About</Link>
+ * // jump with query
+ * <Link to="/about?sort=name">About</Link>
+ * // with some state
+ * <Link to="/about" state={{fromDashboard: true}}>About</Link>
+ * // props `to` could be a object
+ * <Link to={{
+ *   pathname: "/about",
+ *   search: "?sort=name",
+ *   hash: "#the-hash",
+ * }}>About</Link>
+ * // props target '_self' | '_blank', default is '_self'
+ * <Link to="/about" target="_self">About</Link>
+ * // overrides default redirect mode by `replace`
+ * <Link to="/about" replace>About</Link>
+ * // if `onClick` function, run it first
+ * <Link to="/about" onClick={fn}>About</Link>
+ * // other props will be delivered to `<a>`
+ * <Link to="/about" a='a' b='b'>About</Link> => <{...rest} 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;
+    prefetch?: boolean;
+    onMouseEnter?: (e: any) => void;
+}

package/esm/Link.js

@@ -0,0 +1,91 @@
+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 * as 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>`.
+ * ```ts
+ * // jump to `/about`
+ * <Link to="/about">About</Link>
+ * // jump with query
+ * <Link to="/about?sort=name">About</Link>
+ * // with some state
+ * <Link to="/about" state={{fromDashboard: true}}>About</Link>
+ * // props `to` could be a object
+ * <Link to={{
+ *   pathname: "/about",
+ *   search: "?sort=name",
+ *   hash: "#the-hash",
+ * }}>About</Link>
+ * // props target '_self' | '_blank', default is '_self'
+ * <Link to="/about" target="_self">About</Link>
+ * // overrides default redirect mode by `replace`
+ * <Link to="/about" replace>About</Link>
+ * // if `onClick` function, run it first
+ * <Link to="/about" onClick={fn}>About</Link>
+ * // other props will be delivered to `<a>`
+ * <Link to="/about" a='a' b='b'>About</Link> => <{...rest} 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 ||
+                (location && 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,
+        prefetch: PropTypes.bool,
+        onMouseEnter: PropTypes.func,
+        // @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 * as React from 'react';
+import * as 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 * as React from 'react';
+import * as 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 })
+        }).init();
+    }
+    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 * as React from 'react';
+import * as 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,46 @@
+import * as React from 'react';
+import { useRef, useReducer } from 'react';
+import * as 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 * as React from 'react';
+export declare function RouterView(): React.ReactElement | null;
+export declare namespace RouterView {
+    var displayName: string;
+}

package/esm/RouterView.js

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { joinPaths } from '@shuvi/router';
+import { useCurrentRoute } from './hooks';
+import { __DEV__ } from './constants';
+import { MatchedRouteContext } from './contexts';
+import { warningOnce, readOnly } from './utils';
+const defaultElement = React.createElement(RouterView, null);
+function MatchedRoute({ match, depth, parentPathname, parentParams }) {
+    const { route, params, pathname } = match;
+    const element = React.useMemo(() => route.component
+        ? React.createElement(route.component, route.props)
+        : defaultElement, [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
+        } }));
+}
+export function RouterView() {
+    let { depth, pathname: parentPathname, params: parentParams } = React.useContext(MatchedRouteContext);
+    const { matches } = useCurrentRoute();
+    if (!matches.length) {
+        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;
+    }
+    return (React.createElement(MatchedRoute, { match: matched, depth: depth, parentPathname: parentPathname, parentParams: parentParams }));
+}
+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,17 @@
+import * as 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<{
+    caseSensitive?: boolean | undefined;
+    children?: any[] | undefined;
+    component?: any;
+    redirect?: string | undefined;
+    props?: import("@shuvi/router").IRouteComponentProps | undefined;
+    path: string;
+    filepath?: string | undefined;
+    id?: string | undefined;
+    __componentSourceWithAffix__?: string | undefined;
+    __resolveWeak__?: (() => any) | undefined;
+}>>;
+export declare const MatchedRouteContext: React.Context<IRouteContextObject<{}>>;

package/esm/contexts.js

@@ -0,0 +1,20 @@
+import * as 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,57 @@
+import { IParams, IPathMatch, Blocker, Path, PathRecord, IRouter, IPathPattern } from '@shuvi/router';
+import { INavigateFunction, IRouteContextObject } from './types';
+/**
+ *  is just point `router.current` object
+ */
+export declare function useCurrentRoute(): import("@shuvi/router").IRoute<{
+    caseSensitive?: boolean | undefined;
+    children?: any[] | undefined;
+    component?: any;
+    redirect?: string | undefined;
+    props?: import("@shuvi/router").IRouteComponentProps | undefined;
+    path: string;
+    filepath?: string | undefined;
+    id?: string | undefined;
+    __componentSourceWithAffix__?: string | undefined;
+    __resolveWeak__?: (() => any) | undefined;
+}>;
+/**
+ * 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
+ * two parts, one is router behavior(browser history mode, hash history mode), another is router content
+ */
+export declare function useRouter(): IRouter;
+export declare function useMatchedRoute<ExtendedTypes = {}>(): IRouteContextObject<ExtendedTypes>;

package/esm/hooks.js

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { 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';
+/**
+ *  is just point `router.current` object
+ */
+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
+ * two parts, one is router behavior(browser history mode, hash history mode), another is router content
+ */
+export function useRouter() {
+    invariant(useInRouterContext(), `useRouter() may be used only in the context of a <Router> component.`);
+    return useContext(RouterContext).router;
+}
+export function useMatchedRoute() {
+    return useContext(MatchedRouteContext);
+}

package/esm/index.d.ts

@@ -0,0 +1,9 @@
+export { generatePath, useIsomorphicEffect } from './utils';
+export { MemoryRouter } from './MemoryRouter';
+export { RouterView } from './RouterView';
+export { Router } from './Router';
+export { Link, LinkProps } from './Link';
+export * from './hooks';
+export * from './contexts';
+export * from './types';
+export * from '@shuvi/router';

package/esm/index.js

@@ -0,0 +1,9 @@
+export { generatePath, useIsomorphicEffect } from './utils';
+export { MemoryRouter } from './MemoryRouter';
+export { RouterView } from './RouterView';
+export { Router } from './Router';
+export { Link } from './Link';
+export * from './hooks';
+export * from './contexts';
+export * from './types';
+export * from '@shuvi/router';

package/esm/types.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import { IParams, InitialEntry, State, PathRecord, IRouteRecord as IOriginalRouteRecord, IRouter } from '@shuvi/router';
+export declare type IReactRouteRecord<T = {}> = IOriginalRouteRecord<React.ReactNode, T>;
+export declare type IReactPartialRouteRecord = Partial<IReactRouteRecord>;
+export interface IRouterContextObject {
+    static: boolean;
+    router: IRouter;
+}
+export interface IRouteContextObject<ExtendedTypes = {}> {
+    depth: number;
+    params: IParams;
+    pathname: string;
+    route: IReactRouteRecord<ExtendedTypes> | null;
+}
+export interface IMemoryRouterProps {
+    basename?: string;
+    children?: React.ReactNode;
+    routes?: IReactRouteRecord[];
+    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);
+}