Update Suspense usage

[yyx990803]

Main changes:

• <Suspense> now expects a single root node (cannot be fragment) for the default/fallback slots.

• An already-resolved suspense only enters "pending state" when the default slot's root node changes.

• By default, the current active tree will stay on the screen until the pending tree is resolved. The pending tree, when resolved, replaces the previous active tree and becomes the new active tree.

• A timeout prop can be specified - if a pending tree remains pending past the timeout threshold, the active tree will be unmounted and be replaced by the fallback tree.

• New nested async child rendered inside an already resolved suspense no longer puts the suspense into pending state (TODO: components with async setup() should be allowed to declare its own loading state / timeout etc. just like defineAsyncComponent)

• @recede event has been replaced by @pending and now fires right when a new pending tree is being processed (instead of after the fallback tree is mounted)

• <Suspense> can now be used with <transition> and <keep-alive>:

  <transition mode="out-in">
    <keep-alive>
      <suspense>
        <component :is="view"/>
        <template #fallback>
           loading...
        </template>
      </suspense>
    </keep-alive>
  </transition>

[CyberAP]

now expects a single root node (cannot be fragment) for the default/fallback slots.

Can it be used with components wrapped with renderless components?

<!-- Renderless.vue -->
<template>
  <slot />
</template>

<Suspense>
  <Renderless>
    <div />
  </Renderless>
</Suspense>

[CyberAP]

A timeout prop can be specified - if a pending tree remains pending past the timeout threshold, the active tree will be unmounted and be replaced by the fallback tree.

Would it be possible to add a new Composition hook for the cleanup?

import { onTimeout } from 'vue'

export default {
  setup() {
    const { promise, cancel } = asyncRequest()    

    onTimeout(() => { cancel() })

    return promise // will throw on timeout, but that's already handled by Suspense
  }
}

[yyx990803]

@CyberAP renderless component will work without transition.