@tanstack/solid-router 1.108.0

package/src/Match.tsx

@@ -0,0 +1,356 @@
+import * as Solid from 'solid-js'
+import invariant from 'tiny-invariant'
+import warning from 'tiny-warning'
+import {
+  createControlledPromise,
+  getLocationChangeInfo,
+  pick,
+  rootRouteId,
+} from '@tanstack/router-core'
+import { Dynamic } from 'solid-js/web'
+import { CatchBoundary, ErrorComponent } from './CatchBoundary'
+import { useRouterState } from './useRouterState'
+import { useRouter } from './useRouter'
+import { CatchNotFound, isNotFound } from './not-found'
+import { isRedirect } from './redirects'
+import { matchContext } from './matchContext'
+import { SafeFragment } from './SafeFragment'
+import { renderRouteNotFound } from './renderRouteNotFound'
+import { ScrollRestoration } from './scroll-restoration'
+import type { AnyRoute } from './route'
+
+export const Match = (props: { matchId: string }) => {
+  const router = useRouter()
+  const routeId = useRouterState({
+    select: (s) => {
+      return s.matches.find((d) => d.id === props.matchId)?.routeId as string
+    },
+  })
+
+  invariant(
+    routeId,
+    `Could not find routeId for matchId "${props.matchId}". Please file an issue!`,
+  )
+
+  const route: () => AnyRoute = () => router.routesById[routeId()]
+
+  const PendingComponent = () =>
+    route().options.pendingComponent ?? router.options.defaultPendingComponent
+
+  const routeErrorComponent = () =>
+    route().options.errorComponent ?? router.options.defaultErrorComponent
+
+  const routeOnCatch = () =>
+    route().options.onCatch ?? router.options.defaultOnCatch
+
+  const routeNotFoundComponent = () =>
+    route().isRoot
+      ? // If it's the root route, use the globalNotFound option, with fallback to the notFoundRoute's component
+        (route().options.notFoundComponent ??
+        router.options.notFoundRoute?.options.component)
+      : route().options.notFoundComponent
+
+  const ResolvedSuspenseBoundary = () =>
+    // If we're on the root route, allow forcefully wrapping in suspense
+    (!route().isRoot || route().options.wrapInSuspense) &&
+    (route().options.wrapInSuspense ??
+      PendingComponent() ??
+      (route().options.errorComponent as any)?.preload)
+      ? Solid.Suspense
+      : SafeFragment
+
+  const ResolvedCatchBoundary = () =>
+    routeErrorComponent() ? CatchBoundary : SafeFragment
+
+  const ResolvedNotFoundBoundary = () =>
+    routeNotFoundComponent() ? CatchNotFound : SafeFragment
+
+  const resetKey = useRouterState({
+    select: (s) => s.loadedAt,
+  })
+
+  const parentRouteId = useRouterState({
+    select: (s) => {
+      const index = s.matches.findIndex((d) => d.id === props.matchId)
+      return s.matches[index - 1]?.routeId as string
+    },
+  })
+
+  return (
+    <>
+      <matchContext.Provider value={() => props.matchId}>
+        <Dynamic
+          component={ResolvedSuspenseBoundary()}
+          fallback={<Dynamic component={PendingComponent()} />}
+        >
+          <Dynamic
+            component={ResolvedCatchBoundary()}
+            getResetKey={() => resetKey()}
+            errorComponent={routeErrorComponent() || ErrorComponent}
+            onCatch={(error: Error) => {
+              // Forward not found errors (we don't want to show the error component for these)
+              if (isNotFound(error)) throw error
+              warning(false, `Error in route match: ${props.matchId}`)
+              routeOnCatch()?.(error)
+            }}
+          >
+            <Dynamic
+              component={ResolvedNotFoundBoundary()}
+              fallback={(error: any) => {
+                // If the current not found handler doesn't exist or it has a
+                // route ID which doesn't match the current route, rethrow the error
+                if (
+                  !routeNotFoundComponent() ||
+                  (error.routeId && error.routeId !== routeId) ||
+                  (!error.routeId && !route().isRoot)
+                )
+                  throw error
+
+                return (
+                  <Dynamic component={routeNotFoundComponent()} {...error} />
+                )
+              }}
+            >
+              <MatchInner matchId={props.matchId} />
+            </Dynamic>
+          </Dynamic>
+        </Dynamic>
+      </matchContext.Provider>
+
+      {parentRouteId() === rootRouteId ? (
+        <>
+          <OnRendered />
+          <ScrollRestoration />
+        </>
+      ) : null}
+    </>
+  )
+}
+
+// On Rendered can't happen above the root layout because it actually
+// renders a dummy dom element to track the rendered state of the app.
+// We render a script tag with a key that changes based on the current
+// location state.key. Also, because it's below the root layout, it
+// allows us to fire onRendered events even after a hydration mismatch
+// error that occurred above the root layout (like bad head/link tags,
+// which is common).
+function OnRendered() {
+  const router = useRouter()
+
+  const location = useRouterState({
+    select: (s) => {
+      return s.resolvedLocation?.state.key
+    },
+  })
+  Solid.createEffect(
+    Solid.on([location], () => {
+      router.emit({
+        type: 'onRendered',
+        ...getLocationChangeInfo(router.state),
+      })
+    }),
+  )
+  return null
+}
+
+export const MatchInner = (props: { matchId: string }): any => {
+  const router = useRouter()
+
+  // { match, key, routeId } =
+  const matchState: Solid.Accessor<any> = useRouterState({
+    select: (s) => {
+      const matchIndex = s.matches.findIndex((d) => d.id === props.matchId)
+      const match = s.matches[matchIndex]!
+      const routeId = match.routeId as string
+
+      const remountFn =
+        (router.routesById[routeId] as AnyRoute).options.remountDeps ??
+        router.options.defaultRemountDeps
+      const remountDeps = remountFn?.({
+        routeId,
+        loaderDeps: match.loaderDeps,
+        params: match._strictParams,
+        search: match._strictSearch,
+      })
+      const key = remountDeps ? JSON.stringify(remountDeps) : undefined
+
+      return {
+        key,
+        routeId,
+        match: pick(match, ['id', 'status', 'error']),
+      }
+    },
+  })
+
+  const route = () => router.routesById[matchState().routeId]!
+
+  // function useChangedDiff(value: any) {
+  //   const ref = Solid.useRef(value)
+  //   const changed = ref.current !== value
+  //   if (changed) {
+  //     console.log(
+  //       'Changed:',
+  //       value,
+  //       Object.fromEntries(
+  //         Object.entries(value).filter(
+  //           ([key, val]) => val !== ref.current[key],
+  //         ),
+  //       ),
+  //     )
+  //   }
+  //   ref.current = value
+  // }
+
+  // useChangedDiff(match)
+  const match = () => matchState().match
+
+  const out = () => {
+    const Comp = route().options.component ?? router.options.defaultComponent
+    if (Comp) {
+      return <Comp />
+    }
+    return <Outlet />
+  }
+
+  return (
+    <Solid.Switch>
+      <Solid.Match when={match().status === 'notFound'}>
+        {(_) => {
+          invariant(isNotFound(match().error), 'Expected a notFound error')
+
+          return renderRouteNotFound(router, route(), match().error)
+        }}
+      </Solid.Match>
+      <Solid.Match when={match().status === 'redirected'}>
+        {(_) => {
+          invariant(isRedirect(match().error), 'Expected a redirect error')
+
+          const [loaderResult] = Solid.createResource(async () => {
+            await new Promise((r) => setTimeout(r, 0))
+            return router.getMatch(match().id)?.loadPromise
+          })
+
+          return <>{loaderResult()}</>
+        }}
+      </Solid.Match>
+      <Solid.Match when={match().status === 'error'}>
+        {(_) => {
+          if (router.isServer) {
+            const RouteErrorComponent =
+              (route().options.errorComponent ??
+                router.options.defaultErrorComponent) ||
+              ErrorComponent
+
+            return (
+              <RouteErrorComponent
+                error={match().error}
+                info={{
+                  componentStack: '',
+                }}
+              />
+            )
+          }
+
+          throw match().error
+        }}
+      </Solid.Match>
+      <Solid.Match when={match().status === 'pending'}>
+        {(_) => {
+          const pendingMinMs =
+            route().options.pendingMinMs ?? router.options.defaultPendingMinMs
+
+          if (pendingMinMs && !router.getMatch(match().id)?.minPendingPromise) {
+            // Create a promise that will resolve after the minPendingMs
+            if (!router.isServer) {
+              const minPendingPromise = createControlledPromise<void>()
+
+              Promise.resolve().then(() => {
+                router.updateMatch(match().id, (prev) => ({
+                  ...prev,
+                  minPendingPromise,
+                }))
+              })
+
+              setTimeout(() => {
+                minPendingPromise.resolve()
+
+                // We've handled the minPendingPromise, so we can delete it
+                router.updateMatch(match().id, (prev) => ({
+                  ...prev,
+                  minPendingPromise: undefined,
+                }))
+              }, pendingMinMs)
+            }
+          }
+
+          const [loaderResult] = Solid.createResource(async () => {
+            await new Promise((r) => setTimeout(r, 0))
+            return router.getMatch(match().id)?.loadPromise
+          })
+
+          return <>{loaderResult()}</>
+        }}
+      </Solid.Match>
+      <Solid.Match when={match().status === 'success'}>{out()}</Solid.Match>
+    </Solid.Switch>
+  )
+}
+
+export const Outlet = () => {
+  const router = useRouter()
+  const matchId = Solid.useContext(matchContext)
+  const routeId = useRouterState({
+    select: (s) => s.matches.find((d) => d.id === matchId())?.routeId as string,
+  })
+
+  const route = () => router.routesById[routeId()]!
+
+  const parentGlobalNotFound = useRouterState({
+    select: (s) => {
+      const matches = s.matches
+      const parentMatch = matches.find((d) => d.id === matchId())
+      invariant(
+        parentMatch,
+        `Could not find parent match for matchId "${matchId()}"`,
+      )
+      return parentMatch.globalNotFound
+    },
+  })
+
+  const childMatchId = useRouterState({
+    select: (s) => {
+      const matches = s.matches
+      const index = matches.findIndex((d) => d.id === matchId())
+      const v = matches[index + 1]?.id
+      return v
+    },
+  })
+
+  return (
+    <Solid.Switch>
+      <Solid.Match when={parentGlobalNotFound()}>
+        {renderRouteNotFound(router, route(), undefined)}
+      </Solid.Match>
+      <Solid.Match when={childMatchId()}>
+        {(matchId) => {
+          // const nextMatch = <Match matchId={matchId()} />
+
+          return (
+            <Solid.Show
+              when={matchId() === rootRouteId}
+              fallback={<Match matchId={matchId()} />}
+            >
+              <Solid.Suspense
+                fallback={
+                  <Dynamic component={router.options.defaultPendingComponent} />
+                }
+              >
+                <Match matchId={matchId()} />
+              </Solid.Suspense>
+            </Solid.Show>
+          )
+        }}
+      </Solid.Match>
+    </Solid.Switch>
+  )
+}

