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

package/build/umd/index.development.js

@@ -341,6 +341,91 @@
     }
   }
 
+  function CatchBoundary(props) {
+    const errorComponent = props.errorComponent ?? ErrorComponent;
+    return /*#__PURE__*/React__namespace.createElement(CatchBoundaryImpl, {
+      resetKey: props.resetKey,
+      onCatch: props.onCatch,
+      children: ({
+        error
+      }) => {
+        if (error) {
+          return /*#__PURE__*/React__namespace.createElement(errorComponent, {
+            error
+          });
+        }
+        return props.children;
+      }
+    });
+  }
+  class CatchBoundaryImpl extends React__namespace.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__namespace.useState("development" !== 'production');
+    return /*#__PURE__*/React__namespace.createElement("div", {
+      style: {
+        padding: '.5rem',
+        maxWidth: '100%'
+      }
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '.5rem'
+      }
+    }, /*#__PURE__*/React__namespace.createElement("strong", {
+      style: {
+        fontSize: '1rem'
+      }
+    }, "Something went wrong!"), /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
+      style: {
+        height: '.25rem'
+      }
+    }), show ? /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("pre", {
+      style: {
+        fontSize: '.7em',
+        border: '1px solid red',
+        borderRadius: '.25rem',
+        padding: '.3rem',
+        color: 'red',
+        overflow: 'auto'
+      }
+    }, error.message ? /*#__PURE__*/React__namespace.createElement("code", null, error.message) : null)) : null);
+  }
+
   // export type Expand<T> = T
 
   // type Compute<T> = { [K in keyof T]: T[K] } | never
@@ -481,7 +566,7 @@
       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;
   }
@@ -491,6 +576,31 @@
     const ref = React__namespace.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__namespace.useLayoutEffect : React__namespace.useEffect;
 
   function joinPaths(paths) {
     return cleanPath(paths.filter(Boolean).join('/'));
@@ -676,6 +786,16 @@
     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.
@@ -724,21 +844,6 @@
     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) {
@@ -984,26 +1089,20 @@
     };
   }
 
-  // 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__namespace.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: [],
@@ -1064,7 +1163,20 @@
       }
       return location;
     });
-    const [state, setState] = React__namespace.useState(() => getInitialRouterState(parseLocation()));
+    const [preState, setState] = React__namespace.useState(() => getInitialRouterState(parseLocation()));
+    const [isTransitioning, startReactTransition] = React__namespace.useTransition();
+    const state = React__namespace.useMemo(() => ({
+      ...preState,
+      status: isTransitioning ? 'pending' : 'idle'
+    }), [preState, isTransitioning]);
+    React__namespace.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));
@@ -1283,7 +1395,7 @@
         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;
@@ -1376,7 +1488,10 @@
       }
       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;
 
@@ -1409,7 +1524,14 @@
             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;
@@ -1417,11 +1539,13 @@
     const buildAndCommitLocation = useStableCallback(({
       replace,
       resetScroll,
+      startTransition,
       ...rest
     } = {}) => {
       const location = buildLocation(rest);
       return commitLocation({
         ...location,
+        startTransition,
         replace,
         resetScroll
       });
@@ -1503,7 +1627,8 @@
               navigate: opts => navigate({
                 ...opts,
                 from: match.pathname
-              })
+              }),
+              buildLocation
             })) ?? {};
             const context = {
               ...parentContext,
@@ -1564,7 +1689,7 @@
                   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,
@@ -1618,7 +1743,7 @@
     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;
 
@@ -1631,19 +1756,14 @@
           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 {
@@ -1674,11 +1794,11 @@
           //   state.pendingMatches.includes(id),
           // )
 
-          setState(s => ({
-            ...s,
-            status: 'idle',
-            resolvedLocation: s.location
-          }));
+          // setState((s) => ({
+          //   ...s,
+          //   status: 'idle',
+          //   resolvedLocation: s.location,
+          // }))
 
           // TODO:
           // ;(
@@ -1723,7 +1843,7 @@
       });
       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
 
@@ -1738,7 +1858,8 @@
         disabled,
         target,
         replace,
-        resetScroll
+        resetScroll,
+        startTransition
       } = dest;
       try {
         new URL(`${to}`);
@@ -1773,7 +1894,8 @@
           commitLocation({
             ...next,
             replace,
-            resetScroll
+            resetScroll,
+            startTransition
           });
         }
       };
