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.

Sign up for GitHub

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

Jump to bottom

Vite: Support vite 4 #20139

Merged
merged 8 commits into from
Dec 9, 2022
Merged

Vite: Support vite 4 #20139

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5c357ca
Vite: use v4 beta in repros
IanVS Dec 7, 2022
fc38bc9
Remove vite dep from frameworks that don't use vite
IanVS Dec 7, 2022
d3086b9
Update vite
IanVS Dec 7, 2022
5f56af2
Fix yarn.lock
IanVS Dec 8, 2022
e384b36
Merge remote-tracking branch 'origin/next' into vite-beta
IanVS Dec 8, 2022
e4b8440
Remove beta flag from vite project bootstraps
IanVS Dec 8, 2022
aec53c8
Fix formatting
IanVS Dec 8, 2022
d69e183
Merge branch 'next' into vite-beta
IanVS Dec 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions code/frameworks/html-vite/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,13 +60,11 @@
"@storybook/html": "7.0.0-alpha.62",
"@storybook/node-logger": "7.0.0-alpha.62",
"@storybook/preview-web": "7.0.0-alpha.62",
"magic-string": "^0.26.1",
"vite": "3"
"magic-string": "^0.26.1"
},
"devDependencies": {
"@types/node": "^16.0.0",
"typescript": "~4.9.3",
"vite": "^3.1.0"
"typescript": "~4.9.3"
},
"engines": {
"node": "^14.18 || >=16"
Expand Down
4 changes: 2 additions & 2 deletions code/frameworks/react-vite/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,12 +59,12 @@
"ast-types": "^0.14.2",
"magic-string": "^0.26.1",
"react-docgen": "^6.0.0-alpha.3",
"vite": "^3.1.3"
"vite": "^3.0.0||^4.0.0"
},
"devDependencies": {
"@types/node": "^16.0.0",
"typescript": "~4.9.3",
"vite": "^3.1.3"
"vite": "^4.0.0-beta.2"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
Expand Down
4 changes: 2 additions & 2 deletions code/frameworks/svelte-vite/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,12 +59,12 @@
"magic-string": "^0.26.1",
"svelte": "^3.0.0",
"sveltedoc-parser": "^4.2.1",
"vite": "^3.1.3"
"vite": "^3.0.0||^4.0.0"
},
"devDependencies": {
"@types/node": "^16.0.0",
"typescript": "~4.9.3",
"vite": "^3.1.3"
"vite": "^4.0.0-beta.2"
},
"peerDependencies": {
"@storybook/addon-svelte-csf": "^2.0.0",
Expand Down
3 changes: 1 addition & 2 deletions code/frameworks/sveltekit/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,7 @@
},
"devDependencies": {
"@types/node": "^16.0.0",
"typescript": "^4.9.3",
"vite": "^3.1.3"
"typescript": "^4.9.3"
},
"peerDependencies": {
"@storybook/addon-svelte-csf": "^2.0.0"
Expand Down
3 changes: 2 additions & 1 deletion code/frameworks/vue-vite/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,12 @@
"@storybook/core-server": "7.0.0-alpha.62",
"@storybook/vue": "7.0.0-alpha.62",
"magic-string": "^0.26.1",
"vite": "^3.1.3",
"vite": "^3.0.0||^4.0.0",
"vue-docgen-api": "^4.40.0"
},
"devDependencies": {
"typescript": "~4.9.3",
"vite": "^4.0.0-beta.2",
"vue": "^2.7.10"
},
"peerDependencies": {
Expand Down
4 changes: 2 additions & 2 deletions code/frameworks/vue3-vite/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,13 +56,13 @@
"@storybook/vue3": "7.0.0-alpha.62",
"@vitejs/plugin-vue": "^3.0.0",
"magic-string": "^0.26.1",
"vite": "^3.1.3",
"vite": "^3.0.0||^4.0.0",
"vue-docgen-api": "^4.40.0"
},
"devDependencies": {
"@types/node": "^16.0.0",
"typescript": "~4.9.3",
"vite": "^3.1.3"
"vite": "^4.0.0-beta.2"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
Expand Down
6 changes: 2 additions & 4 deletions code/frameworks/web-components-vite/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,13 +55,11 @@
"@storybook/core-server": "7.0.0-alpha.62",
"@storybook/node-logger": "7.0.0-alpha.62",
"@storybook/web-components": "7.0.0-alpha.62",
"magic-string": "^0.26.1",
"vite": "3"
"magic-string": "^0.26.1"
},
"devDependencies": {
"@types/node": "^16.0.0",
"typescript": "~4.9.3",
"vite": "^3.1.0"
"typescript": "~4.9.3"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
Expand Down
4 changes: 2 additions & 2 deletions code/lib/builder-vite/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,14 +61,14 @@
"rollup": "^2.25.0 || ^3.3.0",
"rollup-plugin-external-globals": "^0.7.1",
"slash": "^3.0.0",
"vite": "^3.1.3"
"vite": "^3.0.0||^4.0.0"
},
"devDependencies": {
"@types/express": "^4.17.13",
"@types/node": "^16.0.0",
"rollup": "^3.0.0",
"typescript": "~4.9.3",
"vite": "^3.1.3"
"vite": "^4.0.0-beta.2"
},
"peerDependencies": {
"@preact/preset-vite": "*",
Expand Down
24 changes: 13 additions & 11 deletions code/lib/cli/src/repro-templates.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export const allTemplates: Record<string, Template> = {
},
'react-vite/default-js': {
name: 'React Vite (JS)',
script: 'yarn create vite . --template react',
script: 'yarn create vite@beta . --template react',
Copy link
Member

Choose a reason for hiding this comment

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

@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

Copy link
Member

Choose a reason for hiding this comment

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

Agreed!

Copy link
Member Author

Choose a reason for hiding this comment

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

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.

Copy link
Contributor

Choose a reason for hiding this comment

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

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.

Copy link
Member Author

Choose a reason for hiding this comment

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

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.

expected: {
framework: '@storybook/react-vite',
renderer: '@storybook/react',
Expand All @@ -95,7 +95,7 @@ export const allTemplates: Record<string, Template> = {
},
'react-vite/default-ts': {
name: 'React Vite (TS)',
script: 'yarn create vite . --template react-ts',
script: 'yarn create vite@beta . --template react-ts',
expected: {
framework: '@storybook/react-vite',
renderer: '@storybook/react',
Expand All @@ -122,7 +122,7 @@ export const allTemplates: Record<string, Template> = {
},
'vue3-vite/default-js': {
name: 'Vue3 Vite (JS)',
script: 'yarn create vite . --template vue',
script: 'yarn create vite@beta . --template vue',
expected: {
framework: '@storybook/vue3-vite',
renderer: '@storybook/vue3',
Expand All @@ -131,7 +131,7 @@ export const allTemplates: Record<string, Template> = {
},
'vue3-vite/default-ts': {
name: 'Vue3 Vite (TS)',
script: 'yarn create vite . --template vue-ts',
script: 'yarn create vite@beta . --template vue-ts',
expected: {
framework: '@storybook/vue3-vite',
renderer: '@storybook/vue3',
Expand All @@ -144,7 +144,7 @@ export const allTemplates: Record<string, Template> = {
// We don't really want to maintain weird custom scripts like this,
// preferring community bootstrap scripts / generators instead.
script:
'yarn create vite . --template vanilla && yarn add --dev @vitejs/plugin-vue2 vue-template-compiler vue@2 && echo "import vue2 from \'@vitejs/plugin-vue2\';\n\nexport default {\n\tplugins: [vue2()]\n};" > vite.config.js',
'yarn create vite@beta . --template vanilla && yarn add --dev @vitejs/plugin-vue2 vue-template-compiler vue@2 && echo "import vue2 from \'@vitejs/plugin-vue2\';\n\nexport default {\n\tplugins: [vue2()]\n};" > vite.config.js',
// Re-enable once https://github.com/storybookjs/storybook/issues/19351 is fixed.
skipTasks: ['smoke-test'],
expected: {
Expand All @@ -164,7 +164,8 @@ export const allTemplates: Record<string, Template> = {
},
'html-vite/default-js': {
name: 'HTML Vite JS',
script: 'yarn create vite . --template vanilla && echo "export default {}" > vite.config.js',
script:
'yarn create vite@beta . --template vanilla && echo "export default {}" > vite.config.js',
expected: {
framework: '@storybook/html-vite',
renderer: '@storybook/html',
Expand All @@ -175,7 +176,8 @@ export const allTemplates: Record<string, Template> = {
},
'html-vite/default-ts': {
name: 'HTML Vite TS',
script: 'yarn create vite . --template vanilla-ts && echo "export default {}" > vite.config.js',
script:
'yarn create vite@beta . --template vanilla-ts && echo "export default {}" > vite.config.js',
expected: {
framework: '@storybook/html-vite',
renderer: '@storybook/html',
Expand All @@ -186,7 +188,7 @@ export const allTemplates: Record<string, Template> = {
},
'svelte-vite/default-js': {
name: 'Svelte Vite (JS)',
script: 'yarn create vite . --template svelte',
script: 'yarn create vite@beta . --template svelte',
expected: {
framework: '@storybook/svelte-vite',
renderer: '@storybook/svelte',
Expand All @@ -195,7 +197,7 @@ export const allTemplates: Record<string, Template> = {
},
'svelte-vite/default-ts': {
name: 'Svelte Vite (TS)',
script: 'yarn create vite . --template svelte-ts',
script: 'yarn create vite@beta . --template svelte-ts',
// Re-enable once https://github.com/storybookjs/storybook/issues/19351 is fixed.
skipTasks: ['smoke-test'],
expected: {
Expand Down Expand Up @@ -258,7 +260,7 @@ export const allTemplates: Record<string, Template> = {
},
'lit-vite/default-js': {
name: 'Lit Vite (JS)',
script: 'yarn create vite . --template lit',
script: 'yarn create vite@beta . --template lit',
// Re-enable once https://github.com/storybookjs/storybook/issues/19351 is fixed.
skipTasks: ['smoke-test'],
expected: {
Expand All @@ -269,7 +271,7 @@ export const allTemplates: Record<string, Template> = {
},
'lit-vite/default-ts': {
name: 'Lit Vite (TS)',
script: 'yarn create vite . --template lit-ts',
script: 'yarn create vite@beta . --template lit-ts',
// Re-enable once https://github.com/storybookjs/storybook/issues/19351 is fixed.
skipTasks: ['smoke-test'],
expected: {
Expand Down
2 changes: 1 addition & 1 deletion code/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,7 +338,7 @@
"tsup": "^6.2.2",
"typescript": "~4.9.3",
"util": "^0.12.4",
"vite": "^3.1.7",
"vite": "^4.0.0-beta.2",
"vite-plugin-turbosnap": "^1.0.1",
"wait-on": "^5.2.1",
"web-component-analyzer": "^1.1.6",
Expand Down
47 changes: 22 additions & 25 deletions code/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5893,7 +5893,7 @@ __metadata:
rollup-plugin-external-globals: ^0.7.1
slash: ^3.0.0
typescript: ~4.9.3
vite: ^3.1.3
vite: ^4.0.0-beta.2
peerDependencies:
"@preact/preset-vite": "*"
vite-plugin-glimmerx: "*"
Expand Down Expand Up @@ -6427,7 +6427,6 @@ __metadata:
"@types/node": ^16.0.0
magic-string: ^0.26.1
typescript: ~4.9.3
vite: ^3.1.0
languageName: unknown
linkType: soft

Expand Down Expand Up @@ -6992,7 +6991,7 @@ __metadata:
magic-string: ^0.26.1
react-docgen: ^6.0.0-alpha.3
typescript: ~4.9.3
vite: ^3.1.3
vite: ^4.0.0-beta.2
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
Expand Down Expand Up @@ -7287,7 +7286,7 @@ __metadata:
util: ^0.12.4
verdaccio: ^4.10.0
verdaccio-auth-memory: ^9.7.2
vite: ^3.1.7
vite: ^4.0.0-beta.2
vite-plugin-turbosnap: ^1.0.1
wait-on: ^5.2.1
web-component-analyzer: ^1.1.6
Expand Down Expand Up @@ -7441,7 +7440,7 @@ __metadata:
svelte: ^3.0.0
sveltedoc-parser: ^4.2.1
typescript: ~4.9.3
vite: ^3.1.3
vite: ^4.0.0-beta.2
peerDependencies:
"@storybook/addon-svelte-csf": ^2.0.0
react: ^16.8.0 || ^17.0.0 || ^18.0.0
Expand Down Expand Up @@ -7502,7 +7501,6 @@ __metadata:
"@storybook/svelte-vite": 7.0.0-alpha.62
"@types/node": ^16.0.0
typescript: ^4.9.3
vite: ^3.1.3
peerDependencies:
"@storybook/addon-svelte-csf": ^2.0.0
peerDependenciesMeta:
Expand Down Expand Up @@ -7607,7 +7605,7 @@ __metadata:
"@storybook/vue": 7.0.0-alpha.62
magic-string: ^0.26.1
typescript: ~4.9.3
vite: ^3.1.3
vite: ^4.0.0-beta.2
vue: ^2.7.10
vue-docgen-api: ^4.40.0
peerDependencies:
Expand Down Expand Up @@ -7653,7 +7651,7 @@ __metadata:
"@vitejs/plugin-vue": ^3.0.0
magic-string: ^0.26.1
typescript: ~4.9.3
vite: ^3.1.3
vite: ^4.0.0-beta.2
vue-docgen-api: ^4.40.0
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
Expand Down Expand Up @@ -7741,7 +7739,6 @@ __metadata:
"@types/node": ^16.0.0
magic-string: ^0.26.1
typescript: ~4.9.3
vite: ^3.1.0
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
Expand Down Expand Up @@ -26620,7 +26617,7 @@ __metadata:
languageName: node
linkType: hard

"postcss@npm:^8.1.10, postcss@npm:^8.2.14, postcss@npm:^8.2.15, postcss@npm:^8.3.7, postcss@npm:^8.4.14, postcss@npm:^8.4.18":
"postcss@npm:^8.1.10, postcss@npm:^8.2.14, postcss@npm:^8.2.15, postcss@npm:^8.3.7, postcss@npm:^8.4.14, postcss@npm:^8.4.18, postcss@npm:^8.4.19":
version: 8.4.19
resolution: "postcss@npm:8.4.19"
dependencies:
Expand Down Expand Up @@ -29154,31 +29151,31 @@ __metadata:
languageName: node
linkType: hard

"rollup@npm:^2.79.1":
version: 2.79.1
resolution: "rollup@npm:2.79.1"
"rollup@npm:^3.0.0, rollup@npm:^3.2.5":
version: 3.5.1
resolution: "rollup@npm:3.5.1"
dependencies:
fsevents: ~2.3.2
dependenciesMeta:
fsevents:
optional: true
bin:
rollup: dist/bin/rollup
checksum: 421418687f5dcd7324f4387f203c6bfc7118b7ace789e30f5da022471c43e037a76f5fd93837052754eeeae798a4fb266ac05ccee1e594406d912a59af98dde9
checksum: 6e9621f169e79df96e6c22780a579c274f5be2b8fee3d5bffe29dda989263b6800ec8b276939ce6feab46aa0f5980a71505e1f80b2552fb90c848669c61907a7
languageName: node
linkType: hard

"rollup@npm:^3.0.0, rollup@npm:^3.2.5":
version: 3.5.1
resolution: "rollup@npm:3.5.1"
"rollup@npm:^3.6.0":
version: 3.6.0
resolution: "rollup@npm:3.6.0"
dependencies:
fsevents: ~2.3.2
dependenciesMeta:
fsevents:
optional: true
bin:
rollup: dist/bin/rollup
checksum: 6e9621f169e79df96e6c22780a579c274f5be2b8fee3d5bffe29dda989263b6800ec8b276939ce6feab46aa0f5980a71505e1f80b2552fb90c848669c61907a7
checksum: cb0ac6ba2e02ec544ca4658a184255b843ea3b7d4d62266706052f93e036bb1ab9e200ccfb8716855497cf52462551774b5fd54412bd02fcd6e8d7159533f54b
languageName: node
linkType: hard

Expand Down Expand Up @@ -33174,15 +33171,15 @@ __metadata:
languageName: node
linkType: hard

"vite@npm:^3.1.0, vite@npm:^3.1.3, vite@npm:^3.1.7":
version: 3.2.4
resolution: "vite@npm:3.2.4"
"vite@npm:^4.0.0-beta.2":
version: 4.0.0-beta.2
resolution: "vite@npm:4.0.0-beta.2"
dependencies:
esbuild: ^0.15.9
esbuild: ^0.15.18
fsevents: ~2.3.2
postcss: ^8.4.18
postcss: ^8.4.19
resolve: ^1.22.1
rollup: ^2.79.1
rollup: ^3.6.0
peerDependencies:
"@types/node": ">= 14"
less: "*"
Expand All @@ -33208,7 +33205,7 @@ __metadata:
optional: true
bin:
vite: bin/vite.js
checksum: c3b6a1643e6436e4628db1fe183a3eb7db970bf8cf20104540079b9e97b6f5ce1ea33c498373f130ddee7259a96cc3f9ce96d5e43a8b23f7484e35ac8634bcc7
checksum: 8b23b39b9d4475fdb73d8a849ea3ebac79dd3d8853904bb8a7aee70704da3e2443915a43504668526ff90a6e67dd1b5abf508c6a2a7ffa3baef675ddc77a1fa0
languageName: node
linkType: hard

Expand Down