boring-router-react - npm Package Compare versions

Comparing version 0.3.0-alpha.50 to 0.3.1

bld/library/index.d.ts

 export * from './link';
 export * from './nav-link';
-export * from './redirect';
 export * from './route';
 export * from './browser-history';

bld/library/index.js

@@ -6,5 +6,4 @@ "use strict";
 tslib_1.__exportStar(require("./nav-link"), exports);
-tslib_1.__exportStar(require("./redirect"), exports);
 tslib_1.__exportStar(require("./route"), exports);
 tslib_1.__exportStar(require("./browser-history"), exports);
 //# sourceMappingURL=index.js.map

bld/library/link.d.ts

 import { RouteBuilder, RouteMatch, RouteMatchSharedToParamDict } from 'boring-router';
-import { Component, HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 export interface LinkProps<T extends RouteMatch | RouteBuilder> extends HTMLAttributes<HTMLAnchorElement> {
@@ -12,6 +12,4 @@ className?: string;
 }
-export declare class Link<T extends RouteMatch | RouteBuilder> extends Component<LinkProps<T>> {
-    private get href();
-    render(): ReactNode;
-    private onClick;
-}
+export declare const Link: (<T extends RouteMatch<import("boring-router").GeneralParamDict, import("boring-router").NextRouteMatch<import("boring-router").GeneralParamDict, string | undefined, string>, string | undefined, string, object> | RouteBuilder<string>>({ className, to, params, replace, toggle, leave, onClick, ...props }: LinkProps<T>) => JSX.Element) & {
+    displayName: string;
+};

bld/library/link.js

@@ -6,10 +6,27 @@ "use strict";
 const boring_router_1 = require("boring-router");
-const mobx_1 = require("mobx");
-const mobx_react_1 = require("mobx-react");
+const mobx_react_lite_1 = require("mobx-react-lite");
 const react_1 = tslib_1.__importStar(require("react"));
 const _utils_1 = require("./@utils");
-let Link = class Link extends react_1.Component {
-    constructor() {
-        super(...arguments);
-        this.onClick = (event) => {
+exports.Link = mobx_react_lite_1.observer(({ className, to, params, replace = false, toggle = false, leave, onClick, ...props }) => {
+    let store = mobx_react_lite_1.useLocalStore(() => {
+        return {
+            get href() {
+                try {
+                    if (to instanceof boring_router_1.RouteMatch) {
+                        return to.$href(params);
+                    }
+                    else {
+                        return to.$href();
+                    }
+                }
+                catch (error) {
+                    return '#';
+                }
+                // eslint-disable-next-line @magicspace/empty-line-around-blocks
+            },
+        };
+    });
+    let composedOnClick = react_1.useCallback(_utils_1.composeEventHandler([
+        onClick,
+        (event) => {
             if (event.ctrlKey ||
@@ -21,3 +38,2 @@ event.metaKey ||
             event.preventDefault();
-            let { to, params, replace, toggle = false, leave } = this.props;
             if (to instanceof boring_router_1.RouteMatch) {
@@ -40,30 +56,6 @@ let leaveOption = leave === undefined ? toggle && to.$matched : leave;
             }
-        };
-    }
-    get href() {
-        let { to, params } = this.props;
-        try {
-            if (to instanceof boring_router_1.RouteMatch) {
-                return to.$href(params);
-            }
-            else {
-                return to.$href();
-            }
-        }
-        catch (error) {
-            return '#';
-        }
-    }
-    render() {
-        let { className, to, params, replace, toggle, onClick, ...props } = this.props;
-        return (react_1.default.createElement("a", Object.assign({ className: className, href: this.href, onClick: _utils_1.composeEventHandler([onClick, this.onClick], true) }, props)));
-    }
-};
-tslib_1.__decorate([
-    mobx_1.computed
-], Link.prototype, "href", null);
-Link = tslib_1.__decorate([
-    mobx_react_1.observer
-], Link);
-exports.Link = Link;
+        },
+    ], true), [onClick]);
+    return (react_1.default.createElement("a", Object.assign({ className: className, href: store.href, onClick: composedOnClick }, props)));
+});
 //# sourceMappingURL=link.js.map

bld/library/nav-link.d.ts

@@ -0,10 +1,10 @@
+/// <reference types="react" />
 import { RouteBuilder, RouteMatch } from 'boring-router';
-import { Component, ReactNode } from 'react';
 import { LinkProps } from './link';
-export interface NavLinkProps<TRouteMatch extends RouteMatch | RouteBuilder> extends LinkProps<TRouteMatch> {
+export interface NavLinkProps<T extends RouteMatch | RouteBuilder> extends LinkProps<T> {
     exact?: boolean;
     activeClassName?: string;
 }
-export declare class NavLink<TRouteMatch extends RouteMatch | RouteBuilder> extends Component<NavLinkProps<TRouteMatch>> {
-    render(): ReactNode;
-}
+export declare const NavLink: (<T extends RouteMatch<import("boring-router").GeneralParamDict, import("boring-router").NextRouteMatch<import("boring-router").GeneralParamDict, string | undefined, string>, string | undefined, string, object> | RouteBuilder<string>>({ className, activeClassName, exact, ...props }: NavLinkProps<T>) => JSX.Element) & {
+    displayName: string;
+};

bld/library/nav-link.js

@@ -7,28 +7,22 @@ "use strict";
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const mobx_react_1 = require("mobx-react");
+const mobx_react_lite_1 = require("mobx-react-lite");
 const react_1 = tslib_1.__importStar(require("react"));
 const link_1 = require("./link");
-let NavLink = class NavLink extends react_1.Component {
-    render() {
-        let { className, activeClassName = 'active', exact, ...props } = this.props;
-        let { to: generalTo } = props;
-        let to;
-        if (generalTo instanceof boring_router_1.RouteBuilder) {
-            let builderRoute = generalTo.$route;
+exports.NavLink = mobx_react_lite_1.observer(({ className, activeClassName = 'active', exact, ...props }) => {
+    let { to } = props;
+    let route = react_1.useMemo(() => {
+        if (to instanceof boring_router_1.RouteBuilder) {
+            let builderRoute = to.$route;
             if (!(builderRoute instanceof boring_router_1.RouteMatch)) {
                 throw new Error('`RouteBuilder` for `NavLink` component must have first building part as a `Route`');
             }
-            to = builderRoute;
+            return builderRoute;
         }
         else {
-            to = generalTo;
+            return to;
         }
-        let matched = exact ? to.$exact : to.$matched;
-        return (react_1.default.createElement(link_1.Link, Object.assign({ className: classnames_1.default(className, matched && activeClassName) }, props)));
-    }
-};
-NavLink = tslib_1.__decorate([
-    mobx_react_1.observer
-], NavLink);
-exports.NavLink = NavLink;
+    }, [to]);
+    let matched = exact ? route.$exact : route.$matched;
+    return (react_1.default.createElement(link_1.Link, Object.assign({ className: classnames_1.default(className, matched && activeClassName) }, props)));
+});
 //# sourceMappingURL=nav-link.js.map

bld/library/route.d.ts

 import { RouteMatch } from 'boring-router';
-import { Component, ComponentType, ReactNode } from 'react';
+import { ComponentType, ReactElement, ReactNode } from 'react';
 export interface RouteComponentProps<TRouteMatch extends RouteMatch> {
@@ -7,3 +7,3 @@ match: TRouteMatch;
 export declare type RouteComponent<TRouteMatch extends RouteMatch> = ComponentType<RouteComponentProps<TRouteMatch>>;
-export declare type RouteFunctionChild<TRouteMatch extends RouteMatch> = (match: TRouteMatch) => ReactNode;
+export declare type RouteFunctionChild<TRouteMatch extends RouteMatch> = (match: TRouteMatch) => ReactElement;
 export interface RouteProps<TRouteMatch extends RouteMatch> {
@@ -15,4 +15,4 @@ match: TRouteMatch | TRouteMatch[];
 }
-export declare class Route<TRouteMatch extends RouteMatch> extends Component<RouteProps<TRouteMatch>> {
-    render(): ReactNode;
-}
+export declare const Route: (<TRouteMatch extends RouteMatch<import("boring-router").GeneralParamDict, import("boring-router").NextRouteMatch<import("boring-router").GeneralParamDict, string | undefined, string>, string | undefined, string, object>>({ match, exact, component: RouteComponent, children, }: RouteProps<TRouteMatch>) => any) & {
+    displayName: string;
+};

bld/library/route.js

@@ -5,35 +5,28 @@ "use strict";
 const tslib_1 = require("tslib");
-const mobx_react_1 = require("mobx-react");
-const react_1 = tslib_1.__importStar(require("react"));
-let Route = class Route extends react_1.Component {
-    render() {
-        let { match, exact, component: RouteComponent, children } = this.props;
-        let matches = Array.isArray(match) ? match : [match];
-        let firstMatch = matches.find(match => exact ? match.$exact : match.$matched);
-        if (firstMatch) {
-            // eslint-disable-next-line no-null/no-null
-            if (children !== undefined && children !== null) {
-                if (RouteComponent) {
-                    throw new Error('Cannot specify `component` and `children` simultaneously');
-                }
-                if (typeof children === 'function') {
-                    return children(firstMatch);
-                }
-                else {
-                    return children;
-                }
+const mobx_react_lite_1 = require("mobx-react-lite");
+const react_1 = tslib_1.__importDefault(require("react"));
+exports.Route = mobx_react_lite_1.observer(({ match, exact, component: RouteComponent, children, }) => {
+    let matches = Array.isArray(match) ? match : [match];
+    let firstMatch = matches.find(match => exact ? match.$exact : match.$matched);
+    if (firstMatch) {
+        // eslint-disable-next-line no-null/no-null
+        if (children !== undefined && children !== null) {
+            if (RouteComponent) {
+                throw new Error('Cannot specify `component` and `children` simultaneously');
             }
+            if (typeof children === 'function') {
+                return children(firstMatch);
+            }
             else {
-                if (RouteComponent) {
-                    return react_1.default.createElement(RouteComponent, { match: firstMatch });
-                }
+                return children;
             }
         }
-        return react_1.default.createElement(react_1.default.Fragment, null);
+        else {
+            if (RouteComponent) {
+                return react_1.default.createElement(RouteComponent, { match: firstMatch });
+            }
+        }
     }
-};
-Route = tslib_1.__decorate([
-    mobx_react_1.observer
-], Route);
-exports.Route = Route;
+    return react_1.default.createElement(react_1.default.Fragment, null);
+});
 //# sourceMappingURL=route.js.map

package.json

 {
   "name": "boring-router-react",
-  "version": "0.3.0-alpha.50",
-  "description": "A light-weight, type-safe, yet reactive router service using MobX.",
+  "version": "0.3.1",
+  "description": "A type-safe MobX router with parallel routing support.",
   "repository": {
@@ -21,3 +21,2 @@ "type": "git",
     "mobx": "5",
-    "mobx-react": "6",
     "react": "16"
@@ -28,5 +27,4 @@ },
     "@types/debug": "^4.1.5",
-    "@types/history": "^4.7.6",
-    "@types/react-dom": "^16.9.8",
-    "react-dom": "^16.13.1"
+    "mobx": "^5.15.4",
+    "react": "^16.13.1"
   },
@@ -36,5 +34,7 @@ "dependencies": {
     "debug": "^4.1.1",
-    "tslang": "^0.1.22"
+    "mobx-react-lite": "^2.0.7",
+    "tslang": "^0.1.22",
+    "tslib": "^2.0.0"
   },
-  "gitHead": "ce4bc73707b54030bb7f207a351e23b8fe453108"
+  "gitHead": "1caa1713e9a4d0f9fdc41fffae07530615d2c82b"
 }

src/library/index.ts

 export * from './link';
 export * from './nav-link';
-export * from './redirect';
 export * from './route';
 export * from './browser-history';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

4

decreased by-20%

Worsened metrics

Total package byte prevSize

50059

decreased by-7.47%

Dependency count

8

increased by14.29%

Number of package files

27

decreased by-12.9%

Lines of code

1064

decreased by-8.83%

Dependency changes

• + Addedmobx-react-lite@^2.0.7

• + Addedtslib@^2.0.0

• - Removedmobx-react@6.3.1(transitive)