React: Experimental code examples

code/.storybook/main.ts

@@ -138,6 +138,7 @@ const config = defineMain({
     developmentModeForBuild: true,
     experimentalTestSyntax: true,
     experimentalComponentsManifest: true,
+    experimentalCodeExamples: true,
   },
   staticDirs: [{ from: './bench/bundle-analyzer', to: '/bundle-analyzer' }],
   viteFinal: async (viteConfig, { configType }) => {

code/addons/docs/src/preset.ts

@@ -3,6 +3,7 @@ import { fileURLToPath } from 'node:url';
 
 import { logger } from 'storybook/internal/node-logger';
 import type { Options, PresetProperty, StorybookConfigRaw } from 'storybook/internal/types';
+import { type CsfEnricher } from 'storybook/internal/types';
 
 import type { CsfPluginOptions } from '@storybook/csf-plugin';
 
@@ -41,6 +42,8 @@ async function webpack(
 
   const { csfPluginOptions = {}, mdxPluginOptions = {} } = options;
 
+  const enrichCsf = await options.presets.apply('experimental_enrichCsf');
+
   const rehypeSlug = (await import('rehype-slug')).default;
   const rehypeExternalLinks = (await import('rehype-external-links')).default;
 
@@ -100,7 +103,12 @@ async function webpack(
       ...(webpackConfig.plugins || []),
 
       ...(csfPluginOptions
-        ? [(await import('@storybook/csf-plugin')).webpack(csfPluginOptions)]
+        ? [
+            (await import('@storybook/csf-plugin')).webpack({
+              ...csfPluginOptions,
+              enrichCsf,
+            }),
+          ]
         : []),
     ],
     resolve: {

code/builders/builder-vite/src/plugins/csf-plugin.ts

@@ -12,6 +12,11 @@ export async function csfPlugin(config: Options): Promise<Plugin> {
     // @ts-expect-error - not sure what type to use here
     addons.find((a) => [a, a.name].includes('@storybook/addon-docs'))?.options ?? {};
 
+  const enrichCsf = await presets.apply('experimental_enrichCsf');
+
   // TODO: looks like unplugin can return an array of plugins
-  return vite(docsOptions?.csfPluginOptions) as Plugin;
+  return vite({
+    ...docsOptions?.csfPluginOptions,
+    enrichCsf,
+  }) as Plugin;
 }

code/core/src/common/presets.ts

@@ -20,7 +20,7 @@ import { getInterpretedFile } from './utils/interpret-files';
 import { stripAbsNodeModulesPath } from './utils/strip-abs-node-modules-path';
 import { validateConfigurationFiles } from './utils/validate-configuration-files';
 
-type InterPresetOptions = Omit<
+export type InterPresetOptions = Omit<
   CLIOptions &
     LoadOptions &
     BuilderOptions & { isCritical?: boolean; build?: StorybookConfigRaw['build'] },
@@ -321,7 +321,7 @@ export async function getPresets(
   const loadedPresets: LoadedPreset[] = await loadPresets(presets, 0, storybookOptions);
 
   return {
-    apply: async (extension: string, config: any, args = {}) =>
+    apply: async (extension: string, config?: any, args = {}) =>
       applyPresets(loadedPresets, extension, config, args, storybookOptions),
   };
 }

code/core/src/common/utils/formatter.ts

@@ -1,4 +1,4 @@
-async function getPrettier() {
+export async function getPrettier() {
   return import('prettier').catch((e) => ({
     resolveConfig: async () => null,
     format: (content: string) => content,

code/core/src/core-server/presets/favicon.test.ts

@@ -4,6 +4,7 @@ import { dirname, join } from 'node:path';
 import { expect, it, vi } from 'vitest';
 
 import { logger } from 'storybook/internal/node-logger';
+import { type Presets } from 'storybook/internal/types';
 
 import * as m from './common-preset';
 
@@ -41,7 +42,7 @@ const createOptions = (locations: string[]): Parameters<typeof m.favicon>[1] =>
         }
       }
     },
-  },
+  } as Presets,
 });
 
 vi.mock('storybook/internal/node-logger', () => {

code/core/src/csf-tools/enrichCsf.test.ts

@@ -11,7 +11,7 @@ expect.addSnapshotSerializer({
   test: () => true,
 });
 
-const enrich = (code: string, originalCode: string, options?: EnrichCsfOptions) => {
+const enrich = async (code: string, originalCode: string, options?: EnrichCsfOptions) => {
   // we don't actually care about the title
 
   const csf = loadCsf(code, {
@@ -20,15 +20,15 @@ const enrich = (code: string, originalCode: string, options?: EnrichCsfOptions)
   const csfSource = loadCsf(originalCode, {
     makeTitle: (userTitle) => userTitle || 'default',
   }).parse();
-  enrichCsf(csf, csfSource, options);
+  await enrichCsf(csf, csfSource, options);
   return formatCsf(csf);
 };
 
 describe('enrichCsf', () => {
   describe('source', () => {
-    it('csf1', () => {
+    it('csf1', async () => {
       expect(
-        enrich(
+        await enrich(
           dedent`
           // compiled code
           export default {
@@ -62,9 +62,9 @@ describe('enrichCsf', () => {
         };
       `);
     });
-    it('csf2', () => {
+    it('csf2', async () => {
       expect(
-        enrich(
+        await enrich(
           dedent`
         // compiled code
         export default {
@@ -106,9 +106,9 @@ describe('enrichCsf', () => {
         };
       `);
     });
-    it('csf3', () => {
+    it('csf3', async () => {
       expect(
-        enrich(
+        await enrich(
           dedent`
         // compiled code
         export default {
@@ -148,9 +148,9 @@ describe('enrichCsf', () => {
         };
       `);
     });
-    it('csf factories', () => {
+    it('csf factories', async () => {
       expect(
-        enrich(
+        await enrich(
           dedent`
           // compiled code
           import {config} from "/.storybook/preview.ts";
@@ -193,9 +193,9 @@ describe('enrichCsf', () => {
         };
       `);
     });
-    it('multiple stories', () => {
+    it('multiple stories', async () => {
       expect(
-        enrich(
+        await enrich(
           dedent`
         // compiled code
         export default {
@@ -245,9 +245,9 @@ describe('enrichCsf', () => {
   });
 
   describe('story descriptions', () => {
-    it('skips inline comments', () => {
+    it('skips inline comments', async () => {
       expect(
-        enrich(
+        await enrich(
           dedent`
         // compiled code
         export default {
@@ -285,9 +285,9 @@ describe('enrichCsf', () => {
       `);
     });
 
-    it('skips blocks without jsdoc', () => {
+    it('skips blocks without jsdoc', async () => {
       expect(
-        enrich(
+        await enrich(
           dedent`
           // compiled code
           export default {
@@ -323,9 +323,9 @@ describe('enrichCsf', () => {
       `);
     });
 
-    it('JSDoc single-line', () => {
+    it('JSDoc single-line', async () => {
       expect(
-        enrich(
+        await enrich(
           dedent`
           // compiled code
           export default {
@@ -365,9 +365,9 @@ describe('enrichCsf', () => {
       `);
     });
 
-    it('JSDoc multi-line', () => {
+    it('JSDoc multi-line', async () => {
       expect(
-        enrich(
+        await enrich(
           dedent`
         // compiled code
         export default {
@@ -411,9 +411,9 @@ describe('enrichCsf', () => {
       `);
     });
 
-    it('preserves indentation', () => {
+    it('preserves indentation', async () => {
       expect(
-        enrich(
+        await enrich(
           dedent`
           // compiled code
           export default {
@@ -459,9 +459,9 @@ describe('enrichCsf', () => {
   });
 
   describe('meta descriptions', () => {
-    it('skips inline comments', () => {
+    it('skips inline comments', async () => {
       expect(
-        enrich(
+        await enrich(
           dedent`
         // compiled code
         export default {
@@ -497,9 +497,9 @@ describe('enrichCsf', () => {
       `);
     });
 
-    it('skips blocks without jsdoc', () => {
+    it('skips blocks without jsdoc', async () => {
       expect(
-        enrich(
+        await enrich(
           dedent`
         // compiled code
         export default {
@@ -535,9 +535,9 @@ describe('enrichCsf', () => {
       `);
     });
 
-    it('JSDoc single-line', () => {
+    it('JSDoc single-line', async () => {
       expect(
-        enrich(
+        await enrich(
           dedent`
           // compiled code
           export default {
@@ -580,9 +580,9 @@ describe('enrichCsf', () => {
       `);
     });
 
-    it('JSDoc multi-line', () => {
+    it('JSDoc multi-line', async () => {
       expect(
-        enrich(
+        await enrich(
           dedent`
         // compiled code
         export default {
@@ -629,9 +629,9 @@ describe('enrichCsf', () => {
       `);
     });
 
-    it('preserves indentation', () => {
+    it('preserves indentation', async () => {
       expect(
-        enrich(
+        await enrich(
           dedent`
         // compiled code
         export default {
@@ -678,9 +678,9 @@ describe('enrichCsf', () => {
       `);
     });
 
-    it('correctly interleaves parameters', () => {
+    it('correctly interleaves parameters', async () => {
       expect(
-        enrich(
+        await enrich(
           dedent`
         // compiled code
         export default {
@@ -734,9 +734,9 @@ describe('enrichCsf', () => {
       `);
     });
 
-    it('respects user component description', () => {
+    it('respects user component description', async () => {
       expect(
-        enrich(
+        await enrich(
           dedent`
         // compiled code
         export default {
@@ -793,9 +793,9 @@ describe('enrichCsf', () => {
       `);
     });
 
-    it('respects meta variables', () => {
+    it('respects meta variables', async () => {
       expect(
-        enrich(
+        await enrich(
           dedent`
         // compiled code
         const meta = {
@@ -844,9 +844,9 @@ describe('enrichCsf', () => {
   });
 
   describe('options', () => {
-    it('disableSource', () => {
+    it('disableSource', async () => {
       expect(
-        enrich(
+        await enrich(
           dedent`
           // compiled code
           export default {
@@ -883,9 +883,9 @@ describe('enrichCsf', () => {
       `);
     });
 
-    it('disableDescription', () => {
+    it('disableDescription', async () => {
       expect(
-        enrich(
+        await enrich(
           dedent`
           // compiled code
           export default {
@@ -922,9 +922,9 @@ describe('enrichCsf', () => {
       `);
     });
 
-    it('disable all', () => {
+    it('disable all', async () => {
       expect(
-        enrich(
+        await enrich(
           dedent`
           // compiled code
           export default {

code/core/src/csf-tools/enrichCsf.ts

@@ -1,10 +1,12 @@
 import { generate, types as t } from 'storybook/internal/babel';
+import { type CsfEnricher } from 'storybook/internal/types';
 
 import type { CsfFile } from './CsfFile';
 
 export interface EnrichCsfOptions {
   disableSource?: boolean;
   disableDescription?: boolean;
+  enrichCsf?: CsfEnricher;
 }
 
 export const enrichCsfStory = (
@@ -139,8 +141,9 @@ export const enrichCsfMeta = (csf: CsfFile, csfSource: CsfFile, options?: Enrich
   }
 };
 
-export const enrichCsf = (csf: CsfFile, csfSource: CsfFile, options?: EnrichCsfOptions) => {
+export const enrichCsf = async (csf: CsfFile, csfSource: CsfFile, options?: EnrichCsfOptions) => {
   enrichCsfMeta(csf, csfSource, options);
+  await options?.enrichCsf?.(csf, csfSource);
   Object.keys(csf._storyExports).forEach((key) => {
     enrichCsfStory(csf, csfSource, key, options);
   });