From 659331c0d499a253ecc6895075a00893fc6d07c1 Mon Sep 17 00:00:00 2001
From: Johnson Chu <johnsoncodehk@gmail.com>
Date: Tue, 2 May 2023 03:19:46 +0800
Subject: [PATCH] fix: event "@update:" syntax causes TS error

close #3100
---
 .../src/generators/template.ts                |  6 ++---
 .../vue-test-workspace/vue-tsc/#3100/comp.vue | 26 +++++++++++++++++++
 .../vue-test-workspace/vue-tsc/#3100/main.vue | 26 +++++++++++++++++++
 3 files changed, 55 insertions(+), 3 deletions(-)
 create mode 100644 packages/vue-test-workspace/vue-tsc/#3100/comp.vue
 create mode 100644 packages/vue-test-workspace/vue-tsc/#3100/main.vue

diff --git a/packages/vue-language-core/src/generators/template.ts b/packages/vue-language-core/src/generators/template.ts
index 76cfe585f..54c82f7eb 100644
--- a/packages/vue-language-core/src/generators/template.ts
+++ b/packages/vue-language-core/src/generators/template.ts
@@ -989,7 +989,7 @@ export function generate(
 				&& prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
 			) {
 				codes.push(
-					camelize('on-' + prop.arg.loc.source),
+					...createObjectPropertyCode(camelize('on-' + prop.arg.loc.source)),
 					': {} as any, ',
 				);
 			}
@@ -1679,12 +1679,12 @@ export function generate(
 		];
 	}
 
-	function createObjectPropertyCode(a: Code, astHolder: any): Code[] {
+	function createObjectPropertyCode(a: Code, astHolder?: any): Code[] {
 		const aStr = typeof a === 'string' ? a : a[0];
 		if (validTsVar.test(aStr)) {
 			return [a];
 		}
-		else if (aStr.startsWith('[') && aStr.endsWith(']')) {
+		else if (aStr.startsWith('[') && aStr.endsWith(']') && astHolder) {
 			const range = typeof a === 'object' ? a[2] : undefined;
 			const data = typeof a === 'object' ? a[3] : undefined;
 			return createInterpolationCode(
diff --git a/packages/vue-test-workspace/vue-tsc/#3100/comp.vue b/packages/vue-test-workspace/vue-tsc/#3100/comp.vue
new file mode 100644
index 000000000..7cf37ba23
--- /dev/null
+++ b/packages/vue-test-workspace/vue-tsc/#3100/comp.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="modal" :class="{ 'modal-large': large }" v-show="show">
+    <div>
+      <slot />
+    </div>
+    <div>
+      <button type="button" @click="$emit('close')">close</button>
+      <button type="button" @click="$emit('update:show', false)">update:show</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineEmits(['close', 'update:show'])
+
+defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  large: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
diff --git a/packages/vue-test-workspace/vue-tsc/#3100/main.vue b/packages/vue-test-workspace/vue-tsc/#3100/main.vue
new file mode 100644
index 000000000..065d07488
--- /dev/null
+++ b/packages/vue-test-workspace/vue-tsc/#3100/main.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import ModalDialog from './comp.vue'
+
+const isModalOpen1 = ref(false)
+const isModalOpen2 = ref(false)
+</script>
+
+<template>
+  <div>
+    <div>
+      <button @click="isModalOpen1 = true">Show Dialog 1 (<code>close</code> event)</button>
+      <ModalDialog :show="isModalOpen1" :large="true" @close="isModalOpen1 = false">
+        This dialog uses the <code>close</code> event to close
+      </ModalDialog>
+    </div>
+
+    <div>
+      <button @click="isModalOpen2 = true">Show Dialog 2 (<code>update:show</code> event)</button>
+      <!-- errors are on 'show' and 'large' props here -->
+      <ModalDialog :show="isModalOpen2" :large="true" @update:show="isModalOpen2 = $event">
+        This dialog uses the <code>update:show</code> event to close
+      </ModalDialog>
+    </div>
+  </div>
+</template>