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

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.9",
+  "version": "1.0.1",
   "license": "MIT",
   "repository": "tanstack/router",
-  "homepage": "https://tanstack.com/router/",
+  "homepage": "https://tanstack.com/router",
   "description": "",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,7 +12,6 @@
   "keywords": [
     "react",
     "location",
-    "@tanstack/react-router",
     "router",
     "routing",
     "async",
@@ -24,7 +23,7 @@
     "url": "https://github.com/sponsors/tannerlinsley"
   },
   "module": "build/esm/index.js",
-  "main": "build/cjs/react-router/src/index.js",
+  "main": "build/cjs/index.js",
   "browser": "build/umd/index.production.js",
   "types": "build/types/index.d.ts",
   "engines": {
@@ -34,17 +33,20 @@
     "build/**",
     "src"
   ],
+  "sideEffects": false,
   "peerDependencies": {
     "react": ">=16",
     "react-dom": ">=16"
   },
   "dependencies": {
     "@babel/runtime": "^7.16.7",
-    "@tanstack/router-core": "0.0.1-beta.9",
-    "use-sync-external-store": "^1.2.0"
+    "@tanstack/react-store": "^0.2.1",
+    "@tanstack/store": "^0.1.3",
+    "tiny-invariant": "^1.3.1",
+    "tiny-warning": "^1.0.3",
+    "@tanstack/history": "1.0.1"
   },
-  "devDependencies": {
-    "@types/use-sync-external-store": "^0.0.3",
-    "babel-plugin-transform-async-to-promises": "^0.8.18"
+  "scripts": {
+    "build": "rollup --config rollup.config.js"
   }
-}
+}

