Storybook: Storybook can't detect dynamic Vue Component Props' default values both in v6 and v5.

[rockmandash]

Thanks for resolving bugs so fast for previously issues!

Describe the bug

When Storybook is analyzing a Vue Component Props' default values, it only supports static analysis, no dynamic.

To Reproduce

1. vue create sb6-test with TypeScript template
2. cd sb6-test
3. npx sb@next init
4. create two files

TestProp.vue

<template>
  <div :style="style" />
</template>

<script lang="ts">
import Vue, { PropType } from "vue";

export default Vue.extend({
  props: {
    backgroundSize: {
      default: "cover" as const,
      type: String as PropType<"contain" | "cover">,
      validator: (value) => ["contain", "cover"].includes(value),
    },
  },

  computed: {
    style() {
      return {
        width: "200px",
        height: "200px",
        background: "url(https://source.unsplash.com/weekly?water)",
        backgroundSize: this.backgroundSize,
        backgroundPosition: "center center",
      };
    },
  },
});
</script>

TestProp.stories.js

import TestProp from "./TestProp.vue";

export default {
  title: "TestProp",
  component: TestProp,
};

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

Storybook can't detect dynamic Vue Component Props' default values in this case.

However, I can't simply remove as const since it will widen to string type.

Suggestion

If you log out Vue Components, you can get the real default value like this

import TestProp from "./TestProp.vue";

console.log("TestProp", JSON.stringify(TestProp.options.props));
// =>  { backgroundSize: { default: "cover" } }

Maybe using this method can solve the problem.

[shilman]

@elevatebart any thoughts on this one?

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[adallos]

I'm having this bug as well!! Any updates? 😮

[shilman]

@elevatebart is this something vue-docgen-api would ever support?

@jonniebigodes this is the kind of limitation we probably need to add to the documentation ... so many different corner cases tho.

[elevatebart]

@shilman @rockmandash I was very busy recently but this seems like a quick fix that should be done on the vue-docgen-api side.

Let me see what I can cook up.

[elevatebart]

I delivered 4.33.1 in which I only take the value of the expression of default... fixing the bug mentioned here ;)

[shilman]

Good golly!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.26 containing PR #12808 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.