fix(compiler-ssr): fix component event handlers inheritance in ssr

fix #5664

diff --git a/packages/compiler-ssr/__tests__/ssrComponent.spec.ts b/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
index 49eb9ff994172267eaecb8d8e5a4912bd8e830af..d830e716a219c1275b5be515b59b6ea2d837ad36 100644 (file)
--- a/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
@@ -17,6 +17,20 @@ describe('ssr: components', () => {
     `)
   })
 
+  // event listeners should still be passed
+  test('event listeners', () => {
+    expect(compile(`<foo @click="bar" />`).code).toMatchInlineSnapshot(`
+      "const { resolveComponent: _resolveComponent, mergeProps: _mergeProps } = require(\\"vue\\")
+      const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        const _component_foo = _resolveComponent(\\"foo\\")
+
+        _push(_ssrRenderComponent(_component_foo, _mergeProps({ onClick: _ctx.bar }, _attrs), null, _parent))
+      }"
+    `)
+  })
+
   test('dynamic component', () => {
     expect(compile(`<component is="foo" prop="b" />`).code)
       .toMatchInlineSnapshot(`

diff --git a/packages/compiler-ssr/src/index.ts b/packages/compiler-ssr/src/index.ts
index 37333471b963b294d2523fdeafd461a8b041a3a3..1775af52bfc56dc4ed26de24f5af724aade804fe 100644 (file)
--- a/packages/compiler-ssr/src/index.ts
+++ b/packages/compiler-ssr/src/index.ts
@@ -10,7 +10,8 @@ import {
   trackSlotScopes,
   noopDirectiveTransform,
   transformBind,
-  transformStyle
+  transformStyle,
+  transformOn
 } from '@vue/compiler-dom'
 import { ssrCodegenTransform } from './ssrCodegenTransform'
 import { ssrTransformElement } from './transforms/ssrTransformElement'
@@ -70,11 +71,12 @@ export function compile(
     directiveTransforms: {
       // reusing core v-bind
       bind: transformBind,
+      on: transformOn,
       // model and show has dedicated SSR handling
       model: ssrTransformModel,
       show: ssrTransformShow,
       // the following are ignored during SSR
-      on: noopDirectiveTransform,
+      // on: noopDirectiveTransform,
       cloak: noopDirectiveTransform,
       once: noopDirectiveTransform,
       memo: noopDirectiveTransform,

diff --git a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
index 32991ed8def00b16991e9a7e3db6d2c8d756aa07..be530ebb5bc6f925d44687397cc4ead9f1575c40 100644 (file)
--- a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
@@ -194,7 +194,7 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
           if (!needMergeProps) {
             node.children = [createInterpolation(prop.exp, prop.loc)]
           }
-        } else if (!needMergeProps) {
+        } else if (!needMergeProps && prop.name !== 'on') {
           // Directive transforms.
           const directiveTransform = context.directiveTransforms[prop.name]
           if (directiveTransform) {