feat: replace <Meta /> by <HeadContent /> and add dedicated headScrip…

…ts (#3439)
TanStack · Feb 14, 2025 · 4c7caeb · 4c7caeb
1 parent 7d76812
commit 4c7caeb
Show file tree

Hide file tree

Showing 44 changed files with 510 additions and 346 deletions.
diff --git a/docs/router/eslint/create-route-property-order.md b/docs/router/eslint/create-route-property-order.md
@@ -17,7 +17,7 @@ The correct property order is as follows
 - `context`
 - `beforeLoad`
 - `loader`
-- `onEnter`, `onStay`, `onLeave`, `meta`, `links`, `scripts`, `headers`, `remountDeps`
+- `onEnter`, `onStay`, `onLeave`, `head`, `scripts`, `headers`, `remountDeps`
 
 All other properties are insensitive to the order as they do not depend on type inference.
 

diff --git a/docs/router/framework/react/guide/tanstack-start.md b/docs/router/framework/react/guide/tanstack-start.md
@@ -198,9 +198,8 @@ Finally, we need to create the root of our application. This is the entry point
 
 ```tsx
 // app/routes/__root.tsx
-import { createRootRoute } from '@tanstack/react-router'
+import { createRootRoute, HeadContent, Scripts } from '@tanstack/react-router'
 import { Outlet } from '@tanstack/react-router'
-import { Meta, Scripts } from '@tanstack/start'
 import * as React from 'react'
 
 export const Route = createRootRoute({
@@ -231,7 +230,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
   return (
     <html>
       <head>
-        <Meta />
+        <HeadContent />
       </head>
       <body>
         {children}

diff --git a/docs/start/framework/react/build-from-scratch.md b/docs/start/framework/react/build-from-scratch.md
@@ -204,9 +204,13 @@ Finally, we need to create the root of our application. This is the entry point
 
 ```tsx
 // app/routes/__root.tsx
-import { Outlet, createRootRoute } from '@tanstack/react-router'
-import { Meta, Scripts } from '@tanstack/start'
 import type { ReactNode } from 'react'
+import {
+  Outlet,
+  createRootRoute,
+  HeadContent,
+  Scripts,
+} from '@tanstack/react-router'
 
 export const Route = createRootRoute({
   head: () => ({
@@ -238,7 +242,7 @@ function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
   return (
     <html>
       <head>
-        <Meta />
+        <HeadContent />
       </head>
       <body>
         {children}

diff --git a/docs/start/framework/react/learn-the-basics.md b/docs/start/framework/react/learn-the-basics.md
@@ -100,8 +100,12 @@ Because it is **always rendered**, it is the perfect place to construct your app
 
 ```tsx
 // app/routes/__root.tsx
-import { Outlet, createRootRoute } from '@tanstack/react-router'
-import { Meta, Scripts } from '@tanstack/start'
+import {
+  Outlet,
+  createRootRoute,
+  HeadContent,
+  Scripts,
+} from '@tanstack/react-router'
 import type { ReactNode } from 'react'
 
 export const Route = createRootRoute({
@@ -134,7 +138,7 @@ function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
   return (
     <html>
       <head>
-        <Meta />
+        <HeadContent />
       </head>
       <body>
         {children}

diff --git a/e2e/start/basic-auth/app/routes/__root.tsx b/e2e/start/basic-auth/app/routes/__root.tsx
@@ -1,6 +1,12 @@
-import { Link, Outlet, createRootRoute } from '@tanstack/react-router'
+import {
+  HeadContent,
+  Link,
+  Outlet,
+  Scripts,
+  createRootRoute,
+} from '@tanstack/react-router'
 import { TanStackRouterDevtools } from '@tanstack/router-devtools'
-import { Meta, Scripts, createServerFn } from '@tanstack/start'
+import { createServerFn } from '@tanstack/start'
 import * as React from 'react'
 
 import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary.js'
@@ -93,7 +99,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
   return (
     <html>
       <head>
-        <Meta />
+        <HeadContent />
       </head>
       <body>
         <div className="p-2 flex gap-2 text-lg">

diff --git a/e2e/start/basic-react-query/app/routes/__root.tsx b/e2e/start/basic-react-query/app/routes/__root.tsx
@@ -1,11 +1,12 @@
 import {
+  HeadContent,
   Link,
   Outlet,
+  Scripts,
   createRootRouteWithContext,
 } from '@tanstack/react-router'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { TanStackRouterDevtools } from '@tanstack/router-devtools'
-import { Meta, Scripts } from '@tanstack/start'
 import * as React from 'react'
 import type { QueryClient } from '@tanstack/react-query'
 import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
@@ -77,7 +78,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
   return (
     <html>
       <head>
-        <Meta />
+        <HeadContent />
       </head>
       <body>
         <div className="p-2 flex gap-2 text-lg">

diff --git a/e2e/start/basic-rsc/app/routes/__root.tsx b/e2e/start/basic-rsc/app/routes/__root.tsx
@@ -1,6 +1,11 @@
-import { Link, Outlet, createRootRoute } from '@tanstack/react-router'
+import {
+  HeadContent,
+  Link,
+  Outlet,
+  Scripts,
+  createRootRoute,
+} from '@tanstack/react-router'
 import { TanStackRouterDevtools } from '@tanstack/router-devtools'
-import { Meta, Scripts } from '@tanstack/start'
 import * as React from 'react'
 import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
 import { NotFound } from '~/components/NotFound'
@@ -69,7 +74,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
   return (
     <html>
       <head>
-        <Meta />
+        <HeadContent />
       </head>
       <body>
         <div className="p-2 flex gap-2 text-lg">

diff --git a/e2e/start/basic-tsr-config/src/app/routes/__root.tsx b/e2e/start/basic-tsr-config/src/app/routes/__root.tsx
@@ -1,6 +1,10 @@
 import * as React from 'react'
-import { Outlet, createRootRoute } from '@tanstack/react-router'
-import { Meta, Scripts } from '@tanstack/start'
+import {
+  HeadContent,
+  Outlet,
+  Scripts,
+  createRootRoute,
+} from '@tanstack/react-router'
 
 export const Route = createRootRoute({
   head: () => ({
@@ -32,7 +36,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
   return (
     <html>
       <head>
-        <Meta />
+        <HeadContent />
       </head>
       <body>
         {children}

diff --git a/e2e/start/basic/app/routes/__root.tsx b/e2e/start/basic/app/routes/__root.tsx
@@ -1,6 +1,11 @@
 import * as React from 'react'
-import { Link, Outlet, createRootRoute } from '@tanstack/react-router'
-import { Meta, Scripts } from '@tanstack/start'
+import {
+  HeadContent,
+  Link,
+  Outlet,
+  Scripts,
+  createRootRoute,
+} from '@tanstack/react-router'
 
 import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
 import { NotFound } from '~/components/NotFound'
@@ -79,7 +84,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
   return (
     <html>
       <head>
-        <Meta />
+        <HeadContent />
       </head>
       <body>
         <div className="p-2 flex gap-2 text-lg">

diff --git a/e2e/start/clerk-basic/app/routes/__root.tsx b/e2e/start/clerk-basic/app/routes/__root.tsx
@@ -1,5 +1,11 @@
 /// <reference types="vite/client" />
-import { Link, Outlet, createRootRoute } from '@tanstack/react-router'
+import {
+  HeadContent,
+  Link,
+  Outlet,
+  Scripts,
+  createRootRoute,
+} from '@tanstack/react-router'
 import {
   ClerkProvider,
   SignInButton,
@@ -8,7 +14,7 @@ import {
   UserButton,
 } from '@clerk/tanstack-start'
 import { TanStackRouterDevtools } from '@tanstack/router-devtools'
-import { Meta, Scripts, createServerFn } from '@tanstack/start'
+import { createServerFn } from '@tanstack/start'
 import * as React from 'react'
 import { getAuth } from '@clerk/tanstack-start/server'
 import { getWebRequest } from '@tanstack/start/server'
@@ -90,7 +96,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
   return (
     <html>
       <head>
-        <Meta />
+        <HeadContent />
       </head>
       <body>
         <div className="p-2 flex gap-2 text-lg">

diff --git a/e2e/start/scroll-restoration/app/routes/__root.tsx b/e2e/start/scroll-restoration/app/routes/__root.tsx
@@ -4,8 +4,9 @@ import {
   Outlet,
   createRootRoute,
   linkOptions,
+  HeadContent,
+  Scripts,
 } from '@tanstack/react-router'
-import { Meta, Scripts } from '@tanstack/start'
 import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
 import { NotFound } from '~/components/NotFound'
 import appCss from '~/styles/app.css?url'
@@ -73,7 +74,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
   return (
     <html>
       <head>
-        <Meta />
+        <HeadContent />
       </head>
       <body>
         <Nav type="header" />

diff --git a/e2e/start/website/app/routes/__root.tsx b/e2e/start/website/app/routes/__root.tsx
@@ -1,6 +1,10 @@
-import { Outlet, createRootRoute } from '@tanstack/react-router'
+import {
+  Outlet,
+  createRootRoute,
+  HeadContent,
+  Scripts,
+} from '@tanstack/react-router'
 import { TanStackRouterDevtools } from '@tanstack/router-devtools'
-import { Meta, Scripts } from '@tanstack/start'
 import * as React from 'react'
 import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
 import { NotFound } from '~/components/NotFound'
@@ -68,7 +72,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
   return (
     <html>
       <head>
-        <Meta />
+        <HeadContent />
       </head>
       <body>
         {children}

diff --git a/examples/react/basic-ssr-file-based/src/routes/__root.tsx b/examples/react/basic-ssr-file-based/src/routes/__root.tsx
@@ -3,8 +3,9 @@ import {
   Link,
   Outlet,
   createRootRouteWithContext,
+  HeadContent,
+  Scripts,
 } from '@tanstack/react-router'
-import { Meta, Scripts } from '@tanstack/start'
 import type { RouterContext } from '../routerContext'
 
 export const Route = createRootRouteWithContext<RouterContext>()({
@@ -50,7 +51,7 @@ function RootComponent() {
   return (
     <html lang="en">
       <head>
-        <Meta />
+        <HeadContent />
       </head>
       <body>
         <div className="p-2 flex gap-2 text-lg">

diff --git a/examples/react/basic-ssr-streaming-file-based/src/routes/__root.tsx b/examples/react/basic-ssr-streaming-file-based/src/routes/__root.tsx
@@ -4,8 +4,9 @@ import {
   Link,
   Outlet,
   createRootRouteWithContext,
+  HeadContent,
+  Scripts,
 } from '@tanstack/react-router'
-import { Meta, Scripts } from '@tanstack/start'
 import type { RouterContext } from '../routerContext'
 
 export const Route = createRootRouteWithContext<RouterContext>()({
@@ -51,7 +52,7 @@ function RootComponent() {
   return (
     <html lang="en">
       <head>
-        <Meta />
+        <HeadContent />
       </head>
       <body>
         <div className="p-2 flex gap-2 text-lg">

diff --git a/examples/react/start-basic-auth/app/routes/__root.tsx b/examples/react/start-basic-auth/app/routes/__root.tsx
@@ -1,6 +1,12 @@
-import { Link, Outlet, createRootRoute } from '@tanstack/react-router'
+import {
+  HeadContent,
+  Link,
+  Outlet,
+  Scripts,
+  createRootRoute,
+} from '@tanstack/react-router'
 import { TanStackRouterDevtools } from '@tanstack/router-devtools'
-import { Meta, Scripts, createServerFn } from '@tanstack/start'
+import { createServerFn } from '@tanstack/start'
 import * as React from 'react'
 import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary.js'
 import { NotFound } from '~/components/NotFound.js'
@@ -92,7 +98,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
   return (
     <html>
       <head>
-        <Meta />
+        <HeadContent />
       </head>
       <body>
         <div className="p-2 flex gap-2 text-lg">

diff --git a/examples/react/start-basic-react-query/app/routes/__root.tsx b/examples/react/start-basic-react-query/app/routes/__root.tsx
@@ -2,10 +2,11 @@ import {
   Link,
   Outlet,
   createRootRouteWithContext,
+  HeadContent,
+  Scripts,
 } from '@tanstack/react-router'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { TanStackRouterDevtools } from '@tanstack/router-devtools'
-import { Meta, Scripts } from '@tanstack/start'
 import * as React from 'react'
 import type { QueryClient } from '@tanstack/react-query'
 import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
@@ -77,7 +78,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
   return (
     <html>
       <head>
-        <Meta />
+        <HeadContent />
       </head>
       <body>
         <div className="p-2 flex gap-2 text-lg">

diff --git a/examples/react/start-basic-rsc/app/routes/__root.tsx b/examples/react/start-basic-rsc/app/routes/__root.tsx
@@ -1,6 +1,11 @@
-import { Link, Outlet, createRootRoute } from '@tanstack/react-router'
+import {
+  HeadContent,
+  Link,
+  Outlet,
+  Scripts,
+  createRootRoute,
+} from '@tanstack/react-router'
 import { TanStackRouterDevtools } from '@tanstack/router-devtools'
-import { Meta, Scripts } from '@tanstack/start'
 import * as React from 'react'
 import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
 import { NotFound } from '~/components/NotFound'
@@ -69,7 +74,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
   return (
     <html>
       <head>
-        <Meta />
+        <HeadContent />
       </head>
       <body>
         <div className="p-2 flex gap-2 text-lg">

diff --git a/examples/react/start-basic-static/app/routes/__root.tsx b/examples/react/start-basic-static/app/routes/__root.tsx
@@ -1,6 +1,11 @@
-import { Link, Outlet, createRootRoute } from '@tanstack/react-router'
+import {
+  HeadContent,
+  Link,
+  Outlet,
+  Scripts,
+  createRootRoute,
+} from '@tanstack/react-router'
 import { TanStackRouterDevtools } from '@tanstack/router-devtools'
-import { Meta, Scripts } from '@tanstack/start'
 import * as React from 'react'
 import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
 import { NotFound } from '~/components/NotFound'
@@ -69,7 +74,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
   return (
     <html>
       <head>
-        <Meta />
+        <HeadContent />
       </head>
       <body>
         <div className="p-2 flex gap-2 text-lg">