import { Resolver } from './resolver'; import { ChainItem, PreventResult, RedirectResult, // fix for shadowing Route, RouteContext, RouteParams, RouteResult, RouterLocation, RouterOptions } from './types'; /** * A simple client-side router for single-page applications. It uses * express-style middleware and has a first-class support for Web Components and * lazy-loading. Works great in Polymer and non-Polymer apps. * * Use `new Router(outlet, options)` to create a new Router instance. * * * The `outlet` parameter is a reference to the DOM node to render * the content into. * * * The `options` parameter is an optional object with options. The following * keys are supported: * * `baseUrl` — the initial value for [ * the `baseUrl` property * ](#/classes/Router#property-baseUrl) * * The Router instance is automatically subscribed to navigation events * on `window`. * * See [Live Examples](#/classes/Router/demos/demo/index.html) for the detailed usage demo and code snippets. * * See also detailed API docs for the following methods, for the advanced usage: * * * [setOutlet](#/classes/Router#method-setOutlet) – should be used to configure the outlet. * * [setTriggers](#/classes/Router#method-setTriggers) – should be used to configure the navigation events. * * [setRoutes](#/classes/Router#method-setRoutes) – should be used to configure the routes. * * Only `setRoutes` has to be called manually, others are automatically invoked when creating a new instance. * * @extends Resolver * @demo demo/index.html * @summary JavaScript class that renders different DOM content depending on * a given path. It can re-render when triggered or automatically on * 'popstate' and / or 'click' events. */ export declare class Router extends Resolver { ready: Promise; location: RouterLocation; __lastStartedRenderId: number; __navigationEventHandler: (event?: CustomEvent) => void; __outlet?: Node; __previousContext?: RouteContext; __urlForName?: (routeName: string, params?: RouteParams) => string; __createdByRouter: WeakMap; __addedByRouter: WeakMap; __appearingContent?: HTMLElement[] | null; __disappearingContent?: HTMLElement[] | null; /** * Creates a new Router instance with a given outlet, and * automatically subscribes it to navigation events on the `window`. * Using a constructor argument or a setter for outlet is equivalent: * * ``` * const router = new Router(); * router.setOutlet(outlet); * ``` * @param outlet * @param options */ constructor(outlet?: Node, options?: RouterOptions); __resolveRoute(context: RouteContext): Promise; /** * Takes current routes and set it * @param routes: Route[] * @returns void */ /** * Sets the router outlet (the DOM node where the content for the current * route is inserted). Any content pre-existing in the router outlet is * removed at the end of each render pass. * * NOTE: this method is automatically invoked first time when creating a new Router instance. * * @param outlet the DOM node where the content for the current route * is inserted. */ setOutlet(outlet?: Node): void; /** * Returns the current router outlet. The initial value is undefined. */ /** * Returns the current router outlet. The initial value is undefined. * * @return the current router outlet (or `undefined`) */ getOutlet(): Node | undefined; /** * Takes current routes and set it * @param routes: Route | Route[] * @returns Route | Route[] */ /** * Sets the routing config (replacing the existing one) and triggers a * navigation event so that the router outlet is refreshed according to the * current `window.location` and the new routing config. * * Each route object may have the following properties, listed here in the processing order: * * `path` – the route path (relative to the parent route if any) in the * [express.js syntax](https://expressjs.com/en/guide/routing.html#route-paths"). * * * `children` – an array of nested routes or a function that provides this * array at the render time. The function can be synchronous or asynchronous: * in the latter case the render is delayed until the returned promise is * resolved. The `children` function is executed every time when this route is * being rendered. This allows for dynamic route structures (e.g. backend-defined), * but it might have a performance impact as well. In order to avoid calling * the function on subsequent renders, you can override the `children` property * of the route object and save the calculated array there * (via `context.route.children = [ route1, route2, ...];`). * Parent routes are fully resolved before resolving the children. Children * 'path' values are relative to the parent ones. * * * `action` – the action that is executed before the route is resolved. * The value for this property should be a function, accepting `context` * and `commands` parameters described below. If present, this function is * always invoked first, disregarding of the other properties' presence. * The action can return a result directly or within a `Promise`, which * resolves to the result. If the action result is an `HTMLElement` instance, * a `commands.component(name)` result, a `commands.redirect(path)` result, * or a `context.next()` result, the current route resolution is finished, * and other route config properties are ignored. * See also **Route Actions** section in [Live Examples](#/classes/Router/demos/demo/index.html). * * * `redirect` – other route's path to redirect to. Passes all route parameters to the redirect target. * The target route should also be defined. * See also **Redirects** section in [Live Examples](#/classes/Router/demos/demo/index.html). * * * `bundle` – string containing the path to `.js` or `.mjs` bundle to load before resolving the route, * or the object with "module" and "nomodule" keys referring to different bundles. * Each bundle is only loaded once. If "module" and "nomodule" are set, only one bundle is loaded, * depending on whether the browser supports ES modules or not. * The property is ignored when either an `action` returns the result or `redirect` property is present. * Any error, e.g. 404 while loading bundle will cause route resolution to throw. * See also **Code Splitting** section in [Live Examples](#/classes/Router/demos/demo/index.html). * * * `component` – the tag name of the Web Component to resolve the route to. * The property is ignored when either an `action` returns the result or `redirect` property is present. * If route contains the `component` property (or an action that return a component) * and its child route also contains the `component` property, child route's component * will be rendered as a light dom child of a parent component. * * * `name` – the string name of the route to use in the * [`router.urlForName(name, params)`](#/classes/Router#method-urlForName) * navigation helper method. * * For any route function (`action`, `children`) defined, the corresponding `route` object is available inside the callback * through the `this` reference. If you need to access it, make sure you define the callback as a non-arrow function * because arrow functions do not have their own `this` reference. * * `context` object that is passed to `action` function holds the following properties: * * `context.pathname` – string with the pathname being resolved * * * `context.search` – search query string * * * `context.hash` – hash string * * * `context.params` – object with route parameters * * * `context.route` – object that holds the route that is currently being rendered. * * * `context.next()` – function for asynchronously getting the next route * contents from the resolution chain (if any) * * `commands` object that is passed to `action` function has * the following methods: * * * `commands.redirect(path)` – function that creates a redirect data * for the path specified. * * * `commands.component(component)` – function that creates a new HTMLElement * with current context. Note: the component created by this function is reused if visiting the same path twice in row. * * * @param routes a single route or an array of those * @param skipRender configure the router but skip rendering the * route corresponding to the current `window.location` values * * @return */ setRoutes(routes: Route | Route[], skipRender?: boolean): Promise; /** * Asynchronously resolves the given pathname and renders the resolved route component into the router outlet. If no router outlet is set at the time of calling this method, or at the time when the route resolution is completed, a TypeError is thrown. * Returns a promise that is fulfilled with the router outlet DOM Node after the route component is created and inserted into the router outlet, or rejected if no route matches the given path. * If another render pass is started before the previous one is completed, the result of the previous render pass is ignored. * @param pathnameOrContext — the pathname to render or a context object with a pathname property and other properties to pass to the resolver. * @param shouldUpdateHistory */ /** * Asynchronously resolves the given pathname and renders the resolved route * component into the router outlet. If no router outlet is set at the time of * calling this method, or at the time when the route resolution is completed, * a `TypeError` is thrown. * * Returns a promise that is fulfilled with the router outlet DOM Node after * the route component is created and inserted into the router outlet, or * rejected if no route matches the given path. * * If another render pass is started before the previous one is completed, the * result of the previous render pass is ignored. * * @param pathnameOrContext * the pathname to render or a context object with a `pathname` property, * optional `search` and `hash` properties, and other properties * to pass to the resolver. * @param shouldUpdateHistory * update browser history with the rendered location * @return */ render(pathnameOrContext: string | Partial, shouldUpdateHistory?: boolean): Promise; __fullyResolveChain(topOfTheChainContextBeforeRedirects: RouteContext, contextBeforeRedirects?: RouteContext): Promise; __findComponentContextAfterAllRedirects(context: RouteContext): Promise; __amendWithOnBeforeCallbacks(contextWithFullChain: RouteContext): Promise; __runOnBeforeCallbacks(newContext: RouteContext): Promise; __runOnBeforeLeaveCallbacks(callbacks: Promise, newContext: RouteContext, commands: { prevent: () => PreventResult; }, chainElement: ChainItem): Promise; __runOnBeforeEnterCallbacks(callbacks: Promise, newContext: RouteContext, commands: { prevent: () => PreventResult; redirect: (pathname: string) => RedirectResult; }, chainElement: ChainItem): Promise; __isReusableElement(element?: HTMLElement, otherElement?: HTMLElement): boolean; __isLatestRender(context: RouteContext): boolean; __redirect(redirectData: { pathname: string; from: string; params: RouteParams; }, counter?: number, renderId?: number): Promise; __ensureOutlet(outlet?: Node): void; __updateBrowserHistory({ pathname, search, hash }: RouteContext, replace?: boolean): void; __copyUnchangedElements(context: RouteContext, previousContext?: RouteContext): HTMLElement | Node; __addAppearingContent(context: RouteContext, previousContext?: RouteContext): void; __removeDisappearingContent(): void; __removeAppearingContent(): void; __runOnAfterLeaveCallbacks(currentContext: RouteContext, targetContext?: RouteContext): void; __runOnAfterEnterCallbacks(currentContext: RouteContext): void; __animateIfNeeded(context: RouteContext): Promise; /** * Subscribes this instance to navigation events on the `window`. * * NOTE: beware of resource leaks. For as long as a router instance is * subscribed to navigation events, it won't be garbage collected. */ subscribe(): void; /** * Removes the subscription to navigation events created in the `subscribe()` * method. */ unsubscribe(): void; __onNavigationEvent(event?: CustomEvent): void; /** * Generates a URL for the route with the given name, optionally performing * substitution of parameters. * * The route is searched in all the Router instances subscribed to * navigation events. * * **Note:** For child route names, only array children are considered. * It is not possible to generate URLs using a name for routes set with * a children function. * * @param name the route name or the route’s `component` name. * @param params Optional object with route path parameters. * Named parameters are passed by name (`params[name] = value`), unnamed * parameters are passed by index (`params[index] = value`). * * @return */ urlForName(name: string, params?: RouteParams): string; /** * Generates a URL for the given route path, optionally performing * substitution of parameters. * * @param path string route path declared in [express.js syntax](https://expressjs.com/en/guide/routing.html#route-paths"). * @param params Optional object with route path parameters. * Named parameters are passed by name (`params[name] = value`), unnamed * parameters are passed by index (`params[index] = value`). * * @return */ urlForPath(path: string, params?: RouteParams): string; /** * Triggers navigation to a new path. Returns a boolean without waiting until * the navigation is complete. Returns `true` if at least one `Router` * has handled the navigation (was subscribed and had `baseUrl` matching * the `path` argument), otherwise returns `false`. * * @param path * a new in-app path string, or an URL-like object with `pathname` * string property, and optional `search` and `hash` string properties. * @return */ static go(path: string | { pathname: string; search?: string; hash?: string; }): boolean; }