@tanstack/solid-router 1.108.0

package/src/useBlocker.tsx

@@ -0,0 +1,298 @@
+import * as Solid from 'solid-js'
+import { useRouter } from './useRouter'
+import type {
+  BlockerFnArgs,
+  HistoryAction,
+  HistoryLocation,
+} from '@tanstack/history'
+import type { AnyRoute, SolidNode } from './route'
+import type { ParseRoute } from './routeInfo'
+import type { AnyRouter, RegisteredRouter } from './router'
+
+interface ShouldBlockFnLocation<
+  out TRouteId,
+  out TFullPath,
+  out TAllParams,
+  out TFullSearchSchema,
+> {
+  routeId: TRouteId
+  fullPath: TFullPath
+  pathname: string
+  params: TAllParams
+  search: TFullSearchSchema
+}
+
+type AnyShouldBlockFnLocation = ShouldBlockFnLocation<any, any, any, any>
+type MakeShouldBlockFnLocationUnion<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TRoute extends AnyRoute = ParseRoute<TRouter['routeTree']>,
+> = TRoute extends any
+  ? ShouldBlockFnLocation<
+      TRoute['id'],
+      TRoute['fullPath'],
+      TRoute['types']['allParams'],
+      TRoute['types']['fullSearchSchema']
+    >
+  : never
+
+type BlockerResolver<TRouter extends AnyRouter = RegisteredRouter> =
+  | {
+      status: 'blocked'
+      current: MakeShouldBlockFnLocationUnion<TRouter>
+      next: MakeShouldBlockFnLocationUnion<TRouter>
+      action: HistoryAction
+      proceed: () => void
+      reset: () => void
+    }
+  | {
+      status: 'idle'
+      current: undefined
+      next: undefined
+      action: undefined
+      proceed: undefined
+      reset: undefined
+    }
+
+type ShouldBlockFnArgs<TRouter extends AnyRouter = RegisteredRouter> = {
+  current: MakeShouldBlockFnLocationUnion<TRouter>
+  next: MakeShouldBlockFnLocationUnion<TRouter>
+  action: HistoryAction
+}
+
+export type ShouldBlockFn<TRouter extends AnyRouter = RegisteredRouter> = (
+  args: ShouldBlockFnArgs<TRouter>,
+) => boolean | Promise<boolean>
+export type UseBlockerOpts<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TWithResolver extends boolean = boolean,
+> = {
+  shouldBlockFn: ShouldBlockFn<TRouter>
+  enableBeforeUnload?: boolean | (() => boolean)
+  disabled?: boolean
+  withResolver?: TWithResolver
+}
+
+type LegacyBlockerFn = () => Promise<any> | any
+type LegacyBlockerOpts = {
+  blockerFn?: LegacyBlockerFn
+  condition?: boolean | any
+}
+
+function _resolveBlockerOpts(
+  opts?: UseBlockerOpts | LegacyBlockerOpts | LegacyBlockerFn,
+  condition?: boolean | any,
+): UseBlockerOpts {
+  if (opts === undefined) {
+    return {
+      shouldBlockFn: () => true,
+      withResolver: false,
+    }
+  }
+
+  if ('shouldBlockFn' in opts) {
+    return opts
+  }
+
+  if (typeof opts === 'function') {
+    const shouldBlock = Boolean(condition ?? true)
+
+    const _customBlockerFn = async () => {
+      if (shouldBlock) return await opts()
+      return false
+    }
+
+    return {
+      shouldBlockFn: _customBlockerFn,
+      enableBeforeUnload: shouldBlock,
+      withResolver: false,
+    }
+  }
+
+  const shouldBlock = Boolean(opts.condition ?? true)
+  const fn = opts.blockerFn
+
+  const _customBlockerFn = async () => {
+    if (shouldBlock && fn !== undefined) {
+      return await fn()
+    }
+    return shouldBlock
+  }
+
+  return {
+    shouldBlockFn: _customBlockerFn,
+    enableBeforeUnload: shouldBlock,
+    withResolver: fn === undefined,
+  }
+}
+
+export function useBlocker<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TWithResolver extends boolean = false,
+>(
+  opts: UseBlockerOpts<TRouter, TWithResolver>,
+): TWithResolver extends true ? Solid.Accessor<BlockerResolver<TRouter>> : void
+
+/**
+ * @deprecated Use the shouldBlockFn property instead
+ */
+export function useBlocker(
+  blockerFnOrOpts?: LegacyBlockerOpts,
+): Solid.Accessor<BlockerResolver>
+
+/**
+ * @deprecated Use the UseBlockerOpts object syntax instead
+ */
+export function useBlocker(
+  blockerFn?: LegacyBlockerFn,
+  condition?: boolean | any,
+): Solid.Accessor<BlockerResolver>
+
+export function useBlocker(
+  opts?: UseBlockerOpts | LegacyBlockerOpts | LegacyBlockerFn,
+  condition?: boolean | any,
+): Solid.Accessor<BlockerResolver> | void {
+  const {
+    shouldBlockFn,
+    enableBeforeUnload = true,
+    disabled = false,
+    withResolver = false,
+  } = _resolveBlockerOpts(opts, condition)
+
+  const router = useRouter()
+  const { history } = router
+
+  const [resolver, setResolver] = Solid.createSignal<BlockerResolver>({
+    status: 'idle',
+    current: undefined,
+    next: undefined,
+    action: undefined,
+    proceed: undefined,
+    reset: undefined,
+  })
+
+  Solid.createEffect(() => {
+    const blockerFnComposed = async (blockerFnArgs: BlockerFnArgs) => {
+      function getLocation(
+        location: HistoryLocation,
+      ): AnyShouldBlockFnLocation {
+        const parsedLocation = router.parseLocation(undefined, location)
+        const matchedRoutes = router.getMatchedRoutes(parsedLocation)
+        if (matchedRoutes.foundRoute === undefined) {
+          throw new Error(`No route found for location ${location.href}`)
+        }
+        return {
+          routeId: matchedRoutes.foundRoute.id,
+          fullPath: matchedRoutes.foundRoute.fullPath,
+          pathname: parsedLocation.pathname,
+          params: matchedRoutes.routeParams,
+          search: parsedLocation.search,
+        }
+      }
+
+      const current = getLocation(blockerFnArgs.currentLocation)
+      const next = getLocation(blockerFnArgs.nextLocation)
+
+      const shouldBlock = await shouldBlockFn({
+        action: blockerFnArgs.action,
+        current,
+        next,
+      })
+      if (!withResolver) {
+        return shouldBlock
+      }
+
+      if (!shouldBlock) {
+        return false
+      }
+
+      const promise = new Promise<boolean>((resolve) => {
+        setResolver({
+          status: 'blocked',
+          current,
+          next,
+          action: blockerFnArgs.action,
+          proceed: () => resolve(false),
+          reset: () => resolve(true),
+        })
+      })
+
+      const canNavigateAsync = await promise
+      setResolver({
+        status: 'idle',
+        current: undefined,
+        next: undefined,
+        action: undefined,
+        proceed: undefined,
+        reset: undefined,
+      })
+
+      return canNavigateAsync
+    }
+
+    return disabled
+      ? undefined
+      : history.block({ blockerFn: blockerFnComposed, enableBeforeUnload })
+  })
+
+  return resolver
+}
+
+const _resolvePromptBlockerArgs = (
+  props: PromptProps | LegacyPromptProps,
+): UseBlockerOpts => {
+  if ('shouldBlockFn' in props) {
+    return { ...props }
+  }
+
+  const shouldBlock = Boolean(props.condition ?? true)
+  const fn = props.blockerFn
+
+  const _customBlockerFn = async () => {
+    if (shouldBlock && fn !== undefined) {
+      return await fn()
+    }
+    return shouldBlock
+  }
+
+  return {
+    shouldBlockFn: _customBlockerFn,
+    enableBeforeUnload: shouldBlock,
+    withResolver: fn === undefined,
+  }
+}
+
+export function Block<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TWithResolver extends boolean = boolean,
+>(opts: PromptProps<TRouter, TWithResolver>): SolidNode
+
+/**
+ *  @deprecated Use the UseBlockerOpts property instead
+ */
+export function Block(opts: LegacyPromptProps): SolidNode
+
+export function Block(opts: PromptProps | LegacyPromptProps): SolidNode {
+  const { children, ...rest } = opts
+  const args = _resolvePromptBlockerArgs(rest)
+
+  const resolver = useBlocker(args)
+  return children
+    ? typeof children === 'function'
+      ? children(resolver as any)
+      : children
+    : null
+}
+
+type LegacyPromptProps = {
+  blockerFn?: LegacyBlockerFn
+  condition?: boolean | any
+  children?: SolidNode | ((params: BlockerResolver) => SolidNode)
+}
+
+type PromptProps<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TWithResolver extends boolean = boolean,
+  TParams = TWithResolver extends true ? BlockerResolver<TRouter> : void,
+> = UseBlockerOpts<TRouter, TWithResolver> & {
+  children?: SolidNode | ((params: TParams) => SolidNode)
+}

