@tanstack/react-router 1.5.4 → 1.5.5

package/build/esm/index.js

@@ -18,6 +18,69 @@ import * as React from 'react';
 import { useStore } from '@tanstack/react-store';
 import { Store } from '@tanstack/store';
 
+let routerContext = /*#__PURE__*/React.createContext(null);
+if (typeof document !== 'undefined') {
+  if (window.__TSR_ROUTER_CONTEXT__) {
+    routerContext = window.__TSR_ROUTER_CONTEXT__;
+  } else {
+    window.__TSR_ROUTER_CONTEXT__ = routerContext;
+  }
+}
+
+function useRouter(opts) {
+  const resolvedContext = typeof document !== 'undefined' ? window.__TSR_ROUTER_CONTEXT__ || routerContext : routerContext;
+  const value = React.useContext(resolvedContext);
+  warning(!((opts?.warn ?? true) && !value), 'useRouter must be used inside a <RouterProvider> component!');
+  return value;
+}
+
+function defer(_promise) {
+  const promise = _promise;
+  if (!promise.__deferredState) {
+    promise.__deferredState = {
+      uid: Math.random().toString(36).slice(2),
+      status: 'pending'
+    };
+    const state = promise.__deferredState;
+    promise.then(data => {
+      state.status = 'success';
+      state.data = data;
+    }).catch(error => {
+      state.status = 'error';
+      state.error = error;
+    });
+  }
+  return promise;
+}
+function isDehydratedDeferred(obj) {
+  return typeof obj === 'object' && obj !== null && !(obj instanceof Promise) && !obj.then && '__deferredState' in obj;
+}
+
+function useAwaited({
+  promise
+}) {
+  const router = useRouter();
+  let state = promise.__deferredState;
+  const key = `__TSR__DEFERRED__${state.uid}`;
+  if (isDehydratedDeferred(promise)) {
+    state = router.hydrateData(key);
+    promise = Promise.resolve(state.data);
+    promise.__deferredState = state;
+  }
+  if (state.status === 'pending') {
+    throw promise;
+  }
+  if (state.status === 'error') {
+    throw state.error;
+  }
+  router.dehydrateData(key, state);
+  return [state.data];
+}
+function Await(props) {
+  const awaited = useAwaited(props);
+  return props.children(...awaited);
+}
+
 function CatchBoundary(props) {
   const errorComponent = props.errorComponent ?? ErrorComponent;
   return /*#__PURE__*/React.createElement(CatchBoundaryImpl, {
@@ -109,6 +172,13 @@ function ErrorComponent({
   }, error.message ? /*#__PURE__*/React.createElement("code", null, error.message) : null)) : null);
 }
 
+function useRouterState(opts) {
+  const contextRouter = useRouter({
+    warn: opts?.router === undefined
+  });
+  return useStore((opts?.router || contextRouter).__store, opts?.select);
+}
+
 // from https://stackoverflow.com/a/76458160
 
 // export type Expand<T> = T
@@ -301,12 +371,6 @@ function shallow(objA, objB) {
   }
   return true;
 }
-function useRouteContext(opts) {
-  return useMatch({
-    ...opts,
-    select: match => opts?.select ? opts.select(match.context) : match.context
-  });
-}
 const useLayoutEffect$1 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 function escapeJSON(jsonString) {
   return jsonString.replace(/\\/g, '\\\\') // Escape backslashes
@@ -501,188 +565,6 @@ function useLoaderData(opts) {
   });
 }
 
