@tanstack/react-router 1.104.1 → 1.105.5

package/dist/esm/useNavigate.js

@@ -12,12 +12,16 @@ function useNavigate(_defaultOpts) {
   );
 }
 function Navigate(props) {
-  const { navigate } = useRouter();
+  const router = useRouter();
+  const previousPropsRef = React.useRef(null);
   React.useEffect(() => {
-    navigate({
-      ...props
-    });
-  }, [navigate, props]);
+    if (previousPropsRef.current !== props) {
+      router.navigate({
+        ...props
+      });
+      previousPropsRef.current = props;
+    }
+  }, [router, props]);
   return null;
 }
 export {

package/dist/esm/useNavigate.js.map

@@ -1 +1 @@
-{"version":3,"file":"useNavigate.js","sources":["../../src/useNavigate.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useRouter } from './useRouter'\nimport type { FromPathOption, NavigateOptions } from './link'\nimport type { AnyRouter, RegisteredRouter } from './router'\n\nexport type UseNavigateResult<TDefaultFrom extends string> = <\n  TRouter extends RegisteredRouter,\n  TTo extends string | undefined,\n  TFrom extends string = TDefaultFrom,\n  TMaskFrom extends string = TFrom,\n  TMaskTo extends string = '',\n>({\n  from,\n  ...rest\n}: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>) => Promise<void>\n\nexport function useNavigate<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TDefaultFrom extends string = string,\n>(_defaultOpts?: {\n  from?: FromPathOption<TRouter, TDefaultFrom>\n}): UseNavigateResult<TDefaultFrom> {\n  const { navigate } = useRouter()\n\n  return React.useCallback(\n    (options: NavigateOptions) => {\n      return navigate({\n        ...options,\n      })\n    },\n    [navigate],\n  ) as UseNavigateResult<TDefaultFrom>\n}\n\n// NOTE: I don't know of anyone using this. It's undocumented, so let's wait until someone needs it\n// export function typedNavigate<\n//   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n//   TDefaultFrom extends RoutePaths<TRouteTree> = '/',\n// >(navigate: (opts: NavigateOptions<any>) => Promise<void>) {\n//   return navigate as <\n//     TFrom extends RoutePaths<TRouteTree> = TDefaultFrom,\n//     TTo extends string = '',\n//     TMaskFrom extends RoutePaths<TRouteTree> = '/',\n//     TMaskTo extends string = '',\n//   >(\n//     opts?: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,\n//   ) => Promise<void>\n// } //\n\nexport function Navigate<\n  TRouter extends AnyRouter = RegisteredRouter,\n  const TFrom extends string = string,\n  const TTo extends string | undefined = undefined,\n  const TMaskFrom extends string = TFrom,\n  const TMaskTo extends string = '',\n>(props: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): null {\n  const { navigate } = useRouter()\n\n  React.useEffect(() => {\n    navigate({\n      ...props,\n    } as any)\n  }, [navigate, props])\n\n  return null\n}\n"],"names":[],"mappings":";;AAgBO,SAAS,YAGd,cAEkC;AAC5B,QAAA,EAAE,SAAS,IAAI,UAAU;AAE/B,SAAO,MAAM;AAAA,IACX,CAAC,YAA6B;AAC5B,aAAO,SAAS;AAAA,QACd,GAAG;AAAA,MAAA,CACJ;AAAA,IACH;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AACF;AAiBO,SAAS,SAMd,OAAuE;AACjE,QAAA,EAAE,SAAS,IAAI,UAAU;AAE/B,QAAM,UAAU,MAAM;AACX,aAAA;AAAA,MACP,GAAG;AAAA,IAAA,CACG;AAAA,EAAA,GACP,CAAC,UAAU,KAAK,CAAC;AAEb,SAAA;AACT;"}
+{"version":3,"file":"useNavigate.js","sources":["../../src/useNavigate.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useRouter } from './useRouter'\nimport type { FromPathOption, NavigateOptions } from './link'\nimport type { AnyRouter, RegisteredRouter } from './router'\n\nexport type UseNavigateResult<TDefaultFrom extends string> = <\n  TRouter extends RegisteredRouter,\n  TTo extends string | undefined,\n  TFrom extends string = TDefaultFrom,\n  TMaskFrom extends string = TFrom,\n  TMaskTo extends string = '',\n>({\n  from,\n  ...rest\n}: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>) => Promise<void>\n\nexport function useNavigate<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TDefaultFrom extends string = string,\n>(_defaultOpts?: {\n  from?: FromPathOption<TRouter, TDefaultFrom>\n}): UseNavigateResult<TDefaultFrom> {\n  const { navigate } = useRouter()\n\n  return React.useCallback(\n    (options: NavigateOptions) => {\n      return navigate({\n        ...options,\n      })\n    },\n    [navigate],\n  ) as UseNavigateResult<TDefaultFrom>\n}\n\n// NOTE: I don't know of anyone using this. It's undocumented, so let's wait until someone needs it\n// export function typedNavigate<\n//   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n//   TDefaultFrom extends RoutePaths<TRouteTree> = '/',\n// >(navigate: (opts: NavigateOptions<any>) => Promise<void>) {\n//   return navigate as <\n//     TFrom extends RoutePaths<TRouteTree> = TDefaultFrom,\n//     TTo extends string = '',\n//     TMaskFrom extends RoutePaths<TRouteTree> = '/',\n//     TMaskTo extends string = '',\n//   >(\n//     opts?: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,\n//   ) => Promise<void>\n// } //\n\nexport function Navigate<\n  TRouter extends AnyRouter = RegisteredRouter,\n  const TFrom extends string = string,\n  const TTo extends string | undefined = undefined,\n  const TMaskFrom extends string = TFrom,\n  const TMaskTo extends string = '',\n>(props: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): null {\n  const router = useRouter()\n\n  const previousPropsRef = React.useRef<NavigateOptions<\n    TRouter,\n    TFrom,\n    TTo,\n    TMaskFrom,\n    TMaskTo\n  > | null>(null)\n  React.useEffect(() => {\n    if (previousPropsRef.current !== props) {\n      router.navigate({\n        ...props,\n      })\n      previousPropsRef.current = props\n    }\n  }, [router, props])\n  return null\n}\n"],"names":[],"mappings":";;AAgBO,SAAS,YAGd,cAEkC;AAC5B,QAAA,EAAE,SAAS,IAAI,UAAU;AAE/B,SAAO,MAAM;AAAA,IACX,CAAC,YAA6B;AAC5B,aAAO,SAAS;AAAA,QACd,GAAG;AAAA,MAAA,CACJ;AAAA,IACH;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AACF;AAiBO,SAAS,SAMd,OAAuE;AACvE,QAAM,SAAS,UAAU;AAEnB,QAAA,mBAAmB,MAAM,OAMrB,IAAI;AACd,QAAM,UAAU,MAAM;AAChB,QAAA,iBAAiB,YAAY,OAAO;AACtC,aAAO,SAAS;AAAA,QACd,GAAG;AAAA,MAAA,CACJ;AACD,uBAAiB,UAAU;AAAA,IAAA;AAAA,EAC7B,GACC,CAAC,QAAQ,KAAK,CAAC;AACX,SAAA;AACT;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.104.1",
+  "version": "1.105.5",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/Asset.tsx

@@ -0,0 +1,40 @@
+import type { RouterManagedTag } from '@tanstack/router-core'
+
+export function Asset({ tag, attrs, children }: RouterManagedTag): any {
+  switch (tag) {
+    case 'title':
+      return (
+        <title {...attrs} suppressHydrationWarning>
+          {children}
+        </title>
+      )
+    case 'meta':
+      return <meta {...attrs} suppressHydrationWarning />
+    case 'link':
+      return <link {...attrs} suppressHydrationWarning />
+    case 'style':
+      return (
+        <style
+          {...attrs}
+          dangerouslySetInnerHTML={{ __html: children as any }}
+        />
+      )
+    case 'script':
+      if ((attrs as any) && (attrs as any).src) {
+        return <script {...attrs} suppressHydrationWarning />
+      }
+      if (typeof children === 'string')
+        return (
+          <script
+            {...attrs}
+            dangerouslySetInnerHTML={{
+              __html: children,
+            }}
+            suppressHydrationWarning
+          />
+        )
+      return null
+    default:
+      return null
+  }
+}

package/src/HeadContent.tsx

@@ -0,0 +1,151 @@
+import * as React from 'react'
+import { Asset } from './Asset'
+import { useRouter } from './useRouter'
+import { useRouterState } from './useRouterState'
+import type { RouterManagedTag } from '@tanstack/router-core'
+
+export const useTags = () => {
+  const router = useRouter()
+
+  const routeMeta = useRouterState({
+    select: (state) => {
+      return state.matches.map((match) => match.meta!).filter(Boolean)
+    },
+  })
+
+  const meta: Array<RouterManagedTag> = React.useMemo(() => {
+    const resultMeta: Array<RouterManagedTag> = []
+    const metaByAttribute: Record<string, true> = {}
+    let title: RouterManagedTag | undefined
+    ;[...routeMeta].reverse().forEach((metas) => {
+      ;[...metas].reverse().forEach((m) => {
+        if (!m) return
+
+        if (m.title) {
+          if (!title) {
+            title = {
+              tag: 'title',
+              children: m.title,
+            }
+          }
+        } else {
+          const attribute = m.name ?? m.property
+          if (attribute) {
+            if (metaByAttribute[attribute]) {
+              return
+            } else {
+              metaByAttribute[attribute] = true
+            }
+          }
+
+          resultMeta.push({
+            tag: 'meta',
+            attrs: {
+              ...m,
+            },
+          })
+        }
+      })
+    })
+
+    if (title) {
+      resultMeta.push(title)
+    }
+
+    resultMeta.reverse()
+
+    return resultMeta
+  }, [routeMeta])
+
+  const links = useRouterState({
+    select: (state) =>
+      state.matches
+        .map((match) => match.links!)
+        .filter(Boolean)
+        .flat(1)
+        .map((link) => ({
+          tag: 'link',
+          attrs: {
+            ...link,
+          },
+        })) as Array<RouterManagedTag>,
+    structuralSharing: true as any,
+  })
+
+  const preloadMeta = useRouterState({
+    select: (state) => {
+      const preloadMeta: Array<RouterManagedTag> = []
+
+      state.matches
+        .map((match) => router.looseRoutesById[match.routeId]!)
+        .forEach((route) =>
+          router.ssr?.manifest?.routes[route.id]?.preloads
+            ?.filter(Boolean)
+            .forEach((preload) => {
+              preloadMeta.push({
+                tag: 'link',
+                attrs: {
+                  rel: 'modulepreload',
+                  href: preload,
+                },
+              })
+            }),
+        )
+
+      return preloadMeta
+    },
+    structuralSharing: true as any,
+  })
+
+  const headScripts = useRouterState({
+    select: (state) =>
+      (
+        state.matches
+          .map((match) => match.headScripts!)
+          .flat(1)
+          .filter(Boolean) as Array<RouterManagedTag>
+      ).map(({ children, ...script }) => ({
+        tag: 'script',
+        attrs: {
+          ...script,
+        },
+        children,
+      })),
+    structuralSharing: true as any,
+  })
+
+  return uniqBy(
+    [
+      ...meta,
+      ...preloadMeta,
+      ...links,
+      ...headScripts,
+    ] as Array<RouterManagedTag>,
+    (d) => {
+      return JSON.stringify(d)
+    },
+  )
+}
+
+/**
+ * @description The `HeadContent` component is used to render meta tags, links, and scripts for the current route.
+ * It should be rendered in the `<head>` of your document.
+ */
+export function HeadContent() {
+  const tags = useTags()
+  return tags.map((tag) => (
+    <Asset {...tag} key={`tsr-meta-${JSON.stringify(tag)}`} />
+  ))
+}
+
+function uniqBy<T>(arr: Array<T>, fn: (item: T) => string) {
+  const seen = new Set<string>()
+  return arr.filter((item) => {
+    const key = fn(item)
+    if (seen.has(key)) {
+      return false
+    }
+    seen.add(key)
+    return true
+  })
+}

package/src/Matches.tsx

@@ -88,6 +88,7 @@ export interface RouteMatch<
   meta?: Array<React.JSX.IntrinsicElements['meta'] | undefined>
   links?: Array<React.JSX.IntrinsicElements['link'] | undefined>
   scripts?: Array<React.JSX.IntrinsicElements['script'] | undefined>
+  headScripts?: Array<React.JSX.IntrinsicElements['script'] | undefined>
   headers?: Record<string, string>
   globalNotFound?: boolean
   staticData: StaticDataRouteOption

package/src/Scripts.tsx

@@ -0,0 +1,64 @@
+import { Asset } from './Asset'
+import { useRouterState } from './useRouterState'
+import { useRouter } from './useRouter'
+import type { RouterManagedTag } from '@tanstack/router-core'
+
+export const Scripts = () => {
+  const router = useRouter()
+
+  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,
+                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,
+        },
+        children,
+      })),
+    }),
+  })
+
+  const allScripts = [...scripts, ...assetScripts] as Array<RouterManagedTag>
+
+  return (
+    <>
+      {allScripts.map((asset, i) => (
+        <Asset {...asset} key={`tsr-scripts-${asset.tag}-${i}`} />
+      ))}
+    </>
+  )
+}

