@depup/tanstack__react-router 1.166.4-depup.0

package/src/matchContext.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react'
+
+export const matchContext = React.createContext<string | undefined>(undefined)
+
+// N.B. this only exists so we can conditionally call useContext on it when we are not interested in the nearest match
+export const dummyMatchContext = React.createContext<string | undefined>(
+  undefined,
+)

package/src/not-found.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react'
+import { isNotFound } from '@tanstack/router-core'
+import { CatchBoundary } from './CatchBoundary'
+import { useRouterState } from './useRouterState'
+import type { ErrorInfo } from 'react'
+import type { NotFoundError } from '@tanstack/router-core'
+
+export function CatchNotFound(props: {
+  fallback?: (error: NotFoundError) => React.ReactElement
+  onCatch?: (error: Error, errorInfo: ErrorInfo) => void
+  children: React.ReactNode
+}) {
+  // 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, errorInfo) => {
+        if (isNotFound(error)) {
+          props.onCatch?.(error, errorInfo)
+        } else {
+          throw error
+        }
+      }}
+      errorComponent={({ 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,35 @@
+import * as React from 'react'
+import warning from 'tiny-warning'
+import { DefaultGlobalNotFound } from './not-found'
+import type { AnyRoute, AnyRouter } from '@tanstack/router-core'
+
+/**
+ * Renders a not found component for a route when no matching route is found.
+ *
+ * @param router - The router instance containing the route configuration
+ * @param route - The route that triggered the not found state
+ * @param data - Additional data to pass to the not found component
+ * @returns The rendered not found component or a default fallback component
+ */
+export function renderRouteNotFound(
+  router: AnyRouter,
+  route: AnyRoute,
+  data: any,
+) {
+  if (!route.options.notFoundComponent) {
+    if (router.options.defaultNotFoundComponent) {
+      return <router.options.defaultNotFoundComponent {...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 (<p>Not Found</p>)`,
+      )
+    }
+
+    return <DefaultGlobalNotFound />
+  }
+
+  return <route.options.notFoundComponent {...data} />
+}