@real-router/vue 0.15.2 → 0.15.3

package/src/components/RouteView/RouteView.ts

@@ -1,233 +0,0 @@
-import {
-  Fragment,
-  defineComponent,
-  h,
-  KeepAlive,
-  markRaw,
-  Suspense,
-} from "vue";
-
-import { Match, NotFound, Self } from "./components";
-import {
-  buildRenderList,
-  collectElements,
-  isKeepAliveEnabled,
-} 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,
-    },
-  );
-}
-
-// Lazy-initialised — only allocated when a per-Match keepAlive path needs to
-// keep the cache slot "occupied" with a no-render placeholder. Apps without
-// keepAlive never pay the markRaw + defineComponent allocation at import.
-let emptyKeepAlivePlaceholderInstance: Component | null = null;
-
-function getEmptyKeepAlivePlaceholder(): Component {
-  emptyKeepAlivePlaceholderInstance ??= markRaw(
-    defineComponent({
-      name: "KeepAlive-placeholder",
-      render() {
-        return null;
-      },
-    }),
-  );
-
-  return emptyKeepAlivePlaceholderInstance;
-}
-
-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?: unknown;
-  } | null;
-
-  if (isKeepAliveEnabled(matchProps?.keepAlive) && 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(getEmptyKeepAlivePlaceholder()),
-    }),
-    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 slotOutput = slots.default?.();
-      const elements: VNode[] = [];
-
-      collectElements(slotOutput, elements);
-
-      // `hasPerMatchKA` is a side-channel produced by the same pipeline pass
-      // that builds `rendered` — closes the audit §8.1 "double iteration"
-      // finding. The previous identity-cache on `slotOutput` is no longer
-      // needed: per-render cost is one O(n) walk instead of two.
-      const { rendered, fallback, hasPerMatchKA } = 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 !== Self &&
-        activeChild.type !== NotFound
-      ) {
-        return null;
-      }
-      /* v8 ignore stop */
-
-      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,
-  Self,
-  NotFound,
-});
-
-export type {
-  RouteViewProps,
-  MatchProps as RouteViewMatchProps,
-  SelfProps as RouteViewSelfProps,
-  NotFoundProps as RouteViewNotFoundProps,
-} from "./types";

package/src/components/RouteView/components.ts

@@ -1,53 +0,0 @@
-import { defineComponent } from "vue";
-
-import type { SelfProps } from "./types";
-import type { FunctionalComponent, 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,
-});
-
-// Type Self via FunctionalComponent<SelfProps> so the SelfProps interface
-// is anchored to the component contract — knip otherwise flags SelfProps
-// as unused even though it's re-exported as RouteViewSelfProps for
-// consumers wrapping Self in custom HOCs.
-const SelfImpl = defineComponent({
-  name: "RouteView.Self",
-  props: {
-    fallback: {
-      type: [Object, Function] as PropType<VNode | (() => VNode)>,
-      default: undefined,
-    },
-  },
-  render: renderNull,
-});
-
-export const Self = SelfImpl as unknown as FunctionalComponent<SelfProps>;
-
-export const NotFound = defineComponent({
-  name: "RouteView.NotFound",
-  render: renderNull,
-});

package/src/components/RouteView/helpers.ts

