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

package/src/utils.ts

@@ -1,4 +1,10 @@
 import * as React from 'react'
+import { useMatch } from './Matches'
+import { RouteMatch } from './RouterProvider'
+import { AnyRoute } from './route'
+import { ParseRoute, RouteIds, RoutesById, RouteById } from './routeInfo'
+import { RegisteredRouter } from './router'
+
 export type NoInfer<T> = [T][T extends any ? 0 : never]
 export type IsAny<T, Y, N = T> = 1 extends 0 & T ? Y : N
 export type IsAnyBoolean<T> = 1 extends 0 & T ? true : false
@@ -239,9 +245,9 @@ export function partialDeepEqual(a: any, b: any): boolean {
   }
 
   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]))
     )
   }
 
@@ -255,3 +261,77 @@ export function useStableCallback<T extends (...args: any[]) => any>(fn: T): T {
   const ref = React.useRef((...args: any[]) => fnRef.current(...args))
   return ref.current as T
 }
+
+export function shallow<T>(objA: T, objB: T) {
+  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] as string) ||
+      !Object.is(objA[keysA[i] as keyof T], objB[keysA[i] as keyof T])
+    ) {
+      return false
+    }
+  }
+  return true
+}
+
+export type StrictOrFrom<TFrom> =
+  | {
+      from: TFrom
+      strict?: true
+    }
+  | {
+      from?: never
+      strict: false
+    }
+
+export type RouteFromIdOrRoute<
+  T,
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+> = T extends ParseRoute<TRouteTree>
+  ? T
+  : T extends RouteIds<TRouteTree>
+  ? RoutesById<TRouteTree>[T]
+  : T extends string
+  ? RouteIds<TRouteTree>
+  : never
+
+export function useRouteContext<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
+  TStrict extends boolean = true,
+  TRouteContext = RouteById<TRouteTree, TFrom>['types']['allContext'],
+  TSelected = TRouteContext,
+>(
+  opts: StrictOrFrom<TFrom> & {
+    select?: (search: TRouteContext) => TSelected
+  },
+): TStrict extends true ? TSelected : TSelected | undefined {
+  return useMatch({
+    ...(opts as any),
+    select: (match: RouteMatch) =>
+      opts?.select
+        ? opts.select(match.context as TRouteContext)
+        : match.context,
+  })
+}
+
+export const useLayoutEffect =
+  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect

package/build/cjs/react.js

@@ -1,620 +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';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
-var React = require('react');
-var invariant = require('tiny-invariant');
-var warning = require('tiny-warning');
-var route = require('./route.js');
-var utils = require('./utils.js');
-var RouterProvider = require('./RouterProvider.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);
-
-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 useLinkProps(options) {
-  const {
-    buildLink,
-    state: routerState
-  } = 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 ? utils.functionalUpdate(activeProps, {}) ?? {} : {};
-
-  // Get the inactive props
-  const resolvedInactiveProps = isActive ? {} : utils.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 {
-    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__ || RouterProvider.routerContext;
-  const value = React__namespace.useContext(resolvedContext);
-  warning__default["default"](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__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 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__default["default"](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 = utils.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 route$1 = routesById[route.rootRouteId];
-  const errorComponent = React__namespace.useCallback(props => {
-    return /*#__PURE__*/React__namespace.createElement(ErrorComponent, {
-      ...props,
-      useMatch: route$1.useMatch,
-      useRouteContext: route$1.useRouteContext,
-      useSearch: route$1.useSearch,
-      useParams: route$1.useParams
-    });
-  }, [route$1]);
-  return /*#__PURE__*/React__namespace.createElement(matchesContext.Provider, {
-    value: matches
-  }, /*#__PURE__*/React__namespace.createElement(CatchBoundary, {
-    resetKey: locationKey,
-    errorComponent: errorComponent,
-    onCatch: () => {
-      warning__default["default"](false, `Error in router! Consider setting an 'errorComponent' in your RootRoute! 👍`);
-    }
-  }, matches.length ? /*#__PURE__*/React__namespace.createElement(Match, {
-    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
-}) {
-  const {
-    options,
-    routesById
-  } = useRouter();
-  const match = matches[0];
-  const routeId = match?.routeId;
-  const route = routesById[routeId];
-  const locationKey = useRouterState({
-    select: s => s.resolvedLocation.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 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(matchesContext.Provider, {
-    value: matches
-  }, /*#__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__default["default"](false, `Error in route match: ${match.id}`);
-    }
-  }, /*#__PURE__*/React__namespace.createElement(MatchInner, {
-    match: match
-  }))));
-}
-function MatchInner({
-  match
-}) {
-  const {
-    options,
-    routesById
-  } = useRouter();
-  const route = routesById[match.routeId];
-  if (match.status === 'error') {
-    throw match.error;
-  }
-  if (match.status === 'pending') {
-    throw match.loadPromise;
-  }
-  if (match.status === 'success') {
-    let comp = route.options.component ?? options.defaultComponent;
-    if (comp) {
-      return /*#__PURE__*/React__namespace.createElement(comp, {
-        useMatch: route.useMatch,
-        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);
-}
-
-// 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;
-    }
-  });
-}
-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 {
-    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 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.Matches = Matches;
-exports.Navigate = Navigate;
-exports.Outlet = Outlet;
-exports.lazyRouteComponent = lazyRouteComponent;
-exports.matchesContext = matchesContext;
-exports.shallow = shallow;
-exports.typedNavigate = typedNavigate;
-exports.useBlocker = useBlocker;
-exports.useLinkProps = useLinkProps;
-exports.useMatch = useMatch;
-exports.useMatchRoute = useMatchRoute;
-exports.useMatches = useMatches;
-exports.useNavigate = useNavigate;
-exports.useParams = useParams;
-exports.useRouteContext = useRouteContext;
-exports.useRouter = useRouter;
-exports.useRouterState = useRouterState;
-exports.useSearch = useSearch;
-//# sourceMappingURL=react.js.map