Vite: Improve handling of preview annotations

[tobiasdiez]

What I did

While working on the Nuxt integration, I noticed a couple of issues with how the preview annotations are handled. Namely:

• Vite seems to not analyze / transpile the preview imports: Not sure why this is the case, but I believe it's the origin of Could not resolve "virtual:nuxt-runtime-config" nuxt-modules/storybook#718. I've changed the dynamic imports to absolute ones. Now imports are correctly analyzed also in dev-mode, which made it necessary to include a few optimizeDeps (one of them is from Vite: Add jsdoc-type-pratt-parser to optimizeDeps #29179).
• Deep imports in node_modules like node_modules/packageA/node_modules/storybook are truncated to the last package ( storybook in 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.
• What results in errors, however, are absolute paths on Windows that use \ as path separator. This is fixed by using normalize from the pathe package, 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:

• stories
• unit tests
• integration tests
• end-to-end 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

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

• Make 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/core team 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>

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	78.7 MB	78.7 MB	0 B	1.53	0%
initSize	151 MB	151 MB	74.1 kB	-0.24	0%
diffSize	72.6 MB	72.6 MB	74.1 kB	-0.87	0.1%
buildSize	6.77 MB	6.77 MB	1.61 kB	-0.63	0%
buildSbAddonsSize	1.5 MB	1.5 MB	0 B	-0.65	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.83 MB	1.83 MB	0 B	-0.63	0%
buildSbPreviewSize	270 kB	270 kB	0 B	-0.65	0%
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.8 MB	3.8 MB	0 B	-0.65	0%
buildPreviewSize	2.97 MB	2.97 MB	1.61 kB	55.48	0.1%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	20s	9.3s	-10s -630ms	-0.72	-113.2%
generateTime	21.1s	21.3s	276ms	0.15	1.3%
initTime	15.4s	19.8s	4.3s	2.57	🔺21.9%
buildTime	10s	11.8s	1.8s	2	🔺15.3%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	6.8s	6.2s	-642ms	-0.91	-10.3%
devManagerResponsive	4.3s	4s	-318ms	-0.81	-7.8%
devManagerHeaderVisible	656ms	510ms	-146ms	-0.88	-28.6%
devManagerIndexVisible	690ms	540ms	-150ms	-0.86	-27.8%
devStoryVisibleUncached	1.2s	1.3s	95ms	0.3	7.2%
devStoryVisible	684ms	748ms	64ms	0.78	8.6%
devAutodocsVisible	547ms	625ms	78ms	1.03	12.5%
devMDXVisible	613ms	660ms	47ms	0.99	7.1%
buildManagerHeaderVisible	593ms	493ms	-100ms	-0.47	-20.3%
buildManagerIndexVisible	595ms	496ms	-99ms	-0.53	-20%
buildStoryVisible	670ms	628ms	-42ms	0.06	-6.7%
buildAutodocsVisible	498ms	557ms	59ms	0.06	10.6%
buildMDXVisible	556ms	546ms	-10ms	0.17	-1.8%

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: Added knitwork, pathe, and slash dependencies 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: Replaced path with pathe for normalization and added deprecation warning for object-based annotations.
• code/builders/builder-vite/src/codegen-modern-iframe-script.test.ts: Added unit tests for generateModernIframeScriptCodeFromPreviews.
• code/builders/builder-vite/src/utils/process-preview-annotation.test.ts: Updated tests to ensure correct path handling, especially for Windows paths.

[greptile-apps]

LGTM

_{5 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings}

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 502248b. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx run-many -t build --parallel=3

---

Sent with 💌 from NxCloud.

[ndelangen]

Thank you for the PR @tobiasdiez.

Could you have a look at why the CI is failing?

[tobiasdiez]

Could you have a look at why the CI is failing?

Tests are passing now.

[ndelangen]

@tobiasdiez I think I may have broken something when i merged in the base branch, but I'm not sure what.

Can you assist?

[tobiasdiez]

@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?

[JReinhold]

Doesn't this pose a security vulnerability? Leaking the build-environment's filesystem directory-structure to the client bundle? I'm not a security expert at all, I just recall a few CVEs coming our way for exactly this, and I know we go out of our way in other places to ensure that nothing above the project root ends up in the bundle.

And maybe I'm misunderstanding this whole thing, and this doesn't actually end up in the bundle, and then it's fine. I was mostly just gauging this from the new tests.

[tobiasdiez]

No, this only "leaks" the full path to vite - but vite will then replace it with the import of the correct output chunk upon bundling.

[tobiasdiez]

Managed to fix the tests, so this is good to go from my side.

@ndelangen @tmeasday please review when you have a bit of spare time. Thanks!