Vite: Support vite 4

[IanVS]

Issue: N/A

What I did

Vite 4 will be released soon. Let's test it out in storybook.

How to test

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps?
• Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

[IanVS]

This is currently passing, but note that there will be two versions of vite in these projects, until #20131 is merged. Maybe I should just pull that PR into this one?

I tested this out locally, by using npm create vite@beta, then npx sb@next init

Here's the output of npm ls vite:

├─┬ @storybook/[email protected]
│ ├─┬ @joshwooding/[email protected]
│ │ └── [email protected] deduped invalid: ">2.0.0-0" from node_modules/@joshwooding/vite-plugin-react-docgen-typescript
│ ├─┬ @storybook/[email protected]
│ │ ├─┬ @vitejs/[email protected]
│ │ │ └── [email protected] deduped
│ │ └── [email protected]
│ ├─┬ @vitejs/[email protected]
│ │ └── [email protected] deduped
│ └── [email protected]
├─┬ @vitejs/[email protected]
│ └── [email protected] deduped
└── [email protected]

[shilman]

@IanVS This is awesome!!! So happy about this 🎉

Adding @beta is great for testing, but should stay as yarn create vite when we merge

We should have a separate yarn create vite@beta that only runs at the daily cadence. We can probably do this for TS only (since it's generally a superset of JS) and do it for all frameworks.

WDYT? @yannbf @kasperpeulen

[yannbf]

Agreed!

[IanVS]

I'm not so sure keeping @beta in the tests will be helpful. I don't think we need to officially support beta after the final release (likely tomorrow), and we can always add it back in before the next major change. I'd recommend at least deferring until then, personally.

[JReinhold]

So your recommended approach is that we test against the beta now, for the next couple of days. And when Vite 4.0 has been released, we go back to testing against stable.
And we do the same thing when Vite 5.0 is getting close, etc.

That sounds fair to me.

I think there's CI iteration 2 in the future where we have a setup that tests against all the betas continuously, (so eg. we would have caught Angular 15 breaking before it was released), and that system would likely supersede the work here.

[IanVS]

We could leave it in for a few days, or I've already taken it out of this PR. I think it's a low-risk item right now, especially since we showed here in this PR that it doesn't cause any trouble in any of the frameworks.

I'm also working on getting storybook back into vite-ecosystem-ci, which would mean that storybook would be continuously tested against unreleased versions of vite, which would be ideal.