Vitest: Add plugins from viteFinal
#30105
Conversation
…was trying to optimize the vitest plugin itself)
JReinhold
changed the title
viteFinal
|
View your CI Pipeline Execution ↗ for commit 2e1ad63.
☁️ Nx Cloud last updated this comment at |
JReinhold
added
feature request
svelte
addon: test
ci:daily
Package BenchmarksCommit: No significant changes detected, all good. 👏 |
| </If> | ||
|
|
||
| The above example uses the framework's plugin in a Vitest configuration file. You can also use it in a Vitest workspace file, if that is how your project is configured. | ||
| 1. Adjust your Vitest configuration to include the plugin and reference the setup file. You can use the [example configuration files](#example-configuration-files) as a guide. |
There was a problem hiding this comment.
I believe the How do I apply custom Vite configuration? FAQ will also need to be either rewritten to emphasize that we automatically pull everything from viteFinal or removed outright.
There was a problem hiding this comment.
Let me know if that's correct and you'd prefer I do it. Happy to help!
There was a problem hiding this comment.
sounds about right to me. Honestly, I'd love if you could do that, either in this PR or a follow-up, up to you.
| @@ -51,5 +51,5 @@ export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (confi | |||
| ); | |||
| } | |||
|
|
|||
| return config; | |||
| return { ...config, plugins }; | |||
There was a problem hiding this comment.
before, this preset would discard any config set by previous viteFinal presets. We never noticed it because this would always run first in Storybook. But in the Vitest plugin it appears that main.ts runs first, so we need to handle it properly here.
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
12 file(s) reviewed, 4 comment(s)
Edit PR Review Bot Settings | Greptile
| // filter out plugins that we know are unnecesary for tests, eg. docgen plugins | ||
| const plugins = (await withoutVitePlugins( | ||
| (viteConfigFromStorybook.plugins as unknown as PluginOption[]) ?? [], | ||
| [ | ||
| 'storybook:package-deduplication', // addon-docs | ||
| 'storybook:mdx-plugin', // addon-docs | ||
| 'storybook:react-docgen-plugin', | ||
| 'vite:react-docgen-typescript', // aka @joshwooding/vite-plugin-react-docgen-typescript | ||
| 'storybook:svelte-docgen-plugin', | ||
| 'storybook:vue-component-meta-plugin', | ||
| 'storybook:vue-docgen-plugin', | ||
| ] | ||
| )) as unknown as Plugin[]; |
There was a problem hiding this comment.
logic: filtering out docgen plugins could miss important plugins needed by some frameworks - needs thorough testing across all frameworks
| jsxRuntime: 'automatic', | ||
| ...pluginReactOptions, | ||
| }), | ||
| ...plugins, |
There was a problem hiding this comment.
logic: placing ...plugins after core plugins may cause order-dependent issues since some plugins might need to run before tsconfigPaths or flowPlugin
Closes storybookjs/addon-svelte-csf#213, follow-up to #29806 (comment)
What I did
To support Svelte CSF stories, we're now also including Vite plugins collected from the
viteFinalpreset (and thus addons) in our Vitest plugin. So now, instead of just returning a plugin, we're returning a list of plugins (which is totally valid). With the other changes to@storybook/addon-svelte-csflanding (storybookjs/addon-svelte-csf#244, storybookjs/addon-svelte-csf#247, storybookjs/addon-svelte-csf#248) this is all that's necessary to add automatic support forstories.sveltefiles.This PR also cleans up our
viteFinals frameworks, because some of them were mutating configs and plugins arrays which could cause issues if the presets were loaded in another order than expected.Things to consider:
This also adds all other plugins, like Vite docgen plugins (not just for Svelte, but also React, etc.) which could incur an unnecessary perf penalty. Do we want to handle that as part of this, or later, and how? (make it work, then make it fast?)EDIT: fixed, explicitly removing a hard coded list of known unnecessary plugins.enforce: 'pre'from the Vitest plugin, meaning that it would be more affected by changes to the plugin order. We need to QA this, but currently I can't see how this would cause issues.Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.🦋 Canary release
This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the
@storybookjs/coreteam here.core team members can create a canary release here or locally with
gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>Greptile Summary
Based on the provided information, I'll create a concise summary of the key changes in this pull request:
Adds support for Svelte CSF stories in Vitest by modifying the Storybook test plugin architecture.
storybookTestin/code/addons/test/src/vitest-plugin/index.tsto return multiple plugins and include Vite plugins fromviteFinalenforce: 'pre'setting from Vitest plugin to improve plugin compatibilityThe changes enable automatic support for
.stories.sveltefiles while maintaining a cleaner plugin architecture, though there are potential performance implications from including additional plugins that need to be monitored.