feat(start): move scripts,links, and meta to the head (#2571)

This minor is non-breaking for Router users, since it's undocumented to the public API, but **is breaking** for Start alpha users. This changes the options signature for meta from this: ```tsx createRoute({ meta: () => [ ... ], links: () => [ ... ], }) ``` to this: ```tsx createRoute({ head: () => ({ meta: [ ... ], links: [ ... ], }) }) ```
TanStack · Nov 17, 2024 · 4ae6ca9 · 4ae6ca9
1 parent acd33f7
commit 4ae6ca9
Show file tree

Hide file tree

Showing 118 changed files with 1,009 additions and 916 deletions.
diff --git a/docs/framework/react/start/getting-started.md b/docs/framework/react/start/getting-started.md
@@ -199,18 +199,20 @@ import { Meta, Scripts } from '@tanstack/start'
 import type { ReactNode } from 'react'
 
 export const Route = createRootRoute({
-  meta: () => [
-    {
-      charSet: 'utf-8',
-    },
-    {
-      name: 'viewport',
-      content: 'width=device-width, initial-scale=1',
-    },
-    {
-      title: 'TanStack Start Starter',
-    },
-  ],
+  head: () => ({
+    meta: [
+      {
+        charSet: 'utf-8',
+      },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1',
+      },
+      {
+        title: 'TanStack Start Starter',
+      },
+    ],
+  }),
   component: RootComponent,
 })
 

diff --git a/e2e/react-router/basic-esbuild-file-based/src/routes/posts.$postId.tsx b/e2e/react-router/basic-esbuild-file-based/src/routes/posts.$postId.tsx
@@ -5,7 +5,7 @@ import type { ErrorComponentProps } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/posts/$postId')({
   loader: async ({ params: { postId } }) => fetchPost(postId),
-  errorComponent: PostErrorComponent as any,
+  errorComponent: PostErrorComponent,
   notFoundComponent: () => {
     return <p>Post not found</p>
   },

diff --git a/e2e/react-router/basic-file-based/src/routes/posts.$postId.tsx b/e2e/react-router/basic-file-based/src/routes/posts.$postId.tsx
@@ -5,7 +5,7 @@ import type { ErrorComponentProps } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/posts/$postId')({
   loader: async ({ params: { postId } }) => fetchPost(postId),
-  errorComponent: PostErrorComponent as any,
+  errorComponent: PostErrorComponent,
   notFoundComponent: () => {
     return <p>Post not found</p>
   },

diff --git a/e2e/react-router/basic-react-query-file-based/src/routes/posts.$postId.tsx b/e2e/react-router/basic-react-query-file-based/src/routes/posts.$postId.tsx
@@ -20,7 +20,7 @@ export const Route = createFileRoute('/posts/$postId')({
   component: PostComponent,
 })
 
