@matthesketh/utopia-router 0.5.1 → 0.7.1

package/dist/index.cjs

@@ -229,7 +229,13 @@ function createRouter(routeTable) {
   if (cleanup) {
     cleanup();
   }
-  routes = routeTable;
+  routes = routeTable.map((r) => {
+    if ("pattern" in r && r.pattern instanceof RegExp) {
+      return r;
+    }
+    const { regex, params } = compilePattern(r.path);
+    return { ...r, pattern: regex, params };
+  });
   beforeNavigateHooks = [];
   scrollPositions.clear();
   navIndex = 0;

package/dist/index.d.cts

@@ -22,6 +22,24 @@ interface Route {
     /** Optional metadata (e.g. page title, auth requirements). */
     meta?: Record<string, unknown>;
 }
+/**
+ * A simple route config for manual route definitions.
+ *
+ * Unlike `Route`, this does not require pre-compiled `pattern` and `params`.
+ * Pass these to `createRouter()` and they will be compiled automatically.
+ */
+interface RouteConfig {
+    /** URL pattern like '/users/:id' or '/blog/:slug'. */
+    path: string;
+    /** Lazy component import — called only when the route is matched. */
+    component: () => Promise<Record<string, unknown>>;
+    /** Optional layout component that wraps the page. */
+    layout?: () => Promise<Record<string, unknown>>;
+    /** Optional error boundary component shown when loading fails. */
+    error?: () => Promise<Record<string, unknown>>;
+    /** Optional metadata (e.g. page title, auth requirements). */
+    meta?: Record<string, unknown>;
+}
 /**
  * The result of successfully matching a URL against a route.
  */
@@ -123,7 +141,11 @@ declare const currentRoute: _matthesketh_utopia_core.Signal<RouteMatch | null>;
 /** Whether a navigation is currently in progress (loading component, etc.). */
 declare const isNavigating: _matthesketh_utopia_core.Signal<boolean>;
 /**
- * Initialize the router with a compiled route table.
+ * Initialize the router with a route table.
+ *
+ * Accepts either compiled routes (with `pattern` and `params`) or simple
+ * route configs (with just `path` and `component`). Simple configs are
+ * compiled automatically.
  *
  * This must be called once at application startup. It:
  * 1. Stores the route table
@@ -131,9 +153,9 @@ declare const isNavigating: _matthesketh_utopia_core.Signal<boolean>;
  * 3. Sets up popstate listener for browser back/forward
  * 4. Sets up click listener for <a> interception
  *
- * @param routeTable - Array of compiled routes from `buildRouteTable()`
+ * @param routeTable - Array of routes or route configs
  */
-declare function createRouter(routeTable: Route[]): void;
+declare function createRouter(routeTable: (Route | RouteConfig)[]): void;
 /**
  * Navigate to a new URL.
  *
@@ -253,4 +275,4 @@ declare function setQueryParams(params: Record<string, string | null>): void;
  */
 declare function getRouteParam(name: string): _matthesketh_utopia_core.ReadonlySignal<string | null>;
 
-export { type BeforeNavigateHook, type Route, type RouteMatch, type RouterState, back, beforeNavigate, buildRouteTable, compilePattern, createLink, createRouter, createRouterView, currentRoute, destroy, filePathToRoute, forward, getQueryParam, getRouteParam, isNavigating, matchRoute, navigate, preloadRoute, queryParams, setQueryParam, setQueryParams };
+export { type BeforeNavigateHook, type Route, type RouteConfig, type RouteMatch, type RouterState, back, beforeNavigate, buildRouteTable, compilePattern, createLink, createRouter, createRouterView, currentRoute, destroy, filePathToRoute, forward, getQueryParam, getRouteParam, isNavigating, matchRoute, navigate, preloadRoute, queryParams, setQueryParam, setQueryParams };

package/dist/index.d.ts

@@ -22,6 +22,24 @@ interface Route {
     /** Optional metadata (e.g. page title, auth requirements). */
     meta?: Record<string, unknown>;
 }
+/**
+ * A simple route config for manual route definitions.
+ *
+ * Unlike `Route`, this does not require pre-compiled `pattern` and `params`.
+ * Pass these to `createRouter()` and they will be compiled automatically.
+ */
+interface RouteConfig {
+    /** URL pattern like '/users/:id' or '/blog/:slug'. */
+    path: string;
+    /** Lazy component import — called only when the route is matched. */
+    component: () => Promise<Record<string, unknown>>;
+    /** Optional layout component that wraps the page. */
+    layout?: () => Promise<Record<string, unknown>>;
+    /** Optional error boundary component shown when loading fails. */
+    error?: () => Promise<Record<string, unknown>>;
+    /** Optional metadata (e.g. page title, auth requirements). */
+    meta?: Record<string, unknown>;
+}
 /**
  * The result of successfully matching a URL against a route.
  */
@@ -123,7 +141,11 @@ declare const currentRoute: _matthesketh_utopia_core.Signal<RouteMatch | null>;
 /** Whether a navigation is currently in progress (loading component, etc.). */
 declare const isNavigating: _matthesketh_utopia_core.Signal<boolean>;
 /**
- * Initialize the router with a compiled route table.
+ * Initialize the router with a route table.
+ *
+ * Accepts either compiled routes (with `pattern` and `params`) or simple
+ * route configs (with just `path` and `component`). Simple configs are
+ * compiled automatically.
  *
  * This must be called once at application startup. It:
  * 1. Stores the route table
@@ -131,9 +153,9 @@ declare const isNavigating: _matthesketh_utopia_core.Signal<boolean>;
  * 3. Sets up popstate listener for browser back/forward
  * 4. Sets up click listener for <a> interception
  *
- * @param routeTable - Array of compiled routes from `buildRouteTable()`
+ * @param routeTable - Array of routes or route configs
  */
-declare function createRouter(routeTable: Route[]): void;
+declare function createRouter(routeTable: (Route | RouteConfig)[]): void;
 /**
  * Navigate to a new URL.
  *
@@ -253,4 +275,4 @@ declare function setQueryParams(params: Record<string, string | null>): void;
  */
 declare function getRouteParam(name: string): _matthesketh_utopia_core.ReadonlySignal<string | null>;
 
-export { type BeforeNavigateHook, type Route, type RouteMatch, type RouterState, back, beforeNavigate, buildRouteTable, compilePattern, createLink, createRouter, createRouterView, currentRoute, destroy, filePathToRoute, forward, getQueryParam, getRouteParam, isNavigating, matchRoute, navigate, preloadRoute, queryParams, setQueryParam, setQueryParams };
+export { type BeforeNavigateHook, type Route, type RouteConfig, type RouteMatch, type RouterState, back, beforeNavigate, buildRouteTable, compilePattern, createLink, createRouter, createRouterView, currentRoute, destroy, filePathToRoute, forward, getQueryParam, getRouteParam, isNavigating, matchRoute, navigate, preloadRoute, queryParams, setQueryParam, setQueryParams };

package/dist/index.js

@@ -184,7 +184,13 @@ function createRouter(routeTable) {
   if (cleanup) {
     cleanup();
   }
-  routes = routeTable;
+  routes = routeTable.map((r) => {
+    if ("pattern" in r && r.pattern instanceof RegExp) {
+      return r;
+    }
+    const { regex, params } = compilePattern(r.path);
+    return { ...r, pattern: regex, params };
+  });
   beforeNavigateHooks = [];
   scrollPositions.clear();
   navIndex = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matthesketh/utopia-router",
-  "version": "0.5.1",
+  "version": "0.7.1",
   "description": "File-based routing for UtopiaJS",
   "type": "module",
   "license": "MIT",