From 6f66a071bfd4807dc4fc0e9ed6629b8919d59904 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 14 Dec 2022 19:37:18 +0800 Subject: [PATCH 1/3] Addon-docs: Upgrade mdx2-csf and use its JSX handling --- code/addons/docs/package.json | 2 +- code/addons/docs/src/preset.ts | 40 +++------------------------------- code/yarn.lock | 11 +--------- 3 files changed, 5 insertions(+), 48 deletions(-) diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 6b27bdd9297..8739e9b81ae 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -103,7 +103,7 @@ "@storybook/components": "7.0.0-beta.6", "@storybook/csf-plugin": "7.0.0-beta.6", "@storybook/csf-tools": "7.0.0-beta.6", - "@storybook/mdx2-csf": "next", + "@storybook/mdx2-csf": "0.0.4-canary.30.c978d7f.0", "@storybook/node-logger": "7.0.0-beta.6", "@storybook/postinstall": "7.0.0-beta.6", "@storybook/preview-api": "7.0.0-beta.6", diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index 6908afe4a03..10b7d5aa5a7 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -12,32 +12,9 @@ import { loadCsf } from '@storybook/csf-tools'; // for more complex solutions we can find alone that we need to add '@babel/plugin-transform-react-jsx' type BabelParams = { mdxBabelOptions?: any; + /** @deprecated */ configureJSX?: boolean; }; -function createBabelOptions({ mdxBabelOptions, configureJSX }: BabelParams) { - const babelPlugins = mdxBabelOptions?.plugins || []; - - const filteredBabelPlugins = babelPlugins.filter((p: any) => { - const name = Array.isArray(p) ? p[0] : p; - if (typeof name === 'string') { - return !name.includes('plugin-transform-react-jsx'); - } - return true; - }); - - const jsxPlugin = [ - require.resolve('@babel/plugin-transform-react-jsx'), - { pragma: 'React.createElement', pragmaFrag: 'React.Fragment' }, - ]; - const plugins = configureJSX ? [...filteredBabelPlugins, jsxPlugin] : babelPlugins; - return { - // don't use the root babelrc by default (users can override this in mdxBabelOptions) - babelrc: false, - configFile: false, - ...mdxBabelOptions, - plugins, - }; -} async function webpack( webpackConfig: any = {}, @@ -59,7 +36,6 @@ async function webpack( // also, these babel options are chained with other presets. const { mdxBabelOptions, - configureJSX = true, csfPluginOptions = {}, sourceLoaderOptions = null, transcludeMarkdown = false, @@ -69,6 +45,7 @@ async function webpack( skipCsf: true, mdxCompileOptions: { providerImportSource: '@storybook/addon-docs/mdx-react-shim', + remarkPlugins: [remarkSlug, remarkExternalLinks], }, }); @@ -92,10 +69,6 @@ async function webpack( { test: /\.md$/, use: [ - { - loader: resolvedBabelLoader, - options: createBabelOptions({ mdxBabelOptions, configureJSX }), - }, { loader: mdxLoader, options: mdxLoaderOptions, @@ -120,14 +93,11 @@ async function webpack( { test: /(stories|story)\.mdx$/, use: [ - { - loader: resolvedBabelLoader, - options: createBabelOptions({ mdxBabelOptions, configureJSX }), - }, { loader: mdxLoader, options: { ...mdxLoaderOptions, + mdxBabelOptions, skipCsf: false, }, }, @@ -137,10 +107,6 @@ async function webpack( test: /\.mdx$/, exclude: /(stories|story)\.mdx$/, use: [ - { - loader: resolvedBabelLoader, - options: createBabelOptions({ mdxBabelOptions, configureJSX }), - }, { loader: mdxLoader, options: mdxLoaderOptions, diff --git a/code/yarn.lock b/code/yarn.lock index 0c4015cdd55..2488970be07 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5409,7 +5409,7 @@ __metadata: "@storybook/components": 7.0.0-beta.6 "@storybook/csf-plugin": 7.0.0-beta.6 "@storybook/csf-tools": 7.0.0-beta.6 - "@storybook/mdx2-csf": next + "@storybook/mdx2-csf": 0.0.4-canary.30.c978d7f.0 "@storybook/node-logger": 7.0.0-beta.6 "@storybook/postinstall": 7.0.0-beta.6 "@storybook/preview-api": 7.0.0-beta.6 @@ -6787,15 +6787,6 @@ __metadata: languageName: node linkType: hard -"@storybook/mdx2-csf@npm:next": - version: 0.1.0-next.7 - resolution: "@storybook/mdx2-csf@npm:0.1.0-next.7" - dependencies: - loader-utils: ^2.0.4 - checksum: c0d3b6c5d2261079ac8db0e2bb8e773ab11f6f363c60f4d4b76332c1361c981d5abffd49ea6f2e1b67f5d1fbdfc121e207044fe52b8be1e8322cacc42e41f747 - languageName: node - linkType: hard - "@storybook/nextjs@workspace:*, @storybook/nextjs@workspace:frameworks/nextjs": version: 0.0.0-use.local resolution: "@storybook/nextjs@workspace:frameworks/nextjs" From 1b9a5570a914594ce307faafcdbe26d3a9fb9dd7 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 14 Dec 2022 19:47:28 +0800 Subject: [PATCH 2/3] Remove babel-loader shenanigans --- code/addons/docs/src/preset.ts | 2 -- code/lib/builder-webpack5/src/presets/preview-preset.ts | 2 -- 2 files changed, 4 deletions(-) diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index 10b7d5aa5a7..64ee8a1f642 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -28,8 +28,6 @@ async function webpack( typeof createCompiler >[0] */ ) { - const resolvedBabelLoader = await options.presets.apply('babelLoaderRef'); - const { module = {} } = webpackConfig; // it will reuse babel options that are already in use in storybook diff --git a/code/lib/builder-webpack5/src/presets/preview-preset.ts b/code/lib/builder-webpack5/src/presets/preview-preset.ts index 9614abcb2d1..eba1e361bbd 100644 --- a/code/lib/builder-webpack5/src/presets/preview-preset.ts +++ b/code/lib/builder-webpack5/src/presets/preview-preset.ts @@ -29,7 +29,5 @@ export const babel = async (config: any, options: any) => ({ ], }); -export const babelLoaderRef = () => require.resolve('babel-loader'); - export const previewMainTemplate = () => require.resolve('@storybook/builder-webpack5/templates/preview.ejs'); From 5ccda7a16c07cfaae978ddc2aad2dd7781b97258 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 14 Dec 2022 20:25:15 +0800 Subject: [PATCH 3/3] Update mdx2-csf version to next --- code/addons/docs/package.json | 2 +- code/lib/builder-vite/package.json | 2 +- code/yarn.lock | 12 ++++++------ 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 8739e9b81ae..6b27bdd9297 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -103,7 +103,7 @@ "@storybook/components": "7.0.0-beta.6", "@storybook/csf-plugin": "7.0.0-beta.6", "@storybook/csf-tools": "7.0.0-beta.6", - "@storybook/mdx2-csf": "0.0.4-canary.30.c978d7f.0", + "@storybook/mdx2-csf": "next", "@storybook/node-logger": "7.0.0-beta.6", "@storybook/postinstall": "7.0.0-beta.6", "@storybook/preview-api": "7.0.0-beta.6", diff --git a/code/lib/builder-vite/package.json b/code/lib/builder-vite/package.json index dab66a48573..55b220fde94 100644 --- a/code/lib/builder-vite/package.json +++ b/code/lib/builder-vite/package.json @@ -45,7 +45,7 @@ "@storybook/client-logger": "7.0.0-beta.6", "@storybook/core-common": "7.0.0-beta.6", "@storybook/csf-plugin": "7.0.0-beta.6", - "@storybook/mdx2-csf": "0.0.4-canary.30.c978d7f.0", + "@storybook/mdx2-csf": "next", "@storybook/node-logger": "7.0.0-beta.6", "@storybook/preview": "7.0.0-beta.6", "@storybook/preview-api": "7.0.0-beta.6", diff --git a/code/yarn.lock b/code/yarn.lock index 2488970be07..17be43cb36f 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5409,7 +5409,7 @@ __metadata: "@storybook/components": 7.0.0-beta.6 "@storybook/csf-plugin": 7.0.0-beta.6 "@storybook/csf-tools": 7.0.0-beta.6 - "@storybook/mdx2-csf": 0.0.4-canary.30.c978d7f.0 + "@storybook/mdx2-csf": next "@storybook/node-logger": 7.0.0-beta.6 "@storybook/postinstall": 7.0.0-beta.6 "@storybook/preview-api": 7.0.0-beta.6 @@ -6021,7 +6021,7 @@ __metadata: "@storybook/client-logger": 7.0.0-beta.6 "@storybook/core-common": 7.0.0-beta.6 "@storybook/csf-plugin": 7.0.0-beta.6 - "@storybook/mdx2-csf": 0.0.4-canary.30.c978d7f.0 + "@storybook/mdx2-csf": next "@storybook/node-logger": 7.0.0-beta.6 "@storybook/preview": 7.0.0-beta.6 "@storybook/preview-api": 7.0.0-beta.6 @@ -6778,12 +6778,12 @@ __metadata: languageName: unknown linkType: soft -"@storybook/mdx2-csf@npm:0.0.4-canary.30.c978d7f.0": - version: 0.0.4-canary.30.c978d7f.0 - resolution: "@storybook/mdx2-csf@npm:0.0.4-canary.30.c978d7f.0" +"@storybook/mdx2-csf@npm:next": + version: 1.0.0-next.0 + resolution: "@storybook/mdx2-csf@npm:1.0.0-next.0" dependencies: loader-utils: ^2.0.4 - checksum: a9e8c36673f08ec294566535f61c20440ede8ccf834006506efd183ed0dc566dbb6863776088b628b8cd3f96662ed79c8c427de4617851eae5d60b3a0ae1b23f + checksum: 520b26977bce390e4a5a3e0f81dec3a99497f13950e0726f7da62087041df715903ef92121ee568f1cac5f8d422f96a95d0bd24fbe6ffc7d76f5a81c05f21e3b languageName: node linkType: hard