package/src/CatchBoundary.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react'
+
+export function CatchBoundary(props: {
+  getResetKey: () => string
+  children: any
+  errorComponent?: any
+  onCatch: (error: any) => void
+}) {
+  const errorComponent = props.errorComponent ?? ErrorComponent
+
+  return (
+    <CatchBoundaryImpl
+      getResetKey={props.getResetKey}
+      onCatch={props.onCatch}
+      children={({ error }) => {
+        if (error) {
+          return React.createElement(errorComponent, {
+            error,
+          })
+        }
+
+        return props.children
+      }}
+    />
+  )
+}
+
+export class CatchBoundaryImpl extends React.Component<{
+  getResetKey: () => string
+  children: (props: { error: any; reset: () => void }) => any
+  onCatch?: (error: any) => void
+}> {
+  state = { error: null } as any
+  static getDerivedStateFromProps(props: any) {
+    return { resetKey: props.getResetKey() }
+  }
+  static getDerivedStateFromError(error: any) {
+    return { error }
+  }
+  componentDidUpdate(
+    prevProps: Readonly<{
+      getResetKey: () => string
+      children: (props: { error: any; reset: () => void }) => any
+      onCatch?: ((error: any, info: any) => void) | undefined
+    }>,
+    prevState: any,
+  ): void {
+    if (prevState.error && prevState.resetKey !== this.state.resetKey) {
+      this.setState({ error: null })
+    }
+  }
+  componentDidCatch(error: any) {
+    console.error(error)
+    this.props.onCatch?.(error)
+  }
+  render() {
+    return this.props.children(this.state)
+  }
+}
+
+export function ErrorComponent({ error }: { error: any }) {
+  const [show, setShow] = React.useState(process.env.NODE_ENV !== 'production')
+
+  return (
+    <div style={{ padding: '.5rem', maxWidth: '100%' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '.5rem' }}>
+        <strong style={{ fontSize: '1rem' }}>Something went wrong!</strong>
+        <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'}
+        </button>
+      </div>
+      <div style={{ height: '.25rem' }} />
+      {show ? (
+        <div>
+          <pre
+            style={{
+              fontSize: '.7em',
+              border: '1px solid red',
+              borderRadius: '.25rem',
+              padding: '.3rem',
+              color: 'red',
+              overflow: 'auto',
+            }}
+          >
+            {error.message ? <code>{error.message}</code> : null}
+          </pre>
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/src/Matches.tsx

@@ -0,0 +1,423 @@
+import * as React from 'react'
+import invariant from 'tiny-invariant'
+import warning from 'tiny-warning'
+import { CatchBoundary, ErrorComponent } from './CatchBoundary'
+import { useRouter, useRouterState } from './RouterProvider'
+import { ResolveRelativePath, ToOptions } from './link'
+import { AnyRoute, ReactNode, rootRouteId } from './route'
+import {
+  FullSearchSchema,
+  ParseRoute,
+  RouteById,
+  RouteByPath,
+  RouteIds,
+  RoutePaths,
+} from './routeInfo'
+import { RegisteredRouter, RouterState } from './router'
+import { NoInfer, StrictOrFrom, pick } from './utils'
+
+export const matchContext = React.createContext<string | undefined>(undefined)
+
+export interface RouteMatch<
+  TRouteTree extends AnyRoute = AnyRoute,
+  TRouteId extends RouteIds<TRouteTree> = ParseRoute<TRouteTree>['id'],
+> {
+  id: string
+  routeId: TRouteId
+  pathname: string
+  params: RouteById<TRouteTree, TRouteId>['types']['allParams']
+  status: 'pending' | 'success' | 'error'
+  isFetching: boolean
+  showPending: boolean
+  error: unknown
+  paramsError: unknown
+  searchError: unknown
+  updatedAt: number
+  loadPromise?: Promise<void>
+  loaderData?: RouteById<TRouteTree, TRouteId>['types']['loaderData']
+  routeContext: RouteById<TRouteTree, TRouteId>['types']['routeContext']
+  context: RouteById<TRouteTree, TRouteId>['types']['allContext']
+  search: FullSearchSchema<TRouteTree> &
+    RouteById<TRouteTree, TRouteId>['types']['fullSearchSchema']
+  fetchCount: number
+  abortController: AbortController
+  cause: 'preload' | 'enter' | 'stay'
+  loaderDeps: RouteById<TRouteTree, TRouteId>['types']['loaderDeps']
+  preload: boolean
+  invalid: boolean
+}
+
+export type AnyRouteMatch = RouteMatch<any, any>
+
+export function Matches() {
+  const router = useRouter()
+  const matchId = useRouterState({
+    select: (s) => {
+      return getRenderedMatches(s)[0]?.id
+    },
+  })
+
+  return (
+    <matchContext.Provider value={matchId}>
+      <CatchBoundary
+        getResetKey={() => router.state.resolvedLocation.state?.key}
+        errorComponent={ErrorComponent}
+        onCatch={() => {
+          warning(
+            false,
+            `Error in router! Consider setting an 'errorComponent' in your RootRoute! 👍`,
+          )
+        }}
+      >
+        {matchId ? <Match matchId={matchId} /> : null}
+      </CatchBoundary>
+    </matchContext.Provider>
+  )
+}
+
+function SafeFragment(props: any) {
+  return <>{props.children}</>
+}
+
+export function Match({ matchId }: { matchId: string }) {
+  const router = useRouter()
+  const routeId = useRouterState({
+    select: (s) =>
+      getRenderedMatches(s).find((d) => d.id === matchId)?.routeId as string,
+  })
+
+  invariant(
+    routeId,
+    `Could not find routeId for matchId "${matchId}". Please file an issue!`,
+  )
+
+  const route = router.routesById[routeId]!
+
+  const PendingComponent = (route.options.pendingComponent ??
+    router.options.defaultPendingComponent) as any
+
+  const pendingElement = PendingComponent ? <PendingComponent /> : null
+
+  const routeErrorComponent =
+    route.options.errorComponent ??
+    router.options.defaultErrorComponent ??
+    ErrorComponent
+
+  const ResolvedSuspenseBoundary =
+    route.options.wrapInSuspense ??
+    PendingComponent ??
+    route.options.component?.preload ??
+    route.options.pendingComponent?.preload ??
+    (route.options.errorComponent as any)?.preload
+      ? React.Suspense
+      : SafeFragment
+
+  const ResolvedCatchBoundary = routeErrorComponent
+    ? CatchBoundary
+    : SafeFragment
+
+  return (
+    <matchContext.Provider value={matchId}>
+      <ResolvedSuspenseBoundary fallback={pendingElement}>
+        <ResolvedCatchBoundary
+          getResetKey={() => router.state.resolvedLocation.state?.key}
+          errorComponent={routeErrorComponent}
+          onCatch={() => {
+            warning(false, `Error in route match: ${matchId}`)
+          }}
+        >
+          <MatchInner matchId={matchId!} pendingElement={pendingElement} />
+        </ResolvedCatchBoundary>
+      </ResolvedSuspenseBoundary>
+    </matchContext.Provider>
+  )
+}
+
+function MatchInner({
+  matchId,
+  pendingElement,
+}: {
+  matchId: string
+  pendingElement: any
+}): any {
+  const router = useRouter()
+  const routeId = useRouterState({
+    select: (s) =>
+      getRenderedMatches(s).find((d) => d.id === matchId)?.routeId as string,
+  })
+
+  const route = router.routesById[routeId]!
+
+  const match = useRouterState({
+    select: (s) =>
+      pick(getRenderedMatches(s).find((d) => d.id === matchId)!, [
+        'status',
+        'error',
+        'showPending',
+        'loadPromise',
+      ]),
+  })
+
+  if (match.status === 'error') {
+    throw match.error
+  }
+
+  if (match.status === 'pending') {
+    if (match.showPending) {
+      return pendingElement
+    }
+    throw match.loadPromise
+  }
+
+  if (match.status === 'success') {
+    let Comp = route.options.component ?? router.options.defaultComponent
+
+    if (Comp) {
+      return <Comp />
+    }
+
+    return <Outlet />
+  }
+
+  invariant(
+    false,
+    'Idle routeMatch status encountered during rendering! You should never see this. File an issue!',
+  )
+}
+
+export const Outlet = React.memo(function Outlet() {
+  const matchId = React.useContext(matchContext)
+
+  const childMatchId = useRouterState({
+    select: (s) => {
+      const matches = getRenderedMatches(s)
+      const index = matches.findIndex((d) => d.id === matchId)
+      return matches[index + 1]?.id
+    },
+  })
+
+  if (!childMatchId) {
+    return null
+  }
+
+  return <Match matchId={childMatchId} />
+})
+
+export interface MatchRouteOptions {
+  pending?: boolean
+  caseSensitive?: boolean
+  includeSearch?: boolean
+  fuzzy?: boolean
+}
+
+export type UseMatchRouteOptions<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RoutePaths<TRouteTree> = '/',
+  TTo extends string = '',
+  TMaskFrom extends RoutePaths<TRouteTree> = '/',
+  TMaskTo extends string = '',
+> = ToOptions<AnyRoute, TFrom, TTo, TMaskFrom, TMaskTo> & MatchRouteOptions
+
+export function useMatchRoute<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+>() {
+  useRouterState({ select: (s) => [s.location, s.resolvedLocation] })
+  const { matchRoute } = useRouter()
+
+  return React.useCallback(
+    <
+      TFrom extends RoutePaths<TRouteTree> = '/',
+      TTo extends string = '',
+      TMaskFrom extends RoutePaths<TRouteTree> = '/',
+      TMaskTo extends string = '',
+      TResolved extends string = ResolveRelativePath<TFrom, NoInfer<TTo>>,
+    >(
+      opts: UseMatchRouteOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
+    ): false | RouteById<TRouteTree, TResolved>['types']['allParams'] => {
+      const { pending, caseSensitive, ...rest } = opts
+
+      return matchRoute(rest as any, {
+        pending,
+        caseSensitive,
+      })
+    },
+    [],
+  )
+}
+
+export type MakeMatchRouteOptions<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RoutePaths<TRouteTree> = '/',
+  TTo extends string = '',
+  TMaskFrom extends RoutePaths<TRouteTree> = '/',
+  TMaskTo extends string = '',
+> = ToOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> &
+  MatchRouteOptions & {
+    // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
+    children?:
+      | ((
+          params?: RouteByPath<
+            TRouteTree,
+            ResolveRelativePath<TFrom, NoInfer<TTo>>
+          >['types']['allParams'],
+        ) => ReactNode)
+      | React.ReactNode
+  }
+
+export function MatchRoute<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RoutePaths<TRouteTree> = '/',
+  TTo extends string = '',
+  TMaskFrom extends RoutePaths<TRouteTree> = '/',
+  TMaskTo extends string = '',
+>(
+  props: MakeMatchRouteOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
+): any {
+  const matchRoute = useMatchRoute()
+  const params = matchRoute(props as any)
+
+  if (typeof props.children === 'function') {
+    return (props.children as any)(params)
+  }
+
+  return !!params ? props.children : null
+}
+
+function getRenderedMatches(state: RouterState) {
+  return state.pendingMatches?.some((d) => d.showPending)
+    ? state.pendingMatches
+    : state.matches
+}
+
+export function useMatch<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
+  TStrict extends boolean = true,
+  TRouteMatchState = RouteMatch<TRouteTree, TFrom>,
+  TSelected = TRouteMatchState,
+>(
+  opts: StrictOrFrom<TFrom> & {
+    select?: (match: TRouteMatchState) => TSelected
+  },
+): TStrict extends true ? TSelected : TSelected | undefined {
+  const router = useRouter()
+  const nearestMatchId = React.useContext(matchContext)
+
+  const nearestMatchRouteId = getRenderedMatches(router.state).find(
+    (d) => d.id === nearestMatchId,
+  )?.routeId
+
+  const matchRouteId = (() => {
+    const matches = getRenderedMatches(router.state)
+    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(
+      nearestMatchRouteId == matchRouteId,
+      `useMatch("${
+        matchRouteId as string
+      }") is being called in a component that is meant to render the '${nearestMatchRouteId}' route. Did you mean to 'useMatch("${
+        matchRouteId as string
+      }", { strict: false })' or 'useRoute("${
+        matchRouteId as string
+      }")' instead?`,
+    )
+  }
+
+  const matchSelection = useRouterState({
+    select: (state) => {
+      const match = getRenderedMatches(state).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 as any) : match
+    },
+  })
+
+  return matchSelection as any
+}
+
+export function useMatches<T = RouteMatch[]>(opts?: {
+  select?: (matches: RouteMatch[]) => T
+}): T {
+  return useRouterState({
+    select: (state) => {
+      let matches = getRenderedMatches(state)
+      return opts?.select ? opts.select(matches) : (matches as T)
+    },
+  })
+}
+
+export function useParentMatches<T = RouteMatch[]>(opts?: {
+  select?: (matches: RouteMatch[]) => T
+}): T {
+  const contextMatchId = React.useContext(matchContext)
+
+  return useMatches({
+    select: (matches) => {
+      matches = matches.slice(matches.findIndex((d) => d.id === contextMatchId))
+      return opts?.select ? opts.select(matches) : (matches as T)
+    },
+  })
+}
+
+export function useLoaderDeps<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
+  TStrict extends boolean = true,
+  TRouteMatch extends RouteMatch<TRouteTree, TFrom> = RouteMatch<
+    TRouteTree,
+    TFrom
+  >,
+  TSelected = Required<TRouteMatch>['loaderDeps'],
+>(
+  opts: StrictOrFrom<TFrom> & {
+    select?: (match: TRouteMatch) => TSelected
+  },
+): TStrict extends true ? TSelected : TSelected | undefined {
+  return useMatch({
+    ...opts,
+    select: (s) => {
+      return typeof opts.select === 'function'
+        ? opts.select(s?.loaderDeps)
+        : s?.loaderDeps
+    },
+  })!
+}
+
+export function useLoaderData<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
+  TStrict extends boolean = true,
+  TRouteMatch extends RouteMatch<TRouteTree, TFrom> = RouteMatch<
+    TRouteTree,
+    TFrom
+  >,
+  TSelected = Required<TRouteMatch>['loaderData'],
+>(
+  opts: StrictOrFrom<TFrom> & {
+    select?: (match: TRouteMatch) => TSelected
+  },
+): TStrict extends true ? TSelected : TSelected | undefined {
+  return useMatch({
+    ...opts,
+    select: (s) => {
+      return typeof opts.select === 'function'
+        ? opts.select(s?.loaderData)
+        : s?.loaderData
+    },
+  })!
+}