TanStack
Similar to how `route.options.meta()` already behaves it would be nice to pass the `loaderData` and `match` to the `links()` function as well.
Similar to how route.options.meta() already behaves it would be nice to pass the loaderData and match to the links() function as well.
For my specific use-case I want to generate a canonical link element that is rendered via the Meta component inside the head. To do this I need some data from the current match and loaderData. Those are available inside meta() but not inside links().
Originally posted by @lo1tuma in https://github.com/TanStack/router/discussions/2419
It could be worth exploring @lo1tuma suggestion here.
The only consideration I see here is that we'd now be expecting links() to be executed only after the loader has completed. Therefore, you wouldn't be able to resolve links() into the <head> before the loader has completed its work.
@SeanCassiere As a suggestion / feature request. Would it be possible to replace meta or add a head property that has the same signature as the meta function and allows for injecting meta, link and script tags in the head?
head: ({ loaderData }) => ({
meta: [ ... ],
links: [ ... ],
scripts: [ ...],
),
@tannerlinsley @schiller-manuel what do you think about this API change?
Also, should we maybe make loaderData be LoaderData | undefined? That way we can execute this function and allow users who don't rely on loaderData to inject the meta, links, and scripts without having to wait.
I like the API suggestion to group under head.
I don't understand the loaderData part. Would we not just invoke this function with the matches?
We'll be using the suggestion by @rehos. I'll look at implementation once I get some time this week. Edit: This'll be a breaking change for Start. We'll be pushing it through since it's in ALPHA.
While migrating a site to @tanstack/start I stumbled on an additional requirement. To prevent CLS we already load a part of the CSS in the head in a style tag. It would be nice if the head function also supports it. I would expect the tags are output in the order meta-tags, style-tags, link-tags and script-tags.
head: ( ... ) => ({
meta: [ ... ],
styles: [ ... ],
links: [ ... ],
scripts: [ ...],
),
@rehos I think I get what you mean. That probably won't go with this fix, but afterwards instead.
There's a question on the API here regarding how that works which would need a bit of addressing, but I'm not against this feature. Once the fix goes through, we can propose the idea of Tanner and see what he thinks.