rynex/dist/runtime/router.d.ts

A minimalist TypeScript framework for building reactive web applications with no virtual DOM

/**
 * Rynex Router
 * Client-side routing with dynamic routes, middleware, and lazy loading
 * Inspired by Express.js and Next.js routing patterns
 */
export interface RouteParams {
    [key: string]: string;
}
export interface RouteQuery {
    [key: string]: string | string[];
}
export interface RouteContext {
    path: string;
    params: RouteParams;
    query: RouteQuery;
    hash: string;
    data?: any;
}
export type RouteComponent = (ctx: RouteContext) => HTMLElement | Promise<HTMLElement>;
export type RouteMiddleware = (ctx: RouteContext, next: () => void | Promise<void>) => void | Promise<void>;
export type RouteGuard = (ctx: RouteContext) => boolean | Promise<boolean>;
export interface RouteConfig {
    path: string;
    component?: RouteComponent;
    lazy?: () => Promise<{
        default: RouteComponent;
    }>;
    children?: RouteConfig[];
    middleware?: RouteMiddleware[];
    guards?: RouteGuard[];
    meta?: Record<string, any>;
    name?: string;
}
export interface NavigationOptions {
    replace?: boolean;
    state?: any;
    scroll?: boolean;
}
/**
 * Router class - manages client-side routing
 */
export declare class Router {
    private routes;
    private currentRoute;
    private container;
    private globalMiddleware;
    private notFoundHandler;
    private errorHandler;
    routeState: RouteContext;
    constructor();
    /**
     * Add a route to the router
     */
    addRoute(config: RouteConfig): void;
    /**
     * Add multiple routes
     */
    addRoutes(configs: RouteConfig[]): void;
    /**
     * Add global middleware
     */
    use(middleware: RouteMiddleware): void;
    /**
     * Set 404 handler
     */
    setNotFound(handler: RouteComponent): void;
    /**
     * Set error handler
     */
    setErrorHandler(handler: (error: Error, ctx: RouteContext) => void): void;
    /**
     * Mount router to a container element
     */
    mount(container: HTMLElement): void;
    /**
     * Navigate to a new route (push state)
     */
    push(path: string, options?: NavigationOptions): Promise<void>;
    /**
     * Replace current route
     */
    replace(path: string, options?: NavigationOptions): Promise<void>;
    /**
     * Go back in history
     */
    back(): void;
    /**
     * Go forward in history
     */
    forward(): void;
    /**
     * Go to specific history entry
     */
    go(delta: number): void;
    /**
     * Get current route context
     */
    getCurrentRoute(): RouteContext | null;
    /**
     * Compile route pattern to regex
     */
    private compileRoute;
    /**
     * Match a path against routes
     */
    private matchRoute;
    /**
     * Parse query string
     */
    private parseQuery;
    /**
     * Handle navigation
     */
    private handleNavigation;
    /**
     * Run middleware chain
     */
    private runMiddleware;
    /**
     * Render route component
     */
    private renderRoute;
}
/**
 * Create a new router instance
 */
export declare function createRouter(routes?: RouteConfig[]): Router;
/**
 * Link component helper
 */
export declare function createLink(href: string, text: string, options?: {
    class?: string;
    style?: Partial<CSSStyleDeclaration>;
}): HTMLAnchorElement;
/**
 * Route params hook
 */
export declare function useParams(router: Router): RouteParams;
/**
 * Route query hook
 */
export declare function useQuery(router: Router): RouteQuery;
/**
 * Navigation hook
 */
export declare function useNavigate(router: Router): {
    push: (path: string, options?: NavigationOptions) => Promise<void>;
    replace: (path: string, options?: NavigationOptions) => Promise<void>;
    back: () => void;
    forward: () => void;
    go: (delta: number) => void;
};
//# sourceMappingURL=router.d.ts.map