rasengan/lib/types/routing/types.d.ts

The modern React Framework

import { FunctionComponent } from 'react';
import { RouteObject as RRRouteObject } from 'react-router';
import { RouterComponent } from './interfaces.js';
import { Module, RouteNode } from './utils/index.js';
export type MetadataLink = {
    rel: string;
    type?: string;
    sizes?: string;
    href: string;
};
export type MetaTag = {
    name?: string;
    property?: string;
    content: string;
};
export type MetadataWithoutTitleAndDescription = {
    /**
     * Configuring link preview on social media like facebook, linkedin, etc.
     */
    openGraph?: {
        type?: string;
        title?: string;
        description?: string;
        url: string;
        image: string;
        width?: string;
        height?: string;
    };
    /**
     * Configuring link preview on twitter
     */
    twitter?: {
        card: 'summary_large_image' | 'summary';
        image: string;
        title: string;
        description?: string;
        creator?: string;
        site?: string;
    };
    /**
     * Configuring link tags to define icons and others
     */
    links?: Array<MetadataLink>;
    /**
     * Other metadata tags
     */
    metaTags?: Array<MetaTag>;
};
export type Metadata = MetadataWithoutTitleAndDescription & {
    /**
     * Title of the pate
     */
    title?: string;
    /**
     * Description of the page
     */
    description?: string;
};
/**
 * Props for Router Decorators
 */
export type RouterProps = {
    /**
     * Usefull to collect sub routers
     */
    imports?: Array<Promise<RouterComponent>>;
    /**
     * Usefull to define a layout
     */
    layout?: LayoutComponent;
    /**
     * Usefull to collect pages
     */
    pages?: Array<PageComponent | MDXPageComponent | RouteNode | Array<PageComponent | MDXPageComponent | RouteNode>>;
    /**
     * Usefull to display a screen that let know to the user that the page is loading.
     */
    loaderComponent?: FunctionComponent;
    /**
     * Usefull to display a screen that let know to the user that the page is not found.
     */
    notFoundComponent?: FunctionComponent;
    /**
     * Determines whether the current page should use the parent layout, or render its own layout.
     */
    useParentLayout?: boolean;
};
/**
 * Options for the loader function that loads data for a page from the server
 */
export type LoaderOptions = {
    params: {
        [key: string]: any;
    };
    request: Request;
};
/**
 * Data returned from the loader function
 */
export type LoaderResponse = {
    props?: {
        [key: string]: any;
    };
    redirect?: string;
    /**
     * Represent the set of metadata for the page to which the loader is linked to
     */
    meta?: Metadata | MetadataWithoutTitleAndDescription;
    /**
     * Should contain the source of the loader
     *
     * It represent the source file of the page in which it's defined
     *
     * Not available from config-based routing
     */
    source?: string;
};
export type RouteLoaderFunction = (options: LoaderOptions) => Promise<Omit<LoaderResponse, 'source'>>;
export type LoaderFunction = ({ params, request, }: {
    params: Record<string, string>;
    request: Request;
}) => Promise<LoaderResponse | Response>;
export type GenerateStaticPathsFunction = () => Promise<{
    paths: Array<{
        params: Record<string, string>;
    }>;
}>;
export type RouteObject = RRRouteObject & {
    /**
     * Loader function that loads data for the page from the server
     */
    loader?: LoaderFunction;
    /**
     * Routes children
     */
    children?: Array<RouteObject>;
    /**
     * Determines if the route is nested
     */
    nested?: boolean;
    /**
     * Function that returns a Promise that resolves to a module object that represents the page component
     * This is used for static page generation only
     */
    module?: () => Promise<Module>;
};
export type RoutesGroupProps = {
    /**
     * Path of the group
     */
    path: string;
    /**
     * Routes children
     */
    children: Array<PageComponent | MDXPageComponent | Array<PageComponent | MDXPageComponent>>;
};
export type RasenganPageComponentProps = {
    page: PageComponent;
    data: LoaderResponse;
};
/**
 * Props for react components
 */
export type ReactComponentProps = {
    [key: string]: any;
    params: {
        [key: string]: any;
    };
} | any;
/**
 * Layout component that represents a layout
 */
export type LayoutComponent<T = ReactComponentProps> = FunctionComponent<T> & {
    /**
     * Base path for the page
     */
    path?: string;
    /**
     * Metadata for the page
     */
    metadata?: MetadataWithoutTitleAndDescription;
    /**
     * Loader function that loads data for the page from the server
     */
    loader?: RouteLoaderFunction;
    /**
     * Source of the route
     *
     * Not available from config-based routing
     */
    source?: string;
};
/**
 * Page component that extends LayoutComponent and represents a page
 */
export type PageComponent<T = ReactComponentProps> = LayoutComponent<T> & {
    /**
     * Metadata for the page omit title
     */
    metadata?: Metadata;
    /**
     * Type of the page
     */
    type?: 'MDXPageComponent' | 'PageComponent';
    /**
     * Generate static paths for SSG
     */
    generatePaths?: GenerateStaticPathsFunction;
};
/**
 * A React functional component that represents an MDX page.
 *
 * The `MDXPageComponent` type extends the `React.FC<ReactComponentProps>` type,
 * which means it is a React functional component that accepts the standard props for a React component.
 *
 * The `MDXPageComponent` type also has an optional `metadata` property of type `Metadata`,
 * which can be used to store metadata about the page.
 */
export type MDXPageComponent = FunctionComponent & {
    /**
     * Metadata for the page omit title
     */
    metadata?: {
        path?: string;
        metadata?: Metadata;
    };
    /**
     * Type of the page
     */
    type?: 'MDXPageComponent' | 'PageComponent';
};
/**
 * A React functional component that represents a simple block element.
 */
export type MDXRendererProps = {
    children: MDXPageComponent;
    config?: any;
    className?: string;
};
/**
 * Template props
 */
export type TemplateProps = {
    Head: FunctionComponent<{
        children: React.ReactNode;
    }>;
    Body: FunctionComponent<{
        children: React.ReactNode;
    }>;
    Script: FunctionComponent<{
        children?: React.ReactNode;
    }>;
};
/**
 * Props for the base Component that takes the app router
 */
export type RootComponentProps = {
    Router?: FunctionComponent;
    children: React.ReactNode;
};