From 65bca16b96be937046dfbe4c08ecadae37ec929e Mon Sep 17 00:00:00 2001 From: Bryan Thomas <49354825+bryanjtc@users.noreply.github.com> Date: Wed, 13 Sep 2023 04:35:35 -0500 Subject: [PATCH 01/10] fix(builder-vite): Fix missing @storybook/addon-docs dependency --- code/builders/builder-vite/package.json | 1 + code/yarn.lock | 1 + 2 files changed, 2 insertions(+) diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index e0317dc2b45b..efbff1c6c6f0 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -43,6 +43,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { + "@storybook/addon-docs": "workspace:*", "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-common": "workspace:*", diff --git a/code/yarn.lock b/code/yarn.lock index 4ba4e1ab6559..8303f28125d3 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6526,6 +6526,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/builder-vite@workspace:builders/builder-vite" dependencies: + "@storybook/addon-docs": "workspace:*" "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" From fe6f5d7ac5177fdd3aa8a30e72510f34f3553937 Mon Sep 17 00:00:00 2001 From: Bryan Thomas <49354825+bryanjtc@users.noreply.github.com> Date: Thu, 14 Sep 2023 12:09:17 -0500 Subject: [PATCH 02/10] Move mdx plugin from builder-vite to addon-docs --- code/addons/docs/package.json | 3 ++- .../docs}/src/plugins/mdx-plugin.ts | 6 +----- .../docs}/src/plugins/mdx-plugin.types.d.ts | 0 code/addons/docs/src/preset.ts | 9 +++++++++ code/builders/builder-vite/package.json | 7 ------- code/builders/builder-vite/src/plugins/index.ts | 1 - code/builders/builder-vite/src/vite-config.ts | 2 -- code/yarn.lock | 5 +---- 8 files changed, 13 insertions(+), 20 deletions(-) rename code/{builders/builder-vite => addons/docs}/src/plugins/mdx-plugin.ts (89%) rename code/{builders/builder-vite => addons/docs}/src/plugins/mdx-plugin.types.d.ts (100%) diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index ac17aa3ca0f8..d47e7e290529 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -121,7 +121,8 @@ "devDependencies": { "react": "^16.14.0", "react-dom": "^16.8.0", - "typescript": "~4.9.3" + "typescript": "~4.9.3", + "vite": "^4.0.4" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", diff --git a/code/builders/builder-vite/src/plugins/mdx-plugin.ts b/code/addons/docs/src/plugins/mdx-plugin.ts similarity index 89% rename from code/builders/builder-vite/src/plugins/mdx-plugin.ts rename to code/addons/docs/src/plugins/mdx-plugin.ts index 8e4b51f16d6e..abe82237c87c 100644 --- a/code/builders/builder-vite/src/plugins/mdx-plugin.ts +++ b/code/addons/docs/src/plugins/mdx-plugin.ts @@ -3,7 +3,6 @@ import type { Plugin } from 'vite'; import remarkSlug from 'remark-slug'; import remarkExternalLinks from 'remark-external-links'; import { createFilter } from 'vite'; -import { dirname, join } from 'path'; const isStorybookMdx = (id: string) => id.endsWith('stories.mdx') || id.endsWith('story.mdx'); @@ -34,10 +33,7 @@ export async function mdxPlugin(options: Options): Promise { const mdxLoaderOptions = await options.presets.apply('mdxLoaderOptions', { ...mdxPluginOptions, mdxCompileOptions: { - providerImportSource: join( - dirname(require.resolve('@storybook/addon-docs/package.json')), - '/dist/shims/mdx-react-shim' - ), + providerImportSource: require.resolve('@storybook/mdx2-csf'), ...mdxPluginOptions?.mdxCompileOptions, remarkPlugins: [remarkSlug, remarkExternalLinks].concat( mdxPluginOptions?.mdxCompileOptions?.remarkPlugins ?? [] diff --git a/code/builders/builder-vite/src/plugins/mdx-plugin.types.d.ts b/code/addons/docs/src/plugins/mdx-plugin.types.d.ts similarity index 100% rename from code/builders/builder-vite/src/plugins/mdx-plugin.types.d.ts rename to code/addons/docs/src/plugins/mdx-plugin.types.d.ts diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index 2adfe2e0e2b5..e93d405107c7 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -11,6 +11,7 @@ import { global } from '@storybook/global'; import { loadCsf } from '@storybook/csf-tools'; import { logger } from '@storybook/node-logger'; import { ensureReactPeerDeps } from './ensure-react-peer-deps'; +import { mdxPlugin } from './plugins/mdx-plugin'; async function webpack( webpackConfig: any = {}, @@ -175,6 +176,14 @@ export const addons: StorybookConfig['addons'] = [ require.resolve('@storybook/react-dom-shim/dist/preset'), ]; +export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets, features }) => { + const { plugins = [] } = config; + + plugins.push(mdxPlugin({ presets, features })); + + return config; +}; + /* * This is a workaround for https://github.com/Swatinem/rollup-plugin-dts/issues/162 * something down the dependency chain is using typescript namespaces, which are not supported by rollup-plugin-dts diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index efbff1c6c6f0..cfe95805b7b8 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -43,12 +43,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addon-docs": "workspace:*", "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/csf-plugin": "workspace:*", - "@storybook/mdx2-csf": "^1.0.0", "@storybook/node-logger": "workspace:*", "@storybook/preview": "workspace:*", "@storybook/preview-api": "workspace:*", @@ -60,8 +58,6 @@ "find-cache-dir": "^3.0.0", "fs-extra": "^11.1.0", "magic-string": "^0.30.0", - "remark-external-links": "^8.0.0", - "remark-slug": "^6.0.0", "rollup": "^2.25.0 || ^3.3.0" }, "devDependencies": { @@ -97,9 +93,6 @@ "entries": [ "./src/index.ts" ], - "externals": [ - "@storybook/mdx1-csf" - ], "platform": "node" }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" diff --git a/code/builders/builder-vite/src/plugins/index.ts b/code/builders/builder-vite/src/plugins/index.ts index bccebbdb4833..68e540908dc6 100644 --- a/code/builders/builder-vite/src/plugins/index.ts +++ b/code/builders/builder-vite/src/plugins/index.ts @@ -1,5 +1,4 @@ export * from './inject-export-order-plugin'; -export * from './mdx-plugin'; export * from './strip-story-hmr-boundaries'; export * from './code-generator-plugin'; export * from './csf-plugin'; diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts index a832f2e92a96..75778971b26a 100644 --- a/code/builders/builder-vite/src/vite-config.ts +++ b/code/builders/builder-vite/src/vite-config.ts @@ -15,7 +15,6 @@ import { codeGeneratorPlugin, csfPlugin, injectExportOrderPlugin, - mdxPlugin, stripStoryHMRBoundary, externalGlobalsPlugin, } from './plugins'; @@ -81,7 +80,6 @@ export async function pluginConfig(options: Options) { const plugins = [ codeGeneratorPlugin(options), await csfPlugin(options), - await mdxPlugin(options), injectExportOrderPlugin, stripStoryHMRBoundary(), { diff --git a/code/yarn.lock b/code/yarn.lock index 8303f28125d3..5e009a321010 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5925,6 +5925,7 @@ __metadata: remark-slug: ^6.0.0 ts-dedent: ^2.0.0 typescript: ~4.9.3 + vite: ^4.0.4 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -6526,12 +6527,10 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/builder-vite@workspace:builders/builder-vite" dependencies: - "@storybook/addon-docs": "workspace:*" "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/csf-plugin": "workspace:*" - "@storybook/mdx2-csf": ^1.0.0 "@storybook/node-logger": "workspace:*" "@storybook/preview": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -6546,8 +6545,6 @@ __metadata: fs-extra: ^11.1.0 glob: ^10.0.0 magic-string: ^0.30.0 - remark-external-links: ^8.0.0 - remark-slug: ^6.0.0 rollup: ^3.20.1 slash: ^5.0.0 typescript: ~4.9.3 From d8a0049bbadf07df846cdd30db7059c3510f001c Mon Sep 17 00:00:00 2001 From: Bryan Thomas <49354825+bryanjtc@users.noreply.github.com> Date: Thu, 14 Sep 2023 12:16:16 -0500 Subject: [PATCH 03/10] Await mdxPlugin --- code/addons/docs/src/preset.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index e93d405107c7..d0c6d7658784 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -179,7 +179,7 @@ export const addons: StorybookConfig['addons'] = [ export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets, features }) => { const { plugins = [] } = config; - plugins.push(mdxPlugin({ presets, features })); + plugins.push(await mdxPlugin({ presets, features })); return config; }; From 3acfceb6d336e0640851ea32e0a582f45d0204ff Mon Sep 17 00:00:00 2001 From: Bryan Thomas <49354825+bryanjtc@users.noreply.github.com> Date: Thu, 14 Sep 2023 12:29:51 -0500 Subject: [PATCH 04/10] Replace createFilter import from vite with @rollup/pluginutils --- code/addons/docs/package.json | 1 + code/addons/docs/src/plugins/mdx-plugin.ts | 2 +- code/yarn.lock | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index d47e7e290529..5bd40d570777 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -100,6 +100,7 @@ "dependencies": { "@jest/transform": "^29.3.1", "@mdx-js/react": "^2.1.5", + "@rollup/pluginutils": "^5.0.2", "@storybook/blocks": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", diff --git a/code/addons/docs/src/plugins/mdx-plugin.ts b/code/addons/docs/src/plugins/mdx-plugin.ts index abe82237c87c..d49e86822eb2 100644 --- a/code/addons/docs/src/plugins/mdx-plugin.ts +++ b/code/addons/docs/src/plugins/mdx-plugin.ts @@ -2,7 +2,7 @@ import type { Options } from '@storybook/types'; import type { Plugin } from 'vite'; import remarkSlug from 'remark-slug'; import remarkExternalLinks from 'remark-external-links'; -import { createFilter } from 'vite'; +import { createFilter } from '@rollup/pluginutils'; const isStorybookMdx = (id: string) => id.endsWith('stories.mdx') || id.endsWith('story.mdx'); diff --git a/code/yarn.lock b/code/yarn.lock index 5e009a321010..54dd68750142 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5905,6 +5905,7 @@ __metadata: dependencies: "@jest/transform": ^29.3.1 "@mdx-js/react": ^2.1.5 + "@rollup/pluginutils": ^5.0.2 "@storybook/blocks": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" From 39fa07119464cb5f896bc9c9ce3d1aee666af4ce Mon Sep 17 00:00:00 2001 From: Bryan Thomas <49354825+bryanjtc@users.noreply.github.com> Date: Thu, 14 Sep 2023 12:45:46 -0500 Subject: [PATCH 05/10] Use StorybookConfig type from @storybook/builder-vite --- code/addons/docs/package.json | 1 + code/addons/docs/src/preset.ts | 6 +++++- code/yarn.lock | 1 + 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 5bd40d570777..535e1a3302d8 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -120,6 +120,7 @@ "ts-dedent": "^2.0.0" }, "devDependencies": { + "@storybook/builder-vite": "workspace:*", "react": "^16.14.0", "react-dom": "^16.8.0", "typescript": "~4.9.3", diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index d0c6d7658784..48c88927b159 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -7,6 +7,7 @@ import { dedent } from 'ts-dedent'; import type { DocsOptions, Indexer, Options, StorybookConfig } from '@storybook/types'; import type { CsfPluginOptions } from '@storybook/csf-plugin'; import type { JSXOptions, CompileOptions } from '@storybook/mdx2-csf'; +import type { StorybookConfigVite } from '@storybook/builder-vite'; import { global } from '@storybook/global'; import { loadCsf } from '@storybook/csf-tools'; import { logger } from '@storybook/node-logger'; @@ -176,7 +177,10 @@ export const addons: StorybookConfig['addons'] = [ require.resolve('@storybook/react-dom-shim/dist/preset'), ]; -export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets, features }) => { +export const viteFinal: StorybookConfigVite['viteFinal'] = async ( + config, + { presets, features } +) => { const { plugins = [] } = config; plugins.push(await mdxPlugin({ presets, features })); diff --git a/code/yarn.lock b/code/yarn.lock index 54dd68750142..ac77c33181cd 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5907,6 +5907,7 @@ __metadata: "@mdx-js/react": ^2.1.5 "@rollup/pluginutils": ^5.0.2 "@storybook/blocks": "workspace:*" + "@storybook/builder-vite": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/csf-plugin": "workspace:*" From ab089d4e8a5c653cd9e0401663980623f5e41252 Mon Sep 17 00:00:00 2001 From: Bryan Thomas <49354825+bryanjtc@users.noreply.github.com> Date: Thu, 14 Sep 2023 13:07:51 -0500 Subject: [PATCH 06/10] Replace parameter for mdxPlugin --- code/addons/docs/src/preset.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index 48c88927b159..c73528bc04de 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -177,13 +177,10 @@ export const addons: StorybookConfig['addons'] = [ require.resolve('@storybook/react-dom-shim/dist/preset'), ]; -export const viteFinal: StorybookConfigVite['viteFinal'] = async ( - config, - { presets, features } -) => { +export const viteFinal: StorybookConfigVite['viteFinal'] = async (config, ...options) => { const { plugins = [] } = config; - plugins.push(await mdxPlugin({ presets, features })); + plugins.push(await mdxPlugin(...options)); return config; }; From aabf48e5a873cb61ebb1b426b0c91eda855d3a44 Mon Sep 17 00:00:00 2001 From: Bryan Thomas <49354825+bryanjtc@users.noreply.github.com> Date: Thu, 14 Sep 2023 13:26:13 -0500 Subject: [PATCH 07/10] Move mdxPlugin import --- code/addons/docs/src/preset.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index c73528bc04de..0d2f25bdd19b 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -12,7 +12,6 @@ import { global } from '@storybook/global'; import { loadCsf } from '@storybook/csf-tools'; import { logger } from '@storybook/node-logger'; import { ensureReactPeerDeps } from './ensure-react-peer-deps'; -import { mdxPlugin } from './plugins/mdx-plugin'; async function webpack( webpackConfig: any = {}, @@ -179,8 +178,9 @@ export const addons: StorybookConfig['addons'] = [ export const viteFinal: StorybookConfigVite['viteFinal'] = async (config, ...options) => { const { plugins = [] } = config; + const { mdxPlugin } = await import('./plugins/mdx-plugin'); - plugins.push(await mdxPlugin(...options)); + plugins.push(mdxPlugin(...options)); return config; }; From fc7fc7f1a488538b9621f6c12c46e8a38a8e8d90 Mon Sep 17 00:00:00 2001 From: Bryan Thomas <49354825+bryanjtc@users.noreply.github.com> Date: Thu, 14 Sep 2023 15:06:15 -0500 Subject: [PATCH 08/10] Replace types in viteFinal to fix error --- code/addons/docs/package.json | 1 - code/addons/docs/src/preset.ts | 5 ++--- code/yarn.lock | 1 - 3 files changed, 2 insertions(+), 5 deletions(-) diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 535e1a3302d8..5bd40d570777 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -120,7 +120,6 @@ "ts-dedent": "^2.0.0" }, "devDependencies": { - "@storybook/builder-vite": "workspace:*", "react": "^16.14.0", "react-dom": "^16.8.0", "typescript": "~4.9.3", diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index 0d2f25bdd19b..22b5834c9e9a 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -7,7 +7,6 @@ import { dedent } from 'ts-dedent'; import type { DocsOptions, Indexer, Options, StorybookConfig } from '@storybook/types'; import type { CsfPluginOptions } from '@storybook/csf-plugin'; import type { JSXOptions, CompileOptions } from '@storybook/mdx2-csf'; -import type { StorybookConfigVite } from '@storybook/builder-vite'; import { global } from '@storybook/global'; import { loadCsf } from '@storybook/csf-tools'; import { logger } from '@storybook/node-logger'; @@ -176,11 +175,11 @@ export const addons: StorybookConfig['addons'] = [ require.resolve('@storybook/react-dom-shim/dist/preset'), ]; -export const viteFinal: StorybookConfigVite['viteFinal'] = async (config, ...options) => { +export const viteFinal = async (config: any, options: Options) => { const { plugins = [] } = config; const { mdxPlugin } = await import('./plugins/mdx-plugin'); - plugins.push(mdxPlugin(...options)); + plugins.push(mdxPlugin(options)); return config; }; diff --git a/code/yarn.lock b/code/yarn.lock index ac77c33181cd..54dd68750142 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5907,7 +5907,6 @@ __metadata: "@mdx-js/react": ^2.1.5 "@rollup/pluginutils": ^5.0.2 "@storybook/blocks": "workspace:*" - "@storybook/builder-vite": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/csf-plugin": "workspace:*" From 7758e8f5ff518ccc35d912b1719062156b5f1f7a Mon Sep 17 00:00:00 2001 From: Bryan Thomas <49354825+bryanjtc@users.noreply.github.com> Date: Mon, 18 Sep 2023 07:49:38 -0500 Subject: [PATCH 09/10] Keep the previous providerImportSource value --- code/addons/docs/src/plugins/mdx-plugin.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/code/addons/docs/src/plugins/mdx-plugin.ts b/code/addons/docs/src/plugins/mdx-plugin.ts index d49e86822eb2..82f754fd3cd8 100644 --- a/code/addons/docs/src/plugins/mdx-plugin.ts +++ b/code/addons/docs/src/plugins/mdx-plugin.ts @@ -3,6 +3,7 @@ import type { Plugin } from 'vite'; import remarkSlug from 'remark-slug'; import remarkExternalLinks from 'remark-external-links'; import { createFilter } from '@rollup/pluginutils'; +import { dirname, join } from 'path'; const isStorybookMdx = (id: string) => id.endsWith('stories.mdx') || id.endsWith('story.mdx'); @@ -33,7 +34,10 @@ export async function mdxPlugin(options: Options): Promise { const mdxLoaderOptions = await options.presets.apply('mdxLoaderOptions', { ...mdxPluginOptions, mdxCompileOptions: { - providerImportSource: require.resolve('@storybook/mdx2-csf'), + providerImportSource: join( + dirname(require.resolve('@storybook/addon-docs/package.json')), + '/dist/shims/mdx-react-shim' + ), ...mdxPluginOptions?.mdxCompileOptions, remarkPlugins: [remarkSlug, remarkExternalLinks].concat( mdxPluginOptions?.mdxCompileOptions?.remarkPlugins ?? [] From 0f5e6c1eb671bb2081b7b78fe417856fb4ebcd54 Mon Sep 17 00:00:00 2001 From: Bryan Thomas <49354825+bryanjtc@users.noreply.github.com> Date: Tue, 19 Sep 2023 07:33:14 -0500 Subject: [PATCH 10/10] Move @rollup/pluginutils to devDependencies --- code/addons/docs/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 5bd40d570777..c9a396875f18 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -100,7 +100,6 @@ "dependencies": { "@jest/transform": "^29.3.1", "@mdx-js/react": "^2.1.5", - "@rollup/pluginutils": "^5.0.2", "@storybook/blocks": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", @@ -120,6 +119,7 @@ "ts-dedent": "^2.0.0" }, "devDependencies": { + "@rollup/pluginutils": "^5.0.2", "react": "^16.14.0", "react-dom": "^16.8.0", "typescript": "~4.9.3",