@vaadin/hilla-file-router 24.4.0-alpha9 → 24.4.0-beta2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/hilla-file-router",
-  "version": "24.4.0-alpha9",
+  "version": "24.4.0-beta2",
   "description": "Hilla file-based router",
   "main": "index.js",
   "module": "index.js",
@@ -8,7 +8,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/vaadin/hilla.git",
-    "directory": "packages/ts/hilla-file-router"
+    "directory": "packages/ts/file-router"
   },
   "keywords": [
     "Hilla",
@@ -26,7 +26,7 @@
     "build:copy": "cd src && copyfiles *.d.ts **/*.d.ts ..",
     "lint": "eslint src test",
     "lint:fix": "eslint src test --fix",
-    "test": "mocha test/**/*.spec.ts --config ../../../.mocharc.cjs",
+    "test": "mocha test/**/*.spec.{ts,tsx} --config ../../../.mocharc.cjs",
     "test:coverage": "c8 -c ../../../.c8rc.json npm test",
     "typecheck": "tsc --noEmit"
   },
@@ -80,7 +80,8 @@
     "type-fest": "^4.9.0"
   },
   "dependencies": {
-    "@vaadin/hilla-generator-utils": "24.4.0-alpha9",
+    "@vaadin/hilla-generator-utils": "24.4.0-beta2",
+    "@vaadin/hilla-react-auth": "24.4.0-beta2",
     "react": "^18.2.0",
     "rollup": "^4.12.0",
     "typescript": "5.3.2"

package/runtime/RouterConfigurationBuilder.d.ts

@@ -0,0 +1,56 @@
+import { type ComponentType } from 'react';
+import { type RouteObject } from 'react-router-dom';
+import type { AgnosticRoute, RouterBuildOptions, 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 | undefined;
+/**
+ * A builder for creating a Vaadin-specific router for React with
+ * authentication and server routes support.
+ */
+export declare class RouterConfigurationBuilder {
+    #private;
+    /**
+     * 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: 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
+     * path uniqueness.
+     *
+     * @param routes - A list of routes to add to the current list.
+     */
+    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, config?: ViewConfig): this;
+    /**
+     * Protects all the routes that require authentication. For more details see
+     * {@link @vaadin/hilla-react-auth#protectRoutes} function.
+     *
+     * @param redirectPath - the path to redirect to if the route is protected
+     * 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(options?: RouterBuildOptions): RouterConfiguration;
+}
+export {};
+//# sourceMappingURL=RouterConfigurationBuilder.d.ts.map

package/runtime/RouterConfigurationBuilder.d.ts.map

@@ -0,0 +1 @@
+{"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,EAIL,KAAK,WAAW,EACjB,MAAM,kBAAkB,CAAC;AAG1B,OAAO,KAAK,EACV,aAAa,EAGb,kBAAkB,EAClB,mBAAmB,EACnB,UAAU,EACX,MAAM,aAAa,CAAC;AAErB,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,GAAG,SAAS,CAAC;AAM7B;;;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;IAoCtD;;;;;;;;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;IAwDvF;;OAEG;IACH,KAAK,CAAC,OAAO,CAAC,EAAE,kBAAkB,GAAG,mBAAmB;CASzD"}

package/runtime/RouterConfigurationBuilder.js

@@ -0,0 +1,157 @@
+import { protectRoute } from "@vaadin/hilla-react-auth";
+import { createElement } from "react";
+import {
+  createBrowserRouter
+} from "react-router-dom";
+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;
+}
+function createRouteEntry(route) {
+  return [`${route.path ?? ""}-${route.children ? "n" : "i"}`, route];
+}
+class RouterConfigurationBuilder {
+  #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) {
+    return this.update(routes);
+  }
+  /**
+   * 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
+   * path uniqueness.
+   *
+   * @param routes - A list of routes to add to the current list.
+   */
+  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 element = module?.default ? createElement(module.default) : void 0;
+        const handle = {
+          ...module?.config,
+          title: module?.config?.title ?? convertComponentNameToTitle(module?.default)
+        };
+        if (path === "" && !children) {
+          return {
+            ...original,
+            element,
+            handle,
+            index: true
+          };
+        }
+        return {
+          ...original,
+          path: module?.config?.route ?? path,
+          element,
+          children,
+          handle
+        };
+      }
+      return original;
+    });
+  }
+  /**
+   * 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, 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;
+  }
+  /**
+   * Protects all the routes that require authentication. For more details see
+   * {@link @vaadin/hilla-react-auth#protectRoutes} function.
+   *
+   * @param redirectPath - the path to redirect to if the route is protected
+   * and the user is not authenticated.
+   */
+  protect(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) => createRouteEntry(route)));
+            const addedMap = new Map(added.map((route) => createRouteEntry(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));
+              }
+              if (route) {
+                originalMap.set(path, route);
+              }
+            }
+            return [...originalMap.values()];
+          } else if (original) {
+            return original.map((route) => callback(route, void 0, next(route.children, void 0))).filter(Boolean);
+          } else if (added) {
+            return added.map((route) => callback(void 0, route, next(void 0, route.children))).filter(Boolean);
+          }
+          return void 0;
+        }
+      )
+    );
+    return this;
+  }
+  /**
+   * Builds the router with the current list of routes.
+   */
+  build(options) {
+    const routes = this.#modifiers.reduce((acc, mod) => mod(acc) ?? acc, void 0) ?? [];
+    return {
+      routes,
+      router: createBrowserRouter([...routes], { basename: new URL(document.baseURI).pathname, ...options })
+    };
+  }
+}
+export {
+  RouterConfigurationBuilder
+};
+//# sourceMappingURL=RouterConfigurationBuilder.js.map

