Merge pull request #32319 from storybookjs/copilot/fix-32318

Svelte & Vue: Add framework-specific `docgen` option to disable docgen processing

Author: JReinhold

code/frameworks/svelte-vite/src/preset.ts

@@ -1,7 +1,7 @@
 import type { PresetProperty } from 'storybook/internal/types';
 
 import { svelteDocgen } from './plugins/svelte-docgen';
-import type { StorybookConfig } from './types';
+import type { FrameworkOptions, StorybookConfig } from './types';
 import { handleSvelteKit } from './utils';
 
 export const core: PresetProperty<'core'> = {
@@ -12,7 +12,15 @@ export const core: PresetProperty<'core'> = {
 export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (config, options) => {
   const { plugins = [] } = config;
 
-  plugins.push(await svelteDocgen());
+  // Get framework options to check if docgen is disabled
+  const framework = await options.presets.apply('framework');
+  const frameworkOptions: FrameworkOptions =
+    typeof framework === 'string' ? {} : (framework.options ?? {});
+
+  // Check if docgen is disabled in framework options (default is true/enabled)
+  if (frameworkOptions.docgen !== false) {
+    plugins.push(await svelteDocgen());
+  }
 
   await handleSvelteKit(plugins, options);
 

code/frameworks/svelte-vite/src/types.ts

@@ -10,6 +10,14 @@ type BuilderName = CompatibleString<'@storybook/builder-vite'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;
+  /**
+   * Enable or disable automatic documentation generation for component properties, events, and
+   * slots. When disabled, Storybook will skip the docgen processing step during build, which can
+   * improve build performance.
+   *
+   * @default true
+   */
+  docgen?: boolean;
 };
 
 type StorybookConfigFramework = {

code/frameworks/sveltekit/src/preset.ts

@@ -7,7 +7,7 @@ import { viteFinal as svelteViteFinal } from '@storybook/svelte-vite/preset';
 
 import { configOverrides } from './plugins/config-overrides';
 import { mockSveltekitStores } from './plugins/mock-sveltekit-stores';
-import { type StorybookConfig } from './types';
+import { type FrameworkOptions, type StorybookConfig } from './types';
 
 export const core: PresetProperty<'core'> = {
   builder: import.meta.resolve('@storybook/builder-vite'),

code/frameworks/sveltekit/src/types.ts

@@ -13,6 +13,14 @@ type BuilderName = CompatibleString<'@storybook/builder-vite'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;
+  /**
+   * Enable or disable automatic documentation generation for component properties, events, and
+   * slots. When disabled, Storybook will skip the docgen processing step during build, which can
+   * improve build performance.
+   *
+   * @default true
+   */
+  docgen?: boolean;
 };
 
 type StorybookConfigFramework = {

code/frameworks/vue3-vite/src/preset.ts

@@ -22,10 +22,12 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) =
   const docgen = resolveDocgenOptions(frameworkOptions.docgen);
 
   // add docgen plugin depending on framework option
-  if (docgen.plugin === 'vue-component-meta') {
-    plugins.push(await vueComponentMeta(docgen.tsconfig));
-  } else {
-    plugins.push(await vueDocgen());
+  if (docgen !== false) {
+    if (docgen.plugin === 'vue-component-meta') {
+      plugins.push(await vueComponentMeta(docgen.tsconfig));
+    } else {
+      plugins.push(await vueDocgen());
+    }
   }
 
   const { mergeConfig } = await import('vite');
@@ -37,13 +39,18 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) =
 /** Resolves the docgen framework option. */
 const resolveDocgenOptions = (
   docgen?: FrameworkOptions['docgen']
-): { plugin: VueDocgenPlugin; tsconfig?: string } => {
-  if (!docgen) {
+): false | { plugin: VueDocgenPlugin; tsconfig?: string } => {
+  if (docgen === false) {
+    return false;
+  }
+
+  if (docgen === undefined || docgen === true) {
     return { plugin: 'vue-docgen-api' };
   }
 
   if (typeof docgen === 'string') {
     return { plugin: docgen };
   }
+
   return docgen;
 };

code/frameworks/vue3-vite/src/types.ts

@@ -24,9 +24,12 @@ export type FrameworkOptions = {
    * "vue-component-meta" will become the new default in the future and "vue-docgen-api" will be
    * removed.
    *
+   * Set to `false` to disable docgen processing entirely for improved build performance.
+   *
    * @default 'vue-docgen-api'
    */
   docgen?:
+    | boolean
     | VueDocgenPlugin
     | {
         plugin: 'vue-component-meta';

docs/get-started/frameworks/svelte-vite.mdx

@@ -194,3 +194,30 @@ The available options are:
 Type: `Record<string, any>`
 
 Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](../../builders/vite.mdx).
+
+#### `docgen`
+
+Type: `boolean`
+
+Default: `true`
+
+Enables or disables automatic documentation generation for component properties. When disabled, Storybook will skip the docgen processing step during build, which can improve build performance.
+
+```ts title=".storybook/main.ts"
+import type { StorybookConfig } from '@storybook/svelte-vite';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/svelte-vite',
+    options: {
+      docgen: false, // Disable docgen for better performance
+    },
+  },
+};
+
+export default config;
+```
+
+##### When to disable docgen
+
+Disabling docgen can improve build performance for large projects, but [argTypes won't be inferred automatically](../../api/arg-types.mdx#automatic-argtype-inference), which will prevent features like [Controls](../../essentials/controls.mdx) and [docs](../../writing-docs/autodocs.mdx) from working as expected. To use those features, you will need to [define `argTypes` manually](../../api/arg-types.mdx#manually-specifying-argtypes).

docs/get-started/frameworks/sveltekit.mdx

@@ -369,6 +369,33 @@ Type: `Record<string, any>`
 
 Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For Sveltekit, available options can be found in the [Vite builder docs](../../builders/vite.mdx).
 
+#### `docgen`
+
+Type: `boolean`
+
+Default: `true`
+
+Enables or disables automatic documentation generation for component properties. When disabled, Storybook will skip the docgen processing step during build, which can improve build performance.
+
+```ts title=".storybook/main.ts"
+import type { StorybookConfig } from '@storybook/sveltekit';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/sveltekit',
+    options: {
+      docgen: false, // Disable docgen for better performance
+    },
+  },
+};
+
+export default config;
+```
+
+##### When to disable docgen
+
+Disabling docgen can improve build performance for large projects, but [argTypes won't be inferred automatically](../../api/arg-types.mdx#automatic-argtype-inference), which will prevent features like [Controls](../../essentials/controls.mdx) and [docs](../../writing-docs/autodocs.mdx) from working as expected. To use those features, you will need to [define `argTypes` manually](../../api/arg-types.mdx#manually-specifying-argtypes).
+
 ## Troubleshooting
 
 ### Error when starting Storybook

docs/get-started/frameworks/vue3-vite.mdx

@@ -288,10 +288,31 @@ Configure options for the [framework's builder](../../api/main-config/main-confi
 
 #### `docgen`
 
-Type: `'vue-docgen-api' | 'vue-component-meta'`
+Type: `'vue-docgen-api' | 'vue-component-meta' | boolean`
 
 Default: `'vue-docgen-api'`
 
 Since: `8.0`
 
 Choose which docgen tool to use when generating controls for your components. See [Using `vue-component-meta`](#using-vue-component-meta) for more information.
+
+Set to `false` to disable docgen processing entirely for improved build performance.
+
+```ts title=".storybook/main.ts"
+import type { StorybookConfig } from '@storybook/vue3-vite';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {
+      docgen: false, // Disable docgen for better performance
+    },
+  },
+};
+
+export default config;
+```
+
+##### When to disable docgen
+
+Disabling docgen can improve build performance for large projects, but [argTypes won't be inferred automatically](../../api/arg-types.mdx#automatic-argtype-inference), which will prevent features like [Controls](../../essentials/controls.mdx) and [docs](../../writing-docs/autodocs.mdx) from working as expected. To use those features, you will need to [define `argTypes` manually](../../api/arg-types.mdx#manually-specifying-argtypes).