Different wrappers for different components

[rudolfbyker]

I'm curious to hear more about your use case for different wrappers for different components though. What do you envision that looking like?

Originally posted by @fwouts in #2086 (comment)

Is your feature request related to a problem? Please describe.

Let's say I have ComponentA and ComponentB. ComponentA requires some things to be provided by the wrapper, and some globals to be mocked. ComponentB requires something totally different, but maybe with the same name. It's not possible to use the same wrapper for previewing both.

Describe the solution you'd like

I don't have strong opinions about how to implement this, but here are some ideas:

• Specify in nuxt.config.ts which components will use which wrapper. Something like

  {
    ...,
    previewjs: {
      wrappers: [
        {
          wrapper: {
            path: "__previewjs__/WrapperA.tsx",
            componentName: "WrapperA",
          },
          componentsToWrap: [
            {
              path: "components/ComponentA.vue",
              componentName: "ComponentA",
            },
            ...
          ],
        },
        ...
      ],
    },
    ...
  }

• A special comment like /// <wrapper = foo> in the component file.
• Special blocks inside the single-file .vue component:

  <template preview-js-wrapper>
    <div class="wrapped">
      <slot />
    </div>
  </template>
  
  <script setup preview-js-wrapper>
    import { provide } from 'vue';
    provide('foo', 'bar');
  </script>

• Allow a file name pattern like ComponentA.wrapper.vue and ComponentB.wrapper.vue.

Some of these suggestions only allow a 1:1 relationship between wrapper and component. Others allow 1:N relationship between wrapper and components. Currently, we have a 1:all relationship (just one wrapper for all components in the project)

Describe alternatives you've considered

• Create a folder called componentExamples or componentPreviews that contain components that are not used in production, but only as examples for preview. This can get a bit tedious.

[fwouts]

Thanks for all this context @rudolfbyker!

One alternative you could already use today is to use Storybook decorators. They actually work with component previews too, as per the preview renderer code.

With Vue 3, this would look like the following block in your .vue file:

<script lang="ts">
export default {
  decorators: [
    (story: any) => ({
      components: { story },
      template: '<div style="margin: 3em;"><story /></div>',
    }),
  ]
};
</script>

I wonder if a solution like this would work for you? Happy to refine it based on your feedback—the fact that it works today is mostly an accident.

[rudolfbyker]

Thanks! I'll try that. I have not used Storybook before (my first time hearing about it was at ViteConf). Does it also work with <script setup lang="ts"> and/or composition API? nevermind, I read the storybook docs now, and I understand better.

But now that I have tried storybook, I don't understand why one would use PreviewJS with storybook. They seem to do similar things.