fix(MDCRenderer): keep async component identity stable across renders - #504
Closed
hendrikheil wants to merge 1 commit into
Closed
fix(MDCRenderer): keep async component identity stable across renders#504hendrikheil wants to merge 1 commit into
hendrikheil wants to merge 1 commit into
Conversation
defineAsyncComponent returns a new component type on every call, and resolveComponentInstance runs from the render function. Vue sees a different type at the same vnode position and remounts the subtree instead of patching it. Cache the wrappers so repeated resolutions return the same instance. Ref nuxt-content/nuxt-studio#383
Merged
3 tasks
commit: |
Contributor
Author
|
Actually, I think this may not be reachable in practice, so I'll close this for now and rely on nuxt/content#3835 for now |
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.
🔗 Linked issue
Ref nuxt-content/nuxt-studio#383
📚 Description
defineAsyncComponentreturns a new component type on every call, andresolveComponentInstancecalls it from inside the render path:resolveComponentInstanceis passed straight into_renderSlotsasresolveComponentand invoked per node on every render, so any component reaching this branch gets a different type on each pass. Vue can't patch across a type change — it unmounts and remounts the node, and the async wrapper renders nothing for a tick while it re-resolves.Caching the wrapper in a
WeakMapkeyed by the resolved component keeps the type identity stable, so repeated renders patch instead of remount. Sharing one wrapper across usages is what a plain component import already does — the wrapper holds no per-instance state.In practice most Nuxt setups take the
AsyncComponentWrapperearly-return above this branch and never reach it, so this is mostly latent there; it's more likely to bite standalone MDC users. The companion fix for the path that does fire under Nuxt Content is nuxt/content#3835.Found while tracking down nuxt-content/nuxt-studio#383, where Studio's live preview remounts the whole rendered document on every keystroke.
📝 Checklist