Merge pull request #25427 from storybookjs/kasper/remove-vite-plugins

Core: Remove vite plugins and drop Vite 3 support

MIGRATION.md

@@ -1,6 +1,7 @@
 <h1>Migration</h1>
 
 - [From version 7.x to 8.0.0](#from-version-7x-to-800)
+  - [Framework specific vite plugins have to be explicitly added](#framework-specific-vite-plugins-have-to-be-explicitly-added)  
   - [Implicit actions can not be used during rendering (for example in the play function)](#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function)
   - [Core changes](#core-changes)
     - [Dropping support for Node.js 16](#dropping-support-for-nodejs-16)
@@ -338,6 +339,21 @@
 
 ## From version 7.x to 8.0.0
 
+### Framework-specific Vite plugins have to be explicitly added
+
+In Storybook 7, we would automatically add frameworks-specific Vite plugins, e.g. `@vitejs/plugin-react` if not installed.
+In Storybook 8 those plugins have to be added explicitly in the user's `vite.config.ts`:
+
+```ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});
+```
+
 ### Implicit actions can not be used during rendering (for example in the play function)
 
 In Storybook 7, we inferred if the component accepts any action props,

code/builders/builder-vite/package.json

@@ -57,22 +57,20 @@
     "express": "^4.17.3",
     "find-cache-dir": "^3.0.0",
     "fs-extra": "^11.1.0",
-    "magic-string": "^0.30.0",
-    "rollup": "^2.25.0 || ^3.3.0"
+    "magic-string": "^0.30.0"
   },
   "devDependencies": {
     "@types/express": "^4.17.13",
     "@types/node": "^18.0.0",
     "glob": "^10.0.0",
-    "rollup": "^3.20.1",
     "slash": "^5.0.0",
     "typescript": "^5.3.2",
     "vite": "^4.0.4"
   },
   "peerDependencies": {
     "@preact/preset-vite": "*",
     "typescript": ">= 4.3.x",
-    "vite": "^3.0.0 || ^4.0.0 || ^5.0.0",
+    "vite": "^4.0.0 || ^5.0.0",
     "vite-plugin-glimmerx": "*"
   },
   "peerDependenciesMeta": {

code/frameworks/preact-vite/package.json

@@ -47,7 +47,6 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@preact/preset-vite": "^2.0.0",
     "@storybook/builder-vite": "workspace:*",
     "@storybook/preact": "workspace:*"
   },
@@ -58,7 +57,7 @@
   },
   "peerDependencies": {
     "preact": ">=10",
-    "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
+    "vite": "^4.0.0 || ^5.0.0"
   },
   "engines": {
     "node": ">=16"

code/frameworks/preact-vite/src/preset.ts

@@ -1,6 +1,4 @@
-import { hasVitePlugins } from '@storybook/builder-vite';
 import type { PresetProperty } from '@storybook/types';
-import preact from '@preact/preset-vite';
 import { dirname, join } from 'path';
 import type { StorybookConfig } from './types';
 
@@ -13,14 +11,6 @@ export const core: PresetProperty<'core', StorybookConfig> = {
 };
 
 export const viteFinal: StorybookConfig['viteFinal'] = async (config) => {
-  const { plugins = [] } = config;
-
-  // Add Preact plugin if not present
-  if (!(await hasVitePlugins(plugins, ['vite:preact-jsx']))) {
-    plugins.push(preact());
-  }
-
   // TODO: Add docgen plugin per issue https://github.com/storybookjs/storybook/issues/19739
-
   return config;
 };

code/frameworks/react-vite/package.json

@@ -51,7 +51,6 @@
     "@rollup/pluginutils": "^5.0.2",
     "@storybook/builder-vite": "workspace:*",
     "@storybook/react": "workspace:*",
-    "@vitejs/plugin-react": "^3.0.1",
     "magic-string": "^0.30.0",
     "react-docgen": "^7.0.0"
   },
@@ -63,7 +62,7 @@
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
+    "vite": "^4.0.0 || ^5.0.0"
   },
   "engines": {
     "node": ">=16"

code/frameworks/react-vite/src/preset.ts

@@ -1,6 +1,5 @@
 /* eslint-disable global-require */
 import type { PresetProperty } from '@storybook/types';
-import { hasVitePlugins } from '@storybook/builder-vite';
 import { dirname, join } from 'path';
 import type { StorybookConfig } from './types';
 
@@ -15,12 +14,6 @@ export const core: PresetProperty<'core', StorybookConfig> = {
 export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => {
   const { plugins = [] } = config;
 
-  // Add react plugin if not present
-  if (!(await hasVitePlugins(plugins, ['vite:react-babel', 'vite:react-swc']))) {
-    const { default: react } = await import('@vitejs/plugin-react');
-    plugins.push(react());
-  }
-
   // Add docgen plugin
   const { reactDocgen: reactDocgenOption, reactDocgenTypescriptOptions } = await presets.apply<any>(
     'typescript',

code/frameworks/svelte-vite/package.json

@@ -50,21 +50,22 @@
     "@storybook/builder-vite": "workspace:*",
     "@storybook/node-logger": "workspace:*",
     "@storybook/svelte": "workspace:*",
-    "@sveltejs/vite-plugin-svelte": "^2.4.2",
     "magic-string": "^0.30.0",
     "svelte-preprocess": "^5.1.1",
     "sveltedoc-parser": "^4.2.1",
     "ts-dedent": "^2.2.0"
   },
   "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "@types/node": "^18.0.0",
     "svelte": "^5.0.0-next.16",
     "typescript": "^5.3.2",
     "vite": "^4.0.0"
   },
   "peerDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^2.0.0 || ^3.0.0",
     "svelte": "^4.0.0 || ^5.0.0-next.16",
-    "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
+    "vite": "^4.0.0 || ^5.0.0"
   },
   "engines": {
     "node": "^14.18 || >=16"

code/frameworks/svelte-vite/src/preset.ts

@@ -1,4 +1,3 @@
-import { hasVitePlugins } from '@storybook/builder-vite';
 import type { PresetProperty } from '@storybook/types';
 import { dirname, join } from 'path';
 import type { StorybookConfig } from './types';
@@ -17,14 +16,9 @@ export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (confi
   const { plugins = [] } = config;
   // TODO: set up eslint import to use typescript resolver
   // eslint-disable-next-line import/no-unresolved
-  const { svelte, loadSvelteConfig } = await import('@sveltejs/vite-plugin-svelte');
+  const { loadSvelteConfig } = await import('@sveltejs/vite-plugin-svelte');
   const svelteConfig = await loadSvelteConfig();
 
-  // Add svelte plugin if the user does not have a Vite config of their own
-  if (!(await hasVitePlugins(plugins, ['vite-plugin-svelte']))) {
-    plugins.push(svelte());
-  }
-
   // Add docgen plugin
   plugins.push(svelteDocgen(svelteConfig));
 

code/frameworks/vue3-vite/package.json

@@ -50,7 +50,6 @@
     "@storybook/builder-vite": "workspace:*",
     "@storybook/core-server": "workspace:*",
     "@storybook/vue3": "workspace:*",
-    "@vitejs/plugin-vue": "^4.0.0",
     "magic-string": "^0.30.0",
     "vue-docgen-api": "^4.40.0"
   },
@@ -60,7 +59,7 @@
     "vite": "^4.0.0"
   },
   "peerDependencies": {
-    "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
+    "vite": "^4.0.0 || ^5.0.0"
   },
   "engines": {
     "node": "^14.18 || >=16"

code/frameworks/vue3-vite/src/preset.ts

@@ -1,4 +1,3 @@
-import { hasVitePlugins } from '@storybook/builder-vite';
 import type { PresetProperty } from '@storybook/types';
 import { mergeConfig, type PluginOption } from 'vite';
 import { dirname, join } from 'path';
@@ -16,12 +15,6 @@ export const core: PresetProperty<'core'> = {
 export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => {
   const plugins: PluginOption[] = [];
 
-  // Add vue plugin if not present
-  if (!(config.plugins && (await hasVitePlugins(config.plugins, ['vite:vue'])))) {
-    const { default: vue } = await import('@vitejs/plugin-vue');
-    plugins.push(vue());
-  }
-
   // Add docgen plugin
   plugins.push(vueDocgen());