next compatibility

Author: morinokami

packages/meta/README.md

@@ -64,10 +64,10 @@ generateMetadata({ title: "About" })
 // Output: <title>About | My Site</title>
 
 generateMetadata({ title: null })
-// Output: <title>Default Title | My Site</title>
+// Output: <title>Default Title</title>
 
 generateMetadata({})
-// Output: <title>Default Title | My Site</title>
+// Output: <title>Default Title</title>
 ```
 
 To opt out of the title template on a specific page, use `title.absolute`:
@@ -77,6 +77,8 @@ generateMetadata({ title: { absolute: "Home" } })
 // Output: <title>Home</title> (template is ignored)
 ```
 
+`%s` placeholders are all replaced. For example, `template: "%s | %s | My Site"` with `title: "Docs"` renders `<title>Docs | Docs | My Site</title>`.
+
 ## Reference
 
 ### `generateMetadata`

packages/meta/src/index.test.ts

@@ -67,13 +67,13 @@ describe("createMetadataGenerator", () => {
 		test("uses default when title is null", () => {
 			const result = generateMetadata({ title: null });
 
-			expect(result.meta).toContainEqual({ title: "My Site | My Site" });
+			expect(result.meta).toContainEqual({ title: "My Site" });
 		});
 
 		test("uses default when title is undefined", () => {
 			const result = generateMetadata({});
 
-			expect(result.meta).toContainEqual({ title: "My Site | My Site" });
+			expect(result.meta).toContainEqual({ title: "My Site" });
 		});
 
 		test("ignores template when title is absolute", () => {
@@ -145,5 +145,15 @@ describe("createMetadataGenerator", () => {
 
 			expect(result.meta).toContainEqual({ title: " | Site" });
 		});
+
+		test("replaces all %s placeholders", () => {
+			const generateMetadata = createMetadataGenerator({
+				titleTemplate: { default: "Site", template: "%s | %s | Site" },
+			});
+
+			const result = generateMetadata({ title: "Docs" });
+
+			expect(result.meta).toContainEqual({ title: "Docs | Docs | Site" });
+		});
 	});
 });

packages/meta/src/index.ts

@@ -34,12 +34,16 @@ function resolveTitle(
 	) {
 		title = metadata.title.absolute;
 	} else {
-		title = options.titleTemplate
-			? options.titleTemplate.template.replace(
-					"%s",
-					metadata.title ?? options.titleTemplate.default,
-				)
-			: metadata.title;
+		const { titleTemplate } = options;
+		if (!titleTemplate) {
+			title = metadata.title;
+		} else {
+			if (typeof metadata.title === "string") {
+				title = titleTemplate.template.split("%s").join(metadata.title);
+			} else {
+				title = titleTemplate.default;
+			}
+		}
 	}
 
 	return title;

playground/src/meta.ts

@@ -2,7 +2,7 @@ import { createMetadataGenerator } from "tanstack-meta";
 
 export const generateMetadata = createMetadataGenerator({
 	titleTemplate: {
-		default: "TanStack",
+		default: "TanStack | High Quality Open-Source Software for Web Developers",
 		template: "%s | High Quality Open-Source Software for Web Developers",
 	},
 });

playground/src/routes/__root.tsx

@@ -17,6 +17,7 @@ export const Route = createRootRoute({
 
 		const { meta, links } = generateMetadata({
 			charSet: "utf-8",
+			title: "TanStack",
 			viewport: {
 				width: "device-width",
 				initialScale: 1,