feat: use generic default meta tags unless not overridden

packages/react-router/src/HeadContent.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { applyDefaultMeta } from '@tanstack/router-core'
 import { Asset } from './Asset'
 import { useRouter } from './useRouter'
 import { useRouterState } from './useRouterState'
@@ -17,6 +18,8 @@ export const useTags = () => {
     const resultMeta: Array<RouterManagedTag> = []
     const metaByAttribute: Record<string, true> = {}
     let title: RouterManagedTag | undefined
+
+    applyDefaultMeta(routeMeta, resultMeta, metaByAttribute)
     ;[...routeMeta].reverse().forEach((metas) => {
       ;[...metas].reverse().forEach((m) => {
         if (!m) return

packages/react-router/tests/Scripts.test.tsx

@@ -134,6 +134,7 @@ describe('ssr HeadContent', () => {
       head: ({ loaderData }) => {
         return {
           meta: [
+            { charSet: 'ascii' },
             {
               title: 'Root',
             },
@@ -202,6 +203,7 @@ describe('ssr HeadContent', () => {
     await router.load()
 
     expect(router.state.matches.map((d) => d.meta).flat(1)).toEqual([
+      { charSet: 'ascii' },
       { title: 'Root' },
       { name: 'description', content: 'Root' },
       { name: 'image', content: 'image.jpg' },
@@ -217,7 +219,7 @@ describe('ssr HeadContent', () => {
       <RouterProvider router={router} />,
     )
     expect(html).toEqual(
-      `<title>Index</title><meta name="image" content="image.jpg"/><meta property="og:description" content="Root description"/><meta name="description" content="Index"/><meta name="last-modified" content="2021-10-10"/><meta property="og:image" content="index-image.jpg"/>`,
+      `<meta charSet="ascii"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Index</title><meta name="image" content="image.jpg"/><meta property="og:description" content="Root description"/><meta name="description" content="Index"/><meta name="last-modified" content="2021-10-10"/><meta property="og:image" content="index-image.jpg"/>`,
     )
   })
 })

packages/router-core/src/head-content.ts

@@ -0,0 +1,38 @@
+import type { RouterManagedTag } from './manifest'
+
+const defaultMeta: Array<{
+  key: string
+  tag: 'meta'
+  matcher: (m: any) => boolean
+  attrs: Record<string, string>
+}> = [
+  {
+    key: 'charSet',
+    tag: 'meta',
+    matcher: (m) => m?.charset != null || m?.charSet != null,
+    attrs: { charset: 'utf-8' },
+  },
+  {
+    key: 'viewport',
+    tag: 'meta',
+    matcher: (m) => m?.name === 'viewport',
+    attrs: {
+      name: 'viewport',
+      content: 'width=device-width, initial-scale=1',
+    },
+  },
+]
+
+export function applyDefaultMeta(
+  routeMeta: Array<Array<any>>,
+  resultMeta: Array<RouterManagedTag>,
+  metaByAttribute: Record<string, boolean>,
+) {
+  for (const { key, matcher, tag, attrs } of defaultMeta) {
+    const already = routeMeta.flat(1).some(matcher)
+    if (!already) {
+      resultMeta.push({ tag, attrs })
+      metaByAttribute[key] = true
+    }
+  }
+}

packages/router-core/src/index.ts

@@ -418,3 +418,5 @@ export type {
   ValidateUseSearchResult,
   ValidateUseParamsResult,
 } from './typePrimitives'
+
+export { applyDefaultMeta } from './head-content'

packages/solid-router/src/HeadContent.tsx

@@ -1,5 +1,6 @@
 import * as Solid from 'solid-js'
 import { MetaProvider } from '@solidjs/meta'
+import { applyDefaultMeta } from '@tanstack/router-core'
 import { Asset } from './Asset'
 import { useRouter } from './useRouter'
 import { useRouterState } from './useRouterState'
@@ -18,6 +19,8 @@ export const useTags = () => {
     const resultMeta: Array<RouterManagedTag> = []
     const metaByAttribute: Record<string, true> = {}
     let title: RouterManagedTag | undefined
+
+    applyDefaultMeta(routeMeta(), resultMeta, metaByAttribute)
     ;[...routeMeta()].reverse().forEach((metas) => {
       ;[...metas].reverse().forEach((m) => {
         if (!m) return

packages/solid-router/tests/Scripts.test.tsx

@@ -117,6 +117,7 @@ describe('ssr HeadContent', () => {
       head: ({ loaderData }) => {
         return {
           meta: [
+            { charSet: 'ascii' },
             {
               title: 'Root',
             },
@@ -186,6 +187,7 @@ describe('ssr HeadContent', () => {
     await router.load()
 
     expect(router.state.matches.map((d) => d.meta).flat(1)).toEqual([
+      { charSet: 'ascii' },
       { title: 'Root' },
       { name: 'description', content: 'Root' },
       { name: 'image', content: 'image.jpg' },