feat(compiler-ssr): compile portal (#775)

packages/compiler-ssr/src/errors.ts

@@ -18,10 +18,12 @@ export function createSSRCompilerError(
 
 export const enum SSRErrorCodes {
   X_SSR_CUSTOM_DIRECTIVE_NO_TRANSFORM = DOMErrorCodes.__EXTEND_POINT__,
-  X_SSR_UNSAFE_ATTR_NAME
+  X_SSR_UNSAFE_ATTR_NAME,
+  X_SSR_NO_PORTAL_TARGET
 }
 
 export const SSRErrorMessages: { [code: number]: string } = {
   [SSRErrorCodes.X_SSR_CUSTOM_DIRECTIVE_NO_TRANSFORM]: `Custom directive is missing corresponding SSR transform and will be ignored.`,
-  [SSRErrorCodes.X_SSR_UNSAFE_ATTR_NAME]: `Unsafe attribute name for SSR.`
+  [SSRErrorCodes.X_SSR_UNSAFE_ATTR_NAME]: `Unsafe attribute name for SSR.`,
+  [SSRErrorCodes.X_SSR_NO_PORTAL_TARGET]: `No target prop on portal element.`
 }

packages/compiler-ssr/src/runtimeHelpers.ts

@@ -13,6 +13,7 @@ export const SSR_LOOSE_EQUAL = Symbol(`ssrLooseEqual`)
 export const SSR_LOOSE_CONTAIN = Symbol(`ssrLooseContain`)
 export const SSR_RENDER_DYNAMIC_MODEL = Symbol(`ssrRenderDynamicModel`)
 export const SSR_GET_DYNAMIC_MODEL_PROPS = Symbol(`ssrGetDynamicModelProps`)
+export const SSR_RENDER_PORTAL = Symbol(`ssrRenderPortal`)
 
 export const ssrHelpers = {
   [SSR_INTERPOLATE]: `ssrInterpolate`,
@@ -27,7 +28,8 @@ export const ssrHelpers = {
   [SSR_LOOSE_EQUAL]: `ssrLooseEqual`,
   [SSR_LOOSE_CONTAIN]: `ssrLooseContain`,
   [SSR_RENDER_DYNAMIC_MODEL]: `ssrRenderDynamicModel`,
-  [SSR_GET_DYNAMIC_MODEL_PROPS]: `ssrGetDynamicModelProps`
+  [SSR_GET_DYNAMIC_MODEL_PROPS]: `ssrGetDynamicModelProps`,
+  [SSR_RENDER_PORTAL]: `ssrRenderPortal`
 }
 
 // Note: these are helpers imported from @vue/server-renderer

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

@@ -31,9 +31,11 @@ import {
   createTransformContext,
   traverseNode,
   ExpressionNode,
-  TemplateNode
+  TemplateNode,
+  findProp,
+  JSChildNode
 } from '@vue/compiler-dom'
-import { SSR_RENDER_COMPONENT } from '../runtimeHelpers'
+import { SSR_RENDER_COMPONENT, SSR_RENDER_PORTAL } from '../runtimeHelpers'
 import {
   SSRTransformContext,
   processChildren,
@@ -134,7 +136,34 @@ export function ssrProcessComponent(
     const component = componentTypeMap.get(node)!
 
     if (component === PORTAL) {
-      // TODO
+      const targetProp = findProp(node, 'target')
+      if (!targetProp) 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 {
+        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`
+        ])
+      )
+
       return
     }