-const useTransition = React.useTransition || (() => [false, cb => {
-  cb();
-}]);
-let routerContext = /*#__PURE__*/React.createContext(null);
-if (typeof document !== 'undefined') {
-  if (window.__TSR_ROUTER_CONTEXT__) {
-    routerContext = window.__TSR_ROUTER_CONTEXT__;
-  } else {
-    window.__TSR_ROUTER_CONTEXT__ = routerContext;
-  }
-}
-function RouterProvider({
-  router,
-  ...rest
-}) {
-  // Allow the router to update options on the router instance
-  router.update({
-    ...router.options,
-    ...rest,
-    context: {
-      ...router.options.context,
-      ...rest?.context
-    }
-  });
-  const matches = router.options.InnerWrap ? /*#__PURE__*/React.createElement(router.options.InnerWrap, null, /*#__PURE__*/React.createElement(Matches, null)) : /*#__PURE__*/React.createElement(Matches, null);
-  const provider = /*#__PURE__*/React.createElement(routerContext.Provider, {
-    value: router
-  }, matches, /*#__PURE__*/React.createElement(Transitioner, null));
-  if (router.options.Wrap) {
-    return /*#__PURE__*/React.createElement(router.options.Wrap, null, provider);
-  }
-  return provider;
-}
-function Transitioner() {
-  const mountLoadCount = React.useRef(0);
-  const router = useRouter();
-  const routerState = useRouterState({
-    select: s => pick(s, ['isLoading', 'location', 'resolvedLocation', 'isTransitioning'])
-  });
-  const [isTransitioning, startReactTransition] = useTransition();
-  router.startReactTransition = startReactTransition;
-  React.useEffect(() => {
-    if (isTransitioning) {
-      router.__store.setState(s => ({
-        ...s,
-        isTransitioning
-      }));
-    }
-  }, [isTransitioning]);
-  const tryLoad = () => {
-    const apply = cb => {
-      if (!routerState.isTransitioning) {
-        startReactTransition(() => cb());
-      } else {
-        cb();
-      }
-    };
-    apply(() => {
-      try {
-        router.load();
-      } catch (err) {
-        console.error(err);
-      }
-    });
-  };
-  useLayoutEffect$1(() => {
-    const unsub = router.history.subscribe(() => {
-      router.latestLocation = router.parseLocation(router.latestLocation);
-      if (routerState.location !== router.latestLocation) {
-        tryLoad();
-      }
-    });
-    const nextLocation = router.buildLocation({
-      search: true,
-      params: true,
-      hash: true,
-      state: true
-    });
-    if (routerState.location.href !== nextLocation.href) {
-      router.commitLocation({
-        ...nextLocation,
-        replace: true
-      });
-    }
-    return () => {
-      unsub();
-    };
-  }, [router.history]);
-  useLayoutEffect$1(() => {
-    if (React.useTransition ? routerState.isTransitioning && !isTransitioning : !routerState.isLoading && routerState.resolvedLocation !== routerState.location) {
-      router.emit({
-        type: 'onResolved',
-        fromLocation: routerState.resolvedLocation,
-        toLocation: routerState.location,
-        pathChanged: routerState.location.href !== routerState.resolvedLocation?.href
-      });
-      if (document.querySelector) {
-        if (routerState.location.hash !== '') {
-          const el = document.getElementById(routerState.location.hash);
-          if (el) {
-            el.scrollIntoView();
-          }
-        }
-      }
-      router.__store.setState(s => ({
-        ...s,
-        isTransitioning: false,
-        resolvedLocation: s.location
-      }));
-    }
-  }, [routerState.isTransitioning, isTransitioning, routerState.isLoading, routerState.resolvedLocation, routerState.location]);
-  useLayoutEffect$1(() => {
-    if (!window.__TSR_DEHYDRATED__ && !mountLoadCount.current) {
-      mountLoadCount.current++;
-      tryLoad();
-    }
-  }, []);
-  return null;
-}
-function getRouteMatch(state, id) {
-  return [...state.cachedMatches, ...(state.pendingMatches ?? []), ...state.matches].find(d => d.id === id);
-}
-function useRouterState(opts) {
-  const contextRouter = useRouter({
-    warn: opts?.router === undefined
-  });
-  return useStore((opts?.router || contextRouter).__store, opts?.select);
-}
-function useRouter(opts) {
-  const resolvedContext = typeof document !== 'undefined' ? window.__TSR_ROUTER_CONTEXT__ || routerContext : routerContext;
-  const value = React.useContext(resolvedContext);
-  warning(!((opts?.warn ?? true) && !value), 'useRouter must be used inside a <RouterProvider> component!');
-  return value;
-}
-
-function defer(_promise) {
-  const promise = _promise;
-  if (!promise.__deferredState) {
-    promise.__deferredState = {
-      uid: Math.random().toString(36).slice(2),
-      status: 'pending'
-    };
-    const state = promise.__deferredState;
-    promise.then(data => {
-      state.status = 'success';
-      state.data = data;
-    }).catch(error => {
-      state.status = 'error';
-      state.error = error;
-    });
-  }
-  return promise;
-}
-function isDehydratedDeferred(obj) {
-  return typeof obj === 'object' && obj !== null && !(obj instanceof Promise) && !obj.then && '__deferredState' in obj;
-}
-
-function useAwaited({
-  promise
-}) {
-  const router = useRouter();
-  let state = promise.__deferredState;
-  const key = `__TSR__DEFERRED__${state.uid}`;
-  if (isDehydratedDeferred(promise)) {
-    state = router.hydrateData(key);
-    promise = Promise.resolve(state.data);
-    promise.__deferredState = state;
-  }
-  if (state.status === 'pending') {
-    throw promise;
-  }
-  if (state.status === 'error') {
-    throw state.error;
-  }
-  router.dehydrateData(key, state);
-  return [state.data];
-}
-function Await(props) {
-  const awaited = useAwaited(props);
-  return props.children(...awaited);
-}
-
 function joinPaths(paths) {
   return cleanPath(paths.filter(Boolean).join('/'));
 }
@@ -1512,6 +1394,121 @@ function stringifySearchWith(stringify, parser) {
   };
 }
 
