@real-router/vue 0.3.1 → 0.3.3

package/src/components/Link.ts

@@ -1,97 +0,0 @@
-import { shouldNavigate, buildHref, buildActiveClassName } from "dom-utils";
-import { defineComponent, h, computed } from "vue";
-
-import { useIsActiveRoute } from "../composables/useIsActiveRoute";
-import { useRouter } from "../composables/useRouter";
-import { EMPTY_PARAMS, EMPTY_OPTIONS } from "../constants";
-
-import type { Params, NavigationOptions } from "@real-router/core";
-import type { PropType } from "vue";
-
-export const Link = defineComponent({
-  name: "Link",
-  props: {
-    routeName: {
-      type: String,
-      required: true,
-    },
-    routeParams: {
-      type: Object as PropType<Params>,
-      default: () => EMPTY_PARAMS,
-    },
-    routeOptions: {
-      type: Object as PropType<NavigationOptions>,
-      default: () => EMPTY_OPTIONS,
-    },
-    class: {
-      type: String,
-      default: undefined,
-    },
-    activeClassName: {
-      type: String,
-      default: "active",
-    },
-    activeStrict: {
-      type: Boolean,
-      default: false,
-    },
-    ignoreQueryParams: {
-      type: Boolean,
-      default: true,
-    },
-    target: {
-      type: String,
-      default: undefined,
-    },
-  },
-  setup(props, { slots, attrs }) {
-    const router = useRouter();
-
-    const isActive = useIsActiveRoute(
-      props.routeName,
-      props.routeParams,
-      props.activeStrict,
-      props.ignoreQueryParams,
-    );
-
-    const href = computed(() =>
-      buildHref(router, props.routeName, props.routeParams),
-    );
-
-    const finalClassName = computed(() =>
-      buildActiveClassName(isActive.value, props.activeClassName, props.class),
-    );
-
-    const handleClick = (evt: MouseEvent) => {
-      if (attrs.onClick && typeof attrs.onClick === "function") {
-        (attrs.onClick as (evt: MouseEvent) => void)(evt);
-
-        if (evt.defaultPrevented) {
-          return;
-        }
-      }
-
-      if (!shouldNavigate(evt) || props.target === "_blank") {
-        return;
-      }
-
-      evt.preventDefault();
-      router
-        .navigate(props.routeName, props.routeParams, props.routeOptions)
-        .catch(() => {});
-    };
-
-    return () =>
-      h(
-        "a",
-        {
-          ...attrs,
-          href: href.value,
-          class: finalClassName.value,
-          target: props.target,
-          onClick: handleClick,
-        },
-        slots.default?.(),
-      );
-  },
-});

package/src/components/RouteView/RouteView.ts

