/// import {SvelteComponent, ComponentType} from 'svelte' import {Readable} from 'svelte/store' /** Dictionary with route details passed to the pre-conditions functions, as well as the `routeLoading` and `conditionsFailed` events */ export interface RouteDetail { /** Route matched as defined in the route definition (could be a string or a regular expression object) */ route: string | RegExp /** Location path */ location: string /** Querystring from the hash */ querystring: string /** Params matched in the route */ params: Record | null /** Custom data passed by the user */ userData?: object } /** Detail object for the `routeLoaded` event */ export interface RouteDetailLoaded extends RouteDetail { /** Svelte component */ component: ComponentType /** Name of the Svelte component that was loaded (note: might be minified in production) */ name: string } /** * This is a Svelte component loaded asynchronously. * It's meant to be used with the `import()` function, such as `() => import('Foo.svelte')}` */ export type AsyncSvelteComponent = () => Promise<{default: ComponentType}> /** * Route pre-condition function. This is a callback that receives a RouteDetail object as argument containing information on the route that we're trying to load. * The function must return a boolean indicating whether the route can be loaded. If the function returns `false`, the route is not loaded, and no other pre-condition function is executed. * * The pre-condition function can be asynchronous too, returning a boolean asynchronously. * * @param detail Route detail object * @returns If the callback returns a false-y value, it's interpreted as the precondition failed, so it aborts loading the component (and won't process other pre-condition callbacks) */ export type RoutePrecondition = (detail: RouteDetail) => (boolean | Promise) /** Object returned by the `wrap` method */ export interface WrappedComponent { /** Component to load (this is always asynchronous) */ component: ComponentType /** Route pre-conditions to validate */ conditions?: RoutePrecondition[] /** Optional dictionary of static props */ props?: object /** Optional user data dictionary */ userData?: object /** * Internal flag used by the router to identify wrapped routes * @internal */ //_sveltesparouter?: boolean } /** * Navigates to a new page programmatically. * * @param location Path to navigate to (must start with `/` or '#/') * @returns Promise that resolves after the page navigation has completed */ export function push(location: string): Promise /** * Navigates back in history (equivalent to pressing the browser's back button). * * @returns Promise that resolves after the page navigation has completed */ export function pop(): Promise /** * Replaces the current page but without modifying the history stack. * * @param location - Path to navigate to (must start with `/` or '#/') * @returns Promise that resolves after the page navigation has completed */ export function replace(location: string): Promise /** Type for the opts parameter of the link action */ export type LinkActionOpts = { /** A string to use in place of the link's href attribute. Using this allows for updating link's targets reactively. */ href?: string /** If true, link is disabled */ disabled?: boolean } /** Type for the update function of the link action */ export type LinkActionUpdateFunc = ((opts?: LinkActionOpts) => void) | ((hrefVar?: string) => void) /** Type for backwards-compatible (typo: Upate) */ export type LinkActionUpateFunc = LinkActionUpdateFunc /** * Svelte Action that enables a link element (``) to use our history management. * * For example: * * ````html * View books * ```` * * @param node - The target node (automatically set by Svelte). Must be an anchor tag (``) with a href attribute starting in `/` * @param opts - Dictionary with options for the link * @param hrefVar - A string to use in place of the link's href attribute. Using this allows for updating link's targets reactively. This is a shorthand for opts.href */ export function link(node: HTMLElement, opts?: LinkActionOpts): {update: LinkActionUpdateFunc} export function link(node: HTMLElement, hrefVar?: string): {update: LinkActionUpdateFunc} /** Full location from the hash: page and querystring */ interface Location { /** Location (page/view), for example `/book` */ location: string /** Querystring from the hash, as a string not parsed */ querystring?: string } /** * Readable store that returns the current full location (incl. querystring) */ export const loc: Readable /** * Readable store that returns the current location */ export const location: Readable /** * Readable store that returns the current querystring */ export const querystring: Readable /** * Readable store that returns the current list of params */ export const params: Readable | undefined> // Note: the above is implemented as writable but exported as readable because consumers should not modify the value /** List of routes */ export type RouteDefinition = Record | Map /** Generic interface for events from the router */ interface RouterEvent { detail: T } /** Event type for conditionsFailed */ export type ConditionsFailedEvent = RouterEvent /** Event type for routeLoading */ export type RouteLoadingEvent = RouterEvent /** Event type for routeLoaded */ export type RouteLoadedEvent = RouterEvent /** * Router component */ export default class Router extends SvelteComponent { // Props $$prop_def: { /** * Dictionary of all routes, in the format `'/path': component`. * * For example: * ````js * import HomeRoute from './routes/HomeRoute.svelte' * import BooksRoute from './routes/BooksRoute.svelte' * import NotFoundRoute from './routes/NotFoundRoute.svelte' * routes = { * '/': HomeRoute, * '/books': BooksRoute, * '*': NotFoundRoute * } * ```` */ routes: RouteDefinition, /** * Optional prefix for the routes in this router. This is useful for example in the case of nested routers. */ prefix?: string | RegExp, /** * If set to true, the router will restore scroll positions on back navigation * and scroll to top on forward navigation. */ restoreScrollState?: boolean } $on(event: 'routeEvent', callback: (event: CustomEvent) => void): () => void $on(event: 'conditionsFailed', callback: (event: ConditionsFailedEvent) => void): () => void $on(event: 'routeLoading', callback: (event: RouteLoadingEvent) => void): () => void $on(event: 'routeLoaded', callback: (event: RouteLoadedEvent) => void): () => void }