@tanstack/react-router 0.0.1-beta.209 → 0.0.1-beta.210

package/build/esm/index.js

@@ -16,6 +16,91 @@ import warning from 'tiny-warning';
 export { default as warning } from 'tiny-warning';
 import * as React from 'react';
 
+function CatchBoundary(props) {
+  const errorComponent = props.errorComponent ?? ErrorComponent;
+  return /*#__PURE__*/React.createElement(CatchBoundaryImpl, {
+    resetKey: props.resetKey,
+    onCatch: props.onCatch,
+    children: ({
+      error
+    }) => {
+      if (error) {
+        return /*#__PURE__*/React.createElement(errorComponent, {
+          error
+        });
+      }
+      return props.children;
+    }
+  });
+}
+class CatchBoundaryImpl extends React.Component {
+  state = {
+    error: null
+  };
+  static getDerivedStateFromError(error) {
+    return {
+      error
+    };
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.error && prevProps.resetKey !== this.props.resetKey) {
+      this.setState({
+        error: null
+      });
+    }
+  }
+  componentDidCatch(error) {
+    this.props.onCatch?.(error);
+  }
+  render() {
+    return this.props.children(this.state);
+  }
+}
+function ErrorComponent({
+  error
+}) {
+  const [show, setShow] = React.useState(process.env.NODE_ENV !== 'production');
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '.5rem',
+      maxWidth: '100%'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '.5rem'
+    }
+  }, /*#__PURE__*/React.createElement("strong", {
+    style: {
+      fontSize: '1rem'
+    }
+  }, "Something went wrong!"), /*#__PURE__*/React.createElement("button", {
+    style: {
+      appearance: 'none',
+      fontSize: '.6em',
+      border: '1px solid currentColor',
+      padding: '.1rem .2rem',
+      fontWeight: 'bold',
+      borderRadius: '.25rem'
+    },
+    onClick: () => setShow(d => !d)
+  }, show ? 'Hide Error' : 'Show Error')), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '.25rem'
+    }
+  }), show ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("pre", {
+    style: {
+      fontSize: '.7em',
+      border: '1px solid red',
+      borderRadius: '.25rem',
+      padding: '.3rem',
+      color: 'red',
+      overflow: 'auto'
+    }
+  }, error.message ? /*#__PURE__*/React.createElement("code", null, error.message) : null)) : null);
+}
+
 // export type Expand<T> = T
 
 // type Compute<T> = { [K in keyof T]: T[K] } | never
@@ -156,7 +241,7 @@ function partialDeepEqual(a, b) {
     return !Object.keys(b).some(key => !partialDeepEqual(a[key], b[key]));
   }
   if (Array.isArray(a) && Array.isArray(b)) {
-    return a.length === b.length && a.every((item, index) => partialDeepEqual(item, b[index]));
+    return !(a.length !== b.length || a.some((item, index) => !partialDeepEqual(item, b[index])));
   }
   return false;
 }
@@ -166,6 +251,31 @@ function useStableCallback(fn) {
   const ref = React.useRef((...args) => fnRef.current(...args));
   return ref.current;
 }
