@depup/tanstack__react-router 1.166.4-depup.0

package/package.json

@@ -0,0 +1,142 @@
+{
+  "name": "@depup/tanstack__react-router",
+  "version": "1.166.4-depup.0",
+  "description": "[DepUp] Modern and scalable routing for React applications",
+  "author": "Tanner Linsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TanStack/router.git",
+    "directory": "packages/react-router"
+  },
+  "homepage": "https://tanstack.com/router",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "keywords": [
+    "depup",
+    "dependency-bumped",
+    "updated-deps",
+    "@tanstack/react-router",
+    "react",
+    "location",
+    "router",
+    "routing",
+    "async",
+    "async router",
+    "typescript"
+  ],
+  "type": "module",
+  "types": "dist/esm/index.d.ts",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "development": "./dist/esm/index.dev.js",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.cts",
+        "development": "./dist/cjs/index.dev.cjs",
+        "default": "./dist/cjs/index.cjs"
+      }
+    },
+    "./ssr/server": {
+      "import": {
+        "types": "./dist/esm/ssr/server.d.ts",
+        "default": "./dist/esm/ssr/server.js"
+      },
+      "require": {
+        "types": "./dist/cjs/ssr/server.d.cts",
+        "default": "./dist/cjs/ssr/server.cjs"
+      }
+    },
+    "./ssr/client": {
+      "import": {
+        "types": "./dist/esm/ssr/client.d.ts",
+        "default": "./dist/esm/ssr/client.js"
+      },
+      "require": {
+        "types": "./dist/cjs/ssr/client.d.cts",
+        "default": "./dist/cjs/ssr/client.cjs"
+      }
+    },
+    "./package.json": "./package.json",
+    "./llms": {
+      "import": {
+        "types": "./dist/llms/index.d.ts",
+        "default": "./dist/llms/index.js"
+      }
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=20.19"
+  },
+  "dependencies": {
+    "@tanstack/react-store": "^0.9.2",
+    "isbot": "^5.1.35",
+    "tiny-invariant": "^1.3.3",
+    "tiny-warning": "^1.0.3",
+    "@tanstack/history": "1.161.4",
+    "@tanstack/router-core": "1.166.4"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "combinate": "^1.1.11",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "vibe-rules": "^0.2.57",
+    "vite": "*",
+    "zod": "^3.24.2"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0 || >=19.0.0",
+    "react-dom": ">=18.0.0 || >=19.0.0"
+  },
+  "scripts": {
+    "clean": "rimraf ./dist && rimraf ./coverage",
+    "test:eslint": "eslint",
+    "test:types": "pnpm run \"/^test:types:ts[0-9]{2}$/\"",
+    "test:types:ts54": "node ../../node_modules/typescript54/lib/tsc.js -p tsconfig.legacy.json",
+    "test:types:ts55": "node ../../node_modules/typescript55/lib/tsc.js -p tsconfig.legacy.json",
+    "test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js -p tsconfig.legacy.json",
+    "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js -p tsconfig.legacy.json",
+    "test:types:ts58": "node ../../node_modules/typescript58/lib/tsc.js -p tsconfig.legacy.json",
+    "test:types:ts59": "tsc -p tsconfig.legacy.json",
+    "test:unit": "vitest",
+    "test:unit:dev": "pnpm run test:unit --watch --hideSkippedTests",
+    "test:perf": "vitest bench",
+    "test:perf:dev": "pnpm run test:perf --watch --hideSkippedTests",
+    "test:build": "publint --strict && attw --ignore-rules no-resolution --pack .",
+    "build": "pnpm run build:lib && pnpm run build:llm",
+    "build:lib": "vite build",
+    "build:llm": "node ../../scripts/llms-generate.mjs react-router && tsc -p ./llms/tsconfig.json"
+  },
+  "depup": {
+    "changes": {
+      "@tanstack/react-store": {
+        "from": "^0.9.1",
+        "to": "^0.9.2"
+      },
+      "isbot": {
+        "from": "^5.1.22",
+        "to": "^5.1.35"
+      }
+    },
+    "depsUpdated": 2,
+    "originalPackage": "@tanstack/react-router",
+    "originalVersion": "1.166.4",
+    "processedAt": "2026-03-09T20:26:17.368Z",
+    "smokeTest": "passed"
+  }
+}

package/src/Asset.tsx

