fix: remove universal-router

Author: Pavel910

packages/app/package.json

@@ -42,17 +42,14 @@
     "minimatch": "^5.1.6",
     "mobx": "^6.15.0",
     "nanoid": "^3.3.11",
-    "path-to-regexp": "^8.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "ts-invariant": "^0.10.3",
-    "universal-router": "^9.2.1",
     "warning": "^4.0.3",
     "zod": "^3.25.76"
   },
   "devDependencies": {
     "@types/lodash": "^4.17.23",
-    "@types/universal-router": "^8.0.0",
     "@types/warning": "^3.0.3",
     "@webiny/build-tools": "0.0.0",
     "rimraf": "^6.1.2",

packages/app/src/features/router/HistoryRouterGateway.test.ts

@@ -1,7 +1,7 @@
 import { describe, it, beforeEach, expect, vi } from "vitest";
 import { createMemoryHistory } from "history";
 import { HistoryRouterGateway } from "./HistoryRouterGateway.js";
-import { generateUrl } from "./generateUrl.js";
+import { RouteUrl } from "./RouteUrl.js";
 
 const wait = () => new Promise(resolve => setTimeout(resolve, 10));
 
@@ -89,11 +89,11 @@ describe("Router Gateway", () => {
 
     it("should generate route URLs", async () => {
         const urls = [
-            generateUrl("/"),
-            generateUrl("/login", {}),
-            generateUrl("/login", { redirect: "/", reason: "login" }),
-            generateUrl("/dynamic-route/:name", { name: "cars" }),
-            generateUrl("/dynamic-route", { folderId: "696556831e485d00027a1a0b#0001" })
+            RouteUrl.fromPattern("/"),
+            RouteUrl.fromPattern("/login", {}),
+            RouteUrl.fromPattern("/login", { redirect: "/", reason: "login" }),
+            RouteUrl.fromPattern("/dynamic-route/:name", { name: "cars" }),
+            RouteUrl.fromPattern("/dynamic-route", { folderId: "696556831e485d00027a1a0b#0001" })
         ];
         expect(urls).toEqual([
             "/",
@@ -103,4 +103,98 @@ describe("Router Gateway", () => {
             "/dynamic-route?folderId=696556831e485d00027a1a0b%230001"
         ]);
     });
+
+    it("should handle baseUrl for route matching and URL generation", async () => {
+        const spyFileManager = vi.fn();
+        const spyHome = vi.fn();
+
+        // Create history with a tenant prefix
+        const history = createMemoryHistory();
+        history.replace("/tenant123/__unknown__");
+
+        const gateway = new HistoryRouterGateway(history, "/tenant123");
+        gateway.setRoutes([
+            { name: "home", path: "/", onMatch: spyHome },
+            { name: "fileManager", path: "/file-manager", onMatch: spyFileManager }
+        ]);
+
+        // Navigate to /tenant123/file-manager
+        history.push("/tenant123/file-manager");
+        await wait();
+
+        // Should match the /file-manager route
+        expect(spyFileManager).toHaveBeenCalledTimes(1);
+        expect(spyFileManager).toHaveBeenCalledWith({
+            name: "fileManager",
+            path: "/file-manager",
+            pathname: "/tenant123/file-manager",
+            params: {}
+        });
+
+        // Test URL generation with baseUrl
+        const urlWithBase = RouteUrl.fromPattern("/file-manager", {}, "/tenant123");
+        expect(urlWithBase).toBe("/tenant123/file-manager");
+
+        const urlWithBaseAndParams = RouteUrl.fromPattern(
+            "/file-manager",
+            { folder: "abc" },
+            "/tenant123"
+        );
+        expect(urlWithBaseAndParams).toBe("/tenant123/file-manager?folder=abc");
+    });
+
+    it("should properly sort routes with wildcards always at the bottom", async () => {
+        const spyWildcard = vi.fn();
+        const spySpecific = vi.fn();
+        const spyHome = vi.fn();
+
+        const history = createMemoryHistory();
+        // Start at a non-matching path to avoid initial route resolution
+        history.replace("/initial");
+
+        const gateway = new HistoryRouterGateway(history, "");
+
+        // Add wildcard first, then home route
+        // Note: setRoutes will trigger route resolution for current path (/initial)
+        gateway.setRoutes([
+            { name: "wildcard", path: "*", onMatch: spyWildcard },
+            { name: "home", path: "/", onMatch: spyHome }
+        ]);
+
+        // Wildcard should have matched /initial
+        expect(spyWildcard).toHaveBeenCalledTimes(1);
+        vi.clearAllMocks();
+
+        // Now add a specific route after the wildcard - this should re-sort and keep wildcard at bottom
+        // Note: setRoutes will trigger route resolution again for /initial, matching wildcard again
+        gateway.setRoutes([{ name: "specific", path: "/specific-route", onMatch: spySpecific }]);
+
+        // Wildcard should match /initial again after re-sorting
+        expect(spyWildcard).toHaveBeenCalledTimes(1);
+        vi.clearAllMocks();
+
+        // Navigate to the specific route
+        history.push("/specific-route");
+        await wait();
+
+        // Should match the specific route, not the wildcard
+        expect(spySpecific).toHaveBeenCalledTimes(1);
+        expect(spyWildcard).toHaveBeenCalledTimes(0);
+        expect(spyHome).toHaveBeenCalledTimes(0);
+
+        // Navigate to home
+        history.push("/");
+        await wait();
+
+        // Should match home route
+        expect(spyHome).toHaveBeenCalledTimes(1);
+        expect(spyWildcard).toHaveBeenCalledTimes(0);
+
+        // Navigate to unknown route
+        history.push("/unknown");
+        await wait();
+
+        // Should match wildcard
+        expect(spyWildcard).toHaveBeenCalledTimes(1);
+    });
 });

packages/app/src/features/router/HistoryRouterGateway.ts

@@ -1,44 +1,19 @@
 import type { z } from "zod";
 import type { History } from "history";
-import UniversalRouter, {
-    RouterContext,
-    RouteParams as UniversalRouteParams
-} from "universal-router";
-import type { MatchedRoute, RouteDefinition, OnRouteExit } from "./abstractions.js";
+import type { RouteDefinition, OnRouteExit } from "./abstractions.js";
 import { RouterGateway } from "./abstractions.js";
-import { generateUrl } from "./generateUrl.js";
-
-type RouteResolveResult = [MatchedRoute, RouteDefinition["onMatch"]];
-
-interface RouteDefinitionWithAction extends RouteDefinition {
-    action(context: RouterContext, params: UniversalRouteParams): RouteResolveResult;
-}
+import { RouteUrl } from "./RouteUrl.js";
+import { Router } from "./Router.js";
 
 export class HistoryRouterGateway implements RouterGateway.Interface {
     private readonly history: History;
-    private readonly routes: RouteDefinitionWithAction[] = [];
-    private readonly router: UniversalRouter<RouteResolveResult>;
+    private readonly router: Router;
     private stopListening: () => void;
     private unblock: (() => void) | undefined;
-    private currentRoute: MatchedRoute | undefined;
 
     constructor(history: History, baseUrl: string) {
         this.history = history;
-        this.router = new UniversalRouter<RouteResolveResult>(this.routes, {
-            baseUrl,
-            resolveRoute: (context, params) => {
-                if (!context.path) {
-                    return context.next();
-                }
-
-                if (!context.route.action) {
-                    return undefined;
-                }
-
-                return context.route.action(context, params);
-            },
-            errorHandler: () => undefined
-        });
+        this.router = new Router(baseUrl);
 
         this.stopListening = history.listen(async ({ location }) => {
             const queryParams = Object.fromEntries(new URLSearchParams(location.search).entries());
@@ -51,27 +26,18 @@ export class HistoryRouterGateway implements RouterGateway.Interface {
     }
 
     goToRoute(name: string, params: z.ZodTypeAny): void {
-        const route = this.routes.find(r => r.name === name);
+        const route = this.router.findRoute(name);
         if (!route) {
             console.warn(`Route "${name}" not found.`);
             return;
         }
 
-        this.history.push(generateUrl(route.path, params));
+        const baseUrl = this.router.getBaseUrl();
+        this.history.push(RouteUrl.fromPattern(route.path, params, baseUrl));
     }
 
     setRoutes(routes: RouteDefinition[]) {
-        routes.forEach(route => {
-            const index = this.routes.findIndex(r => r.name === route.name);
-
-            if (index > -1) {
-                this.routes[index] = this.routeWithAction(route);
-            } else {
-                this.routes.push(this.routeWithAction(route));
-            }
-        });
-
-        this.sortRoutes(this.routes);
+        this.router.setRoutes(routes);
 
         const queryParams = Object.fromEntries(
             new URLSearchParams(this.history.location.search).entries()
@@ -89,67 +55,17 @@ export class HistoryRouterGateway implements RouterGateway.Interface {
         this.history.push(url);
     }
 
-    private routeWithAction(route: RouteDefinition): RouteDefinitionWithAction {
-        return {
-            ...route,
-            path: route.path === "*" ? "(.*)" : route.path,
-            action: (context, params) => {
-                const matchedRoute = {
-                    name: route.name,
-                    path: route.path,
-                    pathname: context.pathname,
-                    params: { ...params, ...context.queryParams }
-                };
-
-                const onMatch = async (matchedRoute: MatchedRoute) => {
-                    route.onMatch(matchedRoute);
-                };
-
-                return [matchedRoute, onMatch];
-            }
-        };
-    }
-
     private async resolvePathname(pathname: string, queryParams?: Record<string, unknown>) {
-        const result = await this.router.resolve({ pathname, queryParams });
+        const result = this.router.resolve(pathname, queryParams);
         if (!result) {
             return;
         }
 
-        const [matchedRoute, onMatch] = result;
-
-        this.currentRoute = matchedRoute;
+        const { matchedRoute, onMatch } = result;
 
         onMatch(matchedRoute);
     }
 
-    private sortRoutes(routes: RouteDefinition[]) {
-        const INDEX_PATH = "/";
-        const MATCH_ALL = "(.*)";
-
-        routes.sort((a, b) => {
-            const pathA = a.path || MATCH_ALL;
-            const pathB = b.path || MATCH_ALL;
-
-            // This will sort paths at the very bottom of the list
-            if (pathA === INDEX_PATH && pathB === MATCH_ALL) {
-                return -1;
-            }
-
-            // This will push * and / to the bottom of the list
-            if (pathA === MATCH_ALL || pathA === INDEX_PATH) {
-                return 1;
-            }
-
-            // This will push * and / to the bottom of the list
-            if ([MATCH_ALL, INDEX_PATH].includes(pathB)) {
-                return -1;
-            }
-
-            return 0;
-        });
-    }
-
     private guardRouteExit(onRouteExit: OnRouteExit): void {
         if (this.unblock) {
             // Remove existing blocker before installing a new one.