router
router copied to clipboard
TanStack
Implement meta tag deduplication logic
Add logic to determine if meta tags should be deduplicated.
Closes #5146
Summary by CodeRabbit
- Bug Fixes
- Improved meta tag handling to allow multiple theme-color entries while preserving automatic deduplication for other meta attributes.
Walkthrough
The change modifies the meta tag deduplication logic in HeadContent.tsx to allow multiple theme-color meta tags instead of replacing them. A new set defines which attributes should allow duplicates, with a helper function determining eligibility for deduplication.
Changes
| Cohort / File(s) | Summary |
|---|---|
Meta tag deduplication logicpackages/react-router/src/HeadContent.tsx |
Introduced METAS_TO_ALLOW_MULTIPLE set containing 'theme-color' and shouldDeduplicateMetaTag() helper function. Updated deduplication logic to permit multiple meta tags for attributes in this set while maintaining deduplication for other attributes. |
Estimated code review effort
🎯 2 (Simple) | ⏱️ ~8 minutes
- Single file with localized changes to an existing deduplication mechanism
- Straightforward logic: simple set definition and conditional check
- Well-scoped change with clear intent and minimal side effects
Suggested reviewers
- birkskyum
Poem
🌈 A coat of many colors now adorns the head, Theme-color tags bloom where once just one spread, Light and dark hues dance side by side, Multiple shades, no longer cast aside! 🎨
Pre-merge checks and finishing touches
❌ Failed checks (1 warning)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Docstring Coverage | ⚠️ Warning | Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. | You can run @coderabbitai generate docstrings to improve docstring coverage. |
✅ Passed checks (4 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title Check | ✅ Passed | The PR title "Implement meta tag deduplication logic" directly and clearly describes the main change in the pull request. The raw summary confirms that the changes introduce meta tag deduplication logic with a METAS_TO_ALLOW_MULTIPLE set and shouldDeduplicateMetaTag helper function. The title is concise, specific, and accurately conveys the primary modification to the codebase. |
| Linked Issues Check | ✅ Passed | The PR directly addresses the requirement from issue #5146, which requests the ability to include multiple meta tags with the same name (specifically theme-color with different media attributes). The implementation introduces METAS_TO_ALLOW_MULTIPLE containing 'theme-color' and implements shouldDeduplicateMetaTag logic that permits multiple meta tags for specified attributes, effectively allowing multiple theme-color tags to coexist in the document head instead of being deduplicated. This satisfies the core objective of preserving multiple theme-color meta tags with different media attributes for light/dark color schemes. |
| Out of Scope Changes Check | ✅ Passed | All changes in this PR are contained within packages/react-router/src/HeadContent.tsx and are directly related to the scope defined in issue #5146. The modifications include introducing the METAS_TO_ALLOW_MULTIPLE set, adding the shouldDeduplicateMetaTag helper, and updating the meta deduplication logic to selectively allow multiple meta tags for certain attributes. These changes are focused solely on enabling multiple theme-color meta tags and do not introduce any unrelated modifications. |
✨ Finishing touches
- [ ] 📝 Generate docstrings
🧪 Generate unit tests (beta)
- [ ] Create PR with unit tests
- [ ] Post copyable unit tests in a comment
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands and usage tips.
![coderabbitai[bot] avatar](https://avatars.githubusercontent.com/in/347564?v=4 "Published by a pub.dev verified publisher"){kind=small}
View your CI Pipeline Execution ↗ for commit 893579accf8a362c96cf959d5cb9dba27ecae3d2
| Command | Status | Duration | Result |
|---|---|---|---|
nx affected --targets=test:eslint,test:unit,tes... |
✅ Succeeded | 9m 1s | View ↗ |
nx run-many --target=build --exclude=examples/*... |
✅ Succeeded | 56s | View ↗ |
☁️ Nx Cloud last updated this comment at 2025-10-28 19:32:39 UTC
![nx-cloud[bot] avatar](https://avatars.githubusercontent.com/in/80458?v=4 "Published by a pub.dev verified publisher"){kind=small}
More templates
- tanstack-router-solid-example-basic
- tanstack-router-solid-example-basic-devtools-panel
- tanstack-router-solid-example-basic-file-based
- tanstack-router-solid-example-basic-non-nested-devtools
- tanstack-router-solid-example-basic-solid-query
- tanstack-router-solid-example-basic-solid-query-file-based
- tanstack-router-solid-example-basic-ssr-streaming-file-based
- tanstack-router-solid-example-kitchen-sink-file-based
- tanstack-router-solid-example-kitchen-sink-solid-query
- tanstack-router-solid-example-kitchen-sink-solid-query-file-based
- tanstack-router-solid-example-quickstart-file-based
- tanstack-solid-start-example-bare
- tanstack-solid-start-example-basic
- tanstack-solid-start-example-basic-auth
- tanstack-solid-start-example-basic-cloudflare
- tanstack-solid-start-example-basic-netlify
- tanstack-solid-start-example-basic-nitro
- tanstack-start-example-basic-solid-query
- tanstack-solid-start-example-basic-static
- tanstack-router-react-example-authenticated-routes
- tanstack-router-react-example-authenticated-routes-firebase
- tanstack-router-react-example-basic
- tanstack-router-react-example-basic-default-search-params
- tanstack-router-react-example-basic-devtools-panel
- tanstack-router-react-example-basic-file-based
- tanstack-router-react-example-basic-non-nested-devtools
- tanstack-router-react-example-react-query
- tanstack-router-react-example-basic-react-query-file-based
- tanstack-router-react-example-basic-ssr-file-based
- tanstack-router-react-example-basic-ssr-streaming-file-based
- tanstack-router-react-example-basic-virtual-file-based
- tanstack-router-react-example-basic-virtual-inside-file-based
- tanstack-router-react-example-deferred-data
- tanstack-router-i18n-paraglide
- tanstack-router-react-example-kitchen-sink
- tanstack-router-react-example-kitchen-sink-file-based
- tanstack-router-react-example-kitchen-sink-react-query
- tanstack-router-react-example-kitchen-sink-react-query-file-based
- tanstack-router-react-example-large-file-based
- tanstack-router-react-example-location-masking
- tanstack-router-react-example-navigation-blocking
- tanstack-router-react-example-quickstart
- tanstack-router-react-example-quickstart-esbuild-file-based
- tanstack-router-react-example-quickstart-file-based
- tanstack-router-react-example-quickstart-rspack-file-based
- tanstack-router-react-example-quickstart-webpack-file-based
- router-monorepo-react-query
- router-mono-simple
- router-mono-simple-lazy
- tanstack-router-react-example-scroll-restoration
- tanstack-search-validator-adapters
- tanstack-start-example-bare
- tanstack-start-example-basic
- tanstack-start-example-basic-auth
- tanstack-start-example-basic-cloudflare
- tanstack-start-example-basic-react-query
- tanstack-start-example-basic-static
- tanstack-start-bun-hosting
- tanstack-start-example-clerk-basic
- tanstack-start-example-convex-trellaux
- tanstack-start-example-counter
- tanstack-start-i18n-paraglide
- tanstack-start-example-large
- tanstack-start-example-material-ui
- tanstack-start-streaming-data-from-server-functions
- tanstack-start-example-supabase-basic
- tanstack-start-tailwind-v4
- tanstack-start-example-trellaux
- tanstack-start-example-workos
- tanstack-router-react-example-view-transitions
- tanstack-router-react-example-with-framer-motion
- tanstack-router-react-example-with-trpc
- tanstack-router-react-example-with-trpc-react-query
@tanstack/arktype-adapter
npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@5676
@tanstack/directive-functions-plugin
npm i https://pkg.pr.new/TanStack/router/@tanstack/directive-functions-plugin@5676
@tanstack/eslint-plugin-router
npm i https://pkg.pr.new/TanStack/router/@tanstack/eslint-plugin-router@5676
@tanstack/history
npm i https://pkg.pr.new/TanStack/router/@tanstack/history@5676
@tanstack/nitro-v2-vite-plugin
npm i https://pkg.pr.new/TanStack/router/@tanstack/nitro-v2-vite-plugin@5676
@tanstack/react-router
npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router@5676
@tanstack/react-router-devtools
npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@5676
@tanstack/react-router-ssr-query
npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-ssr-query@5676
@tanstack/react-start
npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@5676
@tanstack/react-start-client
npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@5676
@tanstack/react-start-server
npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@5676
@tanstack/router-cli
npm i https://pkg.pr.new/TanStack/router/@tanstack/router-cli@5676
@tanstack/router-core
npm i https://pkg.pr.new/TanStack/router/@tanstack/router-core@5676
@tanstack/router-devtools
npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools@5676
@tanstack/router-devtools-core
npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools-core@5676
@tanstack/router-generator
npm i https://pkg.pr.new/TanStack/router/@tanstack/router-generator@5676
@tanstack/router-plugin
npm i https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@5676
@tanstack/router-ssr-query-core
npm i https://pkg.pr.new/TanStack/router/@tanstack/router-ssr-query-core@5676
@tanstack/router-utils
npm i https://pkg.pr.new/TanStack/router/@tanstack/router-utils@5676
@tanstack/router-vite-plugin
npm i https://pkg.pr.new/TanStack/router/@tanstack/router-vite-plugin@5676
@tanstack/server-functions-plugin
npm i https://pkg.pr.new/TanStack/router/@tanstack/server-functions-plugin@5676
@tanstack/solid-router
npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@5676
@tanstack/solid-router-devtools
npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@5676
@tanstack/solid-router-ssr-query
npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-ssr-query@5676
@tanstack/solid-start
npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@5676
@tanstack/solid-start-client
npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@5676
@tanstack/solid-start-server
npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@5676
@tanstack/start-client-core
npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@5676
@tanstack/start-plugin-core
npm i https://pkg.pr.new/TanStack/router/@tanstack/start-plugin-core@5676
@tanstack/start-server-core
npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@5676
@tanstack/start-static-server-functions
npm i https://pkg.pr.new/TanStack/router/@tanstack/start-static-server-functions@5676
@tanstack/start-storage-context
npm i https://pkg.pr.new/TanStack/router/@tanstack/start-storage-context@5676
@tanstack/valibot-adapter
npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@5676
@tanstack/virtual-file-routes
npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@5676
@tanstack/zod-adapter
npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@5676
commit: 893579a
![pkg-pr-new[bot] avatar](https://avatars.githubusercontent.com/in/882742?v=4 "Published by a pub.dev verified publisher"){kind=small}