@@ -0,0 +1,219 @@
+import * as React from 'react'
+import { isServer } from '@tanstack/router-core/isServer'
+import { useRouter } from './useRouter'
+import { useHydrated } from './ClientOnly'
+import type { RouterManagedTag } from '@tanstack/router-core'
+
+interface ScriptAttrs {
+  [key: string]: string | boolean | undefined
+  src?: string
+  suppressHydrationWarning?: boolean
+}
+
+export function Asset({
+  tag,
+  attrs,
+  children,
+  nonce,
+}: RouterManagedTag & { nonce?: string }): React.ReactElement | null {
+  switch (tag) {
+    case 'title':
+      return (
+        <title {...attrs} suppressHydrationWarning>
+          {children}
+        </title>
+      )
+    case 'meta':
+      return <meta {...attrs} suppressHydrationWarning />
+    case 'link':
+      return <link {...attrs} nonce={nonce} suppressHydrationWarning />
+    case 'style':
+      return (
+        <style
+          {...attrs}
+          dangerouslySetInnerHTML={{ __html: children as string }}
+          nonce={nonce}
+        />
+      )
+    case 'script':
+      return <Script attrs={attrs}>{children}</Script>
+    default:
+      return null
+  }
+}
+
+function Script({
+  attrs,
+  children,
+}: {
+  attrs?: ScriptAttrs
+  children?: string
+}) {
+  const router = useRouter()
+  const hydrated = useHydrated()
+  const dataScript =
+    typeof attrs?.type === 'string' &&
+    attrs.type !== '' &&
+    attrs.type !== 'text/javascript' &&
+    attrs.type !== 'module'
+
+  if (
+    process.env.NODE_ENV !== 'production' &&
+    attrs?.src &&
+    typeof children === 'string' &&
+    children.trim().length
+  ) {
+    console.warn(
+      '[TanStack Router] <Script> received both `src` and `children`. The `children` content will be ignored. Remove `children` or remove `src`.',
+    )
+  }
+
+  React.useEffect(() => {
+    if (dataScript) return
+
+    if (attrs?.src) {
+      const normSrc = (() => {
+        try {
+          const base = document.baseURI || window.location.href
+          return new URL(attrs.src, base).href
+        } catch {
+          return attrs.src
+        }
+      })()
+      const existingScript = Array.from(
+        document.querySelectorAll('script[src]'),
+      ).find((el) => (el as HTMLScriptElement).src === normSrc)
+
+      if (existingScript) {
+        return
+      }
+
+      const script = document.createElement('script')
+
+      for (const [key, value] of Object.entries(attrs)) {
+        if (
+          key !== 'suppressHydrationWarning' &&
+          value !== undefined &&
+          value !== false
+        ) {
+          script.setAttribute(
+            key,
+            typeof value === 'boolean' ? '' : String(value),
+          )
+        }
+      }
+
+      document.head.appendChild(script)
+
+      return () => {
+        if (script.parentNode) {
+          script.parentNode.removeChild(script)
+        }
+      }
+    }
+
+    if (typeof children === 'string') {
+      const typeAttr =
+        typeof attrs?.type === 'string' ? attrs.type : 'text/javascript'
+      const nonceAttr =
+        typeof attrs?.nonce === 'string' ? attrs.nonce : undefined
+      const existingScript = Array.from(
+        document.querySelectorAll('script:not([src])'),
+      ).find((el) => {
+        if (!(el instanceof HTMLScriptElement)) return false
+        const sType = el.getAttribute('type') ?? 'text/javascript'
+        const sNonce = el.getAttribute('nonce') ?? undefined
+        return (
+          el.textContent === children &&
+          sType === typeAttr &&
+          sNonce === nonceAttr
+        )
+      })
+
+      if (existingScript) {
+        return
+      }
+
+      const script = document.createElement('script')
+      script.textContent = children
+
+      if (attrs) {
+        for (const [key, value] of Object.entries(attrs)) {
+          if (
+            key !== 'suppressHydrationWarning' &&
+            value !== undefined &&
+            value !== false
+          ) {
+            script.setAttribute(
+              key,
+              typeof value === 'boolean' ? '' : String(value),
+            )
+          }
+        }
+      }
+
+      document.head.appendChild(script)
+
+      return () => {
+        if (script.parentNode) {
+          script.parentNode.removeChild(script)
+        }
+      }
+    }
+
+    return undefined
+  }, [attrs, children, dataScript])
+
+  // --- Server rendering ---
+  if (isServer ?? router.isServer) {
+    if (attrs?.src) {
+      return <script {...attrs} suppressHydrationWarning />
+    }
+
+    if (typeof children === 'string') {
+      return (
+        <script
+          {...attrs}
+          dangerouslySetInnerHTML={{ __html: children }}
+          suppressHydrationWarning
+        />
+      )
+    }
+
+    return null
+  }
+
+  // --- Client rendering ---
+
+  // Data scripts (e.g. application/ld+json) are rendered in the tree;
+  // the useEffect intentionally skips them.
+  if (dataScript && typeof children === 'string') {
+    return (
+      <script
+        {...attrs}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: children }}
+      />
+    )
+  }
+
+  // During hydration (before useEffect has fired), render the script element
+  // to match the server-rendered HTML and avoid structural hydration mismatches.
+  // After hydration, return null — the useEffect handles imperative injection.
+  if (!hydrated) {
+    if (attrs?.src) {
+      return <script {...attrs} suppressHydrationWarning />
+    }
+    if (typeof children === 'string') {
+      return (
+        <script
+          {...attrs}
+          dangerouslySetInnerHTML={{ __html: children }}
+          suppressHydrationWarning
+        />
+      )
+    }
+  }
+
+  return null
+}

