fix(component-meta): filter events out of props (#5547)

Author: Akryum

packages/component-meta/lib/base.ts

@@ -240,7 +240,7 @@ interface ComponentMeta<T> {
 		let _slots: ReturnType<typeof getSlots> | undefined;
 		let _exposed: ReturnType<typeof getExposed> | undefined;
 
-		return {
+		const meta = {
 			get type() {
 				return _type ?? (_type = getType());
 			},
@@ -258,6 +258,8 @@ interface ComponentMeta<T> {
 			},
 		};
 
+		return meta;
+
 		function getType() {
 			const $type = symbolProperties.find(prop => prop.escapedName === 'type');
 
@@ -278,6 +280,10 @@ interface ComponentMeta<T> {
 				const type = typeChecker.getTypeOfSymbolAtLocation($props, symbolNode);
 				const properties = type.getProperties();
 
+				const eventProps = new Set(
+					meta.events.map(event => `on${event.name.charAt(0).toUpperCase()}${event.name.slice(1)}`),
+				);
+
 				result = properties
 					.map(prop => {
 						const {
@@ -286,7 +292,7 @@ interface ComponentMeta<T> {
 
 						return resolveNestedProperties(prop);
 					})
-					.filter(prop => !vnodeEventRegex.test(prop.name));
+					.filter(prop => !vnodeEventRegex.test(prop.name) && !eventProps.has(prop.name));
 			}
 
 			// fill global

packages/component-meta/tests/index.spec.ts

@@ -1168,6 +1168,21 @@ const worker = (checker: ComponentMetaChecker, withTsconfig: boolean) =>
 		`);
 		});
 
+		test('component with both props and events', () => {
+			const componentPath = path.resolve(__dirname, '../../../test-workspace/component-meta/#5546/main.vue');
+			const meta = checker.getComponentMeta(componentPath);
+
+			expect(meta.type).toEqual(TypeMeta.Class);
+
+			// Nothing special about this prop
+			expect(meta.props.find(prop => prop.name === 'title')).toBeDefined();
+			// Event
+			expect(meta.props.find(prop => prop.name === 'onClose')).toBeUndefined();
+			expect(meta.events.find(event => event.name === 'close')).toBeDefined();
+			// Prop that starts with `on`
+			expect(meta.props.find(prop => prop.name === 'onCompleted')).toBeDefined();
+		});
+
 		test('non-component', () => {
 			const componentPath = path.resolve(
 				__dirname,

test-workspace/component-meta/#5546/main.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+defineProps<{
+	title: string;
+	onCompleted: () => void;
+}>()
+
+defineEmits<{
+	close: []
+}>()
+</script>
+
+<template>
+	<div></div>
+</template>