wip(srr): slot outlet

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

@@ -1,3 +1,49 @@
-import { NodeTransform } from '@vue/compiler-dom'
+import {
+  NodeTransform,
+  isSlotOutlet,
+  processSlotOutlet,
+  createCallExpression,
+  SlotOutletNode,
+  createFunctionExpression,
+  createBlockStatement
+} from '@vue/compiler-dom'
+import { SSR_RENDER_SLOT } from '../runtimeHelpers'
+import {
+  SSRTransformContext,
+  createChildContext,
+  processChildren
+} from '../ssrCodegenTransform'
 
-export const ssrTransformSlotOutlet: NodeTransform = () => {}
+export const ssrTransformSlotOutlet: NodeTransform = (node, context) => {
+  if (isSlotOutlet(node)) {
+    const { slotName, slotProps } = processSlotOutlet(node, context)
+    node.ssrCodegenNode = createCallExpression(
+      context.helper(SSR_RENDER_SLOT),
+      [
+        `_ctx.$slots`,
+        slotName,
+        slotProps || `{}`,
+        `null`, // fallback content placeholder.
+        `_push`,
+        `_parent`
+      ]
+    )
+  }
+}
+
+export function ssrProcessSlotOutlet(
+  node: SlotOutletNode,
+  context: SSRTransformContext
+) {
+  const renderCall = node.ssrCodegenNode!
+  // has fallback content
+  if (node.children.length) {
+    const childContext = createChildContext(context)
+    processChildren(node.children, childContext)
+    const fallbackRenderFn = createFunctionExpression([])
+    fallbackRenderFn.body = createBlockStatement(childContext.body)
+    // _renderSlot(slots, name, props, fallback, ...)
+    renderCall.arguments[3] = fallbackRenderFn
+  }
+  context.pushStatement(node.ssrCodegenNode!)
+}

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

@@ -1,7 +1,7 @@
 import {
   createStructuralDirectiveTransform,
   ForNode,
-  processForNode,
+  processFor,
   createCallExpression,
   createFunctionExpression,
   createForLoopParams,
@@ -18,12 +18,12 @@ import { SSR_RENDER_LIST } from '../runtimeHelpers'
 // Plugin for the first transform pass, which simply constructs the AST node
 export const ssrTransformFor = createStructuralDirectiveTransform(
   'for',
-  processForNode
+  processFor
 )
 
 // This is called during the 2nd transform pass to construct the SSR-sepcific
 // codegen nodes.
-export function processFor(node: ForNode, context: SSRTransformContext) {
+export function ssrProcessFor(node: ForNode, context: SSRTransformContext) {
   const childContext = createChildContext(context)
   const needFragmentWrapper =
     node.children.length !== 1 || node.children[0].type !== NodeTypes.ELEMENT

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

@@ -1,6 +1,6 @@
 import {
   createStructuralDirectiveTransform,
-  processIfBranches,
+  processIf,
   IfNode,
   createIfStatement,
   createBlockStatement,
@@ -18,12 +18,12 @@ import {
 // Plugin for the first transform pass, which simply constructs the AST node
 export const ssrTransformIf = createStructuralDirectiveTransform(
   /^(if|else|else-if)$/,
-  processIfBranches
+  processIf
 )
 
 // This is called during the 2nd transform pass to construct the SSR-sepcific
 // codegen nodes.
-export function processIf(node: IfNode, context: SSRTransformContext) {
+export function ssrProcessIf(node: IfNode, context: SSRTransformContext) {
   const [rootBranch] = node.branches
   const ifStatement = createIfStatement(
     rootBranch.condition!,