From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Wed, 7 Aug 2024 03:29:41 +0000 (+0100)
Subject: fix(runtime-core): fix warning for missing event handler (#11489)
X-Git-Tag: v3.4.37~18
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=e359ff0046286aee03fe31656c023677be457e07;p=thirdparty%2Fvuejs%2Fcore.git

fix(runtime-core): fix warning for missing event handler (#11489)

fix #4803
close #8268
---

diff --git a/packages/runtime-core/__tests__/componentEmits.spec.ts b/packages/runtime-core/__tests__/componentEmits.spec.ts
index e2e9044a1b..dc82c04919 100644
--- a/packages/runtime-core/__tests__/componentEmits.spec.ts
+++ b/packages/runtime-core/__tests__/componentEmits.spec.ts
@@ -155,12 +155,12 @@ describe('component: emit', () => {
       render() {},
       created() {
         // @ts-expect-error
-        this.$emit('bar')
+        this.$emit('bar-baz')
       },
     })
     render(h(Foo), nodeOps.createElement('div'))
     expect(
-      `Component emitted event "bar" but it is neither declared`,
+      `Component emitted event "bar-baz" but it is neither declared in the emits option nor as an "onBarBaz" prop`,
     ).toHaveBeenWarned()
   })
 
@@ -172,12 +172,12 @@ describe('component: emit', () => {
       render() {},
       created() {
         // @ts-expect-error
-        this.$emit('bar')
+        this.$emit('bar-baz')
       },
     })
     render(h(Foo), nodeOps.createElement('div'))
     expect(
-      `Component emitted event "bar" but it is neither declared`,
+      `Component emitted event "bar-baz" but it is neither declared in the emits option nor as an "onBarBaz" prop`,
     ).toHaveBeenWarned()
   })
 
@@ -197,6 +197,22 @@ describe('component: emit', () => {
     ).not.toHaveBeenWarned()
   })
 
+  test('should not warn if has equivalent onXXX prop with kebab-cased event', () => {
+    const Foo = defineComponent({
+      props: ['onFooBar'],
+      emits: [],
+      render() {},
+      created() {
+        // @ts-expect-error
+        this.$emit('foo-bar')
+      },
+    })
+    render(h(Foo), nodeOps.createElement('div'))
+    expect(
+      `Component emitted event "foo-bar" but it is neither declared`,
+    ).not.toHaveBeenWarned()
+  })
+
   test('validator warning', () => {
     const Foo = defineComponent({
       emits: {
diff --git a/packages/runtime-core/src/componentEmits.ts b/packages/runtime-core/src/componentEmits.ts
index b6589b9222..7380b4f655 100644
--- a/packages/runtime-core/src/componentEmits.ts
+++ b/packages/runtime-core/src/componentEmits.ts
@@ -102,10 +102,10 @@ export function emit(
             event.startsWith(compatModelEventPrefix))
         )
       ) {
-        if (!propsOptions || !(toHandlerKey(event) in propsOptions)) {
+        if (!propsOptions || !(toHandlerKey(camelize(event)) in propsOptions)) {
           warn(
             `Component emitted event "${event}" but it is neither declared in ` +
-              `the emits option nor as an "${toHandlerKey(event)}" prop.`,
+              `the emits option nor as an "${toHandlerKey(camelize(event))}" prop.`,
           )
         }
       } else {