package/src/index.tsx

@@ -356,3 +356,7 @@ export type { NotFoundError } from './not-found'
 export * from './typePrimitives'
 
 export { ScriptOnce } from './ScriptOnce'
+
+export { Asset } from './Asset'
+export { HeadContent } from './HeadContent'
+export { Scripts } from './Scripts'

package/src/route.ts

@@ -325,6 +325,51 @@ export interface BeforeLoadContextOptions<
   >
 }
 
+type AssetFnContextOptions<
+  in out TRouteId,
+  in out TFullPath,
+  in out TParentRoute extends AnyRoute,
+  in out TParams,
+  in out TSearchValidator,
+  in out TLoaderFn,
+  in out TRouterContext,
+  in out TRouteContextFn,
+  in out TBeforeLoadFn,
+  in out TLoaderDeps,
+> = {
+  matches: Array<
+    RouteMatch<
+      TRouteId,
+      TFullPath,
+      ResolveAllParamsFromParent<TParentRoute, TParams>,
+      ResolveFullSearchSchema<TParentRoute, TSearchValidator>,
+      ResolveLoaderData<TLoaderFn>,
+      ResolveAllContext<
+        TParentRoute,
+        TRouterContext,
+        TRouteContextFn,
+        TBeforeLoadFn
+      >,
+      TLoaderDeps
+    >
+  >
+  match: RouteMatch<
+    TRouteId,
+    TFullPath,
+    ResolveAllParamsFromParent<TParentRoute, TParams>,
+    ResolveFullSearchSchema<TParentRoute, TSearchValidator>,
+    ResolveLoaderData<TLoaderFn>,
+    ResolveAllContext<
+      TParentRoute,
+      TRouterContext,
+      TRouteContextFn,
+      TBeforeLoadFn
+    >,
+    TLoaderDeps
+  >
+  params: ResolveAllParamsFromParent<TParentRoute, TParams>
+  loaderData: ResolveLoaderData<TLoaderFn>
+}
 export interface UpdatableRouteOptions<
   in out TParentRoute extends AnyRoute,
   in out TRouteId,
