@vaadin/hilla-file-router 24.4.0-alpha13 → 24.4.0-alpha15

package/package.json

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

package/runtime/createRoute.d.ts

@@ -1,4 +1,4 @@
-import type { AgnosticRoute } 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 } 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: Readonly<Record<string, unknown>>, 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,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,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EACzC,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: Readonly<Record<string, unknown>>,\n  children?: ReadonlyArray<AgnosticRoute<C>>,\n): AgnosticRoute<C>;\nexport function createRoute<C = unknown>(\n  path: string,\n  moduleOrChildren?: Readonly<Record<string, unknown>> | ReadonlyArray<AgnosticRoute<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/toReactRouter.d.ts

@@ -1,5 +1,4 @@
-import { type ComponentType } from 'react';
-import type { RouteObject } from 'react-router-dom';
+import type { RouteObject as ReactRouteObject } from 'react-router-dom';
 import type { AgnosticRoute } from '../types.js';
 /**
  * Transforms framework-agnostic route tree into a format that can be used by React Router.
@@ -8,5 +7,5 @@ import type { AgnosticRoute } from '../types.js';
  *
  * @returns The React Router tree.
  */
-export declare function toReactRouter(routes: AgnosticRoute<ComponentType>): RouteObject;
+export declare function toReactRouter(routes: AgnosticRoute): ReactRouteObject;
 //# sourceMappingURL=toReactRouter.d.ts.map

package/runtime/toReactRouter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toReactRouter.d.ts","sourceRoot":"","sources":["../src/runtime/toReactRouter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAiB,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,aAAa,CAAC,aAAa,CAAC,GAAG,WAAW,CAkB/E"}
+{"version":3,"file":"toReactRouter.d.ts","sourceRoot":"","sources":["../src/runtime/toReactRouter.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,IAAI,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAExE,OAAO,KAAK,EAAE,aAAa,EAAuB,MAAM,aAAa,CAAC;AAOtE;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,aAAa,GAAG,gBAAgB,CAsBrE"}

package/runtime/toReactRouter.js

@@ -1,14 +1,20 @@
 import { createElement } from "react";
 import { convertComponentNameToTitle } from "../shared/convertComponentNameToTitle.js";
 import { transformRoute } from "./utils.js";
+function isReactRouteModule(module) {
+  return module ? "default" in module && typeof module.default === "function" : true;
+}
 function toReactRouter(routes) {
   return transformRoute(
     routes,
     (route) => route.children?.values(),
     ({ path, module }, children) => {
+      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 {
-        path,
+        path: module?.config?.route ?? path,
         element: module?.default ? createElement(module.default) : void 0,
         children: children.length > 0 ? children : void 0,
         handle: {

package/runtime/toReactRouter.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/runtime/toReactRouter.ts"],
-  "sourcesContent": ["import { type ComponentType, createElement } from 'react';\nimport type { RouteObject } from 'react-router-dom';\nimport { convertComponentNameToTitle } from '../shared/convertComponentNameToTitle.js';\nimport type { AgnosticRoute } from '../types.js';\nimport { transformRoute } from './utils.js';\n\n/**\n * Transforms framework-agnostic route tree into a format that can be used by React Router.\n *\n * @param routes - Generated routes\n *\n * @returns The React Router tree.\n */\nexport function toReactRouter(routes: AgnosticRoute<ComponentType>): RouteObject {\n  return transformRoute(\n    routes,\n    (route) => route.children?.values(),\n    ({ path, module }, children) => {\n      const title = module?.config?.title ?? convertComponentNameToTitle(module?.default);\n\n      return {\n        path,\n        element: module?.default ? createElement(module.default) : undefined,\n        children: children.length > 0 ? (children as RouteObject[]) : undefined,\n        handle: {\n          ...module?.config,\n          title,\n        },\n      } satisfies RouteObject;\n    },\n  );\n}\n"],
-  "mappings": "AAAA,SAA6B,qBAAqB;AAElD,SAAS,mCAAmC;AAE5C,SAAS,sBAAsB;AASxB,SAAS,cAAc,QAAmD;AAC/E,SAAO;AAAA,IACL;AAAA,IACA,CAAC,UAAU,MAAM,UAAU,OAAO;AAAA,IAClC,CAAC,EAAE,MAAM,OAAO,GAAG,aAAa;AAC9B,YAAM,QAAQ,QAAQ,QAAQ,SAAS,4BAA4B,QAAQ,OAAO;AAElF,aAAO;AAAA,QACL;AAAA,QACA,SAAS,QAAQ,UAAU,cAAc,OAAO,OAAO,IAAI;AAAA,QAC3D,UAAU,SAAS,SAAS,IAAK,WAA6B;AAAA,QAC9D,QAAQ;AAAA,UACN,GAAG,QAAQ;AAAA,UACX;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { type ComponentType, createElement } from 'react';\nimport type { RouteObject as ReactRouteObject } from 'react-router-dom';\nimport { convertComponentNameToTitle } from '../shared/convertComponentNameToTitle.js';\nimport type { AgnosticRoute, Module, RouteModule } from '../types.js';\nimport { transformRoute } from './utils.js';\n\nfunction isReactRouteModule(module?: Module): module is RouteModule<ComponentType> | undefined {\n  return module ? 'default' in module && typeof module.default === 'function' : true;\n}\n\n/**\n * Transforms framework-agnostic route tree into a format that can be used by React Router.\n *\n * @param routes - Generated routes\n *\n * @returns The React Router tree.\n */\nexport function toReactRouter(routes: AgnosticRoute): ReactRouteObject {\n  return transformRoute(\n    routes,\n    (route) => route.children?.values(),\n    ({ path, module }, children) => {\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        path: module?.config?.route ?? path,\n        element: module?.default ? createElement(module.default) : undefined,\n        children: children.length > 0 ? (children as ReactRouteObject[]) : undefined,\n        handle: {\n          ...module?.config,\n          title,\n        },\n      } satisfies ReactRouteObject;\n    },\n  );\n}\n"],
+  "mappings": "AAAA,SAA6B,qBAAqB;AAElD,SAAS,mCAAmC;AAE5C,SAAS,sBAAsB;AAE/B,SAAS,mBAAmB,QAAmE;AAC7F,SAAO,SAAS,aAAa,UAAU,OAAO,OAAO,YAAY,aAAa;AAChF;AASO,SAAS,cAAc,QAAyC;AACrE,SAAO;AAAA,IACL;AAAA,IACA,CAAC,UAAU,MAAM,UAAU,OAAO;AAAA,IAClC,CAAC,EAAE,MAAM,OAAO,GAAG,aAAa;AAC9B,UAAI,CAAC,mBAAmB,MAAM,GAAG;AAC/B,cAAM,IAAI,MAAM,uBAAuB,IAAI,gEAAgE;AAAA,MAC7G;AAEA,YAAM,QAAQ,QAAQ,QAAQ,SAAS,4BAA4B,QAAQ,OAAO;AAElF,aAAO;AAAA,QACL,MAAM,QAAQ,QAAQ,SAAS;AAAA,QAC/B,SAAS,QAAQ,UAAU,cAAc,OAAO,OAAO,IAAI;AAAA,QAC3D,UAAU,SAAS,SAAS,IAAK,WAAkC;AAAA,QACnE,QAAQ;AAAA,UACN,GAAG,QAAQ;AAAA,UACX;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/types.d.ts

@@ -1,5 +1,3 @@
-import type { RouteParamType } from './shared/routeParamType.js';
-
 export type ViewConfig = Readonly<{
   /**
    * View title used in the main layout header, as <title> and as the default
@@ -45,20 +43,26 @@ 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>;
+  module?: Module;
   children?: ReadonlyArray<AgnosticRoute<T>>;
 }>;