feat(ssr): compiler-ssr support for Suspense

packages/compiler-ssr/src/transforms/ssrTransformComponent.ts

@@ -30,17 +30,20 @@ import {
   traverseNode,
   ExpressionNode,
   TemplateNode,
-  findProp,
-  JSChildNode
+  SUSPENSE
 } from '@vue/compiler-dom'
-import { SSR_RENDER_COMPONENT, SSR_RENDER_PORTAL } from '../runtimeHelpers'
+import { SSR_RENDER_COMPONENT } from '../runtimeHelpers'
 import {
   SSRTransformContext,
   processChildren,
   processChildrenAsStatement
 } from '../ssrCodegenTransform'
+import { ssrProcessPortal } from './ssrTransformPortal'
+import {
+  ssrProcessSuspense,
+  ssrTransformSuspense
+} from './ssrTransformSuspense'
 import { isSymbol, isObject, isArray } from '@vue/shared'
-import { createSSRCompilerError, SSRErrorCodes } from '../errors'
 
 // We need to construct the slot functions in the 1st pass to ensure proper
 // scope tracking, but the children of each slot cannot be processed until
@@ -56,6 +59,12 @@ interface WIPSlotEntry {
 
 const componentTypeMap = new WeakMap<ComponentNode, symbol>()
 
+// ssr component transform is done in two phases:
+// In phase 1. we use `buildSlot` to analyze the children of the component into
+// WIP slot functions (it must be done in phase 1 because `buildSlot` relies on
+// the core transform context).
+// In phase 2. we convert the WIP slots from phase 1 into ssr-specific codegen
+// nodes.
 export const ssrTransformComponent: NodeTransform = (node, context) => {
   if (
     node.type !== NodeTypes.ELEMENT ||
@@ -67,6 +76,9 @@ export const ssrTransformComponent: NodeTransform = (node, context) => {
   const component = resolveComponentType(node, context, true /* ssr */)
   if (isSymbol(component)) {
     componentTypeMap.set(node, component)
+    if (component === SUSPENSE) {
+      return ssrTransformSuspense(node, context)
+    }
     return // built-in component: fallthrough
   }
 
@@ -132,12 +144,15 @@ export function ssrProcessComponent(
 ) {
   if (!node.ssrCodegenNode) {
     // this is a built-in component that fell-through.
-    // just render its children.
     const component = componentTypeMap.get(node)!
     if (component === PORTAL) {
       return ssrProcessPortal(node, context)
+    } else if (component === SUSPENSE) {
+      return ssrProcessSuspense(node, context)
+    } else {
+      // real fall-through (e.g. KeepAlive): just render its children.
+      processChildren(node.children, context)
     }
-    processChildren(node.children, context)
   } else {
     // finish up slot function expressions from the 1st pass.
     const wipEntries = wipMap.get(node) || []
@@ -161,47 +176,6 @@ export function ssrProcessComponent(
   }
 }
 
-function ssrProcessPortal(node: ComponentNode, context: SSRTransformContext) {
-  const targetProp = findProp(node, 'target')
-  if (!targetProp) {
-    context.onError(
-      createSSRCompilerError(SSRErrorCodes.X_SSR_NO_PORTAL_TARGET, node.loc)
-    )
-    return
-  }
-
-  let target: JSChildNode
-  if (targetProp.type === NodeTypes.ATTRIBUTE && targetProp.value) {
-    target = createSimpleExpression(targetProp.value.content, true)
-  } else if (targetProp.type === NodeTypes.DIRECTIVE && targetProp.exp) {
-    target = targetProp.exp
-  } else {
-    context.onError(
-      createSSRCompilerError(
-        SSRErrorCodes.X_SSR_NO_PORTAL_TARGET,
-        targetProp.loc
-      )
-    )
-    return
-  }
-
-  const contentRenderFn = createFunctionExpression(
-    [`_push`],
-    undefined, // Body is added later
-    true, // newline
-    false, // isSlot
-    node.loc
-  )
-  contentRenderFn.body = processChildrenAsStatement(node.children, context)
-  context.pushStatement(
-    createCallExpression(context.helper(SSR_RENDER_PORTAL), [
-      contentRenderFn,
-      target,
-      `_parent`
-    ])
-  )
-}
-
 export const rawOptionsMap = new WeakMap<RootNode, CompilerOptions>()
 
 const [baseNodeTransforms, baseDirectiveTransforms] = getBaseTransformPreset(