fix(Suspense): correctly update the transition anchor point

[baiwusanyu-c]

close: #9996

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	89.4 kB (+8 B)	34 kB (+5 B)	30.7 kB (+2 B)
vue.global.prod.js	146 kB (+8 B)	53.3 kB (+4 B)	47.6 kB (-21 B)

Usages

Name	Size	Gzip	Brotli
createApp	49.7 kB	19.5 kB	17.8 kB
createSSRApp	53.1 kB	20.8 kB	19 kB
defineCustomElement	52 kB	20.2 kB	18.5 kB
overall	63.2 kB (+8 B)	24.4 kB (+5 B)	22.2 kB (-18 B)

[baiwusanyu-c]

It works as expected in the playground, but the result is incorrect in e2e. I may need some guidance.

[edison1105]

It works as expected in the playground, but the result is incorrect in e2e. I may need some guidance.

Did you forget to run nr build vue -f global -d before running the e2e test?

[baiwusanyu-c]

case 1:

<template>
  <transition name="page" mode="out-in" :duration="300">
      <Suspense>
        <component :is="Component" />
      </Suspense>
    </transition>
  <button @click="toggle" id='cc'>Trigger error</button>
</template>

https://deploy-preview-9999--vue-sfc-playground.netlify.app/#eNqtVE2P0zAQ/SsjX9KV2rSiQkIhLbRoD3AAtNtjLsaZpt5N7Mh2sq2q/nfGzpJELSAhkVPmzcybNx/JmW3qOm4bZAlLrTCydmDRNfU6U7KqtXFwhhz3UuEnTbZC5aZwmILCo9tJ8TwFe+BlqV8ecA8X2BtdQUR80ftMCa2sgz5vA6trqsk5UwAGVY4mgckdrNZwmES5bKMpRJvobpqpy90t1fZfqbYD1Q0ZcQ09TAa5PpjbkxKwb5RwUitwuihKJPJQrA+NW142SDw3yGqEbeDDuINk5KFKAPyFS9cPduLL/+cal0yl827LtF8yHFZ1yR0GCyB1hisrQ6uKV7jKWM0LzBhUOveWbtxMKrKTvDHcxxG4XCwyRgwQnvSxsTUq6zk7hDDRzzqRllJ6VUQ1H1LnV7npfBAUoPRH4xyJ+yhKGhERdQshFpmvIiGi9c7IokADaIw26byLp1yiGveaWncq/WvsG5yREjQzTktuke6kA0vkLb6C3cIHNQnQwcAifvPWdnMd8/iP4IrF6Y5B11xId0pgEbYbCPfaVAlYwemyFvE7v/duUa8S2ZQ5Sze7l0X8ZLWiTzVwZcyPVZZovtVek81Y0lXxvnDQXwLmTOO76nBxQPH8G/zJHj2Wse8GLZqWhtr7HDcF0q68+/7xK13oyEmn0fgV/MX5gFaXjdfYhW0blZPsUVxQ+zn8cKQqdvb+6OgOfjXlhfrIS4jPGP1f/AX9qfVB7jJehjyaKLv8BGAvqYY=

I modified the implementation logic
For case 1, that is, the target component is not the last node of the same layer, we store the anchor point when switching to ComponentB for the first time, and then use it when switching to ComponentA for the second time.

via #9999 (comment)

[baiwusanyu-c]

case2:

<template>
  <button @click="toggle" id='cc'>Trigger error</button>
  <transition name="page" mode="out-in" :duration="300">
      <Suspense>
        <component :is="Component" />
      </Suspense>
    </transition>
</template>

https://deploy-preview-9999--vue-sfc-playground.netlify.app/#eNqtVE2P2jAQ/SsjXwISBFRUqUqBFqo9tIe22uWYi+sMwbuJHdlOFoT47x3HNImgrVSpOWW+3ryZN8mZbaoqbmpkCVtaYWTlwKKrq3WqZFlp4+AMGe6lwk+abIXKTeAwAYVHt5PiZQL2wItCvz7iHi6wN7qEiPCi96kSWlkHXd0GVrdQo3OqAAyqDE0CozGs1nAYRZlsoglEm2g8SdVlfA+1/VeobQ91B0ZY/Qyjnq5P5vakBOxrJZzUCpzO8wIJvG3WpcYNL2oknDvPauDbwIfhBMkgQp0A+CuXrlvsyLf/zz0uqVrOgsqkLxkOy6rgDskCWP6onaMhP4qC+q9SFqZNGchsFQkRrXdG5jkaQGO0Wc5Cfqh1hisr2yUpXiJVVzz3taXOvKVrN5WK7CSrDfd55FzM5ylr6/2zfKpthcoGNlef6FRKpKWSbh6CmvWls5va5awnFEadDWYl07pT4V9jT3NKeGimnERukO4kOAvkDV6dQfAeMwE6GJjHb97asNchjv8IblCcDgi64kK6UwLzVt0WcK9NmYAVnC5rHr/zugehrhTZhDlLN7uXefxstaJPtcVKmV+OLNB8qzwnm7IkdPGx9qC/tD5naj9V8IsDipff+J/t0ftS9t2gRdOQdl3McZMjbdyHH56+0oUOgiRw7a/kL8FHtLqoPceQtq1VRrQHeS3bz+0PR6p8Zx+OjtT8NZQn6jMvbX7K6P/i7+BPo/d0F/GiraONsstPckCphg==