+function shallow(objA, objB) {
+  if (Object.is(objA, objB)) {
+    return true;
+  }
+  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+    return false;
+  }
+  const keysA = Object.keys(objA);
+  if (keysA.length !== Object.keys(objB).length) {
+    return false;
+  }
+  for (let i = 0; i < keysA.length; i++) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
+      return false;
+    }
+  }
+  return true;
+}
+function useRouteContext(opts) {
+  return useMatch({
+    ...opts,
+    select: match => opts?.select ? opts.select(match.context) : match.context
+  });
+}
+const useLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
 function joinPaths(paths) {
   return cleanPath(paths.filter(Boolean).join('/'));
@@ -351,6 +461,16 @@ function matchByPath(basepath, from, matchLocation) {
   return isMatch ? params : undefined;
 }
 
+// Detect if we're in the DOM
+
+function redirect(opts) {
+  opts.isRedirect = true;
+  return opts;
+}
+function isRedirect(obj) {
+  return !!obj?.isRedirect;
+}
+
 // @ts-nocheck
 
 // qss has been slightly modified and inlined here for our use cases (and compression's sake). We've included it as a hard dependency for MIT license attribution.
@@ -399,21 +519,6 @@ function decode(str) {
   return out;
 }
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
 const defaultParseSearch = parseSearchWith(JSON.parse);
 const defaultStringifySearch = stringifySearchWith(JSON.stringify, JSON.parse);
 function parseSearchWith(parser) {
@@ -659,26 +764,20 @@ function lazyFn(fn, key) {
   };
 }
 
-// Detect if we're in the DOM
-
-function redirect(opts) {
-  opts.isRedirect = true;
-  return opts;
-}
-function isRedirect(obj) {
-  return !!obj?.isRedirect;
-}
-
-const preloadWarning = 'Error preloading route! ☝️';
 const routerContext = /*#__PURE__*/React.createContext(null);
 if (typeof document !== 'undefined') {
   window.__TSR_ROUTER_CONTEXT__ = routerContext;
 }
+const preloadWarning = 'Error preloading route! ☝️';
+function isCtrlEvent(e) {
+  return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
+}
+class SearchParamError extends Error {}
+class PathParamError extends Error {}
 function getInitialRouterState(location) {
   return {
     status: 'idle',
-    isFetching: false,
-    resolvedLocation: location,
+    resolvedLocation: undefined,
     location: location,
     matches: [],
     pendingMatches: [],
@@ -739,7 +838,20 @@ function RouterProvider({
     }
     return location;
   });
-  const [state, setState] = React.useState(() => getInitialRouterState(parseLocation()));
+  const [preState, setState] = React.useState(() => getInitialRouterState(parseLocation()));
+  const [isTransitioning, startReactTransition] = React.useTransition();
+  const state = React.useMemo(() => ({
+    ...preState,
+    status: isTransitioning ? 'pending' : 'idle'
+  }), [preState, isTransitioning]);
+  React.useLayoutEffect(() => {
+    if (!isTransitioning && state.resolvedLocation !== state.location) {
+      setState(s => ({
+        ...s,
+        resolvedLocation: s.location
+      }));
+    }
+  });
   const basepath = `/${trimPath(options.basepath ?? '') ?? ''}`;
   const resolvePathWithBase = useStableCallback((from, path) => {
     return resolvePath(basepath, from, cleanPath(path));
@@ -958,7 +1070,7 @@ function RouterProvider({
       cancelMatch(match.id);
     });
   });
-  const buildLocation = useStableCallback((opts = {}) => {
+  const buildLocation = useStableCallback(opts => {
     const build = (dest = {}, matches) => {
       const from = latestLocationRef.current;
       const fromPathname = dest.from ?? from.pathname;
@@ -1051,7 +1163,10 @@ function RouterProvider({
     }
     return buildWithMatches(opts);
   });
-  const commitLocation = useStableCallback(async next => {
+  const commitLocation = useStableCallback(async ({
+    startTransition,
+    ...next
+  }) => {
     if (navigateTimeoutRef.current) clearTimeout(navigateTimeoutRef.current);
     const isSameUrl = latestLocationRef.current.href === next.href;
 
@@ -1084,7 +1199,14 @@ function RouterProvider({
           nextHistory.state.__tempKey = tempLocationKeyRef.current;
         }
       }
-      history[next.replace ? 'replace' : 'push'](nextHistory.href, nextHistory.state);
+      const apply = () => {
+        history[next.replace ? 'replace' : 'push'](nextHistory.href, nextHistory.state);
+      };
+      if (startTransition ?? true) {
+        startReactTransition(apply);
+      } else {
+        apply();
+      }
     }
     resetNextScrollRef.current = next.resetScroll ?? true;
     return latestLoadPromiseRef.current;
@@ -1092,11 +1214,13 @@ function RouterProvider({
   const buildAndCommitLocation = useStableCallback(({
     replace,
     resetScroll,
+    startTransition,
     ...rest
   } = {}) => {
     const location = buildLocation(rest);
     return commitLocation({
       ...location,
+      startTransition,
       replace,
       resetScroll
     });
@@ -1178,7 +1302,8 @@ function RouterProvider({
             navigate: opts => navigate({
               ...opts,
               from: match.pathname
-            })
+            }),
+            buildLocation
           })) ?? {};
           const context = {
             ...parentContext,
@@ -1239,7 +1364,7 @@ function RouterProvider({
                 from: match.pathname
               })
             });
-            await Promise.all([componentsPromise, loaderPromise]);
+            const [_, loaderContext] = await Promise.all([componentsPromise, loaderPromise]);
             if (latestPromise = checkLatest()) return await latestPromise;
             matches[index] = match = {
               ...match,
@@ -1293,7 +1418,7 @@ function RouterProvider({
   const load = useStableCallback(async () => {
     const promise = new Promise(async (resolve, reject) => {
       const next = latestLocationRef.current;
-      const prevLocation = state.resolvedLocation;
+      const prevLocation = state.resolvedLocation || state.location;
       const pathDidChange = !!(next && prevLocation.href !== next.href);
       let latestPromise;
 
@@ -1306,19 +1431,14 @@ function RouterProvider({
         pathChanged: pathDidChange
       });
 
-      // Ingest the new location
-      setState(s => ({
-        ...s,
-        location: next
-      }));
-
       // Match the routes
       let matches = matchRoutes(next.pathname, next.search, {
         debug: true
       });
+
+      // Ingest the new matches
       setState(s => ({
         ...s,
-        status: 'pending',
         matches
       }));
       try {
@@ -1349,11 +1469,11 @@ function RouterProvider({
         //   state.pendingMatches.includes(id),
         // )
 
-        setState(s => ({
-          ...s,
-          status: 'idle',
-          resolvedLocation: s.location
-        }));
+        // setState((s) => ({
+        //   ...s,
+        //   status: 'idle',
+        //   resolvedLocation: s.location,
+        // }))
 
         // TODO:
         // ;(
@@ -1398,7 +1518,7 @@ function RouterProvider({
     });
     return [last(matches), matches];
   });
-  const buildLink = useStableCallback((state, dest) => {
+  const buildLink = useStableCallback(dest => {
     // If this link simply reloads the current route,
     // make sure it has a new key so it will trigger a data refresh
 
@@ -1413,7 +1533,8 @@ function RouterProvider({
       disabled,
       target,
       replace,
-      resetScroll
+      resetScroll,
+      startTransition
     } = dest;
     try {
       new URL(`${to}`);
@@ -1448,7 +1569,8 @@ function RouterProvider({
         commitLocation({
           ...next,
           replace,
-          resetScroll
+          resetScroll,
+          startTransition
         });
       }
     };
@@ -1506,15 +1628,17 @@ function RouterProvider({
   React.useLayoutEffect(() => {
     const unsub = history.subscribe(() => {
       latestLocationRef.current = parseLocation(latestLocationRef.current);
-      React.startTransition(() => {
-        if (state.location !== latestLocationRef.current) {
-          try {
-            load();
-          } catch (err) {
-            console.error(err);
-          }
+      setState(s => ({
+        ...s,
+        status: 'pending'
+      }));
+      if (state.location !== latestLocationRef.current) {
+        try {
+          load();
+        } catch (err) {
+          console.error(err);
         }
-      });
+      }
     });
     const nextLocation = buildLocation({
       search: true,
@@ -1535,14 +1659,15 @@ function RouterProvider({
   const initialLoad = React.useRef(true);
   if (initialLoad.current) {
     initialLoad.current = false;
-    try {
-      load();
-    } catch (err) {
-      console.error(err);
-    }
+    startReactTransition(() => {
+      try {
+        load();
+      } catch (err) {
+        console.error(err);
+      }
+    });
   }
-  React.useMemo(() => [...state.matches, ...state.pendingMatches].some(d => d.isFetching), [state.matches, state.pendingMatches]);
-  const matchRoute = useStableCallback((state, location, opts) => {
+  const matchRoute = useStableCallback((location, opts) => {
     location = {
       ...location,
       to: location.to ? resolvePathWithBase(location.from || '', location.to) : undefined
@@ -1552,6 +1677,9 @@ function RouterProvider({
       return false;
     }
     const baseLocation = opts?.pending ? latestLocationRef.current : state.resolvedLocation;
+
+    // const baseLocation = state.resolvedLocation
+
     if (!baseLocation) {
       return false;
     }
@@ -1562,7 +1690,7 @@ function RouterProvider({
     if (!match) {
       return false;
     }
-    if (opts?.includeSearch ?? true) {
+    if (match && (opts?.includeSearch ?? true)) {
       return partialDeepEqual(baseLocation.search, next.search) ? match : false;
     }
     return match;
@@ -1576,292 +1704,39 @@ function RouterProvider({
     routesById,
     options,
     history,
-    load
+    load,
+    buildLocation
   };
   return /*#__PURE__*/React.createElement(routerContext.Provider, {
     value: routerContextValue
   }, /*#__PURE__*/React.createElement(Matches, null));
 }
-function isCtrlEvent(e) {
-  return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
-}
-class SearchParamError extends Error {}
-class PathParamError extends Error {}
 function getRouteMatch(state, id) {
   return [...state.pendingMatches, ...state.matches].find(d => d.id === id);
 }
-
-const useLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
-//
-
-function lazyRouteComponent(importer, exportName) {
-  let loadPromise;
-  const load = () => {
-    if (!loadPromise) {
-      loadPromise = importer();
-    }
-    return loadPromise;
-  };
-  const lazyComp = /*#__PURE__*/React.lazy(async () => {
-    const moduleExports = await load();
-    const comp = moduleExports[exportName ?? 'default'];
-    return {
-      default: comp
-    };
-  });
-  lazyComp.preload = load;
-  return lazyComp;
+function useRouterState(opts) {
+  const {
+    state
+  } = useRouter();
+  // return useStore(router.__store, opts?.select as any)
+  return opts?.select ? opts.select(state) : state;
+}
+function useRouter() {
+  const resolvedContext = window.__TSR_ROUTER_CONTEXT__ || routerContext;
+  const value = React.useContext(resolvedContext);
+  warning(value, 'useRouter must be used inside a <RouterProvider> component!');
+  return value;
 }
-//
 
-function useLinkProps(options) {
+function Matches() {
   const {
-    buildLink,
-    state: routerState
+    routesById,
+    state
   } = useRouter();
-  const match = useMatch({
-    strict: false
-  });
-  const {
-    // custom props
-    type,
-    children,
-    target,
-    activeProps = () => ({
-      className: 'active'
-    }),
-    inactiveProps = () => ({}),
-    activeOptions,
-    disabled,
-    hash,
-    search,
-    params,
-    to,
-    state,
-    mask,
-    preload,
-    preloadDelay,
-    replace,
-    // element props
-    style,
-    className,
-    onClick,
-    onFocus,
-    onMouseEnter,
-    onMouseLeave,
-    onTouchStart,
-    ...rest
-  } = options;
-  const linkInfo = buildLink(routerState, {
-    from: options.to ? match.pathname : undefined,
-    ...options
-  });
-  if (linkInfo.type === 'external') {
-    const {
-      href
-    } = linkInfo;
-    return {
-      href
-    };
-  }
-  const {
-    handleClick,
-    handleFocus,
-    handleEnter,
-    handleLeave,
-    handleTouchStart,
-    isActive,
-    next
-  } = linkInfo;
-  const handleReactClick = e => {
-    if (options.startTransition ?? true) {
-      (React.startTransition || (d => d))(() => {
-        handleClick(e);
-      });
-    }
-  };
-  const composeHandlers = handlers => e => {
-    if (e.persist) e.persist();
-    handlers.filter(Boolean).forEach(handler => {
-      if (e.defaultPrevented) return;
-      handler(e);
-    });
-  };
-
-  // Get the active props
-  const resolvedActiveProps = isActive ? functionalUpdate(activeProps, {}) ?? {} : {};
-
-  // Get the inactive props
-  const resolvedInactiveProps = isActive ? {} : functionalUpdate(inactiveProps, {}) ?? {};
-  return {
-    ...resolvedActiveProps,
-    ...resolvedInactiveProps,
-    ...rest,
-    href: disabled ? undefined : next.maskedLocation ? next.maskedLocation.href : next.href,
-    onClick: composeHandlers([onClick, handleReactClick]),
-    onFocus: composeHandlers([onFocus, handleFocus]),
-    onMouseEnter: composeHandlers([onMouseEnter, handleEnter]),
-    onMouseLeave: composeHandlers([onMouseLeave, handleLeave]),
-    onTouchStart: composeHandlers([onTouchStart, handleTouchStart]),
-    target,
-    style: {
-      ...style,
-      ...resolvedActiveProps.style,
-      ...resolvedInactiveProps.style
-    },
-    className: [className, resolvedActiveProps.className, resolvedInactiveProps.className].filter(Boolean).join(' ') || undefined,
-    ...(disabled ? {
-      role: 'link',
-      'aria-disabled': true
-    } : undefined),
-    ['data-status']: isActive ? 'active' : undefined
-  };
-}
-const Link = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const linkProps = useLinkProps(props);
-  return /*#__PURE__*/React.createElement("a", _extends({
-    ref: ref
-  }, linkProps, {
-    children: typeof props.children === 'function' ? props.children({
-      isActive: linkProps['data-status'] === 'active'
-    }) : props.children
-  }));
-});
-function Navigate(props) {
-  const {
-    navigate
-  } = useRouter();
-  const match = useMatch({
-    strict: false
-  });
-  useLayoutEffect(() => {
-    navigate({
-      from: props.to ? match.pathname : undefined,
-      ...props
-    });
-  }, []);
-  return null;
-}
-const matchesContext = /*#__PURE__*/React.createContext(null);
-function useRouter() {
-  const resolvedContext = window.__TSR_ROUTER_CONTEXT__ || routerContext;
-  const value = React.useContext(resolvedContext);
-  warning(value, 'useRouter must be used inside a <RouterProvider> component!');
-  return value;
-}
-function useRouterState(opts) {
-  const {
-    state
-  } = useRouter();
-  // return useStore(router.__store, opts?.select as any)
-  return opts?.select ? opts.select(state) : state;
-}
-function useMatches(opts) {
-  const contextMatches = React.useContext(matchesContext);
-  return useRouterState({
-    select: state => {
-      const matches = state.matches.slice(state.matches.findIndex(d => d.id === contextMatches[0]?.id));
-      return opts?.select ? opts.select(matches) : matches;
-    }
-  });
-}
-function useMatch(opts) {
-  const nearestMatch = React.useContext(matchesContext)[0];
-  const nearestMatchRouteId = nearestMatch?.routeId;
-  const matchRouteId = useRouterState({
-    select: state => {
-      const match = opts?.from ? state.matches.find(d => d.routeId === opts?.from) : state.matches.find(d => d.id === nearestMatch.id);
-      return match.routeId;
-    }
-  });
-  if (opts?.strict ?? true) {
-    invariant(nearestMatchRouteId == matchRouteId, `useMatch("${matchRouteId}") is being called in a component that is meant to render the '${nearestMatchRouteId}' route. Did you mean to 'useMatch("${matchRouteId}", { strict: false })' or 'useRoute("${matchRouteId}")' instead?`);
-  }
-  const matchSelection = useRouterState({
-    select: state => {
-      const match = opts?.from ? state.matches.find(d => d.routeId === opts?.from) : state.matches.find(d => d.id === nearestMatch.id);
-      invariant(match, `Could not find ${opts?.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`);
-      return opts?.select ? opts.select(match) : match;
-    }
-  });
-  return matchSelection;
-}
-function useRouteContext(opts) {
-  return useMatch({
-    ...opts,
-    select: match => opts?.select ? opts.select(match.context) : match.context
-  });
-}
-function useSearch(opts) {
-  return useMatch({
-    ...opts,
-    select: match => {
-      return opts?.select ? opts.select(match.search) : match.search;
-    }
-  });
-}
-function useParams(opts) {
-  return useRouterState({
-    select: state => {
-      const params = last(state.matches)?.params;
-      return opts?.select ? opts.select(params) : params;
-    }
-  });
-}
-function useNavigate(defaultOpts) {
-  const {
-    navigate
-  } = useRouter();
-  const match = useMatch({
-    strict: false
-  });
-  return React.useCallback(opts => {
-    return navigate({
-      from: opts?.to ? match.pathname : undefined,
-      ...defaultOpts,
-      ...opts
-    });
-  }, []);
-}
-function typedNavigate(navigate) {
-  return navigate;
-}
-function useMatchRoute() {
-  const {
-    state,
-    matchRoute
-  } = useRouter();
-  return React.useCallback(opts => {
-    const {
-      pending,
-      caseSensitive,
-      ...rest
-    } = opts;
-    return matchRoute(state, rest, {
-      pending,
-      caseSensitive
-    });
-  }, []);
-}
-function Matches() {
-  const {
-    routesById,
-    state
-  } = useRouter();
-
-  // const matches = useRouterState({
-  //   select: (state) => {
-  //     return state.matches
-  //   },
-  // })
-
   const {
     matches
   } = state;
-  const locationKey = useRouterState({
-    select: d => d.resolvedLocation.state?.key
-  });
+  const locationKey = useRouterState().location.state.key;
   const route = routesById[rootRouteId];
   const errorComponent = React.useCallback(props => {
     return /*#__PURE__*/React.createElement(ErrorComponent, {
@@ -1884,23 +1759,6 @@ function Matches() {
     matches: matches
   }) : null));
 }
-function MatchRoute(props) {
-  const matchRoute = useMatchRoute();
-  const params = matchRoute(props);
-  if (typeof props.children === 'function') {
-    return props.children(params);
-  }
-  return !!params ? props.children : null;
-}
-function Outlet() {
-  const matches = React.useContext(matchesContext).slice(1);
-  if (!matches[0]) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(Match, {
-    matches: matches
-  });
-}
 const defaultPending = () => null;
 function Match({
   matches
@@ -1912,13 +1770,12 @@ function Match({
   const match = matches[0];
   const routeId = match?.routeId;
   const route = routesById[routeId];
-  const locationKey = useRouterState({
-    select: s => s.resolvedLocation.state?.key
-  });
+  const locationKey = useRouterState().location.state?.key;
   const PendingComponent = route.options.pendingComponent ?? options.defaultPendingComponent ?? defaultPending;
   const routeErrorComponent = route.options.errorComponent ?? options.defaultErrorComponent ?? ErrorComponent;
-  const ResolvedSuspenseBoundary = route.options.wrapInSuspense ?? !route.isRoot ? React.Suspense : SafeFragment;
-  const ResolvedCatchBoundary = !!routeErrorComponent ? CatchBoundary : SafeFragment;
+  const ResolvedSuspenseBoundary = route.options.wrapInSuspense ?? React.Suspense;
+  // const ResolvedSuspenseBoundary = SafeFragment
+
   const errorComponent = React.useCallback(props => {
     return /*#__PURE__*/React.createElement(routeErrorComponent, {
       ...props,
@@ -1937,7 +1794,7 @@ function Match({
       useSearch: route.useSearch,
       useParams: route.useParams
     })
-  }, /*#__PURE__*/React.createElement(ResolvedCatchBoundary, {
+  }, /*#__PURE__*/React.createElement(CatchBoundary, {
     resetKey: locationKey,
     errorComponent: errorComponent,
     onCatch: () => {
@@ -1975,169 +1832,87 @@ function MatchInner({
   }
   invariant(false, 'Idle routeMatch status encountered during rendering! You should never see this. File an issue!');
 }
-function SafeFragment(props) {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
-}
-
-// export function useInjectHtml() {
-//   const { } = useRouter()
-
-//   return React.useCallback(
-//     (html: string | (() => Promise<string> | string)) => {
-//       router.injectHtml(html)
-//     },
-//     [],
-//   )
-// }
-
-// export function useDehydrate() {
-//   const { } = useRouter()
-
-//   return React.useCallback(function dehydrate<T>(
-//     key: any,
-//     data: T | (() => Promise<T> | T),
-//   ) {
-//     return router.dehydrateData(key, data)
-//   },
-//   [])
-// }
-
-// export function useHydrate() {
-//   const { } = useRouter()
-
-//   return function hydrate<T = unknown>(key: any) {
-//     return router.hydrateData(key) as T
-//   }
-// }
-
-// This is the messiest thing ever... I'm either seriously tired (likely) or
-// there has to be a better way to reset error boundaries when the
-// router's location key changes.
-
-function CatchBoundary(props) {
-  const errorComponent = props.errorComponent ?? ErrorComponent;
-  return /*#__PURE__*/React.createElement(CatchBoundaryImpl, {
-    resetKey: props.resetKey,
-    onCatch: props.onCatch,
-    children: ({
-      error
-    }) => {
-      if (error) {
-        return /*#__PURE__*/React.createElement(errorComponent, {
-          error
-        });
-      }
-      return props.children;
-    }
+function Outlet() {
+  const matches = React.useContext(matchesContext).slice(1);
+  if (!matches[0]) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Match, {
+    matches: matches
   });
 }
-class CatchBoundaryImpl extends React.Component {
-  state = {
-    error: null
-  };
-  static getDerivedStateFromError(error) {
-    return {
-      error
-    };
-  }
-  componentDidUpdate(prevProps, prevState) {
-    if (prevState.error && prevProps.resetKey !== this.props.resetKey) {
-      this.setState({
-        error: null
-      });
-    }
-  }
-  componentDidCatch(error) {
-    this.props.onCatch?.(error);
-  }
-  render() {
-    return this.props.children(this.state);
+function useMatchRoute() {
+  const {
+    matchRoute
+  } = useRouter();
+  return React.useCallback(opts => {
+    const {
+      pending,
+      caseSensitive,
+      ...rest
+    } = opts;
+    return matchRoute(rest, {
+      pending,
+      caseSensitive
+    });
+  }, []);
+}
+function MatchRoute(props) {
+  const matchRoute = useMatchRoute();
+  const params = matchRoute(props);
+  if (typeof props.children === 'function') {
+    return props.children(params);
   }
+  return !!params ? props.children : null;
 }
-function ErrorComponent({
-  error
-}) {
-  const [show, setShow] = React.useState(process.env.NODE_ENV !== 'production');
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      padding: '.5rem',
-      maxWidth: '100%'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: '.5rem'
-    }
-  }, /*#__PURE__*/React.createElement("strong", {
-    style: {
-      fontSize: '1rem'
-    }
-  }, "Something went wrong!"), /*#__PURE__*/React.createElement("button", {
-    style: {
-      appearance: 'none',
-      fontSize: '.6em',
-      border: '1px solid currentColor',
-      padding: '.1rem .2rem',
-      fontWeight: 'bold',
-      borderRadius: '.25rem'
-    },
-    onClick: () => setShow(d => !d)
-  }, show ? 'Hide Error' : 'Show Error')), /*#__PURE__*/React.createElement("div", {
-    style: {
-      height: '.25rem'
+function useMatch(opts) {
+  const nearestMatch = React.useContext(matchesContext)[0];
+  const nearestMatchRouteId = nearestMatch?.routeId;
+  const matchRouteId = useRouterState({
+    select: state => {
+      const match = opts?.from ? state.matches.find(d => d.routeId === opts?.from) : state.matches.find(d => d.id === nearestMatch.id);
+      return match.routeId;
     }
-  }), show ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("pre", {
-    style: {
-      fontSize: '.7em',
-      border: '1px solid red',
-      borderRadius: '.25rem',
-      padding: '.3rem',
-      color: 'red',
-      overflow: 'auto'
+  });
+  if (opts?.strict ?? true) {
+    invariant(nearestMatchRouteId == matchRouteId, `useMatch("${matchRouteId}") is being called in a component that is meant to render the '${nearestMatchRouteId}' route. Did you mean to 'useMatch("${matchRouteId}", { strict: false })' or 'useRoute("${matchRouteId}")' instead?`);
+  }
+  const matchSelection = useRouterState({
+    select: state => {
+      const match = opts?.from ? state.matches.find(d => d.routeId === opts?.from) : state.matches.find(d => d.id === nearestMatch.id);
+      invariant(match, `Could not find ${opts?.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`);
+      return opts?.select ? opts.select(match) : match;
     }
-  }, error.message ? /*#__PURE__*/React.createElement("code", null, error.message) : null)) : null);
+  });
+  return matchSelection;
 }
-function useBlocker(message, condition = true) {
-  const {
-    history
-  } = useRouter();
-  React.useEffect(() => {
-    if (!condition) return;
-    let unblock = history.block((retry, cancel) => {
-      if (window.confirm(message)) {
-        unblock();
-        retry();
-      }
-    });
-    return unblock;
+const matchesContext = /*#__PURE__*/React.createContext(null);
+function useMatches(opts) {
+  const contextMatches = React.useContext(matchesContext);
+  return useRouterState({
+    select: state => {
+      const matches = state.matches.slice(state.matches.findIndex(d => d.id === contextMatches[0]?.id));
+      return opts?.select ? opts.select(matches) : matches;
+    }
   });
 }
-function Block({
-  message,
-  condition,
-  children
-}) {
-  useBlocker(message, condition);
-  return children ?? null;
+
+function useParams(opts) {
+  return useRouterState({
+    select: state => {
+      const params = last(state.matches)?.params;
+      return opts?.select ? opts.select(params) : params;
+    }
+  });
 }
-function shallow(objA, objB) {
-  if (Object.is(objA, objB)) {
-    return true;
-  }
-  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
-    return false;
-  }
-  const keysA = Object.keys(objA);
-  if (keysA.length !== Object.keys(objB).length) {
-    return false;
-  }
-  for (let i = 0; i < keysA.length; i++) {
-    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
-      return false;
+
+function useSearch(opts) {
+  return useMatch({
+    ...opts,
+    select: match => {
+      return opts?.select ? opts.select(match.search) : match.search;
     }
-  }
-  return true;
+  });
 }
 
 const rootRouteId = '__root__';
@@ -2241,6 +2016,8 @@ function createRouteMask(opts) {
   return opts;
 }
 
+//
+
 class FileRoute {
   constructor(path) {
     this.path = path;
@@ -2252,5 +2029,205 @@ class FileRoute {
   };
 }
 
-export { Block, CatchBoundary, CatchBoundaryImpl, ErrorComponent, FileRoute, Link, MatchRoute, Matches, Navigate, Outlet, PathParamError, RootRoute, Route, Router, RouterProvider, SearchParamError, cleanPath, componentTypes, createRouteMask, decode, defaultParseSearch, defaultStringifySearch, encode, functionalUpdate, getInitialRouterState, getRouteMatch, interpolatePath, isPlainObject, isRedirect, isServer, joinPaths, last, lazyFn, lazyRouteComponent, matchByPath, matchPathname, matchesContext, parsePathname, parseSearchWith, partialDeepEqual, pick, redirect, replaceEqualDeep, resolvePath, rootRouteId, rootRouteWithContext, routerContext, shallow, stringifySearchWith, trimPath, trimPathLeft, trimPathRight, typedNavigate, useBlocker, useLinkProps, useMatch, useMatchRoute, useMatches, useNavigate, useParams, useRouteContext, useRouter, useRouterState, useSearch, useStableCallback };
+function lazyRouteComponent(importer, exportName) {
+  let loadPromise;
+  const load = () => {
+    if (!loadPromise) {
+      loadPromise = importer();
+    }
+    return loadPromise;
+  };
+  const lazyComp = /*#__PURE__*/React.lazy(async () => {
+    const moduleExports = await load();
+    const comp = moduleExports[exportName ?? 'default'];
+    return {
+      default: comp
+    };
+  });
+  lazyComp.preload = load;
+  return lazyComp;
+}
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function useLinkProps(options) {
+  const {
+    buildLink
+  } = useRouter();
+  const match = useMatch({
+    strict: false
+  });
+  const {
+    // custom props
+    type,
+    children,
+    target,
+    activeProps = () => ({
+      className: 'active'
+    }),
+    inactiveProps = () => ({}),
+    activeOptions,
+    disabled,
+    hash,
+    search,
+    params,
+    to,
+    state,
+    mask,
+    preload,
+    preloadDelay,
+    replace,
+    startTransition,
+    // element props
+    style,
+    className,
+    onClick,
+    onFocus,
+    onMouseEnter,
+    onMouseLeave,
+    onTouchStart,
+    ...rest
+  } = options;
+  const linkInfo = buildLink({
+    from: options.to ? match.pathname : undefined,
+    ...options
+  });
+  if (linkInfo.type === 'external') {
+    const {
+      href
+    } = linkInfo;
+    return {
+      href
+    };
+  }
+  const {
+    handleClick,
+    handleFocus,
+    handleEnter,
+    handleLeave,
+    handleTouchStart,
+    isActive,
+    next
+  } = linkInfo;
+  const composeHandlers = handlers => e => {
+    if (e.persist) e.persist();
+    handlers.filter(Boolean).forEach(handler => {
+      if (e.defaultPrevented) return;
+      handler(e);
+    });
+  };
+
+  // Get the active props
+  const resolvedActiveProps = isActive ? functionalUpdate(activeProps, {}) ?? {} : {};
+
+  // Get the inactive props
+  const resolvedInactiveProps = isActive ? {} : functionalUpdate(inactiveProps, {}) ?? {};
+  return {
+    ...resolvedActiveProps,
+    ...resolvedInactiveProps,
+    ...rest,
+    href: disabled ? undefined : next.maskedLocation ? next.maskedLocation.href : next.href,
+    onClick: composeHandlers([onClick, handleClick]),
+    onFocus: composeHandlers([onFocus, handleFocus]),
+    onMouseEnter: composeHandlers([onMouseEnter, handleEnter]),
+    onMouseLeave: composeHandlers([onMouseLeave, handleLeave]),
+    onTouchStart: composeHandlers([onTouchStart, handleTouchStart]),
+    target,
+    style: {
+      ...style,
+      ...resolvedActiveProps.style,
+      ...resolvedInactiveProps.style
+    },
+    className: [className, resolvedActiveProps.className, resolvedInactiveProps.className].filter(Boolean).join(' ') || undefined,
+    ...(disabled ? {
+      role: 'link',
+      'aria-disabled': true
+    } : undefined),
+    ['data-status']: isActive ? 'active' : undefined
+  };
+}
+const Link = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const linkProps = useLinkProps(props);
+  return /*#__PURE__*/React.createElement("a", _extends({
+    ref: ref
+  }, linkProps, {
+    children: typeof props.children === 'function' ? props.children({
+      isActive: linkProps['data-status'] === 'active'
+    }) : props.children
+  }));
+});
+
+function useBlocker(message, condition = true) {
+  const {
+    history
+  } = useRouter();
+  React.useEffect(() => {
+    if (!condition) return;
+    let unblock = history.block((retry, cancel) => {
+      if (window.confirm(message)) {
+        unblock();
+        retry();
+      }
+    });
+    return unblock;
+  });
+}
+function Block({
+  message,
+  condition,
+  children
+}) {
+  useBlocker(message, condition);
+  return children ?? null;
+}
+
+function useNavigate(defaultOpts) {
+  const {
+    navigate
+  } = useRouter();
+  const match = useMatch({
+    strict: false
+  });
+  return React.useCallback(opts => {
+    return navigate({
+      from: opts?.to ? match.pathname : undefined,
+      ...defaultOpts,
+      ...opts
+    });
+  }, []);
+}
+function typedNavigate(navigate) {
+  return navigate;
+} //
+
+function Navigate(props) {
+  const {
+    navigate
+  } = useRouter();
+  const match = useMatch({
+    strict: false
+  });
+  useLayoutEffect(() => {
+    navigate({
+      from: props.to ? match.pathname : undefined,
+      ...props
+    });
+  }, []);
+  return null;
+}
+
+export { Block, CatchBoundary, CatchBoundaryImpl, ErrorComponent, FileRoute, Link, Match, MatchRoute, Matches, Navigate, Outlet, PathParamError, RootRoute, Route, Router, RouterProvider, SearchParamError, cleanPath, componentTypes, createRouteMask, decode, defaultParseSearch, defaultStringifySearch, encode, functionalUpdate, getInitialRouterState, getRouteMatch, interpolatePath, isPlainObject, isRedirect, isServer, joinPaths, last, lazyFn, lazyRouteComponent, matchByPath, matchPathname, matchesContext, parsePathname, parseSearchWith, partialDeepEqual, pick, redirect, replaceEqualDeep, resolvePath, rootRouteId, rootRouteWithContext, routerContext, shallow, stringifySearchWith, trimPath, trimPathLeft, trimPathRight, typedNavigate, useBlocker, useLayoutEffect, useLinkProps, useMatch, useMatchRoute, useMatches, useNavigate, useParams, useRouteContext, useRouter, useRouterState, useSearch, useStableCallback };
 //# sourceMappingURL=index.js.map