feat(ssr): support custom directive getSSRProps in optimized compilation

close #5304

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

@@ -10,8 +10,10 @@ import {
   vShow,
   vModelText,
   vModelRadio,
-  vModelCheckbox
+  vModelCheckbox,
+  resolveDirective
 } from 'vue'
+import { ssrGetDirectiveProps, ssrRenderAttrs } from '../src'
 
 describe('ssr: directives', () => {
   describe('template v-show', () => {
@@ -374,7 +376,7 @@ describe('ssr: directives', () => {
     })
   })
 
-  test('custom directive w/ getSSRProps', async () => {
+  test('custom directive w/ getSSRProps (vdom)', async () => {
     expect(
       await renderToString(
         createApp({
@@ -394,4 +396,35 @@ describe('ssr: directives', () => {
       )
     ).toBe(`<div id="foo"></div>`)
   })
+
+  test('custom directive w/ getSSRProps (optimized)', async () => {
+    expect(
+      await renderToString(
+        createApp({
+          data() {
+            return {
+              x: 'foo'
+            }
+          },
+          directives: {
+            xxx: {
+              getSSRProps({ value, arg, modifiers }) {
+                return { id: [value, arg, modifiers.ok].join('-') }
+              }
+            }
+          },
+          ssrRender(_ctx, _push, _parent, _attrs) {
+            const _directive_xxx = resolveDirective('xxx')!
+            _push(
+              `<div${ssrRenderAttrs(
+                ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.x, 'arg', {
+                  ok: true
+                })
+              )}></div>`
+            )
+          }
+        })
+      )
+    ).toBe(`<div id="foo-arg-true"></div>`)
+  })
 })

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

@@ -0,0 +1,26 @@
+import { ComponentPublicInstance, Directive } from '@vue/runtime-core'
+
+export function ssrGetDirectiveProps(
+  instance: ComponentPublicInstance,
+  dir: Directive,
+  value?: any,
+  arg?: string,
+  modifiers: Record<string, boolean> = {}
+): Record<string, any> {
+  if (typeof dir !== 'function' && dir.getSSRProps) {
+    return (
+      dir.getSSRProps(
+        {
+          dir,
+          instance,
+          value,
+          oldValue: undefined,
+          arg,
+          modifiers
+        },
+        null as any
+      ) || {}
+    )
+  }
+  return {}
+}

packages/server-renderer/src/index.ts

@@ -30,6 +30,7 @@ export {
 export { ssrInterpolate } from './helpers/ssrInterpolate'
 export { ssrRenderList } from './helpers/ssrRenderList'
 export { ssrRenderSuspense } from './helpers/ssrRenderSuspense'
+export { ssrGetDirectiveProps } from './helpers/ssrGetDirectiveProps'
 export { includeBooleanAttr as ssrIncludeBooleanAttr } from '@vue/shared'
 
 // v-model helpers