fix(ssr): directive binding.instance should respect exposed during ssr

close #7499 close #7502
vuejs · Jun 10, 2024 · df686ab · df686ab
1 parent 9daf90e
commit df686ab
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 3 deletions.
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
@@ -363,7 +363,11 @@ export { transformVNodeArgs } from './vnode'
 // **IMPORTANT** These APIs are exposed solely for @vue/server-renderer and may
 // change without notice between versions. User code should never rely on them.
 
-import { createComponentInstance, setupComponent } from './component'
+import {
+ createComponentInstance,
+ getComponentPublicInstance,
+ setupComponent,
+} from './component'
 import { renderComponentRoot } from './componentRenderUtils'
 import { setCurrentRenderingInstance } from './componentRenderContext'
 import { isVNode, normalizeVNode } from './vnode'
@@ -375,6 +379,7 @@ const _ssrUtils = {
  setCurrentRenderingInstance,
  isVNode,
  normalizeVNode,
+ getComponentPublicInstance,
 }
 
 /**

diff --git a/packages/server-renderer/__tests__/ssrDirectives.spec.ts b/packages/server-renderer/__tests__/ssrDirectives.spec.ts
@@ -2,7 +2,10 @@ import { renderToString } from '../src/renderToString'
 import {
  createApp,
  h,
+ mergeProps,
+ ref,
  resolveDirective,
+ unref,
  vModelCheckbox,
  vModelDynamic,
  vModelRadio,
@@ -542,4 +545,44 @@ describe('ssr: directives', () => {
  ),
  ).toBe(`<div id="foo-arg-true"></div>`)
  })
+
+ // #7499
+ test('custom directive w/ getSSRProps (expose)', async () => {
+ let exposeVars: null | string | undefined = null
+ const useTestDirective = () => ({
+ vTest: {
+ getSSRProps({ instance }: any) {
+ if (instance) {
+ exposeVars = instance.x
+ }
+ return { id: exposeVars }
+ },
+ },
+ })
+ const { vTest } = useTestDirective()
+
+ const renderString = await renderToString(
+ createApp({
+ setup(props, { expose }) {
+ const x = ref('foo')
+ expose({ x })
+ const __returned__ = { useTestDirective, vTest, ref, x }
+ Object.defineProperty(__returned__, '__isScriptSetup', {
+ enumerable: false,
+ value: true,
+ })
+ return __returned__
+ },
+ ssrRender(_ctx, _push, _parent, _attrs) {
+ _push(
+ `<div${ssrRenderAttrs(
+ mergeProps(_attrs!, ssrGetDirectiveProps(_ctx, unref(vTest))),
+ )}></div>`,
+ )
+ },
+ }),
+ )
+ expect(renderString).toBe(`<div id="foo"></div>`)
+ expect(exposeVars).toBe('foo')
+ })
 })
diff --git a/packages/server-renderer/src/helpers/ssrGetDirectiveProps.ts b/packages/server-renderer/src/helpers/ssrGetDirectiveProps.ts
@@ -1,4 +1,8 @@
-import type { ComponentPublicInstance, Directive } from '@vue/runtime-core'
+import {
+ type ComponentPublicInstance,
+ type Directive,
+ ssrUtils,
+} from '@vue/runtime-core'
 
 export function ssrGetDirectiveProps(
  instance: ComponentPublicInstance,
@@ -12,7 +16,7 @@ export function ssrGetDirectiveProps(
  dir.getSSRProps(
  {
  dir,
- instance,
+ instance: ssrUtils.getComponentPublicInstance(instance.$),
  value,
  oldValue: undefined,
  arg,