-export function PostErrorComponent({ error, reset }: ErrorComponentProps) {
+export function PostErrorComponent({ error }: ErrorComponentProps) {
   const router = useRouter()
   if (error instanceof PostNotFoundError) {
     return <div>{error.message}</div>

diff --git a/e2e/react-router/basic-react-query/src/main.tsx b/e2e/react-router/basic-react-query/src/main.tsx
@@ -2,7 +2,6 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import {
   ErrorComponent,
-  type ErrorComponentProps,
   Link,
   Outlet,
   RouterProvider,
@@ -20,6 +19,7 @@ import {
   useSuspenseQuery,
 } from '@tanstack/react-query'
 import { NotFoundError, postQueryOptions, postsQueryOptions } from './posts'
+import type { ErrorComponentProps } from '@tanstack/react-router'
 
 const rootRoute = createRootRouteWithContext<{
   queryClient: QueryClient

diff --git a/e2e/react-router/basic-scroll-restoration/src/main.tsx b/e2e/react-router/basic-scroll-restoration/src/main.tsx
@@ -214,7 +214,7 @@ const router = createRouter({ routeTree, defaultPreload: 'intent' })
 
 declare global {
   interface Window {
-    invokeOrders: string[]
+    invokeOrders: Array<string>
   }
 }
 window.invokeOrders = []

diff --git a/e2e/react-router/basic-virtual-file-based/src/routes/file-based-subtree/hello/index.tsx b/e2e/react-router/basic-virtual-file-based/src/routes/file-based-subtree/hello/index.tsx
@@ -1,4 +1,4 @@
-import { Link, createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/classic/hello/')({
   component: () => <div>This is the index</div>,

diff --git a/e2e/react-router/basic/src/main.tsx b/e2e/react-router/basic/src/main.tsx
@@ -1,7 +1,6 @@
 import ReactDOM from 'react-dom/client'
 import {
   ErrorComponent,
-  type ErrorComponentProps,
   Link,
   Outlet,
   RouterProvider,
@@ -11,6 +10,7 @@ import {
 } from '@tanstack/react-router'
 import { TanStackRouterDevtools } from '@tanstack/router-devtools'
 import { NotFoundError, fetchPost, fetchPosts } from './posts'
+import type { ErrorComponentProps } from '@tanstack/react-router'
 
 const rootRoute = createRootRoute({
   component: RootComponent,

diff --git a/e2e/start/basic-auth/app/client.tsx b/e2e/start/basic-auth/app/client.tsx
@@ -1,3 +1,4 @@
+/// <reference types="vinxi/types/client" />
 import { hydrateRoot } from 'react-dom/client'
 import { StartClient } from '@tanstack/start'
 import { createRouter } from './router'

diff --git a/e2e/start/basic-auth/app/components/DefaultCatchBoundary.tsx b/e2e/start/basic-auth/app/components/DefaultCatchBoundary.tsx
@@ -1,11 +1,11 @@
 import {
   ErrorComponent,
-  ErrorComponentProps,
   Link,
   rootRouteId,
   useMatch,
   useRouter,
 } from '@tanstack/react-router'
+import type { ErrorComponentProps } from '@tanstack/react-router'
 
 export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
   const router = useRouter()

diff --git a/e2e/start/basic-auth/app/routes/__root.tsx b/e2e/start/basic-auth/app/routes/__root.tsx
@@ -7,6 +7,7 @@ import {
 import { TanStackRouterDevtools } from '@tanstack/router-devtools'
 import { Meta, Scripts, createServerFn } from '@tanstack/start'
 import * as React from 'react'
+
 import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary.js'
 import { NotFound } from '~/components/NotFound.js'
 import appCss from '~/styles/app.css?url'
@@ -27,42 +28,44 @@ const fetchUser = createServerFn({ method: 'GET' }).handler(async () => {
 })
 
 export const Route = createRootRoute({
-  meta: () => [
-    {
-      charSet: 'utf-8',
-    },
-    {
-      name: 'viewport',
-      content: 'width=device-width, initial-scale=1',
-    },
-    ...seo({
-      title:
-        'TanStack Start | Type-Safe, Client-First, Full-Stack React Framework',
-      description: `TanStack Start is a type-safe, client-first, full-stack React framework. `,
-    }),
-  ],
-  links: () => [
-    { rel: 'stylesheet', href: appCss },
-    {
-      rel: 'apple-touch-icon',
-      sizes: '180x180',
-      href: '/apple-touch-icon.png',
-    },
-    {
-      rel: 'icon',
-      type: 'image/png',
-      sizes: '32x32',
-      href: '/favicon-32x32.png',
-    },
-    {
-      rel: 'icon',
-      type: 'image/png',
-      sizes: '16x16',
-      href: '/favicon-16x16.png',
-    },
-    { rel: 'manifest', href: '/site.webmanifest', color: '#fffff' },
-    { rel: 'icon', href: '/favicon.ico' },
-  ],
+  head: () => ({
+    meta: [
+      {
+        charSet: 'utf-8',
+      },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1',
+      },
+      ...seo({
+        title:
+          'TanStack Start | Type-Safe, Client-First, Full-Stack React Framework',
+        description: `TanStack Start is a type-safe, client-first, full-stack React framework. `,
+      }),
+    ],
+    links: [
+      { rel: 'stylesheet', href: appCss },
+      {
+        rel: 'apple-touch-icon',
+        sizes: '180x180',
+        href: '/apple-touch-icon.png',
+      },
+      {
+        rel: 'icon',
+        type: 'image/png',
+        sizes: '32x32',
+        href: '/favicon-32x32.png',
+      },
+      {
+        rel: 'icon',
+        type: 'image/png',
+        sizes: '16x16',
+        href: '/favicon-16x16.png',
+      },
+      { rel: 'manifest', href: '/site.webmanifest', color: '#fffff' },
+      { rel: 'icon', href: '/favicon.ico' },
+    ],
+  }),
   beforeLoad: async () => {
     const user = await fetchUser()
 

diff --git a/e2e/start/basic-auth/app/routes/_authed.tsx b/e2e/start/basic-auth/app/routes/_authed.tsx
@@ -1,5 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { createServerFn } from '@tanstack/start'
+
 import { hashPassword, prismaClient } from '~/utils/prisma'
 import { Login } from '~/components/Login'
 import { useAppSession } from '~/utils/session'

diff --git a/e2e/start/basic-auth/app/routes/_authed/posts.$postId.tsx b/e2e/start/basic-auth/app/routes/_authed/posts.$postId.tsx
@@ -1,11 +1,12 @@
 import { ErrorComponent, createFileRoute } from '@tanstack/react-router'
 import type { ErrorComponentProps } from '@tanstack/react-router'
+
 import { NotFound } from '~/components/NotFound.js'
 import { fetchPost } from '~/utils/posts.js'
 
 export const Route = createFileRoute('/_authed/posts/$postId')({
   loader: ({ params: { postId } }) => fetchPost({ data: postId }),
-  errorComponent: PostErrorComponent as any,
+  errorComponent: PostErrorComponent,
   component: PostComponent,
   notFoundComponent: () => {
     return <NotFound>Post not found</NotFound>

diff --git a/e2e/start/basic-auth/app/routes/_authed/posts.tsx b/e2e/start/basic-auth/app/routes/_authed/posts.tsx
@@ -1,4 +1,5 @@
 import { Link, Outlet, createFileRoute } from '@tanstack/react-router'
+
 import { fetchPosts } from '~/utils/posts.js'
 
 export const Route = createFileRoute('/_authed/posts')({

diff --git a/e2e/start/basic-auth/app/routes/login.tsx b/e2e/start/basic-auth/app/routes/login.tsx
@@ -1,4 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router'
+
 import { Login } from '~/components/Login'
 
 export const Route = createFileRoute('/login')({

diff --git a/e2e/start/basic-auth/app/routes/logout.tsx b/e2e/start/basic-auth/app/routes/logout.tsx
@@ -1,5 +1,6 @@
 import { createFileRoute, redirect } from '@tanstack/react-router'
 import { createServerFn } from '@tanstack/start'
+
 import { useAppSession } from '~/utils/session'
 
 const logoutFn = createServerFn({ method: 'POST' }).handler(async () => {

diff --git a/e2e/start/basic-react-query/app/client.tsx b/e2e/start/basic-react-query/app/client.tsx
@@ -1,3 +1,4 @@
+/// <reference types="vinxi/types/client" />
 import { hydrateRoot } from 'react-dom/client'
 import { StartClient } from '@tanstack/start'
 import { createRouter } from './router'

diff --git a/e2e/start/basic-react-query/app/components/DefaultCatchBoundary.tsx b/e2e/start/basic-react-query/app/components/DefaultCatchBoundary.tsx
@@ -1,11 +1,11 @@
 import {
   ErrorComponent,
-  ErrorComponentProps,
   Link,
   rootRouteId,
   useMatch,
   useRouter,
 } from '@tanstack/react-router'
+import type { ErrorComponentProps } from '@tanstack/react-router'
 
 export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
   const router = useRouter()

diff --git a/e2e/start/basic-react-query/app/routes/__root.tsx b/e2e/start/basic-react-query/app/routes/__root.tsx
@@ -11,49 +11,50 @@ import * as React from 'react'
 import type { QueryClient } from '@tanstack/react-query'
 import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
 import { NotFound } from '~/components/NotFound'
-// @ts-expect-error
 import appCss from '~/styles/app.css?url'
 import { seo } from '~/utils/seo'
 
 export const Route = createRootRouteWithContext<{
   queryClient: QueryClient
 }>()({
-  meta: () => [
-    {
-      charSet: 'utf-8',
-    },
-    {
-      name: 'viewport',
-      content: 'width=device-width, initial-scale=1',
-    },
-    ...seo({
-      title:
-        'TanStack Start | Type-Safe, Client-First, Full-Stack React Framework',
-      description: `TanStack Start is a type-safe, client-first, full-stack React framework. `,
-    }),
-  ],
-  links: () => [
-    { rel: 'stylesheet', href: appCss },
-    {
-      rel: 'apple-touch-icon',
-      sizes: '180x180',
-      href: '/apple-touch-icon.png',
-    },
-    {
-      rel: 'icon',
-      type: 'image/png',
-      sizes: '32x32',
-      href: '/favicon-32x32.png',
-    },
-    {
-      rel: 'icon',
-      type: 'image/png',
-      sizes: '16x16',
-      href: '/favicon-16x16.png',
-    },
-    { rel: 'manifest', href: '/site.webmanifest', color: '#fffff' },
-    { rel: 'icon', href: '/favicon.ico' },
-  ],
+  head: () => ({
+    meta: [
+      {
+        charSet: 'utf-8',
+      },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1',
+      },
+      ...seo({
+        title:
+          'TanStack Start | Type-Safe, Client-First, Full-Stack React Framework',
+        description: `TanStack Start is a type-safe, client-first, full-stack React framework. `,
+      }),
+    ],
+    links: [
+      { rel: 'stylesheet', href: appCss },
+      {
+        rel: 'apple-touch-icon',
+        sizes: '180x180',
+        href: '/apple-touch-icon.png',
+      },
+      {
+        rel: 'icon',
+        type: 'image/png',
+        sizes: '32x32',
+        href: '/favicon-32x32.png',
+      },
+      {
+        rel: 'icon',
+        type: 'image/png',
+        sizes: '16x16',
+        href: '/favicon-16x16.png',
+      },
+      { rel: 'manifest', href: '/site.webmanifest', color: '#fffff' },
+      { rel: 'icon', href: '/favicon.ico' },
+    ],
+  }),
   errorComponent: (props) => {
     return (
       <RootDocument>

diff --git a/e2e/start/basic-react-query/app/routes/posts.$postId.tsx b/e2e/start/basic-react-query/app/routes/posts.$postId.tsx
@@ -1,7 +1,8 @@
 import { ErrorComponent, Link, createFileRoute } from '@tanstack/react-router'
 import { useSuspenseQuery } from '@tanstack/react-query'
-import { postQueryOptions } from '../utils/posts'
 import type { ErrorComponentProps } from '@tanstack/react-router'
+
+import { postQueryOptions } from '~/utils/posts'
 import { NotFound } from '~/components/NotFound'
 
 export const Route = createFileRoute('/posts/$postId')({
@@ -14,12 +15,10 @@ export const Route = createFileRoute('/posts/$postId')({
       title: data.title,
     }
   },
-  meta: ({ loaderData }) => [
-    {
-      title: loaderData.title,
-    },
-  ],
-  errorComponent: PostErrorComponent as any,
+  head: ({ loaderData }) => ({
+    meta: loaderData ? [{ title: loaderData.title }] : undefined,
+  }),
+  errorComponent: PostErrorComponent,
   notFoundComponent: () => {
     return <NotFound>Post not found</NotFound>
   },