@vaadin/hilla-file-router 24.4.0-alpha21 → 24.4.0-alpha22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/hilla-file-router",
-  "version": "24.4.0-alpha21",
+  "version": "24.4.0-alpha22",
   "description": "Hilla file-based router",
   "main": "index.js",
   "module": "index.js",
@@ -80,8 +80,8 @@
     "type-fest": "^4.9.0"
   },
   "dependencies": {
-    "@vaadin/hilla-generator-utils": "24.4.0-alpha21",
-    "@vaadin/hilla-react-auth": "24.4.0-alpha21",
+    "@vaadin/hilla-generator-utils": "24.4.0-alpha22",
+    "@vaadin/hilla-react-auth": "24.4.0-alpha22",
     "react": "^18.2.0",
     "rollup": "^4.12.0",
     "typescript": "5.3.2"

package/runtime/RouterConfigurationBuilder.d.ts

@@ -1,6 +1,11 @@
 import { type ComponentType } from 'react';
 import { type RouteObject } from 'react-router-dom';
-import type { AgnosticRoute, RouterConfiguration } from '../types.js';
+import type { AgnosticRoute, RouterConfiguration, ViewConfig } from '../types.js';
+interface RouteBase {
+    path?: string;
+    children?: readonly this[];
+}
+type RouteTransformer<T> = (original: RouteObject | undefined, overriding: T | undefined, children?: readonly RouteObject[]) => RouteObject;
 /**
  * A builder for creating a Vaadin-specific router for React with
  * authentication and server routes support.
@@ -13,7 +18,7 @@ export declare class RouterConfigurationBuilder {
      *
      * @param routes - A list of routes to add to the current list.
      */
-    withReactRoutes(...routes: readonly RouteObject[]): this;
+    withReactRoutes(routes: readonly RouteObject[]): this;
     /**
      * Adds the given file routes to the current list of routes. All the routes
      * are transformed to React RouterObjects and deeply merged to preserve the
@@ -21,15 +26,17 @@ export declare class RouterConfigurationBuilder {
      *
      * @param routes - A list of routes to add to the current list.
      */
-    withFileRoutes(...routes: readonly AgnosticRoute[]): this;
+    withFileRoutes(routes: readonly AgnosticRoute[]): this;
     /**
      * Adds the given server route element to each branch of the current list of
      * routes.
      *
      * @param component - The React component to add to each branch of the
      * current list of routes.
+     * @param config - An optional configuration that will be applied to
+     * each fallback component.
      */
-    withFallback(component: ComponentType): this;
+    withFallback(component: ComponentType, config?: ViewConfig): this;
     /**
      * Protects all the routes that require authentication. For more details see
      * {@link @vaadin/hilla-react-auth#protectRoutes} function.
@@ -38,9 +45,12 @@ export declare class RouterConfigurationBuilder {
      * and the user is not authenticated.
      */
     protect(redirectPath?: string): this;
+    update<T extends RouteBase>(routes: undefined, callback: RouteTransformer<undefined>): this;
+    update<T extends RouteBase>(routes: readonly T[], callback?: RouteTransformer<T>): this;
     /**
      * Builds the router with the current list of routes.
      */
     build(): RouterConfiguration;
 }
+export {};
 //# sourceMappingURL=RouterConfigurationBuilder.d.ts.map

