@richie-router/react 0.0.1 → 0.1.1

package/dist/esm/router.mjs

@@ -0,0 +1,849 @@
+// packages/react/src/router.tsx
+import React from "react";
+import {
+  buildPath,
+  collectBranches,
+  collectRoutes,
+  createParsedLocation,
+  createRouteNode,
+  defaultParseSearch,
+  defaultStringifySearch,
+  isNotFound,
+  isRedirect,
+  matchRouteTree,
+  notFound,
+  redirect,
+  resolveHeadConfig
+} from "@richie-router/core";
+import {
+  createBrowserHistory,
+  createHashHistory,
+  createMemoryHistory
+} from "./history.mjs";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var RouterContext = React.createContext(null);
+var RouterStateContext = React.createContext(null);
+var OutletContext = React.createContext(null);
+var MatchContext = React.createContext(null);
+var MANAGED_HEAD_ATTRIBUTE = "data-richie-router-head";
+var EMPTY_HEAD = { meta: [], links: [], scripts: [], styles: [] };
+function isHeadTagReference(head) {
+  return typeof head === "string";
+}
+function routeHasRecord(value) {
+  return typeof value === "object" && value !== null;
+}
+function resolveParamsInput(input, previous) {
+  if (input === undefined) {
+    return previous;
+  }
+  return typeof input === "function" ? input(previous) : input;
+}
+function resolveSearchInput(input, previous) {
+  if (input === true) {
+    return previous;
+  }
+  if (input === undefined) {
+    return {};
+  }
+  return typeof input === "function" ? input(previous) : input;
+}
+function attachRouteApi(route) {
+  const api = route;
+  api.useParams = () => useRouteMatchByFullPath(route.fullPath).params;
+  api.useSearch = () => useRouteMatchByFullPath(route.fullPath).search;
+  api.useNavigate = () => useNavigate();
+  api.useMatch = () => useRouteMatchByFullPath(route.fullPath);
+  return api;
+}
+function createFileRoute(path) {
+  return function(options) {
+    const route = createRouteNode(path, options);
+    return attachRouteApi(route);
+  };
+}
+function createRootRoute(options) {
+  const route = createRouteNode("__root__", options, { isRoot: true });
+  return attachRouteApi(route);
+}
+
+class Router {
+  routeTree;
+  history;
+  options;
+  state;
+  routesByFullPath = new Map;
+  routesByTo = new Map;
+  listeners = new Set;
+  headCache = new Map;
+  parseSearch;
+  stringifySearch;
+  started = false;
+  unsubscribeHistory;
+  constructor(options) {
+    this.routeTree = options.routeTree;
+    this.options = options;
+    this.history = options.history ?? (typeof window === "undefined" ? createMemoryHistory() : createBrowserHistory());
+    this.parseSearch = options.parseSearch ?? defaultParseSearch;
+    this.stringifySearch = options.stringifySearch ?? defaultStringifySearch;
+    for (const route of collectRoutes(this.routeTree)) {
+      this.routesByFullPath.set(route.fullPath, route);
+    }
+    for (const branch of collectBranches(this.routeTree)) {
+      this.routesByTo.set(branch.leaf.to, branch.leaf);
+    }
+    const location = this.readLocation();
+    const initialHeadSnapshot = typeof window !== "undefined" ? window.__RICHIE_ROUTER_HEAD__ : undefined;
+    const initialHead = initialHeadSnapshot && initialHeadSnapshot.href === location.href ? initialHeadSnapshot.head : EMPTY_HEAD;
+    if (typeof window !== "undefined" && initialHeadSnapshot !== undefined) {
+      delete window.__RICHIE_ROUTER_HEAD__;
+    }
+    this.state = {
+      status: "loading",
+      location,
+      matches: this.buildMatches(location),
+      head: initialHead,
+      error: null
+    };
+  }
+  getSnapshot = () => this.state;
+  subscribe = (listener) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+  start() {
+    if (this.started) {
+      return;
+    }
+    this.started = true;
+    this.unsubscribeHistory = this.history.listen(() => {
+      this.handleHistoryChange();
+    });
+    if (this.state.status === "loading") {
+      this.load();
+    }
+  }
+  dispose() {
+    this.unsubscribeHistory?.();
+    this.unsubscribeHistory = undefined;
+    this.started = false;
+  }
+  async load(options) {
+    const nextLocation = this.readLocation();
+    await this.commitLocation(nextLocation, {
+      request: options?.request,
+      replace: true,
+      writeHistory: false
+    });
+  }
+  async navigate(options) {
+    const href = this.buildHref(options);
+    const location = createParsedLocation(href, options.state ?? null, this.parseSearch);
+    await this.commitLocation(location, {
+      replace: options.replace ?? false,
+      writeHistory: true,
+      resetScroll: options.resetScroll
+    });
+  }
+  async preloadRoute(options) {
+    const href = this.buildHref(options);
+    const location = createParsedLocation(href, options.state ?? null, this.parseSearch);
+    try {
+      await this.resolveLocation(location);
+    } catch {}
+  }
+  async invalidate() {
+    this.headCache.clear();
+    await this.load();
+  }
+  buildHref(options) {
+    const targetRoute = this.routesByTo.get(options.to) ?? null;
+    const fromMatch = options.from ? this.findMatchByTo(options.from) : null;
+    const previousParams = fromMatch?.params ?? {};
+    const previousSearch = fromMatch?.search ?? this.state.location.search;
+    const params = resolveParamsInput(options.params, previousParams);
+    const path = buildPath(options.to, params);
+    const searchValue = resolveSearchInput(options.search, previousSearch);
+    const search = this.stringifySearch(routeHasRecord(searchValue) ? searchValue : {});
+    const hash = options.hash ? `#${options.hash.replace(/^#/, "")}` : "";
+    const normalizedPath = this.applyTrailingSlash(path, targetRoute);
+    return `${normalizedPath}${search}${hash}`;
+  }
+  readLocation() {
+    const location = this.history.location;
+    return createParsedLocation(location.href, location.state, this.parseSearch);
+  }
+  applyTrailingSlash(pathname, route) {
+    const trailingSlash = this.options.trailingSlash ?? "preserve";
+    if (trailingSlash === "preserve") {
+      return pathname;
+    }
+    if (pathname === "/") {
+      return "/";
+    }
+    if (trailingSlash === "always") {
+      return pathname.endsWith("/") ? pathname : `${pathname}/`;
+    }
+    if (route && route.fullPath.endsWith("/") && route.to === pathname) {
+      return pathname;
+    }
+    return pathname.endsWith("/") ? pathname.slice(0, -1) : pathname;
+  }
+  notify() {
+    for (const listener of this.listeners) {
+      listener();
+    }
+  }
+  findMatchByTo(to) {
+    const route = this.routesByTo.get(to);
+    if (!route) {
+      return null;
+    }
+    return this.state.matches.find((match) => match.route.fullPath === route.fullPath) ?? null;
+  }
+  buildMatches(location) {
+    const matched = matchRouteTree(this.routeTree, location.pathname) ?? [];
+    const rawSearch = location.search;
+    let accumulatedSearch = { ...rawSearch };
+    return matched.map(({ route, params }) => {
+      const nextSearch = this.resolveSearch(route, rawSearch);
+      if (routeHasRecord(nextSearch)) {
+        accumulatedSearch = {
+          ...accumulatedSearch,
+          ...nextSearch
+        };
+      }
+      return {
+        id: route.fullPath,
+        pathname: location.pathname,
+        params,
+        route,
+        search: accumulatedSearch,
+        to: route.to
+      };
+    });
+  }
+  resolveSearch(route, rawSearch) {
+    const fromHeadTagSchema = route.searchSchema ? route.searchSchema.parse(rawSearch) : {};
+    const fromRoute = route.options.validateSearch ? route.options.validateSearch(rawSearch) : {};
+    if (routeHasRecord(fromHeadTagSchema) || routeHasRecord(fromRoute)) {
+      return {
+        ...routeHasRecord(fromHeadTagSchema) ? fromHeadTagSchema : {},
+        ...routeHasRecord(fromRoute) ? fromRoute : {}
+      };
+    }
+    return rawSearch;
+  }
+  async resolveLocation(location, options) {
+    const matched = matchRouteTree(this.routeTree, location.pathname);
+    if (!matched) {
+      throw notFound();
+    }
+    const rawSearch = location.search;
+    let accumulatedSearch = { ...rawSearch };
+    const matches = [];
+    for (const { route, params } of matched) {
+      const nextSearch = this.resolveSearch(route, rawSearch);
+      if (routeHasRecord(nextSearch)) {
+        accumulatedSearch = {
+          ...accumulatedSearch,
+          ...nextSearch
+        };
+      }
+      if (route.options.beforeLoad) {
+        await route.options.beforeLoad({
+          location,
+          params,
+          search: accumulatedSearch,
+          navigate: async (navigateOptions) => {
+            await this.navigate(navigateOptions);
+          },
+          cause: this.state.location.pathname === location.pathname ? "stay" : "enter"
+        });
+      }
+      matches.push({
+        id: route.fullPath,
+        pathname: location.pathname,
+        params,
+        route,
+        search: accumulatedSearch,
+        to: route.to
+      });
+    }
+    const head = await this.resolveLocationHead(matches, location, options?.request);
+    return { matches, head, error: null };
+  }
+  async resolveLocationHead(matches, location, request) {
+    const resolvedHeadByRoute = new Map;
+    for (const match of matches) {
+      const headOption = match.route.options.head;
+      if (!isHeadTagReference(headOption)) {
+        continue;
+      }
+      resolvedHeadByRoute.set(match.route.fullPath, await this.loadRouteHead(match.route, headOption, match.params, match.search, location, request));
+    }
+    return resolveHeadConfig(matches, resolvedHeadByRoute);
+  }
+  async loadRouteHead(route, headTagName, params, search, location, request) {
+    const cacheKey = JSON.stringify({
+      headTagName,
+      params,
+      search
+    });
+    const cached = this.headCache.get(cacheKey);
+    if (cached && cached.expiresAt > Date.now()) {
+      return cached.head;
+    }
+    const response = this.options.loadRouteHead !== undefined ? await this.options.loadRouteHead({
+      route,
+      headTagName,
+      params,
+      search,
+      location,
+      request
+    }) : await this.fetchRouteHead(route, headTagName, params, search);
+    this.headCache.set(cacheKey, {
+      head: response.head,
+      expiresAt: Date.now() + (response.staleTime ?? 0)
+    });
+    return response.head;
+  }
+  async fetchRouteHead(route, headTagName, params, search) {
+    const basePath = this.options.headBasePath ?? "/head-api";
+    const searchParams = new URLSearchParams({
+      routeId: route.fullPath,
+      params: JSON.stringify(params),
+      search: JSON.stringify(search)
+    });
+    const response = await fetch(`${basePath}/${encodeURIComponent(headTagName)}?${searchParams.toString()}`);
+    if (!response.ok) {
+      if (response.status === 404) {
+        throw notFound();
+      }
+      throw new Error(`Failed to resolve head tag "${headTagName}" for route "${route.fullPath}"`);
+    }
+    return await response.json();
+  }
+  async commitLocation(location, options) {
+    this.state = {
+      ...this.state,
+      status: "loading",
+      location
+    };
+    this.notify();
+    try {
+      const resolved = await this.resolveLocation(location, {
+        request: options.request
+      });
+      if (options.writeHistory) {
+        if (options.replace) {
+          this.history.replace(location.href, location.state);
+        } else {
+          this.history.push(location.href, location.state);
+        }
+      }
+      this.state = {
+        status: "idle",
+        location,
+        matches: resolved.matches,
+        head: resolved.head,
+        error: resolved.error
+      };
+      this.notify();
+      this.restoreScroll(options.resetScroll);
+    } catch (error) {
+      if (isRedirect(error)) {
+        await this.navigate({
+          ...error.options,
+          replace: error.options.replace ?? true
+        });
+        return;
+      }
+      const errorMatches = this.buildMatches(location);
+      if (options.writeHistory) {
+        if (options.replace) {
+          this.history.replace(location.href, location.state);
+        } else {
+          this.history.push(location.href, location.state);
+        }
+      }
+      this.state = {
+        status: "idle",
+        location,
+        matches: errorMatches,
+        head: resolveHeadConfig(errorMatches),
+        error
+      };
+      this.notify();
+    }
+  }
+  restoreScroll(resetScroll) {
+    if (typeof window === "undefined") {
+      return;
+    }
+    if (!this.options.scrollRestoration || resetScroll === false) {
+      return;
+    }
+    const selectors = this.options.scrollToTopSelectors ?? [];
+    if (selectors.length === 0) {
+      window.scrollTo({ top: 0, left: 0, behavior: "instant" });
+      return;
+    }
+    for (const selector of selectors) {
+      const element = document.querySelector(selector);
+      if (element instanceof HTMLElement) {
+        element.scrollTo({ top: 0, left: 0, behavior: "instant" });
+      }
+    }
+  }
+  async handleHistoryChange() {
+    const nextLocation = this.readLocation();
+    await this.commitLocation(nextLocation, {
+      replace: true,
+      writeHistory: false
+    });
+  }
+}
+function createRouter(options) {
+  return new Router(options);
+}
+function useRouterContext() {
+  const router = React.useContext(RouterContext);
+  if (!router) {
+    throw new Error("Richie Router hooks must be used inside <RouterProvider>.");
+  }
+  return router;
+}
+function useRouterStateContext() {
+  const state = React.useContext(RouterStateContext);
+  if (!state) {
+    throw new Error("Richie Router hooks must be used inside <RouterProvider>.");
+  }
+  return state;
+}
+function useRouteMatchByFullPath(fullPath) {
+  const state = useRouterStateContext();
+  const currentRenderedMatch = React.useContext(MatchContext);
+  return state.matches.find((match) => match.route.fullPath === fullPath) ?? (currentRenderedMatch?.route.fullPath === fullPath ? currentRenderedMatch : null) ?? (() => {
+    throw new Error(`No active match found for "${fullPath}".`);
+  })();
+}
+function resolveHookMatch(from) {
+  const router = useRouterContext();
+  const state = useRouterStateContext();
+  const currentRenderedMatch = React.useContext(MatchContext);
+  if (!from) {
+    return currentRenderedMatch ?? state.matches.at(-1) ?? (() => {
+      throw new Error("No active route match is available.");
+    })();
+  }
+  const targetRoute = router.routesByTo.get(from);
+  if (!targetRoute) {
+    throw new Error(`Unknown route path "${from}".`);
+  }
+  return state.matches.find((match) => match.route.fullPath === targetRoute.fullPath) ?? (() => {
+    throw new Error(`The route "${from}" is not part of the current match set.`);
+  })();
+}
+function createManagedHeadElements(head) {
+  if (typeof document === "undefined") {
+    return [];
+  }
+  const elements = [];
+  const managed = (element) => {
+    element.setAttribute(MANAGED_HEAD_ATTRIBUTE, "true");
+    return element;
+  };
+  for (const meta of head.meta ?? []) {
+    if ("title" in meta) {
+      const title = managed(document.createElement("title"));
+      title.textContent = meta.title;
+      elements.push(title);
+      continue;
+    }
+    const tag = managed(document.createElement("meta"));
+    if ("charset" in meta) {
+      tag.setAttribute("charset", meta.charset);
+    } else if ("name" in meta) {
+      tag.setAttribute("name", meta.name);
+      tag.setAttribute("content", meta.content);
+    } else if ("property" in meta) {
+      tag.setAttribute("property", meta.property);
+      tag.setAttribute("content", meta.content);
+    } else {
+      tag.setAttribute("http-equiv", meta.httpEquiv);
+      tag.setAttribute("content", meta.content);
+    }
+    elements.push(tag);
+  }
+  for (const link of head.links ?? []) {
+    const tag = managed(document.createElement("link"));
+    tag.setAttribute("rel", link.rel);
+    tag.setAttribute("href", link.href);
+    if (link.type)
+      tag.setAttribute("type", link.type);
+    if (link.media)
+      tag.setAttribute("media", link.media);
+    if (link.sizes)
+      tag.setAttribute("sizes", link.sizes);
+    if (link.crossorigin)
+      tag.setAttribute("crossorigin", link.crossorigin);
+    elements.push(tag);
+  }
+  for (const style of head.styles ?? []) {
+    const tag = managed(document.createElement("style"));
+    if (style.media)
+      tag.setAttribute("media", style.media);
+    tag.textContent = style.children;
+    elements.push(tag);
+  }
+  for (const script of head.scripts ?? []) {
+    const tag = managed(document.createElement("script"));
+    if (script.src)
+      tag.setAttribute("src", script.src);
+    if (script.type)
+      tag.setAttribute("type", script.type);
+    if (script.async)
+      tag.async = true;
+    if (script.defer)
+      tag.defer = true;
+    if (script.children)
+      tag.textContent = script.children;
+    elements.push(tag);
+  }
+  return elements;
+}
+function reconcileDocumentHead(head) {
+  if (typeof document === "undefined") {
+    return;
+  }
+  for (const element of Array.from(document.head.querySelectorAll(`[${MANAGED_HEAD_ATTRIBUTE}]`))) {
+    element.remove();
+  }
+  const elements = createManagedHeadElements(head);
+  for (const element of elements) {
+    document.head.appendChild(element);
+  }
+}
+function RenderMatches({ matches, index }) {
+  const match = matches[index];
+  if (!match) {
+    return null;
+  }
+  const Component = match.route.options.component;
+  const outlet = /* @__PURE__ */ jsxDEV(RenderMatches, {
+    matches,
+    index: index + 1
+  }, undefined, false, undefined, this);
+  return /* @__PURE__ */ jsxDEV(MatchContext.Provider, {
+    value: match,
+    children: /* @__PURE__ */ jsxDEV(OutletContext.Provider, {
+      value: outlet,
+      children: Component ? /* @__PURE__ */ jsxDEV(Component, {}, undefined, false, undefined, this) : outlet
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function renderError(error, matches, router) {
+  const reversed = [...matches].reverse();
+  if (isNotFound(error)) {
+    const NotFoundComponent = reversed.find((match) => match.route.options.notFoundComponent)?.route.options.notFoundComponent ?? router.options.defaultNotFoundComponent;
+    if (NotFoundComponent) {
+      return React.createElement(NotFoundComponent);
+    }
+    return /* @__PURE__ */ jsxDEV("div", {
+      children: "Not Found"
+    }, undefined, false, undefined, this);
+  }
+  const ErrorComponent = reversed.find((match) => match.route.options.errorComponent)?.route.options.errorComponent ?? router.options.defaultErrorComponent;
+  if (ErrorComponent) {
+    return React.createElement(ErrorComponent, {
+      error,
+      reset: () => {
+        router.invalidate();
+      }
+    });
+  }
+  return /* @__PURE__ */ jsxDEV("pre", {
+    children: error instanceof Error ? error.message : "Unknown routing error"
+  }, undefined, false, undefined, this);
+}
+function RouterProvider({ router }) {
+  const snapshot = React.useSyncExternalStore(router.subscribe, router.getSnapshot, router.getSnapshot);
+  React.useEffect(() => {
+    router.start();
+    return () => {
+      router.dispose();
+    };
+  }, [router]);
+  React.useEffect(() => {
+    reconcileDocumentHead(snapshot.head);
+  }, [snapshot.head]);
+  const content = snapshot.error ? renderError(snapshot.error, snapshot.matches, router) : /* @__PURE__ */ jsxDEV(RenderMatches, {
+    matches: snapshot.matches,
+    index: 0
+  }, undefined, false, undefined, this);
+  return /* @__PURE__ */ jsxDEV(RouterContext.Provider, {
+    value: router,
+    children: /* @__PURE__ */ jsxDEV(RouterStateContext.Provider, {
+      value: snapshot,
+      children: content
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function Outlet() {
+  return React.useContext(OutletContext);
+}
+function useRouter() {
+  return useRouterContext();
+}
+function useMatches() {
+  return useRouterStateContext().matches;
+}
+function useMatch(options) {
+  return resolveHookMatch(options?.from);
+}
+function useParams(options) {
+  return resolveHookMatch(options?.from).params;
+}
+function useSearch(options) {
+  return resolveHookMatch(options?.from).search;
+}
+function useNavigate() {
+  const router = useRouterContext();
+  return React.useCallback(async (options) => {
+    await router.navigate(options);
+  }, [router]);
+}
+function useLocation() {
+  return useRouterStateContext().location;
+}
+function useRouterState(options) {
+  const router = useRouterContext();
+  return React.useSyncExternalStore(router.subscribe, () => options.select(router.getSnapshot()), () => options.select(router.getSnapshot()));
+}
+function useBlocker(options) {
+  const current = useLocation();
+  const [next, setNext] = React.useState(null);
+  React.useEffect(() => {
+    if (!options.enableBeforeUnload || typeof window === "undefined") {
+      return;
+    }
+    const listener = (event) => {
+      if (!options.shouldBlockFn?.({ current, next })) {
+        return;
+      }
+      event.preventDefault();
+      event.returnValue = "";
+    };
+    window.addEventListener("beforeunload", listener);
+    return () => window.removeEventListener("beforeunload", listener);
+  }, [current, next, options]);
+  return {
+    status: next ? "blocked" : "idle",
+    next,
+    proceed() {
+      setNext(null);
+    },
+    reset() {
+      setNext(null);
+    }
+  };
+}
+function Block() {
+  return null;
+}
+function useElementScrollRestoration() {
+  return {
+    ref: () => {}
+  };
+}
+function useResolvedLink(props) {
+  const router = useRouterContext();
+  const href = router.buildHref(props);
+  const location = useLocation();
+  const pathOnly = href.split(/[?#]/u)[0] ?? href;
+  const isActive = pathOnly === location.pathname;
+  return { href, isActive, router };
+}
+var LinkComponent = React.forwardRef(function LinkInner(props, ref) {
+  const allProps = props;
+  const {
+    to,
+    from,
+    params,
+    search,
+    hash,
+    replace,
+    resetScroll,
+    state,
+    mask,
+    ignoreBlocker,
+    activeProps,
+    children,
+    onClick,
+    onMouseEnter,
+    onFocus,
+    preload,
+    ...anchorProps
+  } = allProps;
+  const navigation = {
+    to,
+    from,
+    params,
+    search,
+    hash,
+    replace,
+    resetScroll,
+    state,
+    mask,
+    ignoreBlocker
+  };
+  const { href, isActive, router } = useResolvedLink(navigation);
+  const preloadMode = preload ?? router.options.defaultPreload;
+  const preloadDelay = router.options.defaultPreloadDelay ?? 50;
+  const preloadTimeout = React.useRef(null);
+  React.useEffect(() => {
+    if (preloadMode !== "render") {
+      return;
+    }
+    router.preloadRoute(navigation);
+  }, [navigation, preloadMode, router]);
+  const schedulePreload = React.useCallback(() => {
+    if (preloadMode !== "intent") {
+      return;
+    }
+    preloadTimeout.current = window.setTimeout(() => {
+      router.preloadRoute(navigation);
+    }, preloadDelay);
+  }, [navigation, preloadDelay, preloadMode, router]);
+  const cancelPreload = React.useCallback(() => {
+    if (preloadTimeout.current !== null) {
+      window.clearTimeout(preloadTimeout.current);
+      preloadTimeout.current = null;
+    }
+  }, []);
+  const renderedChildren = typeof children === "function" ? children({ isActive }) : children;
+  return /* @__PURE__ */ jsxDEV("a", {
+    ...anchorProps,
+    ...isActive ? activeProps : undefined,
+    ref,
+    href,
+    onClick: (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) {
+        return;
+      }
+      event.preventDefault();
+      router.navigate(navigation);
+    },
+    onMouseEnter: (event) => {
+      onMouseEnter?.(event);
+      if (typeof window !== "undefined") {
+        schedulePreload();
+      }
+    },
+    onMouseLeave: cancelPreload,
+    onFocus: (event) => {
+      onFocus?.(event);
+      if (typeof window !== "undefined") {
+        schedulePreload();
+      }
+    },
+    onBlur: cancelPreload,
+    children: renderedChildren
+  }, undefined, false, undefined, this);
+});
+var Link = LinkComponent;
+function createLink(Component) {
+  return function CreatedLink(props) {
+    const allProps = props;
+    const {
+      to,
+      from,
+      params,
+      search,
+      hash,
+      replace,
+      resetScroll,
+      state,
+      mask,
+      ignoreBlocker,
+      activeProps,
+      children,
+      preload,
+      ...componentProps
+    } = allProps;
+    const navigation = {
+      to,
+      from,
+      params,
+      search,
+      hash,
+      replace,
+      resetScroll,
+      state,
+      mask,
+      ignoreBlocker
+    };
+    const { href, isActive, router } = useResolvedLink(navigation);
+    const renderedChildren = typeof children === "function" ? children({ isActive }) : children;
+    React.useEffect(() => {
+      if (preload !== "render") {
+        return;
+      }
+      router.preloadRoute(navigation);
+    }, [navigation, preload, router]);
+    return /* @__PURE__ */ jsxDEV(Component, {
+      ...componentProps,
+      ...isActive ? activeProps : undefined,
+      href,
+      children: renderedChildren
+    }, undefined, false, undefined, this);
+  };
+}
+function linkOptions(options) {
+  return options;
+}
+function getRouteApi(to) {
+  return {
+    useParams: () => useParams({ from: to }),
+    useSearch: () => useSearch({ from: to }),
+    useMatch: () => useMatch({ from: to })
+  };
+}
+function createRouteMask(mask) {
+  return mask;
+}
+export {
+  useSearch,
+  useRouterState,
+  useRouter,
+  useParams,
+  useNavigate,
+  useMatches,
+  useMatch,
+  useLocation,
+  useElementScrollRestoration,
+  useBlocker,
+  redirect,
+  notFound,
+  linkOptions,
+  isRedirect,
+  isNotFound,
+  getRouteApi,
+  createRouter,
+  createRouteMask,
+  createRootRoute,
+  createMemoryHistory,
+  createLink,
+  createHashHistory,
+  createFileRoute,
+  createBrowserHistory,
+  RouterProvider,
+  Router,
+  Outlet,
+  Link,
+  Block
+};