@tanstack/solid-router 1.20.3-alpha.1

package/src/not-found.tsx

@@ -0,0 +1,42 @@
+import { isNotFound } from '@tanstack/router-core'
+import { CatchBoundary } from './CatchBoundary'
+import { useRouterState } from './useRouterState'
+import type * as Solid from 'solid-js'
+import type { NotFoundError } from '@tanstack/router-core'
+
+export function CatchNotFound(props: {
+  fallback?: (error: NotFoundError) => Solid.JSX.Element
+  onCatch?: (error: Error) => void
+  children: Solid.JSX.Element
+}) {
+  // TODO: Some way for the user to programmatically reset the not-found boundary?
+  const resetKey = useRouterState({
+    select: (s) => `not-found-${s.location.pathname}-${s.status}`,
+  })
+
+  return (
+    <CatchBoundary
+      getResetKey={() => resetKey()}
+      onCatch={(error) => {
+        if (isNotFound(error)) {
+          props.onCatch?.(error)
+        } else {
+          throw error
+        }
+      }}
+      errorComponent={({ error }: { error: Error }) => {
+        if (isNotFound(error)) {
+          return props.fallback?.(error)
+        } else {
+          throw error
+        }
+      }}
+    >
+      {props.children}
+    </CatchBoundary>
+  )
+}
+
+export function DefaultGlobalNotFound() {
+  return <p>Not Found</p>
+}

package/src/renderRouteNotFound.tsx

@@ -0,0 +1,26 @@
+import warning from 'tiny-warning'
+import { DefaultGlobalNotFound } from './not-found'
+import type { AnyRoute, AnyRouter } from '@tanstack/router-core'
+
+export function renderRouteNotFound(
+  router: AnyRouter,
+  route: AnyRoute,
+  data: any,
+) {
+  if (!route.options.notFoundComponent) {
+    if (router.options.defaultNotFoundComponent) {
+      return <router.options.defaultNotFoundComponent data={data} />
+    }
+
+    if (process.env.NODE_ENV === 'development') {
+      warning(
+        route.options.notFoundComponent,
+        `A notFoundError was encountered on the route with ID "${route.id}", but a notFoundComponent option was not configured, nor was a router level defaultNotFoundComponent configured. Consider configuring at least one of these to avoid TanStack Router's overly generic defaultNotFoundComponent (<div>Not Found<div>)`,
+      )
+    }
+
+    return <DefaultGlobalNotFound />
+  }
+
+  return <route.options.notFoundComponent data={data} />
+}

package/src/route.tsx

