perf(runtime-vapor): tree-shake unused suspense paths

Author: edison1105

packages/runtime-vapor/src/component.ts

@@ -122,7 +122,11 @@ import type {
 } from './apiDefineComponent'
 import { DynamicFragment, isFragment } from './fragment'
 import type { VaporElement } from './apiDefineCustomElement'
-import { parentSuspense, setParentSuspense } from './components/Suspense'
+import {
+  isSuspenseEnabled,
+  parentSuspense,
+  setParentSuspense,
+} from './suspense'
 import { isInteropEnabled } from './vdomInteropState'
 import { setComponentScopeId, setScopeId } from './scopeId'
 import { isTransitionEnabled } from './transition'
@@ -276,7 +280,12 @@ export function createComponent(
 
   try {
     let prevSuspense: SuspenseBoundary | null = null
-    if (__FEATURE_SUSPENSE__ && currentInstance && currentInstance.suspense) {
+    if (
+      __FEATURE_SUSPENSE__ &&
+      isSuspenseEnabled &&
+      currentInstance &&
+      currentInstance.suspense
+    ) {
       prevSuspense = setParentSuspense(currentInstance.suspense)
     }
 
@@ -409,7 +418,12 @@ export function createComponent(
       endMeasure(instance, 'init')
     }
 
-    if (__FEATURE_SUSPENSE__ && currentInstance && currentInstance.suspense) {
+    if (
+      __FEATURE_SUSPENSE__ &&
+      isSuspenseEnabled &&
+      currentInstance &&
+      currentInstance.suspense
+    ) {
       setParentSuspense(prevSuspense)
     }
 
@@ -426,6 +440,8 @@ export function createComponent(
     }
 
     if (
+      __FEATURE_SUSPENSE__ &&
+      isSuspenseEnabled &&
       isHydrating &&
       hydrationClose &&
       instance.suspense &&
@@ -741,8 +757,12 @@ export class VaporComponentInstance<
     this.emitted = this.exposed = this.exposeProxy = this.propsDefaults = null
 
     // suspense related
-    this.suspense = parentSuspense
-    this.suspenseId = parentSuspense ? parentSuspense.pendingId : 0
+    this.suspense = null
+    this.suspenseId = 0
+    if (__FEATURE_SUSPENSE__ && isSuspenseEnabled) {
+      this.suspense = parentSuspense
+      this.suspenseId = parentSuspense ? parentSuspense.pendingId : 0
+    }
     this.asyncDep = null
     this.asyncResolved = false
 
@@ -957,6 +977,7 @@ export function mountComponent(
 ): void {
   if (
     __FEATURE_SUSPENSE__ &&
+    isSuspenseEnabled &&
     instance.suspense &&
     instance.asyncDep &&
     !instance.asyncResolved

packages/runtime-vapor/src/components/Suspense.ts

@@ -1,20 +1,12 @@
-import type { SuspenseBoundary } from '@vue/runtime-dom'
-
-export let parentSuspense: SuspenseBoundary | null = null
-
-export function setParentSuspense(
-  suspense: SuspenseBoundary | null,
-): SuspenseBoundary | null {
-  try {
-    return parentSuspense
-  } finally {
-    parentSuspense = suspense
-  }
-}
+import { withSuspenseEnabled } from '../suspense'
 
 // TODO: implement this
-export const VaporSuspenseImpl = {
+export const VaporSuspenseImpl: {
+  name: string
+  __isSuspense: true
+  process(): void
+} = /*@__PURE__*/ withSuspenseEnabled({
   name: 'VaporSuspense',
   __isSuspense: true,
   process(): void {},
-}
+})

packages/runtime-vapor/src/suspense.ts

@@ -0,0 +1,23 @@
+import type { SuspenseBoundary } from '@vue/runtime-dom'
+
+export let isSuspenseEnabled = false
+export let parentSuspense: SuspenseBoundary | null = null
+
+export function enableSuspense(): void {
+  isSuspenseEnabled = true
+}
+
+export function withSuspenseEnabled<T>(value: T): T {
+  enableSuspense()
+  return value
+}
+
+export function setParentSuspense(
+  suspense: SuspenseBoundary | null,
+): SuspenseBoundary | null {
+  try {
+    return parentSuspense
+  } finally {
+    parentSuspense = suspense
+  }
+}

packages/runtime-vapor/src/vdomInterop.ts

@@ -125,8 +125,10 @@ import {
 } from './components/KeepAlive'
 import {
   parentSuspense as currentParentSuspense,
+  enableSuspense,
+  isSuspenseEnabled,
   setParentSuspense,
-} from './components/Suspense'
+} from './suspense'
 
 export const interopKey: unique symbol = Symbol(`interop`)
 
@@ -169,7 +171,7 @@ const vaporInteropImpl: Omit<
     const slotsRef = shallowRef(vnode.children)
 
     let prevSuspense: SuspenseBoundary | null = null
-    if (__FEATURE_SUSPENSE__ && parentSuspense) {
+    if (__FEATURE_SUSPENSE__ && isSuspenseEnabled && parentSuspense) {
       prevSuspense = setParentSuspense(parentSuspense)
     }
 
@@ -209,7 +211,7 @@ const vaporInteropImpl: Omit<
       )
     }
 
-    if (__FEATURE_SUSPENSE__ && parentSuspense) {
+    if (__FEATURE_SUSPENSE__ && isSuspenseEnabled && parentSuspense) {
       setParentSuspense(prevSuspense)
     }
 
@@ -1426,6 +1428,9 @@ function shouldUseCurrentParent(block: Block): boolean {
 }
 
 export const vaporInteropPlugin: Plugin = app => {
+  if (__FEATURE_SUSPENSE__) {
+    enableSuspense()
+  }
   setInteropEnabled()
   const internals = ensureRenderer().internals
   app._context.vapor = extend(vaporInteropImpl, {
@@ -1587,7 +1592,7 @@ function renderVaporSlot(
   const prev = currentInstance
   let prevSuspense: SuspenseBoundary | null = null
   simpleSetCurrentInstance(parentComponent)
-  if (__FEATURE_SUSPENSE__ && parentSuspense) {
+  if (__FEATURE_SUSPENSE__ && isSuspenseEnabled && parentSuspense) {
     prevSuspense = setParentSuspense(parentSuspense)
   }
   try {
@@ -1761,7 +1766,7 @@ function renderVaporSlot(
       throw e
     }
   } finally {
-    if (__FEATURE_SUSPENSE__ && parentSuspense) {
+    if (__FEATURE_SUSPENSE__ && isSuspenseEnabled && parentSuspense) {
       setParentSuspense(prevSuspense)
     }
     simpleSetCurrentInstance(prev)