@tanstack/react-router 0.0.1-beta.167 → 0.0.1-beta.169

package/build/cjs/index.js

@@ -12,649 +12,53 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
-var React = require('react');
 var reactStore = require('@tanstack/react-store');
-var invariant = require('tiny-invariant');
-var warning = require('tiny-warning');
 var routerCore = require('@tanstack/router-core');
+var react = require('./react.js');
 var scrollRestoration = require('./scroll-restoration.js');
-var deferred = require('./deferred.js');
+var awaited = require('./awaited.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var invariant__default = /*#__PURE__*/_interopDefaultLegacy(invariant);
-var warning__default = /*#__PURE__*/_interopDefaultLegacy(warning);
-
-routerCore.Route.__onInit = route => {
-  Object.assign(route, {
-    useMatch: (opts = {}) => {
-      return useMatch({
-        ...opts,
-        from: route.id
-      });
-    },
-    useLoader: (opts = {}) => {
-      return useLoader({
-        ...opts,
-        from: route.id
-      });
-    },
-    useContext: (opts = {}) => {
-      return useMatch({
-        ...opts,
-        from: route.id,
-        select: d => opts?.select?.(d.context) ?? d.context
-      });
-    },
-    useRouteContext: (opts = {}) => {
-      return useMatch({
-        ...opts,
-        from: route.id,
-        select: d => opts?.select?.(d.routeContext) ?? d.routeContext
-      });
-    },
-    useSearch: (opts = {}) => {
-      return useSearch({
-        ...opts,
-        from: route.id
-      });
-    },
-    useParams: (opts = {}) => {
-      return useParams({
-        ...opts,
-        from: route.id
-      });
-    }
-  });
-};
-
-//
-
-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 useLinkProps(options) {
-  const router = useRouter();
-  const {
-    // custom props
-    type,
-    children,
-    target,
-    activeProps = () => ({
-      className: 'active'
-    }),
-    inactiveProps = () => ({}),
-    activeOptions,
-    disabled,
-    // fromCurrent,
-    hash,
-    search,
-    params,
-    to = '.',
-    preload,
-    preloadDelay,
-    replace,
-    // element props
-    style,
-    className,
-    onClick,
-    onFocus,
-    onMouseEnter,
-    onMouseLeave,
-    onTouchStart,
-    ...rest
-  } = options;
-  const linkInfo = router.buildLink(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 ? routerCore.functionalUpdate(activeProps, {}) ?? {} : {};
-
-  // Get the inactive props
-  const resolvedInactiveProps = isActive ? {} : routerCore.functionalUpdate(inactiveProps, {}) ?? {};
-  return {
-    ...resolvedActiveProps,
-    ...resolvedInactiveProps,
-    ...rest,
-    href: disabled ? undefined : 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", _rollupPluginBabelHelpers["extends"]({
-    ref: ref
-  }, linkProps, {
-    children: typeof props.children === 'function' ? props.children({
-      isActive: linkProps['data-status'] === 'active'
-    }) : props.children
-  }));
-});
-function Navigate(props) {
-  const router = useRouter();
-  React__namespace.useLayoutEffect(() => {
-    router.navigate(props);
-  }, []);
-  return null;
-}
-const matchIdsContext = /*#__PURE__*/React__namespace.createContext(null);
-const routerContext = /*#__PURE__*/React__namespace.createContext(null);
-function useRouterState(opts) {
-  const router = useRouter();
-  return reactStore.useStore(router.__store, opts?.select);
-}
-function RouterProvider({
-  router,
-  ...rest
-}) {
-  router.update(rest);
-  React__namespace.useEffect(() => {
-    let unsub;
-    React__namespace.startTransition(() => {
-      unsub = router.mount();
-    });
-    return unsub;
-  }, [router]);
-  const Wrap = router.options.Wrap || React__namespace.Fragment;
-  return /*#__PURE__*/React__namespace.createElement(Wrap, null, /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
-    value: router
-  }, /*#__PURE__*/React__namespace.createElement(Matches, null)));
-}
-function Matches() {
-  const router = useRouter();
-  const matchIds = useRouterState({
-    select: state => {
-      const hasPendingComponent = state.pendingMatches.some(d => {
-        const route = router.getRoute(d.routeId);
-        return !!route?.options.pendingComponent;
-      });
-      if (hasPendingComponent) {
-        return state.pendingMatchIds;
-      }
-      return state.matchIds;
-    }
-  });
-  return /*#__PURE__*/React__namespace.createElement(matchIdsContext.Provider, {
-    value: [undefined, ...matchIds]
-  }, /*#__PURE__*/React__namespace.createElement(CatchBoundary, {
-    errorComponent: ErrorComponent,
-    route: router.getRoute(routerCore.rootRouteId),
-    onCatch: () => {
-      warning__default["default"](false, `Error in router! Consider setting an 'errorComponent' in your RootRoute! 👍`);
-    }
-  }, /*#__PURE__*/React__namespace.createElement(Outlet, null)));
-}
-function useRouter() {
-  const value = React__namespace.useContext(routerContext);
-  warning__default["default"](value, 'useRouter must be used inside a <Router> component!');
-  return value;
-}
-function useMatches(opts) {
-  const matchIds = React__namespace.useContext(matchIdsContext);
-  return useRouterState({
-    select: state => {
-      const matches = state.matches.slice(state.matches.findIndex(d => d.id === matchIds[0]));
-      return opts?.select?.(matches) ?? matches;
-    }
-  });
-}
-function useMatch(opts) {
-  const router = useRouter();
-  const nearestMatchId = React__namespace.useContext(matchIdsContext)[0];
-  const nearestMatchRouteId = router.getRouteMatch(nearestMatchId)?.routeId;
-  const matchRouteId = useRouterState({
-    select: state => {
-      const matches = state.matches;
-      const match = opts?.from ? matches.find(d => d.routeId === opts?.from) : matches.find(d => d.id === nearestMatchId);
-      return match.routeId;
-    }
-  });
-  if (opts?.strict ?? true) {
-    invariant__default["default"](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 match = useRouterState({
-    select: state => {
-      const matches = state.matches;
-      const match = opts?.from ? matches.find(d => d.routeId === opts?.from) : matches.find(d => d.id === nearestMatchId);
-      invariant__default["default"](match, `Could not find ${opts?.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`);
-      return opts?.select?.(match) ?? match;
-    }
-  });
-  return match;
-}
-function useLoader(opts) {
-  return useMatch({
-    ...opts,
-    select: match => opts?.select?.(match.loaderData) ?? match.loaderData
-  });
-}
-function useRouterContext(opts) {
-  return useMatch({
-    ...opts,
-    select: match => opts?.select?.(match.context) ?? match.context
-  });
-}
-function useRouteContext(opts) {
-  return useMatch({
-    ...opts,
-    select: match => opts?.select?.(match.routeContext) ?? match.routeContext
-  });
-}
-function useSearch(opts) {
-  return useMatch({
-    ...opts,
-    select: match => {
-      return opts?.select?.(match.search) ?? match.search;
-    }
-  });
-}
-function useParams(opts) {
-  return useRouterState({
-    select: state => {
-      const params = routerCore.last(state.matches)?.params;
-      return opts?.select?.(params) ?? params;
-    }
-  });
-}
-function useNavigate(defaultOpts) {
-  const router = useRouter();
-  return React__namespace.useCallback(opts => {
-    return router.navigate({
-      ...defaultOpts,
-      ...opts
-    });
-  }, []);
-}
-function useMatchRoute() {
-  const router = useRouter();
-  return React__namespace.useCallback(opts => {
-    const {
-      pending,
-      caseSensitive,
-      ...rest
-    } = opts;
-    return router.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 Outlet() {
-  const matchIds = React__namespace.useContext(matchIdsContext).slice(1);
-  if (!matchIds[0]) {
-    return null;
-  }
-  return /*#__PURE__*/React__namespace.createElement(Match, {
-    matchIds: matchIds
-  });
-}
-const defaultPending = () => null;
-function Match({
-  matchIds
-}) {
-  const router = useRouter();
-  const matchId = matchIds[0];
-  const routeId = router.getRouteMatch(matchId).routeId;
-  const route = router.getRoute(routeId);
-  const PendingComponent = route.options.pendingComponent ?? router.options.defaultPendingComponent ?? defaultPending;
-  const errorComponent = route.options.errorComponent ?? router.options.defaultErrorComponent ?? ErrorComponent;
-  const ResolvedSuspenseBoundary = route.options.wrapInSuspense ?? !route.isRoot ? React__namespace.Suspense : SafeFragment;
-  const ResolvedCatchBoundary = !!errorComponent ? CatchBoundary : SafeFragment;
-  return /*#__PURE__*/React__namespace.createElement(matchIdsContext.Provider, {
-    value: matchIds
-  }, /*#__PURE__*/React__namespace.createElement(ResolvedSuspenseBoundary, {
-    fallback: /*#__PURE__*/React__namespace.createElement(PendingComponent, {
-      useMatch: route.useMatch,
-      useContext: route.useContext,
-      useRouteContext: route.useRouteContext,
-      useSearch: route.useSearch,
-      useParams: route.useParams
-    })
-  }, /*#__PURE__*/React__namespace.createElement(ResolvedCatchBoundary, {
-    key: route.id,
-    errorComponent: errorComponent,
-    route: route,
-    onCatch: () => {
-      warning__default["default"](false, `Error in route match: ${matchId}`);
-    }
-  }, /*#__PURE__*/React__namespace.createElement(MatchInner, {
-    matchId: matchId,
-    PendingComponent: PendingComponent
-  }))));
-}
-function MatchInner({
-  matchId,
-  PendingComponent
-}) {
-  const router = useRouter();
-  const match = useRouterState({
-    select: d => {
-      const match = d.matchesById[matchId];
-      return routerCore.pick(match, ['status', 'loadPromise', 'routeId', 'error']);
-    }
-  });
-  const route = router.getRoute(match.routeId);
-  if (match.status === 'error') {
-    throw match.error;
-  }
-  if (match.status === 'pending') {
-    return /*#__PURE__*/React__namespace.createElement(PendingComponent, {
-      useLoader: route.useLoader,
-      useMatch: route.useMatch,
-      useContext: route.useContext,
-      useRouteContext: route.useRouteContext,
-      useSearch: route.useSearch,
-      useParams: route.useParams
-    });
-  }
-  if (match.status === 'success') {
-    let comp = route.options.component ?? router.options.defaultComponent;
-    if (comp) {
-      return /*#__PURE__*/React__namespace.createElement(comp, {
-        useLoader: route.useLoader,
-        useMatch: route.useMatch,
-        useContext: route.useContext,
-        useRouteContext: route.useRouteContext,
-        useSearch: route.useSearch,
-        useParams: route.useParams
-      });
-    }
-    return /*#__PURE__*/React__namespace.createElement(Outlet, null);
-  }
-  invariant__default["default"](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);
-}
-function useInjectHtml() {
-  const router = useRouter();
-  return React__namespace.useCallback(html => {
-    router.injectHtml(html);
-  }, []);
-}
-function useDehydrate() {
-  const router = useRouter();
-  return React__namespace.useCallback(function dehydrate(key, data) {
-    return router.dehydrateData(key, data);
-  }, []);
-}
-function useHydrate() {
-  const router = useRouter();
-  return function hydrate(key) {
-    return router.hydrateData(key);
-  };
-}
-
-// 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.
-
-class CatchBoundary extends React__namespace.Component {
-  state = {
-    error: false,
-    info: undefined
-  };
-  componentDidCatch(error, info) {
-    this.props.onCatch(error, info);
-    this.setState({
-      error,
-      info
-    });
-  }
-  render() {
-    return /*#__PURE__*/React__namespace.createElement(CatchBoundaryInner, _rollupPluginBabelHelpers["extends"]({}, this.props, {
-      errorState: this.state,
-      reset: () => this.setState({})
-    }));
-  }
-}
-function CatchBoundaryInner(props) {
-  const locationKey = useRouterState({
-    select: d => d.resolvedLocation.key
-  });
-  const [activeErrorState, setActiveErrorState] = React__namespace.useState(props.errorState);
-  const errorComponent = props.errorComponent ?? ErrorComponent;
-  const prevKeyRef = React__namespace.useRef('');
-  React__namespace.useEffect(() => {
-    if (activeErrorState) {
-      if (locationKey !== prevKeyRef.current) {
-        setActiveErrorState({});
-      }
-    }
-    prevKeyRef.current = locationKey;
-  }, [activeErrorState, locationKey]);
-  React__namespace.useEffect(() => {
-    if (props.errorState.error) {
-      setActiveErrorState(props.errorState);
-    }
-    // props.reset()
-  }, [props.errorState.error]);
-  if (props.errorState.error && activeErrorState.error) {
-    return /*#__PURE__*/React__namespace.createElement(errorComponent, {
-      ...activeErrorState,
-      useMatch: props.route.useMatch,
-      useContext: props.route.useContext,
-      useRouteContext: props.route.useRouteContext,
-      useSearch: props.route.useSearch,
-      useParams: props.route.useParams
-    });
-  }
-  return props.children;
-}
-function ErrorComponent({
-  error
-}) {
-  const [show, setShow] = React__namespace.useState(process.env.NODE_ENV !== '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);
-}
-function useBlocker(message, condition = true) {
-  const router = useRouter();
-  React__namespace.useEffect(() => {
-    if (!condition) return;
-    let unblock = router.history.block((retry, cancel) => {
-      if (window.confirm(message)) {
-        unblock();
-        retry();
-      }
-    });
-    return unblock;
-  });
-}
-function Block({
-  message,
-  condition,
-  children
-}) {
-  useBlocker(message, condition);
-  return children ?? null;
-}
-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;
-}
 
 Object.defineProperty(exports, 'useStore', {
-  enumerable: true,
-  get: function () { return reactStore.useStore; }
+	enumerable: true,
+	get: function () { return reactStore.useStore; }
 });
+exports.Block = react.Block;
+exports.ErrorComponent = react.ErrorComponent;
+exports.Link = react.Link;
+exports.MatchRoute = react.MatchRoute;
+exports.Navigate = react.Navigate;
+exports.Outlet = react.Outlet;
+exports.RouterProvider = react.RouterProvider;
+exports.lazyRouteComponent = react.lazyRouteComponent;
+exports.matchIdsContext = react.matchIdsContext;
+exports.routerContext = react.routerContext;
+exports.shallow = react.shallow;
+exports.useBlocker = react.useBlocker;
+exports.useDehydrate = react.useDehydrate;
+exports.useHydrate = react.useHydrate;
+exports.useInjectHtml = react.useInjectHtml;
+exports.useLinkProps = react.useLinkProps;
+exports.useLoader = react.useLoader;
+exports.useMatch = react.useMatch;
+exports.useMatchRoute = react.useMatchRoute;
+exports.useMatches = react.useMatches;
+exports.useNavigate = react.useNavigate;
+exports.useParams = react.useParams;
+exports.useRouteContext = react.useRouteContext;
+exports.useRouter = react.useRouter;
+exports.useRouterContext = react.useRouterContext;
+exports.useRouterState = react.useRouterState;
+exports.useSearch = react.useSearch;
 exports.ScrollRestoration = scrollRestoration.ScrollRestoration;
 exports.useScrollRestoration = scrollRestoration.useScrollRestoration;
-exports.Deferred = deferred.Deferred;
-exports.useDeferred = deferred.useDeferred;
-exports.Block = Block;
-exports.ErrorComponent = ErrorComponent;
-exports.Link = Link;
-exports.MatchRoute = MatchRoute;
-exports.Navigate = Navigate;
-exports.Outlet = Outlet;
-exports.RouterProvider = RouterProvider;
-exports.lazyRouteComponent = lazyRouteComponent;
-exports.matchIdsContext = matchIdsContext;
-exports.routerContext = routerContext;
-exports.shallow = shallow;
-exports.useBlocker = useBlocker;
-exports.useDehydrate = useDehydrate;
-exports.useHydrate = useHydrate;
-exports.useInjectHtml = useInjectHtml;
-exports.useLinkProps = useLinkProps;
-exports.useLoader = useLoader;
-exports.useMatch = useMatch;
-exports.useMatchRoute = useMatchRoute;
-exports.useMatches = useMatches;
-exports.useNavigate = useNavigate;
-exports.useParams = useParams;
-exports.useRouteContext = useRouteContext;
-exports.useRouter = useRouter;
-exports.useRouterContext = useRouterContext;
-exports.useRouterState = useRouterState;
-exports.useSearch = useSearch;
+exports.Await = awaited.Await;
+exports.useAwaited = awaited.useAwaited;
 Object.keys(routerCore).forEach(function (k) {
-  if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
-    enumerable: true,
-    get: function () { return routerCore[k]; }
-  });
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return routerCore[k]; }
+	});
 });
 //# sourceMappingURL=index.js.map