package/src/useCanGoBack.ts

@@ -0,0 +1,5 @@
+import { useRouterState } from './useRouterState'
+
+export function useCanGoBack() {
+  return useRouterState({ select: (s) => s.location.state.__TSR_index !== 0 })
+}

package/src/useLoaderData.tsx

@@ -0,0 +1,64 @@
+import { useMatch } from './useMatch'
+import type { Accessor } from 'solid-js'
+import type { AnyRouter, RegisteredRouter } from './router'
+import type { AllLoaderData, RouteById } from './routeInfo'
+import type { StrictOrFrom } from './utils'
+import type { Expand } from '@tanstack/router-core'
+
+export interface UseLoaderDataBaseOptions<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TSelected,
+> {
+  select?: (match: ResolveLoaderData<TRouter, TFrom, TStrict>) => TSelected
+}
+
+export type UseLoaderDataOptions<
+  TRouter extends AnyRouter,
+  TFrom extends string | undefined,
+  TStrict extends boolean,
+  TSelected,
+> = StrictOrFrom<TRouter, TFrom, TStrict> &
+  UseLoaderDataBaseOptions<TRouter, TFrom, TStrict, TSelected>
+
+export type ResolveLoaderData<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+> = TStrict extends false
+  ? AllLoaderData<TRouter['routeTree']>
+  : Expand<RouteById<TRouter['routeTree'], TFrom>['types']['loaderData']>
+
+export type UseLoaderDataResult<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TSelected,
+> = unknown extends TSelected
+  ? ResolveLoaderData<TRouter, TFrom, TStrict>
+  : TSelected
+
+export type UseLoaderDataRoute<out TId> = <
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseLoaderDataBaseOptions<TRouter, TId, true, TSelected>,
+) => Accessor<UseLoaderDataResult<TRouter, TId, true, TSelected>>
+
+export function useLoaderData<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string | undefined = undefined,
+  TStrict extends boolean = true,
+  TSelected = unknown,
+>(
+  opts: UseLoaderDataOptions<TRouter, TFrom, TStrict, TSelected>,
+): Accessor<UseLoaderDataResult<TRouter, TFrom, TStrict, TSelected>> {
+  return useMatch({
+    from: opts.from!,
+    strict: opts.strict,
+    select: (s: any) => {
+      return opts.select ? opts.select(s.loaderData) : s.loaderData
+    },
+  } as any) as any
+}