@@ -0,0 +1,550 @@
+import {
+  BaseRootRoute,
+  BaseRoute,
+  BaseRouteApi,
+  notFound,
+} from '@tanstack/router-core'
+import { Link } from './link'
+import { useLoaderData } from './useLoaderData'
+import { useLoaderDeps } from './useLoaderDeps'
+import { useParams } from './useParams'
+import { useSearch } from './useSearch'
+import { useNavigate } from './useNavigate'
+import { useMatch } from './useMatch'
+import { useRouter } from './useRouter'
+import type {
+  AnyContext,
+  AnyRoute,
+  AnyRouter,
+  ConstrainLiteral,
+  ErrorComponentProps,
+  NotFoundError,
+  NotFoundRouteProps,
+  RegisteredRouter,
+  ResolveFullPath,
+  ResolveId,
+  ResolveParams,
+  RootRouteId,
+  RootRouteOptions,
+  RouteConstraints,
+  RouteIds,
+  RouteMask,
+  RouteOptions,
+  RouteTypesById,
+  RouterCore,
+  ToMaskOptions,
+  UseNavigateResult,
+} from '@tanstack/router-core'
+import type { UseLoaderDataRoute } from './useLoaderData'
+import type { UseMatchRoute } from './useMatch'
+import type { UseLoaderDepsRoute } from './useLoaderDeps'
+import type { UseParamsRoute } from './useParams'
+import type { UseSearchRoute } from './useSearch'
+import type * as Solid from 'solid-js'
+import type { UseRouteContextRoute } from './useRouteContext'
+import type { LinkComponentRoute } from './link'
+
+declare module '@tanstack/router-core' {
+  export interface UpdatableRouteOptionsExtensions {
+    component?: RouteComponent
+    errorComponent?: false | null | ErrorRouteComponent
+    notFoundComponent?: NotFoundRouteComponent
+    pendingComponent?: RouteComponent
+  }
+
+  export interface RouteExtensions<
+    in out TId extends string,
+    in out TFullPath extends string,
+  > {
+    useMatch: UseMatchRoute<TId>
+    useRouteContext: UseRouteContextRoute<TId>
+    useSearch: UseSearchRoute<TId>
+    useParams: UseParamsRoute<TId>
+    useLoaderDeps: UseLoaderDepsRoute<TId>
+    useLoaderData: UseLoaderDataRoute<TId>
+    useNavigate: () => UseNavigateResult<TFullPath>
+    Link: LinkComponentRoute<TFullPath>
+  }
+}
+
+export function getRouteApi<
+  const TId,
+  TRouter extends AnyRouter = RegisteredRouter,
+>(id: ConstrainLiteral<TId, RouteIds<TRouter['routeTree']>>) {
+  return new RouteApi<TId, TRouter>({ id })
+}
+
+export class RouteApi<
+  TId,
+  TRouter extends AnyRouter = RegisteredRouter,
+> extends BaseRouteApi<TId, TRouter> {
+  /**
+   * @deprecated Use the `getRouteApi` function instead.
+   */
+  constructor({ id }: { id: TId }) {
+    super({ id })
+  }
+
+  useMatch: UseMatchRoute<TId> = (opts) => {
+    return useMatch({
+      select: opts?.select,
+      from: this.id,
+    } as any) as any
+  }
+
+  useRouteContext: UseRouteContextRoute<TId> = (opts) => {
+    return useMatch({
+      from: this.id as any,
+      select: (d) => (opts?.select ? opts.select(d.context) : d.context),
+    }) as any
+  }
+
+  useSearch: UseSearchRoute<TId> = (opts) => {
+    return useSearch({
+      select: opts?.select,
+      from: this.id,
+    } as any) as any
+  }
+
+  useParams: UseParamsRoute<TId> = (opts) => {
+    return useParams({
+      select: opts?.select,
+      from: this.id,
+    } as any) as any
+  }
+
+  useLoaderDeps: UseLoaderDepsRoute<TId> = (opts) => {
+    return useLoaderDeps({ ...opts, from: this.id, strict: false } as any)
+  }
+
+  useLoaderData: UseLoaderDataRoute<TId> = (opts) => {
+    return useLoaderData({ ...opts, from: this.id, strict: false } as any)
+  }
+
+  useNavigate = (): UseNavigateResult<
+    RouteTypesById<TRouter, TId>['fullPath']
+  > => {
+    const router = useRouter()
+    return useNavigate({ from: router.routesById[this.id as string].fullPath })
+  }
+
+  notFound = (opts?: NotFoundError) => {
+    return notFound({ routeId: this.id as string, ...opts })
+  }
+
+  Link: LinkComponentRoute<RouteTypesById<TRouter, TId>['fullPath']> = ((
+    props,
+  ) => {
+    const router = useRouter()
+    const fullPath = router.routesById[this.id as string].fullPath
+    return <Link from={fullPath as never} {...props} />
+  }) as LinkComponentRoute<RouteTypesById<TRouter, TId>['fullPath']>
+}
+
+export class Route<
+  in out TParentRoute extends RouteConstraints['TParentRoute'] = AnyRoute,
+  in out TPath extends RouteConstraints['TPath'] = '/',
+  in out TFullPath extends RouteConstraints['TFullPath'] = ResolveFullPath<
+    TParentRoute,
+    TPath
+  >,
+  in out TCustomId extends RouteConstraints['TCustomId'] = string,
+  in out TId extends RouteConstraints['TId'] = ResolveId<
+    TParentRoute,
+    TCustomId,
+    TPath
+  >,
+  in out TSearchValidator = undefined,
+  in out TParams = ResolveParams<TPath>,
+  in out TRouterContext = AnyContext,
+  in out TRouteContextFn = AnyContext,
+  in out TBeforeLoadFn = AnyContext,
+  in out TLoaderDeps extends Record<string, any> = {},
+  in out TLoaderFn = undefined,
+  in out TChildren = unknown,
+  in out TFileRouteTypes = unknown,
+> extends BaseRoute<
+  TParentRoute,
+  TPath,
+  TFullPath,
+  TCustomId,
+  TId,
+  TSearchValidator,
+  TParams,
+  TRouterContext,
+  TRouteContextFn,
+  TBeforeLoadFn,
+  TLoaderDeps,
+  TLoaderFn,
+  TChildren,
+  TFileRouteTypes
+> {
+  /**
+   * @deprecated Use the `createRoute` function instead.
+   */
+  constructor(
+    options?: RouteOptions<
+      TParentRoute,
+      TId,
+      TCustomId,
+      TFullPath,
+      TPath,
+      TSearchValidator,
+      TParams,
+      TLoaderDeps,
+      TLoaderFn,
+      TRouterContext,
+      TRouteContextFn,
+      TBeforeLoadFn
+    >,
+  ) {
+    super(options)
+  }
+
+  useMatch: UseMatchRoute<TId> = (opts) => {
+    return useMatch({
+      select: opts?.select,
+      from: this.id,
+    } as any) as any
+  }
+
+  useRouteContext: UseRouteContextRoute<TId> = (opts?) => {
+    return useMatch({
+      ...opts,
+      from: this.id,
+      select: (d) => (opts?.select ? opts.select(d.context) : d.context),
+    }) as any
+  }
+
+  useSearch: UseSearchRoute<TId> = (opts) => {
+    return useSearch({
+      select: opts?.select,
+      from: this.id,
+    } as any) as any
+  }
+
+  useParams: UseParamsRoute<TId> = (opts) => {
+    return useParams({
+      select: opts?.select,
+      from: this.id,
+    } as any) as any
+  }
+
+  useLoaderDeps: UseLoaderDepsRoute<TId> = (opts) => {
+    return useLoaderDeps({ ...opts, from: this.id } as any)
+  }
+
+  useLoaderData: UseLoaderDataRoute<TId> = (opts) => {
+    return useLoaderData({ ...opts, from: this.id } as any)
+  }
+
+  useNavigate = (): UseNavigateResult<TFullPath> => {
+    return useNavigate({ from: this.fullPath })
+  }
+
+  Link: LinkComponentRoute<TFullPath> = ((props) => {
+    return <Link from={this.fullPath} {...props} />
+  }) as LinkComponentRoute<TFullPath>
+}
+
+export function createRoute<
+  TParentRoute extends RouteConstraints['TParentRoute'] = AnyRoute,
+  TPath extends RouteConstraints['TPath'] = '/',
+  TFullPath extends RouteConstraints['TFullPath'] = ResolveFullPath<
+    TParentRoute,
+    TPath
+  >,
+  TCustomId extends RouteConstraints['TCustomId'] = string,
+  TId extends RouteConstraints['TId'] = ResolveId<
+    TParentRoute,
+    TCustomId,
+    TPath
+  >,
+  TSearchValidator = undefined,
+  TParams = ResolveParams<TPath>,
+  TRouteContextFn = AnyContext,
+  TBeforeLoadFn = AnyContext,
+  TLoaderDeps extends Record<string, any> = {},
+  TLoaderFn = undefined,
+  TChildren = unknown,
+>(
+  options: RouteOptions<
+    TParentRoute,
+    TId,
+    TCustomId,
+    TFullPath,
+    TPath,
+    TSearchValidator,
+    TParams,
+    TLoaderDeps,
+    TLoaderFn,
+    AnyContext,
+    TRouteContextFn,
+    TBeforeLoadFn
+  >,
+): Route<
+  TParentRoute,
+  TPath,
+  TFullPath,
+  TCustomId,
+  TId,
+  TSearchValidator,
+  TParams,
+  AnyContext,
+  TRouteContextFn,
+  TBeforeLoadFn,
+  TLoaderDeps,
+  TLoaderFn,
+  TChildren,
+  unknown
+> {
+  return new Route<
+    TParentRoute,
+    TPath,
+    TFullPath,
+    TCustomId,
+    TId,
+    TSearchValidator,
+    TParams,
+    AnyContext,
+    TRouteContextFn,
+    TBeforeLoadFn,
+    TLoaderDeps,
+    TLoaderFn,
+    TChildren,
+    unknown
+  >(options)
+}
+
+export type AnyRootRoute = RootRoute<any, any, any, any, any, any, any, any>
+
+export function createRootRouteWithContext<TRouterContext extends {}>() {
+  return <
+    TRouteContextFn = AnyContext,
+    TBeforeLoadFn = AnyContext,
+    TSearchValidator = undefined,
+    TLoaderDeps extends Record<string, any> = {},
+    TLoaderFn = undefined,
+  >(
+    options?: RootRouteOptions<
+      TSearchValidator,
+      TRouterContext,
+      TRouteContextFn,
+      TBeforeLoadFn,
+      TLoaderDeps,
+      TLoaderFn
+    >,
+  ) => {
+    return createRootRoute<
+      TSearchValidator,
+      TRouterContext,
+      TRouteContextFn,
+      TBeforeLoadFn,
+      TLoaderDeps,
+      TLoaderFn
+    >(options as any)
+  }
+}
+
+/**
+ * @deprecated Use the `createRootRouteWithContext` function instead.
+ */
+export const rootRouteWithContext = createRootRouteWithContext
+
+export class RootRoute<
+  in out TSearchValidator = undefined,
+  in out TRouterContext = {},
+  in out TRouteContextFn = AnyContext,
+  in out TBeforeLoadFn = AnyContext,
+  in out TLoaderDeps extends Record<string, any> = {},
+  in out TLoaderFn = undefined,
+  in out TChildren = unknown,
+  in out TFileRouteTypes = unknown,
+> extends BaseRootRoute<
+  TSearchValidator,
+  TRouterContext,
+  TRouteContextFn,
+  TBeforeLoadFn,
+  TLoaderDeps,
+  TLoaderFn,
+  TChildren,
+  TFileRouteTypes
+> {
+  /**
+   * @deprecated `RootRoute` is now an internal implementation detail. Use `createRootRoute()` instead.
+   */
+  constructor(
+    options?: RootRouteOptions<
+      TSearchValidator,
+      TRouterContext,
+      TRouteContextFn,
+      TBeforeLoadFn,
+      TLoaderDeps,
+      TLoaderFn
+    >,
+  ) {
+    super(options)
+  }
+
+  useMatch: UseMatchRoute<RootRouteId> = (opts) => {
+    return useMatch({
+      select: opts?.select,
+      from: this.id,
+    } as any) as any
+  }
+
+  useRouteContext: UseRouteContextRoute<RootRouteId> = (opts) => {
+    return useMatch({
+      ...opts,
+      from: this.id,
+      select: (d) => (opts?.select ? opts.select(d.context) : d.context),
+    }) as any
+  }
+
+  useSearch: UseSearchRoute<RootRouteId> = (opts) => {
+    return useSearch({
+      select: opts?.select,
+      from: this.id,
+    } as any) as any
+  }
+
+  useParams: UseParamsRoute<RootRouteId> = (opts) => {
+    return useParams({
+      select: opts?.select,
+      from: this.id,
+    } as any) as any
+  }
+
+  useLoaderDeps: UseLoaderDepsRoute<RootRouteId> = (opts) => {
+    return useLoaderDeps({ ...opts, from: this.id } as any)
+  }
+
+  useLoaderData: UseLoaderDataRoute<RootRouteId> = (opts) => {
+    return useLoaderData({ ...opts, from: this.id } as any)
+  }
+
+  useNavigate = (): UseNavigateResult<'/'> => {
+    return useNavigate({ from: this.fullPath })
+  }
+
+  Link: LinkComponentRoute<'/'> = ((props) => {
+    return <Link from={this.fullPath} {...(props as any)} />
+  }) as LinkComponentRoute<'/'>
+}
+
+export function createRouteMask<
+  TRouteTree extends AnyRoute,
+  TFrom extends string,
+  TTo extends string,
+>(
+  opts: {
+    routeTree: TRouteTree
+  } & ToMaskOptions<RouterCore<TRouteTree, 'never', false>, TFrom, TTo>,
+): RouteMask<TRouteTree> {
+  return opts as any
+}
+
+export type SolidNode = Solid.JSX.Element
+
+export type SyncRouteComponent<TProps> = (props: TProps) => Solid.JSX.Element
+
+export type AsyncRouteComponent<TProps> = SyncRouteComponent<TProps> & {
+  preload?: () => Promise<void>
+}
+
+export type RouteComponent<TProps = any> = AsyncRouteComponent<TProps>
+
+export type ErrorRouteComponent = RouteComponent<ErrorComponentProps>
+
+export type NotFoundRouteComponent = SyncRouteComponent<NotFoundRouteProps>
+
+export class NotFoundRoute<
+  TParentRoute extends AnyRootRoute,
+  TRouterContext = AnyContext,
+  TRouteContextFn = AnyContext,
+  TBeforeLoadFn = AnyContext,
+  TSearchValidator = undefined,
+  TLoaderDeps extends Record<string, any> = {},
+  TLoaderFn = undefined,
+  TChildren = unknown,
+> extends Route<
+  TParentRoute,
+  '/404',
+  '/404',
+  '404',
+  '404',
+  TSearchValidator,
+  {},
+  TRouterContext,
+  TRouteContextFn,
+  TBeforeLoadFn,
+  TLoaderDeps,
+  TLoaderFn,
+  TChildren
+> {
+  constructor(
+    options: Omit<
+      RouteOptions<
+        TParentRoute,
+        string,
+        string,
+        string,
+        string,
+        TSearchValidator,
+        {},
+        TLoaderDeps,
+        TLoaderFn,
+        TRouterContext,
+        TRouteContextFn,
+        TBeforeLoadFn
+      >,
+      | 'caseSensitive'
+      | 'parseParams'
+      | 'stringifyParams'
+      | 'path'
+      | 'id'
+      | 'params'
+    >,
+  ) {
+    super({
+      ...(options as any),
+      id: '404',
+    })
+  }
+}
+
+export function createRootRoute<
+  TSearchValidator = undefined,
+  TRouterContext = {},
+  TRouteContextFn = AnyContext,
+  TBeforeLoadFn = AnyContext,
+  TLoaderDeps extends Record<string, any> = {},
+  TLoaderFn = undefined,
+>(
+  options?: RootRouteOptions<
+    TSearchValidator,
+    TRouterContext,
+    TRouteContextFn,
+    TBeforeLoadFn,
+    TLoaderDeps,
+    TLoaderFn
+  >,
+): RootRoute<
+  TSearchValidator,
+  TRouterContext,
+  TRouteContextFn,
+  TBeforeLoadFn,
+  TLoaderDeps,
+  TLoaderFn,
+  unknown,
+  unknown
+> {
+  return new RootRoute<
+    TSearchValidator,
+    TRouterContext,
+    TRouteContextFn,
+    TBeforeLoadFn,
+    TLoaderDeps,
+    TLoaderFn
+  >(options)
+}