Vue3: issues when working with args in stories

[thomasaull]

Describe the bug
This is a follow up to some changes I introduced in this PR: #15168

While working with the new released version 6.3.0 in a project, I found some issues when working with args/props in story components:

• Args get passed the the component regardless of using v-bind="args"
• No way of overwriting specific args in setup or on the component itself
• Passing a subset of args to the component does not work

I created a component which demonstrates all theses issues over here: https://github.com/thomasaull/storybook-args-bugs/blob/master/src/stories/BugProps.stories.js

Theses issued do not happen with 6.2.9, so they are probably related to the PR I mentioned above.

I tried to reintroduce the way props/args were handled before the changes in this PR: #13981 and this fixes all the issues I mentioned abvoe and the problem with the full re-render on args update (#13913) aswell. So, in my opinion it would make sense to go back to using this method of handling args/props… The downside is, this would introduce some breaking changes:

Before:

const Template = (args) => ({
  components: { MyComponent },
  setup() {
    return { args };
  },
  template: '<MyComponent v-bind="args"/>',
});

After:

const Template = (args, { argTypes }) => ({
  components: { MyComponent },
  props: Object.keys(argTypes),
  template: '<MyComponent v-bind="$props"/>',
});

The amount of boilerplate code necessary wouldn't change, just the way the stories are defined (It'd be basically the same way it's handled with vue2)

Edit: Found one issue so far with the reintroduced code before #13981:

• Using inject in a decorator does not seem to work Got it working ✅

To Reproduce

• checkout https://github.com/thomasaull/storybook-args-bugs
• install, run and open http://localhost:6006/?path=/story/bugprops--args-always-passed

[shilman]

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-alpha.6 containing PR #15409 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[thomasaull]

@shilman This issue maybe should be re-opened. What do you think about the proposal of bringing back the old method of using props instead of args, which solves all the issues in this issue aswell as the one in #13913 for me

[shilman]

IMO using the vue3 setup method is strictly an improvement over the vue2 args technique. Vue2 automagically maps the args passed into your story function into a reactive store, so there is no way for the user to manually curate the values of the args. The setup function is a natural and "vue3-native" way to explicitly create that mapping.

[thomasaull]

I generally agree, however if the new method is inferior to the old one in terms of functionality I'm not sure if it should be the prefered one. In this comment is described how Storybook should behave in terms of updated values of controls: #13913 (comment) and I currently can't think of a way to do this with vue without relying on props (or any other reactive store for that matter). Maybe other people have some pointers.

One way of keeping control over the args while using the props api could be:

const Template: Story<Args> = (args, { argTypes }) => ({
  components: { MyComponent },
  props: Object.keys(argTypes),

  setup(props) {
    return {
      args: {
        ...props,
        myChangedValue: 'bar',
      },
    }
  },

  template: `
    <MyComponent
      v-bind="args"
    />
  `,
})

However I personally haven't had the the need to do something like this yet, so I might not fully understand what people would like to do here.

[shilman]

Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.2 containing PR #15409 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade