fix(compiler-vapor): once modifier work with component event (#12606)

Author: edison1105

packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap

@@ -212,6 +212,28 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`compiler: element transform > component dynamic event with once modifier 1`] = `
+"import { resolveComponent as _resolveComponent, toHandlerKey as _toHandlerKey, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+
+export function render(_ctx) {
+  const _component_Foo = _resolveComponent("Foo")
+  const n0 = _createComponentWithFallback(_component_Foo, { $: [
+    () => ({ [_toHandlerKey(_ctx.foo) + "Once"]: () => _ctx.bar })
+  ] }, null, true)
+  return n0
+}"
+`;
+
+exports[`compiler: element transform > component event with once modifier 1`] = `
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
+
+export function render(_ctx) {
+  const _component_Foo = _resolveComponent("Foo")
+  const n0 = _createComponentWithFallback(_component_Foo, { onFooOnce: () => _ctx.bar }, null, true)
+  return n0
+}"
+`;
+
 exports[`compiler: element transform > component with dynamic event arguments 1`] = `
 "import { resolveComponent as _resolveComponent, toHandlerKey as _toHandlerKey, createComponentWithFallback as _createComponentWithFallback } from 'vue';
 

packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts

@@ -940,6 +940,16 @@ describe('compiler: element transform', () => {
     ])
   })
 
+  test('component event with once modifier', () => {
+    const { code } = compileWithElementTransform(`<Foo @foo.once="bar" />`)
+    expect(code).toMatchSnapshot()
+  })
+
+  test('component dynamic event with once modifier', () => {
+    const { code } = compileWithElementTransform(`<Foo @[foo].once="bar" />`)
+    expect(code).toMatchSnapshot()
+  })
+
   test('invalid html nesting', () => {
     const { code, ir } = compileWithElementTransform(
       `<p><div>123</div></p>

packages/compiler-vapor/src/generators/prop.ts

@@ -22,6 +22,7 @@ import {
 } from './utils'
 import {
   canSetValueDirectly,
+  capitalize,
   isSVGTag,
   shouldSetAsAttr,
   toHandlerKey,
@@ -108,15 +109,20 @@ function genLiteralObjectProps(
 }
 
 export function genPropKey(
-  { key: node, modifier, runtimeCamelize, handler }: IRProp,
+  { key: node, modifier, runtimeCamelize, handler, handlerModifiers }: IRProp,
   context: CodegenContext,
 ): CodeFragment[] {
   const { helper } = context
 
+  const handlerModifierPostfix = handlerModifiers
+    ? handlerModifiers.map(capitalize).join('')
+    : ''
   // static arg was transformed by v-bind transformer
   if (node.isStatic) {
     // only quote keys if necessary
-    const keyName = handler ? toHandlerKey(node.content) : node.content
+    const keyName =
+      (handler ? toHandlerKey(node.content) : node.content) +
+      handlerModifierPostfix
     return [
       [
         isSimpleIdentifier(keyName) ? keyName : JSON.stringify(keyName),
@@ -133,7 +139,15 @@ export function genPropKey(
   if (handler) {
     key = genCall(helper('toHandlerKey'), key)
   }
-  return ['[', modifier && `${JSON.stringify(modifier)} + `, ...key, ']']
+  return [
+    '[',
+    modifier && `${JSON.stringify(modifier)} + `,
+    ...key,
+    handlerModifierPostfix
+      ? ` + ${JSON.stringify(handlerModifierPostfix)}`
+      : undefined,
+    ']',
+  ]
 }
 
 export function genPropValue(

packages/compiler-vapor/src/transform.ts

@@ -47,6 +47,7 @@ export interface DirectiveTransformResult {
   modifier?: '.' | '^'
   runtimeCamelize?: boolean
   handler?: boolean
+  handlerModifiers?: string[]
   model?: boolean
   modelModifiers?: string[]
 }

packages/compiler-vapor/src/transforms/vOn.ts

@@ -67,6 +67,7 @@ export const transformVOn: DirectiveTransform = (dir, node, context) => {
       key: arg,
       value: handler,
       handler: true,
+      handlerModifiers: eventOptionModifiers,
     }
   }
 

packages/runtime-vapor/src/componentEmits.ts

@@ -46,7 +46,7 @@ function propGetter(rawProps: Record<string, any>, key: string) {
     let i = dynamicSources.length
     while (i--) {
       const source = resolveSource(dynamicSources[i])
-      if (hasOwn(source, key)) return source[key]
+      if (hasOwn(source, key)) return resolveSource(source[key])
     }
   }
   return rawProps[key] && resolveSource(rawProps[key])