From 86c35099aa74b1d3fcb31e564a7ad1a0ab71be24 Mon Sep 17 00:00:00 2001 From: "qing.deng" Date: Sun, 25 Sep 2022 19:15:30 +0800 Subject: [PATCH 1/3] fix: dynamic v-on and static v-on should be merged --- .../compiler-core/src/transforms/transformElement.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts index 0eb3bb57628..444c3ea2511 100644 --- a/packages/compiler-core/src/transforms/transformElement.ts +++ b/packages/compiler-core/src/transforms/transformElement.ts @@ -668,7 +668,17 @@ export function buildProps( // has built-in directive transform. const { props, needRuntime } = directiveTransform(prop, node, context) !ssr && props.forEach(analyzePatchFlag) - properties.push(...props) + if (arg && !isStaticExp(arg)) { + if (properties.length) { + mergeArgs.push( + createObjectExpression(dedupeProperties(properties), elementLoc) + ) + properties = [] + } + mergeArgs.push(createObjectExpression(props, elementLoc)) + } else { + properties.push(...props) + } if (needRuntime) { runtimeDirectives.push(prop) if (isSymbol(needRuntime)) { From 63eaaf3987a5671e5e1aa1c967de955538a9643c Mon Sep 17 00:00:00 2001 From: "qing.deng" Date: Sun, 25 Sep 2022 19:27:35 +0800 Subject: [PATCH 2/3] test: add case --- .../__snapshots__/compileTemplate.spec.ts.snap | 12 ++++++++++++ .../compiler-sfc/__tests__/compileTemplate.spec.ts | 9 +++++++++ 2 files changed, 21 insertions(+) diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap index 4dfc212e02a..9d04c5159a9 100644 --- a/packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap +++ b/packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap @@ -1,5 +1,17 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`dynamic v-on + static v-on should merged 1`] = ` +"import { toHandlerKey as _toHandlerKey, mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" + +export function render(_ctx, _cache) { + return (_openBlock(), _createElementBlock(\\"input\\", _mergeProps({ + onBlur: _cache[0] || (_cache[0] = (...args) => (_ctx.onBlur && _ctx.onBlur(...args))) + }, { + [_toHandlerKey(_ctx.validateEvent)]: _cache[1] || (_cache[1] = (...args) => (_ctx.onValidateEvent && _ctx.onValidateEvent(...args))) + }), null, 16 /* FULL_PROPS */)) +}" +`; + exports[`should not hoist srcset URLs in SSR mode 1`] = ` "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from \\"vue\\" import { ssrRenderAttr as _ssrRenderAttr, ssrRenderComponent as _ssrRenderComponent } from \\"vue/server-renderer\\" diff --git a/packages/compiler-sfc/__tests__/compileTemplate.spec.ts b/packages/compiler-sfc/__tests__/compileTemplate.spec.ts index 2beda880b5b..f58b6338de9 100644 --- a/packages/compiler-sfc/__tests__/compileTemplate.spec.ts +++ b/packages/compiler-sfc/__tests__/compileTemplate.spec.ts @@ -174,3 +174,12 @@ test('should not hoist srcset URLs in SSR mode', () => { }) expect(code).toMatchSnapshot() }) + +// #6742 +test('dynamic v-on + static v-on should merged', () => { + const source = `` + + const result = compile({ filename: 'example.vue', source }) + + expect(result.code).toMatchSnapshot() +}) From de96a1d052ea9b5b7e95adb5793f527250c5e95b Mon Sep 17 00:00:00 2001 From: "qing.deng" Date: Sun, 25 Sep 2022 19:34:13 +0800 Subject: [PATCH 3/3] fix: should only run in vOn --- packages/compiler-core/src/transforms/transformElement.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts index 444c3ea2511..f52c6bf07e0 100644 --- a/packages/compiler-core/src/transforms/transformElement.ts +++ b/packages/compiler-core/src/transforms/transformElement.ts @@ -668,7 +668,7 @@ export function buildProps( // has built-in directive transform. const { props, needRuntime } = directiveTransform(prop, node, context) !ssr && props.forEach(analyzePatchFlag) - if (arg && !isStaticExp(arg)) { + if (isVOn && arg && !isStaticExp(arg)) { if (properties.length) { mergeArgs.push( createObjectExpression(dedupeProperties(properties), elementLoc)