package/runtime/RouterConfigurationBuilder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RouterConfigurationBuilder.d.ts","sourceRoot":"","sources":["../src/runtime/RouterConfigurationBuilder.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,aAAa,EAAoC,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAuB,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEzE,OAAO,KAAK,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AA4BtE;;;GAGG;AACH,qBAAa,0BAA0B;;IAIrC;;;;;OAKG;IACH,eAAe,CAAC,GAAG,MAAM,EAAE,SAAS,WAAW,EAAE,GAAG,IAAI;IAYxD;;;;;;OAMG;IACH,cAAc,CAAC,GAAG,MAAM,EAAE,SAAS,aAAa,EAAE,GAAG,IAAI;IAazD;;;;;;OAMG;IACH,YAAY,CAAC,SAAS,EAAE,aAAa,GAAG,IAAI;IA2B5C;;;;;;OAMG;IACH,OAAO,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI;IAKpC;;OAEG;IACH,KAAK,IAAI,mBAAmB;CAS7B"}
+{"version":3,"file":"RouterConfigurationBuilder.d.ts","sourceRoot":"","sources":["../src/runtime/RouterConfigurationBuilder.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAiB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAuB,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGzE,OAAO,KAAK,EAAE,aAAa,EAAuB,mBAAmB,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEvG,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,IAAI,EAAE,CAAC;CAC5B;AAQD,KAAK,gBAAgB,CAAC,CAAC,IAAI,CACzB,QAAQ,EAAE,WAAW,GAAG,SAAS,EACjC,UAAU,EAAE,CAAC,GAAG,SAAS,EACzB,QAAQ,CAAC,EAAE,SAAS,WAAW,EAAE,KAC9B,WAAW,CAAC;AAEjB;;;GAGG;AACH,qBAAa,0BAA0B;;IAGrC;;;;;OAKG;IACH,eAAe,CAAC,MAAM,EAAE,SAAS,WAAW,EAAE,GAAG,IAAI;IAIrD;;;;;;OAMG;IACH,cAAc,CAAC,MAAM,EAAE,SAAS,aAAa,EAAE,GAAG,IAAI;IA0BtD;;;;;;;;OAQG;IACH,YAAY,CAAC,SAAS,EAAE,aAAa,EAAE,MAAM,CAAC,EAAE,UAAU,GAAG,IAAI;IAuBjE;;;;;;OAMG;IACH,OAAO,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI;IAUpC,MAAM,CAAC,CAAC,SAAS,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,gBAAgB,CAAC,SAAS,CAAC,GAAG,IAAI;IAC3F,MAAM,CAAC,CAAC,SAAS,SAAS,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,EAAE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,IAAI;IAkDvF;;OAEG;IACH,KAAK,IAAI,mBAAmB;CAS7B"}

package/runtime/RouterConfigurationBuilder.js

@@ -1,40 +1,21 @@
-import { protectRoutes } from "@vaadin/hilla-react-auth";
+import { protectRoute } from "@vaadin/hilla-react-auth";
 import { createElement } from "react";
 import { createBrowserRouter } from "react-router-dom";
-import { transformTreeSync } from "../shared/transformTree.js";
-import { toReactRouter } from "./toReactRouter.js";
-function mergeRoutes(a, b) {
-  return b.reduce(
-    (result, route) => {
-      const existingRoute = result.find((r) => r.path === route.path);
-      if (existingRoute) {
-        Object.assign(existingRoute, route);
-        existingRoute.children = existingRoute.children ? mergeRoutes(existingRoute.children, route.children ?? []) : route.children;
-      } else {
-        result.push(route);
-      }
-      return result;
-    },
-    [...a]
-  );
+import { convertComponentNameToTitle } from "../shared/convertComponentNameToTitle.js";
+import { transformTree } from "../shared/transformTree.js";
+function isReactRouteModule(module) {
+  return module ? "default" in module && typeof module.default === "function" : true;
 }
 class RouterConfigurationBuilder {
-  #initializers = [];
-  #finalizers = [];
+  #modifiers = [];
   /**
    * Adds the given routes to the current list of routes. All the routes are
    * deeply merged to preserve the path uniqueness.
    *
    * @param routes - A list of routes to add to the current list.
    */
-  withReactRoutes(...routes) {
-    this.#initializers.push((existingRoutes) => {
-      if (!existingRoutes.length) {
-        return routes;
-      }
-      return mergeRoutes(existingRoutes, routes);
-    });
-    return this;
+  withReactRoutes(routes) {
+    return this.update(routes);
   }
   /**
    * Adds the given file routes to the current list of routes. All the routes
@@ -43,15 +24,27 @@ class RouterConfigurationBuilder {
    *
    * @param routes - A list of routes to add to the current list.
    */
-  withFileRoutes(...routes) {
-    this.#initializers.push((existingRoutes) => {
-      const reactRoutes = routes.map(toReactRouter);
-      if (!existingRoutes.length) {
-        return reactRoutes;
+  withFileRoutes(routes) {
+    return this.update(routes, (original, added, children) => {
+      if (added) {
+        const { module, path } = added;
+        if (!isReactRouteModule(module)) {
+          throw new Error(`The module for the "${path}" section doesn't have the React component exported by default`);
+        }
+        const title = module?.config?.title ?? convertComponentNameToTitle(module?.default);
+        return {
+          ...original,
+          path: module?.config?.route ?? path,
+          element: module?.default ? createElement(module.default) : void 0,
+          children,
+          handle: {
+            ...module?.config,
+            title
+          }
+        };
       }
-      return mergeRoutes(existingRoutes, reactRoutes);
+      return original;
     });
-    return this;
   }
   /**
    * Adds the given server route element to each branch of the current list of
@@ -59,25 +52,22 @@ class RouterConfigurationBuilder {
    *
    * @param component - The React component to add to each branch of the
    * current list of routes.
+   * @param config - An optional configuration that will be applied to
+   * each fallback component.
    */
-  withFallback(component) {
-    this.#finalizers.push((existingRoutes) => {
-      const createServerRoute = () => ({ path: "*", element: createElement(component) });
-      const newRoutes = existingRoutes.map(
-        (route) => transformTreeSync(
-          route,
-          (r) => r.children?.values(),
-          (r, children) => children ? (
-            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-            {
-              ...r,
-              children: [...children, createServerRoute()]
-            }
-          ) : r
-        )
-      );
-      newRoutes.push(createServerRoute());
-      return newRoutes;
+  withFallback(component, config) {
+    const fallbackRoutes = [
+      { path: "*", element: createElement(component), handle: config },
+      { index: true, element: createElement(component), handle: config }
+    ];
+    this.update(fallbackRoutes, (original, added, children) => {
+      if (original) {
+        return children ? {
+          ...original,
+          children: [...children, ...fallbackRoutes]
+        } : original;
+      }
+      return added;
     });
     return this;
   }
@@ -89,15 +79,56 @@ class RouterConfigurationBuilder {
    * and the user is not authenticated.
    */
   protect(redirectPath) {
-    this.#finalizers.push((existingRoutes) => protectRoutes(existingRoutes, redirectPath));
+    this.update(void 0, (route, _, children) => {
+      const finalRoute = protectRoute(route, redirectPath);
+      finalRoute.children = children;
+      return finalRoute;
+    });
+    return this;
+  }
+  update(routes, callback = (original, overriding, children) => ({
+    ...original,
+    ...overriding,
+    children
+  })) {
+    this.#modifiers.push(
+      (existingRoutes) => transformTree(
+        [existingRoutes, routes],
+        ([original, added], next) => {
+          if (original && added) {
+            const originalMap = new Map(original.map((route) => [route.path, route]));
+            const addedMap = new Map(added.map((route) => [route.path, route]));
+            const paths = /* @__PURE__ */ new Set([...originalMap.keys(), ...addedMap.keys()]);
+            for (const path of paths) {
+              const originalRoute = originalMap.get(path);
+              const addedRoute = addedMap.get(path);
+              let route;
+              if (originalRoute && addedRoute) {
+                route = callback(originalRoute, addedRoute, next(originalRoute.children, addedRoute.children));
+              } else if (originalRoute) {
+                route = callback(originalRoute, void 0, next(originalRoute.children, void 0));
+              } else {
+                route = callback(void 0, addedRoute, next(void 0, addedRoute.children));
+              }
+              originalMap.set(path, route);
+            }
+            return [...originalMap.values()];
+          } else if (original) {
+            return original.map((route) => callback(route, void 0, next(route.children, void 0)));
+          } else if (added) {
+            return added.map((route) => callback(void 0, route, next(void 0, route.children)));
+          }
+          return void 0;
+        }
+      )
+    );
     return this;
   }
   /**
    * Builds the router with the current list of routes.
    */
   build() {
-    let routes = this.#initializers.reduce((acc, callback) => callback(acc), []);
-    routes = this.#finalizers.reduce((acc, callback) => callback(acc), routes);
+    const routes = this.#modifiers.reduce((acc, mod) => mod(acc) ?? acc, void 0) ?? [];
     return {
       routes,
       router: createBrowserRouter([...routes])

package/runtime/RouterConfigurationBuilder.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/runtime/RouterConfigurationBuilder.ts"],
-  "sourcesContent": ["import { protectRoutes, type RouteObjectWithAuth } from '@vaadin/hilla-react-auth';\nimport { type ComponentType, createElement, type ReactElement } from 'react';\nimport { createBrowserRouter, type RouteObject } from 'react-router-dom';\nimport { transformTreeSync } from '../shared/transformTree.js';\nimport type { AgnosticRoute, RouterConfiguration } from '../types.js';\nimport { toReactRouter } from './toReactRouter.js';\n\n/**\n * Deeply merges two lists of routes. If the specific path is already present,\n * the route is merged, otherwise the new routes are added to the list.\n *\n * @param a - The first list of routes.\n * @param b - The second list of routes.\n */\nfunction mergeRoutes(a: readonly RouteObject[], b: readonly RouteObject[]): RouteObject[] {\n  return b.reduce(\n    (result, route) => {\n      const existingRoute = result.find((r) => r.path === route.path);\n      if (existingRoute) {\n        Object.assign(existingRoute, route);\n        existingRoute.children = existingRoute.children\n          ? mergeRoutes(existingRoute.children, route.children ?? [])\n          : route.children;\n      } else {\n        result.push(route);\n      }\n      return result;\n    },\n    [...a],\n  );\n}\n\n/**\n * A builder for creating a Vaadin-specific router for React with\n * authentication and server routes support.\n */\nexport class RouterConfigurationBuilder {\n  readonly #initializers: Array<(routes: readonly RouteObject[]) => readonly RouteObject[]> = [];\n  readonly #finalizers: Array<(routes: readonly RouteObject[]) => readonly RouteObject[]> = [];\n\n  /**\n   * Adds the given routes to the current list of routes. All the routes are\n   * deeply merged to preserve the path uniqueness.\n   *\n   * @param routes - A list of routes to add to the current list.\n   */\n  withReactRoutes(...routes: readonly RouteObject[]): this {\n    this.#initializers.push((existingRoutes) => {\n      if (!existingRoutes.length) {\n        return routes;\n      }\n\n      return mergeRoutes(existingRoutes, routes);\n    });\n\n    return this;\n  }\n\n  /**\n   * Adds the given file routes to the current list of routes. All the routes\n   * are transformed to React RouterObjects and deeply merged to preserve the\n   * path uniqueness.\n   *\n   * @param routes - A list of routes to add to the current list.\n   */\n  withFileRoutes(...routes: readonly AgnosticRoute[]): this {\n    this.#initializers.push((existingRoutes) => {\n      const reactRoutes = routes.map(toReactRouter);\n\n      if (!existingRoutes.length) {\n        return reactRoutes;\n      }\n\n      return mergeRoutes(existingRoutes, reactRoutes);\n    });\n    return this;\n  }\n\n  /**\n   * Adds the given server route element to each branch of the current list of\n   * routes.\n   *\n   * @param component - The React component to add to each branch of the\n   * current list of routes.\n   */\n  withFallback(component: ComponentType): this {\n    this.#finalizers.push((existingRoutes) => {\n      const createServerRoute = () => ({ path: '*', element: createElement(component) });\n\n      const newRoutes = existingRoutes.map((route) =>\n        transformTreeSync<RouteObject, RouteObject>(\n          route,\n          (r) => r.children?.values(),\n          (r, children) =>\n            children\n              ? // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n                ({\n                  ...r,\n                  children: [...children, createServerRoute()],\n                } as RouteObject)\n              : r,\n        ),\n      );\n\n      newRoutes.push(createServerRoute());\n\n      return newRoutes;\n    });\n\n    return this;\n  }\n\n  /**\n   * Protects all the routes that require authentication. For more details see\n   * {@link @vaadin/hilla-react-auth#protectRoutes} function.\n   *\n   * @param redirectPath - the path to redirect to if the route is protected\n   * and the user is not authenticated.\n   */\n  protect(redirectPath?: string): this {\n    this.#finalizers.push((existingRoutes) => protectRoutes(existingRoutes as RouteObjectWithAuth[], redirectPath));\n    return this;\n  }\n\n  /**\n   * Builds the router with the current list of routes.\n   */\n  build(): RouterConfiguration {\n    let routes = this.#initializers.reduce<readonly RouteObject[]>((acc, callback) => callback(acc), []);\n    routes = this.#finalizers.reduce<readonly RouteObject[]>((acc, callback) => callback(acc), routes);\n\n    return {\n      routes,\n      router: createBrowserRouter([...routes]),\n    };\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,qBAA+C;AACxD,SAA6B,qBAAwC;AACrE,SAAS,2BAA6C;AACtD,SAAS,yBAAyB;AAElC,SAAS,qBAAqB;AAS9B,SAAS,YAAY,GAA2B,GAA0C;AACxF,SAAO,EAAE;AAAA,IACP,CAAC,QAAQ,UAAU;AACjB,YAAM,gBAAgB,OAAO,KAAK,CAAC,MAAM,EAAE,SAAS,MAAM,IAAI;AAC9D,UAAI,eAAe;AACjB,eAAO,OAAO,eAAe,KAAK;AAClC,sBAAc,WAAW,cAAc,WACnC,YAAY,cAAc,UAAU,MAAM,YAAY,CAAC,CAAC,IACxD,MAAM;AAAA,MACZ,OAAO;AACL,eAAO,KAAK,KAAK;AAAA,MACnB;AACA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,GAAG,CAAC;AAAA,EACP;AACF;AAMO,MAAM,2BAA2B;AAAA,EAC7B,gBAAmF,CAAC;AAAA,EACpF,cAAiF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ3F,mBAAmB,QAAsC;AACvD,SAAK,cAAc,KAAK,CAAC,mBAAmB;AAC1C,UAAI,CAAC,eAAe,QAAQ;AAC1B,eAAO;AAAA,MACT;AAEA,aAAO,YAAY,gBAAgB,MAAM;AAAA,IAC3C,CAAC;AAED,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,kBAAkB,QAAwC;AACxD,SAAK,cAAc,KAAK,CAAC,mBAAmB;AAC1C,YAAM,cAAc,OAAO,IAAI,aAAa;AAE5C,UAAI,CAAC,eAAe,QAAQ;AAC1B,eAAO;AAAA,MACT;AAEA,aAAO,YAAY,gBAAgB,WAAW;AAAA,IAChD,CAAC;AACD,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,aAAa,WAAgC;AAC3C,SAAK,YAAY,KAAK,CAAC,mBAAmB;AACxC,YAAM,oBAAoB,OAAO,EAAE,MAAM,KAAK,SAAS,cAAc,SAAS,EAAE;AAEhF,YAAM,YAAY,eAAe;AAAA,QAAI,CAAC,UACpC;AAAA,UACE;AAAA,UACA,CAAC,MAAM,EAAE,UAAU,OAAO;AAAA,UAC1B,CAAC,GAAG,aACF;AAAA;AAAA,YAEK;AAAA,cACC,GAAG;AAAA,cACH,UAAU,CAAC,GAAG,UAAU,kBAAkB,CAAC;AAAA,YAC7C;AAAA,cACA;AAAA,QACR;AAAA,MACF;AAEA,gBAAU,KAAK,kBAAkB,CAAC;AAElC,aAAO;AAAA,IACT,CAAC;AAED,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,QAAQ,cAA6B;AACnC,SAAK,YAAY,KAAK,CAAC,mBAAmB,cAAc,gBAAyC,YAAY,CAAC;AAC9G,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,QAA6B;AAC3B,QAAI,SAAS,KAAK,cAAc,OAA+B,CAAC,KAAK,aAAa,SAAS,GAAG,GAAG,CAAC,CAAC;AACnG,aAAS,KAAK,YAAY,OAA+B,CAAC,KAAK,aAAa,SAAS,GAAG,GAAG,MAAM;AAEjG,WAAO;AAAA,MACL;AAAA,MACA,QAAQ,oBAAoB,CAAC,GAAG,MAAM,CAAC;AAAA,IACzC;AAAA,EACF;AACF;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/consistent-type-assertions */\nimport { protectRoute } from '@vaadin/hilla-react-auth';\nimport { type ComponentType, createElement } from 'react';\nimport { createBrowserRouter, type RouteObject } from 'react-router-dom';\nimport { convertComponentNameToTitle } from '../shared/convertComponentNameToTitle.js';\nimport { transformTree } from '../shared/transformTree.js';\nimport type { AgnosticRoute, Module, RouteModule, RouterConfiguration, ViewConfig } from '../types.js';\n\ninterface RouteBase {\n  path?: string;\n  children?: readonly this[];\n}\n\ntype RoutesModifier = (routes: readonly RouteObject[] | undefined) => readonly RouteObject[] | undefined;\n\nfunction isReactRouteModule(module?: Module): module is RouteModule<ComponentType> | undefined {\n  return module ? 'default' in module && typeof module.default === 'function' : true;\n}\n\ntype RouteTransformer<T> = (\n  original: RouteObject | undefined,\n  overriding: T | undefined,\n  children?: readonly RouteObject[],\n) => RouteObject;\n\n/**\n * A builder for creating a Vaadin-specific router for React with\n * authentication and server routes support.\n */\nexport class RouterConfigurationBuilder {\n  readonly #modifiers: RoutesModifier[] = [];\n\n  /**\n   * Adds the given routes to the current list of routes. All the routes are\n   * deeply merged to preserve the path uniqueness.\n   *\n   * @param routes - A list of routes to add to the current list.\n   */\n  withReactRoutes(routes: readonly RouteObject[]): this {\n    return this.update(routes);\n  }\n\n  /**\n   * Adds the given file routes to the current list of routes. All the routes\n   * are transformed to React RouterObjects and deeply merged to preserve the\n   * path uniqueness.\n   *\n   * @param routes - A list of routes to add to the current list.\n   */\n  withFileRoutes(routes: readonly AgnosticRoute[]): this {\n    return this.update(routes, (original, added, children) => {\n      if (added) {\n        const { module, path } = added;\n        if (!isReactRouteModule(module)) {\n          throw new Error(`The module for the \"${path}\" section doesn't have the React component exported by default`);\n        }\n\n        const title = module?.config?.title ?? convertComponentNameToTitle(module?.default);\n\n        return {\n          ...original,\n          path: module?.config?.route ?? path,\n          element: module?.default ? createElement(module.default) : undefined,\n          children: children as RouteObject[] | undefined,\n          handle: {\n            ...module?.config,\n            title,\n          },\n        } as RouteObject;\n      }\n\n      return original!;\n    });\n  }\n\n  /**\n   * Adds the given server route element to each branch of the current list of\n   * routes.\n   *\n   * @param component - The React component to add to each branch of the\n   * current list of routes.\n   * @param config - An optional configuration that will be applied to\n   * each fallback component.\n   */\n  withFallback(component: ComponentType, config?: ViewConfig): this {\n    // Fallback adds two routes, so that the index (empty path) has a fallback too\n    const fallbackRoutes = [\n      { path: '*', element: createElement(component), handle: config },\n      { index: true, element: createElement(component), handle: config },\n    ];\n\n    this.update(fallbackRoutes, (original, added, children) => {\n      if (original) {\n        return children\n          ? ({\n              ...original,\n              children: [...children, ...fallbackRoutes],\n            } as RouteObject)\n          : original;\n      }\n\n      return added!;\n    });\n\n    return this;\n  }\n\n  /**\n   * Protects all the routes that require authentication. For more details see\n   * {@link @vaadin/hilla-react-auth#protectRoutes} function.\n   *\n   * @param redirectPath - the path to redirect to if the route is protected\n   * and the user is not authenticated.\n   */\n  protect(redirectPath?: string): this {\n    this.update(undefined, (route, _, children) => {\n      const finalRoute = protectRoute(route!, redirectPath);\n      finalRoute.children = children as RouteObject[] | undefined;\n      return finalRoute;\n    });\n\n    return this;\n  }\n\n  update<T extends RouteBase>(routes: undefined, callback: RouteTransformer<undefined>): this;\n  update<T extends RouteBase>(routes: readonly T[], callback?: RouteTransformer<T>): this;\n  update<T extends RouteBase>(\n    routes: readonly T[] | undefined,\n    callback: RouteTransformer<T | undefined> = (original, overriding, children) =>\n      ({\n        ...original,\n        ...overriding,\n        children,\n      }) as RouteObject,\n  ): this {\n    this.#modifiers.push((existingRoutes) =>\n      transformTree<[readonly RouteObject[] | undefined, readonly T[] | undefined], readonly RouteObject[] | undefined>(\n        [existingRoutes, routes],\n        ([original, added], next) => {\n          if (original && added) {\n            const originalMap = new Map(original.map((route) => [route.path, route]));\n            const addedMap = new Map(added.map((route) => [route.path, route]));\n\n            const paths = new Set([...originalMap.keys(), ...addedMap.keys()]);\n\n            for (const path of paths) {\n              const originalRoute = originalMap.get(path);\n              const addedRoute = addedMap.get(path);\n\n              let route: RouteObject;\n              if (originalRoute && addedRoute) {\n                route = callback(originalRoute, addedRoute, next(originalRoute.children, addedRoute.children));\n              } else if (originalRoute) {\n                route = callback(originalRoute, undefined, next(originalRoute.children, undefined));\n              } else {\n                route = callback(undefined, addedRoute, next(undefined, addedRoute!.children));\n              }\n\n              originalMap.set(path, route);\n            }\n\n            return [...originalMap.values()];\n          } else if (original) {\n            return original.map((route) => callback(route, undefined, next(route.children, undefined)));\n          } else if (added) {\n            return added.map((route) => callback(undefined, route, next(undefined, route.children)));\n          }\n\n          return undefined;\n        },\n      ),\n    );\n    return this;\n  }\n\n  /**\n   * Builds the router with the current list of routes.\n   */\n  build(): RouterConfiguration {\n    const routes =\n      this.#modifiers.reduce<readonly RouteObject[] | undefined>((acc, mod) => mod(acc) ?? acc, undefined) ?? [];\n\n    return {\n      routes,\n      router: createBrowserRouter([...routes]),\n    };\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/runtime/createMenuItems.d.ts

@@ -1,7 +1,9 @@
 import type { MenuItem } from '../types.js';
 /**
  * Creates menu items from the views provided by the server. The views are sorted according to the
- * {@link ViewConfig.menu.order} and filtered out if they are explicitly excluded via {@link ViewConfig.menu.exclude}.
+ * {@link ViewConfig.menu.order}, filtered out if they are explicitly excluded via {@link ViewConfig.menu.exclude}.
+ * Note that views with no order are put below views with an order. Ties are resolved based on the path string
+ * comparison.
  *
  * @param vaadinObject - The Vaadin object containing the server views.
  * @returns A list of menu items.

package/runtime/createMenuItems.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createMenuItems.d.ts","sourceRoot":"","sources":["../src/runtime/createMenuItems.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAc,MAAM,aAAa,CAAC;AAExD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,YAAY;;;;cAAkC,GAAG,SAAS,QAAQ,EAAE,CAwBnG"}
+{"version":3,"file":"createMenuItems.d.ts","sourceRoot":"","sources":["../src/runtime/createMenuItems.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAc,MAAM,aAAa,CAAC;AAExD;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,YAAY;;;;cAAkC,GAAG,SAAS,QAAQ,EAAE,CA6BnG"}

package/runtime/createMenuItems.js

@@ -1,14 +1,19 @@
 import { RouteParamType } from "../shared/routeParamType.js";
 function createMenuItems(vaadinObject = window.Vaadin) {
+  const collator = new Intl.Collator("en-US");
   return vaadinObject?.server?.views ? Object.entries(vaadinObject.server.views).filter(
     ([_key, value]) => !value.menu?.exclude && !(value.params && Object.values(value.params).some((p) => p === RouteParamType.Required))
-  ).sort(([_a, a], [_b, b]) => (a.menu?.order ?? 0) - (b.menu?.order ?? 0)).map(([path, config]) => {
+  ).map(([path, config]) => {
     const _path = config.params ? Object.keys(config.params).reduce((acc, key) => acc.replaceAll(key, ""), path) : path;
     return {
       to: _path,
       icon: config.menu?.icon,
-      title: config.menu?.title ?? config.title
+      title: config.menu?.title ?? config.title,
+      order: config.menu?.order
     };
+  }).sort((menuA, menuB) => {
+    const ordersDiff = (menuA.order ?? Number.MAX_VALUE) - (menuB.order ?? Number.MAX_VALUE);
+    return ordersDiff !== 0 ? ordersDiff : collator.compare(menuA.to, menuB.to);
   }) : [];
 }
 export {

package/runtime/createMenuItems.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/runtime/createMenuItems.ts"],
-  "sourcesContent": ["import type { VaadinWindow } from '../shared/internal.js';\nimport { RouteParamType } from '../shared/routeParamType.js';\nimport type { MenuItem, ViewConfig } from '../types.js';\n\n/**\n * Creates menu items from the views provided by the server. The views are sorted according to the\n * {@link ViewConfig.menu.order} and filtered out if they are explicitly excluded via {@link ViewConfig.menu.exclude}.\n *\n * @param vaadinObject - The Vaadin object containing the server views.\n * @returns A list of menu items.\n */\nexport function createMenuItems(vaadinObject = (window as VaadinWindow).Vaadin): readonly MenuItem[] {\n  return vaadinObject?.server?.views\n    ? Object.entries(vaadinObject.server.views)\n        // Filter out the views that are explicitly excluded from the menu.\n        .filter(\n          ([_key, value]) =>\n            !value.menu?.exclude &&\n            !(value.params && Object.values(value.params).some((p) => p === RouteParamType.Required)),\n        )\n        // Sort views according to the order specified in the view configuration.\n        .sort(([_a, a], [_b, b]) => (a.menu?.order ?? 0) - (b.menu?.order ?? 0))\n        // Map the views to menu items.\n        .map(([path, config]) => {\n          const _path = config.params\n            ? Object.keys(config.params).reduce((acc, key) => acc.replaceAll(key, ''), path)\n            : path;\n\n          return {\n            to: _path,\n            icon: config.menu?.icon,\n            title: config.menu?.title ?? config.title,\n          };\n        })\n    : [];\n}\n"],
-  "mappings": "AACA,SAAS,sBAAsB;AAUxB,SAAS,gBAAgB,eAAgB,OAAwB,QAA6B;AACnG,SAAO,cAAc,QAAQ,QACzB,OAAO,QAAQ,aAAa,OAAO,KAAK,EAErC;AAAA,IACC,CAAC,CAAC,MAAM,KAAK,MACX,CAAC,MAAM,MAAM,WACb,EAAE,MAAM,UAAU,OAAO,OAAO,MAAM,MAAM,EAAE,KAAK,CAAC,MAAM,MAAM,eAAe,QAAQ;AAAA,EAC3F,EAEC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,SAAS,MAAM,EAAE,MAAM,SAAS,EAAE,EAEtE,IAAI,CAAC,CAAC,MAAM,MAAM,MAAM;AACvB,UAAM,QAAQ,OAAO,SACjB,OAAO,KAAK,OAAO,MAAM,EAAE,OAAO,CAAC,KAAK,QAAQ,IAAI,WAAW,KAAK,EAAE,GAAG,IAAI,IAC7E;AAEJ,WAAO;AAAA,MACL,IAAI;AAAA,MACJ,MAAM,OAAO,MAAM;AAAA,MACnB,OAAO,OAAO,MAAM,SAAS,OAAO;AAAA,IACtC;AAAA,EACF,CAAC,IACH,CAAC;AACP;",
+  "sourcesContent": ["import type { VaadinWindow } from '../shared/internal.js';\nimport { RouteParamType } from '../shared/routeParamType.js';\nimport type { MenuItem, ViewConfig } from '../types.js';\n\n/**\n * Creates menu items from the views provided by the server. The views are sorted according to the\n * {@link ViewConfig.menu.order}, filtered out if they are explicitly excluded via {@link ViewConfig.menu.exclude}.\n * Note that views with no order are put below views with an order. Ties are resolved based on the path string\n * comparison.\n *\n * @param vaadinObject - The Vaadin object containing the server views.\n * @returns A list of menu items.\n */\nexport function createMenuItems(vaadinObject = (window as VaadinWindow).Vaadin): readonly MenuItem[] {\n  const collator = new Intl.Collator('en-US');\n  return vaadinObject?.server?.views\n    ? Object.entries(vaadinObject.server.views)\n        // Filter out the views that are explicitly excluded from the menu.\n        .filter(\n          ([_key, value]) =>\n            !value.menu?.exclude &&\n            !(value.params && Object.values(value.params).some((p) => p === RouteParamType.Required)),\n        )\n        // Map the views to menu items.\n        .map(([path, config]) => {\n          const _path = config.params\n            ? Object.keys(config.params).reduce((acc, key) => acc.replaceAll(key, ''), path)\n            : path;\n\n          return {\n            to: _path,\n            icon: config.menu?.icon,\n            title: config.menu?.title ?? config.title,\n            order: config.menu?.order,\n          };\n        })\n        // Sort views according to the order specified in the view configuration.\n        .sort((menuA, menuB) => {\n          const ordersDiff = (menuA.order ?? Number.MAX_VALUE) - (menuB.order ?? Number.MAX_VALUE);\n          return ordersDiff !== 0 ? ordersDiff : collator.compare(menuA.to, menuB.to);\n        })\n    : [];\n}\n"],
+  "mappings": "AACA,SAAS,sBAAsB;AAYxB,SAAS,gBAAgB,eAAgB,OAAwB,QAA6B;AACnG,QAAM,WAAW,IAAI,KAAK,SAAS,OAAO;AAC1C,SAAO,cAAc,QAAQ,QACzB,OAAO,QAAQ,aAAa,OAAO,KAAK,EAErC;AAAA,IACC,CAAC,CAAC,MAAM,KAAK,MACX,CAAC,MAAM,MAAM,WACb,EAAE,MAAM,UAAU,OAAO,OAAO,MAAM,MAAM,EAAE,KAAK,CAAC,MAAM,MAAM,eAAe,QAAQ;AAAA,EAC3F,EAEC,IAAI,CAAC,CAAC,MAAM,MAAM,MAAM;AACvB,UAAM,QAAQ,OAAO,SACjB,OAAO,KAAK,OAAO,MAAM,EAAE,OAAO,CAAC,KAAK,QAAQ,IAAI,WAAW,KAAK,EAAE,GAAG,IAAI,IAC7E;AAEJ,WAAO;AAAA,MACL,IAAI;AAAA,MACJ,MAAM,OAAO,MAAM;AAAA,MACnB,OAAO,OAAO,MAAM,SAAS,OAAO;AAAA,MACpC,OAAO,OAAO,MAAM;AAAA,IACtB;AAAA,EACF,CAAC,EAEA,KAAK,CAAC,OAAO,UAAU;AACtB,UAAM,cAAc,MAAM,SAAS,OAAO,cAAc,MAAM,SAAS,OAAO;AAC9E,WAAO,eAAe,IAAI,aAAa,SAAS,QAAQ,MAAM,IAAI,MAAM,EAAE;AAAA,EAC5E,CAAC,IACH,CAAC;AACP;",
   "names": []
 }

package/runtime.d.ts

@@ -1,5 +1,4 @@
 export * from './runtime/createRoute.js';
-export * from './runtime/toReactRouter.js';
 export * from './runtime/RouterConfigurationBuilder.js';
 export * from './runtime/useViewConfig.js';
 export * from './runtime/createMenuItems.js';

package/runtime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["src/runtime.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yCAAyC,CAAC;AACxD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC"}
+{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["src/runtime.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,yCAAyC,CAAC;AACxD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC"}

package/runtime.js

@@ -1,5 +1,4 @@
 export * from "./runtime/createRoute.js";
-export * from "./runtime/toReactRouter.js";
 export * from "./runtime/RouterConfigurationBuilder.js";
 export * from "./runtime/useViewConfig.js";
 export * from "./runtime/createMenuItems.js";

package/runtime.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["src/runtime.ts"],
-  "sourcesContent": ["export * from './runtime/createRoute.js';\nexport * from './runtime/toReactRouter.js';\nexport * from './runtime/RouterConfigurationBuilder.js';\nexport * from './runtime/useViewConfig.js';\nexport * from './runtime/createMenuItems.js';\n"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["export * from './runtime/createRoute.js';\nexport * from './runtime/RouterConfigurationBuilder.js';\nexport * from './runtime/useViewConfig.js';\nexport * from './runtime/createMenuItems.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/shared/convertComponentNameToTitle.d.ts

@@ -5,5 +5,5 @@
  *
  * @returns The page title.
  */
-export declare function convertComponentNameToTitle(component?: unknown): string | undefined;
+export declare function convertComponentNameToTitle(component: unknown): string;
 //# sourceMappingURL=convertComponentNameToTitle.d.ts.map

package/shared/convertComponentNameToTitle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"convertComponentNameToTitle.d.ts","sourceRoot":"","sources":["../src/shared/convertComponentNameToTitle.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,wBAAgB,2BAA2B,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAmBnF"}
+{"version":3,"file":"convertComponentNameToTitle.d.ts","sourceRoot":"","sources":["../src/shared/convertComponentNameToTitle.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,wBAAgB,2BAA2B,CAAC,SAAS,EAAE,OAAO,GAAG,MAAM,CAetE"}

package/shared/convertComponentNameToTitle.js

@@ -2,15 +2,12 @@ const viewPattern = /view/giu;
 const upperCaseSplitPattern = /(?=[A-Z])/gu;
 function convertComponentNameToTitle(component) {
   let name;
-  if (typeof component === "string") {
-    name = component;
-  } else if (component && (typeof component === "object" || typeof component === "function") && "name" in component && typeof component.name === "string") {
+  if (component && (typeof component === "object" || typeof component === "function") && "name" in component && typeof component.name === "string") {
     ({ name } = component);
+  } else {
+    name = String(component);
   }
-  if (name) {
-    return name.replace(viewPattern, "").split(upperCaseSplitPattern).join(" ");
-  }
-  return void 0;
+  return name.replace(viewPattern, "").split(upperCaseSplitPattern).join(" ");
 }
 export {
   convertComponentNameToTitle

package/shared/convertComponentNameToTitle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/shared/convertComponentNameToTitle.ts"],
-  "sourcesContent": ["const viewPattern = /view/giu;\nconst upperCaseSplitPattern = /(?=[A-Z])/gu;\n\n/**\n * Converts the name of the component to a page title.\n *\n * @param component - The component to convert the name from.\n *\n * @returns The page title.\n */\nexport function convertComponentNameToTitle(component?: unknown): string | undefined {\n  let name: string | undefined;\n\n  if (typeof component === 'string') {\n    name = component;\n  } else if (\n    component &&\n    (typeof component === 'object' || typeof component === 'function') &&\n    'name' in component &&\n    typeof component.name === 'string'\n  ) {\n    ({ name } = component);\n  }\n\n  if (name) {\n    return name.replace(viewPattern, '').split(upperCaseSplitPattern).join(' ');\n  }\n\n  return undefined;\n}\n"],
-  "mappings": "AAAA,MAAM,cAAc;AACpB,MAAM,wBAAwB;AASvB,SAAS,4BAA4B,WAAyC;AACnF,MAAI;AAEJ,MAAI,OAAO,cAAc,UAAU;AACjC,WAAO;AAAA,EACT,WACE,cACC,OAAO,cAAc,YAAY,OAAO,cAAc,eACvD,UAAU,aACV,OAAO,UAAU,SAAS,UAC1B;AACA,KAAC,EAAE,KAAK,IAAI;AAAA,EACd;AAEA,MAAI,MAAM;AACR,WAAO,KAAK,QAAQ,aAAa,EAAE,EAAE,MAAM,qBAAqB,EAAE,KAAK,GAAG;AAAA,EAC5E;AAEA,SAAO;AACT;",
+  "sourcesContent": ["const viewPattern = /view/giu;\nconst upperCaseSplitPattern = /(?=[A-Z])/gu;\n\n/**\n * Converts the name of the component to a page title.\n *\n * @param component - The component to convert the name from.\n *\n * @returns The page title.\n */\nexport function convertComponentNameToTitle(component: unknown): string {\n  let name: string;\n\n  if (\n    component &&\n    (typeof component === 'object' || typeof component === 'function') &&\n    'name' in component &&\n    typeof component.name === 'string'\n  ) {\n    ({ name } = component);\n  } else {\n    name = String(component);\n  }\n\n  return name.replace(viewPattern, '').split(upperCaseSplitPattern).join(' ');\n}\n"],
+  "mappings": "AAAA,MAAM,cAAc;AACpB,MAAM,wBAAwB;AASvB,SAAS,4BAA4B,WAA4B;AACtE,MAAI;AAEJ,MACE,cACC,OAAO,cAAc,YAAY,OAAO,cAAc,eACvD,UAAU,aACV,OAAO,UAAU,SAAS,UAC1B;AACA,KAAC,EAAE,KAAK,IAAI;AAAA,EACd,OAAO;AACL,WAAO,OAAO,SAAS;AAAA,EACzB;AAEA,SAAO,KAAK,QAAQ,aAAa,EAAE,EAAE,MAAM,qBAAqB,EAAE,KAAK,GAAG;AAC5E;",
   "names": []
 }

package/shared/transformTree.d.ts

@@ -1,12 +1,2 @@
-/**
- * Transforms the whole route tree into a new format.
- *
- * @param node - The route to transform.
- * @param getChildren - A function that returns the children of the route.
- * @param transformer - A function that transforms the route and its children.
- *
- * @returns The transformed route.
- */
-export declare function transformTreeSync<T, U>(node: T, getChildren: (node: T) => IterableIterator<T> | null | undefined, transformer: (node: T, children?: readonly U[]) => U): U;
-export declare function transformTree<T, U>(node: T, getChildren: (node: T) => IterableIterator<T> | null | undefined, transformer: (node: T, children?: readonly U[]) => Promise<U>): Promise<U>;
+export declare function transformTree<T extends readonly unknown[], U>(nodes: T, transformer: (nodes: T, next: (...nodes: T) => U) => U): U;
 //# sourceMappingURL=transformTree.d.ts.map

package/shared/transformTree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transformTree.d.ts","sourceRoot":"","sources":["../src/shared/transformTree.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,CAAC,EACpC,IAAI,EAAE,CAAC,EACP,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,gBAAgB,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,EAChE,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE,SAAS,CAAC,EAAE,KAAK,CAAC,GACnD,CAAC,CAOH;AAED,wBAAsB,aAAa,CAAC,CAAC,EAAE,CAAC,EACtC,IAAI,EAAE,CAAC,EACP,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,gBAAgB,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,EAChE,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE,SAAS,CAAC,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,GAC5D,OAAO,CAAC,CAAC,CAAC,CASZ"}
+{"version":3,"file":"transformTree.d.ts","sourceRoot":"","sources":["../src/shared/transformTree.ts"],"names":[],"mappings":"AAAA,wBAAgB,aAAa,CAAC,CAAC,SAAS,SAAS,OAAO,EAAE,EAAE,CAAC,EAC3D,KAAK,EAAE,CAAC,EACR,WAAW,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,GACrD,CAAC,CAEH"}

package/shared/transformTree.js

@@ -1,19 +1,7 @@
-function transformTreeSync(node, getChildren, transformer) {
-  const children = getChildren(node);
-  return transformer(
-    node,
-    children ? Array.from(children, (child) => transformTreeSync(child, getChildren, transformer)) : void 0
-  );
-}
-async function transformTree(node, getChildren, transformer) {
-  const children = getChildren(node);
-  return transformer(
-    node,
-    children ? await Promise.all(Array.from(children, async (child) => transformTree(child, getChildren, transformer))) : void 0
-  );
+function transformTree(nodes, transformer) {
+  return transformer(nodes, (...n) => transformTree(n, transformer));
 }
 export {
-  transformTree,
-  transformTreeSync
+  transformTree
 };
 //# sourceMappingURL=transformTree.js.map

package/shared/transformTree.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/shared/transformTree.ts"],
-  "sourcesContent": ["/**\n * Transforms the whole route tree into a new format.\n *\n * @param node - The route to transform.\n * @param getChildren - A function that returns the children of the route.\n * @param transformer - A function that transforms the route and its children.\n *\n * @returns The transformed route.\n */\nexport function transformTreeSync<T, U>(\n  node: T,\n  getChildren: (node: T) => IterableIterator<T> | null | undefined,\n  transformer: (node: T, children?: readonly U[]) => U,\n): U {\n  const children = getChildren(node);\n\n  return transformer(\n    node,\n    children ? Array.from(children, (child) => transformTreeSync(child, getChildren, transformer)) : undefined,\n  );\n}\n\nexport async function transformTree<T, U>(\n  node: T,\n  getChildren: (node: T) => IterableIterator<T> | null | undefined,\n  transformer: (node: T, children?: readonly U[]) => Promise<U>,\n): Promise<U> {\n  const children = getChildren(node);\n\n  return transformer(\n    node,\n    children\n      ? await Promise.all(Array.from(children, async (child) => transformTree(child, getChildren, transformer)))\n      : undefined,\n  );\n}\n"],
-  "mappings": "AASO,SAAS,kBACd,MACA,aACA,aACG;AACH,QAAM,WAAW,YAAY,IAAI;AAEjC,SAAO;AAAA,IACL;AAAA,IACA,WAAW,MAAM,KAAK,UAAU,CAAC,UAAU,kBAAkB,OAAO,aAAa,WAAW,CAAC,IAAI;AAAA,EACnG;AACF;AAEA,eAAsB,cACpB,MACA,aACA,aACY;AACZ,QAAM,WAAW,YAAY,IAAI;AAEjC,SAAO;AAAA,IACL;AAAA,IACA,WACI,MAAM,QAAQ,IAAI,MAAM,KAAK,UAAU,OAAO,UAAU,cAAc,OAAO,aAAa,WAAW,CAAC,CAAC,IACvG;AAAA,EACN;AACF;",
+  "sourcesContent": ["export function transformTree<T extends readonly unknown[], U>(\n  nodes: T,\n  transformer: (nodes: T, next: (...nodes: T) => U) => U,\n): U {\n  return transformer(nodes, (...n) => transformTree(n, transformer));\n}\n"],
+  "mappings": "AAAO,SAAS,cACd,OACA,aACG;AACH,SAAO,YAAY,OAAO,IAAI,MAAM,cAAc,GAAG,WAAW,CAAC;AACnE;",
   "names": []
 }

package/types.d.ts

@@ -1,4 +1,4 @@
-import type { createBrowserRouter } from 'react-router-dom';
+import type { createBrowserRouter, RouteObject } from 'react-router-dom';
 
 export type ViewConfig = Readonly<{
   /**
@@ -70,7 +70,7 @@ export type RouteModule<C = unknown> = Module &
 export type AgnosticRoute = Readonly<{
   path: string;
   module?: Module;
-  children?: ReadonlyArray<AgnosticRoute<T>>;
+  children?: readonly AgnosticRoute[];
 }>;
 
 /**
@@ -83,6 +83,6 @@ export type MenuItem = Readonly<{
 }>;
 
 export type RouterConfiguration = Readonly<{
-  routes: readonly RouterObject[];
+  routes: readonly RouteObject[];
   router: ReturnType<typeof createBrowserRouter>;
 }>;

package/vite-plugin/collectRoutesFromFS.d.ts

@@ -3,7 +3,7 @@ export type RouteMeta = Readonly<{
     path: string;
     file?: URL;
     layout?: URL;
-    children?: RouteMeta[];
+    children?: readonly RouteMeta[];
 }>;
 /**
  * Routes collector options.
@@ -35,7 +35,7 @@ export type CollectRoutesOptions = Readonly<{
  * @param dir - The directory to collect routes from.
  * @param options - The options object.
  *
- * @returns The route metadata tree.
+ * @returns The route metadata array.
  */
-export default function collectRoutesFromFS(dir: URL, { extensions, logger, parent }: CollectRoutesOptions): Promise<RouteMeta>;
+export default function collectRoutesFromFS(dir: URL, { extensions, logger, parent }: CollectRoutesOptions): Promise<readonly RouteMeta[]>;
 //# sourceMappingURL=collectRoutesFromFS.d.ts.map

package/vite-plugin/collectRoutesFromFS.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collectRoutesFromFS.d.ts","sourceRoot":"","sources":["../src/vite-plugin/collectRoutesFromFS.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAGnC,MAAM,MAAM,SAAS,GAAG,QAAQ,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,QAAQ,CAAC,EAAE,SAAS,EAAE,CAAC;CACxB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,QAAQ,CAAC;IAC1C;;OAEG;IACH,UAAU,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,GAAG,CAAC;IACb;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAoBH;;;;;;;;;;;;;GAaG;AACH,wBAA8B,mBAAmB,CAC/C,GAAG,EAAE,GAAG,EACR,EAAE,UAAU,EAAE,MAAM,EAAE,MAAY,EAAE,EAAE,oBAAoB,GACzD,OAAO,CAAC,SAAS,CAAC,CA0DpB"}
+{"version":3,"file":"collectRoutesFromFS.d.ts","sourceRoot":"","sources":["../src/vite-plugin/collectRoutesFromFS.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAGnC,MAAM,MAAM,SAAS,GAAG,QAAQ,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,QAAQ,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;CACjC,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,QAAQ,CAAC;IAC1C;;OAEG;IACH,UAAU,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,GAAG,CAAC;IACb;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAoBH;;;;;;;;;;;;;GAaG;AACH,wBAA8B,mBAAmB,CAC/C,GAAG,EAAE,GAAG,EACR,EAAE,UAAU,EAAE,MAAM,EAAE,MAAY,EAAE,EAAE,oBAAoB,GACzD,OAAO,CAAC,SAAS,SAAS,EAAE,CAAC,CA2E/B"}