@depup/tanstack__react-router 1.166.4-depup.0

package/src/RouterProvider.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react'
+import { Matches } from './Matches'
+import { routerContext } from './routerContext'
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  RouterOptions,
+} from '@tanstack/router-core'
+
+/**
+ * Low-level provider that places the router into React context and optionally
+ * updates router options from props. Most apps should use `RouterProvider`.
+ */
+export function RouterContextProvider<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TDehydrated extends Record<string, any> = Record<string, any>,
+>({
+  router,
+  children,
+  ...rest
+}: RouterProps<TRouter, TDehydrated> & {
+  children: React.ReactNode
+}) {
+  if (Object.keys(rest).length > 0) {
+    // Allow the router to update options on the router instance
+    router.update({
+      ...router.options,
+      ...rest,
+      context: {
+        ...router.options.context,
+        ...rest.context,
+      },
+    })
+  }
+
+  const provider = (
+    <routerContext.Provider value={router as AnyRouter}>
+      {children}
+    </routerContext.Provider>
+  )
+
+  if (router.options.Wrap) {
+    return <router.options.Wrap>{provider}</router.options.Wrap>
+  }
+
+  return provider
+}
+
+/**
+ * Top-level component that renders the active route matches and provides the
+ * router to the React tree via context.
+ *
+ * Accepts the same options as `createRouter` via props to update the router
+ * instance after creation.
+ *
+ * @link https://tanstack.com/router/latest/docs/framework/react/api/router/createRouterFunction
+ */
+export function RouterProvider<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TDehydrated extends Record<string, any> = Record<string, any>,
+>({ router, ...rest }: RouterProps<TRouter, TDehydrated>) {
+  return (
+    <RouterContextProvider router={router} {...rest}>
+      <Matches />
+    </RouterContextProvider>
+  )
+}
+
+export type RouterProps<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TDehydrated extends Record<string, any> = Record<string, any>,
+> = Omit<
+  RouterOptions<
+    TRouter['routeTree'],
+    NonNullable<TRouter['options']['trailingSlash']>,
+    NonNullable<TRouter['options']['defaultStructuralSharing']>,
+    TRouter['history'],
+    TDehydrated
+  >,
+  'context'
+> & {
+  router: TRouter
+  context?: Partial<
+    RouterOptions<
+      TRouter['routeTree'],
+      NonNullable<TRouter['options']['trailingSlash']>,
+      NonNullable<TRouter['options']['defaultStructuralSharing']>,
+      TRouter['history'],
+      TDehydrated
+    >['context']
+  >
+}

package/src/SafeFragment.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react'
+
+export function SafeFragment(props: any) {
+  return <>{props.children}</>
+}

package/src/ScriptOnce.tsx

@@ -0,0 +1,21 @@
+import { isServer } from '@tanstack/router-core/isServer'
+import { useRouter } from './useRouter'
+
+/**
+ * Server-only helper to emit a script tag exactly once during SSR.
+ */
+export function ScriptOnce({ children }: { children: string }) {
+  const router = useRouter()
+  if (!(isServer ?? router.isServer)) {
+    return null
+  }
+
+  return (
+    <script
+      nonce={router.options.ssr?.nonce}
+      dangerouslySetInnerHTML={{
+        __html: children + ';document.currentScript.remove()',
+      }}
+    />
+  )
+}

package/src/Scripts.tsx

@@ -0,0 +1,80 @@
+import { Asset } from './Asset'
+import { useRouterState } from './useRouterState'
+import { useRouter } from './useRouter'
+import type { RouterManagedTag } from '@tanstack/router-core'
+
+/**
+ * Render body script tags collected from route matches and SSR manifests.
+ * Should be placed near the end of the document body.
+ */
+export const Scripts = () => {
+  const router = useRouter()
+  const nonce = router.options.ssr?.nonce
+  const assetScripts = useRouterState({
+    select: (state) => {
+      const assetScripts: Array<RouterManagedTag> = []
+      const manifest = router.ssr?.manifest
+
+      if (!manifest) {
+        return []
+      }
+
+      state.matches
+        .map((match) => router.looseRoutesById[match.routeId]!)
+        .forEach((route) =>
+          manifest.routes[route.id]?.assets
+            ?.filter((d) => d.tag === 'script')
+            .forEach((asset) => {
+              assetScripts.push({
+                tag: 'script',
+                attrs: { ...asset.attrs, nonce },
+                children: asset.children,
+              } as any)
+            }),
+        )
+
+      return assetScripts
+    },
+    structuralSharing: true as any,
+  })
+
+  const { scripts } = useRouterState({
+    select: (state) => ({
+      scripts: (
+        state.matches
+          .map((match) => match.scripts!)
+          .flat(1)
+          .filter(Boolean) as Array<RouterManagedTag>
+      ).map(({ children, ...script }) => ({
+        tag: 'script',
+        attrs: {
+          ...script,
+          suppressHydrationWarning: true,
+          nonce,
+        },
+        children,
+      })),
+    }),
+    structuralSharing: true as any,
+  })
+
+  let serverBufferedScript: RouterManagedTag | undefined = undefined
+
+  if (router.serverSsr) {
+    serverBufferedScript = router.serverSsr.takeBufferedScripts()
+  }
+
+  const allScripts = [...scripts, ...assetScripts] as Array<RouterManagedTag>
+
+  if (serverBufferedScript) {
+    allScripts.unshift(serverBufferedScript)
+  }
+
+  return (
+    <>
+      {allScripts.map((asset, i) => (
+        <Asset {...asset} key={`tsr-scripts-${asset.tag}-${i}`} />
+      ))}
+    </>
+  )
+}

