From 23e12b162a2b2ba5342d434a565cf655493b8c07 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Tue, 10 May 2022 10:35:00 -0400 Subject: [PATCH 1/2] Update Vite builder docs a bit --- docs/builders/vite.md | 28 +++++-------------- .../storybook-builder-api-dev-server.ts.mdx | 10 ++++++- .../storybook-vite-builder-aliasing.js.mdx | 18 +++++++----- ...torybook-vite-builder-react-docgen.js.mdx} | 10 ++----- 4 files changed, 30 insertions(+), 36 deletions(-) rename docs/snippets/common/{storybook-vite-builder-error-optimized.js.mdx => storybook-vite-builder-react-docgen.js.mdx} (58%) diff --git a/docs/builders/vite.md b/docs/builders/vite.md index b4fff2f197b1..3176286477db 100644 --- a/docs/builders/vite.md +++ b/docs/builders/vite.md @@ -96,41 +96,27 @@ If you need, you can also configure Storybook's Vite builder using TypeScript. R ## Troubleshooting -### Prebundle errors +### Working directory not being detected -Vite automatically restarts and begins the prebundling process if it detects a new dependency. This pattern breaks with Storybook and throws confusing error messages. If you see the following message in your terminal: +By default, the Vite builder enables Vite's [`server.fs.strict`](https://vitejs.dev/config/#server-fs-strict) option for increased security, defining the project's `root` to Storybook's configuration directory +If you need to override it, you can use the `viteFinal` function and adjust it. -```shell -[vite] new dependencies found: -``` +### ArgTypes are not generated automatically -Update your `viteFinal` configuration and include the new dependencies as follows: +Storybook’s [automatic argType inference](https://storybook.js.org/docs/react/api/argtypes#automatic-argtype-inference) is currently only available for React and Vue3 projects. In react projects, if typescript is found in the project's package.json, we assume the components are written in typescript, and use `react-docgen-typescript`. If this causes problems, you can use `react-docgen` by configuring the `typescript` option in your `.storybook/main.js`: -### Working directory not being detected - -By default, the Vite builder enables Vite's [`server.fs.strict`](https://vitejs.dev/config/#server-fs-strict) option for increased security, defining the project's `root` to Storybook's configuration directory -If you need to override it, you can use the `viteFinal` function and adjust it. - -### HMR seems flaky - -Saving a component story does not initiate a hot module replacement. Instead, a complete reload happens. You can update your component file or save it to see the changes in effect. - -### ArgTypes are not generated automatically - -Storybook’s [automatic argType inference](https://storybook.js.org/docs/react/api/argtypes#automatic-argtype-inference) is currently only available for React TypeScript projects. The builder will include additional framework support in future releases. - #### Learn more about builders - Vite builder for bundling with Vite - [Webpack builder](./webpack.md) for bundling with Webpack -- [Builder API](./builder-api.md) for building a Storybook builder \ No newline at end of file +- [Builder API](./builder-api.md) for building a Storybook builder diff --git a/docs/snippets/common/storybook-builder-api-dev-server.ts.mdx b/docs/snippets/common/storybook-builder-api-dev-server.ts.mdx index a4731e6d7799..4f37414bf9fa 100644 --- a/docs/snippets/common/storybook-builder-api-dev-server.ts.mdx +++ b/docs/snippets/common/storybook-builder-api-dev-server.ts.mdx @@ -4,11 +4,19 @@ import { createServer } from 'vite'; export async function createViteServer(options: ExtendedOptions, devServer: Server) { + const { port } = options; // Remainder server configuration // Creates the server. return createServer({ // The server configuration goes here + server: { + middlewareMode: true, + hmr: { + port, + server: devServer, + }, + }, }); } -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-vite-builder-aliasing.js.mdx b/docs/snippets/common/storybook-vite-builder-aliasing.js.mdx index d34ce2dc5052..af94f7ec987d 100644 --- a/docs/snippets/common/storybook-vite-builder-aliasing.js.mdx +++ b/docs/snippets/common/storybook-vite-builder-aliasing.js.mdx @@ -1,5 +1,7 @@ ```js -// .storybook/main.js|ts +// .storybook/main.js|cjs|ts + +const { mergeConfig } = require('vite'); module.exports = { stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'], @@ -7,14 +9,16 @@ module.exports = { core: { builder: '@storybook/builder-vite', }, - async viteFinal(config, { configType }) { - // Return the updated configuration + async viteFinal(config) { + // Merge custom configuration into the default config return mergeConfig(config, { - // Adds a new alias - resolve: { - alias: { exampleAlias: 'something' }, + // Use the same "resolve" configuration as your app + resolve: (await import('../vite.config.js')).default.resolve + // Add dependencies to pre-optimization + optimizeDeps: { + include: ['storybook-dark-mode'], }, }); }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-vite-builder-error-optimized.js.mdx b/docs/snippets/common/storybook-vite-builder-react-docgen.js.mdx similarity index 58% rename from docs/snippets/common/storybook-vite-builder-error-optimized.js.mdx rename to docs/snippets/common/storybook-vite-builder-react-docgen.js.mdx index cc7883900911..b64eed2a870c 100644 --- a/docs/snippets/common/storybook-vite-builder-error-optimized.js.mdx +++ b/docs/snippets/common/storybook-vite-builder-react-docgen.js.mdx @@ -7,12 +7,8 @@ module.exports = { core: { builder: '@storybook/builder-vite', }, - async viteFinal(config, { configType }) { - config.optimizeDeps.include = [ - ...(config.optimizeDeps?.include ?? []), - // Other dependencies go here - ]; - return config; + typescript: { + reactDocgen: 'react-docgen', // 👈 react-docgen configured here. }, }; -``` \ No newline at end of file +``` From 5a62b139939120b2635f1b9852354cb2fe83f2dd Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Tue, 10 May 2022 17:08:22 -0400 Subject: [PATCH 2/2] Review feedback --- docs/builders/vite.md | 4 ++-- .../common/storybook-vite-builder-react-docgen.js.mdx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/builders/vite.md b/docs/builders/vite.md index 3176286477db..bd43e267830d 100644 --- a/docs/builders/vite.md +++ b/docs/builders/vite.md @@ -103,13 +103,13 @@ If you need to override it, you can use the `viteFinal` function and adjust it. ### ArgTypes are not generated automatically -Storybook’s [automatic argType inference](https://storybook.js.org/docs/react/api/argtypes#automatic-argtype-inference) is currently only available for React and Vue3 projects. In react projects, if typescript is found in the project's package.json, we assume the components are written in typescript, and use `react-docgen-typescript`. If this causes problems, you can use `react-docgen` by configuring the `typescript` option in your `.storybook/main.js`: +Currently, [automatic argType inference](../api/argtypes.md#automatic-argtype-inference) is only available for React and Vue3. With React, the Vite builder defaults to `react-docgen-typescript` if TypeScript is listed as a dependency. If you run into any issues, you can revert to `react-docgen` by updating your Storybook configuration file as follows: diff --git a/docs/snippets/common/storybook-vite-builder-react-docgen.js.mdx b/docs/snippets/common/storybook-vite-builder-react-docgen.js.mdx index b64eed2a870c..7d422a056a04 100644 --- a/docs/snippets/common/storybook-vite-builder-react-docgen.js.mdx +++ b/docs/snippets/common/storybook-vite-builder-react-docgen.js.mdx @@ -1,5 +1,5 @@ ```js -// .storybook/main.js|ts +// .storybook/main.js module.exports = { stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],