@@ -1,210 +0,0 @@
-import {
-  Fragment,
-  defineComponent,
-  h,
-  KeepAlive,
-  markRaw,
-  Suspense,
-} from "vue";
-
-import { Match, NotFound } from "./components";
-import { buildRenderList, collectElements } from "./helpers";
-import { useRouteNode } from "../../composables/useRouteNode";
-
-import type { Component, VNode } from "vue";
-
-type SlotChildren = Record<string, (() => VNode[]) | undefined> | null;
-
-function getSlotContent(vnode: VNode): VNode[] | null {
-  const slots = vnode.children as SlotChildren;
-
-  return slots?.default?.() ?? null;
-}
-
-function getOrCreateWrapper(
-  cache: Map<string, Component>,
-  segment: string,
-): Component {
-  const existing = cache.get(segment);
-
-  if (existing) {
-    return existing;
-  }
-
-  const wrapper = markRaw(
-    defineComponent({
-      name: `KeepAlive-${segment}`,
-      setup(_wrapperProps, wrapperCtx) {
-        return () => wrapperCtx.slots.default?.();
-      },
-    }),
-  );
-
-  cache.set(segment, wrapper);
-
-  return wrapper;
-}
-
-function wrapWithSuspense(content: VNode, fallback: unknown): VNode {
-  if (fallback === undefined) {
-    return content;
-  }
-
-  const fallbackContent =
-    typeof fallback === "function" ? (fallback as () => VNode)() : fallback;
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment
-  const suspenseComponent = Suspense as any;
-
-  return h(
-    suspenseComponent,
-    {},
-    {
-      default: () => content,
-      fallback: () => fallbackContent,
-    },
-  );
-}
-
-const emptyKeepAlivePlaceholder = markRaw(
-  defineComponent({
-    name: "KeepAlive-placeholder",
-    render() {
-      return null;
-    },
-  }),
-);
-
-function renderWithRootKA(
-  activeChild: VNode,
-  wrapperCache: Map<string, Component>,
-  fallback: unknown,
-): VNode {
-  const activeProps = activeChild.props as { segment?: string } | null;
-  const segment = activeProps?.segment ?? "__not-found__";
-  const WrapperComponent = getOrCreateWrapper(wrapperCache, segment);
-  const slotContent = getSlotContent(activeChild) ?? [];
-  const keepAliveContent = h(KeepAlive, null, {
-    default: () =>
-      h(WrapperComponent, { key: segment }, { default: () => slotContent }),
-  });
-
-  return wrapWithSuspense(keepAliveContent, fallback);
-}
-
-function renderWithPerMatchKA(
-  activeChild: VNode,
-  wrapperCache: Map<string, Component>,
-  fallback: unknown,
-): VNode | null {
-  const matchProps = activeChild.props as {
-    segment?: string;
-    keepAlive?: boolean;
-  } | null;
-
-  if (matchProps?.keepAlive === true && activeChild.type === Match) {
-    /* v8 ignore start */
-    const segment = matchProps.segment ?? "__not-found__";
-    /* v8 ignore stop */
-    const WrapperComponent = getOrCreateWrapper(wrapperCache, segment);
-    const slotContent = getSlotContent(activeChild) ?? [];
-
-    return h(Fragment, [
-      h(KeepAlive, null, {
-        default: () =>
-          h(WrapperComponent, { key: segment }, { default: () => slotContent }),
-      }),
-    ]);
-  }
-
-  const content = getSlotContent(activeChild);
-
-  /* v8 ignore start */
-  if (!content) {
-    return null;
-  }
-  /* v8 ignore stop */
-
-  return h(Fragment, [
-    h(KeepAlive, null, { default: () => h(emptyKeepAlivePlaceholder) }),
-    wrapWithSuspense(h(Fragment, content), fallback),
-  ]);
-}
-
-const RouteViewComponent = defineComponent({
-  name: "RouteView",
-  props: {
-    nodeName: {
-      type: String,
-      required: true,
-    },
-    keepAlive: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props, { slots }) {
-    const routeContext = useRouteNode(props.nodeName);
-    const wrapperCache = new Map<string, Component>();
-
-    return (): VNode | null => {
-      const route = routeContext.route.value;
-
-      if (!route) {
-        return null;
-      }
-
-      const elements: VNode[] = [];
-
-      collectElements(slots.default?.(), elements);
-
-      const { rendered, fallback } = buildRenderList(
-        elements,
-        route.name,
-        props.nodeName,
-      );
-
-      if (rendered.length === 0) {
-        return null;
-      }
-
-      const activeChild = rendered[0];
-
-      if (props.keepAlive) {
-        return renderWithRootKA(activeChild, wrapperCache, fallback);
-      }
-
-      /* v8 ignore start */
-      if (activeChild.type !== Match && activeChild.type !== NotFound) {
-        return null;
-      }
-      /* v8 ignore stop */
-
-      const hasPerMatchKA = elements.some(
-        (element) =>
-          element.type === Match &&
-          (element.props as { keepAlive?: boolean } | null)?.keepAlive === true,
-      );
-
-      if (hasPerMatchKA) {
-        return renderWithPerMatchKA(activeChild, wrapperCache, fallback);
-      }
-
-      const content = getSlotContent(activeChild);
-
-      if (!content) {
-        return null;
-      }
-
-      return wrapWithSuspense(h(Fragment, content), fallback);
-    };
-  },
-});
-
-export const RouteView = Object.assign(RouteViewComponent, { Match, NotFound });
-
-export type {
-  RouteViewProps,
-  MatchProps as RouteViewMatchProps,
-  NotFoundProps as RouteViewNotFoundProps,
-} from "./types";

package/src/components/RouteView/components.ts