@@ -427,44 +472,38 @@ export interface UpdatableRouteOptions<
   headers?: (ctx: {
     loaderData: ResolveLoaderData<TLoaderFn>
   }) => Record<string, string>
-  head?: (ctx: {
-    matches: Array<
-      RouteMatch<
-        TRouteId,
-        TFullPath,
-        ResolveAllParamsFromParent<TParentRoute, TParams>,
-        ResolveFullSearchSchema<TParentRoute, TSearchValidator>,
-        ResolveLoaderData<TLoaderFn>,
-        ResolveAllContext<
-          TParentRoute,
-          TRouterContext,
-          TRouteContextFn,
-          TBeforeLoadFn
-        >,
-        TLoaderDeps
-      >
-    >
-    match: RouteMatch<
+  head?: (
+    ctx: AssetFnContextOptions<
       TRouteId,
       TFullPath,
-      ResolveAllParamsFromParent<TParentRoute, TParams>,
-      ResolveFullSearchSchema<TParentRoute, TSearchValidator>,
-      ResolveLoaderData<TLoaderFn>,
-      ResolveAllContext<
-        TParentRoute,
-        TRouterContext,
-        TRouteContextFn,
-        TBeforeLoadFn
-      >,
+      TParentRoute,
+      TParams,
+      TSearchValidator,
+      TLoaderFn,
+      TRouterContext,
+      TRouteContextFn,
+      TBeforeLoadFn,
       TLoaderDeps
-    >
-    params: ResolveAllParamsFromParent<TParentRoute, TParams>
-    loaderData: ResolveLoaderData<TLoaderFn>
-  }) => {
+    >,
+  ) => {
     links?: AnyRouteMatch['links']
-    scripts?: AnyRouteMatch['scripts']
+    scripts?: AnyRouteMatch['headScripts']
     meta?: AnyRouteMatch['meta']
   }
+  scripts?: (
+    ctx: AssetFnContextOptions<
+      TRouteId,
+      TFullPath,
+      TParentRoute,
+      TParams,
+      TSearchValidator,
+      TLoaderFn,
+      TRouterContext,
+      TRouteContextFn,
+      TBeforeLoadFn,
+      TLoaderDeps
+    >,
+  ) => AnyRouteMatch['scripts']
   ssr?: boolean
   codeSplitGroupings?: Array<
     Array<

package/src/router.ts

@@ -1311,6 +1311,7 @@ export class Router<
           preload: false,
           links: undefined,
           scripts: undefined,
+          headScripts: undefined,
           meta: undefined,
           staticData: route.options.staticData || {},
           loadPromise: createControlledPromise(),
@@ -1378,16 +1379,17 @@ export class Router<
         match.headers = route.options.headers?.({
           loaderData: match.loaderData,
         })
-        const headFnContent = route.options.head?.({
+        const assetContext = {
           matches,
           match,
           params: match.params,
           loaderData: match.loaderData,
-        })
-
+        }
+        const headFnContent = route.options.head?.(assetContext)
         match.links = headFnContent?.links
-        match.scripts = headFnContent?.scripts
+        match.headScripts = headFnContent?.scripts
         match.meta = headFnContent?.meta
+        match.scripts = route.options.scripts?.(assetContext)
       }
     })
 
