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

CLI: Install Svelte CSF v5 in Svelte5 projects #29323

Merged
merged 2 commits into from
Oct 11, 2024

Conversation

shilman
Copy link
Member

@shilman shilman commented Oct 10, 2024

Closes N/A

What I did

Prepare storybook init for the Svelte 5 release, in both Svelte and SvelteKit projects:

  • When Svelte 4 is installed, use addon-svelte-csf v4
  • When Svelte 5 is installed, use addon-svelte-csf v5 prerelease
  • When Svelte 5 is installed and addon-svelte-csf v5 is released, use v5
  • When Svelte 5 is not installed, make a best guess of the above using the package.json version specifier
  • When all else fails, just use the latest version of addon-svelte-csf

@JReinhold Do we need to update the template stories for Svelte CSF v5?

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

What I did:

  • Create a svelte-kit/skeleton-ts sandbox and verify that it's using the latest v4 stable release of addon-svelte-csf
  • Create a svelte-kit/prerelease-ts sandbox and verify that it's using the latest prerelease of addon-svelte-csf

🦋 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 26 B 0.57 0%
initSize 147 MB 147 MB 26 B -1.31 0%
diffSize 68.3 MB 68.3 MB 0 B -1.31 0%
buildSize 6.79 MB 6.79 MB 0 B 1.33 0%
buildSbAddonsSize 1.5 MB 1.5 MB 0 B -1.53 0%
buildSbCommonSize 195 kB 195 kB 0 B - 0%
buildSbManagerSize 1.83 MB 1.83 MB 0 B - 0%
buildSbPreviewSize 270 kB 270 kB 0 B - 0%
buildStaticSize 0 B 0 B 0 B - -
buildPrebuildSize 3.8 MB 3.8 MB 0 B -1.53 0%
buildPreviewSize 2.99 MB 2.99 MB 0 B 1.34 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 8.5s 14.5s 5.9s 0.29 41.2%
generateTime 21s 20.9s -79ms 0.12 -0.4%
initTime 14.5s 14.1s -402ms -0.1 -2.8%
buildTime 8.4s 10.8s 2.3s 0.5 21.8%
testBuildTime 0ms 0ms 0ms - -
devPreviewResponsive 5.6s 8.1s 2.5s 0.72 31%
devManagerResponsive 3.9s 5.1s 1.2s 0.74 24.3%
devManagerHeaderVisible 633ms 1s 404ms 4.58 🔺39%
devManagerIndexVisible 694ms 1s 344ms 3.95 🔺33.1%
devStoryVisibleUncached 987ms 1.7s 779ms 1.59 🔺44.1%
devStoryVisible 694ms 1s 362ms 4.07 🔺34.3%
devAutodocsVisible 574ms 908ms 334ms 5.17 🔺36.8%
devMDXVisible 519ms 924ms 405ms 4.41 🔺43.8%
buildManagerHeaderVisible 528ms 635ms 107ms 0.49 16.9%
buildManagerIndexVisible 534ms 640ms 106ms 0.42 16.6%
buildStoryVisible 599ms 680ms 81ms 0.34 11.9%
buildAutodocsVisible 486ms 567ms 81ms 0.71 14.3%
buildMDXVisible 465ms 620ms 155ms 1.1 25%

Greptile Summary

This PR updates the Storybook CLI to dynamically install the appropriate version of addon-svelte-csf based on the installed Svelte version, preparing for Svelte 5 compatibility.

  • Added getAddonSvelteCsfVersion function in code/lib/create-storybook/src/generators/SVELTE/index.ts to determine correct addon version
  • Implemented comprehensive unit tests in code/lib/create-storybook/src/generators/SVELTE/index.test.ts for various Svelte versions
  • Updated SvelteKit generator in code/lib/create-storybook/src/generators/SVELTEKIT/index.ts to use dynamic addon version
  • Ensured backward compatibility with Svelte 4 while preparing for Svelte 5 release
  • Handled scenarios for installed, uninstalled, and pre-release Svelte versions

@shilman shilman added maintenance User-facing maintenance tasks cli ci:normal labels Oct 10, 2024
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.

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

const packageManager = {
getInstalledVersion: async (pkg: string) => pkg === 'svelte' ? svelteVersion : undefined,
getAllDependencies: async () => ({ svelte: `^${svelteVersion}` })
} as any as JsPackageManager;
Copy link
Contributor

Choose a reason for hiding this comment

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

style: Avoid using 'as any' type assertion. Consider creating a mock class that implements JsPackageManager interface

const packageManager = {
getInstalledVersion: async (pkg: string) => undefined,
getAllDependencies: async () => ({ svelte: svelteSpecifier })
} as any as JsPackageManager;
Copy link
Contributor

Choose a reason for hiding this comment

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

style: Same as above, avoid 'as any' type assertion

Comment on lines 21 to 26
try {
const coerced = coerce(svelteSpecifier);
if(coerced?.version) {
return versionHelper(major(coerced.version));
}
} catch {}
Copy link
Contributor

Choose a reason for hiding this comment

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

style: Consider handling specific errors instead of using an empty catch block

Copy link

nx-cloud bot commented Oct 10, 2024

☁️ Nx Cloud Report

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

@JReinhold JReinhold added ci:daily Run the CI jobs that normally run in the daily job. and removed ci:normal labels Oct 11, 2024
@JReinhold
Copy link
Contributor

Do we need to update the template stories for Svelte CSF v5?

Yes we do. I can provide the stories, if you can figure out how to correctly select them based on the version?

@shilman
Copy link
Member Author

shilman commented Oct 11, 2024

Let's do that as a separate task. And after Svelte5 is released?

Self-merging @JReinhold

@shilman shilman merged commit 0eb384b into next Oct 11, 2024
114 of 116 checks passed
@shilman shilman deleted the shilman/install-svelte5-csf branch October 11, 2024 08:58
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. cli maintenance User-facing maintenance tasks
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants