Code snippets not working correctly when prop and slot have same name (7.1.0-alpha-42)(Vue 3)

[rstainsby]

The Issue

This pull request, whilst solving some issues, seems to have included a bug that causes code snippets to generate incorrect code if a prop has the same key as a slot.

Example

For example, I have the following story:

export const IconOnly: Story = {
  ...Default,
  args: {
    icon: 'pi pi-check'
  }
}

which outputs this code snippet:

<template>
  <Button icon="()=>({})" />
</template>

where, in previous versions, it output:

<template>
  <Button icon="pi pi-check"/>
</template>

Project Setup

I am using Storybook (7.1.0-alpha-42) with Vue 3 (3.3.4) and PrimeVue component library (3.29.2).

This is happening with the use of the Button component which has an 'icon' prop and an 'icon' slot. If I were to take a guess I'd think that the slot and prop having the same name is causing the problem.

Here's the API for the component https://primevue.org/button/.

Happy to send across full file's if it makes things easier.

Originally posted by @rstainsby in #22518 (comment)

[valentinpalkovic]

cc @chakAs3

[chakAs3]

@rstainsby yes i'm aware of this issue, this limitation comes from the initial CSF API Design that may work for some renderer like React because React uses children to pass the slots, but may create a conflict. for vue as vue separate props and slots.
means. in vue you can have same name for slots and props without any issue but storybook args = { ... props , ...slots } which show clearly the limitation we have here.

I'm working on RFC that proposes :

args = { ...props, options:{ stots:..slotsArgs, globals:..config} } 

any. thoughts @valentinpalkovic ?
@shilman sure you are aware of this, we already discussed it.