@@ -1831,15 +1953,17 @@
     React__namespace.useLayoutEffect(() => {
       const unsub = history.subscribe(() => {
         latestLocationRef.current = parseLocation(latestLocationRef.current);
-        React__namespace.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,
@@ -1860,14 +1984,15 @@
     const initialLoad = React__namespace.useRef(true);
     if (initialLoad.current) {
       initialLoad.current = false;
-      try {
-        load();
-      } catch (err) {
-        console.error(err);
-      }
+      startReactTransition(() => {
+        try {
+          load();
+        } catch (err) {
+          console.error(err);
+        }
+      });
     }
-    React__namespace.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
@@ -1877,6 +2002,9 @@
         return false;
       }
       const baseLocation = opts?.pending ? latestLocationRef.current : state.resolvedLocation;
+
+      // const baseLocation = state.resolvedLocation
+
       if (!baseLocation) {
         return false;
       }
@@ -1887,7 +2015,7 @@
       if (!match) {
         return false;
       }
-      if (opts?.includeSearch ?? true) {
+      if (match && (opts?.includeSearch ?? true)) {
         return partialDeepEqual(baseLocation.search, next.search) ? match : false;
       }
       return match;
@@ -1901,292 +2029,39 @@
       routesById,
       options,
       history,
-      load
+      load,
+      buildLocation
     };
     return /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
       value: routerContextValue
     }, /*#__PURE__*/React__namespace.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__namespace.useLayoutEffect : React__namespace.useEffect;
-
-  //
-
-  function lazyRouteComponent(importer, exportName) {
-    let loadPromise;
-    const load = () => {
-      if (!loadPromise) {
-        loadPromise = importer();
-      }
-      return loadPromise;
-    };
-    const lazyComp = /*#__PURE__*/React__namespace.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__namespace.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__namespace.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__namespace.forwardRef((props, ref) => {
-    const linkProps = useLinkProps(props);
-    return /*#__PURE__*/React__namespace.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__namespace.createContext(null);
-  function useRouter() {
-    const resolvedContext = window.__TSR_ROUTER_CONTEXT__ || routerContext;
-    const value = React__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.useCallback(props => {
       return /*#__PURE__*/React__namespace.createElement(ErrorComponent, {
@@ -2209,23 +2084,6 @@
       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__namespace.useContext(matchesContext).slice(1);
-    if (!matches[0]) {
-      return null;
-    }
-    return /*#__PURE__*/React__namespace.createElement(Match, {
-      matches: matches
-    });
-  }
   const defaultPending = () => null;
   function Match({
     matches
@@ -2237,13 +2095,12 @@
     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__namespace.Suspense : SafeFragment;
-    const ResolvedCatchBoundary = !!routeErrorComponent ? CatchBoundary : SafeFragment;
+    const ResolvedSuspenseBoundary = route.options.wrapInSuspense ?? React__namespace.Suspense;
+    // const ResolvedSuspenseBoundary = SafeFragment
+
     const errorComponent = React__namespace.useCallback(props => {
       return /*#__PURE__*/React__namespace.createElement(routeErrorComponent, {
         ...props,
@@ -2262,7 +2119,7 @@
         useSearch: route.useSearch,
         useParams: route.useParams
       })
-    }, /*#__PURE__*/React__namespace.createElement(ResolvedCatchBoundary, {
+    }, /*#__PURE__*/React__namespace.createElement(CatchBoundary, {
       resetKey: locationKey,
       errorComponent: errorComponent,
       onCatch: () => {
@@ -2300,169 +2157,87 @@
     }
     invariant(false, 'Idle routeMatch status encountered during rendering! You should never see this. File an issue!');
   }
-  function SafeFragment(props) {
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.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__namespace.createElement(CatchBoundaryImpl, {
-      resetKey: props.resetKey,
-      onCatch: props.onCatch,
-      children: ({
-        error
-      }) => {
-        if (error) {
-          return /*#__PURE__*/React__namespace.createElement(errorComponent, {
-            error
-          });
-        }
-        return props.children;
-      }
+  function Outlet() {
+    const matches = React__namespace.useContext(matchesContext).slice(1);
+    if (!matches[0]) {
+      return null;
+    }
+    return /*#__PURE__*/React__namespace.createElement(Match, {
+      matches: matches
     });
   }
-  class CatchBoundaryImpl extends React__namespace.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__namespace.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__namespace.useState("development" !== 'production');
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      style: {
-        padding: '.5rem',
-        maxWidth: '100%'
-      }
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: '.5rem'
-      }
-    }, /*#__PURE__*/React__namespace.createElement("strong", {
-      style: {
-        fontSize: '1rem'
-      }
-    }, "Something went wrong!"), /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
-      style: {
-        height: '.25rem'
+  function useMatch(opts) {
+    const nearestMatch = React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.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__namespace.createElement("code", null, error.message) : null)) : null);
+    });
+    return matchSelection;
   }
-  function useBlocker(message, condition = true) {
-    const {
-      history
-    } = useRouter();
-    React__namespace.useEffect(() => {
-      if (!condition) return;
-      let unblock = history.block((retry, cancel) => {
-        if (window.confirm(message)) {
-          unblock();
-          retry();
-        }
-      });
-      return unblock;
+  const matchesContext = /*#__PURE__*/React__namespace.createContext(null);
+  function useMatches(opts) {
+    const contextMatches = React__namespace.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__';
@@ -2566,6 +2341,8 @@
     return opts;
   }
 
+  //
+
   class FileRoute {
     constructor(path) {
       this.path = path;
@@ -2577,12 +2354,213 @@
     };
   }
 
+  function lazyRouteComponent(importer, exportName) {
+    let loadPromise;
+    const load = () => {
+      if (!loadPromise) {
+        loadPromise = importer();
+      }
+      return loadPromise;
+    };
+    const lazyComp = /*#__PURE__*/React__namespace.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__namespace.forwardRef((props, ref) => {
+    const linkProps = useLinkProps(props);
+    return /*#__PURE__*/React__namespace.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__namespace.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__namespace.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;
+  }
+
   exports.Block = Block;
   exports.CatchBoundary = CatchBoundary;
   exports.CatchBoundaryImpl = CatchBoundaryImpl;
   exports.ErrorComponent = ErrorComponent;
   exports.FileRoute = FileRoute;
   exports.Link = Link;
+  exports.Match = Match;
   exports.MatchRoute = MatchRoute;
   exports.Matches = Matches;
   exports.Navigate = Navigate;
@@ -2635,6 +2613,7 @@
   exports.trimPathRight = trimPathRight;
   exports.typedNavigate = typedNavigate;
   exports.useBlocker = useBlocker;
+  exports.useLayoutEffect = useLayoutEffect;
   exports.useLinkProps = useLinkProps;
   exports.useMatch = useMatch;
   exports.useMatchRoute = useMatchRoute;