@@ -2557,16 +2559,19 @@ export class Router<
 
                           await potentialPendingMinPromise()
 
-                          const headFnContent = route.options.head?.({
+                          const assetContext = {
                             matches,
                             match: this.getMatch(matchId)!,
                             params: this.getMatch(matchId)!.params,
                             loaderData,
-                          })
+                          }
+                          const headFnContent =
+                            route.options.head?.(assetContext)
                           const meta = headFnContent?.meta
                           const links = headFnContent?.links
-                          const scripts = headFnContent?.scripts
+                          const headScripts = headFnContent?.scripts
 
+                          const scripts = route.options.scripts?.(assetContext)
                           const headers = route.options.headers?.({
                             loaderData,
                           })
@@ -2580,8 +2585,9 @@ export class Router<
                             loaderData,
                             meta,
                             links,
-                            scripts,
+                            headScripts,
                             headers,
+                            scripts,
                           }))
                         } catch (e) {
                           let error = e

package/src/useNavigate.tsx

@@ -54,13 +54,22 @@ export function Navigate<
   const TMaskFrom extends string = TFrom,
   const TMaskTo extends string = '',
 >(props: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): null {
-  const { navigate } = useRouter()
+  const router = useRouter()
 
+  const previousPropsRef = React.useRef<NavigateOptions<
+    TRouter,
+    TFrom,
+    TTo,
+    TMaskFrom,
+    TMaskTo
+  > | null>(null)
   React.useEffect(() => {
-    navigate({
-      ...props,
-    } as any)
-  }, [navigate, props])
-
+    if (previousPropsRef.current !== props) {
+      router.navigate({
+        ...props,
+      })
+      previousPropsRef.current = props
+    }
+  }, [router, props])
   return null
 }