diff --git a/Router.d.ts b/Router.d.ts index c5bd797..842f9bc 100644 --- a/Router.d.ts +++ b/Router.d.ts @@ -1,7 +1,9 @@ +/// + import {SvelteComponent} from 'svelte' import {Readable} from 'svelte/store' -/** Dictionary with route details passed to the pre-conditions functions, as well as the `routeLoading`, `routeLoaded` and `conditionsFailed` events */ +/** 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 reguar expression object) */ route: string | RegExp @@ -14,19 +16,22 @@ export interface RouteDetail { /** Custom data passed by the user */ userData?: object +} - /** Svelte component (only in `routeLoaded` events) */ - component?: SvelteComponent +/** Detail object for the `routeLoaded` event */ +export interface RouteDetailLoaded extends RouteDetail { + /** Svelte component */ + component: typeof SvelteComponent - /** Name of the Svelte component (only in `routeLoaded` events) */ - name?: string + /** 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 +export type AsyncSvelteComponent = () => Promise<{default: typeof SvelteComponent}> /** * 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. @@ -37,12 +42,12 @@ export type AsyncSvelteComponent = () => Promise * @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) +export type RoutePrecondition = (detail: RouteDetail) => (boolean | Promise) /** Object returned by the `wrap` method */ export interface WrappedComponent { /** Component to load (this is always asynchronous) */ - component: SvelteComponent + component: typeof SvelteComponent /** Route pre-conditions to validate */ conditions?: RoutePrecondition[] @@ -57,7 +62,7 @@ export interface WrappedComponent { * Internal flag used by the router to identify wrapped routes * @internal */ - _sveltesparouter?: boolean + //_sveltesparouter?: boolean } /** @@ -71,7 +76,7 @@ export interface WrappedComponent { * @returns Wrapped component */ export function wrap( - component: SvelteComponent, + component: typeof SvelteComponent, userData?: object, ...conditions: RoutePrecondition[] ): WrappedComponent @@ -111,39 +116,7 @@ export function replace(location: string): Promise * @param node - The target node (automatically set by Svelte). Must be an anchor tag (``) with a href attribute starting in `/` * @param hrefVar - A string to use in place of the link's href attribute. Using this allows for updating link's targets reactively. */ -export function link(node: HTMLElement, hrefVar: string): void - -/** List of routes */ -export type RouteDefinition = {[key: string]: (SvelteComponent|WrappedComponent)} | - Map - -/** - * 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 - * } - * ```` - */ -export let routes: RouteDefinition - -/** - * Optional prefix for the routes in this router. This is useful for example in the case of nested routers. - */ -export let prefix: string | RegExp | undefined - -/** - * If set to true, the router will restore scroll positions on back navigation - * and scroll to top on forward navigation. - */ -export let restoreScrollState: boolean | undefined +export function link(node: HTMLElement, hrefVar?: string): {update: (hrefVar?: string) => void} /** * @typedef {Object} Location @@ -172,13 +145,51 @@ export const location: Readable /** * Readable store that returns the current querystring */ -export const querystring: Readable +export const querystring: Readable + +/** List of routes */ +export type RouteDefinition = Record | + Map + +/** Generic interface for events from the router */ +interface RouterEvent { + detail: T +} /** * Router component */ export default class Router extends SvelteComponent { - routes: RouteDefinition - prefix: string | RegExp | undefined - restoreScrollState: boolean | undefined + // 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: 'routeLoading' | 'conditionsFailed', callback: (event: RouterEvent) => void): () => void + $on(event: 'routeLoaded', callback: (event: RouterEvent) => void): () => void } diff --git a/wrap.d.ts b/wrap.d.ts index 878c98e..a982d57 100644 --- a/wrap.d.ts +++ b/wrap.d.ts @@ -4,13 +4,13 @@ import {AsyncSvelteComponent, RoutePrecondition, WrappedComponent} from './Route /** Options object for the call to `wrap` */ interface WrapOptions { /** Svelte component to load (this is incompatible with `asyncComponent`) */ - component?: SvelteComponent + component?: typeof SvelteComponent /** Function that returns a Promise that fulfills with a Svelte component (e.g. `{asyncComponent: () => import('Foo.svelte')}`) */ asyncComponent?: AsyncSvelteComponent /** Svelte component to be displayed while the async route is loading (as a placeholder); when unset or false-y, no component is shown while component */ - loadingComponent?: SvelteComponent + loadingComponent?: typeof SvelteComponent /** Optional dictionary passed to the `loadingComponent` component as params (for an exported prop called `params`) */ loadingParams?: object