@uxf/router 11.72.5 → 11.80.2

package/README.md

@@ -52,7 +52,7 @@ export default createRouter(
 // routes/index.ts
 
 import router from "./routes";
-import { UxfGetServerSideProps, UxfGetStaticProps } from "@uxf/router";
+import { UxfGetServerSideProps, UxfGetStaticProps, ExtractSchema } from "@uxf/router";
 import { PreviewData as NextPreviewData } from "next/types";
 
 export const {
@@ -62,6 +62,8 @@ export const {
     useQueryParamsStatic 
 } = router;
 
+export type GetRouteSchema<K extends keyof RouteList> = ExtractSchema<RouteList[K]>;
+
 export type GetStaticProps<
     Route extends keyof RouteList,
     Props extends { [key: string]: any } = { [key: string]: any },
@@ -119,6 +121,72 @@ export default () => (
 )
 ```
 
+## RouteMatcher
+
+```tsx
+import { createRouteMatcher } from "@app-routes";
+
+// create active resolver
+const routeMatcher = createRouteMatcher("admin/index", { param1: 123 });
+// or
+const routeMatcher = createRouteMatcher("admin/index");
+
+// how to use in component
+
+function MyComponent() {
+    const router = useRouter();
+    const isRouteActive = routeMatcher(router);
+    
+    return <div>{isRouteActive ? "active" : "not active"}</div>;
+}
+```
+
+### Custom route matchers
+
+```tsx
+function createPathnameRouteMatcher(path: string): RouteMatcher {
+    return (router) => {
+        return router.pathname.startsWith(path);
+    }
+}
+```
+
+```tsx
+import { getCurrentRoute } from "@app-routes";
+
+function createCustomRouteMatcher(): RouteMatcher {
+    return (router) => {
+        const { route, params } = getCurrentRoute(router);
+        if (route === "admin/index") {
+            // do something
+        } else if (route === "admin/form") {
+            // do something
+        }
+    }
+}
+```
+
+### Merge multiple route matchers
+
+```tsx
+import { mergeRouteMatchers } from "@uxf/router";
+
+const routeMatcher = mergeRouteMatchers([
+    createRouteMatcher("admin/index"), 
+    createRouteMatcher("admin/form"),
+]);
+```
+
+## Type-safe route params
+
+```tsx
+import { GetRouteSchema } from "@app-routes";
+
+const blogProps: GetRouteSchema<"blog/detail"> = {
+    id: 1,
+}
+```
+
 ## GetStaticProps
 
 ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/router",
-    "version": "11.72.5",
+    "version": "11.80.2",
     "description": "UXF Router",
     "author": "UXFans <dev@uxf.cz>",
     "homepage": "https://gitlab.com/uxf-npm/router#readme",

package/{index.d.ts → router/index.d.ts}

@@ -1,3 +1,4 @@
 export * from "./helper";
+export * from "./merge-route-matchers";
 export * from "./router";
 export * from "./types";

package/{index.js → router/index.js}

@@ -15,5 +15,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./helper"), exports);
+__exportStar(require("./merge-route-matchers"), exports);
 __exportStar(require("./router"), exports);
 __exportStar(require("./types"), exports);

package/router/merge-route-matchers.d.ts

@@ -0,0 +1,2 @@
+import { RouteMatcher } from "./router";
+export declare function mergeRouteMatchers(routeMatchers: RouteMatcher[]): RouteMatcher;

package/router/merge-route-matchers.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeRouteMatchers = mergeRouteMatchers;
+function mergeRouteMatchers(routeMatchers) {
+    return (router) => routeMatchers.some((routeMatcher) => routeMatcher(router));
+}

package/{router.d.ts → router/router.d.ts}

@@ -1,8 +1,15 @@
 import { LinkProps } from "next/link";
+import { NextRouter } from "next/router";
 import { Infer, Struct } from "superstruct";
 import { SitemapGeneratorOptions, SitemapGeneratorType, SitemapRouteResolvers } from "./sitemap-generator";
 import { QueryParams, RoutesDefinition } from "./types";
-type ExtractSchema<T> = T extends {
+interface TransitionOptions {
+    shallow?: boolean;
+    locale?: string | false;
+    scroll?: boolean;
+    unstable_skipClientCache?: boolean;
+}
+export type ExtractSchema<T> = T extends {
     schema: Struct<infer U, any>;
 } ? U : null;
 type Options = {
@@ -14,20 +21,32 @@ type LocaleOptions<Locales extends string[]> = {
 export type FunctionParametersGenerator<Locales extends string[], RouteList extends RoutesDefinition<Locales>> = {
     [K in keyof RouteList]: RouteList[K]["path"] extends string ? "schema" extends keyof RouteList[K] ? [K, ExtractSchema<RouteList[K]>, Options?] : [K, null?, Options?] : "schema" extends keyof RouteList[K] ? [K, ExtractSchema<RouteList[K]>, Options & LocaleOptions<Locales>] : [K, null, Options & LocaleOptions<Locales>];
 }[keyof RouteList];
+export type FunctionParametersGeneratorWithPartialParams<Locales extends string[], RouteList extends RoutesDefinition<Locales>> = {
+    [K in keyof RouteList]: "schema" extends keyof RouteList[K] ? [K, Partial<ExtractSchema<RouteList[K]>>?] : [K, null?];
+}[keyof RouteList];
 type RouteFunction<Locales extends string[], RouteList extends RoutesDefinition<Locales>> = (...args: FunctionParametersGenerator<Locales, RouteList>) => LinkProps["href"];
 type RouteToUrlFunction<Locales extends string[], RouteList extends RoutesDefinition<Locales>> = (...args: FunctionParametersGenerator<Locales, RouteList>) => string;
 type QueryParamsResult<Nullable extends boolean, T extends keyof RouteList, Locales extends string[], RouteList extends RoutesDefinition<Locales>> = [
     Nullable extends true ? Infer<NonNullable<RouteList[T]["schema"]>> | null : Infer<NonNullable<RouteList[T]["schema"]>>,
     {
-        push: (params: Infer<NonNullable<RouteList[T]["schema"]>>) => Promise<boolean>;
-        replace: (params: Infer<NonNullable<RouteList[T]["schema"]>>) => Promise<boolean>;
+        push: (params: Infer<NonNullable<RouteList[T]["schema"]>>, options?: TransitionOptions) => Promise<boolean>;
+        replace: (params: Infer<NonNullable<RouteList[T]["schema"]>>, options?: TransitionOptions) => Promise<boolean>;
     }
 ];
+type SimplyNextRouter = Pick<NextRouter, "pathname" | "query" | "isReady">;
+export type RouteMatcher = (router: SimplyNextRouter) => boolean;
+type CurrentRoute<RouteList extends RoutesDefinition<any>> = {
+    [K in keyof RouteList]: {
+        route: K;
+        params: "schema" extends keyof RouteList[K] ? ExtractSchema<RouteList[K]> | null : null;
+    };
+}[keyof RouteList];
 type Router<Locales extends string[], RouteList extends RoutesDefinition<Locales>> = {
     route: RouteFunction<Locales, RouteList>;
     routeToUrl: RouteToUrlFunction<Locales, RouteList>;
     createSitemapGenerator: (resolvers: SitemapRouteResolvers<Locales, RouteList>, options?: SitemapGeneratorOptions) => SitemapGeneratorType;
     routes: RouteList;
+    getCurrentRoute: (router: SimplyNextRouter) => CurrentRoute<RouteList>;
     useActiveRoute: () => ActiveRoute<Locales, RouteList>;
     /**
      * @deprecated use useQueryParamsStatic or useQueryParams instead
@@ -35,6 +54,7 @@ type Router<Locales extends string[], RouteList extends RoutesDefinition<Locales
     useQueryParamsDeprecated: <T extends keyof RouteList>() => QueryParams<RouteList, T>;
     useQueryParams: <T extends keyof RouteList>(routeName: T) => QueryParamsResult<false, T, Locales, RouteList>;
     useQueryParamsStatic: <T extends keyof RouteList>(routeName: T) => QueryParamsResult<true, T, Locales, RouteList>;
+    createRouteMatcher: (...args: FunctionParametersGeneratorWithPartialParams<Locales, RouteList>) => RouteMatcher;
 };
 type RouterOptions<L extends string[]> = {
     baseUrl?: string;

package/{router.js → router/router.js}

@@ -71,6 +71,17 @@ function createRouter(routes, routerOptions) {
         }
         return (options === null || options === void 0 ? void 0 : options.shouldBeAbsolute) ? `${routerOptions.baseUrl}${pathname}` : pathname;
     };
+    const getCurrentRoute = (router) => {
+        const activeRoute = Object.keys(routes).find((route) => typeof routes[route].path === "string"
+            ? routes[route].path === router.pathname
+            : Object.values(routes[route].path).includes(router.pathname));
+        if (!activeRoute) {
+            throw new Error("Active route not found.");
+        }
+        const schema = routes[activeRoute].schema;
+        const params = router.isReady && schema ? (0, superstruct_1.mask)(router.query, schema) : null;
+        return { route: activeRoute, params };
+    };
     return {
         route(...args) {
             var _a;
@@ -115,8 +126,8 @@ function createRouter(routes, routerOptions) {
             return [
                 (0, superstruct_1.mask)(router.query, schema),
                 {
-                    push: (params) => router.push(routeToUrl(routeName, params, {})),
-                    replace: (params) => router.replace(routeToUrl(routeName, params, {})),
+                    push: (params, options) => router.push(routeToUrl(routeName, params, {}), undefined, options),
+                    replace: (params, options) => router.replace(routeToUrl(routeName, params, {}), undefined, options),
                 },
             ];
         },
@@ -134,5 +145,24 @@ function createRouter(routes, routerOptions) {
                 },
             ];
         },
+        getCurrentRoute,
+        createRouteMatcher(...args) {
+            const [requiredRouteName, requiredParams] = args;
+            return (router) => {
+                const { route, params } = getCurrentRoute(router);
+                if (route !== requiredRouteName) {
+                    return false;
+                }
+                if (!requiredParams || Object.keys(requiredParams).length === 0) {
+                    return true;
+                }
+                for (const [paramName, paramValue] of Object.entries(requiredParams)) {
+                    if ((params === null || params === void 0 ? void 0 : params[paramName]) !== paramValue) {
+                        return false;
+                    }
+                }
+                return true;
+            };
+        },
     };
 }

package/{router.test.js → router/router.test.js}

@@ -1,15 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const superstruct_1 = require("superstruct");
+const merge_route_matchers_1 = require("./merge-route-matchers");
 const router_1 = require("./router");
 const superstruct_2 = require("./superstruct");
-const { routeToUrl } = (0, router_1.createRouter)({
+const { routeToUrl, createRouteMatcher } = (0, router_1.createRouter)({
     index: {
         path: "/",
         schema: (0, superstruct_1.object)({
             queryParam: (0, superstruct_1.optional)((0, superstruct_1.string)()),
         }),
     },
+    manyParameters: {
+        path: "/many-parameters/[param1]/form/[param2]",
+        schema: (0, superstruct_1.object)({
+            param1: (0, superstruct_1.string)(),
+            param2: (0, superstruct_1.string)(),
+            queryParam1: (0, superstruct_1.optional)((0, superstruct_1.string)()),
+            queryParam2: (0, superstruct_1.optional)((0, superstruct_1.string)()),
+        }),
+    },
     catchAllSegments: {
         path: "/catch-all/[...pathParams]",
         schema: (0, superstruct_1.object)({
@@ -127,3 +137,40 @@ const DATA = [
 test("routeToUrl", () => {
     DATA.map(({ actual, expected }) => expect(actual).toBe(expected));
 });
+test("create route matcher", () => {
+    expect(createRouteMatcher("manyParameters", { param1: "value-1" })({
+        isReady: true,
+        pathname: "/many-parameters/[param1]/form/[param2]",
+        query: { param1: "value-1", param2: "any", queryParam1: "any", queryParam2: "any" },
+    })).toBe(true);
+    expect(createRouteMatcher("manyParameters", { param1: "value-1" })({
+        isReady: true,
+        pathname: "/many-parameters/[param1]/form/[param2]",
+        query: { param1: "any", param2: "any" },
+    })).toBe(false);
+    expect(createRouteMatcher("manyParameters", { param1: "value-1", queryParam1: "query-1" })({
+        isReady: true,
+        pathname: "/many-parameters/[param1]/form/[param2]",
+        query: { param1: "value-1", param2: "any", queryParam1: "query-1" },
+    })).toBe(true);
+});
+test("merge route matchers", () => {
+    const routeMatcher1 = createRouteMatcher("manyParameters", { param1: "value-1", queryParam1: "query-1" });
+    const routeMatcher2 = createRouteMatcher("manyParameters", { param1: "value-2", queryParam1: "query-2" });
+    const routeMatcher = (0, merge_route_matchers_1.mergeRouteMatchers)([routeMatcher1, routeMatcher2]);
+    expect(routeMatcher({
+        pathname: "/many-parameters/[param1]/form/[param2]",
+        query: { param1: "value-1", queryParam1: "query-1", param2: "any" },
+        isReady: true,
+    })).toBe(true);
+    expect(routeMatcher({
+        pathname: "/many-parameters/[param1]/form/[param2]",
+        query: { param1: "value-2", queryParam1: "query-2", param2: "any" },
+        isReady: true,
+    })).toBe(true);
+    expect(routeMatcher({
+        pathname: "/many-parameters/[param1]/form/[param2]",
+        query: { param1: "value-3", queryParam1: "query-3", param2: "any" },
+        isReady: true,
+    })).toBe(false);
+});

package/router/routes-check/__test__/app/app-directory/[param]/page.js

@@ -0,0 +1 @@
+"use strict";

package/router/routes-check/__test__/app/app-directory/page.js

@@ -0,0 +1 @@
+"use strict";

package/router/routes-check/__test__/pages/index.js

@@ -0,0 +1 @@
+"use strict";

package/router/routes-check/__test__/pages/product/[id].js

@@ -0,0 +1 @@
+"use strict";

package/router/routes-check/__test__/pages/product/edit.js

@@ -0,0 +1 @@
+"use strict";

package/router/routes-check/__test__/pages/product/index.js

@@ -0,0 +1 @@
+"use strict";

package/router/routes-check/__test__/pages/product-2/[id]/index.js

@@ -0,0 +1 @@
+"use strict";