Improve error handling of component manifest generation

Author: kasperpeulen

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;
@@ -301,6 +301,8 @@ export class CsfFile {
 
   _metaStatement: t.Statement | undefined;
 
+  _metaStatementPath: NodePath<t.Statement> | undefined;
+
   _metaNode: t.ObjectExpression | undefined;
 
   _metaPath: NodePath<t.ExportDefaultDeclaration> | undefined;
@@ -484,11 +486,22 @@ export class CsfFile {
                 t.isVariableDeclaration(topLevelNode) &&
                 topLevelNode.declarations.find(isVariableDeclarator)
             );
+
+            self._metaStatementPath =
+              self._file.path
+                .get('body')
+                .find(
+                  (topLevelPath) =>
+                    topLevelPath.isVariableDeclaration() &&
+                    topLevelPath.node.declarations.some(isVariableDeclarator)
+                ) ?? undefined;
+
             decl = ((self?._metaStatement as t.VariableDeclaration)?.declarations || []).find(
               isVariableDeclarator
             )?.init;
           } else {
             self._metaStatement = node;
+            self._metaStatementPath = path;
             decl = node.declaration;
           }
 
@@ -1036,7 +1049,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) => {

code/core/src/types/modules/core-common.ts

@@ -347,12 +347,14 @@ export type TagsOptions = Record<Tag, Partial<TagOptions>>;
 
 export interface ComponentManifest {
   id: string;
-  name: string;
+  path: string;
+  name?: string;
   description?: string;
   import?: string;
   summary?: string;
-  examples: { name: string; snippet: string }[];
+  examples: { name: string; snippet?: string; error?: { message: string } }[];
   jsDocTags: Record<string, string[]>;
+  error?: { message: string };
 }
 
 export interface ComponentsManifest {

code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx

@@ -81,8 +81,15 @@ test('Edge case identifier we can not find', () => {
   const input = withCSF3(`
     export const Default = someImportOrWhatever;
   `);
-  expect(generateExample(input)).toMatchInlineSnapshot(
-    `"const Default = () => <Button>Click me</Button>;"`
+  expect(() => generateExample(input)).toThrowErrorMatchingInlineSnapshot(
+    `
+    [SyntaxError: Expected story to be csf factory, function or an object expression
+      11 |
+      12 |
+    > 13 |     export const Default = someImportOrWhatever;
+         |                            ^^^^^^^^^^^^^^^^^^^^
+      14 |   ]
+  `
   );
 });
 

code/renderers/react/src/componentManifest/generateCodeSnippet.ts

@@ -1,11 +1,6 @@
 import { type NodePath, types as t } from 'storybook/internal/babel';
 
-function invariant(condition: any, message?: string | (() => string)): asserts condition {
-  if (condition) {
-    return;
-  }
-  throw new Error(typeof message === 'function' ? message() : message);
-}
+import { invariant } from './utils';
 
 function buildInvalidSpread(entries: Array<[string, t.Node]>): t.JSXSpreadAttribute | null {
   if (entries.length === 0) {
@@ -23,19 +18,34 @@ function buildInvalidSpread(entries: Array<[string, t.Node]>): t.JSXSpreadAttrib
 export function getCodeSnippet(
   storyExportPath: NodePath<t.ExportNamedDeclaration>,
   metaObj: t.ObjectExpression | null | undefined,
-  componentName: string
+  componentName?: string
 ): t.VariableDeclaration {
-  const declaration = storyExportPath.get('declaration') as NodePath<t.Declaration>;
-  invariant(declaration.isVariableDeclaration(), 'Expected variable declaration');
+  const declaration = storyExportPath.get('declaration');
+  invariant(
+    declaration.isVariableDeclaration(),
+    () => storyExportPath.buildCodeFrameError('Expected story to be a variable declaration').message
+  );
 
-  const declarator = declaration.get('declarations')[0] as NodePath<t.VariableDeclarator>;
-  const init = declarator.get('init') as NodePath<t.Expression>;
-  invariant(init.isExpression(), 'Expected story initializer to be an expression');
+  const declarations = declaration.get('declarations');
+  invariant(
+    declarations.length === 1,
+    storyExportPath.buildCodeFrameError('Expected one story declaration').message
+  );
+
+  const declarator = declarations[0];
+  const init = declarator.get('init');
+  invariant(
+    init.isExpression(),
+    () => declarator.buildCodeFrameError('Expected story initializer to be an expression').message
+  );
 
   const storyId = declarator.get('id');
-  invariant(storyId.isIdentifier(), 'Expected named const story export');
+  invariant(
+    storyId.isIdentifier(),
+    () => declaration.buildCodeFrameError('Expected story to have a name').message
+  );
 
-  let story: NodePath<t.Expression> | null = init;
+  let normalizedInit: NodePath<t.Expression> = init;
 
   if (init.isCallExpression()) {
     const callee = init.get('callee');
@@ -50,47 +60,63 @@ export function getCodeSnippet(
       if (obj.isIdentifier() && isBind) {
         const resolved = resolveBindIdentifierInit(storyExportPath, obj);
         if (resolved) {
-          story = resolved;
+          normalizedInit = resolved;
         }
       }
     }
 
     // Fallback: treat call expression as story factory and use first argument
-    if (story === init) {
+    if (init === normalizedInit) {
       const args = init.get('arguments');
-      if (args.length === 0) {
-        story = null;
-      } else {
-        const storyArgument = args[0];
-        invariant(storyArgument.isExpression());
-        story = storyArgument;
-      }
+      invariant(
+        args.length === 1,
+        () => init.buildCodeFrameError('Could not evaluate story expression').message
+      );
+      const storyArgument = args[0];
+      invariant(
+        storyArgument.isExpression(),
+        () => init.buildCodeFrameError('Could not evaluate story expression').message
+      );
+      normalizedInit = storyArgument;
     }
   }
 
+  normalizedInit = normalizedInit.isTSSatisfiesExpression()
+    ? normalizedInit.get('expression')
+    : normalizedInit.isTSAsExpression()
+      ? normalizedInit.get('expression')
+      : normalizedInit;
+
   // If the story is already a function, try to inline args like in render() when using `{...args}`
 
-  // Otherwise it must be an object story
-  const storyObjPath =
-    story == null || story.isArrowFunctionExpression() || story.isFunctionExpression()
-      ? null
-      : story.isTSSatisfiesExpression()
-        ? story.get('expression')
-        : story.isTSAsExpression()
-          ? story.get('expression')
-          : story;
+  let story: NodePath<t.ArrowFunctionExpression | t.FunctionExpression | t.ObjectExpression>;
+  if (normalizedInit.isArrowFunctionExpression() || normalizedInit.isFunctionExpression()) {
+    story = normalizedInit;
+  } else if (normalizedInit.isObjectExpression()) {
+    story = normalizedInit;
+  } else {
+    throw normalizedInit.buildCodeFrameError(
+      'Expected story to be csf factory, function or an object expression'
+    );
+  }
 
-  const storyProperties = storyObjPath?.isObjectExpression()
-    ? storyObjPath.get('properties').filter((p) => p.isObjectProperty())
-    : [];
+  const storyProperties = story?.isObjectExpression()
+    ? story.get('properties').filter((p) => p.isObjectProperty())
+    : // Find CSF2 properties
+      [];
 
   // Prefer an explicit render() when it is a function (arrow/function)
   const renderPath = storyProperties
     .filter((p) => keyOf(p.node) === 'render')
     .map((p) => p.get('value'))
-    .find((value) => value.isExpression());
+    .find(
+      (value): value is NodePath<t.ArrowFunctionExpression | t.FunctionExpression> =>
+        value.isArrowFunctionExpression() || value.isFunctionExpression()
+    );
 
-  const storyFn = renderPath ?? story;
+  const storyFn =
+    renderPath ??
+    (story.isArrowFunctionExpression() ? story : story.isFunctionExpression() ? story : undefined);
 
   // Collect args: meta.args and story.args as Record<string, t.Node>
   const metaArgs = metaArgsRecord(metaObj ?? null);
@@ -112,7 +138,7 @@ export function getCodeSnippet(
     .map(([k, v]) => toAttr(k, v))
     .filter((a): a is t.JSXAttribute => Boolean(a));
 
-  if (storyFn?.isArrowFunctionExpression() || storyFn?.isFunctionExpression()) {
+  if (storyFn) {
     const fn = storyFn.node;
 
     // Only handle arrow function with direct JSX expression body for now
@@ -224,6 +250,8 @@ export function getCodeSnippet(
   // Build spread for invalid-only props, if any
   const invalidSpread = buildInvalidSpread(invalidEntries);
 
+  invariant(componentName, 'Could not generate snippet without component name.');
+
   const name = t.jsxIdentifier(componentName);
 
   const openingElAttrs: Array<t.JSXAttribute | t.JSXSpreadAttribute> = [