Expose some internal hooks to make customization easier (useTags in HeadContent)

[kushuh]

I'd like to play with the default HeadContent component, to add some custom interactions with the document head (ability to override / modify some tags in my components, through a custom context).

It is tempting to rewrite the default component with extra logic, as its definition is already fairly simple and elegant.

export function HeadContent() {
  const tags = useTags()
  return tags.map((tag) => (
    <Asset {...tag} key={`tsr-meta-${JSON.stringify(tag)}`} />
  ))
}

The Asset component is exported, but the useTags hook is not. This makes replicating the component complicated, as the internal logic of useTags is complex (~150 lines).

Request

Would it be possible to simply export this hook, along with the Asset component ? It would make expanding the original logic a breeze, without the need to override everything.

The current workaround (Processing accumulated route context) kind of works, but is implementation heavy and not fit for every use case.

Also my demand is only for this specific hook, but maybe some more internal methods / types could be exposed to make the router customization easier, without breaking any existing APIs ?

[kushuh]

As a side note, having the useTags hook available, while immensely helpful, still requires to reimplement the de-duping mechanisms if we want to do things cleanly. I think it can be easily solved by splitting the hook in 2:

// ============================================================
// Current implementation
// ============================================================
export const useTags = () => {
  const router = useRouter()

  const routeMeta = useRouterState({
    select: (state) => {
      return state.matches.map((match) => match.meta!).filter(Boolean)
    },
  })

  // De-duping and parsing logic...
}

export function HeadContent() {
  const tags = useTags()
}

// ============================================================
// Exposed implementation
// ============================================================
export const useTags = (macthes: unknown[]) => {
  // De-duping and parsing logic...
}

export function HeadContent() {
  const routeMeta = useRouterState({
    select: (state) => {
      return state.matches.map((match) => match.meta!).filter(Boolean)
    },
  })

  const tags = useTags(routeMeta)
}

So we have the freedom to provide what we want to the hook, including the original data!

// User implementation
export function CustomHeadContent() {
  const { customTags } = useCustomTagsFromContext()

  // Retrieve the router tags as well.
  const routeMeta = useRouterState({
    select: (state) => {
      return state.matches.map((match) => match.meta!).filter(Boolean)
    },
  })

  // Provide our own tags, and still benefit from tanstack deduping / parsing logic.
  const tags = useTags([...routeMeta, ...customTags])
}