chore: add test for #4361

Author: johnsoncodehk

packages/language-core/lib/codegen/template/elementProps.ts

@@ -23,25 +23,29 @@ export function* generateElementProps(
 	const isIntrinsicElement = node.tagType === CompilerDOM.ElementTypes.ELEMENT || node.tagType === CompilerDOM.ElementTypes.TEMPLATE;
 	const canCamelize = node.tagType === CompilerDOM.ElementTypes.COMPONENT;
 
-	if (isIntrinsicElement) {
-		for (const prop of props) {
+
+	for (const prop of props) {
+		if (
+			prop.type === CompilerDOM.NodeTypes.DIRECTIVE
+			&& prop.name === 'on'
+		) {
 			if (
-				prop.type === CompilerDOM.NodeTypes.DIRECTIVE
-				&& prop.name === 'on'
-				&& prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
+				prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
 				&& !prop.arg.loc.source.startsWith('[')
 				&& !prop.arg.loc.source.endsWith(']')
 			) {
-				yield `...{ `;
-				yield* generateEventArg(ctx, prop.arg, true);
-				yield `: `;
-				yield* generateEventExpression(options, ctx, prop);
-				yield `}, `;
+				if (isIntrinsicElement) {
+					yield `...{ `;
+					yield* generateEventArg(ctx, prop.arg, true);
+					yield `: `;
+					yield* generateEventExpression(options, ctx, prop);
+					yield `}, `;
+				}
+				else {
+					yield `...{ '${camelize('on-' + prop.arg.loc.source)}': {} as any }, `;
+				}
 			}
-			else if (
-				prop.type === CompilerDOM.NodeTypes.DIRECTIVE
-				&& prop.name === 'on'
-			) {
+			else {
 				if (
 					prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
 					&& prop.arg.loc.source.startsWith('[')
@@ -55,19 +59,6 @@ export function* generateElementProps(
 			}
 		}
 	}
-	else {
-		for (const prop of props) {
-			if (
-				prop.type === CompilerDOM.NodeTypes.DIRECTIVE
-				&& prop.name === 'on'
-				&& prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
-				&& !prop.arg.loc.source.startsWith('[')
-				&& !prop.arg.loc.source.endsWith(']')
-			) {
-				yield `...{ '${camelize('on-' + prop.arg.loc.source)}': {} as any }, `;
-			}
-		}
-	}
 
 	for (const prop of props) {
 		if (

test-workspace/tsc/vue3/#4361/main.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{ toggleEnter: boolean }>();
+
+const eventName = computed(() => (props.toggleEnter ? 'enter' : null));
+
+function handleEvent() {
+    // noop
+}
+</script>
+
+<template>
+    <Transition @[eventName]="handleEvent" />
+</template>