package/runtime/RouterConfigurationBuilder.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/runtime/RouterConfigurationBuilder.ts"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/consistent-type-assertions */\nimport { protectRoute } from '@vaadin/hilla-react-auth';\nimport { type ComponentType, createElement } from 'react';\nimport {\n  createBrowserRouter,\n  type IndexRouteObject,\n  type NonIndexRouteObject,\n  type RouteObject,\n} from 'react-router-dom';\nimport { convertComponentNameToTitle } from '../shared/convertComponentNameToTitle.js';\nimport { transformTree } from '../shared/transformTree.js';\nimport type {\n  AgnosticRoute,\n  Module,\n  RouteModule,\n  RouterBuildOptions,\n  RouterConfiguration,\n  ViewConfig,\n} 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 | undefined;\n\nfunction createRouteEntry<T extends RouteBase>(route: T): readonly [key: string, value: T] {\n  return [`${route.path ?? ''}-${route.children ? 'n' : 'i'}`, route];\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 #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 element = module?.default ? createElement(module.default) : undefined;\n        const handle = {\n          ...module?.config,\n          title: module?.config?.title ?? convertComponentNameToTitle(module?.default),\n        };\n\n        if (path === '' && !children) {\n          return {\n            ...original,\n            element,\n            handle,\n            index: true,\n          } as IndexRouteObject;\n        }\n\n        return {\n          ...original,\n          path: module?.config?.route ?? path,\n          element,\n          children,\n          handle,\n        } as NonIndexRouteObject;\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) => createRouteEntry(route)));\n            const addedMap = new Map(added.map((route) => createRouteEntry(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 | undefined;\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              if (route) {\n                originalMap.set(path, route);\n              }\n            }\n\n            return [...originalMap.values()];\n          } else if (original) {\n            return original\n              .map((route) => callback(route, undefined, next(route.children, undefined)))\n              .filter(Boolean) as readonly RouteObject[];\n          } else if (added) {\n            return added\n              .map((route) => callback(undefined, route, next(undefined, route.children)))\n              .filter(Boolean) as readonly RouteObject[];\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(options?: RouterBuildOptions): 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], { basename: new URL(document.baseURI).pathname, ...options }),\n    };\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/runtime/createMenuItems.d.ts

