From f7edd492506f5383bd20591f33533a53299f3f64 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 29 Oct 2022 11:00:44 +0800 Subject: [PATCH] Add csf-plugin to replace source-loader --- MIGRATION.md | 28 +++++++++ code/addons/docs/README.md | 4 +- code/addons/docs/package.json | 4 +- code/addons/docs/src/preset.ts | 27 ++++----- code/lib/builder-vite/package.json | 2 +- code/lib/csf-plugin/README.md | 26 ++++++++ code/lib/csf-plugin/package.json | 60 +++++++++++++++++++ code/lib/csf-plugin/src/index.test.ts | 0 code/lib/csf-plugin/src/index.ts | 31 ++++++++++ code/lib/csf-plugin/tsconfig.json | 15 +++++ code/lib/csf-tools/src/enrichCsf.test.ts | 18 ++++-- code/lib/csf-tools/src/enrichCsf.ts | 8 +-- code/package.json | 1 + code/ui/.storybook/main.ts | 5 ++ code/workspace.json | 5 ++ code/yarn.lock | 53 +++++++++++++--- docs/essentials/introduction.md | 24 ++++---- ...n-full-individual-essentials-config.js.mdx | 3 +- 18 files changed, 261 insertions(+), 53 deletions(-) create mode 100644 code/lib/csf-plugin/README.md create mode 100644 code/lib/csf-plugin/package.json create mode 100644 code/lib/csf-plugin/src/index.test.ts create mode 100644 code/lib/csf-plugin/src/index.ts create mode 100644 code/lib/csf-plugin/tsconfig.json diff --git a/MIGRATION.md b/MIGRATION.md index 75baa360fcd..2659e144cc4 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -37,6 +37,7 @@ - [Configuring the Docs Container](#configuring-the-docs-container) - [External Docs](#external-docs) - [MDX2 upgrade](#mdx2-upgrade) + - [Dropped source loader / storiesOf static snippets](#dropped-source-loader--storiesof-static-snippets) - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration) - [7.0 Deprecations](#70-deprecations) - [`Story` type deprecated](#story-type-deprecated) @@ -737,6 +738,33 @@ We will update this section with specific pointers based on user feedback during As part of the upgrade we deleted the codemod `mdx-to-csf` and will be replacing it with a more sophisticated version prior to release. +#### Dropped source loader / storiesOf static snippets + +In SB 6.x, Storybook Docs used a webpack loader called `source-loader` to help display static code snippets. This was configurable using the `options.sourceLoaderOptions` field. + +In SB 7.0, we've moved to a faster, simpler alternative called `csf-plugin` that **only supports CSF**. It is configurable using the `options.csfPluginOptions` field. + +If you're using `storiesOf` and want to restore the previous behavior, you can add `source-loader` by hand to your webpack config using the following snippet in `main.js`: + +```js +module.exports = { + webpackFinal: (config) => { + config.modules.rules.push({ + test: /\.stories\.[tj]sx?$/, + use: [ + { + loader: require.resolve('@storybook/source-loader'), + options: {} /* your sourceLoaderOptions here */ + }, + ], + enforce: 'pre', + }) + return config; + } +} +``` + + #### Dropped addon-docs manual configuration Storybook Docs 5.x shipped with instructions for how to manually configure webpack and storybook without the use of Storybook's "presets" feature. Over time, these docs went out of sync. Now in Storybook 7 we have removed support for manual configuration entirely. diff --git a/code/addons/docs/README.md b/code/addons/docs/README.md index 22b7daf8509..a1309f736b1 100644 --- a/code/addons/docs/README.md +++ b/code/addons/docs/README.md @@ -142,7 +142,7 @@ module.exports = { options: { configureJSX: true, babelOptions: {}, - sourceLoaderOptions: null, + csfPluginOptions: null, transcludeMarkdown: true, }, }, @@ -152,7 +152,7 @@ module.exports = { The `configureJSX` option is useful when you're writing your docs in MDX and your project's babel config isn't already set up to handle JSX files. `babelOptions` is a way to further configure the babel processor when you're using `configureJSX`. -`sourceLoaderOptions` is an object for configuring `@storybook/source-loader`. When set to `null` it tells docs not to run the `source-loader` at all, which can be used as an optimization, or if you're already using `source-loader` in your `main.js`. +`csfPluginOptions` is an object for configuring `@storybook/csf-plugin`. When set to `null` it tells docs not to run the `csf-plugin` at all, which can be used as an optimization, or if you're already using `csf-plugin` in your `main.js`. The `transcludeMarkdown` option enables mdx files to import `.md` files and render them as a component. diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 71724e1e3fb..770504226d6 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -58,13 +58,13 @@ "@storybook/components": "7.0.0-alpha.45", "@storybook/core-common": "7.0.0-alpha.45", "@storybook/core-events": "7.0.0-alpha.45", + "@storybook/csf-plugin": "7.0.0-alpha.45", "@storybook/csf-tools": "7.0.0-alpha.45", "@storybook/docs-tools": "7.0.0-alpha.45", - "@storybook/mdx2-csf": "0.1.0-next.0", + "@storybook/mdx2-csf": "next", "@storybook/node-logger": "7.0.0-alpha.45", "@storybook/postinstall": "7.0.0-alpha.45", "@storybook/preview-web": "7.0.0-alpha.45", - "@storybook/source-loader": "7.0.0-alpha.45", "@storybook/store": "7.0.0-alpha.45", "@storybook/theming": "7.0.0-alpha.45", "@storybook/types": "7.0.0-alpha.45", diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index c8a5902e7ee..1455d55929f 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -8,6 +8,7 @@ import type { DocsOptions, Options, } from '@storybook/types'; +import type { CsfPluginOptions } from '@storybook/csf-plugin'; import { logger } from '@storybook/node-logger'; import { loadCsf } from '@storybook/csf-tools'; @@ -48,7 +49,10 @@ function createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }: Bab export async function webpack( webpackConfig: any = {}, options: Options & - BabelParams & { sourceLoaderOptions: any; transcludeMarkdown: boolean } /* & Parameters< + BabelParams & { + csfPluginOptions: CsfPluginOptions | null; + transcludeMarkdown: boolean; + } /* & Parameters< typeof createCompiler >[0] */ ) { @@ -62,7 +66,7 @@ export async function webpack( babelOptions, mdxBabelOptions, configureJSX = true, - sourceLoaderOptions = { injectStoryParameters: true }, + csfPluginOptions = {}, transcludeMarkdown = false, } = options; @@ -76,18 +80,6 @@ export async function webpack( const mdxLoader = require.resolve('@storybook/mdx2-csf/loader'); - // set `sourceLoaderOptions` to `null` to disable for manual configuration - const sourceLoader = sourceLoaderOptions - ? [ - { - test: /\.(stories|story)\.[tj]sx?$/, - loader: require.resolve('@storybook/source-loader'), - options: { ...sourceLoaderOptions, inspectLocalDependencies: true }, - enforce: 'pre', - }, - ] - : []; - let rules = module.rules || []; if (transcludeMarkdown) { rules = [ @@ -110,6 +102,12 @@ export async function webpack( const result = { ...webpackConfig, + plugins: [ + ...(webpackConfig.plugins || []), + // eslint-disable-next-line global-require + ...(csfPluginOptions ? [require('@storybook/csf-plugin').webpack(csfPluginOptions)] : []), + ], + module: { ...module, rules: [ @@ -144,7 +142,6 @@ export async function webpack( }, ], }, - ...sourceLoader, ], }, }; diff --git a/code/lib/builder-vite/package.json b/code/lib/builder-vite/package.json index ee92ab28214..67972a2232b 100644 --- a/code/lib/builder-vite/package.json +++ b/code/lib/builder-vite/package.json @@ -22,7 +22,7 @@ "@storybook/client-api": "7.0.0-alpha.45", "@storybook/client-logger": "7.0.0-alpha.45", "@storybook/core-common": "7.0.0-alpha.45", - "@storybook/mdx2-csf": "0.1.0-next.0", + "@storybook/mdx2-csf": "next", "@storybook/node-logger": "7.0.0-alpha.45", "@storybook/preview-web": "7.0.0-alpha.45", "@storybook/source-loader": "7.0.0-alpha.45", diff --git a/code/lib/csf-plugin/README.md b/code/lib/csf-plugin/README.md new file mode 100644 index 00000000000..a5a86bdd41a --- /dev/null +++ b/code/lib/csf-plugin/README.md @@ -0,0 +1,26 @@ +# CSF Plugin + +The CSF plugin reads CSF files and enriches their content via static analysis. +It supports Webpack, Vite, and other bundlers using [unplugin](https://github.com/unjs/unplugin). + +## Source snippets + +CSF plugin can add static source snippets to each story. For example: + +```js +export const Basic = () =>