package/src/Matches.tsx

@@ -0,0 +1,348 @@
+import * as Solid from 'solid-js'
+import warning from 'tiny-warning'
+import { CatchBoundary, ErrorComponent } from './CatchBoundary'
+import { useRouterState } from './useRouterState'
+import { useRouter } from './useRouter'
+import { Transitioner } from './Transitioner'
+import { matchContext } from './matchContext'
+import { Match } from './Match'
+import { SafeFragment } from './SafeFragment'
+import type { AnyRoute } from './route'
+import type {
+  ControlledPromise,
+  DeepPartial,
+  NoInfer,
+  ResolveRelativePath,
+  StaticDataRouteOption,
+} from '@tanstack/router-core'
+import type { AnyRouter, RegisteredRouter, RouterState } from './router'
+import type {
+  MakeOptionalPathParams,
+  MakeOptionalSearchParams,
+  MaskOptions,
+  ResolveRoute,
+  ToSubOptionsProps,
+} from './link'
+import type {
+  AllContext,
+  AllLoaderData,
+  AllParams,
+  FullSearchSchema,
+  ParseRoute,
+  RouteById,
+  RouteByPath,
+  RouteIds,
+} from './routeInfo'
+
+export type MakeRouteMatchFromRoute<TRoute extends AnyRoute> = RouteMatch<
+  TRoute['types']['id'],
+  TRoute['types']['fullPath'],
+  TRoute['types']['allParams'],
+  TRoute['types']['fullSearchSchema'],
+  TRoute['types']['loaderData'],
+  TRoute['types']['allContext'],
+  TRoute['types']['loaderDeps']
+>
+
+export interface RouteMatch<
+  out TRouteId,
+  out TFullPath,
+  out TAllParams,
+  out TFullSearchSchema,
+  out TLoaderData,
+  out TAllContext,
+  out TLoaderDeps,
+> {
+  id: string
+  routeId: TRouteId
+  fullPath: TFullPath
+  index: number
+  pathname: string
+  params: TAllParams
+  _strictParams: TAllParams
+  status: 'pending' | 'success' | 'error' | 'redirected' | 'notFound'
+  isFetching: false | 'beforeLoad' | 'loader'
+  error: unknown
+  paramsError: unknown
+  searchError: unknown
+  updatedAt: number
+  loadPromise?: ControlledPromise<void>
+  beforeLoadPromise?: ControlledPromise<void>
+  loaderPromise?: ControlledPromise<void>
+  loaderData?: TLoaderData
+  __routeContext: Record<string, unknown>
+  __beforeLoadContext: Record<string, unknown>
+  context: TAllContext
+  search: TFullSearchSchema
+  _strictSearch: TFullSearchSchema
+  fetchCount: number
+  abortController: AbortController
+  cause: 'preload' | 'enter' | 'stay'
+  loaderDeps: TLoaderDeps
+  preload: boolean
+  invalid: boolean
+  meta?: Array<Solid.JSX.IntrinsicElements['meta'] | undefined>
+  links?: Array<Solid.JSX.IntrinsicElements['link'] | undefined>
+  scripts?: Array<Solid.JSX.IntrinsicElements['script'] | undefined>
+  headScripts?: Array<Solid.JSX.IntrinsicElements['script'] | undefined>
+  headers?: Record<string, string>
+  globalNotFound?: boolean
+  staticData: StaticDataRouteOption
+  minPendingPromise?: ControlledPromise<void>
+  pendingTimeout?: ReturnType<typeof setTimeout>
+}
+
+export type MakeRouteMatch<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TRouteId = RouteIds<TRouteTree>,
+  TStrict extends boolean = true,
+> = RouteMatch<
+  TRouteId,
+  RouteById<TRouteTree, TRouteId>['types']['fullPath'],
+  TStrict extends false
+    ? AllParams<TRouteTree>
+    : RouteById<TRouteTree, TRouteId>['types']['allParams'],
+  TStrict extends false
+    ? FullSearchSchema<TRouteTree>
+    : RouteById<TRouteTree, TRouteId>['types']['fullSearchSchema'],
+  TStrict extends false
+    ? AllLoaderData<TRouteTree>
+    : RouteById<TRouteTree, TRouteId>['types']['loaderData'],
+  TStrict extends false
+    ? AllContext<TRouteTree>
+    : RouteById<TRouteTree, TRouteId>['types']['allContext'],
+  RouteById<TRouteTree, TRouteId>['types']['loaderDeps']
+>
+
+export type AnyRouteMatch = RouteMatch<any, any, any, any, any, any, any>
+
+export function Matches() {
+  const router = useRouter()
+
+  const pendingElement = router.options.defaultPendingComponent ? (
+    <router.options.defaultPendingComponent />
+  ) : null
+
+  // Do not render a root Suspense during SSR or hydrating from SSR
+  const ResolvedSuspense =
+    router.isServer || (typeof document !== 'undefined' && router.clientSsr)
+      ? SafeFragment
+      : Solid.Suspense
+
+  const inner = (
+    <ResolvedSuspense fallback={pendingElement}>
+      <Transitioner />
+      <MatchesInner />
+    </ResolvedSuspense>
+  )
+
+  return router.options.InnerWrap ? (
+    <router.options.InnerWrap>{inner}</router.options.InnerWrap>
+  ) : (
+    inner
+  )
+}
+
+function MatchesInner() {
+  const matchId = useRouterState({
+    select: (s) => {
+      return s.matches[0]?.id
+    },
+  })
+
+  const resetKey = useRouterState({
+    select: (s) => s.loadedAt,
+  })
+
+  return (
+    <matchContext.Provider value={matchId}>
+      <CatchBoundary
+        getResetKey={() => resetKey()}
+        errorComponent={ErrorComponent}
+        onCatch={(error) => {
+          warning(
+            false,
+            `The following error wasn't caught by any route! At the very least, consider setting an 'errorComponent' in your RootRoute!`,
+          )
+          warning(false, error.message || error.toString())
+        }}
+      >
+        {matchId() ? <Match matchId={matchId()!} /> : null}
+      </CatchBoundary>
+    </matchContext.Provider>
+  )
+}
+
+export interface MatchRouteOptions {
+  pending?: boolean
+  caseSensitive?: boolean
+  includeSearch?: boolean
+  fuzzy?: boolean
+}
+
+export type UseMatchRouteOptions<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TFrom extends string = string,
+  TTo extends string | undefined = undefined,
+  TMaskFrom extends string = TFrom,
+  TMaskTo extends string = '',
+> = ToSubOptionsProps<TRouter, TFrom, TTo> &
+  DeepPartial<MakeOptionalSearchParams<TRouter, TFrom, TTo>> &
+  DeepPartial<MakeOptionalPathParams<TRouter, TFrom, TTo>> &
+  MaskOptions<TRouter, TMaskFrom, TMaskTo> &
+  MatchRouteOptions
+
+export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
+  const router = useRouter()
+
+  const status = useRouterState({
+    select: (s) => s.status,
+  })
+
+  return <
+    const TFrom extends string = string,
+    const TTo extends string | undefined = undefined,
+    const TMaskFrom extends string = TFrom,
+    const TMaskTo extends string = '',
+  >(
+    opts: UseMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,
+  ): Solid.Accessor<
+    false | ResolveRoute<TRouter, TFrom, TTo>['types']['allParams']
+  > => {
+    const { pending, caseSensitive, fuzzy, includeSearch, ...rest } = opts
+
+    const matchRoute = Solid.createMemo(() => {
+      status()
+      return router.matchRoute(rest as any, {
+        pending,
+        caseSensitive,
+        fuzzy,
+        includeSearch,
+      })
+    })
+
+    return matchRoute
+  }
+}
+
+export type MakeMatchRouteOptions<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TFrom extends string = string,
+  TTo extends string | undefined = undefined,
+  TMaskFrom extends string = TFrom,
+  TMaskTo extends string = '',
+> = UseMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> & {
+  // 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<
+          TRouter['routeTree'],
+          ResolveRelativePath<TFrom, NoInfer<TTo>>
+        >['types']['allParams'],
+      ) => Solid.JSX.Element)
+    | Solid.JSX.Element
+}
+
+export function MatchRoute<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string = string,
+  const TTo extends string | undefined = undefined,
+  const TMaskFrom extends string = TFrom,
+  const TMaskTo extends string = '',
+>(props: MakeMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): any {
+  const status = useRouterState({
+    select: (s) => s.status,
+  })
+
+  return (
+    <Solid.Show when={status()} keyed>
+      {(_) => {
+        const matchRoute = useMatchRoute()
+        const params = matchRoute(props as any)() as boolean
+
+        if (typeof props.children === 'function') {
+          return (props.children as any)(params)
+        }
+
+        return params ? props.children : null
+      }}
+    </Solid.Show>
+  )
+}
+
+export type MakeRouteMatchUnion<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TRoute extends AnyRoute = ParseRoute<TRouter['routeTree']>,
+> = TRoute extends any
+  ? RouteMatch<
+      TRoute['id'],
+      TRoute['fullPath'],
+      TRoute['types']['allParams'],
+      TRoute['types']['fullSearchSchema'],
+      TRoute['types']['loaderData'],
+      TRoute['types']['allContext'],
+      TRoute['types']['loaderDeps']
+    >
+  : never
+
+export interface UseMatchesBaseOptions<TRouter extends AnyRouter, TSelected> {
+  select?: (matches: Array<MakeRouteMatchUnion<TRouter>>) => TSelected
+}
+
+export type UseMatchesResult<
+  TRouter extends AnyRouter,
+  TSelected,
+> = unknown extends TSelected ? Array<MakeRouteMatchUnion<TRouter>> : TSelected
+
+export function useMatches<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseMatchesBaseOptions<TRouter, TSelected>,
+): Solid.Accessor<UseMatchesResult<TRouter, TSelected>> {
+  return useRouterState({
+    select: (state: RouterState<TRouter['routeTree']>) => {
+      const matches = state.matches
+      return opts?.select
+        ? opts.select(matches as Array<MakeRouteMatchUnion<TRouter>>)
+        : matches
+    },
+  } as any) as Solid.Accessor<UseMatchesResult<TRouter, TSelected>>
+}
+
+export function useParentMatches<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseMatchesBaseOptions<TRouter, TSelected>,
+): Solid.Accessor<UseMatchesResult<TRouter, TSelected>> {
+  const contextMatchId = Solid.useContext(matchContext)
+
+  return useMatches({
+    select: (matches: Array<MakeRouteMatchUnion<TRouter>>) => {
+      matches = matches.slice(
+        0,
+        matches.findIndex((d) => d.id === contextMatchId()),
+      )
+      return opts?.select ? opts.select(matches) : matches
+    },
+  } as any)
+}
+
+export function useChildMatches<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseMatchesBaseOptions<TRouter, TSelected>,
+): Solid.Accessor<UseMatchesResult<TRouter, TSelected>> {
+  const contextMatchId = Solid.useContext(matchContext)
+
+  return useMatches({
+    select: (matches: Array<MakeRouteMatchUnion<TRouter>>) => {
+      matches = matches.slice(
+        matches.findIndex((d) => d.id === contextMatchId()) + 1,
+      )
+      return opts?.select ? opts.select(matches) : matches
+    },
+  } as any)
+}