+const useTransition = React.useTransition || (() => [false, cb => {
+  cb();
+}]);
+function RouterProvider({
+  router,
+  ...rest
+}) {
+  // Allow the router to update options on the router instance
+  router.update({
+    ...router.options,
+    ...rest,
+    context: {
+      ...router.options.context,
+      ...rest?.context
+    }
+  });
+  const matches = router.options.InnerWrap ? /*#__PURE__*/React.createElement(router.options.InnerWrap, null, /*#__PURE__*/React.createElement(Matches, null)) : /*#__PURE__*/React.createElement(Matches, null);
+  const provider = /*#__PURE__*/React.createElement(routerContext.Provider, {
+    value: router
+  }, matches, /*#__PURE__*/React.createElement(Transitioner, null));
+  if (router.options.Wrap) {
+    return /*#__PURE__*/React.createElement(router.options.Wrap, null, provider);
+  }
+  return provider;
+}
+function Transitioner() {
+  const mountLoadCount = React.useRef(0);
+  const router = useRouter();
+  const routerState = useRouterState({
+    select: s => pick(s, ['isLoading', 'location', 'resolvedLocation', 'isTransitioning'])
+  });
+  const [isTransitioning, startReactTransition] = useTransition();
+  router.startReactTransition = startReactTransition;
+  React.useEffect(() => {
+    if (isTransitioning) {
+      router.__store.setState(s => ({
+        ...s,
+        isTransitioning
+      }));
+    }
+  }, [isTransitioning]);
+  const tryLoad = () => {
+    const apply = cb => {
+      if (!routerState.isTransitioning) {
+        startReactTransition(() => cb());
+      } else {
+        cb();
+      }
+    };
+    apply(() => {
+      try {
+        router.load();
+      } catch (err) {
+        console.error(err);
+      }
+    });
+  };
+  useLayoutEffect$1(() => {
+    const unsub = router.history.subscribe(() => {
+      router.latestLocation = router.parseLocation(router.latestLocation);
+      if (routerState.location !== router.latestLocation) {
+        tryLoad();
+      }
+    });
+    const nextLocation = router.buildLocation({
+      search: true,
+      params: true,
+      hash: true,
+      state: true
+    });
+    if (routerState.location.href !== nextLocation.href) {
+      router.commitLocation({
+        ...nextLocation,
+        replace: true
+      });
+    }
+    return () => {
+      unsub();
+    };
+  }, [router.history]);
+  useLayoutEffect$1(() => {
+    if (React.useTransition ? routerState.isTransitioning && !isTransitioning : !routerState.isLoading && routerState.resolvedLocation !== routerState.location) {
+      router.emit({
+        type: 'onResolved',
+        fromLocation: routerState.resolvedLocation,
+        toLocation: routerState.location,
+        pathChanged: routerState.location.href !== routerState.resolvedLocation?.href
+      });
+      if (document.querySelector) {
+        if (routerState.location.hash !== '') {
+          const el = document.getElementById(routerState.location.hash);
+          if (el) {
+            el.scrollIntoView();
+          }
+        }
+      }
+      router.__store.setState(s => ({
+        ...s,
+        isTransitioning: false,
+        resolvedLocation: s.location
+      }));
+    }
+  }, [routerState.isTransitioning, isTransitioning, routerState.isLoading, routerState.resolvedLocation, routerState.location]);
+  useLayoutEffect$1(() => {
+    if (!window.__TSR_DEHYDRATED__ && !mountLoadCount.current) {
+      mountLoadCount.current++;
+      tryLoad();
+    }
+  }, []);
+  return null;
+}
+function getRouteMatch(state, id) {
+  return [...state.cachedMatches, ...(state.pendingMatches ?? []), ...state.matches].find(d => d.id === id);
+}
+
 // import warning from 'tiny-warning'
 
 //
@@ -2807,5 +2804,12 @@ function Navigate(props) {
   return null;
 }
 
+function useRouteContext(opts) {
+  return useMatch({
+    ...opts,
+    select: match => opts?.select ? opts.select(match.context) : match.context
+  });
+}
+
 export { Await, Block, CatchBoundary, CatchBoundaryImpl, ErrorComponent, FileRoute, FileRouteLoader, Link, Match, MatchRoute, Matches, Navigate, NotFoundRoute, Outlet, PathParamError, RootRoute, Route, RouteApi, Router, RouterProvider, ScrollRestoration, SearchParamError, cleanPath, componentTypes, createRouteMask, decode, deepEqual, defaultParseSearch, defaultStringifySearch, defer, encode, escapeJSON, functionalUpdate, getInitialRouterState, getRenderedMatches, getRouteMatch, interpolatePath, isDehydratedDeferred, isPlainArray, isPlainObject, isRedirect, isServer, joinPaths, last, lazyFn, lazyRouteComponent, matchByPath, matchContext, matchPathname, parsePathname, parseSearchWith, pick, redirect, removeBasepath, replaceEqualDeep, resolvePath, rootRouteId, rootRouteWithContext, routerContext, shallow, stringifySearchWith, trimPath, trimPathLeft, trimPathRight, useAwaited, useBlocker, useElementScrollRestoration, useLayoutEffect$1 as useLayoutEffect, useLinkProps, useLoaderData, useLoaderDeps, useMatch, useMatchRoute, useMatches, useNavigate, useParams, useParentMatches, useRouteContext, useRouter, useRouterState, useScrollRestoration, useSearch, useStableCallback };
 //# sourceMappingURL=index.js.map