@tanstack/react-router 1.0.0 → 1.0.2

package/build/cjs/react.js

@@ -1,650 +0,0 @@
-/**
- * @tanstack/react-router/src/index.tsx
- *
- * Copyright (c) TanStack
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-'use strict';
-
-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');
-
-function _interopNamespaceDefault(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__*/_interopNamespaceDefault(React);
-
-const useLayoutEffect = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
-routerCore.Route.__onInit = route => {
-  Object.assign(route, {
-    useMatch: (opts = {}) => {
-      return useMatch({
-        ...opts,
-        from: route.id
-      });
-    },
-    useLoader: (opts = {}) => {
-      return useLoader({
-        ...opts,
-        from: route.id
-      });
-    },
-    useRouteContext: (opts = {}) => {
-      return useMatch({
-        ...opts,
-        from: route.id,
-        select: d => opts?.select ? opts.select(d.context) : d.context
-      });
-    },
-    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 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 = router.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 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.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", _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();
-  const match = useMatch({
-    strict: false
-  });
-  useLayoutEffect(() => {
-    router.navigate({
-      from: props.to ? match.pathname : undefined,
-      ...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 => {
-      return state.renderedMatchIds;
-    }
-  });
-  const locationKey = useRouterState({
-    select: d => d.resolvedLocation.state?.key
-  });
-  const route = router.getRoute(routerCore.rootRouteId);
-  const errorComponent = React__namespace.useCallback(props => {
-    return /*#__PURE__*/React__namespace.createElement(ErrorComponent, {
-      ...props,
-      useMatch: route.useMatch,
-      useRouteContext: route.useRouteContext,
-      useSearch: route.useSearch,
-      useParams: route.useParams
-    });
-  }, [route]);
-  return /*#__PURE__*/React__namespace.createElement(matchIdsContext.Provider, {
-    value: [undefined, ...matchIds]
-  }, /*#__PURE__*/React__namespace.createElement(CatchBoundary, {
-    resetKey: locationKey,
-    errorComponent: errorComponent,
-    onCatch: () => {
-      warning(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(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.renderedMatches.slice(state.renderedMatches.findIndex(d => d.id === matchIds[0]));
-      return opts?.select ? 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 match = opts?.from ? state.renderedMatches.find(d => d.routeId === opts?.from) : state.renderedMatches.find(d => d.id === nearestMatchId);
-      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.renderedMatches.find(d => d.routeId === opts?.from) : state.renderedMatches.find(d => d.id === nearestMatchId);
-      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 useLoader(opts) {
-  return useMatch({
-    ...opts,
-    select: match => opts?.select ? opts?.select(match.loaderData) : match.loaderData
-  });
-}
-function useRouterContext(opts) {
-  return useMatch({
-    ...opts,
-    select: match => opts?.select ? opts.select(match.context) : match.context
-  });
-}
-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 = routerCore.last(state.renderedMatches)?.params;
-      return opts?.select ? opts.select(params) : params;
-    }
-  });
-}
-function useNavigate(defaultOpts) {
-  const router = useRouter();
-  const match = useMatch({
-    strict: false
-  });
-  return React__namespace.useCallback(opts => {
-    return router.navigate({
-      from: opts?.to ? match.pathname : undefined,
-      ...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 locationKey = useRouterState({
-    select: s => s.resolvedLocation.state?.key
-  });
-  const PendingComponent = route.options.pendingComponent ?? router.options.defaultPendingComponent ?? defaultPending;
-  const routeErrorComponent = route.options.errorComponent ?? router.options.defaultErrorComponent ?? ErrorComponent;
-  const ResolvedSuspenseBoundary = route.options.wrapInSuspense ?? !route.isRoot ? React__namespace.Suspense : SafeFragment;
-  const ResolvedCatchBoundary = !!routeErrorComponent ? CatchBoundary : SafeFragment;
-  const errorComponent = React__namespace.useCallback(props => {
-    return /*#__PURE__*/React__namespace.createElement(routeErrorComponent, {
-      ...props,
-      useMatch: route.useMatch,
-      useRouteContext: route.useRouteContext,
-      useSearch: route.useSearch,
-      useParams: route.useParams
-    });
-  }, [route]);
-  return /*#__PURE__*/React__namespace.createElement(matchIdsContext.Provider, {
-    value: matchIds
-  }, /*#__PURE__*/React__namespace.createElement(ResolvedSuspenseBoundary, {
-    fallback: /*#__PURE__*/React__namespace.createElement(PendingComponent, {
-      useMatch: route.useMatch,
-      useRouteContext: route.useRouteContext,
-      useSearch: route.useSearch,
-      useParams: route.useParams
-    })
-  }, /*#__PURE__*/React__namespace.createElement(ResolvedCatchBoundary, {
-    resetKey: locationKey,
-    errorComponent: errorComponent,
-    onCatch: () => {
-      warning(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,
-      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,
-        useRouteContext: route.useRouteContext,
-        useSearch: route.useSearch,
-        useParams: route.useParams
-      });
-    }
-    return /*#__PURE__*/React__namespace.createElement(Outlet, null);
-  }
-  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);
-}
-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.
-
-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(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;
-}
-
-exports.Block = Block;
-exports.CatchBoundary = CatchBoundary;
-exports.CatchBoundaryImpl = CatchBoundaryImpl;
-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;
-//# sourceMappingURL=react.js.map