package/src/useLoaderDeps.tsx

@@ -0,0 +1,52 @@
+import { useMatch } from './useMatch'
+import type { AnyRouter, RegisteredRouter } from './router'
+import type { RouteById } from './routeInfo'
+import type { StrictOrFrom } from './utils'
+import type { Expand } from '@tanstack/router-core'
+
+export interface UseLoaderDepsBaseOptions<
+  TRouter extends AnyRouter,
+  TFrom,
+  TSelected,
+> {
+  select?: (deps: ResolveLoaderDeps<TRouter, TFrom>) => TSelected
+}
+
+export type UseLoaderDepsOptions<
+  TRouter extends AnyRouter,
+  TFrom extends string | undefined,
+  TSelected,
+> = StrictOrFrom<TRouter, TFrom> &
+  UseLoaderDepsBaseOptions<TRouter, TFrom, TSelected>
+export type ResolveLoaderDeps<TRouter extends AnyRouter, TFrom> = Expand<
+  RouteById<TRouter['routeTree'], TFrom>['types']['loaderDeps']
+>
+
+export type UseLoaderDepsResult<
+  TRouter extends AnyRouter,
+  TFrom,
+  TSelected,
+> = unknown extends TSelected ? ResolveLoaderDeps<TRouter, TFrom> : TSelected
+
+export type UseLoaderDepsRoute<out TId> = <
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseLoaderDepsBaseOptions<TRouter, TId, TSelected>,
+) => UseLoaderDepsResult<TRouter, TId, TSelected>
+
+export function useLoaderDeps<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string | undefined = undefined,
+  TSelected = unknown,
+>(
+  opts: UseLoaderDepsOptions<TRouter, TFrom, TSelected>,
+): UseLoaderDepsResult<TRouter, TFrom, TSelected> {
+  const { select, ...rest } = opts
+  return useMatch({
+    ...rest,
+    select: (s) => {
+      return select ? select(s.loaderDeps) : s.loaderDeps
+    },
+  }) as UseLoaderDepsResult<TRouter, TFrom, TSelected>
+}

