@real-router/vue 0.0.1

package/README.md

@@ -0,0 +1,430 @@
+# @real-router/vue
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](../../LICENSE)
+
+> Vue 3 integration for [Real-Router](https://github.com/greydragon888/real-router) — composables, components, and context providers.
+
+## Installation
+
+```bash
+npm install @real-router/vue @real-router/core @real-router/browser-plugin
+```
+
+**Peer dependency:** `vue` >= 3.3.0
+
+## Quick Start
+
+```typescript
+import { createRouter } from "@real-router/core";
+import { browserPluginFactory } from "@real-router/browser-plugin";
+import { RouterProvider, RouteView, Link } from "@real-router/vue";
+import { defineComponent, h } from "vue";
+
+const router = createRouter([
+  { name: "home", path: "/" },
+  {
+    name: "users",
+    path: "/users",
+    children: [{ name: "profile", path: "/:id" }],
+  },
+]);
+
+router.usePlugin(browserPluginFactory());
+router.start();
+
+const App = defineComponent({
+  setup() {
+    return () =>
+      h(
+        RouterProvider,
+        { router },
+        {
+          default: () => [
+            h("nav", [
+              h(Link, { routeName: "home" }, { default: () => "Home" }),
+              h(Link, { routeName: "users" }, { default: () => "Users" }),
+            ]),
+            h(
+              RouteView,
+              { nodeName: "" },
+              {
+                default: () => [
+                  h(
+                    RouteView.Match,
+                    { segment: "home" },
+                    { default: () => h(HomePage) },
+                  ),
+                  h(
+                    RouteView.Match,
+                    { segment: "users" },
+                    { default: () => h(UsersPage) },
+                  ),
+                  h(RouteView.NotFound, null, {
+                    default: () => h(NotFoundPage),
+                  }),
+                ],
+              },
+            ),
+          ],
+        },
+      );
+  },
+});
+```
+
+Or with Vue SFC templates (the composables and components work in `.vue` files too):
+
+```vue
+<template>
+  <RouterProvider :router="router">
+    <nav>
+      <Link routeName="home">Home</Link>
+      <Link routeName="users">Users</Link>
+    </nav>
+    <RouteView nodeName="">
+      <RouteView.Match segment="home">
+        <HomePage />
+      </RouteView.Match>
+      <RouteView.Match segment="users">
+        <UsersPage />
+      </RouteView.Match>
+      <RouteView.NotFound>
+        <NotFoundPage />
+      </RouteView.NotFound>
+    </RouteView>
+  </RouterProvider>
+</template>
+```
+
+## Plugin Installation (Alternative)
+
+Use `createRouterPlugin` for the standard `app.use()` pattern instead of `<RouterProvider>`:
+
+```typescript
+import { createApp } from "vue";
+import { createRouterPlugin } from "@real-router/vue";
+
+const app = createApp(App);
+app.use(createRouterPlugin(router));
+```
+
+All composables (`useRouter`, `useRoute`, etc.) and the `v-link` directive work identically — `app.provide()` resolves the same way as component-level `provide()`. `<RouterProvider>` remains available for advanced cases (multiple routers, scoped routing, testing).
+
+## Composables
+
+Route state composables return `ShallowRef` values. Read `.value` in script, or use them directly in templates where Vue auto-unwraps refs.
+
+| Composable              | Returns                                                       | Reactive?                                |
+| ----------------------- | ------------------------------------------------------------- | ---------------------------------------- |
+| `useRouter()`           | `Router`                                                      | Never                                    |
+| `useNavigator()`        | `Navigator`                                                   | Never (stable ref, safe to use directly) |
+| `useRoute()`            | `{ navigator, route: ShallowRef, previousRoute: ShallowRef }` | route/previousRoute on every navigation  |
+| `useRouteNode(name)`    | `{ navigator, route: ShallowRef, previousRoute: ShallowRef }` | Only when node activates/deactivates     |
+| `useRouteUtils()`       | `RouteUtils`                                                  | Never                                    |
+| `useRouterTransition()` | `ShallowRef<RouterTransitionSnapshot>`                        | On transition start/end                  |
+
+```typescript
+// useRouteNode — updates only when "users.*" changes
+const UsersLayout = defineComponent({
+  setup() {
+    const { route } = useRouteNode("users");
+
+    return () => {
+      if (!route.value) return null;
+
+      switch (route.value.name) {
+        case "users":
+          return h(UsersList);
+        case "users.profile":
+          return h(UserProfile, { id: route.value.params.id });
+        default:
+          return null;
+      }
+    };
+  },
+});
+
+// useNavigator — stable reference, never reactive
+const BackButton = defineComponent({
+  setup() {
+    const navigator = useNavigator();
+    return () =>
+      h("button", { onClick: () => navigator.navigate("home") }, "Back");
+  },
+});
+
+// useRouterTransition — progress bars, loading states
+const GlobalProgress = defineComponent({
+  setup() {
+    const transition = useRouterTransition();
+    return () =>
+      transition.value.isTransitioning
+        ? h("div", { class: "progress-bar" })
+        : null;
+  },
+});
+```
+
+## Components
+
+### `<Link>`
+
+Navigation link with automatic active state detection. Uses `computed()` for href and class — only the DOM attributes update when active state changes.
+
+```typescript
+h(
+  Link,
+  {
+    routeName: "users.profile",
+    routeParams: { id: "123" },
+    activeClassName: "active", // default: "active"
+    activeStrict: false, // default: false (ancestor match)
+    ignoreQueryParams: true, // default: true
+    routeOptions: { replace: true },
+  },
+  { default: () => "View Profile" },
+);
+```
+
+In a template:
+
+```vue
+<Link
+  routeName="users.profile"
+  :routeParams="{ id: '123' }"
+  activeClassName="active"
+  :activeStrict="false"
+  :ignoreQueryParams="true"
+  :routeOptions="{ replace: true }"
+>
+  View Profile
+</Link>
+```
+
+### `<RouteView>`
+
+Declarative route matching. Renders the first matching `<RouteView.Match>` child.
+
+```typescript
+h(
+  RouteView,
+  { nodeName: "" },
+  {
+    default: () => [
+      h(RouteView.Match, { segment: "users" }, { default: () => h(UsersPage) }),
+      h(
+        RouteView.Match,
+        { segment: "settings" },
+        { default: () => h(SettingsPage) },
+      ),
+      h(RouteView.NotFound, null, { default: () => h(NotFoundPage) }),
+    ],
+  },
+);
+```
+
+`RouteView.Match` accepts an optional `exact` prop for strict segment matching:
+
+```typescript
+h(
+  RouteView.Match,
+  { segment: "users", exact: true },
+  { default: () => h(UsersIndex) },
+);
+// Only matches "users" exactly, not "users.profile"
+```
+
+**`keepAlive` prop:** Vue's native `<KeepAlive>` preserves component state across navigations. Each segment gets a dedicated wrapper component so `<KeepAlive>` can track them independently.
+
+```typescript
+h(
+  RouteView,
+  { nodeName: "", keepAlive: true },
+  {
+    default: () => [
+      h(RouteView.Match, { segment: "users" }, { default: () => h(UsersPage) }),
+      // UsersPage stays alive when navigating to settings and back
+    ],
+  },
+);
+```
+
+**Lazy loading with `fallback`:** Pass a `fallback` prop (`VNode | (() => VNode)`) to wrap the matched content in Vue's `<Suspense>`. This lets you show a loading state while a `defineAsyncComponent` chunk is fetching. Works with both `keepAlive` and non-`keepAlive` modes.
+
+```typescript
+import { defineAsyncComponent, h } from "vue";
+
+const LazyDashboard = defineAsyncComponent(() => import("./Dashboard.vue"));
+
+h(
+  RouteView,
+  { nodeName: "" },
+  {
+    default: () => [
+      h(
+        RouteView.Match,
+        { segment: "dashboard", fallback: h(Spinner) },
+        { default: () => h(LazyDashboard) },
+      ),
+    ],
+  },
+);
+```
+
+In a template:
+
+```vue
+<script setup>
+import { defineAsyncComponent } from "vue";
+const LazyDashboard = defineAsyncComponent(() => import("./Dashboard.vue"));
+</script>
+
+<RouteView nodeName="">
+  <RouteView.Match segment="dashboard" :fallback="SpinnerComponent">
+    <LazyDashboard />
+  </RouteView.Match>
+</RouteView>
+```
+
+Without `fallback`, no `<Suspense>` boundary is added. The prop is optional.
+
+## Directives
+
+### `v-link`
+
+Low-level directive for adding navigation to any element. Automatically handles click events, keyboard navigation (Enter key), and cursor styling.
+
+```typescript
+import { vLink } from "@real-router/vue";
+
+h("a", {
+  "v-link": { name: "users.profile", params: { id: "123" } },
+});
+
+h("button", {
+  "v-link": { name: "home" },
+});
+
+h("div", {
+  "v-link": {
+    name: "settings",
+    params: {},
+    options: { replace: true },
+  },
+  role: "link",
+  tabindex: "0",
+});
+```
+
+In a template:
+
+```vue
+<a v-link="{ name: 'users.profile', params: { id: '123' } }">
+  User Profile
+</a>
+
+<button v-link="{ name: 'home' }">
+  Go Home
+</button>
+
+<div v-link="{ name: 'settings' }" role="link" tabindex="0">
+  Settings
+</div>
+```
+
+**Value:**
+
+| Property  | Type     | Default | Description                        |
+| --------- | -------- | ------- | ---------------------------------- |
+| `name`    | `string` | —       | Target route name                  |
+| `params`  | `Params` | `{}`    | Route parameters                   |
+| `options` | `object` | `{}`    | Navigation options (replace, etc.) |
+
+The directive automatically sets `cursor: pointer` and adds `role="link"` + `tabindex="0"` to non-interactive elements for accessibility.
+
+## Vue-Specific Patterns
+
+### Refs, Not Plain Values
+
+Unlike the React and Preact adapters, `useRoute()` and `useRouteNode()` return `ShallowRef` values. Read `.value` in script:
+
+```typescript
+// React/Preact
+const { route } = useRoute();
+console.log(route?.name);
+
+// Vue
+const { route } = useRoute();
+console.log(route.value?.name); // .value in script
+
+// In template — Vue auto-unwraps
+// <div>{{ route?.name }}</div>
+```
+
+### Watching Route Changes
+
+Use Vue's `watch` to react to route changes in script:
+
+```typescript
+const { route } = useRouteNode("users");
+
+watch(route, (newRoute) => {
+  if (newRoute) {
+    document.title = `Users — ${newRoute.params.id ?? "list"}`;
+  }
+});
+```
+
+### No .vue SFC Required
+
+All components are plain `.ts` files using `defineComponent` + `h()`. You can use them in `.vue` SFC templates or in render functions — both work.
+
+## Accessibility
+
+Enable screen reader announcements for route changes:
+
+```typescript
+h(
+  RouterProvider,
+  { router, announceNavigation: true },
+  {
+    default: () => [
+      /* Your app */
+    ],
+  },
+);
+```
+
+Or in a template:
+
+```vue
+<RouterProvider :router="router" :announceNavigation="true">
+  <!-- Your app -->
+</RouterProvider>
+```
+
+When enabled, a visually hidden `aria-live` region announces each navigation. Focus moves to the first `<h1>` on the new page. See [Accessibility guide](https://github.com/greydragon888/real-router/wiki/Accessibility) for details.
+
+## Documentation
+
+Full documentation: [Wiki](https://github.com/greydragon888/real-router/wiki)
+
+- [RouterProvider](https://github.com/greydragon888/real-router/wiki/RouterProvider) · [RouteView](https://github.com/greydragon888/real-router/wiki/RouteView) · [Link](https://github.com/greydragon888/real-router/wiki/Link)
+- [useRouter](https://github.com/greydragon888/real-router/wiki/useRouter) · [useRoute](https://github.com/greydragon888/real-router/wiki/useRoute) · [useRouteNode](https://github.com/greydragon888/real-router/wiki/useRouteNode) · [useNavigator](https://github.com/greydragon888/real-router/wiki/useNavigator) · [useRouteUtils](https://github.com/greydragon888/real-router/wiki/useRouteUtils) · [useRouterTransition](https://github.com/greydragon888/real-router/wiki/useRouterTransition)
+
+## Related Packages
+
+| Package                                                                                  | Description                          |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ |
+| [@real-router/core](https://www.npmjs.com/package/@real-router/core)                     | Core router (required dependency)    |
+| [@real-router/browser-plugin](https://www.npmjs.com/package/@real-router/browser-plugin) | Browser History API integration      |
+| [@real-router/sources](https://www.npmjs.com/package/@real-router/sources)               | Subscription layer (used internally) |
+| [@real-router/route-utils](https://www.npmjs.com/package/@real-router/route-utils)       | Route tree queries (`useRouteUtils`) |
+
+## Contributing
+
+See [contributing guidelines](../../CONTRIBUTING.md) for development setup and PR process.
+
+## License
+
+[MIT](../../LICENSE) © [Oleg Ivanov](https://github.com/greydragon888)

package/dist/cjs/index.d.ts

@@ -0,0 +1,244 @@
+import * as vue from 'vue';
+import { VNode, PropType, Directive, ShallowRef, Plugin, InjectionKey } from 'vue';
+import { Params, NavigationOptions, Router, Navigator, State } from '@real-router/core';
+export { Navigator } from '@real-router/core';
+import { RouteUtils } from '@real-router/route-utils';
+import { RouterTransitionSnapshot } from '@real-router/sources';
+export { RouterTransitionSnapshot } from '@real-router/sources';
+
+interface RouteViewProps {
+    readonly nodeName: string;
+    readonly keepAlive?: boolean;
+}
+interface MatchProps {
+    readonly segment: string;
+    readonly exact?: boolean;
+    readonly fallback?: VNode | (() => VNode);
+}
+type NotFoundProps = Record<string, never>;
+
+declare const RouteView: {
+    new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<vue.ExtractPropTypes<{
+        nodeName: {
+            type: StringConstructor;
+            required: true;
+        };
+        keepAlive: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{}>, () => VNode | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {
+        keepAlive: boolean;
+    }, true, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<vue.ExtractPropTypes<{
+        nodeName: {
+            type: StringConstructor;
+            required: true;
+        };
+        keepAlive: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{}>, () => VNode | null, {}, {}, {}, {
+        keepAlive: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & vue.ComponentOptionsBase<Readonly<vue.ExtractPropTypes<{
+    nodeName: {
+        type: StringConstructor;
+        required: true;
+    };
+    keepAlive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, () => VNode | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {
+    keepAlive: boolean;
+}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
+    Match: vue.DefineComponent<vue.ExtractPropTypes<{
+        segment: {
+            type: vue.PropType<string>;
+            required: true;
+        };
+        exact: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        fallback: {
+            type: vue.PropType<VNode | (() => VNode)>;
+            default: undefined;
+        };
+    }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+        segment: {
+            type: vue.PropType<string>;
+            required: true;
+        };
+        exact: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        fallback: {
+            type: vue.PropType<VNode | (() => VNode)>;
+            default: undefined;
+        };
+    }>> & Readonly<{}>, {
+        exact: boolean;
+        fallback: VNode<vue.RendererNode, vue.RendererElement, {
+            [key: string]: any;
+        }> | (() => VNode);
+    }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+    NotFound: vue.DefineComponent<{}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+};
+
+declare const Link: vue.DefineComponent<vue.ExtractPropTypes<{
+    routeName: {
+        type: StringConstructor;
+        required: true;
+    };
+    routeParams: {
+        type: PropType<Params>;
+        default: () => Readonly<{}>;
+    };
+    routeOptions: {
+        type: PropType<NavigationOptions>;
+        default: () => Readonly<{}>;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    activeClassName: {
+        type: StringConstructor;
+        default: string;
+    };
+    activeStrict: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    ignoreQueryParams: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    target: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    routeName: {
+        type: StringConstructor;
+        required: true;
+    };
+    routeParams: {
+        type: PropType<Params>;
+        default: () => Readonly<{}>;
+    };
+    routeOptions: {
+        type: PropType<NavigationOptions>;
+        default: () => Readonly<{}>;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    activeClassName: {
+        type: StringConstructor;
+        default: string;
+    };
+    activeStrict: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    ignoreQueryParams: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    target: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+    ignoreQueryParams: boolean;
+    routeParams: Params;
+    routeOptions: NavigationOptions;
+    activeClassName: string;
+    activeStrict: boolean;
+    target: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+interface LinkDirectiveValue {
+    name: string;
+    params?: Params;
+    options?: NavigationOptions;
+}
+declare const vLink: Directive<HTMLElement, LinkDirectiveValue>;
+
+declare const useRouter: () => Router;
+
+declare const useNavigator: () => Navigator;
+
+declare const useRouteUtils: () => RouteUtils;
+
+interface RouteContext {
+    navigator: Navigator;
+    route: ShallowRef<State | undefined>;
+    previousRoute: ShallowRef<State | undefined>;
+}
+interface LinkProps<P extends Params = Params> {
+    routeName: string;
+    routeParams?: P;
+    routeOptions?: NavigationOptions;
+    class?: string;
+    activeClassName?: string;
+    activeStrict?: boolean;
+    ignoreQueryParams?: boolean;
+    target?: string;
+}
+
+declare const useRoute: () => RouteContext;
+
+declare function useRouteNode(nodeName: string): RouteContext;
+
+declare function useRouterTransition(): ShallowRef<RouterTransitionSnapshot>;
+
+declare function createRouterPlugin(router: Router): Plugin<[]>;
+
+declare const RouterProvider: vue.DefineComponent<vue.ExtractPropTypes<{
+    router: {
+        type: PropType<Router>;
+        required: true;
+    };
+    announceNavigation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    router: {
+        type: PropType<Router>;
+        required: true;
+    };
+    announceNavigation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    announceNavigation: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+declare const RouterKey: InjectionKey<Router>;
+declare const NavigatorKey: InjectionKey<Navigator>;
+declare const RouteKey: InjectionKey<RouteContext>;
+
+export { Link, type LinkDirectiveValue, type LinkProps, NavigatorKey, RouteKey, RouteView, type MatchProps as RouteViewMatchProps, type NotFoundProps as RouteViewNotFoundProps, type RouteViewProps, RouterKey, RouterProvider, createRouterPlugin, useNavigator, useRoute, useRouteNode, useRouteUtils, useRouter, useRouterTransition, vLink };

package/dist/cjs/index.js

@@ -0,0 +1 @@
+var e=require("vue"),t=require("@real-router/core"),r=require("@real-router/route-utils"),o=require("@real-router/sources"),n=require("dom-utils"),u=require("@real-router/core/api");function a(){return null}var s=e.defineComponent({name:"RouteView.Match",props:{segment:{type:String,required:!0},exact:{type:Boolean,default:!1},fallback:{type:[Object,Function],default:void 0}},render:a}),i=e.defineComponent({name:"RouteView.NotFound",render:a});function c(e,t,o){return o?e===t:r.startsWithSegment(e,t)}function l(t){if(Array.isArray(t)){const r=[];for(const o of t)Array.isArray(o)?r.push(...l(o)):e.isVNode(o)&&r.push(o);return r}return e.isVNode(t)?[t]:[]}function p(t,r){const o=l(t);for(const t of o)t.type===s||t.type===i?r.push(t):t.type===e.Fragment&&p(t.children,r)}function d(t){const r=e.shallowRef(t.getSnapshot()),o=t.subscribe(()=>{r.value=t.getSnapshot()});return e.onScopeDispose(o),r}var f=Symbol("RouterKey"),v=Symbol("NavigatorKey"),m=Symbol("RouteKey"),g=()=>{const t=e.inject(f);if(!t)throw new Error("useRouter must be used within a RouterProvider");return t};function y(r){const n=g(),u=d(o.createRouteNodeSource(n,r)),a=t.getNavigator(n),s=e.shallowRef(u.value.route),i=e.shallowRef(u.value.previousRoute);return e.watch(u,e=>{s.value=e.route,i.value=e.previousRoute},{flush:"sync"}),{navigator:a,route:s,previousRoute:i}}function R(e){const t=e.children;return t?.default?.()??null}function h(t,r){if(void 0===r)return t;const o="function"==typeof r?r():r;return e.h(e.Suspense,{},{default:()=>t,fallback:()=>o})}var N=e.defineComponent({name:"RouteView",props:{nodeName:{type:String,required:!0},keepAlive:{type:Boolean,default:!1}},setup(r,{slots:o}){const n=y(r.nodeName),u=new Map;return()=>{const a=n.route.value;if(!a)return null;const l=[];p(o.default?.(),l);const{rendered:d,fallback:f}=function(e,r,o){let n,u=null,a=!1;const s=[];for(const t of e){if(t.type===i){u=t.children;continue}const e=t.props,l=e?.segment??"";!a&&c(r,o?`${o}.${l}`:l,e?.exact??!1)&&(a=!0,n=e?.fallback,s.push(t))}if(!a&&r===t.UNKNOWN_ROUTE&&null!==u){const t=e.filter(e=>e.type===i).at(-1);t&&s.push(t)}return{rendered:s,activeMatchFound:a,fallback:n}}(l,a.name,r.nodeName);if(0===d.length)return null;const v=d[0];if(!r.keepAlive){if(v.type===s||v.type===i){const t=R(v);return t?h(e.h(e.Fragment,t),f):null}return null}const m=v.props,g=m?.segment??"__not-found__",y=function(t,r){const o=t.get(r);if(o)return o;const n=e.markRaw(e.defineComponent({name:`KeepAlive-${r}`,setup:(e,t)=>()=>t.slots.default?.()}));return t.set(r,n),n}(u,g),N=R(v)??[];return h(e.h(e.KeepAlive,null,{default:()=>e.h(y,{key:g},{default:()=>N})}),f)}}}),w=Object.assign(N,{Match:s,NotFound:i}),b=Object.freeze({}),k=Object.freeze({}),S=e.defineComponent({name:"Link",props:{routeName:{type:String,required:!0},routeParams:{type:Object,default:()=>b},routeOptions:{type:Object,default:()=>k},class:{type:String,default:void 0},activeClassName:{type:String,default:"active"},activeStrict:{type:Boolean,default:!1},ignoreQueryParams:{type:Boolean,default:!0},target:{type:String,default:void 0}},setup(t,{slots:r,attrs:u}){const a=g(),s=function(e,t,r=!1,n=!0){const u=g();return d(o.createActiveRouteSource(u,e,t,{strict:r,ignoreQueryParams:n}))}(t.routeName,t.routeParams,t.activeStrict,t.ignoreQueryParams),i=e.computed(()=>n.buildHref(a,t.routeName,t.routeParams)),c=e.computed(()=>n.buildActiveClassName(s.value,t.activeClassName,t.class)),l=e=>{u.onClick&&"function"==typeof u.onClick&&(u.onClick(e),e.defaultPrevented)||n.shouldNavigate(e)&&"_blank"!==t.target&&(e.preventDefault(),a.navigate(t.routeName,t.routeParams,t.routeOptions).catch(()=>{}))};return()=>e.h("a",{...u,href:i.value,class:c.value,target:t.target,onClick:l},r.default?.())}}),P=null;function x(e){P=e}function A(){if(!P)throw new Error("v-link directive requires a RouterProvider ancestor. Make sure RouterProvider is mounted.");return P}var C=new WeakMap,q=new WeakMap;function E(e,t,r){const o=function(e,t){return r=>{n.shouldNavigate(r)&&(r.preventDefault(),e.navigate(t.name,t.params??{},t.options??{}).catch(()=>{}))}}(t,r),u=function(e,t,r){return o=>{"Enter"!==o.key||r instanceof HTMLButtonElement||e.navigate(t.name,t.params??{},t.options??{}).catch(()=>{})}}(t,r,e);e.addEventListener("click",o),e.addEventListener("keydown",u),C.set(e,o),q.set(e,u)}function O(e){const t=C.get(e),r=q.get(e);t&&e.removeEventListener("click",t),r&&e.removeEventListener("keydown",r),C.delete(e),q.delete(e)}var j={mounted(e,t){const r=A();n.applyLinkA11y(e),e.style.cursor="pointer",E(e,r,t.value)},updated(e,t){const r=A();O(e),E(e,r,t.value)},beforeUnmount(e){O(e)}},K=e.defineComponent({name:"RouterProvider",props:{router:{type:Object,required:!0},announceNavigation:{type:Boolean,default:!1}},setup(r,{slots:u}){e.onMounted(()=>{if(!r.announceNavigation)return;const t=n.createRouteAnnouncer(r.router);e.onUnmounted(()=>{t.destroy()})});const a=t.getNavigator(r.router);x(r.router);const s=o.createRouteSource(r.router),i=s.getSnapshot(),c=e.shallowRef(i.route),l=e.shallowRef(i.previousRoute),p=s.subscribe(()=>{const e=s.getSnapshot();c.value=e.route,l.value=e.previousRoute});return e.onScopeDispose(p),e.provide(f,r.router),e.provide(v,a),e.provide(m,{navigator:a,route:c,previousRoute:l}),()=>u.default?.()}});exports.Link=S,exports.NavigatorKey=v,exports.RouteKey=m,exports.RouteView=w,exports.RouterKey=f,exports.RouterProvider=K,exports.createRouterPlugin=function(r){return{install(n){const u=t.getNavigator(r);x(r);const a=o.createRouteSource(r),s=a.getSnapshot(),i=e.shallowRef(s.route),c=e.shallowRef(s.previousRoute);a.subscribe(()=>{const e=a.getSnapshot();i.value=e.route,c.value=e.previousRoute}),n.provide(f,r),n.provide(v,u),n.provide(m,{navigator:u,route:i,previousRoute:c})}}},exports.useNavigator=()=>{const t=e.inject(v);if(!t)throw new Error("useNavigator must be used within a RouterProvider");return t},exports.useRoute=()=>{const t=e.inject(m);if(!t)throw new Error("useRoute must be used within a RouterProvider");return t},exports.useRouteNode=y,exports.useRouteUtils=()=>{const e=g();return r.getRouteUtils(u.getPluginApi(e).getTree())},exports.useRouter=g,exports.useRouterTransition=function(){const e=g();return d(o.createTransitionSource(e))},exports.vLink=j;//# sourceMappingURL=index.js.map