Release: Prerelease 10.1.0-alpha.2

.gitignore

@@ -65,3 +65,5 @@ code/core/report
 node_modules/.svelte2tsx-language-server-files
 
 *storybook.log
+
+.junie

CHANGELOG.prerelease.md

@@ -1,3 +1,10 @@
+## 10.1.0-alpha.2
+
+- A11y: Add aria-selected attribute to tab buttons - [#32656](https://github.com/storybookjs/storybook/pull/32656), thanks @Nischit-Ekbote!
+- React: Experimental code examples - [#32813](https://github.com/storybookjs/storybook/pull/32813), thanks @kasperpeulen!
+- React: Implement manifests/component.json for React - [#32751](https://github.com/storybookjs/storybook/pull/32751), thanks @kasperpeulen!
+- React: Improve error handling of component manifest generation - [#32855](https://github.com/storybookjs/storybook/pull/32855), thanks @kasperpeulen!
+
 ## 10.1.0-alpha.1
 
 - CLI: Fix glob string formatting in csf-factories codemod - [#32880](https://github.com/storybookjs/storybook/pull/32880), thanks @yannbf!

code/.storybook/main.ts

@@ -137,6 +137,8 @@ const config = defineMain({
   features: {
     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/components/components/tabs/tabs.tsx

@@ -227,6 +227,7 @@ export const Tabs: FC<TabsProps> = memo(
                     actions.onSelect(id);
                   }}
                   role="tab"
+                  aria-selected={active}
                 >
                   {typeof title === 'function' ? <title /> : title}
                 </TabButton>

code/core/src/core-server/build-static.ts

@@ -1,4 +1,4 @@
-import { cp, mkdir } from 'node:fs/promises';
+import { cp, mkdir, writeFile } from 'node:fs/promises';
 import { rm } from 'node:fs/promises';
 
 import {
@@ -11,6 +11,7 @@ import {
 import { logger } from 'storybook/internal/node-logger';
 import { getPrecedingUpgrade, telemetry } from 'storybook/internal/telemetry';
 import type { BuilderOptions, CLIOptions, LoadOptions, Options } from 'storybook/internal/types';
+import { type ComponentManifestGenerator } from 'storybook/internal/types';
 
 import { global } from '@storybook/global';
 
@@ -163,6 +164,28 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption
         initializedStoryIndexGenerator as Promise<StoryIndexGenerator>
       )
     );
+
+    if (features?.experimentalComponentsManifest) {
+      const componentManifestGenerator: ComponentManifestGenerator = await presets.apply(
+        'experimental_componentManifestGenerator'
+      );
+      const indexGenerator = await initializedStoryIndexGenerator;
+      if (componentManifestGenerator && indexGenerator) {
+        try {
+          const manifests = await componentManifestGenerator(
+            indexGenerator as unknown as import('storybook/internal/core-server').StoryIndexGenerator
+          );
+          await mkdir(join(options.outputDir, 'manifests'), { recursive: true });
+          await writeFile(
+            join(options.outputDir, 'manifests', 'components.json'),
+            JSON.stringify(manifests)
+          );
+        } catch (e) {
+          logger.error('Failed to generate manifests/components.json');
+          logger.error(e instanceof Error ? e : String(e));
+        }
+      }
+    }
   }
 
   if (!core?.disableProjectJson) {

code/core/src/core-server/dev-server.ts

@@ -2,13 +2,14 @@ import { logConfig } from 'storybook/internal/common';
 import { logger } from 'storybook/internal/node-logger';
 import { MissingBuilderError } from 'storybook/internal/server-errors';
 import type { Options } from 'storybook/internal/types';
+import { type ComponentManifestGenerator } from 'storybook/internal/types';
 
 import compression from '@polka/compression';
 import polka from 'polka';
 import invariant from 'tiny-invariant';
 
 import { telemetry } from '../telemetry';
-import type { StoryIndexGenerator } from './utils/StoryIndexGenerator';
+import { type StoryIndexGenerator } from './utils/StoryIndexGenerator';
 import { doTelemetry } from './utils/doTelemetry';
 import { getManagerBuilder, getPreviewBuilder } from './utils/get-builders';
 import { getCachingMiddleware } from './utils/get-caching-middleware';
@@ -138,8 +139,35 @@ export async function storybookDevServer(options: Options) {
     throw indexError;
   }
 
+  const features = await options.presets.apply('features');
+  if (features?.experimentalComponentsManifest) {
+    app.use('/manifests/components.json', async (req, res) => {
+      try {
+        const componentManifestGenerator: ComponentManifestGenerator = await options.presets.apply(
+          'experimental_componentManifestGenerator'
+        );
+        const indexGenerator = await initializedStoryIndexGenerator;
+        if (componentManifestGenerator && indexGenerator) {
+          const manifest = await componentManifestGenerator(
+            indexGenerator as unknown as import('storybook/internal/core-server').StoryIndexGenerator
+          );
+          res.setHeader('Content-Type', 'application/json');
+          res.end(JSON.stringify(manifest));
+          return;
+        }
+        res.statusCode = 400;
+        res.end('No component manifest generator configured.');
+        return;
+      } catch (e) {
+        logger.error(e instanceof Error ? e : String(e));
+        res.statusCode = 500;
+        res.end(e instanceof Error ? e.toString() : String(e));
+        return;
+      }
+    });
+  }
   // Now the preview has successfully started, we can count this as a 'dev' event.
-  doTelemetry(app, core, initializedStoryIndexGenerator, options);
+  doTelemetry(app, core, initializedStoryIndexGenerator as Promise<StoryIndexGenerator>, options);
 
   async function cancelTelemetry() {
     const payload = { eventType: 'dev' };

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

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

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

@@ -33,7 +33,7 @@ interface BabelFile {
   opts: any;
   hub: any;
   metadata: object;
-  path: any;
+  path: NodePath<t.Program>;
   scope: any;
   inputMap: object | null;
   code: string;
@@ -287,6 +287,8 @@ export class CsfFile {
 
   _rawComponentPath?: string;
 
+  _componentImportSpecifier?: t.ImportSpecifier | t.ImportDefaultSpecifier;
+
   _meta?: StaticMeta;
 
   _stories: Record<string, StaticStory> = {};
@@ -295,11 +297,16 @@ export class CsfFile {
 
   _storyExports: Record<string, t.VariableDeclarator | t.FunctionDeclaration> = {};
 
+  _storyDeclarationPath: Record<string, NodePath<t.VariableDeclarator | t.FunctionDeclaration>> =
+    {};
+
   _storyPaths: Record<string, NodePath<t.ExportNamedDeclaration>> = {};
 
   _metaStatement: t.Statement | undefined;
 
-  _metaNode: t.Expression | undefined;
+  _metaStatementPath: NodePath<t.Statement> | undefined;
+
+  _metaNode: t.ObjectExpression | undefined;
 
   _metaPath: NodePath<t.ExportDefaultDeclaration> | undefined;
 
@@ -369,9 +376,18 @@ export class CsfFile {
                 stmt.specifiers.find((spec) => spec.local.name === id)
             ) as t.ImportDeclaration;
             if (importStmt) {
+              // Example: `import { ComponentImport } from './path-to-component'`
+              // const meta = { component: ComponentImport };
+              // Sets:
+              // - _rawComponentPath = './path-to-component'
+              // - _componentImportSpecifier = ComponentImport
               const { source } = importStmt;
-              if (t.isStringLiteral(source)) {
+              const specifier = importStmt.specifiers.find((spec) => spec.local.name === id);
+              if (t.isStringLiteral(source) && specifier) {
                 this._rawComponentPath = source.value;
+                if (t.isImportSpecifier(specifier) || t.isImportDefaultSpecifier(specifier)) {
+                  this._componentImportSpecifier = specifier;
+                }
               }
             }
           }
@@ -465,19 +481,24 @@ export class CsfFile {
             // export default meta;
             const variableName = (node.declaration as t.Identifier).name;
             self._metaVariableName = variableName;
-            const isVariableDeclarator = (declaration: t.VariableDeclarator) =>
+            const isMetaVariable = (declaration: t.VariableDeclarator) =>
               t.isIdentifier(declaration.id) && declaration.id.name === variableName;
 
-            self._metaStatement = self._ast.program.body.find(
-              (topLevelNode) =>
-                t.isVariableDeclaration(topLevelNode) &&
-                topLevelNode.declarations.find(isVariableDeclarator)
-            );
+            self._metaStatementPath = self._file.path
+              .get('body')
+              .find(
+                (path) =>
+                  path.isVariableDeclaration() && path.node.declarations.some(isMetaVariable)
+              );
+
+            self._metaStatement = self._metaStatementPath?.node;
+
             decl = ((self?._metaStatement as t.VariableDeclaration)?.declarations || []).find(
-              isVariableDeclarator
+              isMetaVariable
             )?.init;
           } else {
             self._metaStatement = node;
+            self._metaStatementPath = path;
             decl = node.declaration;
           }
 
@@ -518,23 +539,28 @@ export class CsfFile {
       ExportNamedDeclaration: {
         enter(path) {
           const { node, parent } = path;
+          const declaration = path.get('declaration');
           let declarations;
-          if (t.isVariableDeclaration(node.declaration)) {
-            declarations = node.declaration.declarations.filter((d) => t.isVariableDeclarator(d));
-          } else if (t.isFunctionDeclaration(node.declaration)) {
-            declarations = [node.declaration];
+          if (declaration.isVariableDeclaration()) {
+            declarations = declaration.get('declarations').filter((d) => d.isVariableDeclarator());
+          } else if (declaration.isFunctionDeclaration()) {
+            declarations = [declaration];
           }
           if (declarations) {
             // export const X = ...;
-            declarations.forEach((decl: t.VariableDeclarator | t.FunctionDeclaration) => {
-              if (t.isIdentifier(decl.id)) {
+            declarations.forEach((declPath) => {
+              const decl = declPath.node;
+              const id = declPath.node.id;
+
+              if (t.isIdentifier(id)) {
                 let storyIsFactory = false;
-                const { name: exportName } = decl.id;
-                if (exportName === '__namedExportsOrder' && t.isVariableDeclarator(decl)) {
-                  self._namedExportsOrder = parseExportsOrder(decl.init as t.Expression);
+                const { name: exportName } = id;
+                if (exportName === '__namedExportsOrder' && declPath.isVariableDeclarator()) {
+                  self._namedExportsOrder = parseExportsOrder(declPath.node.init as t.Expression);
                   return;
                 }
                 self._storyExports[exportName] = decl;
+                self._storyDeclarationPath[exportName] = declPath;
                 self._storyPaths[exportName] = path;
                 self._storyStatements[exportName] = node;
                 let name = storyNameFromExport(exportName);
@@ -1025,7 +1051,10 @@ export const babelParseFile = ({
   filename?: string;
   ast?: t.File;
 }): BabelFile => {
-  return new BabelFileClass({ filename }, { code, ast: ast ?? babelParse(code) });
+  return new BabelFileClass(
+    { filename, highlightCode: false },
+    { code, ast: ast ?? babelParse(code) }
+  );
 };
 
 export const loadCsf = (code: string, options: CsfOptions) => {