fix(ssr): render hidden correctly
#13125
Conversation
Size ReportBundles
Usages
|
@vue/compiler-core
@vue/compiler-dom
@vue/compiler-sfc
@vue/compiler-ssr
@vue/reactivity
@vue/runtime-core
@vue/runtime-dom
@vue/server-renderer
@vue/shared
vue
@vue/compat
commit: |
|
/ecosystem-ci run |
edison1105
added
has workaround
|
📝 Ran ecosystem CI: Open
|
|
LGTM |
|
That example renders correctly with 4 This works correctly on |
WalkthroughThe changes introduce explicit support for "overloaded boolean attributes," focusing on the Changes
Sequence Diagram(s)sequenceDiagram
participant SSR as SSR Renderer
participant DOM as DOM Element
participant Hydration as Hydration Logic
SSR->>DOM: Render element with hidden attribute (true/false/string/empty)
DOM->>Hydration: Element with rendered hidden attribute
Hydration->>DOM: Check attribute (isBooleanAttr/isOverloadedBooleanAttr)
Hydration->>DOM: Compare actual vs expected using isBooleanAttrValue/includeBooleanAttr
Note right of Hydration: No mismatch warning if values align
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🔇 Additional comments (3)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
| if (isOverloadedBooleanAttr(key) && isBooleanAttrValue(value)) { | ||
| return includeBooleanAttr(value) ? ` ${key}` : `` | ||
| } |
There was a problem hiding this comment.
I've been giving this some more thought and I'm concerned about this part.
The functions ssrRenderAttrs and ssrRenderDynamicAttr handle the general case. They're able to render any attribute as a string.
But the compiler then has special cases to improve performance when sufficient information is available at compile time. Boolean attributes are rendered using ssrIncludeBooleanAttr (an aliased version of includeBooleanAttr), while other 'safe' attributes are rendered using ssrRenderAttr.
The change proposed here is adding extra logic to ssrRenderAttr, so that it handles more cases. I think that defeats the purpose of having a separate function. We already have functions to handle the general case, this function is intended to handle just one, very specific case.
In my opinion, this case should be handled separately in the compiler, rather than altering ssrRenderAttr.
For example, it might be possible to use SSR_RENDER_DYNAMIC_ATTR in ssrTransformElement.ts to handle the overloaded boolean case. It would also be possible to do this with a new helper, but I'm not sure it's worth it just for the hidden attribute.
Add support for
hidden="until-found"This PR fixes the issue where Vue treats the
hiddenattribute as a boolean, causing"until-found"to be incorrectly rendered.core/packages/shared/src/domAttrConfig.ts
Lines 21 to 23 in f6e84af
Example
Summary by CodeRabbit
hiddenattribute to handle both boolean and string values consistently across server-side rendering, hydration, and static compilation.hiddenattribute values.hiddenattribute in SSR and hydration.