vue-component-meta: Include JSDoc / description for emits/events

[larsrickert]

Hey, is it possible to add the missing feature to vue-component-meta that also extracts the JSDoc / description of emits/events?
For props, exposes and slots this is already possible, however it does not work for emits/events.

Why?

I am currently working on this Storybook PR that switches to vue language tools (Volar) / vue-component-meta for generating the documentation for props, emits/events, slots and exposed. It works like a charm except the missing feature for emits/events descriptions which would be very nice to have!

Versions

node: 20.10.0
typescript: 5.3.3
vue-component-meta: 1.8.27
vue: 3.4.19

Reproduction

Vue component:

// TestComponent.vue
<script setup lang="ts">
const emit = defineEmits<{
  /** Emitted when foo... */
  foo: [value: string];
}>();
</script>

<template>Example component</template>

vue-component-meta Code:

import path from "node:path";
import { fileURLToPath } from "node:url";
import type { MetaCheckerOptions } from "vue-component-meta";
import { createComponentMetaCheckerByJsonConfig } from "vue-component-meta";

const __dirname = fileURLToPath(new URL(".", import.meta.url));

const checkerOptions: MetaCheckerOptions = {
  forceUseTs: true,
  noDeclarations: true,
  printer: { newLine: 1 },
};

const checker = createComponentMetaCheckerByJsonConfig(__dirname, {}, checkerOptions);

const componentPath = path.join(__dirname, "./TestComponent.vue");
const meta = checker.getComponentMeta(componentPath);
console.log(JSON.stringify(meta, null, 2));

Output

The logged output can be seen below. I only included the "events" property to keep it minimal.
I would expect the event to also have a description property with the value "Emitted when foo..."

{
  "events": [
    {
      "name": "foo",
      "type": "[value: string]",
      "signature": "(event: \"foo\", value: string): void",
      "declarations": [],
      "schema": ["string"]
    }
  ]
}

[zernonia]

I would love this enhancement too! Currently we are extracting the emits comment manually on radix-vue

[johnsoncodehk]

Support by a27caa1 and vuejs/core#10801 (It should release in Vue 3.5).

Please note that shorthand is impossible to support JSDoc, it must be:

defineEmits<{
  /** Emitted when foo... */
  (evt: "foo", value: string): void
}>();

[melishev]

Although this issue is closed, I don't see a solution to this problem in the current version of vue@3.5.10 and vue-component-meta@2.1.6.

@johnsoncodehk can you tell me what the status of this feature is now?

thanks

[Dtsiantaris]

I am also using vue@3.5.13. I define my emits like this:

defineEmits<{
  /**
   * Emitted when the `modelValue` property changes.
   */
  (evt: "update:modelValue", value: any): void;
  /**
   * Emitted when `filtering` or `virtual-scrolling` change the available
   * filtered options.
   */
  (e: "update:filtered", value: string[]): void;
}>();

The description of events is an empty string.

[mumumilk]

Facing the same issue with "vue": ^3.5.13 and "vue-component-meta": "^2.1.10", description of events are empty even though they do have a description in a valid format.

reproduction: https://stackblitz.com/edit/vitejs-vite-spv32skr?file=checker.js

[redhat]

Facing the same issue with "vue": ^3.5.13

[Fedezable]

Hello, the issue is closed but I'm facing the same problem using "vue-component-meta": "2.2.0". Should we re-open, or create a new issue?

[Luvdduk]

It works only with including generic in my case.

work

<script setup lang="ts" generic="T=any">
const emit = defineEmits<{
    /** Promise Resolve */
    (ev:'resolve',arg?:T):void
    /** Promise Reject */
    (ev:'reject',arg?:any):void
}>();
</script>

not work

<script setup lang="ts">
const emit = defineEmits<{
    /** Promise Resolve */
    (ev:'resolve',arg?:any):void
    /** Promise Reject */
    (ev:'reject',arg?:any):void
}>();
</script>

https://stackblitz.com/edit/vitejs-vite-9ukwlmpw?file=src%2Fcomponents%2FHelloWorld.vue