package/src/useLocation.tsx

@@ -0,0 +1,26 @@
+import { useRouterState } from './useRouterState'
+import type { Accessor } from 'solid-js'
+import type { AnyRouter, RegisteredRouter, RouterState } from './router'
+
+export interface UseLocationBaseOptions<TRouter extends AnyRouter, TSelected> {
+  select?: (state: RouterState<TRouter['routeTree']>['location']) => TSelected
+}
+
+export type UseLocationResult<
+  TRouter extends AnyRouter,
+  TSelected,
+> = unknown extends TSelected
+  ? RouterState<TRouter['routeTree']>['location']
+  : TSelected
+
+export function useLocation<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseLocationBaseOptions<TRouter, TSelected>,
+): Accessor<UseLocationResult<TRouter, TSelected>> {
+  return useRouterState({
+    select: (state: any) =>
+      opts?.select ? opts.select(state.location) : state.location,
+  } as any) as Accessor<UseLocationResult<TRouter, TSelected>>
+}

package/src/useMatch.tsx

@@ -0,0 +1,96 @@
+import * as Solid from 'solid-js'
+import invariant from 'tiny-invariant'
+import { useRouterState } from './useRouterState'
+import { dummyMatchContext, matchContext } from './matchContext'
+import type { AnyRouter, RegisteredRouter } from './router'
+import type { MakeRouteMatch, MakeRouteMatchUnion } from './Matches'
+import type { StrictOrFrom } from './utils'
+import type { ThrowOrOptional } from '@tanstack/router-core'
+
+export interface UseMatchBaseOptions<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+> {
+  select?: (
+    match: MakeRouteMatch<TRouter['routeTree'], TFrom, TStrict>,
+  ) => TSelected
+  shouldThrow?: TThrow
+}
+
+export type UseMatchRoute<out TFrom> = <
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseMatchBaseOptions<TRouter, TFrom, true, true, TSelected>,
+) => Solid.Accessor<UseMatchResult<TRouter, TFrom, true, TSelected>>
+
+export type UseMatchOptions<
+  TRouter extends AnyRouter,
+  TFrom extends string | undefined,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+> = StrictOrFrom<TRouter, TFrom, TStrict> &
+  UseMatchBaseOptions<TRouter, TFrom, TStrict, TThrow, TSelected>
+
+export type UseMatchResult<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TSelected,
+> = unknown extends TSelected
+  ? TStrict extends true
+    ? MakeRouteMatch<TRouter['routeTree'], TFrom, TStrict>
+    : MakeRouteMatchUnion<TRouter>
+  : TSelected
+
+export type ThrowConstraint<
+  TStrict extends boolean,
+  TThrow extends boolean,
+> = TStrict extends false ? (TThrow extends true ? never : TThrow) : TThrow
+
+export function useMatch<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string | undefined = undefined,
+  TStrict extends boolean = true,
+  TThrow extends boolean = true,
+  TSelected = unknown,
+>(
+  opts: UseMatchOptions<
+    TRouter,
+    TFrom,
+    TStrict,
+    ThrowConstraint<TStrict, TThrow>,
+    TSelected
+  >,
+): Solid.Accessor<
+  ThrowOrOptional<UseMatchResult<TRouter, TFrom, TStrict, TSelected>, TThrow>
+> {
+  const nearestMatchId = Solid.useContext(
+    opts.from ? dummyMatchContext : matchContext,
+  )
+
+  const matchSelection = useRouterState({
+    select: (state: any) => {
+      const match = state.matches.find((d: any) =>
+        opts.from ? opts.from === d.routeId : d.id === nearestMatchId(),
+      )
+
+      invariant(
+        !((opts.shouldThrow ?? true) && !match),
+        `Could not find ${opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`,
+      )
+
+      if (match === undefined) {
+        return undefined
+      }
+
+      return opts.select ? opts.select(match) : match
+    },
+  } as any)
+
+  return matchSelection as any
+}

