Vite: Improve handling of preview annotations #28798
Conversation
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
LGTM
5 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings
|
View your CI Pipeline Execution ↗ for commit 78e6c4c.
☁️ Nx Cloud last updated this comment at |
|
Thank you for the PR @tobiasdiez. Could you have a look at why the CI is failing? |
Tests are passing now. |
ndelangen
changed the title
|
@tobiasdiez I think I may have broken something when i merged in the base branch, but I'm not sure what. Can you assist? |
Thanks for your help! The tests should pass now, but there are ts errors during build. I have no idea where they are coming from. Do you? |
…ewAnno # Conflicts: # code/.storybook/preview.tsx # code/builders/builder-vite/src/codegen-modern-iframe-script.ts
…sdiez/previewAnno
| // TODO: Remove this once the new version of Nuxt is released that removes this workaround: | ||
| // https://github.com/nuxt-modules/storybook/blob/a2eec6e898386f76c74826842e8e007b185c3d35/packages/storybook-addon/src/preset.ts#L279-L306 | ||
| if (path.bare != null && path.absolute === '') { | ||
| return path.bare; | ||
| } |
There was a problem hiding this comment.
@tobiasdiez I had to make this workaround to support Nuxt for now.
There was a problem hiding this comment.
Thanks! The issues mentioned in that link were exactly the reasons why I created this PR here in the first place.
Once you release a new version, I'll remove the above workaround in the nuxt-module.
There was a problem hiding this comment.
Okay, will release a new alpha soon!
github-project-automation
bot
moved this from Empathy Queue (prioritized)
to Done
in Core Team Projects
This reverts commit 2d3d220. It should never have been reverted in the first place, it was a mistake.
7 participants
What I did
While working on the Nuxt integration, I noticed a couple of issues with how the preview annotations are handled. Namely:
optimizeDeps(one of them is from Vite: Add jsdoc-type-pratt-parser tooptimizeDeps#29179).node_moduleslikenode_modules/packageA/node_modules/storybookare truncated to the last package (storybookin the example), which then cannot be resolved. This is fixed by always resolving the preview annotation paths to absolute paths and using them. The code contained a few remarks that vite appearently has problems with absolute paths, but as far as I'm aware vite handles absolute paths perfectly fine.\as path separator. This is fixed by usingnormalizefrom thepathepackage, which converts this to/.The code to create the preview annotation imports is inspired by https://github.com/nuxt/nuxt/blob/754fc30e5d0fe506ee3218f9c4a11fa047e3553f/packages/nuxt/src/core/templates.ts#L61-L76
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
I've run and added a few tests. Still have to figure out how to test the sandboxes.
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/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
Improved handling of preview annotations in the Vite builder for Storybook, addressing path normalization and import issues.
code/builders/builder-vite/package.json: Addedknitwork,pathe, andslashdependencies for better path handling.code/builders/builder-vite/src/codegen-modern-iframe-script.ts: Updated to generate absolute paths for preview annotations and improved HMR logic.code/builders/builder-vite/src/utils/process-preview-annotation.ts: Replacedpathwithpathefor normalization and added deprecation warning for object-based annotations.code/builders/builder-vite/src/codegen-modern-iframe-script.test.ts: Added unit tests forgenerateModernIframeScriptCodeFromPreviews.code/builders/builder-vite/src/utils/process-preview-annotation.test.ts: Updated tests to ensure correct path handling, especially for Windows paths.