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

fix #5664

Author: yyx990803

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(`

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,

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) {