allow to dynamically generate stories / args

[tobiasdiez]

Example of how this may look:

<template>
  <Stories>
    <Story
      v-for="(argument, key) of arguments"
      :title="'Story ' + key"
    >
      <MyComponent :argument="argument" />
    </Story>
  </Stories>
</template>
<script lang="ts" setup>
import MyComponent from './MyComponent.vue'

const arguments = ["hello", "world"]
</script>

This is currently blocked by https://github.com/storybookjs/storybook/issues/9828.

Once this is implemented, add https://storybook.js.org/docs/vue/writing-stories/introduction#using-args as example.

[floroz]

In Storybook V7 to dynamically generate CSF they have introduced the Indexer API, which is what storybook-vue-addon uses under the hood.

So, we could theoretically already support this feature just by enhancing the parsing of the *.stories.vue file to detect the usage of iterators over the <Story /> token, and transform them into a dynamic CSF as we do for static stories' declarations.

Not saying necessarily is something we can do anytime soon, just want to understand if there are any other constraints I am not aware of?

[tobiasdiez]

Yes, the new indexer api is nice - at least in principle. One still has to implement the transpiling to csf: https://github.com/storybookjs/storybook/blob/next/docs/api/main-config-indexers.md#transpiling-to-csf And I'm not sure how to hook into vue's compiling to extract the for-loop. The obvious way via node transformers doesn't seem to work as vue's for-loop transformer is always executed first, by design: https://github.com/vuejs/core/issues/4248. So maybe we have to first replace the v-for by a different directive, say storybook-for and then reimplement the v-for transformer in our setting.

[floroz]

Yes, the new indexer api is nice - at least in principle. One still has to implement the transpiling to csf: https://github.com/storybookjs/storybook/blob/next/docs/api/main-config-indexers.md#transpiling-to-csf And I'm not sure how to hook into vue's compiling to extract the for-loop. The obvious way via node transformers doesn't seem to work as vue's for-loop transformer is always executed first, by design: vuejs/core#4248. So maybe we have to first replace the v-for by a different directive, say storybook-for and then reimplement the v-for transformer in our setting.

That's a very handy link for the API docs, thank you @tobiasdiez.

I guess my point is whether this type of feature would really be in the scope of this addon.

If you are dynamically generating stories, the developer's experience of writing Vue SFC might not be the first thing you need.

Obviously, if this can be supported without much effort, would be great, but it seems a non-trivial use case for which Storybook already provides a valid alternative.

The risk I see is to manage (and maintain) yet another level of pre-processing of the SFC file which might conflict with the future transform we will put in place to support the most advanced features.

I suppose this is something we can revisit at some point in the future.