@real-router/vue 0.0.1

package/src/directives/vLink.ts

@@ -0,0 +1,116 @@
+import { shouldNavigate, applyLinkA11y } from "dom-utils";
+
+import type { Router, NavigationOptions, Params } from "@real-router/core";
+import type { Directive } from "vue";
+
+export interface LinkDirectiveValue {
+  name: string;
+  params?: Params;
+  options?: NavigationOptions;
+}
+
+let _router: Router | null = null;
+
+export function setDirectiveRouter(router: Router): void {
+  _router = router;
+}
+
+export function getDirectiveRouter(): Router {
+  if (!_router) {
+    /* v8 ignore next 3 -- @preserve Defensive: router always initialized by RouterProvider */
+    throw new Error(
+      "v-link directive requires a RouterProvider ancestor. Make sure RouterProvider is mounted.",
+    );
+  }
+
+  return _router;
+}
+
+const clickHandlers = new WeakMap<HTMLElement, (evt: MouseEvent) => void>();
+const keydownHandlers = new WeakMap<
+  HTMLElement,
+  (evt: KeyboardEvent) => void
+>();
+
+function createClickHandler(
+  router: Router,
+  value: LinkDirectiveValue,
+): (evt: MouseEvent) => void {
+  return (evt: MouseEvent) => {
+    if (!shouldNavigate(evt)) {
+      return;
+    }
+
+    evt.preventDefault();
+    router
+      .navigate(value.name, value.params ?? {}, value.options ?? {})
+      .catch(() => {});
+  };
+}
+
+function createKeydownHandler(
+  router: Router,
+  value: LinkDirectiveValue,
+  el: HTMLElement,
+): (evt: KeyboardEvent) => void {
+  return (evt: KeyboardEvent) => {
+    if (evt.key === "Enter" && !(el instanceof HTMLButtonElement)) {
+      router
+        .navigate(value.name, value.params ?? {}, value.options ?? {})
+        .catch(() => {});
+    }
+  };
+}
+
+function attachHandlers(
+  el: HTMLElement,
+  router: Router,
+  value: LinkDirectiveValue,
+): void {
+  const handleClick = createClickHandler(router, value);
+  const handleKeyDown = createKeydownHandler(router, value, el);
+
+  el.addEventListener("click", handleClick);
+  el.addEventListener("keydown", handleKeyDown);
+
+  clickHandlers.set(el, handleClick);
+  keydownHandlers.set(el, handleKeyDown);
+}
+
+function detachHandlers(el: HTMLElement): void {
+  const clickHandler = clickHandlers.get(el);
+  const keydownHandler = keydownHandlers.get(el);
+
+  if (clickHandler) {
+    el.removeEventListener("click", clickHandler);
+  }
+  if (keydownHandler) {
+    el.removeEventListener("keydown", keydownHandler);
+  }
+
+  clickHandlers.delete(el);
+  keydownHandlers.delete(el);
+}
+
+export const vLink: Directive<HTMLElement, LinkDirectiveValue> = {
+  mounted(el, binding) {
+    const router = getDirectiveRouter();
+
+    applyLinkA11y(el);
+
+    el.style.cursor = "pointer";
+
+    attachHandlers(el, router, binding.value);
+  },
+
+  updated(el, binding) {
+    const router = getDirectiveRouter();
+
+    detachHandlers(el);
+    attachHandlers(el, router, binding.value);
+  },
+
+  beforeUnmount(el) {
+    detachHandlers(el);
+  },
+};

package/src/index.ts

@@ -0,0 +1,43 @@
+// Components
+export { RouteView } from "./components/RouteView";
+
+export { Link } from "./components/Link";
+
+// Directives
+export { vLink } from "./directives/vLink";
+
+// Composables
+export { useRouter } from "./composables/useRouter";
+
+export { useNavigator } from "./composables/useNavigator";
+
+export { useRouteUtils } from "./composables/useRouteUtils";
+
+export { useRoute } from "./composables/useRoute";
+
+export { useRouteNode } from "./composables/useRouteNode";
+
+export { useRouterTransition } from "./composables/useRouterTransition";
+
+// Plugin
+export { createRouterPlugin } from "./createRouterPlugin";
+
+// Context
+export { RouterProvider } from "./RouterProvider";
+
+export { RouterKey, NavigatorKey, RouteKey } from "./context";
+
+// Types
+export type { LinkProps } from "./types";
+
+export type { LinkDirectiveValue } from "./directives/vLink";
+
+export type {
+  RouteViewProps,
+  RouteViewMatchProps,
+  RouteViewNotFoundProps,
+} from "./components/RouteView";
+
+export type { Navigator } from "@real-router/core";
+
+export type { RouterTransitionSnapshot } from "@real-router/sources";

package/src/types.ts

@@ -0,0 +1,24 @@
+import type {
+  NavigationOptions,
+  Params,
+  Navigator,
+  State,
+} from "@real-router/core";
+import type { ShallowRef } from "vue";
+
+export interface RouteContext {
+  navigator: Navigator;
+  route: ShallowRef<State | undefined>;
+  previousRoute: ShallowRef<State | undefined>;
+}
+
+export interface LinkProps<P extends Params = Params> {
+  routeName: string;
+  routeParams?: P;
+  routeOptions?: NavigationOptions;
+  class?: string;
+  activeClassName?: string;
+  activeStrict?: boolean;
+  ignoreQueryParams?: boolean;
+  target?: string;
+}

package/src/useRefFromSource.ts

@@ -0,0 +1,16 @@
+import { shallowRef, onScopeDispose } from "vue";
+
+import type { RouterSource } from "@real-router/sources";
+import type { ShallowRef } from "vue";
+
+export function useRefFromSource<T>(source: RouterSource<T>): ShallowRef<T> {
+  const ref = shallowRef(source.getSnapshot());
+
+  const unsub = source.subscribe(() => {
+    ref.value = source.getSnapshot();
+  });
+
+  onScopeDispose(unsub);
+
+  return ref;
+}