@@ -1,35 +0,0 @@
-import { defineComponent } from "vue";
-
-import type { PropType, VNode } from "vue";
-
-function renderNull() {
-  return null;
-}
-
-export const Match = defineComponent({
-  name: "RouteView.Match",
-  props: {
-    segment: {
-      type: String as PropType<string>,
-      required: true,
-    },
-    exact: {
-      type: Boolean,
-      default: false,
-    },
-    fallback: {
-      type: [Object, Function] as PropType<VNode | (() => VNode)>,
-      default: undefined,
-    },
-    keepAlive: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  render: renderNull,
-});
-
-export const NotFound = defineComponent({
-  name: "RouteView.NotFound",
-  render: renderNull,
-});

package/src/components/RouteView/helpers.ts

@@ -1,110 +0,0 @@
-import { UNKNOWN_ROUTE } from "@real-router/core";
-import { startsWithSegment } from "@real-router/route-utils";
-import { Fragment, isVNode } from "vue";
-
-import { Match, NotFound } from "./components";
-
-import type { VNode } from "vue";
-
-type FallbackType = VNode | (() => VNode) | undefined;
-
-function isSegmentMatch(
-  routeName: string,
-  fullSegmentName: string,
-  exact: boolean,
-): boolean {
-  if (exact) {
-    return routeName === fullSegmentName;
-  }
-
-  return startsWithSegment(routeName, fullSegmentName);
-}
-
-function normalizeChildren(children: unknown): VNode[] {
-  if (Array.isArray(children)) {
-    const result: VNode[] = [];
-
-    for (const child of children) {
-      if (Array.isArray(child)) {
-        result.push(...normalizeChildren(child));
-      } else if (isVNode(child)) {
-        result.push(child);
-      }
-    }
-
-    return result;
-  }
-
-  if (isVNode(children)) {
-    return [children];
-  }
-
-  return [];
-}
-
-export function collectElements(children: unknown, result: VNode[]): void {
-  const vnodes = normalizeChildren(children);
-
-  for (const child of vnodes) {
-    if (child.type === Match || child.type === NotFound) {
-      result.push(child);
-    } else if (child.type === Fragment) {
-      collectElements(child.children, result);
-    }
-  }
-}
-
-export function buildRenderList(
-  elements: VNode[],
-  routeName: string,
-  nodeName: string,
-): {
-  rendered: VNode[];
-  activeMatchFound: boolean;
-  fallback?: FallbackType;
-} {
-  let notFoundChildren: unknown = null;
-  let activeMatchFound = false;
-  let fallback: FallbackType = undefined;
-  const rendered: VNode[] = [];
-
-  for (const child of elements) {
-    if (child.type === NotFound) {
-      notFoundChildren = child.children;
-      continue;
-    }
-
-    const props = child.props as {
-      segment: string;
-      exact?: boolean;
-      fallback?: FallbackType;
-    } | null;
-    const segment = props?.segment ?? "";
-    const exact = props?.exact ?? false;
-    const fullSegmentName = nodeName ? `${nodeName}.${segment}` : segment;
-    const isActive =
-      !activeMatchFound && isSegmentMatch(routeName, fullSegmentName, exact);
-
-    if (isActive) {
-      activeMatchFound = true;
-      fallback = props?.fallback;
-      rendered.push(child);
-    }
-  }
-
-  if (
-    !activeMatchFound &&
-    routeName === UNKNOWN_ROUTE &&
-    notFoundChildren !== null
-  ) {
-    const nfElements = elements.filter((element) => element.type === NotFound);
-    /* v8 ignore next 3 */
-    const lastNf = nfElements.at(-1);
-
-    if (lastNf) {
-      rendered.push(lastNf);
-    }
-  }
-
-  return { rendered, activeMatchFound, fallback };
-}

package/src/components/RouteView/index.ts

@@ -1,7 +0,0 @@
-export { RouteView } from "./RouteView";
-
-export type {
-  RouteViewProps,
-  RouteViewMatchProps,
-  RouteViewNotFoundProps,
-} from "./RouteView";

package/src/components/RouteView/types.ts

@@ -1,15 +0,0 @@
-import type { VNode } from "vue";
-
-export interface RouteViewProps {
-  readonly nodeName: string;
-  readonly keepAlive?: boolean;
-}
-
-export interface MatchProps {
-  readonly segment: string;
-  readonly exact?: boolean;
-  readonly fallback?: VNode | (() => VNode);
-  readonly keepAlive?: boolean;
-}
-
-export type NotFoundProps = Record<string, never>;

package/src/components/RouterErrorBoundary.ts

@@ -1,69 +0,0 @@
-import { defineComponent, h, ref, watch, computed, Fragment } from "vue";
-
-import { useRouterError } from "../composables/useRouterError";
-
-import type { RouterError, State } from "@real-router/core";
-import type { VNode, PropType } from "vue";
-
-export const RouterErrorBoundary = defineComponent({
-  name: "RouterErrorBoundary",
-  props: {
-    fallback: {
-      type: Function as PropType<
-        (error: RouterError, resetError: () => void) => VNode
-      >,
-      required: true,
-    },
-    onError: {
-      type: Function as PropType<
-        (
-          error: RouterError,
-          toRoute: State | null,
-          fromRoute: State | null,
-        ) => void
-      >,
-      default: undefined,
-    },
-  },
-  setup(props, { slots }) {
-    const snapshot = useRouterError();
-    const dismissedVersion = ref(-1);
-
-    watch(
-      () => snapshot.value.version,
-      () => {
-        if (snapshot.value.error) {
-          props.onError?.(
-            snapshot.value.error,
-            snapshot.value.toRoute,
-            snapshot.value.fromRoute,
-          );
-        }
-      },
-      { immediate: true },
-    );
-
-    const visibleError = computed(() =>
-      snapshot.value.version > dismissedVersion.value
-        ? snapshot.value.error
-        : null,
-    );
-
-    const resetError = () => {
-      dismissedVersion.value = snapshot.value.version;
-    };
-
-    return () => {
-      const children = slots.default?.() ?? [];
-      const errorVNode = visibleError.value
-        ? props.fallback(visibleError.value, resetError)
-        : null;
-
-      return h(Fragment, null, [...children, errorVNode]);
-    };
-  },
-});
-
-export type RouterErrorBoundaryProps = InstanceType<
-  typeof RouterErrorBoundary
->["$props"];

package/src/composables/useIsActiveRoute.ts

@@ -1,23 +0,0 @@
-import { createActiveRouteSource } from "@real-router/sources";
-
-import { useRefFromSource } from "../useRefFromSource";
-import { useRouter } from "./useRouter";
-
-import type { Params } from "@real-router/core";
-import type { ShallowRef } from "vue";
-
-export function useIsActiveRoute(
-  routeName: string,
-  params?: Params,
-  strict = false,
-  ignoreQueryParams = true,
-): ShallowRef<boolean> {
-  const router = useRouter();
-
-  const source = createActiveRouteSource(router, routeName, params, {
-    strict,
-    ignoreQueryParams,
-  });
-
-  return useRefFromSource(source);
-}

package/src/composables/useNavigator.ts

@@ -1,15 +0,0 @@
-import { inject } from "vue";
-
-import { NavigatorKey } from "../context";
-
-import type { Navigator } from "@real-router/core";
-
-export const useNavigator = (): Navigator => {
-  const navigator = inject(NavigatorKey);
-
-  if (!navigator) {
-    throw new Error("useNavigator must be used within a RouterProvider");
-  }
-
-  return navigator;
-};

package/src/composables/useRoute.ts

@@ -1,15 +0,0 @@
-import { inject } from "vue";
-
-import { RouteKey } from "../context";
-
-import type { RouteContext } from "../types";
-
-export const useRoute = (): RouteContext => {
-  const routeContext = inject(RouteKey);
-
-  if (!routeContext) {
-    throw new Error("useRoute must be used within a RouterProvider");
-  }
-
-  return routeContext;
-};

package/src/composables/useRouteNode.ts

@@ -1,38 +0,0 @@
-import { getNavigator } from "@real-router/core";
-import { createRouteNodeSource } from "@real-router/sources";
-import { shallowRef, watch } from "vue";
-
-import { useRefFromSource } from "../useRefFromSource";
-import { useRouter } from "./useRouter";
-
-import type { RouteContext } from "../types";
-import type { State } from "@real-router/core";
-
-export function useRouteNode(nodeName: string): RouteContext {
-  const router = useRouter();
-
-  const source = createRouteNodeSource(router, nodeName);
-  const snapshot = useRefFromSource(source);
-
-  const navigator = getNavigator(router);
-
-  const route = shallowRef<State | undefined>(snapshot.value.route);
-  const previousRoute = shallowRef<State | undefined>(
-    snapshot.value.previousRoute,
-  );
-
-  watch(
-    snapshot,
-    (newSnapshot) => {
-      route.value = newSnapshot.route;
-      previousRoute.value = newSnapshot.previousRoute;
-    },
-    { flush: "sync" },
-  );
-
-  return {
-    navigator,
-    route,
-    previousRoute,
-  };
-}

package/src/composables/useRouteUtils.ts

@@ -1,12 +0,0 @@
-import { getPluginApi } from "@real-router/core/api";
-import { getRouteUtils } from "@real-router/route-utils";
-
-import { useRouter } from "./useRouter";
-
-import type { RouteUtils } from "@real-router/route-utils";
-
-export const useRouteUtils = (): RouteUtils => {
-  const router = useRouter();
-
-  return getRouteUtils(getPluginApi(router).getTree());
-};

package/src/composables/useRouter.ts

@@ -1,15 +0,0 @@
-import { inject } from "vue";
-
-import { RouterKey } from "../context";
-
-import type { Router } from "@real-router/core";
-
-export const useRouter = (): Router => {
-  const router = inject(RouterKey);
-
-  if (!router) {
-    throw new Error("useRouter must be used within a RouterProvider");
-  }
-
-  return router;
-};

package/src/composables/useRouterError.ts

@@ -1,23 +0,0 @@
-import { createErrorSource } from "@real-router/sources";
-
-import { useRefFromSource } from "../useRefFromSource";
-import { useRouter } from "./useRouter";
-
-import type { Router } from "@real-router/core";
-import type { RouterErrorSnapshot, RouterSource } from "@real-router/sources";
-import type { ShallowRef } from "vue";
-
-const cache = new WeakMap<Router, RouterSource<RouterErrorSnapshot>>();
-
-export function useRouterError(): ShallowRef<RouterErrorSnapshot> {
-  const router = useRouter();
-
-  let source = cache.get(router);
-
-  if (!source) {
-    source = createErrorSource(router);
-    cache.set(router, source);
-  }
-
-  return useRefFromSource(source);
-}