@@ -1,14 +1,14 @@
 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.
  */
 export declare function createMenuItems(vaadinObject?: Readonly<{
-    server?: Readonly<{
-        views: Readonly<Record<string, import("../shared/internal.js").ServerViewConfig>>;
-    }> | undefined;
+    views: Readonly<Record<string, import("../shared/internal.js").ServerViewMapItem>>;
 }> | undefined): readonly MenuItem[];
 //# sourceMappingURL=createMenuItems.d.ts.map

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) {
-  return vaadinObject?.server?.views ? Object.entries(vaadinObject.server.views).filter(
+  const collator = new Intl.Collator("en-US");
+  return vaadinObject?.views ? Object.entries(vaadinObject.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?.views\n    ? Object.entries(vaadinObject.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,QACjB,OAAO,QAAQ,aAAa,KAAK,EAE9B;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/createRoute.d.ts

@@ -1,4 +1,4 @@
-import type { AgnosticRoute, RouteModule } from '../types.js';
+import type { AgnosticRoute, Module } from '../types.js';
 /**
  * Create a single framework-agnostic route object. Later, it can be transformed into a framework-specific route object,
  * e.g., the one used by React Router.
@@ -8,6 +8,6 @@ import type { AgnosticRoute, RouteModule } from '../types.js';
  *
  * @returns A framework-agnostic route object.
  */
-export declare function createRoute<C = unknown>(path: string, children?: ReadonlyArray<AgnosticRoute<C>>): AgnosticRoute<C>;
-export declare function createRoute<C = unknown>(path: string, module: RouteModule<C>, children?: ReadonlyArray<AgnosticRoute<C>>): AgnosticRoute<C>;
+export declare function createRoute(path: string, children?: readonly AgnosticRoute[]): AgnosticRoute;
+export declare function createRoute(path: string, module: Module, children?: readonly AgnosticRoute[]): AgnosticRoute;
 //# sourceMappingURL=createRoute.d.ts.map

package/runtime/createRoute.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createRoute.d.ts","sourceRoot":"","sources":["../src/runtime/createRoute.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE9D;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,CAAC,GAAG,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;AACrH,wBAAgB,WAAW,CAAC,CAAC,GAAG,OAAO,EACrC,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,EACtB,QAAQ,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,GACzC,aAAa,CAAC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"createRoute.d.ts","sourceRoot":"","sources":["../src/runtime/createRoute.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAEzD;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,SAAS,aAAa,EAAE,GAAG,aAAa,CAAC;AAC9F,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,SAAS,aAAa,EAAE,GAAG,aAAa,CAAC"}

package/runtime/createRoute.js

@@ -6,7 +6,7 @@ function createRoute(path, moduleOrChildren, children) {
     module = moduleOrChildren;
   }
   return {
-    path: module?.config?.route ?? path,
+    path,
     module,
     children
   };

package/runtime/createRoute.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/runtime/createRoute.ts"],
-  "sourcesContent": ["/* eslint-disable no-param-reassign */\nimport type { AgnosticRoute, RouteModule } from '../types.js';\n\n/**\n * Create a single framework-agnostic route object. Later, it can be transformed into a framework-specific route object,\n * e.g., the one used by React Router.\n *\n * @param path - A route path segment.\n * @param children - An array of child routes.\n *\n * @returns A framework-agnostic route object.\n */\nexport function createRoute<C = unknown>(path: string, children?: ReadonlyArray<AgnosticRoute<C>>): AgnosticRoute<C>;\nexport function createRoute<C = unknown>(\n  path: string,\n  module: RouteModule<C>,\n  children?: ReadonlyArray<AgnosticRoute<C>>,\n): AgnosticRoute<C>;\nexport function createRoute<C = unknown>(\n  path: string,\n  moduleOrChildren?: ReadonlyArray<AgnosticRoute<C>> | RouteModule<C>,\n  children?: ReadonlyArray<AgnosticRoute<C>>,\n): AgnosticRoute<C> {\n  let module: RouteModule<C> | undefined;\n  if (Array.isArray(moduleOrChildren)) {\n    children = moduleOrChildren;\n  } else {\n    module = moduleOrChildren as RouteModule<C> | undefined;\n  }\n\n  return {\n    path: module?.config?.route ?? path,\n    module,\n    children,\n  };\n}\n"],
-  "mappings": "AAkBO,SAAS,YACd,MACA,kBACA,UACkB;AAClB,MAAI;AACJ,MAAI,MAAM,QAAQ,gBAAgB,GAAG;AACnC,eAAW;AAAA,EACb,OAAO;AACL,aAAS;AAAA,EACX;AAEA,SAAO;AAAA,IACL,MAAM,QAAQ,QAAQ,SAAS;AAAA,IAC/B;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type { AgnosticRoute, Module } from '../types.js';\n\n/**\n * Create a single framework-agnostic route object. Later, it can be transformed into a framework-specific route object,\n * e.g., the one used by React Router.\n *\n * @param path - A route path segment.\n * @param children - An array of child routes.\n *\n * @returns A framework-agnostic route object.\n */\nexport function createRoute(path: string, children?: readonly AgnosticRoute[]): AgnosticRoute;\nexport function createRoute(path: string, module: Module, children?: readonly AgnosticRoute[]): AgnosticRoute;\nexport function createRoute(\n  path: string,\n  moduleOrChildren?: Module | readonly AgnosticRoute[],\n  children?: readonly AgnosticRoute[],\n): AgnosticRoute {\n  let module: Module | undefined;\n  if (Array.isArray(moduleOrChildren)) {\n    // eslint-disable-next-line no-param-reassign\n    children = moduleOrChildren;\n  } else {\n    module = moduleOrChildren as Module | undefined;\n  }\n\n  return {\n    path,\n    module,\n    children,\n  };\n}\n"],
+  "mappings": "AAaO,SAAS,YACd,MACA,kBACA,UACe;AACf,MAAI;AACJ,MAAI,MAAM,QAAQ,gBAAgB,GAAG;AAEnC,eAAW;AAAA,EACb,OAAO;AACL,aAAS;AAAA,EACX;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/runtime.d.ts

@@ -1,5 +1,5 @@
 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';
 //# sourceMappingURL=runtime.d.ts.map

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,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,5 @@
 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";
 //# sourceMappingURL=runtime.js.map

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/useViewConfig.js';\nexport * from './runtime/createMenuItems.js';\n"],
+  "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/internal.d.ts

@@ -5,14 +5,19 @@ import type { RouteParamType } from './routeParamType.js';
  * Internal type used for server communication and menu building. It extends the
  * view configuration with the route parameters.
  */
-export type ServerViewConfig = Readonly<{ params?: Readonly<Record<string, RouteParamType>> }> & ViewConfig;
+export type ServerViewConfig = Readonly<{
+  children?: readonly ServerViewConfig[];
+  params?: Readonly<Record<string, RouteParamType>>;
+}> &
+  ViewConfig;
 
-export type VaadinServer = Readonly<{
-  views: Readonly<Record<string, ServerViewConfig>>;
-}>;
+export type ServerViewMapItem = Readonly<{
+  params?: Readonly<Record<string, RouteParamType>>;
+}> &
+  ViewConfig;
 
 export type VaadinObject = Readonly<{
-  server?: VaadinServer;
+  views: Readonly<Record<string, ServerViewMapItem>>;
 }>;
 
 export type VaadinWindow = Readonly<{

package/shared/transformTree.d.ts

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,7 @@
+function transformTree(nodes, transformer) {
+  return transformer(nodes, (...n) => transformTree(n, transformer));
+}
+export {
+  transformTree
+};
+//# sourceMappingURL=transformTree.js.map

package/shared/transformTree.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/shared/transformTree.ts"],
+  "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 { RouteParamType } from './shared/routeParamType.js';
+import type { createBrowserRouter, RouteObject } from 'react-router-dom';
 
 export type ViewConfig = Readonly<{
   /**
@@ -11,7 +11,12 @@ export type ViewConfig = Readonly<{
   /**
    * Same as in the explicit React Router configuration.
    */
-  rolesAllowed?: readonly string[];
+  rolesAllowed?: readonly [string, ...string[]];
+
+  /**
+   * Set to true to require the user to be logged in to access the view.
+   */
+  loginRequired?: boolean;
 
   /**
    * Allows overriding the route path configuration. Uses the same syntax as
@@ -45,21 +50,27 @@ export type ViewConfig = Readonly<{
   }>;
 }>;
 
+/**
+ * An unknown JavaScript module.
+ */
+export type Module = Readonly<Record<string, unknown>>;
+
 /**
  * A module that exports a component and an optional view configuration.
  */
-export type RouteModule<C = unknown> = Readonly<{
-  default: C;
-  config?: ViewConfig;
-}>;
+export type RouteModule<C = unknown> = Module &
+  Readonly<{
+    default: C;
+    config?: ViewConfig;
+  }>;
 
 /**
  * A framework-agnostic object generated from the file-based route.
  */
-export type AgnosticRoute<C = unknown> = Readonly<{
+export type AgnosticRoute = Readonly<{
   path: string;
-  module?: RouteModule<C>;
-  children?: ReadonlyArray<AgnosticRoute<T>>;
+  module?: Module;
+  children?: readonly AgnosticRoute[];
 }>;
 
 /**
@@ -70,3 +81,10 @@ export type MenuItem = Readonly<{
   icon?: string;
   title?: string;
 }>;
+
+export type RouterConfiguration = Readonly<{
+  routes: readonly RouteObject[];
+  router: ReturnType<typeof createBrowserRouter>;
+}>;
+
+export type RouterBuildOptions = Parameters<typeof createBrowserRouter>[1];

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.
@@ -26,16 +26,16 @@ export type CollectRoutesOptions = Readonly<{
 /**
  * Collect route metadata from the file system and build a route tree.
  *
- * It accepts files that start with `$` as special files.
- * - `$layout` contains a component that wraps the child components.
- * - `$index` contains a component that will be used as the index page of the directory.
+ * It accepts files that start with `@` as special files.
+ * - `@layout` contains a component that wraps the child components.
+ * - `@index` contains a component that will be used as the index page of the directory.
  *
  * It accepts files that start with `_` as private files. They will be ignored.
  *
  * @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