package/src/ScrollRestoration.tsx

@@ -0,0 +1,69 @@
+import {
+  defaultGetScrollRestorationKey,
+  getCssSelector,
+  scrollRestorationCache,
+  setupScrollRestoration,
+} from '@tanstack/router-core'
+import { useRouter } from './useRouter'
+import type {
+  ParsedLocation,
+  ScrollRestorationEntry,
+  ScrollRestorationOptions,
+} from '@tanstack/router-core'
+
+function useScrollRestoration() {
+  const router = useRouter()
+  setupScrollRestoration(router, true)
+}
+
+/**
+ * @deprecated Use the `scrollRestoration` router option instead.
+ */
+export function ScrollRestoration(_props: ScrollRestorationOptions) {
+  useScrollRestoration()
+
+  if (process.env.NODE_ENV === 'development') {
+    console.warn(
+      "The ScrollRestoration component is deprecated. Use createRouter's `scrollRestoration` option instead.",
+    )
+  }
+
+  return null
+}
+
+export function useElementScrollRestoration(
+  options: (
+    | {
+        id: string
+        getElement?: () => Window | Element | undefined | null
+      }
+    | {
+        id?: string
+        getElement: () => Window | Element | undefined | null
+      }
+  ) & {
+    getKey?: (location: ParsedLocation) => string
+  },
+): ScrollRestorationEntry | undefined {
+  useScrollRestoration()
+
+  const router = useRouter()
+  const getKey = options.getKey || defaultGetScrollRestorationKey
+
+  let elementSelector = ''
+
+  if (options.id) {
+    elementSelector = `[data-scroll-restoration-id="${options.id}"]`
+  } else {
+    const element = options.getElement?.()
+    if (!element) {
+      return
+    }
+    elementSelector =
+      element instanceof Window ? 'window' : getCssSelector(element)
+  }
+
+  const restoreKey = getKey(router.latestLocation)
+  const byKey = scrollRestorationCache?.state[restoreKey]
+  return byKey?.[elementSelector]
+}

package/src/Transitioner.tsx