For case 2, the target component is the last node of the same layer. We mark this situation for special processing, and then use next(activeBranch!) to obtain the anchor point when switching to ComponentA for the second time ( Actually its value is null)
via #9999 (comment)

[baiwusanyu-c]

Other cases should be regressed and conform to the use case of #9996
https://deploy-preview-9999--vue-sfc-playground.netlify.app/#eNqNU8tu2zAQ/JWFLnIA23LhnlTZbV3k0B6aIvFRF0Zey0woUiCXsgPD/94lZVtJUQQ5COI+Zjj74DH53rbTzmOSJ4WrrGwJHJJvl6WWTWsswRHcTihl9ve4HcMOTrC1poGUQemXUpe6MtoR3GmEBYxuYLGE3SjdyC4dM7ZSwrkcUkJHKZzGkBqN6c0Ftd6bj6FobwLqgusk7hk4KBvx/VfWSsnq+cp7LDVEwLQTygeVr43FIkr/GqXk4VzqU6mLrO8G94ENwqZVgpAtgPAVrBTkZlEmfCMJqdGWSYyGyHJt2iILh+ghK7STJI0GLRpkUCtqLBNozCZYxtNEarbzjbci5LFzPpudGZnhwbsWtevvj57K8HQ0aoJcOk4PJTFDdkFkbyBFNmgYVK4MkWkGoSHvKvrRc1D3NZKpa4UrChq/xeaGwsOfJfaJRdb/GcyXDe1i09GLCsdpqHrCktFOREWyw/HFqVB0eHb28xr05sAzhtn0s+Nt48m8JQq7+A8NmZ7CtKKS9JLDjIEAW6kYkMOj8nb0yWJz0/PxpM8Ck3FCjue5lfX0yRnNbyIShSE3rVRo79qgyJVJ3l8RYnEDf0UfWR9q6v3VDqvn//if3CH4yuSPRYe240W4xkjYGqkP3z78xgOfr0HeFq84+53gPTqjfNDYp6283rDsV3lR7c/4sqWu1+72QLwll6KC0JB5ivm8VR5/vFP6IHc+nUccdzQ5/QXRrG9w

[baiwusanyu-c]

Did you forget to run nr build vue -f global -d before running the e2e test?

The test results of e2e on my window machine, mac, and vue ci may be inconsistent every time I run it.

[edison1105]

I think we only need to obtain an anchor once and cache it. No matter how the branch is switched internally, the anchor will not change.

Like this:

if (activeBranch) {
  // if the fallback tree was mounted, it may have been moved
  // as part of a parent suspense. get the latest anchor for insertion
-  anchor = next(activeBranch)
+  anchor = suspense.__anchor !== undefined 
+		? suspense.__anchor 
+       : (suspense.__anchor = next(activeBranch))
  unmount(activeBranch, parentComponent, suspense, true)
}

          activeBranch!.transition!.afterLeave = () => {
            if (pendingId === suspense.pendingId) {
              move(
                pendingBranch!,
                container,
-				next(activeBranch!),
+                anchor,
                MoveType.ENTER,
              )
              queuePostFlushCb(effects)
            }
          }

[baiwusanyu-c]

Good idea, already modified

[edison1105]

I took a closer look, and caching the anchor may not work. If the anchor is uninstalled, there may still be problems with rendering.

😂😂😂

[baiwusanyu-c]

So for special processing like I did before, what about just doing the cache anchor in case1 and case2?

[edison1105]

I took a deep look at #8105 and found the cause for the error is that the anchor is inside the hiddenContainer, so the anchor is not valid. We just need to get the latest anchor during afterLeave.

try

// 1
move(
  pendingBranch!,
  container,
  anchor === suspense.anchor
    ? next(activeBranch!)
    : anchor,
  MoveType.ENTER,
)

// 2
if (activeBranch) {
  // if the fallback tree was mounted, it may have been moved
  // as part of a parent suspense. get the latest anchor for insertion
  // #8105 if `delayEnter` is true, it means that the mounting of `activeBranch` will be delayed. 
  // if the branch switches before transition completes, both `activeBranch` and `pendingBranch` may coexist 
  // in the `hiddenContainer`. This could result in `next(activeBranch!)` obtaining 
  // an incorrect anchor (got `pendingBranch.el`). 
  // Therefore, after the mounting of activeBranch is completed, 
  // it is necessary to get the latest anchor.
  if(parentNode(activeBranch.el!) !== suspense.hiddenContainer){
    anchor = next(activeBranch)
  }
  unmount(activeBranch, parentComponent, suspense, true)
}