@kitbag/router 0.27.0 → 0.28.0

package/dist/main.d.ts

@@ -1,6 +1,6 @@
 import { RouterAssets } from './services/createRouterAssets';
 import { RegisteredRouter } from './types/register';
-export type { WithHost, WithoutHost, WithParent, WithoutParent, CreateRouteOptions, PropsGetter, RouterViewPropsGetter, CreateRouteProps, ToRoute } from './types/createRouteOptions';
+export type { WithHost, WithoutHost, WithParent, WithoutParent, CreateRouteOptions, ToRoute } from './types/createRouteOptions';
 export type { RouteAddView, AddViewOptions, AddViewPropsGetter, AddViewPropsCallbackContext } from './types/addView';
 export type { RouteAddLoader, AddLoaderOptions, LoaderGetter } from './types/addLoader';
 export type { RouteAddAlias, AddAliasOptions } from './types/addAlias';
@@ -34,6 +34,7 @@ export * from './types/routerRoute';
 export * from './types/urlString';
 export type { Url, CreateUrlOptions, ParseUrlOptions } from './types/url';
 export * from './types/useLink';
+export * from './types/viewTransition';
 export * from './types/navigation';
 export { DuplicateParamsError } from './errors/duplicateParamsError';
 export { LoaderDataAccessError } from './errors/loaderDataAccessError';
@@ -59,6 +60,7 @@ export { literal } from './services/literal';
 export { createParam } from './services/createParam';
 export { createRouter } from './services/createRouter';
 export { createUrl } from './services/createUrl';
+export type { ViewTransitionProps } from './components/viewTransition';
 /**
  * Registers a hook that is called before a route is left. Must be called from setup.
  * This is useful for performing actions or cleanups before navigating away from a route component.
@@ -119,6 +121,8 @@ export declare const RouterView: RouterAssets<RegisteredRouter>['RouterView'];
  * @group Components
  */
 export declare const RouterLink: RouterAssets<RegisteredRouter>['RouterLink'];
+/** Names a shared element for a view transition. @group Components */
+export declare const ViewTransition: new <TElement extends keyof HTMLElementTagNameMap = "span">(props: import('./main').ViewTransitionProps<TElement>) => import('vue').ComponentPublicInstance<import('./main').ViewTransitionProps<TElement>>;
 /**
  * A component to render a bar across the top of the page while a navigation is pending, filled by how
  * much of the navigation's work has settled.
@@ -179,6 +183,13 @@ export declare const useLink: RouterAssets<RegisteredRouter>['useLink'];
  * @group Compositions
  */
 export declare const useRejection: RouterAssets<RegisteredRouter>['useRejection'];
+/**
+ * A composition to access the view transition in flight, if any.
+ *
+ * @returns The router's view transition state.
+ * @group Compositions
+ */
+export declare const useViewTransition: RouterAssets<RegisteredRouter>['useViewTransition'];
 /**
  * A composition to access the navigation under way: whether one is pending, which routes it leaves and
  * leads to, and how much of the work it waits on has settled.

package/dist/services/addView.d.ts

@@ -1,6 +1,6 @@
 import { Component } from 'vue';
 import { AnyPayloadTransformer } from './payload';
-import { PropsGetter } from '../types/createRouteOptions';
+import { AddViewPropsGetter } from '../types/addView';
 import { PrefetchConfig } from '../types/prefetch';
 import { CreatedRouteOptions, Route } from '../types/route';
 /**
@@ -9,7 +9,7 @@ import { CreatedRouteOptions, Route } from '../types/route';
  */
 type ViewOptions = {
     name?: string;
-    props?: PropsGetter;
+    props?: AddViewPropsGetter<Route, Component>;
     prefetch?: PrefetchConfig;
     transformer?: AnyPayloadTransformer;
 };
@@ -25,7 +25,7 @@ export type AddView = (...args: AddViewParameters) => Route;
 type View = {
     name: string;
     component: Component;
-    props: PropsGetter | undefined;
+    props: AddViewPropsGetter<Route, Component> | undefined;
     prefetch: PrefetchConfig | undefined;
     transformer: AnyPayloadTransformer | undefined;
 };

package/dist/services/createRoute.d.ts

@@ -1,5 +1,3 @@
-import { CreateRouteOptions, PropsGetter, CreateRouteProps, ToRouteMatches, ToRouteUrl, RouterViewPropsGetter } from '../types/createRouteOptions';
+import { CreateRouteOptions, ToRouteMatches, ToRouteUrl } from '../types/createRouteOptions';
 import { RouteWithMethods } from '../types/routeWithMethods';
-type CreateRouteWithProps<TOptions extends CreateRouteOptions, TProps extends CreateRouteProps<TOptions>> = CreateRouteProps<TOptions> extends RouterViewPropsGetter<TOptions> ? [props?: RouterViewPropsGetter<TOptions>] : CreateRouteProps<TOptions> extends PropsGetter<TOptions> ? Partial<ReturnType<CreateRouteProps<TOptions>>> extends ReturnType<CreateRouteProps<TOptions>> ? [props?: TProps] : [props: TProps] : Partial<CreateRouteProps<TOptions>> extends CreateRouteProps<TOptions> ? [props?: TProps] : [props: TProps];
-export declare function createRoute<const TOptions extends CreateRouteOptions, const TProps extends CreateRouteProps<TOptions>>(options: TOptions, ...args: CreateRouteWithProps<TOptions, TProps>): RouteWithMethods<ToRouteUrl<TOptions>, ToRouteMatches<TOptions, TProps>>;
-export {};
+export declare function createRoute<const TOptions extends CreateRouteOptions>(options: TOptions): RouteWithMethods<ToRouteUrl<TOptions>, ToRouteMatches<TOptions>>;

package/dist/services/createRouter.d.ts

@@ -17,8 +17,8 @@ import { EmptyRouterPlugin, RouterPlugin } from '../types/routerPlugin';
  * const About = { template: '<div>About</div>' }
  *
  * export const routes = [
- *   createRoute({ name: 'home', path: '/', component: Home }),
- *   createRoute({ name: 'path', path: '/about', component: About }),
+ *   createRoute({ name: 'home', path: '/' }).addView(Home),
+ *   createRoute({ name: 'path', path: '/about' }).addView(About),
  * ] as const
  *
  * const router = createRouter(routes)

package/dist/services/createRouterAssets.d.ts

@@ -1,3 +1,4 @@
+import { ViewTransition } from '../components/viewTransition';
 import { Router, RouterRoutes, RouterRejections } from '../types/router';
 import { InjectionKey } from 'vue';
 import { createRouterView } from '../components/routerView';
@@ -10,6 +11,7 @@ import { createUseLink } from '../compositions/useLink';
 import { createIsRoute } from '../guards/routes';
 import { AddBeforeLeaveHook, AddBeforeUpdateHook, AddAfterLeaveHook, AddAfterUpdateHook } from '../types/hooks';
 import { createUseRejection } from '../compositions/useRejection';