@@ -0,0 +1,134 @@
+import * as React from 'react'
+import {
+  getLocationChangeInfo,
+  handleHashScroll,
+  trimPathRight,
+} from '@tanstack/router-core'
+import { useLayoutEffect, usePrevious } from './utils'
+import { useRouter } from './useRouter'
+import { useRouterState } from './useRouterState'
+
+export function Transitioner() {
+  const router = useRouter()
+  const mountLoadForRouter = React.useRef({ router, mounted: false })
+
+  const [isTransitioning, setIsTransitioning] = React.useState(false)
+  // Track pending state changes
+  const { hasPendingMatches, isLoading } = useRouterState({
+    select: (s) => ({
+      isLoading: s.isLoading,
+      hasPendingMatches: s.matches.some((d) => d.status === 'pending'),
+    }),
+    structuralSharing: true,
+  })
+
+  const previousIsLoading = usePrevious(isLoading)
+
+  const isAnyPending = isLoading || isTransitioning || hasPendingMatches
+  const previousIsAnyPending = usePrevious(isAnyPending)
+
+  const isPagePending = isLoading || hasPendingMatches
+  const previousIsPagePending = usePrevious(isPagePending)
+
+  router.startTransition = (fn: () => void) => {
+    setIsTransitioning(true)
+    React.startTransition(() => {
+      fn()
+      setIsTransitioning(false)
+    })
+  }
+
+  // Subscribe to location changes
+  // and try to load the new location
+  React.useEffect(() => {
+    const unsub = router.history.subscribe(router.load)
+
+    const nextLocation = router.buildLocation({
+      to: router.latestLocation.pathname,
+      search: true,
+      params: true,
+      hash: true,
+      state: true,
+      _includeValidateSearch: true,
+    })
+
+    // Check if the current URL matches the canonical form.
+    // Compare publicHref (browser-facing URL) for consistency with
+    // the server-side redirect check in router.beforeLoad.
+    if (
+      trimPathRight(router.latestLocation.publicHref) !==
+      trimPathRight(nextLocation.publicHref)
+    ) {
+      router.commitLocation({ ...nextLocation, replace: true })
+    }
+
+    return () => {
+      unsub()
+    }
+  }, [router, router.history])
+
+  // Try to load the initial location
+  useLayoutEffect(() => {
+    if (
+      // if we are hydrating from SSR, loading is triggered in ssr-client
+      (typeof window !== 'undefined' && router.ssr) ||
+      (mountLoadForRouter.current.router === router &&
+        mountLoadForRouter.current.mounted)
+    ) {
+      return
+    }
+    mountLoadForRouter.current = { router, mounted: true }
+
+    const tryLoad = async () => {
+      try {
+        await router.load()
+      } catch (err) {
+        console.error(err)
+      }
+    }
+
+    tryLoad()
+  }, [router])
+
+  useLayoutEffect(() => {
+    // The router was loading and now it's not
+    if (previousIsLoading && !isLoading) {
+      router.emit({
+        type: 'onLoad', // When the new URL has committed, when the new matches have been loaded into state.matches
+        ...getLocationChangeInfo(router.state),
+      })
+    }
+  }, [previousIsLoading, router, isLoading])
+
+  useLayoutEffect(() => {
+    // emit onBeforeRouteMount
+    if (previousIsPagePending && !isPagePending) {
+      router.emit({
+        type: 'onBeforeRouteMount',
+        ...getLocationChangeInfo(router.state),
+      })
+    }
+  }, [isPagePending, previousIsPagePending, router])
+
+  useLayoutEffect(() => {
+    if (previousIsAnyPending && !isAnyPending) {
+      const changeInfo = getLocationChangeInfo(router.state)
+      router.emit({
+        type: 'onResolved',
+        ...changeInfo,
+      })
+
+      router.__store.setState((s: typeof router.state) => ({
+        ...s,
+        status: 'idle',
+        resolvedLocation: s.location,
+      }))
+
+      if (changeInfo.hrefChanged) {
+        handleHashScroll(router)
+      }
+    }
+  }, [isAnyPending, previousIsAnyPending, router])
+
+  return null
+}

package/src/awaited.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react'
+
+import { TSR_DEFERRED_PROMISE, defer } from '@tanstack/router-core'
+import { reactUse } from './utils'
+
+export type AwaitOptions<T> = {
+  promise: Promise<T>
+}
+
+/** Suspend until a deferred promise resolves or rejects and return its data. */
+export function useAwaited<T>({ promise: _promise }: AwaitOptions<T>): T {
+  if (reactUse) {
+    const data = reactUse(_promise)
+    return data
+  }
+  const promise = defer(_promise)
+
+  if (promise[TSR_DEFERRED_PROMISE].status === 'pending') {
+    throw promise
+  }
+
+  if (promise[TSR_DEFERRED_PROMISE].status === 'error') {
+    throw promise[TSR_DEFERRED_PROMISE].error
+  }
+
+  return promise[TSR_DEFERRED_PROMISE].data
+}
+
+/**
+ * Component that suspends on a deferred promise and renders its child with
+ * the resolved value. Optionally provides a Suspense fallback.
+ */
+export function Await<T>(
+  props: AwaitOptions<T> & {
+    fallback?: React.ReactNode
+    children: (result: T) => React.ReactNode
+  },
+) {
+  const inner = <AwaitInner {...props} />
+  if (props.fallback) {
+    return <React.Suspense fallback={props.fallback}>{inner}</React.Suspense>
+  }
+  return inner
+}
+
+function AwaitInner<T>(
+  props: AwaitOptions<T> & {
+    fallback?: React.ReactNode
+    children: (result: T) => React.ReactNode
+  },
+): React.JSX.Element {
+  const data = useAwaited(props)
+
+  return props.children(data) as React.JSX.Element
+}