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.

Sign up for GitHub

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

Jump to bottom

fix(Suspense): switch suspense cause error in the Keepalive (fix: #6416) #6467

Closed
wants to merge 2 commits into from
Closed

fix(Suspense): switch suspense cause error in the Keepalive (fix: #6416) #6467

wants to merge 2 commits into from

Conversation

moushicheng
Copy link
Contributor

@moushicheng moushicheng commented Aug 13, 2022 •
edited
Loading

Fixes #6416
I wrote a test case to replicate the bug in Suspense.spec.ts。

This bug occurs for two reasons

  1. One is pendingId , pendingId controls whether to render pendingBranch or not .so we need to reduce pendingId sometimes.
  2. In Function setActiveBranch, sometimes,branch.el is null,it overlay suspense.vnode.el, cause suspense.vnode.el missing.Finally,it will cause parent misiing in Function parentNode
  3. but this bug still alive in some case...
function setActiveBranch(suspense: SuspenseBoundary, branch: VNode) {
  suspense.activeBranch = branch
  const { vnode, parentComponent } = suspense
  const el = (vnode.el = branch.el) //sometime,branch.el is null
  if (parentComponent && parentComponent.subTree === vnode) {
  //...
  }
}

Here's a video demo of the fix: https://www.bilibili.com/video/BV1Cd4y1R7bU/
and SFC Playground demo of this fix:my demo

@moushicheng moushicheng changed the title fix(Suspense):switch suspense cause error in the Keepalive fix(Suspense):switch suspense cause error in the Keepalive (fix: #6416) Aug 13, 2022
@edison1105
Copy link
Member

this seems not to fix #6463. see demo with your deploy preview

@moushicheng
Copy link
Contributor Author

moushicheng commented Aug 18, 2022 •
edited
Loading

this seems not to fix #6463. see demo with your deploy preview

yes...I misunderstood the difference between #6416 and #6463,seem my pr only fix #6416,
Here's a video demo of the fix: https://www.bilibili.com/video/BV1Cd4y1R7bU/
and SFC Playground demo of this fix:my demo

edison1105
edison1105 reviewed Aug 19, 2022
View reviewed changes
packages/runtime-core/src/components/Suspense.ts
@@ -321,7 +321,7 @@ function patchSuspense(
triggerEvent(n2, 'onPending')
// mount pending branch in off-dom container
suspense.pendingBranch = newBranch
suspense.pendingId++
if (suspense.pendingId > 0) suspense.pendingId--
Copy link
Member

@edison1105 edison1105 Aug 19, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the root cause is: the newBranch is cached in keepalive and its suspenseId not updated when pendingId++. if we update the suspenseId of newBranch will be ok.

likely:

if (
  parentComponent &&
  (parentComponent.vnode.type as any).__isKeepAlive &&
  newBranch.component
) {
  newBranch.component.suspenseId = suspense.pendingId
}

edison1105
edison1105 reviewed Aug 19, 2022
View reviewed changes
packages/runtime-dom/src/nodeOps.ts
@@ -42,7 +42,7 @@ export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
el.textContent = text
},

parentNode: node => node.parentNode as Element | null,
parentNode: node => (node ? node.parentNode : null) as Element | null,
Copy link
Member

@edison1105 edison1105 Aug 19, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this change is unnecessary.

edison1105
edison1105 reviewed Aug 19, 2022
View reviewed changes
packages/runtime-test/src/nodeOps.ts
@@ -212,7 +212,7 @@ function setElementText(el: TestElement, text: string) {
}

function parentNode(node: TestNode): TestElement | null {
return node.parentNode
return node ? node.parentNode : null
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this change is unnecessary.

@mefcorvi
Copy link
Contributor

Hello, any progress with this PR? Need any help?

@moushicheng
Copy link
Contributor Author

Hello, any progress with this PR? Need any help?

Thank you for your kindness!, but this PR should be suspended first as the reason for this bug is complex，I think it needs further study。

@antfu antfu changed the title fix(Suspense):switch suspense cause error in the Keepalive (fix: #6416) fix(Suspense): switch suspense cause error in the Keepalive (fix: #6416) Oct 3, 2022
hoi-lau added a commit to hoi-lau/core that referenced this pull request Oct 25, 2022
@hoi-lau
fix(runtime-core): switch suspense cause error in the Keepalive (fix: v…
02c7020 
…uejs#6416) vuejs#6467
@hoi-lau hoi-lau mentioned this pull request Oct 25, 2022
Closed
yyx990803 added a commit that referenced this pull request Dec 12, 2023
@yyx990803
fix(Suspense): handle switching away from kept-alive component before…
aa0c13f 
… resolve

close #6416
using test from #6467
@yyx990803
Copy link
Member

Thanks for the PR - although this isn't the correct fix, I reused your test case in aa0c13f

@yyx990803 yyx990803 closed this Dec 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@edison1105 edison1105 edison1105 left review comments

@YuuinIH YuuinIH YuuinIH approved these changes

Assignees
No one assigned
Labels
None yet
Projects
Issue / PR Management
Status: Rejected
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

KeepAlive-Suspense -- This is likely a Vue internals bug
5 participants
@moushicheng @edison1105 @mefcorvi @yyx990803 @YuuinIH