@@ -1,207 +0,0 @@
-import { UNKNOWN_ROUTE } from "@real-router/core";
-import { startsWithSegment } from "@real-router/route-utils";
-import { Fragment, isVNode } from "vue";
-
-import { Match, NotFound, Self } from "./components";
-
-import type { VNode } from "vue";
-
-const MARKER_TYPES: ReadonlySet<unknown> = new Set([Match, Self, NotFound]);
-const KEEP_ALIVE_VALUES: ReadonlySet<unknown> = new Set([
-  true,
-  "",
-  "keep-alive",
-]);
-
-type FallbackType = VNode | (() => VNode) | undefined;
-
-interface FallbackSlots {
-  selfVNode: VNode | null;
-  selfFallback: FallbackType;
-  notFoundChildren: unknown;
-}
-
-export function isSegmentMatch(
-  routeName: string,
-  fullSegmentName: string,
-  exact: boolean,
-): boolean {
-  if (exact) {
-    return routeName === fullSegmentName;
-  }
-
-  return startsWithSegment(routeName, fullSegmentName);
-}
-
-// Vue compiles boolean-shorthand template attributes (`<Match keepAlive>`) to
-// an empty string instead of `true`, and converts them to `true` only when the
-// receiving component's prop is declared with `type: Boolean`. `Match` is a
-// marker component (`render: null`) — its props are inspected on the VNode
-// without ever going through Vue's prop-casting pipeline, so the raw `""` (or
-// the hyphenated attribute name) reaches us here. Accept the same trio Vue's
-// runtime does.
-export function isKeepAliveEnabled(value: unknown): boolean {
-  return KEEP_ALIVE_VALUES.has(value);
-}
-
-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 (MARKER_TYPES.has(child.type)) {
-      result.push(child);
-    } else if (child.type === Fragment) {
-      collectElements(child.children, result);
-    }
-  }
-}
-
-function recordFallback(child: VNode, slots: FallbackSlots): boolean {
-  if (child.type === NotFound) {
-    slots.notFoundChildren = child.children;
-
-    return true;
-  }
-
-  if (child.type === Self) {
-    if (slots.selfVNode === null) {
-      slots.selfVNode = child;
-      const props = child.props as { fallback?: FallbackType } | null;
-
-      slots.selfFallback = props?.fallback;
-    }
-
-    return true;
-  }
-
-  return false;
-}
-
-function evaluateMatch(
-  child: VNode,
-  routeName: string,
-  nodeName: string,
-): { isActive: boolean; fallback: FallbackType } {
-  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 = isSegmentMatch(routeName, fullSegmentName, exact);
-
-  return { isActive, fallback: props?.fallback };
-}
-
-function appendFallback(
-  rendered: VNode[],
-  routeName: string,
-  nodeName: string,
-  slots: FallbackSlots,
-  elements: VNode[],
-): FallbackType {
-  if (slots.selfVNode !== null && routeName === nodeName) {
-    rendered.push(slots.selfVNode);
-
-    return slots.selfFallback;
-  }
-
-  if (routeName === UNKNOWN_ROUTE && slots.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 undefined;
-}
-
-export function buildRenderList(
-  elements: VNode[],
-  routeName: string,
-  nodeName: string,
-): {
-  rendered: VNode[];
-  activeMatchFound: boolean;
-  fallback?: FallbackType;
-  /**
-   * True iff any `<Match>` child in the input has its `keepAlive` prop set
-   * to one of Vue's accepted boolean-shorthand forms. Surfaced as a
-   * side-channel from the single pipeline pass so the caller doesn't have
-   * to re-iterate `elements` after `buildRenderList` returns — closes a MED
-   * code-quality finding (audit §8.1).
-   */
-  hasPerMatchKA: boolean;
-} {
-  const slots: FallbackSlots = {
-    selfVNode: null,
-    selfFallback: undefined,
-    notFoundChildren: null,
-  };
-  let activeMatchFound = false;
-  let fallback: FallbackType = undefined;
-  let hasPerMatchKA = false;
-  const rendered: VNode[] = [];
-
-  for (const child of elements) {
-    // Match-only side-channel: scan for the keepAlive shorthand in the same
-    // pass that already inspects every child. Short-circuits once a positive
-    // is found to avoid redundant prop reads in big slot trees.
-    if (!hasPerMatchKA && child.type === Match) {
-      const matchProps = child.props as { keepAlive?: unknown } | null;
-
-      if (isKeepAliveEnabled(matchProps?.keepAlive)) {
-        hasPerMatchKA = true;
-      }
-    }
-
-    if (recordFallback(child, slots)) {
-      continue;
-    }
-
-    if (activeMatchFound) {
-      continue;
-    }
-
-    const result = evaluateMatch(child, routeName, nodeName);
-
-    if (result.isActive) {
-      activeMatchFound = true;
-      fallback = result.fallback;
-      rendered.push(child);
-    }
-  }
-
-  if (!activeMatchFound) {
-    fallback = appendFallback(rendered, routeName, nodeName, slots, elements);
-  }
-
-  return { rendered, activeMatchFound, fallback, hasPerMatchKA };
-}

package/src/components/RouteView/index.ts

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

package/src/components/RouteView/types.ts

@@ -1,20 +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 interface SelfProps {
-  /** Fallback content while children are suspended. */
-  readonly fallback?: VNode | (() => VNode);
-}
-
-export type NotFoundProps = Record<string, never>;

package/src/components/RouterErrorBoundary.ts

@@ -1,61 +0,0 @@
-import { createDismissableError } from "@real-router/sources";
-import { defineComponent, h, watch, Fragment } from "vue";
-
-import { useRouter } from "../composables/useRouter";
-import { useRefFromSource } from "../useRefFromSource";
-
-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 router = useRouter();
-    const snapshot = useRefFromSource(createDismissableError(router));
-
-    watch(
-      () => snapshot.value.version,
-      () => {
-        if (snapshot.value.error) {
-          props.onError?.(
-            snapshot.value.error,
-            snapshot.value.toRoute,
-            snapshot.value.fromRoute,
-          );
-        }
-      },
-      { immediate: true },
-    );
-
-    return () => {
-      const children = slots.default?.() ?? [];
-      const errorVNode = snapshot.value.error
-        ? props.fallback(snapshot.value.error, snapshot.value.resetError)
-        : null;
-
-      return h(Fragment, null, [...children, errorVNode]);
-    };
-  },
-});
-
-export type RouterErrorBoundaryProps = InstanceType<
-  typeof RouterErrorBoundary
->["$props"];

package/src/components/ServerOnly.ts

@@ -1,16 +0,0 @@
-import { defineComponent, onMounted, ref } from "vue";
-
-export const ServerOnly = defineComponent({
-  name: "ServerOnly",
-  setup(_, { slots }) {
-    const mounted = ref(false);
-
-    onMounted(() => {
-      mounted.value = true;
-    });
-
-    return () => (mounted.value ? slots.fallback?.() : slots.default?.());
-  },
-});
-
-export type ServerOnlyProps = InstanceType<typeof ServerOnly>["$props"];

package/src/components/Streamed.ts

@@ -1,31 +0,0 @@
-import { defineComponent, h, Suspense } from "vue";
-
-/**
- * Cross-adapter alias for Vue's native `<Suspense>`. Symmetric naming with
- * the React/Preact/Solid/Svelte/Angular `<Streamed>` components.
- *
- * Slots:
- * - `default` — content (may contain `<Await>` or `async setup()` children).
- * - `fallback` — shown while any descendant suspends.
- *
- * Vue's `<Suspense>` is **blocking** under SSR (no out-of-order placeholder
- * resolution) — render of HTML after `<Streamed>` waits for every
- * `async setup()` inside. This matches Vue 3's stable streaming behaviour
- * (vs React 19 / Solid which support OOO resolution).
- */
-export const Streamed = defineComponent({
-  name: "Streamed",
-  setup(_, { slots }) {
-    return () =>
-      h(
-        Suspense,
-        {},
-        {
-          default: () => slots.default?.(),
-          fallback: () => slots.fallback?.(),
-        },
-      );
-  },
-});
-
-export type StreamedProps = InstanceType<typeof Streamed>["$props"];

package/src/composables/useDeferred.ts

@@ -1,37 +0,0 @@
-import { useRoute } from "./useRoute";
-
-interface DeferredContext {
-  ssrDataDeferred?: Record<string, Promise<unknown>>;
-}
-
-const NEVER_PROMISE = new Promise<never>(() => {
-  // Intentionally never resolves — surfaces a forever-pending Suspense boundary
-  // when a key is requested that the loader never declared.
-});
-
-/**
- * Read a deferred promise published by `defer({ deferred: { <key>: Promise } })`
- * inside an SSR data loader. Returns the Promise for use inside `async setup()`
- * (Vue's native Suspense pattern) or paired with `<Await name="key">`.
- *
- * ```ts
- * // Vue async setup pattern
- * export default defineComponent({
- *   async setup() {
- *     const reviews = await useDeferred<Review[]>("reviews");
- *     return () => h("div", reviews.map(...));
- *   },
- * });
- * ```
- *
- * Returns a forever-pending promise when the key is missing — surfaces
- * loader/consumer key drift as a visible Suspense fallback rather than a
- * silent runtime error.
- */
-export function useDeferred<T = unknown>(key: string): Promise<T> {
-  const { route } = useRoute();
-  const context = route.value.context as DeferredContext;
-  const deferred = context.ssrDataDeferred;
-
-  return (deferred?.[key] ?? NEVER_PROMISE) as Promise<T>;
-}