feat(better-define): support short-emits syntax (#582)

Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>

.changeset/popular-rivers-itch.md

@@ -0,0 +1,5 @@
+---
+'@vue-macros/api': patch
+---
+
+support short-emits syntax

packages/api/src/vue/emits.ts

@@ -26,6 +26,8 @@ import type {
   TSFunctionType,
   TSInterfaceDeclaration,
   TSIntersectionType,
+  TSMappedType,
+  TSPropertySignature,
   TSType,
   TSTypeLiteral,
   UnaryExpression,
@@ -179,6 +181,13 @@ export async function handleTSEmitsDefinition({
       }
     }
 
+    for (const evt of Object.keys(properties.properties)) {
+      if (!definitions[evt]) definitions[evt] = []
+      definitions[evt].push(
+        buildDefinition(properties.properties[evt].signature),
+      )
+    }
+
     return {
       definitions,
       definitionsAst: buildDefinition({ scope, type: definitionsAst }),
@@ -212,7 +221,12 @@ export interface TSEmits extends EmitsBase {
 
   definitions: Record<
     string,
-    ASTDefinition<TSCallSignatureDeclaration | TSFunctionType>[]
+    ASTDefinition<
+      | TSCallSignatureDeclaration
+      | TSFunctionType
+      | TSPropertySignature
+      | TSMappedType
+    >[]
   >
   definitionsAst: ASTDefinition<
     TSTypeLiteral | TSIntersectionType | TSInterfaceDeclaration | TSFunctionType

packages/better-define/tests/__snapshots__/fixtures.test.ts.snap

@@ -796,6 +796,52 @@ export { resolveFailed as default };
 "
 `;
 
+exports[`fixtures > tests/fixtures/short-emits.vue > isProduction = false 1`] = `
+"import { openBlock, createElementBlock, defineComponent } from 'vue';
+import _export_sfc from '[NULL]/plugin-vue/export-helper';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "short-emits",
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        onClick: _cache[0] || (_cache[0] = ($event) => emit("click"))
+      }, "click");
+    };
+  }
+});
+
+var shortEmits = /* @__PURE__ */ _export_sfc(_sfc_main, [__FILE__]);
+
+export { shortEmits as default };
+"
+`;
+
+exports[`fixtures > tests/fixtures/short-emits.vue > isProduction = true 1`] = `
+"import { openBlock, createElementBlock, defineComponent } from 'vue';
+import _export_sfc from '[NULL]/plugin-vue/export-helper';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "short-emits",
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        onClick: _cache[0] || (_cache[0] = ($event) => emit("click"))
+      }, "click");
+    };
+  }
+});
+
+var shortEmits = /* @__PURE__ */ _export_sfc(_sfc_main, [__FILE__]);
+
+export { shortEmits as default };
+"
+`;
+
 exports[`fixtures > tests/fixtures/special-key.vue > isProduction = false 1`] = `
 "import { defineComponent } from 'vue';
 import _export_sfc from '[NULL]/plugin-vue/export-helper';

packages/better-define/tests/fixtures/short-emits.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+type ShortEmits = {
+  click: []
+}
+const emit = defineEmits<ShortEmits>()
+</script>
+
+<template>
+  <button @click="emit('click')">click</button>
+</template>

playground/vue3/src/examples/better-define/index.vue

@@ -2,10 +2,12 @@
 import Child from './child.vue'
 import ReactivityTransform from './reactivity-transform.vue'
 import QuasarDemo from './quasar-demo.vue'
+import ShortEmits from './short-emits.vue'
 </script>
 
 <template>
   <Child name="" msg="" :age="10" union="" />
   <ReactivityTransform />
   <QuasarDemo model-value="" />
+  <ShortEmits />
 </template>

playground/vue3/src/examples/better-define/short-emits.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+type ShortEmits = {
+  click: []
+}
+
+const emit = defineEmits<ShortEmits>()
+</script>
+
+<template>
+  <button @click="emit('click')">click</button>
+</template>