Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: update functional components in hmr.reload() #52

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

jonaskuske
Copy link

@jonaskuske jonaskuske commented Sep 30, 2022

An SFC functional component that does not use <template functional> will go through __VUE_HMR_RUNTIME__.reload() instead of .rerender(), because the plugin can't detect the functional template attr to inject its _rerender_only marker.

After updating the component's options, the reload function will still try to reload it by updating its parent via $vnode.context. This causes two issues:

  1. For functional components, the instance already points to the component's (stateful) parent. In turn, the functional component's grandparent is updated, which does not cause the functional component down the tree to rerender. (unless props changed) So the update does not appear on the screen until maybe later some other condition causes a rerender:
A (instance.$vnode.context)
  B (instance)
    C (functional component child)

reload(C) ----> A.$forceUpdate() --/XX/--> C rerenders
  1. If the functional component is rendered as child in the root component, then even though not the root but a child was modified, instance will point to the root. The runtime notices that the instance has no parent context (which would be the child's grandparent) and issues a warning about unsupported root HMR instead of updating the child:
A ($vnode.context = undefined)
  App.vue (instance = root)
    C (functional component child)

reload(C) ----> (undefined).$forceUpdate() ----> warning --/XX/--> C rerenders

To fix this, this PR makes __VUE_HMR_RUNTIME__.reload call .$forceUpdate() on the instance itself instead of on the parent context if the reloaded component is functional.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant