From 13d589afc5681103119e914b90f5a854477b8765 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Mon, 12 Dec 2022 23:39:20 -0500 Subject: [PATCH 1/7] Vite: Use Vite 3 (temporarily) --- code/frameworks/react-vite/package.json | 5 ++- code/frameworks/svelte-vite/package.json | 5 ++- code/frameworks/vue-vite/package.json | 3 +- code/frameworks/vue3-vite/package.json | 5 ++- code/lib/builder-vite/package.json | 5 ++- code/package.json | 2 +- code/yarn.lock | 44 ++++++++++++------------ 7 files changed, 32 insertions(+), 37 deletions(-) diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 06b8ef7463c6..c73d66e93516 100644 --- a/code/frameworks/react-vite/package.json +++ b/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", diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 62d9577fffc8..89b835e1b49f 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/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", diff --git a/code/frameworks/vue-vite/package.json b/code/frameworks/vue-vite/package.json index 7aad64f22ffb..10adf1093b6a 100644 --- a/code/frameworks/vue-vite/package.json +++ b/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": { diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 6c5d2cd50cbb..d07f68650a56 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/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", diff --git a/code/lib/builder-vite/package.json b/code/lib/builder-vite/package.json index 6836e2c1b979..10089cae497c 100644 --- a/code/lib/builder-vite/package.json +++ b/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": "*", diff --git a/code/package.json b/code/package.json index 84ff2c40417b..ef69da16f108 100644 --- a/code/package.json +++ b/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", diff --git a/code/yarn.lock b/code/yarn.lock index 5bd1237bb95a..9093292072d4 100644 --- a/code/yarn.lock +++ b/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,9 +29149,9 @@ __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: @@ -29159,13 +29159,13 @@ __metadata: 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: @@ -29173,7 +29173,7 @@ __metadata: 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 From c0ebe64b870b18a65330318a6f1c687540473174 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Mon, 12 Dec 2022 23:39:45 -0500 Subject: [PATCH 2/7] Do not add react plugin into non-react projects --- code/lib/builder-vite/src/vite-config.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/code/lib/builder-vite/src/vite-config.ts b/code/lib/builder-vite/src/vite-config.ts index 9ed95d120b80..8d9b1a2bb776 100644 --- a/code/lib/builder-vite/src/vite-config.ts +++ b/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 From eb6dd037a12a958d2616b0ead3eef5210f85c4b6 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Mon, 12 Dec 2022 23:40:19 -0500 Subject: [PATCH 3/7] Use plugin-react dependency, instead of from config --- .../builder-vite/src/plugins/mdx-plugin.ts | 24 ++++++------------- 1 file changed, 7 insertions(+), 17 deletions(-) diff --git a/code/lib/builder-vite/src/plugins/mdx-plugin.ts b/code/lib/builder-vite/src/plugins/mdx-plugin.ts index 2527921004fd..6bd26d01534e 100644 --- a/code/lib/builder-vite/src/plugins/mdx-plugin.ts +++ b/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,11 @@ 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 know these have names, and what the shape will be +const viteBabel: Plugin | undefined = reactVite().find((p) => p.name === 'vite:react-babel'); + /** * Storybook uses two different loaders when dealing with MDX: * @@ -20,28 +26,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 +53,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. From 128ae3ae540b47dc7ac325a273d5e98e9ecb3aee Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Mon, 12 Dec 2022 23:40:34 -0500 Subject: [PATCH 4/7] Re-enable react-mdx stories --- .../{react-mdx.stories.mdx.IGNORED => react-mdx.stories.mdx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename code/renderers/react/template/stories/{react-mdx.stories.mdx.IGNORED => react-mdx.stories.mdx} (100%) diff --git a/code/renderers/react/template/stories/react-mdx.stories.mdx.IGNORED b/code/renderers/react/template/stories/react-mdx.stories.mdx similarity index 100% rename from code/renderers/react/template/stories/react-mdx.stories.mdx.IGNORED rename to code/renderers/react/template/stories/react-mdx.stories.mdx From 4b179ad73f8b49232a0aac4383ff8607dbd1d956 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Tue, 13 Dec 2022 00:19:37 -0500 Subject: [PATCH 5/7] Revert "Do not add react plugin into non-react projects" This reverts commit c0ebe64b870b18a65330318a6f1c687540473174. --- code/lib/builder-vite/src/vite-config.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/code/lib/builder-vite/src/vite-config.ts b/code/lib/builder-vite/src/vite-config.ts index 8d9b1a2bb776..9ed95d120b80 100644 --- a/code/lib/builder-vite/src/vite-config.ts +++ b/code/lib/builder-vite/src/vite-config.ts @@ -7,6 +7,7 @@ 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'; @@ -94,6 +95,11 @@ 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 From fd263f8275204f04119d468130df6905fdcacb2e Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Tue, 13 Dec 2022 01:08:55 -0500 Subject: [PATCH 6/7] Prevent fast-refresh on mdx files --- code/lib/builder-vite/src/plugins/mdx-plugin.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/code/lib/builder-vite/src/plugins/mdx-plugin.ts b/code/lib/builder-vite/src/plugins/mdx-plugin.ts index 6bd26d01534e..ac16e629be22 100644 --- a/code/lib/builder-vite/src/plugins/mdx-plugin.ts +++ b/code/lib/builder-vite/src/plugins/mdx-plugin.ts @@ -14,8 +14,11 @@ 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 know these have names, and what the shape will be -const viteBabel: Plugin | undefined = reactVite().find((p) => p.name === 'vite:react-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: From e335745f7d1570c4a32b46bd45972af14d110640 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Tue, 13 Dec 2022 01:10:44 -0500 Subject: [PATCH 7/7] Revert "Revert "Do not add react plugin into non-react projects"" This reverts commit 4b179ad73f8b49232a0aac4383ff8607dbd1d956. --- code/lib/builder-vite/src/vite-config.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/code/lib/builder-vite/src/vite-config.ts b/code/lib/builder-vite/src/vite-config.ts index 9ed95d120b80..8d9b1a2bb776 100644 --- a/code/lib/builder-vite/src/vite-config.ts +++ b/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