package/src/useNavigate.tsx

@@ -0,0 +1,61 @@
+import * as Solid from 'solid-js'
+import { useRouter } from './useRouter'
+import type { FromPathOption, NavigateOptions } from './link'
+import type { AnyRouter, RegisteredRouter } from './router'
+
+export type UseNavigateResult<TDefaultFrom extends string> = <
+  TRouter extends RegisteredRouter,
+  TTo extends string | undefined,
+  TFrom extends string = TDefaultFrom,
+  TMaskFrom extends string = TFrom,
+  TMaskTo extends string = '',
+>({
+  from,
+  ...rest
+}: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>) => Promise<void>
+
+export function useNavigate<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TDefaultFrom extends string = string,
+>(_defaultOpts?: {
+  from?: FromPathOption<TRouter, TDefaultFrom>
+}): UseNavigateResult<TDefaultFrom> {
+  const { navigate } = useRouter()
+
+  return ((options: NavigateOptions) => {
+    return navigate({ ...options })
+  }) as UseNavigateResult<TDefaultFrom>
+}
+
+// NOTE: I don't know of anyone using this. It's undocumented, so let's wait until someone needs it
+// export function typedNavigate<
+//   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+//   TDefaultFrom extends RoutePaths<TRouteTree> = '/',
+// >(navigate: (opts: NavigateOptions<any>) => Promise<void>) {
+//   return navigate as <
+//     TFrom extends RoutePaths<TRouteTree> = TDefaultFrom,
+//     TTo extends string = '',
+//     TMaskFrom extends RoutePaths<TRouteTree> = '/',
+//     TMaskTo extends string = '',
+//   >(
+//     opts?: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
+//   ) => Promise<void>
+// } //
+
+export function Navigate<
+  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: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): null {
+  const { navigate } = useRouter()
+
+  Solid.onMount(() => {
+    navigate({
+      ...props,
+    })
+  })
+
+  return null
+}

package/src/useParams.tsx

@@ -0,0 +1,83 @@
+import { useMatch } from './useMatch'
+import type { ThrowConstraint } from './useMatch'
+import type { Accessor } from 'solid-js'
+import type { AllParams, RouteById } from './routeInfo'
+import type { AnyRouter, RegisteredRouter } from './router'
+import type { StrictOrFrom } from './utils'
+import type { Expand, ThrowOrOptional } from '@tanstack/router-core'
+
+export interface UseParamsBaseOptions<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+> {
+  select?: (params: ResolveParams<TRouter, TFrom, TStrict>) => TSelected
+  shouldThrow?: TThrow
+}
+
+export type UseParamsOptions<
+  TRouter extends AnyRouter,
+  TFrom extends string | undefined,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+> = StrictOrFrom<TRouter, TFrom, TStrict> &
+  UseParamsBaseOptions<TRouter, TFrom, TStrict, TThrow, TSelected>
+export type ResolveParams<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+> = TStrict extends false
+  ? AllParams<TRouter['routeTree']>
+  : Expand<RouteById<TRouter['routeTree'], TFrom>['types']['allParams']>
+
+export type UseParamsResult<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TSelected,
+> = unknown extends TSelected
+  ? ResolveParams<TRouter, TFrom, TStrict>
+  : TSelected
+
+export type UseParamsRoute<out TFrom> = <
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseParamsBaseOptions<
+    TRouter,
+    TFrom,
+    /* TStrict */ true,
+    /* TThrow */ true,
+    TSelected
+  >,
+) => Accessor<UseParamsResult<TRouter, TFrom, true, TSelected>>
+
+export function useParams<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string | undefined = undefined,
+  TStrict extends boolean = true,
+  TThrow extends boolean = true,
+  TSelected = unknown,
+>(
+  opts: UseParamsOptions<
+    TRouter,
+    TFrom,
+    TStrict,
+    ThrowConstraint<TStrict, TThrow>,
+    TSelected
+  >,
+): Accessor<
+  ThrowOrOptional<UseParamsResult<TRouter, TFrom, TStrict, TSelected>, TThrow>
+> {
+  return useMatch({
+    from: opts.from!,
+    strict: opts.strict,
+    shouldThrow: opts.shouldThrow,
+    select: (match: any) => {
+      return opts.select ? opts.select(match.params) : match.params
+    },
+  } as any) as any
+}