@tempots/ui/renderables/router/router.d.ts

Provides a higher level of renderables to help fast development with Tempo.

import { TNode, Renderable, Signal } from '@tempots/dom';
import { ExtractParams, MakeParams, RouteInfo } from './route-info';
/**
 * Creates the root router for an application that provides routing context to child components.
 *
 * RootRouter is the top-level router that matches against the full browser pathname
 * and creates the initial routing context. It provides the RouterContextProvider
 * that child ChildRouter components can use for nested routing scenarios.
 *
 * @example
 * ```typescript
 * // Basic app routing
 * const App = RootRouter({
 *   '/': () => html.div('Home Page'),
 *   '/about': () => html.div('About Page'),
 *   '/admin/*': () => AdminSection(), // Passes remaining path to AdminSection
 *   '*': () => html.div('404 - Page Not Found')
 * })
 *
 * render(App, document.body)
 * ```
 *
 * @example
 * ```typescript
 * // Nested routing with RootRouter and ChildRouter
 * const App = RootRouter({
 *   '/': () => html.div('Home'),
 *   '/admin/*': () => AdminRoutes(),
 *   '/blog/*': () => BlogRoutes()
 * })
 *
 * const AdminRoutes = ChildRouter({
 *   '/users': () => html.div('User List'),
 *   '/users/:id': (info) => html.div('User: ', info.$.params.$.id),
 *   '/settings': () => html.div('Admin Settings')
 * })
 * ```
 *
 * @template T - The type of the routes configuration object
 * @param routes - Object mapping route patterns to handler functions
 * @returns A renderable router component that handles URL routing and provides context
 * @throws {Error} When no matching route is found for the current URL
 * @public
 */
export declare const RootRouter: <T extends { [K in keyof T]: (info: K extends string ? Signal<RouteInfo<MakeParams<ExtractParams<K>>, K>> : never) => TNode; }>(routes: T) => Renderable;
/**
 * Creates a nested router that matches against the remaining path from parent routers.
 *
 * ChildRouter is used for nested routing scenarios where a parent router (RootRouter or
 * another ChildRouter) has matched a portion of the path and passed the remaining path
 * to child components. ChildRouter reads the parent routing context and matches its
 * routes against the remaining path.
 *
 * @example
 * ```typescript
 * // Parent RootRouter passes remaining path to AdminRoutes
 * const App = RootRouter({
 *   '/admin/*': () => AdminRoutes(),
 *   '/blog/*': () => BlogRoutes()
 * })
 *
 * // ChildRouter matches against remaining path
 * const AdminRoutes = ChildRouter({
 *   '/users': () => html.div('User List'),
 *   '/users/:id': (info) => html.div('User: ', info.$.params.$.id),
 *   '/settings': () => html.div('Admin Settings'),
 *   '*': () => html.div('Admin 404')
 * })
 * ```
 *
 * @example
 * ```typescript
 * // Multiple levels of nesting
 * const BlogRoutes = ChildRouter({
 *   '/posts/*': () => PostRoutes(),
 *   '/categories': () => html.div('Categories')
 * })
 *
 * const PostRoutes = ChildRouter({
 *   '/': () => html.div('All Posts'),
 *   '/:id': (info) => html.div('Post: ', info.$.params.$.id),
 *   '/:id/comments': (info) => html.div('Comments for: ', info.$.params.$.id)
 * })
 * ```
 *
 * @template T - The type of the routes configuration object
 * @param routes - Object mapping route patterns to handler functions
 * @returns A renderable router component that handles nested URL routing
 * @throws {Error} When no matching route is found for the remaining path
 * @public
 */
export declare const ChildRouter: <T extends { [K in keyof T]: (info: K extends string ? Signal<RouteInfo<MakeParams<ExtractParams<K>>, K>> : never) => TNode; }>(routes: T) => Renderable;