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

Next.js: Add @storybook/experimental-nextjs-vite package #28800

Merged
merged 22 commits into from
Aug 12, 2024

Conversation

valentinpalkovic
Copy link
Contributor

@valentinpalkovic valentinpalkovic commented Aug 3, 2024

Closes #28799

What I did

I have created a new experimental @storybook/experimental-nextjs-vite package, based on Vite and vite-plugin-storybook-nextjs

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

  1. Run the experimental-nextjs-vite sandbox
  2. Open Storybook in your browser
  3. Make sure Storybook works

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 pull request has been released as version 0.0.0-pr-28800-sha-2528064a. 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-28800-sha-2528064a
Triggered by @valentinpalkovic
Repository storybookjs/storybook
Branch valentin/nextjs-vite
Commit 2528064a
Datetime Sat Aug 3 22:34:44 UTC 2024 (1722724484)
Workflow run 10231419317

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=28800

name before after diff z %
createSize 0 B 0 B 0 B - -
generateSize 76.3 MB 76.3 MB 0 B -0.11 0%
initSize 167 MB 167 MB 379 B -0.65 0%
diffSize 91.1 MB 91.1 MB 379 B -0.65 0%
buildSize 7.42 MB 7.42 MB 0 B 1.36 0%
buildSbAddonsSize 1.61 MB 1.61 MB 0 B -1.36 0%
buildSbCommonSize 195 kB 195 kB 0 B - 0%
buildSbManagerSize 2.29 MB 2.29 MB 0 B 1.36 0%
buildSbPreviewSize 351 kB 351 kB 0 B -1.36 0%
buildStaticSize 0 B 0 B 0 B - -
buildPrebuildSize 4.45 MB 4.45 MB 0 B 1.36 0%
buildPreviewSize 2.97 MB 2.97 MB 0 B -1.36 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 21s 17.8s -3s -287ms -0.27 -18.5%
generateTime 18.9s 21.3s 2.3s -0.14 11.1%
initTime 16s 17.9s 1.9s -0.21 10.8%
buildTime 15.2s 11.8s -3s -381ms -0.34 -28.6%
testBuildTime 0ms 0ms 0ms - -
devPreviewResponsive 6.6s 6.8s 249ms -1.49 3.6%
devManagerResponsive 4.2s 4.3s 72ms -1.55 1.7%
devManagerHeaderVisible 690ms 671ms -19ms -1.43 -2.8%
devManagerIndexVisible 717ms 674ms -43ms -1.71 🔰-6.4%
devStoryVisibleUncached 1.2s 1s -164ms -1.35 🔰-15.7%
devStoryVisible 736ms 716ms -20ms -1.46 -2.8%
devAutodocsVisible 607ms 627ms 20ms -1.2 3.2%
devMDXVisible 650ms 637ms -13ms -1.11 -2%
buildManagerHeaderVisible 682ms 640ms -42ms -1.31 🔰-6.6%
buildManagerIndexVisible 683ms 643ms -40ms -1.31 🔰-6.2%
buildStoryVisible 722ms 680ms -42ms -1.32 🔰-6.2%
buildAutodocsVisible 596ms 599ms 3ms -1.28 0.5%
buildMDXVisible 565ms 584ms 19ms -1.12 3.3%

Greptile Summary

The pull request introduces a new experimental @storybook/nextjs-vite package, integrating Vite with Next.js for Storybook.

  • Framework Support: Added nextjs-vite to framework-to-renderer.ts, versions.ts, and frameworks.ts to map it to the react renderer.
  • Configuration Files: Added .eslintrc.json, README.md, package.json, preset.js, and project.json for the nextjs-vite framework.
  • Mock Implementations: Introduced mocks for Next.js cache, headers, navigation, and router functionalities in src/export-mocks.
  • Decorators and Providers: Added decorators for head management, images, routing, and styled JSX in src.
  • TypeScript Types: Defined new types for framework options and configurations in types.ts and typings.d.ts.

Ensure all dependencies and configurations are correctly set up and thoroughly tested.

Copy link

nx-cloud bot commented Aug 3, 2024

☁️ Nx Cloud Report

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

Sent with 💌 from NxCloud.

@valentinpalkovic valentinpalkovic changed the title Add @storybook/nextjs-vite package Next.js: Add @storybook/nextjs-vite package Aug 3, 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.

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

scripts/prepare/check.ts Outdated Show resolved Hide resolved
valentinpalkovic and others added 2 commits August 5, 2024 11:44
- Use a more stable heading
    - "Experimental" is temporary
- Update package names
@valentinpalkovic valentinpalkovic added ci:daily Run the CI jobs that normally run in the daily job. and removed ci:normal labels Aug 9, 2024
@valentinpalkovic valentinpalkovic merged commit 7780067 into next Aug 12, 2024
104 checks passed
@valentinpalkovic valentinpalkovic deleted the valentin/nextjs-vite branch August 12, 2024 09:02
@github-actions github-actions bot mentioned this pull request Aug 12, 2024
29 tasks
@valentinpalkovic valentinpalkovic changed the title Next.js: Add @storybook/nextjs-vite package Next.js: Add @storybook/experimental-nextjs-vite package Aug 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
builder-vite ci:daily Run the CI jobs that normally run in the daily job. feature request nextjs
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Experimental: @storybook/nextjs-vite
4 participants