Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vite: Remove @fs prefix from import paths #29687

Open
wants to merge 2 commits into
base: next
Choose a base branch
from
Open

Conversation

JReinhold
Copy link
Contributor

@JReinhold JReinhold commented Nov 22, 2024

Another attempt at #28941, direct response to https://github.com/storybookjs/storybook/pull/28941/files#r1787391658.

What I did

Removed the /@fs/ prefix from import paths in the Vite builder, as it was causing some issues:

Currently, the generated imports in storybook-stories.js use the prefix @fs. This prefix is generally used by vite to mark certain imports at the end of the resolution (eg files that outside of the root dir). Adding the prefix already at the beginning yields problems when plugins are modifying the story import resolution (which is the case for the vue plugin).

I haven't experienced any problems with this change in my light testing, but I need to test it on Windows as well to be sure.

@tobiasdiez does this solve the original problem that you had? Or am I missing something crucial? I've created a canary release that you can try out at your end to see if it fixes it.

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

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-storybook/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 pull request has been released as version 0.0.0-pr-29687-sha-d977033a. Try it out in a new sandbox by running npx [email protected] sandbox or in an existing project with npx [email protected] upgrade.

More information
Published version 0.0.0-pr-29687-sha-d977033a
Triggered by @JReinhold
Repository storybookjs/storybook
Branch jeppe/remove-@fs
Commit d977033a
Datetime Fri Nov 22 21:50:26 UTC 2024 (1732312226)
Workflow run 11980680013

To request a new release of this pull request, mention the @storybookjs/core team.

core team members can create a new canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=29687

name before after diff z %
createSize 0 B 0 B 0 B - -
generateSize 78.4 MB 78.4 MB 0 B -0.46 0%
initSize 144 MB 144 MB -13.3 kB -0.78 0%
diffSize 65.1 MB 65.1 MB -13.3 kB -0.64 0%
buildSize 6.83 MB 6.83 MB 0 B -0.72 0%
buildSbAddonsSize 1.51 MB 1.51 MB 0 B - 0%
buildSbCommonSize 195 kB 195 kB 0 B - 0%
buildSbManagerSize 1.86 MB 1.86 MB 0 B -0.73 0%
buildSbPreviewSize 271 kB 271 kB 0 B - 0%
buildStaticSize 0 B 0 B 0 B - -
buildPrebuildSize 3.83 MB 3.83 MB 0 B -0.73 0%
buildPreviewSize 3 MB 3 MB 0 B 0.61 0%
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 22.9s 6.5s -16s -342ms -1.5 🔰-248.2%
generateTime 23.6s 19.4s -4s -221ms -0.62 -21.7%
initTime 14.4s 13.2s -1s -212ms -1.01 -9.1%
buildTime 12.4s 9.4s -3s -54ms 0.24 -32.4%
testBuildTime 0ms 0ms 0ms - -
devPreviewResponsive 6.2s 5s -1s -281ms -1.51 🔰-25.6%
devManagerResponsive 4.1s 3s -1s -47ms -1.65 🔰-34%
devManagerHeaderVisible 587ms 520ms -67ms -0.83 -12.9%
devManagerIndexVisible 671ms 604ms -67ms -0.57 -11.1%
devStoryVisibleUncached 1.3s 843ms -473ms -0.93 -56.1%
devStoryVisible 667ms 602ms -65ms -0.42 -10.8%
devAutodocsVisible 580ms 462ms -118ms -1.05 -25.5%
devMDXVisible 578ms 475ms -103ms -0.63 -21.7%
buildManagerHeaderVisible 615ms 514ms -101ms -0.8 -19.6%
buildManagerIndexVisible 651ms 523ms -128ms -0.86 -24.5%
buildStoryVisible 612ms 507ms -105ms -0.89 -20.7%
buildAutodocsVisible 510ms 400ms -110ms -1.31 🔰-27.5%
buildMDXVisible 548ms 442ms -106ms -0.36 -24%

Greptile Summary

Removed the '/@fs/' prefix from import paths in the Vite builder to fix issues with plugin-based story import resolution, particularly affecting Vue plugins.

  • Modified code/builders/builder-vite/src/codegen-importfn-script.ts to remove '/@fs/' prefix from dynamic imports
  • Change simplifies import path resolution for plugins that modify story imports
  • Testing needed on Windows to ensure cross-platform compatibility

@JReinhold JReinhold added maintenance User-facing maintenance tasks ci:daily Run the CI jobs that normally run in the daily job. labels Nov 22, 2024
@JReinhold JReinhold marked this pull request as ready for review November 22, 2024 13:20
Copy link

nx-cloud bot commented Nov 22, 2024

☁️ Nx Cloud Report

CI is running/has finished running commands for commit d977033. 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 2 targets

Sent with 💌 from NxCloud.

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings | Greptile

@@ -31,7 +31,7 @@ async function toImportFn(stories: string[]) {
const objectEntries = stories.map((file) => {
const relativePath = normalizePath(relative(process.cwd(), file));

return ` '${toImportPath(relativePath)}': async () => import('/@fs/${file}')`;
return ` '${toImportPath(relativePath)}': async () => import('${file}')`;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

logic: Removing /@fs/ prefix may cause issues with files outside project root. Consider adding a check to ensure file paths are within Vite's root directory.

@storybook-pr-benchmarking
Copy link

storybook-pr-benchmarking bot commented Nov 22, 2024

Package Benchmarks

Commit: d977033, ran on 22 November 2024 at 21:57:57 UTC

No significant changes detected, all good. 👏

@storybook-bot
Copy link
Contributor

Failed to publish canary version of this pull request, triggered by @JReinhold. See the failed workflow run at: https://github.com/storybookjs/storybook/actions/runs/11973399334

@storybook-bot
Copy link
Contributor

Failed to publish canary version of this pull request, triggered by @JReinhold. See the failed workflow run at: https://github.com/storybookjs/storybook/actions/runs/11980149152

@tobiasdiez
Copy link
Contributor

This of course works if the indexer returns a path that you can directly feed into import without that the bundler complains. The whole point of using pathe/knitwork was to put the path cleaning into storybook so that the downstream indexer implementation don't have to worry about these issues.

Some scenarios that would need to be tested:

  • Special characters in the relative path that are not valid as variable names in js
  • Backslash/slash (perhaps escaped?, mixed?) on windows / linux
  • Paths containing ellipses
  • Paths with and without final separator

And perhaps a few more edge cases that I forgot now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ci:daily Run the CI jobs that normally run in the daily job. maintenance User-facing maintenance tasks
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants