@fragments-sdk/cli 0.14.3 → 0.15.0

package/src/commands/scan-generate.ts

@@ -13,6 +13,7 @@
 
 import { readFile, writeFile, access, mkdir } from "node:fs/promises";
 import { resolve, basename, dirname, relative, join } from "node:path";
+import { execSync } from "node:child_process";
 import * as ts from "typescript";
 import pc from "picocolors";
 import { BRAND } from "../core/index.js";
@@ -100,6 +101,177 @@ export interface EnrichmentResult {
   tags: string[];
 }
 
+// ---------------------------------------------------------------------------
+// Post-generation helpers
+// ---------------------------------------------------------------------------
+
+type PackageManager = "pnpm" | "yarn" | "npm";
+
+interface CompoundPartReference {
+  partName: string;
+  tagName: string;
+  importName?: string;
+}
+
+interface PackageManagerDetection {
+  manager: PackageManager;
+  lockfileDir: string | null;
+}
+
+async function findNearestAncestor(scanPath: string, targetFile: string): Promise<string | null> {
+  let dir = resolve(scanPath);
+  for (let i = 0; i < 20; i++) {
+    try {
+      await access(join(dir, targetFile));
+      return dir;
+    } catch {
+      const parent = dirname(dir);
+      if (parent === dir) break;
+      dir = parent;
+    }
+  }
+  return null;
+}
+
+async function findNearestPackageJsonDir(scanPath: string): Promise<string | null> {
+  return findNearestAncestor(scanPath, "package.json");
+}
+
+export async function detectPackageManagerForProject(projectDir: string): Promise<PackageManagerDetection> {
+  let dir = resolve(projectDir);
+
+  for (let i = 0; i < 20; i++) {
+    for (const [fileName, manager] of [
+      ["pnpm-lock.yaml", "pnpm"],
+      ["pnpm-workspace.yaml", "pnpm"],
+      ["yarn.lock", "yarn"],
+      ["package-lock.json", "npm"],
+    ] as const) {
+      try {
+        await access(join(dir, fileName));
+        return { manager, lockfileDir: dir };
+      } catch {
+        // continue
+      }
+    }
+
+    const parent = dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+
+  return { manager: "npm", lockfileDir: null };
+}
+
+export function resolveCoreInstallCommand(manager: PackageManager): string {
+  switch (manager) {
+    case "pnpm":
+      return "pnpm add -D @fragments-sdk/core";
+    case "yarn":
+      return "yarn add -D @fragments-sdk/core";
+    default:
+      return "npm install -D @fragments-sdk/core";
+  }
+}
+
+/**
+ * Ensure `@fragments-sdk/core` is in the project's devDependencies.
+ * Detects package manager from lockfiles and runs install if needed.
+ */
+export async function ensureCoreDependency(scanPath: string): Promise<void> {
+  const projectDir = await findNearestPackageJsonDir(scanPath);
+  if (!projectDir) return;
+  const pkgJsonPath = join(projectDir, "package.json");
+
+  try {
+    const pkgRaw = await readFile(pkgJsonPath, "utf-8");
+    const pkg = JSON.parse(pkgRaw);
+    const deps = pkg.dependencies || {};
+    const devDeps = pkg.devDependencies || {};
+
+    if (deps["@fragments-sdk/core"] || devDeps["@fragments-sdk/core"]) {
+      console.log(pc.dim("  · @fragments-sdk/core already installed"));
+      return;
+    }
+
+    const { manager } = await detectPackageManagerForProject(projectDir);
+    const cmd = resolveCoreInstallCommand(manager);
+
+    execSync(cmd, { cwd: projectDir, stdio: "ignore" });
+    console.log(pc.green("  ✓ Installed @fragments-sdk/core"));
+  } catch (e) {
+    console.log(
+      pc.yellow(
+        `  ⚠ Could not auto-install @fragments-sdk/core: ${e instanceof Error ? e.message : String(e)}`
+      )
+    );
+  }
+}
+
+/**
+ * Add `**\/*.fragment.tsx` to the exclude array of the project's tsconfig
+ * so generated fragment files don't break the host app's TypeScript build.
+ */
+export async function excludeFragmentsFromTsconfig(scanPath: string): Promise<void> {
+  const projectDir = await findNearestPackageJsonDir(scanPath);
+  if (!projectDir) return;
+
+  // Prefer tsconfig.app.json (Vite projects), fall back to tsconfig.json
+  let tsconfigPath: string | null = null;
+  let tsconfigName = "";
+  for (const name of ["tsconfig.app.json", "tsconfig.json"]) {
+    const candidate = join(projectDir, name);
+    try {
+      await access(candidate);
+      tsconfigPath = candidate;
+      tsconfigName = name;
+      break;
+    } catch {
+      // try next
+    }
+  }
+
+  if (!tsconfigPath) return;
+
+  try {
+    const raw = await readFile(tsconfigPath, "utf-8");
+    const parsed = ts.parseConfigFileTextToJson(tsconfigPath, raw);
+    if (parsed.error || !parsed.config) {
+      throw new Error(parsed.error?.messageText?.toString() ?? "Unable to parse tsconfig");
+    }
+    const config = parsed.config as Record<string, unknown>;
+
+    const exclude = Array.isArray(config.exclude) ? [...(config.exclude as string[])] : [];
+    const ext = BRAND.fileExtension;
+    const alreadyExcluded = exclude.some(
+      (pattern: string) =>
+        pattern.includes(`*${ext}`) || pattern.includes("*.fragment.*") || pattern.includes("*.contract.*")
+    );
+
+    if (alreadyExcluded) {
+      console.log(
+        pc.dim(`  · ${ext} already excluded in ${tsconfigName}`)
+      );
+      return;
+    }
+
+    exclude.push(`**/*${ext}`);
+    config.exclude = exclude;
+    const updated = `${JSON.stringify(config, null, 2)}\n`;
+
+    await writeFile(tsconfigPath, updated, "utf-8");
+    console.log(
+      pc.green(`  ✓ Added ${ext} exclusion to ${tsconfigName}`)
+    );
+  } catch (e) {
+    console.log(
+      pc.yellow(
+        `  ⚠ Could not update ${tsconfigName}: ${e instanceof Error ? e.message : String(e)}`
+      )
+    );
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Main orchestrator
 // ---------------------------------------------------------------------------
@@ -302,14 +474,27 @@ export async function scanGenerate(
         componentBaseName
       );
 
-      // Generate the fragment file
-      const content = generateFragmentWithTodos(
-        comp.name,
-        importPath,
-        data,
-        confidence,
-        enrichment
-      );
+      // Generate the fragment file — contract.json or legacy TSX
+      let content: string;
+      if (fragmentPath.endsWith('.contract.json')) {
+        content = generateContractJsonFromScan(
+          comp.name,
+          componentBaseName,
+          data,
+          confidence,
+          comp.sourcePath,
+          scanPath,
+          enrichment,
+        );
+      } else {
+        content = generateFragmentWithTodos(
+          comp.name,
+          importPath,
+          data,
+          confidence,
+          enrichment
+        );
+      }
 
       await writeFile(fragmentPath, content, "utf-8");
 
@@ -343,6 +528,13 @@ export async function scanGenerate(
     }
   }
 
+  // Post-generation setup: ensure @fragments-sdk/core is installed and
+  // exclude .fragment.tsx files from the host project's tsconfig
+  if (generated.length > 0) {
+    await ensureCoreDependency(scanPath);
+    await excludeFragmentsFromTsconfig(scanPath);
+  }
+
   // Summary
   const avgConfidence =
     generated.length > 0
@@ -754,12 +946,12 @@ export function buildEnrichmentUserPrompt(
   data: ComponentData
 ): string {
   const props = data.meta?.props ?? {};
-  const localProps = Object.entries(props).filter(([_, p]) => p.source === 'local');
+  const fragmentProps = getFragmentPropEntries(props);
   const composition = data.meta?.composition ?? null;
   const description = data.meta?.description || '';
   const category = inferCategoryFromMeta(
     name,
-    Object.fromEntries(localProps)
+    Object.fromEntries(fragmentProps)
   );
 
   const lines: string[] = [
@@ -771,10 +963,10 @@ export function buildEnrichmentUserPrompt(
     lines.push(`Description: ${description}`);
   }
 
-  if (localProps.length > 0) {
+  if (fragmentProps.length > 0) {
     lines.push('');
     lines.push('Props:');
-    for (const [propName, prop] of localProps) {
+    for (const [propName, prop] of fragmentProps) {
       let propLine = `  - ${propName}: ${prop.typeKind}`;
       if (prop.values && prop.values.length > 0) {
         propLine += ` (${prop.values.join(' | ')})`;
@@ -962,10 +1154,8 @@ export function calculateFieldConfidence(
   const todoFields: string[] = [];
 
   const props = data.meta?.props ?? {};
-  // Use only local props — inherited HTML/React props inflate confidence
-  // without adding value to the generated fragment output
-  const localEntries = Object.values(props).filter(p => p.source === 'local');
-  const hasProps = localEntries.length > 0;
+  const fragmentPropEntries = getFragmentPropEntries(props);
+  const hasProps = fragmentPropEntries.length > 0;
 
   // Props extracted: +30
   if (hasProps) {
@@ -980,10 +1170,8 @@ export function calculateFieldConfidence(
   }
 
   // Category inferred from path/name (not fallback): +10
-  const localProps = Object.fromEntries(
-    Object.entries(props).filter(([_, p]) => p.source === 'local')
-  );
-  const category = inferCategoryFromMeta(data.component.name, localProps);
+  const fragmentProps = Object.fromEntries(fragmentPropEntries);
+  const category = inferCategoryFromMeta(data.component.name, fragmentProps);
   if (category !== "Components") {
     score += 10;
   } else {
@@ -997,7 +1185,7 @@ export function calculateFieldConfidence(
 
   // All prop types resolved (no "custom"): +10
   if (hasProps) {
-    const allResolved = localEntries.every((p) => p.typeKind !== "custom");
+    const allResolved = fragmentPropEntries.every(([_, p]) => p.typeKind !== "custom");
     if (allResolved) {
       score += 10;
     }
@@ -1010,7 +1198,7 @@ export function calculateFieldConfidence(
 
   // Has default values: +5
   if (hasProps) {
-    const hasDefaults = localEntries.some((p) => p.default !== undefined);
+    const hasDefaults = fragmentPropEntries.some(([_, p]) => p.default !== undefined);
     if (hasDefaults) {
       score += 5;
     }
@@ -1179,21 +1367,70 @@ interface ContractBlock {
   scenarioTags?: string[];
 }
 
+const INHERITED_PROP_PRIORITY = [
+  "htmlFor",
+  "type",
+  "value",
+  "defaultValue",
+  "checked",
+  "defaultChecked",
+  "disabled",
+  "required",
+  "placeholder",
+  "name",
+  "id",
+  "form",
+  "accept",
+  "multiple",
+  "min",
+  "max",
+  "step",
+  "pattern",
+  "role",
+  "children",
+] as const;
+
+function getFragmentPropEntries(props: Record<string, PropMeta>): Array<[string, PropMeta]> {
+  const entries = Object.entries(props);
+  const localEntries = entries.filter(([_, prop]) => prop.source === "local");
+  if (localEntries.length > 0) {
+    return localEntries;
+  }
+
+  const prioritized = new Set(INHERITED_PROP_PRIORITY);
+  const inheritedEntries = entries
+    .filter(([name, prop]) => {
+      if (prop.source !== "inherited") return false;
+      if (name === "key" || name === "ref" || name === "className" || name === "style") return false;
+      if (name.startsWith("on")) return false;
+      if (name.startsWith("aria-") || name.startsWith("data-")) return false;
+      return prioritized.has(name as typeof INHERITED_PROP_PRIORITY[number]);
+    })
+    .sort(([nameA], [nameB]) => {
+      const rankA = INHERITED_PROP_PRIORITY.indexOf(nameA as typeof INHERITED_PROP_PRIORITY[number]);
+      const rankB = INHERITED_PROP_PRIORITY.indexOf(nameB as typeof INHERITED_PROP_PRIORITY[number]);
+      return rankA - rankB;
+    });
+
+  return inheritedEntries.slice(0, 8);
+}
+
 function buildContractBlock(
   componentName: string,
   props: Record<string, PropMeta>,
   composition: CompositionMeta | null,
-  accessibility: { role?: string; requirements?: string[] }
+  accessibility: { role?: string; requirements?: string[] },
+  compoundPartRefs: CompoundPartReference[] = []
 ): ContractBlock | null {
-  const localEntries = Object.entries(props).filter(([_, p]) => p.source === 'local');
-  if (localEntries.length === 0 && !composition && !accessibility.requirements?.length) {
+  const relevantEntries = getFragmentPropEntries(props);
+  if (relevantEntries.length === 0 && !composition && !accessibility.requirements?.length) {
     return null;
   }
 
   const contract: ContractBlock = { propsSummary: [] };
 
   // propsSummary: "propName: value1 | value2 | value3" for enums, "propName: type" otherwise
-  for (const [name, prop] of localEntries) {
+  for (const [name, prop] of relevantEntries) {
     let summary = name + ': ';
     if (prop.typeKind === 'enum' && prop.values && prop.values.length > 0) {
       summary += prop.values.join(' | ');
@@ -1227,8 +1464,12 @@ function buildContractBlock(
 
   // canonicalUsage: generate 1 JSX snippet using actual component + sub-component names
   if (composition && composition.parts.length > 0) {
-    const innerLines = composition.parts
-      .map(part => `  <${componentName}.${part.name}>...</${componentName}.${part.name}>`)
+    const resolvedParts = compoundPartRefs.length > 0
+      ? compoundPartRefs
+      : composition.parts.map((part) => ({ partName: part.name, tagName: `${componentName}.${part.name}` }));
+
+    const innerLines = resolvedParts
+      .map((part) => `  <${part.tagName}>...</${part.tagName}>`)
       .join('\n');
     contract.canonicalUsage = [
       `<${componentName}>\n${innerLines}\n</${componentName}>`,
@@ -1346,6 +1587,30 @@ function escapeQuotes(str: string): string {
   return str.replace(/'/g, "\\'");
 }
 
+function resolveCompoundPartReferences(
+  componentName: string,
+  composition: CompositionMeta | null,
+  exportNames: string[]
+): CompoundPartReference[] {
+  if (!composition || composition.parts.length === 0) return [];
+
+  return composition.parts.map((part) => {
+    const directExportName = `${componentName}${part.name}`;
+    if (exportNames.includes(directExportName)) {
+      return {
+        partName: part.name,
+        tagName: directExportName,
+        importName: directExportName,
+      };
+    }
+
+    return {
+      partName: part.name,
+      tagName: `${componentName}.${part.name}`,
+    };
+  });
+}
+
 function generateFragmentWithTodos(
   componentName: string,
   importPath: string,
@@ -1354,26 +1619,38 @@ function generateFragmentWithTodos(
   enrichment?: EnrichmentResult
 ): string {
   const props = data.meta?.props ?? {};
-  // Use only local props for inference — inherited HTML/React props cause
-  // wrong descriptions (e.g., Card getting "Form card for user input" from
-  // inherited defaultValue) and wrong roles (e.g., Card getting role: 'button'
-  // from inherited onClick)
   const localProps = Object.fromEntries(
     Object.entries(props).filter(([_, p]) => p.source === 'local')
   );
+  const fragmentProps = Object.fromEntries(getFragmentPropEntries(props));
+  const inferenceProps = Object.keys(localProps).length > 0 ? localProps : fragmentProps;
   const composition = data.meta?.composition ?? null;
-  const description = data.meta?.description || inferDescriptionFromMeta(componentName, localProps);
+  const description = data.meta?.description || inferDescriptionFromMeta(componentName, inferenceProps);
   const descriptionTodo = data.meta?.description ? "" : " // TODO: Review description";
-  const category = inferCategoryFromMeta(componentName, localProps);
+  const category = inferCategoryFromMeta(componentName, inferenceProps);
   const categoryTodo = category === "Components" ? " // TODO: Set correct category" : "";
   const status = inferStatus(data.component.sourcePath);
-  const accessibility = inferAccessibilityFromMeta(localProps);
+  const accessibility = inferAccessibilityFromMeta(inferenceProps);
+  const exportNames = data.meta?.exports ?? [];
+  const compoundPartRefs = resolveCompoundPartReferences(componentName, composition, exportNames);
+  const importNames = Array.from(
+    new Set([
+      componentName,
+      ...compoundPartRefs.flatMap((part) => (part.importName ? [part.importName] : [])),
+    ])
+  );
 
   // Build props block from PropMeta
   const propsBlock = buildPropsBlockFromMeta(props);
 
   // Build contract block — enrichment can replace/augment a11yRules and add scenarioTags
-  const contract = buildContractBlock(componentName, props, composition, accessibility);
+  const contract = buildContractBlock(
+    componentName,
+    props,
+    composition,
+    accessibility,
+    compoundPartRefs
+  );
   if (contract && enrichment) {
     if (enrichment.a11yRules.length > 0) {
       contract.a11yRules = enrichment.a11yRules;
@@ -1408,11 +1685,12 @@ function generateFragmentWithTodos(
   const variantsBlock = buildVariantsBlock(
     componentName,
     data.storyVariants,
-    composition
+    composition,
+    compoundPartRefs
   );
 
   // Build AI metadata block with composition info
-  const aiBlock = buildAIBlock(composition);
+  const aiBlock = buildAIBlock(composition, compoundPartRefs);
 
   // Build provenance block
   const provenanceBlock = buildProvenanceBlock(confidence, props);
@@ -1424,9 +1702,8 @@ function generateFragmentWithTodos(
 
   return `// Auto-generated by fragments init --scan | Confidence: ${confidence.score}/100
 // ${confidence.todoFields.length} TODO(s) — search for "TODO:" and fill in human knowledge${compoundComment}
-import React from 'react';
 import { defineFragment } from '@fragments-sdk/core';
-import { ${componentName} } from '${importPath}';
+import { ${importNames.join(", ")} } from '${importPath}';
 
 export default defineFragment({
   component: ${componentName},
@@ -1450,7 +1727,7 @@ ${provenanceBlock}});
 }
 
 function buildPropsBlockFromMeta(props: Record<string, PropMeta>): string {
-  const entries = Object.entries(props).filter(([_, p]) => p.source === 'local');
+  const entries = getFragmentPropEntries(props);
   if (entries.length === 0) return "{}";
 
   const lines = entries.map(([name, prop]) => {
@@ -1485,7 +1762,8 @@ function buildPropsBlockFromMeta(props: Record<string, PropMeta>): string {
 function buildVariantsBlock(
   componentName: string,
   storyVariants: StoryVariant[],
-  composition?: CompositionMeta | null
+  composition?: CompositionMeta | null,
+  compoundPartRefs: CompoundPartReference[] = []
 ): string {
   const entries: string[] = [];
 
@@ -1494,7 +1772,7 @@ function buildVariantsBlock(
   if (!hasDefault) {
     if (composition && composition.pattern === 'compound' && composition.parts.length > 0) {
       // Generate a compound-aware default variant
-      entries.push(formatCompoundVariantEntry(componentName, composition));
+      entries.push(formatCompoundVariantEntry(componentName, composition, compoundPartRefs));
     } else {
       entries.push(formatVariantEntry(componentName, "Default", `Default ${componentName}`, {}));
     }
@@ -1535,11 +1813,15 @@ function formatVariantEntry(
  */
 function formatCompoundVariantEntry(
   componentName: string,
-  composition: CompositionMeta
+  composition: CompositionMeta,
+  compoundPartRefs: CompoundPartReference[] = []
 ): string {
-  const parts = composition.parts;
-  const innerJsx = parts
-    .map((part) => `    <${componentName}.${part.name}>...</${componentName}.${part.name}>`)
+  const resolvedParts = compoundPartRefs.length > 0
+    ? compoundPartRefs
+    : composition.parts.map((part) => ({ partName: part.name, tagName: `${componentName}.${part.name}` }));
+
+  const innerJsx = resolvedParts
+    .map((part) => `    <${part.tagName}>...</${part.tagName}>`)
     .join('\n');
 
   const jsxCode = `<${componentName}>\n${innerJsx}\n  </${componentName}>`;
@@ -1555,11 +1837,24 @@ function formatCompoundVariantEntry(
 /**
  * Build the ai block with composition metadata.
  */
-function buildAIBlock(composition: CompositionMeta | null): string {
+function buildAIBlock(
+  composition: CompositionMeta | null,
+  compoundPartRefs: CompoundPartReference[] = []
+): string {
   if (!composition || composition.parts.length === 0) return "";
 
-  const subComponents = composition.parts.map((p) => `'${p.name}'`).join(', ');
-  const pattern = `\n      <Component>\n${composition.parts.map((p) => `        <Component.${p.name}>...</Component.${p.name}>`).join('\n')}\n      </Component>`;
+  const resolvedParts = compoundPartRefs.length > 0
+    ? compoundPartRefs
+    : composition.parts.map<CompoundPartReference>((part) => ({
+        partName: part.name,
+        tagName: `Component.${part.name}`,
+      }));
+  const subComponents = resolvedParts
+    .map((part) => `'${part.importName ?? part.partName}'`)
+    .join(', ');
+  const pattern = `\n      <Component>\n${resolvedParts
+    .map((part) => `        <${part.tagName}>...</${part.tagName}>`)
+    .join('\n')}\n      </Component>`;
 
   return `
 
@@ -1612,3 +1907,96 @@ function buildJsxString(
 
   return `<${componentName}${propsStr} />`;
 }
+
+// ---------------------------------------------------------------------------
+// Contract JSON generator for init --scan
+// ---------------------------------------------------------------------------
+
+function generateContractJsonFromScan(
+  componentName: string,
+  _baseName: string,
+  data: ComponentData,
+  confidence: FieldConfidence,
+  sourcePath: string,
+  scanPath: string,
+  enrichment?: EnrichmentResult,
+): string {
+  const props = data.meta?.props ?? {};
+  const localProps = Object.fromEntries(
+    Object.entries(props).filter(([, p]) => p.source === 'local')
+  );
+  // Fall back to all props if no local props (wrapper components like shadcn Label)
+  const effectiveProps = Object.keys(localProps).length > 0 ? localProps : props;
+  const composition = data.meta?.composition ?? null;
+  const description = data.meta?.description || `${componentName} component`;
+  const category = inferCategoryFromMeta(componentName, effectiveProps);
+
+  // Build props schema
+  const propsSchema: Record<string, unknown> = {};
+  for (const [name, prop] of Object.entries(effectiveProps)) {
+    propsSchema[name] = {
+      type: prop.typeKind,
+      description: prop.description ?? '',
+      ...(prop.values?.length && { values: prop.values }),
+      ...(prop.default !== undefined && { default: prop.default }),
+      ...(prop.required && { required: true }),
+    };
+  }
+
+  // Build propsSummary
+  const propsSummary = Object.entries(effectiveProps).map(([name, prop]) => {
+    let summary = `${name}: `;
+    if (prop.values?.length) {
+      summary += prop.values.join('|');
+    } else {
+      summary += prop.typeKind;
+    }
+    if (prop.default !== undefined) summary += ` (default: ${prop.default})`;
+    if (prop.required) summary += ' (required)';
+    return summary;
+  });
+
+  // Build AI metadata
+  let ai: Record<string, unknown> | undefined;
+  if (composition) {
+    ai = {
+      compositionPattern: composition.pattern,
+      subComponents: composition.parts.map(p => p.name),
+      ...(composition.required.length > 0 && { requiredChildren: composition.required }),
+    };
+  }
+
+  // Resolve sourcePath relative to scanPath
+  const relativeSourcePath = relative(scanPath, sourcePath);
+
+  // Use enrichment if available
+  const usage = enrichment ? {
+    when: enrichment.when ?? [],
+    whenNot: enrichment.whenNot ?? [],
+    ...(enrichment.guidelines?.length && { guidelines: enrichment.guidelines }),
+  } : {
+    when: [],
+    whenNot: [],
+  };
+
+  const contract = {
+    $schema: 'https://usefragments.com/schemas/contract.v1.json',
+    name: componentName,
+    description,
+    category,
+    sourcePath: relativeSourcePath,
+    exportName: componentName,
+    propsSummary,
+    props: propsSchema,
+    usage,
+    ...(ai && { ai }),
+    provenance: {
+      source: 'extracted' as const,
+      verified: confidence.score >= 70,
+      frameworkSupport: 'native' as const,
+      extractedAt: new Date().toISOString(),
+    },
+  };
+
+  return JSON.stringify(contract, null, 2) + '\n';
+}

package/src/commands/scan.ts

@@ -146,6 +146,7 @@ export async function scan(options: ScanOptions = {}): Promise<ScanResult> {
     try {
       const extraction = await extractPropsFromFile(comp.sourcePath, {
         propsTypeName: `${comp.name}Props`,
+        componentName: comp.name,
       });
 
       propsResults.set(comp.name, extraction);