storybook icon indicating copy to clipboard operation
storybook copied to clipboard

[Bug]: Vue 3.4 - props and events are not inferred from `defineModel`

Open Vercadium opened this issue 1 year ago • 3 comments

Describe the bug

Since defineModel became stable in Vue 3.4, this is now the recommended approach for using v-model.

Ideally Storybook would understand that defineModel is constructing the props/events for these (example below) and display them in the argTypes automatically. It would be preferred if both the type and JSDoc comment could be understood also.

After 3.4:

<script setup>
const model = defineModel();
</script>

<template>
  <input v-model="model" />
</template>

Before 3.4:

<script setup>
const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);
</script>

<template>
  <input
    :value="props.modelValue"
    @input="emit('update:modelValue', $event.target.value)"
  />
</template>

Vercadium avatar Jan 17 '24 12:01 Vercadium

@chakAs3 @kasperpeulen will this be fixed moving the argtype inference to volar? https://github.com/storybookjs/storybook/pull/22285

shilman avatar Jan 17 '24 13:01 shilman

@shilman I adopted Volar quickly starting from April 2023 because it's the only assurance of staying current with Vue API changes. I've emphasized this point consistently, and if you review the pull request, you'll find comprehensive documentation outlining the desired format for the documentation and supported features

chakAs3 avatar Jan 30 '24 07:01 chakAs3

@shilman Yes and no :D I quickly tested it out, with Volar the property will be added but the JSDoc / description and the corresponding event is missing. However, this feature is currently missing in Volar itself.

I added a feature request for Volar about this: https://github.com/vuejs/language-tools/issues/3894

larsrickert avatar Feb 17 '24 13:02 larsrickert