From 5bfe438ef391522bddbe43cd2669061c6a88b03a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?=
 <32354856+baiwusanyu-c@users.noreply.github.com>
Date: Wed, 9 Nov 2022 10:58:22 +0800
Subject: [PATCH] fix(compiler-core/v-on): only apply case preservation on
 native elements (#6902)

fix #6900
---
 .../__tests__/transforms/vSlot.spec.ts        | 53 ++++++++++++++++++-
 packages/compiler-core/src/transforms/vOn.ts  |  4 +-
 2 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/packages/compiler-core/__tests__/transforms/vSlot.spec.ts b/packages/compiler-core/__tests__/transforms/vSlot.spec.ts
index 93dafe9a25b..c166f8d160a 100644
--- a/packages/compiler-core/__tests__/transforms/vSlot.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vSlot.spec.ts
@@ -11,7 +11,8 @@ import {
   VNodeCall,
   SlotsExpression,
   ObjectExpression,
-  SimpleExpressionNode
+  SimpleExpressionNode,
+  RenderSlotCall
 } from '../../src'
 import { transformElement } from '../../src/transforms/transformElement'
 import { transformOn } from '../../src/transforms/vOn'
@@ -788,6 +789,56 @@ describe('compiler: transform component slots', () => {
       const { slots } = parseWithSlots(`<Comp><Comp><slot/></Comp></Comp>`)
       expect(slots).toMatchObject(toMatch)
     })
+
+    // # fix: #6900
+    test('consistent behavior of @xxx:modelValue and @xxx:model-value', () => {
+      const { root: rootUpper } = parseWithSlots(
+        `<div><slot @foo:modelValue="handler" /></div>`
+      )
+      const slotNodeUpper = (rootUpper.codegenNode! as VNodeCall)
+        .children as ElementNode[]
+      const propertiesObjUpper = (
+        slotNodeUpper[0].codegenNode! as RenderSlotCall
+      ).arguments[2]
+      expect(propertiesObjUpper).toMatchObject({
+        properties: [
+          {
+            key: {
+              type: NodeTypes.SIMPLE_EXPRESSION,
+              content: 'onFoo:modelValue'
+            },
+            value: {
+              type: NodeTypes.SIMPLE_EXPRESSION,
+              content: `handler`,
+              isStatic: false
+            }
+          }
+        ]
+      })
+
+      const { root } = parseWithSlots(
+        `<div><slot @foo:model-Value="handler" /></div>`
+      )
+      const slotNode = (root.codegenNode! as VNodeCall)
+        .children as ElementNode[]
+      const propertiesObj = (slotNode[0].codegenNode! as RenderSlotCall)
+        .arguments[2]
+      expect(propertiesObj).toMatchObject({
+        properties: [
+          {
+            key: {
+              type: NodeTypes.SIMPLE_EXPRESSION,
+              content: 'onFoo:modelValue'
+            },
+            value: {
+              type: NodeTypes.SIMPLE_EXPRESSION,
+              content: `handler`,
+              isStatic: false
+            }
+          }
+        ]
+      })
+    })
   })
 
   describe('errors', () => {
diff --git a/packages/compiler-core/src/transforms/vOn.ts b/packages/compiler-core/src/transforms/vOn.ts
index b4d2e851ca9..9fe8b6ab61c 100644
--- a/packages/compiler-core/src/transforms/vOn.ts
+++ b/packages/compiler-core/src/transforms/vOn.ts
@@ -48,10 +48,10 @@ export const transformOn: DirectiveTransform = (
         rawName = `vnode-${rawName.slice(4)}`
       }
       const eventString =
-        node.tagType === ElementTypes.COMPONENT ||
+        node.tagType !== ElementTypes.ELEMENT ||
         rawName.startsWith('vnode') ||
         !/[A-Z]/.test(rawName)
-          ? // for component and vnode lifecycle event listeners, auto convert
+          ? // for non-element and vnode lifecycle event listeners, auto convert
             // it to camelCase. See issue #2249
             toHandlerKey(camelize(rawName))
           : // preserve case for plain element listeners that have uppercase