@tanstack/react-router 0.0.1-beta.9 → 1.0.0

package/build/cjs/react.js

@@ -0,0 +1,650 @@
+/**
+ * @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