Description
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.tswhich 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.vueandComponentB.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
componentExamplesorcomponentPreviewsthat contain components that are not used in production, but only as examples for preview. This can get a bit tedious.