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

packages/compiler-ssr/__tests__/ssrComponent.spec.ts

@@ -309,5 +309,18 @@ describe('ssr: components', () => {
  }"
  `)
  })
+
+ test('portal rendering', () => {
+ expect(compile(`<portal :target="target"><div/></portal>`).code)
+ .toMatchInlineSnapshot(`
+ "const { ssrRenderPortal: _ssrRenderPortal } = require(\\"@vue/server-renderer\\")
+
+ return function ssrRender(_ctx, _push, _parent) {
+ _ssrRenderPortal((_push) => {
+ _push(\`<div></div>\`)
+ }, _ctx.target, _parent)
+ }"
+ `)
+ })
  })
 })

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
  }
 

packages/server-renderer/__tests__/ssrRenderPortal.spec.ts

@@ -0,0 +1,29 @@
+import { createApp } from 'vue'
+import { renderToString, SSRContext } from '../src/renderToString'
+import { ssrRenderPortal } from '../src/helpers/ssrRenderPortal'
+
+describe('ssrRenderPortal', () => {
+ test('portal rendering', async () => {
+ const ctx = {
+ portals: {}
+ } as SSRContext
+ await renderToString(
+ createApp({
+ data() {
+ return { msg: 'hello' }
+ },
+ ssrRender(_ctx, _push, _parent) {
+ ssrRenderPortal(
+ _push => {
+ _push(`<div>content</div>`)
+ },
+ '#target',
+ _parent
+ )
+ }
+ }),
+ ctx
+ )
+ expect(ctx.portals!['#target']).toBe(`<div>content</div>`)
+ })
+})

packages/server-renderer/src/helpers/ssrRenderPortal.ts

@@ -0,0 +1,20 @@
+import { ComponentInternalInstance, ssrContextKey } from 'vue'
+import { SSRContext, createBuffer, PushFn } from '../renderToString'
+
+export function ssrRenderPortal(
+ contentRenderFn: (push: PushFn) => void,
+ target: string,
+ parentComponent: ComponentInternalInstance
+) {
+ const { getBuffer, push } = createBuffer()
+
+ contentRenderFn(push)
+
+ const context = parentComponent.appContext.provides[
+ ssrContextKey as any
+ ] as SSRContext
+ const portalBuffers =
+ context.__portalBuffers || (context.__portalBuffers = {})
+
+ portalBuffers[target] = getBuffer()
+}

packages/server-renderer/src/index.ts

@@ -13,6 +13,7 @@ export {
 } from './helpers/ssrRenderAttrs'
 export { ssrInterpolate } from './helpers/ssrInterpolate'
 export { ssrRenderList } from './helpers/ssrRenderList'
+export { ssrRenderPortal } from './helpers/ssrRenderPortal'
 
 // v-model helpers
 export {

packages/server-renderer/src/renderToString.ts

@@ -45,9 +45,12 @@ const {
 // - A resolved buffer (recursive arrays of strings that can be unrolled
 // synchronously)
 // - An async buffer (a Promise that resolves to a resolved buffer)
-type SSRBuffer = SSRBufferItem[]
-type SSRBufferItem = string | ResolvedSSRBuffer | Promise<ResolvedSSRBuffer>
-type ResolvedSSRBuffer = (string | ResolvedSSRBuffer)[]
+export type SSRBuffer = SSRBufferItem[]
+export type SSRBufferItem =
+ | string
+ | ResolvedSSRBuffer
+ | Promise<ResolvedSSRBuffer>
+export type ResolvedSSRBuffer = (string | ResolvedSSRBuffer)[]
 
 export type PushFn = (item: SSRBufferItem) => void
 
@@ -62,7 +65,7 @@ export type SSRContext = {
  >
 }
 
-function createBuffer() {
+export function createBuffer() {
  let appendable = false
  let hasAsync = false
  const buffer: SSRBuffer = []