@tanstack/solid-router 1.20.3-alpha.1

package/src/router.ts

@@ -0,0 +1,112 @@
+import { RouterCore } from '@tanstack/router-core'
+import { createFileRoute, createLazyFileRoute } from './fileRoute'
+import type { RouterHistory } from '@tanstack/history'
+import type {
+  AnyRoute,
+  CreateRouterFn,
+  RouterConstructorOptions,
+  TrailingSlashOption,
+} from '@tanstack/router-core'
+import type {
+  ErrorRouteComponent,
+  NotFoundRouteComponent,
+  RouteComponent,
+} from './route'
+import type { JSX } from 'solid-js'
+
+declare module '@tanstack/router-core' {
+  export interface RouterOptionsExtensions {
+    /**
+     * The default `component` a route should use if no component is provided.
+     *
+     * @default Outlet
+     * @link [API Docs](https://tanstack.com/router/latest/docs/framework/solid/api/router/RouterOptionsType#defaultcomponent-property)
+     */
+    defaultComponent?: RouteComponent
+    /**
+     * The default `errorComponent` a route should use if no error component is provided.
+     *
+     * @default ErrorComponent
+     * @link [API Docs](https://tanstack.com/router/latest/docs/framework/solid/api/router/RouterOptionsType#defaulterrorcomponent-property)
+     * @link [Guide](https://tanstack.com/router/latest/docs/framework/solid/guide/data-loading#handling-errors-with-routeoptionserrorcomponent)
+     */
+    defaultErrorComponent?: ErrorRouteComponent
+    /**
+     * The default `pendingComponent` a route should use if no pending component is provided.
+     *
+     * @link [API Docs](https://tanstack.com/router/latest/docs/framework/solid/api/router/RouterOptionsType#defaultpendingcomponent-property)
+     * @link [Guide](https://tanstack.com/router/latest/docs/framework/solid/guide/data-loading#showing-a-pending-component)
+     */
+    defaultPendingComponent?: RouteComponent
+    /**
+     * The default `notFoundComponent` a route should use if no notFound component is provided.
+     *
+     * @default NotFound
+     * @link [API Docs](https://tanstack.com/router/latest/docs/framework/solid/api/router/RouterOptionsType#defaultnotfoundcomponent-property)
+     * @link [Guide](https://tanstack.com/router/latest/docs/framework/solid/guide/not-found-errors#default-router-wide-not-found-handling)
+     */
+    defaultNotFoundComponent?: NotFoundRouteComponent
+    /**
+     * A component that will be used to wrap the entire router.
+     *
+     * This is useful for providing a context to the entire router.
+     *
+     * @link [API Docs](https://tanstack.com/router/latest/docs/framework/solid/api/router/RouterOptionsType#wrap-property)
+     */
+    Wrap?: (props: { children: any }) => JSX.Element
+    /**
+     * A component that will be used to wrap the inner contents of the router.
+     *
+     * This is useful for providing a context to the inner contents of the router where you also need access to the router context and hooks.
+     *
+     * @link [API Docs](https://tanstack.com/router/latest/docs/framework/solid/api/router/RouterOptionsType#innerwrap-property)
+     */
+    InnerWrap?: (props: { children: any }) => JSX.Element
+
+    /**
+     * The default `onCatch` handler for errors caught by the Router ErrorBoundary
+     *
+     * @link [API Docs](https://tanstack.com/router/latest/docs/framework/react/api/router/RouterOptionsType#defaultoncatch-property)
+     * @link [Guide](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#handling-errors-with-routeoptionsoncatch)
+     */
+    defaultOnCatch?: (error: Error) => void
+  }
+}
+
+export const createRouter: CreateRouterFn = (options) => {
+  return new Router(options)
+}
+
+export class Router<
+  in out TRouteTree extends AnyRoute,
+  in out TTrailingSlashOption extends TrailingSlashOption = 'never',
+  in out TDefaultStructuralSharingOption extends boolean = false,
+  in out TRouterHistory extends RouterHistory = RouterHistory,
+  in out TDehydrated extends Record<string, any> = Record<string, any>,
+> extends RouterCore<
+  TRouteTree,
+  TTrailingSlashOption,
+  TDefaultStructuralSharingOption,
+  TRouterHistory,
+  TDehydrated
+> {
+  constructor(
+    options: RouterConstructorOptions<
+      TRouteTree,
+      TTrailingSlashOption,
+      TDefaultStructuralSharingOption,
+      TRouterHistory,
+      TDehydrated
+    >,
+  ) {
+    super(options)
+  }
+}
+
+if (typeof globalThis !== 'undefined') {
+  ;(globalThis as any).createFileRoute = createFileRoute
+  ;(globalThis as any).createLazyFileRoute = createLazyFileRoute
+} else if (typeof window !== 'undefined') {
+  ;(window as any).createFileRoute = createFileRoute
+  ;(window as any).createFileRoute = createLazyFileRoute
+}

package/src/routerContext.tsx

@@ -0,0 +1,26 @@
+import * as Solid from 'solid-js'
+import type { AnyRouter } from '@tanstack/router-core'
+
+declare global {
+  interface Window {
+    __TSR_ROUTER_CONTEXT__?: Solid.Context<AnyRouter>
+  }
+}
+
+const routerContext = Solid.createContext<AnyRouter>(
+  null as unknown as AnyRouter,
+)
+
+export function getRouterContext() {
+  if (typeof document === 'undefined') {
+    return routerContext
+  }
+
+  if (window.__TSR_ROUTER_CONTEXT__) {
+    return window.__TSR_ROUTER_CONTEXT__
+  }
+
+  window.__TSR_ROUTER_CONTEXT__ = routerContext as any
+
+  return routerContext
+}