package/src/CatchBoundary.tsx

@@ -0,0 +1,120 @@
+import * as React from 'react'
+import type { ErrorRouteComponent } from './route'
+import type { ErrorInfo } from 'react'
+
+export function CatchBoundary(props: {
+  getResetKey: () => number | string
+  children: React.ReactNode
+  errorComponent?: ErrorRouteComponent
+  onCatch?: (error: Error, errorInfo: ErrorInfo) => void
+}) {
+  const errorComponent = props.errorComponent ?? ErrorComponent
+
+  return (
+    <CatchBoundaryImpl
+      getResetKey={props.getResetKey}
+      onCatch={props.onCatch}
+      children={({ error, reset }) => {
+        if (error) {
+          return React.createElement(errorComponent, {
+            error,
+            reset,
+          })
+        }
+
+        return props.children
+      }}
+    />
+  )
+}
+
+class CatchBoundaryImpl extends React.Component<{
+  getResetKey: () => number | string
+  children: (props: {
+    error: Error | null
+    reset: () => void
+  }) => React.ReactNode
+  onCatch?: (error: Error, errorInfo: ErrorInfo) => void
+}> {
+  state = { error: null } as { error: Error | null; resetKey: string }
+  static getDerivedStateFromProps(props: any) {
+    return { resetKey: props.getResetKey() }
+  }
+  static getDerivedStateFromError(error: Error) {
+    return { error }
+  }
+  reset() {
+    this.setState({ error: null })
+  }
+  componentDidUpdate(
+    prevProps: Readonly<{
+      getResetKey: () => string
+      children: (props: { error: any; reset: () => void }) => any
+      onCatch?: ((error: any, info: any) => void) | undefined
+    }>,
+    prevState: any,
+  ): void {
+    if (prevState.error && prevState.resetKey !== this.state.resetKey) {
+      this.reset()
+    }
+  }
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    if (this.props.onCatch) {
+      this.props.onCatch(error, errorInfo)
+    }
+  }
+  render() {
+    // If the resetKey has changed, don't render the error
+    return this.props.children({
+      error:
+        this.state.resetKey !== this.props.getResetKey()
+          ? null
+          : this.state.error,
+      reset: () => {
+        this.reset()
+      },
+    })
+  }
+}
+
+export function ErrorComponent({ error }: { error: any }) {
+  const [show, setShow] = React.useState(process.env.NODE_ENV !== 'production')
+
+  return (
+    <div style={{ padding: '.5rem', maxWidth: '100%' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '.5rem' }}>
+        <strong style={{ fontSize: '1rem' }}>Something went wrong!</strong>
+        <button
+          style={{
+            appearance: 'none',
+            fontSize: '.6em',
+            border: '1px solid currentColor',
+            padding: '.1rem .2rem',
+            fontWeight: 'bold',
+            borderRadius: '.25rem',
+          }}
+          onClick={() => setShow((d) => !d)}
+        >
+          {show ? 'Hide Error' : 'Show Error'}
+        </button>
+      </div>
+      <div style={{ height: '.25rem' }} />
+      {show ? (
+        <div>
+          <pre
+            style={{
+              fontSize: '.7em',
+              border: '1px solid red',
+              borderRadius: '.25rem',
+              padding: '.3rem',
+              color: 'red',
+              overflow: 'auto',
+            }}
+          >
+            {error.message ? <code>{error.message}</code> : null}
+          </pre>
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/src/ClientOnly.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+
+export interface ClientOnlyProps {
+  /**
+   * The children to render when the JS is loaded.
+   */
+  children: React.ReactNode
+  /**
+   * The fallback component to render if the JS is not yet loaded.
+   */
+  fallback?: React.ReactNode
+}
+
+/**
+ * Render the children only after the JS has loaded client-side. Use an optional
+ * fallback component if the JS is not yet loaded.
+ *
+ * @example
+ * Render a Chart component if JS loads, renders a simple FakeChart
+ * component server-side or if there is no JS. The FakeChart can have only the
+ * UI without the behavior or be a loading spinner or skeleton.
+ *
+ * ```tsx
+ * return (
+ *   <ClientOnly fallback={<FakeChart />}>
+ *     <Chart />
+ *   </ClientOnly>
+ * )
+ * ```
+ */
+export function ClientOnly({ children, fallback = null }: ClientOnlyProps) {
+  return useHydrated() ? (
+    <React.Fragment>{children}</React.Fragment>
+  ) : (
+    <React.Fragment>{fallback}</React.Fragment>
+  )
+}
+
+/**
+ * Return a boolean indicating if the JS has been hydrated already.
+ * When doing Server-Side Rendering, the result will always be false.
+ * When doing Client-Side Rendering, the result will always be false on the
+ * first render and true from then on. Even if a new component renders it will
+ * always start with true.
+ *
+ * @example
+ * ```tsx
+ * // Disable a button that needs JS to work.
+ * let hydrated = useHydrated()
+ * return (
+ *   <button type="button" disabled={!hydrated} onClick={doSomethingCustom}>
+ *     Click me
+ *   </button>
+ * )
+ * ```
+ * @returns True if the JS has been hydrated already, false otherwise.
+ */
+export function useHydrated(): boolean {
+  return React.useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false,
+  )
+}
+
+function subscribe() {
+  return () => {}
+}

package/src/HeadContent.dev.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react'
+import { Asset } from './Asset'
+import { useRouter } from './useRouter'
+import { useHydrated } from './ClientOnly'
+import { useTags } from './headContentUtils'
+
+const DEV_STYLES_ATTR = 'data-tanstack-router-dev-styles'
+
+/**
+ * Render route-managed head tags (title, meta, links, styles, head scripts).
+ * Place inside the document head of your app shell.
+ *
+ * Development version: filters out dev styles link after hydration and
+ * includes a fallback cleanup effect for hydration mismatch cases.
+ *
+ * @link https://tanstack.com/router/latest/docs/framework/react/guide/document-head-management
+ */
+export function HeadContent() {
+  const tags = useTags()
+  const router = useRouter()
+  const nonce = router.options.ssr?.nonce
+  const hydrated = useHydrated()
+
+  // Fallback cleanup for hydration mismatch cases
+  // Runs when hydration completes to remove any orphaned dev styles links from DOM
+  React.useEffect(() => {
+    if (hydrated) {
+      document
+        .querySelectorAll(`link[${DEV_STYLES_ATTR}]`)
+        .forEach((el) => el.remove())
+    }
+  }, [hydrated])
+
+  // Filter out dev styles after hydration
+  const filteredTags = hydrated
+    ? tags.filter((tag) => !tag.attrs?.[DEV_STYLES_ATTR])
+    : tags
+
+  return (
+    <>
+      {filteredTags.map((tag) => (
+        <Asset {...tag} key={`tsr-meta-${JSON.stringify(tag)}`} nonce={nonce} />
+      ))}
+    </>
+  )
+}

package/src/HeadContent.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { Asset } from './Asset'
+import { useRouter } from './useRouter'
+import { useTags } from './headContentUtils'
+
+/**
+ * Render route-managed head tags (title, meta, links, styles, head scripts).
+ * Place inside the document head of your app shell.
+ * @link https://tanstack.com/router/latest/docs/framework/react/guide/document-head-management
+ */
+export function HeadContent() {
+  const tags = useTags()
+  const router = useRouter()
+  const nonce = router.options.ssr?.nonce
+  return (
+    <>
+      {tags.map((tag) => (
+        <Asset {...tag} key={`tsr-meta-${JSON.stringify(tag)}`} nonce={nonce} />
+      ))}
+    </>
+  )
+}