Skip to content

Commit

Permalink
fix(compiler-ssr): fix component event handlers inheritance in ssr
Browse files Browse the repository at this point in the history
fix #5664
  • Loading branch information
yyx990803 committed May 17, 2022
1 parent 4caa521 commit f811dc2
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 3 deletions.
14 changes: 14 additions & 0 deletions packages/compiler-ssr/__tests__/ssrComponent.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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(`
Expand Down
6 changes: 4 additions & 2 deletions packages/compiler-ssr/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ import {
trackSlotScopes,
noopDirectiveTransform,
transformBind,
transformStyle
transformStyle,
transformOn
} from '@vue/compiler-dom'
import { ssrCodegenTransform } from './ssrCodegenTransform'
import { ssrTransformElement } from './transforms/ssrTransformElement'
Expand Down Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down

0 comments on commit f811dc2

Please sign in to comment.