Merge pull request #18187 from storybookjs/vite-builder-docs

Update Vite builder docs a bit

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:
+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:
 
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
-    'common/storybook-vite-builder-error-optimized.js.mdx',
+    'common/storybook-vite-builder-react-docgen.js.mdx',
   ]}
 />
 
 <!-- prettier-ignore-end -->
 
-### 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
+- [Builder API](./builder-api.md) for building a Storybook builder

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,
+      },
+    },
   });
 }
-```
+```

docs/snippets/common/storybook-vite-builder-aliasing.js.mdx

@@ -1,20 +1,24 @@
 ```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)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
   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'],
       },
     });
   },
 };
-```
+```

docs/snippets/common/storybook-vite-builder-error-optimized.js.mdx → docs/snippets/common/storybook-vite-builder-react-docgen.js.mdx

@@ -1,18 +1,14 @@
 ```js
-// .storybook/main.js|ts
+// .storybook/main.js
 
 module.exports = {
   stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
   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.
   },
 };
-```
+```