+import { createUseViewTransition } from '../compositions/useViewTransition';
 import { createUseNavigation } from '../compositions/useNavigation';
 export type RouterAssets<TRouter extends Router> = {
     /**
@@ -72,6 +74,8 @@ export type RouterAssets<TRouter extends Router> = {
      * @group Components
      */
     RouterLink: ReturnType<typeof createRouterLink<TRouter>>;
+    /** Names a shared element for a view transition. @group Components */
+    ViewTransition: typeof ViewTransition;
     /**
      * A component to render a bar across the top of the page while a navigation is pending, filled by how
      * much of the navigation's work has settled.
@@ -132,6 +136,13 @@ export type RouterAssets<TRouter extends Router> = {
      * @group Compositions
      */
     useRejection: ReturnType<typeof createUseRejection<TRouter>>;
+    /**
+     * A composition to access the view transition in flight, if any.
+     *
+     * @returns The router's view transition state.
+     * @group Compositions
+     */
+    useViewTransition: ReturnType<typeof createUseViewTransition<TRouter>>;
     /**
      * A composition to access the navigation under way: whether one is pending, which routes it leaves and
      * leads to, and how much of the work it waits on has settled.

package/dist/services/createRouterHistory.d.ts

@@ -1,4 +1,4 @@
-import { History, Listener } from './history';
+import { History, Update } from './history';
 type NavigationPushOptions = {
     replace?: boolean;
     state?: unknown;
@@ -12,8 +12,16 @@ type RouterHistory = History & {
     stopListening: () => void;
 };
 export type RouterHistoryMode = 'auto' | 'browser' | 'memory' | 'hash';
+/** Called by the router while the traversal navigation is active. */
+export type RouterHistoryTraversal = {
+    commit: () => void;
+    restore: () => void;
+};
+type RouterHistoryUpdate = Update & {
+    traversal?: RouterHistoryTraversal;
+};
 type RouterHistoryOptions = {
-    listener: Listener;
+    listener: (event: RouterHistoryUpdate) => void;
     mode?: RouterHistoryMode;
 };
 export declare function createRouterHistory({ mode, listener }: RouterHistoryOptions): RouterHistory;

package/dist/services/createViewTransitions.browser.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/services/createViewTransitions.d.ts

@@ -0,0 +1,38 @@
+import { ResolvedRoute } from '../types/resolved';
+import { RouterViewTransition, ViewTransitionTypes } from '../types/viewTransition';
+export type PendingViewTransition = {
+    to: ResolvedRoute;
+    from: ResolvedRoute;
+    types: ViewTransitionTypes;
+};
+export type ViewTransitions = {
+    /**
+     * The transition in flight, as the router exposes it.
+     */
+    viewTransition: RouterViewTransition;
+    /**
+     * Records the navigation about to transition, ahead of its data loading, so the page being left can
+     * prepare before it is captured.
+     */
+    prepare: (navigation: PendingViewTransition) => void;
+    /**
+     * Forgets a prepared navigation that was superseded before it transitioned, unless a newer one has
+     * taken over the state since.
+     */
+    cancel: (navigation: PendingViewTransition) => void;
+    /**
+     * Forgets the transition in flight, for a navigation that commits without one.
+     */
+    reset: () => void;
+    /**
+     * Runs the update inside a view transition. Resolves after the update and Vue flush, ahead of the animation.
+     */
+    start: (update: () => void | Promise<unknown>) => Promise<void>;
+};
+/**
+ * Owns the one transition the document runs at a time. Starting another while the first has not yet run
+ * its callback leaves the browser free to run the two callbacks in either order, so a navigation arriving
+ * then takes over the pending callback instead. Once the callback has run the browser skips the old
+ * animation on its own.
+ */
+export declare function createViewTransitions(): ViewTransitions;

package/dist/services/history.d.ts

@@ -23,6 +23,7 @@ export interface Transition extends Update {
 export type Blocker = (tx: Transition) => void;
 export type To = string | Partial<Path>;
 export interface History {
+    readonly index: number | null;
     readonly action: Action;
     readonly location: Location;
     createHref: (to: To) => string;

package/dist/services/routeViews.d.ts

@@ -0,0 +1,7 @@
+import { RouteViews } from '../types/routeViews';
+export declare const DEFAULT_VIEW_NAME = "default";
+/**
+ * The names of the views that have a props getter. A view without one is never computed, so waiting on it
+ * would never settle.
+ */
+export declare function viewNamesWithProps(views: RouteViews): string[];

package/dist/tests/navigationBehavior.browser.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/viewTransitions.browser.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/addView.d.ts

@@ -1,6 +1,5 @@
 import { Component } from 'vue';
 import { ComponentProps } from '../services/component';
-import { ComponentPropsAreOptional, PropsGetter } from './createRouteOptions';
 import { ResolvedRoute, WithData } from './resolved';
 import { CreatedRouteOptions, Route } from './route';
 import { RouteCallbackContext } from './routeCallbackContext';
@@ -11,8 +10,7 @@ import { RouteView, RouteViews } from './routeViews';
 import { Url } from './url';
 import { AnyFunction, Identity, LastInArray, MaybePromise } from './utilities';
 /**
- * The props getter for a view added via `addView`. Receives the same two arguments as the
- * `createRoute` props callback: the resolved route and a context object.
+ * The props getter for a view added via `addView`. Receives the resolved route and a context object.
  */
 export type AddViewPropsGetter<TRoute extends Route, TComponent extends Component> = (route: ResolvedRoute<TRoute> & WithData<TRoute>, context: AddViewPropsCallbackContext<TRoute>) => MaybePromise<ComponentProps<TComponent>>;
 /**
@@ -20,6 +18,7 @@ export type AddViewPropsGetter<TRoute extends Route, TComponent extends Componen
  * callbacks attached to a route.
  */
 export type AddViewPropsCallbackContext<TRoute extends Route> = RouteCallbackContext<TRoute>;
+type ComponentPropsAreOptional<TComponent extends Component> = Partial<ComponentProps<TComponent>> extends ComponentProps<TComponent> ? true : false;
 /**
  * When the getter is omitted the default type param resolves to the wide getter type, which then
  * "extends" itself and collapses to undefined. When a getter is provided its return type is kept — the
@@ -32,7 +31,7 @@ type NewViewProps<TRoute extends Route, TComponent extends Component, TGetter ex
  * @template TName - The view's name, inferred from the `name` option.
  * @template TGetter - The view's props getter, inferred from the `props` option.
  */
-export type AddViewOptions<TName extends string | undefined = string, TGetter = PropsGetter> = TransformerOptions<PayloadValueOf<TGetter>> & {
+export type AddViewOptions<TName extends string | undefined = string, TGetter = AddViewPropsGetter<Route, Component>> = TransformerOptions<PayloadValueOf<TGetter>> & {
     /**
      * The name of the view, rendered by `<router-view name="..." />`. Defaults to the unnamed view.
      */

package/dist/types/createRouteOptions.d.ts

@@ -1,20 +1,15 @@
-import { Component } from 'vue';
+import { NavigationBehavior } from './navigation';
 import { Param } from './paramTypes';
 import { PrefetchConfig } from './prefetch';
+import { ViewTransitionConfig } from './viewTransition';
 import { RouteMeta } from './register';
 import { Route, RouteInternal } from './route';
-import { ResolvedRoute, WithData } from './resolved';
-import { ComponentProps } from '../services/component';
-import { PropsCallbackContext } from './props';
-import { AnyFunction, Identity, MaybePromise } from './utilities';
 import { ToMeta } from './meta';
 import { ToName } from './name';
 import { UrlPart, UrlQueryPart } from '../services/withParams';
 import { RouteContext } from './routeContext';
-import { RouterViewProps } from '../components/routerView';
 import { ToUrl } from './url';
 import { CombineUrl } from '../services/combineUrl';
-import { RouteView } from './routeViews';
 export type WithHost<THost extends string | UrlPart = string | UrlPart> = {
     /**
      * Host part of URL.
@@ -31,20 +26,6 @@ export declare function isWithParent<T extends Record<string, unknown>>(options:
 export type WithoutParent = {
     parent?: never;
 };
-/**
- * This type is used to strip the component and components properties from the options object
- * when creating a Route to simplify and minimize the output type.
- */
-type WithoutComponents = {
-    component: never;
-    components: never;
-};
-export declare function isWithComponent<T extends Record<string, unknown>>(options: T): options is T & {
-    component: Component;
-};
-export declare function isWithComponents<T extends Record<string, unknown>>(options: T): options is T & {
-    components: Record<string, Component>;
-};
 export type CreateRouteOptions<TName extends string | undefined = string | undefined, TMeta extends RouteMeta = RouteMeta> = {
     /**
      * Name for route, used to create route keys and in navigation.
@@ -70,6 +51,12 @@ export type CreateRouteOptions<TName extends string | undefined = string | undef
      * Determines what assets are prefetched when router-link is rendered for this route. Overrides router level prefetch.
      */
     prefetch?: PrefetchConfig;
+    /** Overrides the parent route and router navigation behavior. */
+    navigation?: NavigationBehavior;
+    /**
+     * Animates navigations to this route with the View Transitions API. Overrides router level viewTransition.
+     */
+    viewTransition?: ViewTransitionConfig;
     /**
      * Type params for additional data intended to be stored in history state, all keys will be optional unless a default is provided.
      */
@@ -78,19 +65,6 @@ export type CreateRouteOptions<TName extends string | undefined = string | undef
      * An optional parent route to nest this route under.
      */
     parent?: Route;
-    /**
-     * An optional component to render when this route is matched.
-     *
-     * @default RouterView
-     * @deprecated Use the chainable `addView` method on the route instead: `createRoute({ ... }).addView(component, { props })`.
-     */
-    component?: Component;
-    /**
-     * An object of named components to render using named views
-     *
-     * @deprecated Use the chainable `addView` method on the route instead: `createRoute({ ... }).addView(component, { name, props })`.
-     */
-    components?: Record<string, Component>;
     /**
      * Related routes and rejections for the route. The context is exposed to the hooks and props callback functions for this route.
      */
@@ -100,16 +74,7 @@ export type CreateRouteOptions<TName extends string | undefined = string | undef
      */
     hoist?: boolean;
 };
-export type PropsGetter<TOptions extends CreateRouteOptions = CreateRouteOptions, TComponent extends Component = Component> = (route: ResolvedRoute<ToRoute<TOptions>> & WithData<ToRoute<TOptions>>, context: PropsCallbackContext<ToRoute<TOptions>, TOptions>) => MaybePromise<ComponentProps<TComponent>>;
-export type RouterViewPropsGetter<TOptions extends CreateRouteOptions = CreateRouteOptions> = (route: ResolvedRoute<ToRoute<TOptions>> & WithData<ToRoute<TOptions>>, context: PropsCallbackContext<ToRoute<TOptions>, TOptions>) => MaybePromise<RouterViewProps & Record<string, unknown>>;
-export type ComponentPropsAreOptional<TComponent extends Component> = Partial<ComponentProps<TComponent>> extends ComponentProps<TComponent> ? true : false;
-type RoutePropsRecord<TOptions extends CreateRouteOptions = CreateRouteOptions, TComponents extends Record<string, Component> = Record<string, Component>> = {
-    [K in keyof TComponents as ComponentPropsAreOptional<TComponents[K]> extends true ? K : never]?: PropsGetter<TOptions, TComponents[K]>;
-} & {
-    [K in keyof TComponents as ComponentPropsAreOptional<TComponents[K]> extends false ? K : never]: PropsGetter<TOptions, TComponents[K]>;
-};
-export type CreateRouteProps<TOptions extends CreateRouteOptions = CreateRouteOptions> = TOptions['component'] extends Component ? PropsGetter<TOptions, TOptions['component']> : TOptions['components'] extends Record<string, Component> ? RoutePropsRecord<TOptions, TOptions['components']> : RouterViewPropsGetter<TOptions>;
-type ToMatch<TOptions extends CreateRouteOptions, TProps = undefined> = Omit<TOptions, 'meta' | 'name' | 'component' | 'components' | 'parent'> & {
+type ToMatch<TOptions extends CreateRouteOptions> = Omit<TOptions, 'meta' | 'name' | 'parent'> & {
     id: string;
     name: ToName<TOptions['name']>;
     /**
@@ -117,9 +82,9 @@ type ToMatch<TOptions extends CreateRouteOptions, TProps = undefined> = Omit<TOp
      */
     meta: ToMeta<TOptions['meta']>;
     /**
-     * The views this route renders, keyed by view name.
+     * The views this route renders, keyed by view name. Added by `addView`.
      */
-    views: PropsToViews<TProps>;
+    views: {};
     /**
      * The loaders this route runs, keyed by loader name. Always empty here — loaders are only added via
      * the route's `addLoader`.
@@ -130,29 +95,20 @@ type ToMatch<TOptions extends CreateRouteOptions, TProps = undefined> = Omit<TOp
  * The matches for a route, from greatest ancestor to the route itself. Each carries its own views, so
  * there is no second tuple to keep aligned with this one.
  */
-type ToMatches<TOptions extends CreateRouteOptions, TProps = undefined> = TOptions extends {
+type ToMatches<TOptions extends CreateRouteOptions> = TOptions extends {
     parent: infer TParent extends Route;
-} ? [...TParent['matches'], ToMatch<TOptions, TProps>] : [ToMatch<TOptions, TProps>];
-/**
- * Builds a views record from the props argument, which is either a single getter for the unnamed view or
- * a record of getters keyed by view name.
- */
-type PropsToViews<TProps> = [TProps] extends [AnyFunction] ? {
-    default: RouteView<ReturnType<TProps>>;
-} : [TProps] extends [Record<string, AnyFunction>] ? {
-    [K in keyof TProps]: RouteView<ReturnType<TProps[K]>>;
-} : {};
+} ? [...TParent['matches'], ToMatch<TOptions>] : [ToMatch<TOptions>];
 /**
  * The url a route resolves to, combined with its parent's unless the route is hoisted.
  */
 export type ToRouteUrl<TOptions extends CreateRouteOptions> = TOptions extends {
     parent: infer TParent extends Route;
-} ? TOptions['hoist'] extends true ? ToUrl<TOptions & WithoutComponents> : CombineUrl<TParent, ToUrl<TOptions & WithoutComponents>> : ToUrl<Identity<TOptions & WithoutComponents>>;
+} ? TOptions['hoist'] extends true ? ToUrl<TOptions> : CombineUrl<TParent, ToUrl<TOptions>> : ToUrl<TOptions>;
 /**
- * The matches for a route, with the props argument resolved to the views of its own match.
+ * The matches for a route, before any views or loaders are added.
  */
-export type ToRouteMatches<TOptions extends CreateRouteOptions, TProps> = ToMatches<TOptions, CreateRouteProps<TOptions> extends TProps ? undefined : TProps>;
-export type ToRoute<TOptions extends CreateRouteOptions, TProps extends CreateRouteProps<TOptions> | undefined = undefined> = CreateRouteOptions extends TOptions ? Route : Route<ToRouteUrl<TOptions>, ToRouteMatches<TOptions, TProps>>;
+export type ToRouteMatches<TOptions extends CreateRouteOptions> = ToMatches<TOptions>;
+export type ToRoute<TOptions extends CreateRouteOptions> = CreateRouteOptions extends TOptions ? Route : Route<ToRouteUrl<TOptions>, ToRouteMatches<TOptions>>;
 /**
  * Nests a route under its parent. A hoisted route keeps everything of its parent's except the url: its own
  * url stands alone and it inherits none of the parent's aliases.

package/dist/types/navigation.d.ts

@@ -1,5 +1,7 @@
 import { ComputedRef } from 'vue';
 import { ResolvedRoute } from './resolved';
+/** Whether navigation commits immediately or waits for its props, loaders, and components. */
+export type NavigationBehavior = 'progressive' | 'blocking';
 /**
  * The navigation under way, if any, and how far it has come. A navigation is under way from the moment it
  * is asked for until the route it leads to has everything it renders with, or it is rejected, aborted, or

package/dist/types/props.d.ts

@@ -1,25 +1,7 @@
-import { CreateRouteOptions } from './createRouteOptions';
 import { Route } from './route';
-import { RouterReject } from './routerReject';
-import { RouterPush } from './routerPush';
-import { RouterReplace } from './routerReplace';
-import { ExtractRouteContextRejections, ExtractRouteContextRoutes } from './routeContext';
-import { ResolvedRoute } from './resolved';
-import { RouteUpdate } from './routeUpdate';
 import { LoadersDataReturnType } from './routeLoaders';
 import { ViewsPropsReturnType } from './routeViews';
 import { LastInArray } from './utilities';
-/**
- * Context provided to props callback functions
- */
-export type PropsCallbackContext<TRoute extends Route = Route, TOptions extends CreateRouteOptions = CreateRouteOptions> = {
-    reject: RouterReject<ExtractRouteContextRejections<TOptions>>;
-    push: RouterPush<[TRoute] | ExtractRouteContextRoutes<TOptions>>;
-    replace: RouterReplace<[TRoute] | ExtractRouteContextRoutes<TOptions>>;
-    update: RouteUpdate<ResolvedRoute<TRoute>>;
-    signal: AbortSignal;
-    parent: PropsCallbackParent<TOptions['parent']>;
-};
 export type PropsCallbackParent<TParent extends Route | undefined = Route | undefined> = Route | undefined extends TParent ? undefined | {
     name: string;
     props: unknown;

package/dist/types/route.d.ts

@@ -29,10 +29,9 @@ export type RouteInternal = {
 export type Routes = readonly Route[];
 /**
  * The Route properties originally provided to `createRoute`, plus the views that route renders and the
- * loaders it runs. The deprecated `component`/`components` options are folded into `views` (see
- * {@link RouteViews}).
+ * loaders it runs.
  */
-export type CreatedRouteOptions = Omit<CreateRouteOptions, 'component' | 'components'> & {
+export type CreatedRouteOptions = CreateRouteOptions & {
     id: string;
     views: RouteViews;
     loaders: RouteLoaders;

package/dist/types/routeViews.d.ts

@@ -3,26 +3,24 @@ import { Component } from 'vue';
 import { PrefetchConfig } from './prefetch';
 import { AnyFunction } from './utilities';
 /**
- * A single view: what to render, how to get its props, and how to prefetch it. `component` is optional
- * because a route can bind props to the nested RouterView it renders without declaring a component.
+ * A single view: what to render, how to get its props, and how to prefetch it.
  *
  * @template TProps - What this view's props getter returns, carried so parent props can be typed from it.
  */
 export type RouteView<TProps = undefined> = {
-    component?: Component;
+    component: Component;
     props?: AnyFunction<TProps>;
     prefetch?: PrefetchConfig;
     transformer?: AnyPayloadTransformer;
 };
 /**
- * The views for a single route, keyed by view name (the unnamed view under 'default'). Indexed by depth in
- * `route.views` — parallel to how `route.matches` indexes the matched options, which is where a route's id
- * comes from at a given depth.
+ * The views for a single match, keyed by view name (the unnamed view under 'default'). Each match in
+ * `route.matches` carries its own views.
  */
 export type RouteViews = Record<string, RouteView<unknown>>;
 /**
  * The props a child sees for a parent's views. A lone unnamed view is given directly rather than under a
- * 'default' key, matching how the props argument is written. Each view's props are always a promise,
+ * 'default' key. Each view's props are always a promise,
  * since the parent's props may not have been computed when the child's getter runs.
  */
 export type ViewsPropsReturnType<TViews> = keyof ViewsWithProps<TViews> extends never ? undefined : keyof ViewsWithProps<TViews> extends 'default' ? ParentViewProps<Extract<ViewsWithProps<TViews>, {

package/dist/types/router.d.ts

@@ -1,3 +1,4 @@
+import { NavigationBehavior } from './navigation';
 import { App, InjectionKey, Ref } from 'vue';
 import { RouterHistoryMode } from '../services/createRouterHistory';
 import { TransformerOptions } from '../services/payload';
@@ -14,6 +15,7 @@ import { RouterPlugin } from './routerPlugin';
 import { RoutesName } from './routesMap';
 import { ExtractRejections, ExtractRejectionTypes, Rejections, BuiltInRejectionType } from './rejection';
 import { PayloadValueError } from '../errors/payloadValueError';
+import { ViewTransitionConfig } from './viewTransition';
 /**
  * Options to initialize a {@link Router} instance.
  */
@@ -44,6 +46,17 @@ export type RouterOptions = TransformerOptions & {
      * Determines what assets are prefetched when router-link is rendered for a specific route
      */
     prefetch?: PrefetchConfig;
+    /**
+     * Whether navigation waits for props, loaders, and components before committing.
+     * @default 'progressive'
+     */
+    navigation?: NavigationBehavior;
+    /**
+     * Animates navigations with the View Transitions API. Overridden per route and per navigation.
+     *
+     * @default false
+     */
+    viewTransition?: ViewTransitionConfig;
     /**
      * Components assigned to each type of rejection your router supports.
      */

package/dist/types/routerPush.d.ts

@@ -1,3 +1,4 @@
+import { NavigationBehavior } from './navigation';
 import { Routes } from './route';
 import { RoutesName } from './routesMap';
 import { RouteParamsByKey } from './routeWithParams';
@@ -6,6 +7,7 @@ import { UrlString } from './urlString';
 import { AllPropertiesAreOptional } from './utilities';
 import { QuerySource } from './querySource';
 import { ResolvedRoute } from './resolved';
+import { ViewTransitionConfig } from './viewTransition';
 export type RouterPushOptions<TState = unknown> = {
     /**
      * The query string to add to the url.
@@ -19,10 +21,16 @@ export type RouterPushOptions<TState = unknown> = {
      * Whether to replace the current history entry.
      */
     replace?: boolean;
+    /** Overrides the route and router navigation behavior. */
+    navigation?: NavigationBehavior;
     /**
      * State values to pass to the route.
      */
     state?: Partial<TState>;
+    /**
+     * Animates the navigation with the View Transitions API. Overrides route and router level viewTransition.
+     */
+    viewTransition?: ViewTransitionConfig;
 };
 type RouterPushArgs<TRoutes extends Routes, TSource extends RoutesName<TRoutes>> = AllPropertiesAreOptional<RouteParamsByKey<TRoutes, TSource>> extends true ? [params?: RouteParamsByKey<TRoutes, TSource>, options?: RouterPushOptions<RouteStateByName<TRoutes, TSource>>] : [params: RouteParamsByKey<TRoutes, TSource>, options?: RouterPushOptions<RouteStateByName<TRoutes, TSource>>];
 export type RouterPush<TRoutes extends Routes = any> = {

package/dist/types/routerReplace.d.ts

@@ -1,3 +1,4 @@
+import { NavigationBehavior } from './navigation';
 import { Routes } from './route';
 import { RoutesName } from './routesMap';
 import { RouteParamsByKey } from './routeWithParams';
@@ -8,6 +9,8 @@ import { QuerySource } from './querySource';
 import { ResolvedRoute } from './resolved';
 export type RouterReplaceOptions<TState = unknown> = {
     query?: QuerySource;
+    /** Overrides the route and router navigation behavior. */
+    navigation?: NavigationBehavior;
     hash?: string;
     state?: Partial<TState>;
 };

package/dist/types/useLink.d.ts

@@ -37,6 +37,11 @@ export type UseLink = {
      *
      */
     isExternal: ComputedRef<boolean>;
+    /**
+     * True while a view transition to this link's location is in flight, so the elements it animates from
+     * can be named before the page is captured.
+     */
+    isTransitioning: ComputedRef<boolean>;
     /**
      * Convenience method for executing `router.push` with route context passed in.
      */

package/dist/types/viewTransition.d.ts

@@ -0,0 +1,49 @@
+import { ResolvedRoute, RouterResolvedRouteUnion } from './resolved';
+import { CreatedRouteOptions, Routes } from './route';
+/**
+ * Types set on a view transition, which css targets with `:active-view-transition-type()`.
+ */
+export type ViewTransitionTypes = string[];
+/**
+ * The navigation a view transition animates. There is always a route to animate from, since the first
+ * navigation never transitions.
+ */
+export type ViewTransitionContext = {
+    to: ResolvedRoute;
+    from: ResolvedRoute;
+};
+/**
+ * Decides the types for a navigation. Returning `false` skips the transition for that navigation.
+ */
+export type ViewTransitionTypesCallback = (context: ViewTransitionContext) => ViewTransitionTypes | false;
+export type ViewTransitionConfigOptions = {
+    /**
+     * Types set on the transition, combined with the types of every other level that applies.
+     */
+    types?: ViewTransitionTypes | ViewTransitionTypesCallback;
+};
+/**
+ * Whether a navigation animates with the View Transitions API. A boolean enables or disables the
+ * transition, an array of types or an options object enables it.
+ */
+export type ViewTransitionConfig = boolean | ViewTransitionTypes | ViewTransitionConfigOptions;
+export type ViewTransitionConfigs = {
+    routerViewTransition?: ViewTransitionConfig;
+    routeViewTransition?: ViewTransitionConfig;
+    navigationViewTransition?: ViewTransitionConfig;
+};
+/**
+ * The view transition in flight, from the moment a navigation is decided to transition until its
+ * animation finishes. `to` and `from` are known throughout, so the page being left can prepare its elements
+ * before it is captured. `transition` is set once the browser has been asked to transition.
+ */
+export type RouterViewTransition<TRoutes extends Routes = Routes> = {
+    readonly isTransitioning: boolean;
+    readonly to: RouterResolvedRouteUnion<TRoutes> | undefined;
+    readonly from: RouterResolvedRouteUnion<TRoutes> | undefined;
+    readonly types: ViewTransitionTypes;
+    readonly transition: ViewTransition | undefined;
+};
+export declare function hasViewTransition(match: CreatedRouteOptions): match is CreatedRouteOptions & {
+    viewTransition: ViewTransitionConfig;
+};

package/dist/utilities/navigation.d.ts

@@ -0,0 +1,15 @@
+import { NavigationBehavior } from '../types/navigation';
+import { ResolvedRoute } from '../types/resolved';
+type NavigationOptions = {
+    routerNavigation?: NavigationBehavior;
+    routeNavigation?: NavigationBehavior;
+    navigation?: NavigationBehavior;
+};
+type NavigationOption = {
+    navigation: NavigationBehavior;
+    isBlockingNavigation: boolean;
+    isProgressiveNavigation: boolean;
+};
+export declare function getRouteNavigationOption(to: ResolvedRoute | null): NavigationBehavior | undefined;
+export declare function getNavigationOption(options: NavigationOptions): NavigationOption;
+export {};