package/src/scroll-restoration.tsx

@@ -0,0 +1,29 @@
+import {
+  defaultGetScrollRestorationKey,
+  restoreScroll,
+  storageKey,
+} from '@tanstack/router-core'
+import { useRouter } from './useRouter'
+import { ScriptOnce } from './ScriptOnce'
+
+export function ScrollRestoration() {
+  const router = useRouter()
+  const getKey =
+    router.options.getScrollRestorationKey || defaultGetScrollRestorationKey
+  const userKey = getKey(router.latestLocation)
+  const resolvedKey =
+    userKey !== defaultGetScrollRestorationKey(router.latestLocation)
+      ? userKey
+      : null
+
+  if (!router.isScrollRestoring || !router.isServer) {
+    return null
+  }
+
+  return (
+    <ScriptOnce
+      children={`(${restoreScroll.toString()})(${JSON.stringify(storageKey)},${JSON.stringify(resolvedKey)}, undefined, true)`}
+      log={false}
+    />
+  )
+}

package/src/typePrimitives.ts

@@ -0,0 +1,74 @@
+import type { LinkComponentProps } from './link'
+import type { UseParamsOptions } from './useParams'
+import type { UseSearchOptions } from './useSearch'
+import type {
+  AnyRouter,
+  Constrain,
+  InferFrom,
+  InferMaskFrom,
+  InferMaskTo,
+  InferSelected,
+  InferShouldThrow,
+  InferStrict,
+  InferTo,
+  RegisteredRouter,
+} from '@tanstack/router-core'
+
+export type ValidateLinkOptions<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TOptions = unknown,
+  TDefaultFrom extends string = string,
+  TComp = 'a',
+> = Constrain<
+  TOptions,
+  LinkComponentProps<
+    TComp,
+    TRouter,
+    InferFrom<TOptions, TDefaultFrom>,
+    InferTo<TOptions>,
+    InferMaskFrom<TOptions>,
+    InferMaskTo<TOptions>
+  >
+>
+
+export type ValidateLinkOptionsArray<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TOptions extends ReadonlyArray<any> = ReadonlyArray<unknown>,
+  TDefaultFrom extends string = string,
+  TComp = 'a',
+> = {
+  [K in keyof TOptions]: ValidateLinkOptions<
+    TRouter,
+    TOptions[K],
+    TDefaultFrom,
+    TComp
+  >
+}
+
+export type ValidateUseSearchOptions<
+  TOptions,
+  TRouter extends AnyRouter = RegisteredRouter,
+> = Constrain<
+  TOptions,
+  UseSearchOptions<
+    TRouter,
+    InferFrom<TOptions>,
+    InferStrict<TOptions>,
+    InferShouldThrow<TOptions>,
+    InferSelected<TOptions>
+  >
+>
+
+export type ValidateUseParamsOptions<
+  TOptions,
+  TRouter extends AnyRouter = RegisteredRouter,
+> = Constrain<
+  TOptions,
+  UseParamsOptions<
+    TRouter,
+    InferFrom<TOptions>,
+    InferStrict<TOptions>,
+    InferShouldThrow<TOptions>,
+    InferSelected<TOptions>
+  >
+>

package/src/useBlocker.tsx

@@ -0,0 +1,305 @@
+import * as Solid from 'solid-js'
+import { useRouter } from './useRouter'
+import type {
+  BlockerFnArgs,
+  HistoryAction,
+  HistoryLocation,
+} from '@tanstack/history'
+import type { SolidNode } from './route'
+import type {
+  AnyRoute,
+  AnyRouter,
+  ParseRoute,
+  RegisteredRouter,
+} from '@tanstack/router-core'
+
+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.pathname,
+          undefined,
+        )
+        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,50 @@
+import { useMatch } from './useMatch'
+import type { Accessor } from 'solid-js'
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  ResolveUseLoaderData,
+  StrictOrFrom,
+  UseLoaderDataResult,
+} from '@tanstack/router-core'
+
+export interface UseLoaderDataBaseOptions<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TSelected,
+> {
+  select?: (match: ResolveUseLoaderData<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 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,46 @@
+import { useMatch } from './useMatch'
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  ResolveUseLoaderDeps,
+  StrictOrFrom,
+  UseLoaderDepsResult,
+} from '@tanstack/router-core'
+
+export interface UseLoaderDepsBaseOptions<
+  TRouter extends AnyRouter,
+  TFrom,
+  TSelected,
+> {
+  select?: (deps: ResolveUseLoaderDeps<TRouter, TFrom>) => TSelected
+}
+
+export type UseLoaderDepsOptions<
+  TRouter extends AnyRouter,
+  TFrom extends string | undefined,
+  TSelected,
+> = StrictOrFrom<TRouter, TFrom> &
+  UseLoaderDepsBaseOptions<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,30 @@
+import { useRouterState } from './useRouterState'
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  RouterState,
+} from '@tanstack/router-core'
+import type { Accessor } from 'solid-js'
+
+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>>
+}