Refactor

Author: kasperpeulen

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

@@ -664,8 +664,8 @@ function renderComponentCard(key: string, c: ComponentManifest, id: string) {
  : '';
 
  // When there is no prop type error, try to read prop types from reactDocgen if present
- const hasDocgen = !a.hasPropTypeError && 'reactDocgen' in c && c.reactDocgen;
- const parsedDocgen = hasDocgen ? parseReactDocgen(c.reactDocgen) : undefined;
+ const reactDocgen: any = !a.hasPropTypeError && 'reactDocgen' in c && c.reactDocgen;
+ const parsedDocgen = reactDocgen ? parseReactDocgen(reactDocgen) : undefined;
  const propEntries = parsedDocgen ? Object.entries(parsedDocgen.props ?? {}) : [];
  const propTypesBadge =
  !a.hasPropTypeError && propEntries.length > 0
@@ -684,8 +684,10 @@ function renderComponentCard(key: string, c: ComponentManifest, id: string) {
  const optional = info?.required ? '' : '?';
  const defaultVal = (info?.defaultValue ?? '').trim();
  const def = defaultVal ? ` = ${defaultVal}` : '';
- const doc = description ? `/** ${description} */\n` : '';
- return `${doc}${propName}${optional}: ${t}${def}`;
+ const doc =
+ ['/**', ...description.split('\n').map((line) => ` * ${line}`), ' */'].join('\n') +
+ '\n';
+ return `${description ? doc : ''}${propName}${optional}: ${t}${def}`;
  })
  .join('\n\n')
  : '';
@@ -757,6 +759,8 @@ function renderComponentCard(key: string, c: ComponentManifest, id: string) {
  <span class="ex-name">Prop types</span>
  <span class="badge ok">${propEntries.length} ${plural(propEntries.length, 'prop type')}</span>
  </div>
+ <pre><code>File: ${reactDocgen?.definedInFile ? esc(reactDocgen.definedInFile) : ''}::${reactDocgen?.exportName ? esc(reactDocgen?.exportName) : ''}</code></pre>
+ <pre><code>Props:</code></pre>
  <pre><code>${esc(propsCode)}</code></pre>
  </div>
  </div>`

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

@@ -10,9 +10,9 @@ import {
 import path from 'pathe';
 
 import { getCodeSnippet } from './generateCodeSnippet';
-import { getComponentImports } from './getComponentImports';
+import { getComponents, getImports } from './getComponentImports';
 import { extractJSDocInfo } from './jsdocTags';
-import { type DocObj, getReactDocgen } from './reactDocgen';
+import { type DocObj } from './reactDocgen';
 import { cachedFindUp, cachedReadFileSync, groupBy, invalidateCache, invariant } from './utils';
 
 interface ReactComponentManifest extends ComponentManifest {
@@ -48,7 +48,7 @@ export const componentManifestGenerator: PresetPropertyFn<
  if (csf.meta.tags?.includes('!manifest')) {
  return;
  }
- let componentName = csf._meta?.component;
+ const componentName = csf._meta?.component;
  const title = entry.title.replace(/\s+/g, '');
 
  const id = entry.id.split('--')[0];
@@ -62,35 +62,19 @@ export const componentManifestGenerator: PresetPropertyFn<
  ? JSON.parse(cachedReadFileSync(nearestPkg, 'utf-8') as string).name
  : undefined;
 
- const fallbackImport =
- packageName && componentName ? `import { ${componentName} } from "${packageName}";` : '';
- const componentImports = getComponentImports({
+ const components = getComponents({
  csf,
- packageName,
  storyFilePath: absoluteImportPath,
  });
 
- const calculatedImports = componentImports.imports.join('\n').trim() ?? fallbackImport;
-
- const component = componentImports.components.find((it) => {
- const nameMatch = componentName
- ? it.componentName === componentName ||
- it.localImportName === componentName ||
- it.importName === componentName
- : false;
- const titleMatch = !componentName
- ? (it.localImportName ? title.includes(it.localImportName) : false) ||
- (it.importName ? title.includes(it.importName) : false)
- : false;
- return nameMatch || titleMatch;
+ const component = components.find((it) => {
+ return componentName
+ ? [it.componentName, it.localImportName, it.importName].includes(componentName)
+ : title.includes(it.componentName) ||
+ (it.localImportName && title.includes(it.localImportName)) ||
+ (it.importName && title.includes(it.importName));
  });
 
- componentName ??=
- component?.componentName ?? component?.localImportName ?? component?.importName;
-
- const componentPath = component?.path;
- const importName = component?.importName;
-
  const stories = Object.keys(csf._stories)
  .map((storyName) => {
  const story = csf._stories[storyName];
@@ -104,7 +88,7 @@ export const componentManifestGenerator: PresetPropertyFn<
 
  return {
  name: storyName,
- snippet: recast.print(getCodeSnippet(csf, storyName, componentName)).code,
+ snippet: recast.print(getCodeSnippet(csf, storyName, component?.componentName)).code,
  description: finalDescription?.trim(),
  summary: tags.summary?.[0],
  };
@@ -118,24 +102,29 @@ export const componentManifestGenerator: PresetPropertyFn<
  })
  .filter((it) => it != null);
 
+ const fallbackImport =
+ packageName && componentName ? `import { ${componentName} } from "${packageName}";` : '';
+
+ const imports = getImports({ components, packageName }).join('\n').trim() || fallbackImport;
+
  const base = {
  id,
  name: componentName ?? title,
  path: importPath,
  stories,
- import: calculatedImports,
+ import: imports,
  jsDocTags: {},
  } satisfies Partial<ComponentManifest>;
 
- if (!componentPath) {
- const error = !componentName
+ if (!component?.reactDocgen) {
+ const error = !component
  ? {
  name: 'No meta.component specified',
  message: 'Specify meta.component for the component to be included in the manifest.',
  }
  : {
  name: 'No component import found',
- message: `No component file found for the "${componentName}" component.`,
+ message: `No component file found for the "${component.componentName}" component.`,
  };
  return {
  ...base,
@@ -147,25 +136,21 @@ export const componentManifestGenerator: PresetPropertyFn<
  };
  }
 
- const docgenResult = getReactDocgen(
- componentPath,
- component ? component : { componentName: componentName ?? title }
- );
+ const docgenResult = component.reactDocgen;
 
  const docgen = docgenResult.type === 'success' ? docgenResult.data : undefined;
  const error = docgenResult.type === 'error' ? docgenResult.error : undefined;
 
- const metaDescription = extractDescription(csf._metaStatement);
- const jsdocComment = metaDescription || docgen?.description;
- const { tags = {}, description } = jsdocComment ? extractJSDocInfo(jsdocComment) : {};
 
- const manifestDescription = (tags?.describe?.[0] || tags?.desc?.[0]) ?? description;
+
+ const jsdocComment = extractDescription(csf._metaStatement) || docgen?.description;
+ const { tags = {}, description } = jsdocComment ? extractJSDocInfo(jsdocComment) : {};
 
  return {
  ...base,
- description: manifestDescription?.trim(),
+ description: ((tags?.describe?.[0] || tags?.desc?.[0]) ?? description)?.trim(),
  summary: tags.summary?.[0],
- import: calculatedImports,
+ import: imports,
  reactDocgen: docgen,
  jsDocTags: tags,
  error,