Vite: Use Vite 3 (temporarily)

code/frameworks/react-vite/package.json

@@ -59,12 +59,11 @@
     "ast-types": "^0.14.2",
     "magic-string": "^0.26.1",
     "react-docgen": "^6.0.0-alpha.3",
-    "vite": "^3.0.0||^4.0.0"
+    "vite": "^3.0.0"
   },
   "devDependencies": {
     "@types/node": "^16.0.0",
-    "typescript": "~4.9.3",
-    "vite": "^4.0.0-beta.2"
+    "typescript": "~4.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",

code/frameworks/svelte-vite/package.json

@@ -60,12 +60,11 @@
     "svelte": "^3.0.0",
     "sveltedoc-parser": "^4.2.1",
     "ts-dedent": "^2.2.0",
-    "vite": "^3.0.0||^4.0.0"
+    "vite": "^3.0.0"
   },
   "devDependencies": {
     "@types/node": "^16.0.0",
-    "typescript": "~4.9.3",
-    "vite": "^4.0.0-beta.2"
+    "typescript": "~4.9.3"
   },
   "peerDependencies": {
     "@storybook/addon-svelte-csf": "^2.0.0",

code/frameworks/vue-vite/package.json

@@ -55,12 +55,11 @@
     "@storybook/core-server": "7.0.0-beta.4",
     "@storybook/vue": "7.0.0-beta.4",
     "magic-string": "^0.26.1",
-    "vite": "^3.0.0||^4.0.0",
+    "vite": "^3.0.0",
     "vue-docgen-api": "^4.40.0"
   },
   "devDependencies": {
     "typescript": "~4.9.3",
-    "vite": "^4.0.0-beta.2",
     "vue": "^2.7.10"
   },
   "peerDependencies": {

code/frameworks/vue3-vite/package.json

@@ -56,13 +56,12 @@
     "@storybook/vue3": "7.0.0-beta.4",
     "@vitejs/plugin-vue": "^3.0.0",
     "magic-string": "^0.26.1",
-    "vite": "^3.0.0||^4.0.0",
+    "vite": "^3.0.0",
     "vue-docgen-api": "^4.40.0"
   },
   "devDependencies": {
     "@types/node": "^16.0.0",
-    "typescript": "~4.9.3",
-    "vite": "^4.0.0-beta.2"
+    "typescript": "~4.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",

code/lib/builder-vite/package.json

@@ -61,14 +61,13 @@
     "rollup": "^2.25.0 || ^3.3.0",
     "rollup-plugin-external-globals": "^0.7.1",
     "slash": "^3.0.0",
-    "vite": "^3.0.0||^4.0.0"
+    "vite": "^3.0.0"
   },
   "devDependencies": {
     "@types/express": "^4.17.13",
     "@types/node": "^16.0.0",
     "rollup": "^3.0.0",
-    "typescript": "~4.9.3",
-    "vite": "^4.0.0-beta.2"
+    "typescript": "~4.9.3"
   },
   "peerDependencies": {
     "@preact/preset-vite": "*",

code/lib/builder-vite/src/plugins/mdx-plugin.ts

@@ -1,6 +1,7 @@
 import type { Options } from '@storybook/types';
 import type { Plugin } from 'vite';
 import { createFilter } from 'vite';
+import reactVite from '@vitejs/plugin-react';
 
 const isStorybookMdx = (id: string) => id.endsWith('stories.mdx') || id.endsWith('story.mdx');
 
@@ -11,6 +12,14 @@ function injectRenderer(code: string) {
            `;
 }
 
+// HACK: find a better way to do this, ideally avoiding @vitejs/plugin-react entirely.
+// We're just using it to run the mdx with jsx through babel
+// @ts-expect-error We're forcing the plugin shape here
+const viteBabel: Plugin | undefined = reactVite({ fastRefresh: false }).find(
+  // @ts-expect-error we know these have names, and what the shape will be
+  (p) => p.name === 'vite:react-babel'
+);
+
 /**
  * Storybook uses two different loaders when dealing with MDX:
  *
@@ -20,28 +29,12 @@ function injectRenderer(code: string) {
  * @see https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#csf-stories-with-arbitrary-mdx
  */
 export function mdxPlugin(options: Options): Plugin {
-  let reactRefresh: Plugin | undefined;
   const include = /\.mdx?$/;
   const filter = createFilter(include);
 
   return {
     name: 'storybook:mdx-plugin',
     enforce: 'pre',
-    configResolved({ plugins }) {
-      // @vitejs/plugin-react-refresh has been upgraded to @vitejs/plugin-react,
-      // and the name of the plugin performing `transform` has been changed from 'react-refresh' to 'vite:react-babel',
-      // to be compatible, we need to look for both plugin name.
-      // We should also look for the other plugins names exported from @vitejs/plugin-react in case there are some internal refactors.
-      const reactRefreshPlugins = plugins.filter(
-        (p) =>
-          p.name === 'react-refresh' ||
-          p.name === 'vite:react-babel' ||
-          p.name === 'vite:react-refresh' ||
-          p.name === 'vite:react-jsx'
-      );
-      reactRefresh = reactRefreshPlugins.find((p) => p.transform);
-    },
-
     async transform(src, id, transformOptions) {
       if (!filter(id)) return undefined;
 
@@ -63,7 +56,7 @@ export function mdxPlugin(options: Options): Plugin {
       const modifiedCode = injectRenderer(mdxCode);
 
       // Hooks in recent rollup versions can be functions or objects, and though react hasn't changed, the typescript defs have
-      const rTransform = reactRefresh?.transform;
+      const rTransform = viteBabel?.transform;
       const transform = rTransform && 'handler' in rTransform ? rTransform.handler : rTransform;
 
       // It's safe to disable this, because we know it'll be there, since we added it ourselves.

code/lib/builder-vite/src/vite-config.ts

@@ -7,7 +7,6 @@ import type {
   UserConfig as ViteConfig,
   InlineConfig,
 } from 'vite';
-import viteReact from '@vitejs/plugin-react';
 import externalGlobals from 'rollup-plugin-external-globals';
 import { isPreservingSymlinks, getFrameworkName } from '@storybook/core-common';
 import { globals } from '@storybook/preview/globals';
@@ -95,11 +94,6 @@ export async function pluginConfig(options: ExtendedOptions) {
     externalGlobals(globals),
   ] as PluginOption[];
 
-  // We need the react plugin here to support MDX in non-react projects.
-  if (frameworkName !== '@storybook/react-vite') {
-    plugins.push(viteReact({ exclude: [/\.stories\.([tj])sx?$/, /node_modules/, /\.([tj])sx?$/] }));
-  }
-
   // TODO: framework doesn't exist, should move into framework when/if built
   if (frameworkName === '@storybook/preact-vite') {
     // eslint-disable-next-line global-require

code/package.json

@@ -338,7 +338,7 @@
     "tsup": "^6.2.2",
     "typescript": "~4.9.3",
     "util": "^0.12.4",
-    "vite": "^4.0.0-beta.2",
+    "vite": "^3.0.0",
     "vite-plugin-turbosnap": "^1.0.1",
     "wait-on": "^5.2.1",
     "web-component-analyzer": "^1.1.6",

code/yarn.lock

@@ -5893,7 +5893,7 @@ __metadata:
     rollup-plugin-external-globals: ^0.7.1
     slash: ^3.0.0
     typescript: ~4.9.3
-    vite: ^4.0.0-beta.2
+    vite: ^3.0.0
   peerDependencies:
     "@preact/preset-vite": "*"
     vite-plugin-glimmerx: "*"
@@ -6991,7 +6991,7 @@ __metadata:
     magic-string: ^0.26.1
     react-docgen: ^6.0.0-alpha.3
     typescript: ~4.9.3
-    vite: ^4.0.0-beta.2
+    vite: ^3.0.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -7286,7 +7286,7 @@ __metadata:
     util: ^0.12.4
     verdaccio: ^4.10.0
     verdaccio-auth-memory: ^9.7.2
-    vite: ^4.0.0-beta.2
+    vite: ^3.0.0
     vite-plugin-turbosnap: ^1.0.1
     wait-on: ^5.2.1
     web-component-analyzer: ^1.1.6
@@ -7441,7 +7441,7 @@ __metadata:
     sveltedoc-parser: ^4.2.1
     ts-dedent: ^2.2.0
     typescript: ~4.9.3
-    vite: ^4.0.0-beta.2
+    vite: ^3.0.0
   peerDependencies:
     "@storybook/addon-svelte-csf": ^2.0.0
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -7607,7 +7607,7 @@ __metadata:
     "@storybook/vue": 7.0.0-beta.4
     magic-string: ^0.26.1
     typescript: ~4.9.3
-    vite: ^4.0.0-beta.2
+    vite: ^3.0.0
     vue: ^2.7.10
     vue-docgen-api: ^4.40.0
   peerDependencies:
@@ -7653,7 +7653,7 @@ __metadata:
     "@vitejs/plugin-vue": ^3.0.0
     magic-string: ^0.26.1
     typescript: ~4.9.3
-    vite: ^4.0.0-beta.2
+    vite: ^3.0.0
     vue-docgen-api: ^4.40.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -26615,7 +26615,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.4.19":
+"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":
   version: 8.4.19
   resolution: "postcss@npm:8.4.19"
   dependencies:
@@ -29149,31 +29149,31 @@ __metadata:
   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:^2.79.1":
+  version: 2.79.1
+  resolution: "rollup@npm:2.79.1"
   dependencies:
     fsevents: ~2.3.2
   dependenciesMeta:
     fsevents:
       optional: true
   bin:
     rollup: dist/bin/rollup
-  checksum: 6e9621f169e79df96e6c22780a579c274f5be2b8fee3d5bffe29dda989263b6800ec8b276939ce6feab46aa0f5980a71505e1f80b2552fb90c848669c61907a7
+  checksum: 421418687f5dcd7324f4387f203c6bfc7118b7ace789e30f5da022471c43e037a76f5fd93837052754eeeae798a4fb266ac05ccee1e594406d912a59af98dde9
   languageName: node
   linkType: hard
 
-"rollup@npm:^3.6.0":
-  version: 3.6.0
-  resolution: "rollup@npm:3.6.0"
+"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: cb0ac6ba2e02ec544ca4658a184255b843ea3b7d4d62266706052f93e036bb1ab9e200ccfb8716855497cf52462551774b5fd54412bd02fcd6e8d7159533f54b
+  checksum: 6e9621f169e79df96e6c22780a579c274f5be2b8fee3d5bffe29dda989263b6800ec8b276939ce6feab46aa0f5980a71505e1f80b2552fb90c848669c61907a7
   languageName: node
   linkType: hard
 
@@ -33169,15 +33169,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite@npm:^4.0.0-beta.2":
-  version: 4.0.0-beta.2
-  resolution: "vite@npm:4.0.0-beta.2"
+"vite@npm:^3.0.0":
+  version: 3.2.5
+  resolution: "vite@npm:3.2.5"
   dependencies:
-    esbuild: ^0.15.18
+    esbuild: ^0.15.9
     fsevents: ~2.3.2
-    postcss: ^8.4.19
+    postcss: ^8.4.18
     resolve: ^1.22.1
-    rollup: ^3.6.0
+    rollup: ^2.79.1
   peerDependencies:
     "@types/node": ">= 14"
     less: "*"
@@ -33203,7 +33203,7 @@ __metadata:
       optional: true
   bin:
     vite: bin/vite.js
-  checksum: 8b23b39b9d4475fdb73d8a849ea3ebac79dd3d8853904bb8a7aee70704da3e2443915a43504668526ff90a6e67dd1b5abf508c6a2a7ffa3baef675ddc77a1fa0
+  checksum: 108efc1086b4913185864d87ab05f1cec847275e254c552c537415fd19093c77cc5155c17829d735855c9b073c55c67c4d4fe1b93e1d66b08f13cbd5a17f5a68
   languageName: node
   linkType: hard