fix(router,ssr): render the httpEquiv meta prop as the http-equiv attribute - #253
Merged
Conversation
… attribute Head descriptor props are camelCase, and `httpEquiv` is the only one whose attribute name is not its lowercase form. `syncHead` passed the prop name to `setAttribute` and to the hydration selector, and `headDescriptorToHtml` lowercased it, so both sides produced `httpequiv`, which browsers ignore, and hydration appended a second `meta` next to the server-rendered one. The new `toHtmlAttribute` helper in `@nano_kit/router` maps a prop name to its attribute name and is shared by the client and the SSR renderer. The `router` size limit is re-pinned for the helper.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #253 +/- ##
=======================================
Coverage 83.33% 83.33%
=======================================
Files 98 98
Lines 2556 2557 +1
Branches 551 552 +1
=======================================
+ Hits 2130 2131 +1
Misses 314 314
Partials 112 112 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
Head descriptor props follow the React naming, and
httpEquivis the only prop whose HTML attribute name is not just its lowercase form.syncHeadpassed the prop name straight tosetAttributeand into the hydration selector, andheadDescriptorToHtmlonly lowercased it, someta({ httpEquiv: 'refresh', content: '...' })produced<meta httpequiv="refresh">both on the client and in server HTML. Browsers ignore that attribute, and on hydration the selectormeta[httpEquiv="refresh"]did not match the server tag, so a secondmetawas appended.What
@nano_kit/routerexportstoHtmlAttribute(prop):httpEquivbecomeshttp-equiv, everything else is lowercased.syncHeaduses it for the hydration selector andsetAttribute.headDescriptorToHtmlin@nano_kit/ssruses the same helper instead of its owntoLowerCase().toHtmlAttributeunit tests,should render httpEquiv as the http-equiv attributeandshould hydrate existing http-equiv meta tagin the routermetasuite (both fail onmain:httpequiv, and a duplicatedmeta), and the SSR counterpart inheadDescriptorToHtml.Size
The public helper costs bytes in the router bundle; the limit is re-pinned on the 0.05 kB step:
Checks
oxlint,tsc --noEmitandvitest runpass inpackages/router(135 tests) andpackages/ssr(15 tests);size-limitpasses inpackages/router.