@agent-scope/cli 1.20.1 → 1.20.3

package/dist/cli.js

@@ -492,6 +492,11 @@ var STYLE_ENTRY_CANDIDATES = [
   "index.css"
 ];
 var TAILWIND_IMPORT = /@import\s+["']tailwindcss["']\s*;?/;
+function getElementClassNames(el) {
+  const className = el.className;
+  const raw = typeof className === "string" ? className : typeof className?.baseVal === "string" ? className.baseVal : el.getAttribute("class") ?? "";
+  return raw.split(/\s+/).filter(Boolean);
+}
 var compilerCache = null;
 function getCachedBuild(cwd) {
   if (compilerCache !== null && resolve(compilerCache.cwd) === resolve(cwd)) {
@@ -712,8 +717,8 @@ async function renderComponent(filePath, componentName, props, viewportWidth, vi
     const classes = await page.evaluate(() => {
       const set = /* @__PURE__ */ new Set();
       document.querySelectorAll("[class]").forEach((el) => {
-        for (const c of el.className.split(/\s+/)) {
-          if (c) set.add(c);
+        for (const c of getElementClassNames(el)) {
+          set.add(c);
         }
       });
       return [...set];
@@ -3894,7 +3899,7 @@ Examples:
 }
 
 // src/render-commands.ts
-import { existsSync as existsSync9, mkdirSync as mkdirSync5, readFileSync as readFileSync9, writeFileSync as writeFileSync6 } from "fs";
+import { existsSync as existsSync9, mkdirSync as mkdirSync5, readFileSync as readFileSync9, rmSync as rmSync2, writeFileSync as writeFileSync6 } from "fs";
 import { resolve as resolve11 } from "path";
 import {
   ALL_CONTEXT_IDS,
@@ -4152,6 +4157,39 @@ function formatAggregateRenderFailureJson(componentName, failures, scenarioCount
 }
 var MANIFEST_PATH6 = ".reactscope/manifest.json";
 var DEFAULT_OUTPUT_DIR = ".reactscope/renders";
+function renderArtifactBaseName(componentName, scenarioName) {
+  return scenarioName === void 0 ? componentName : `${componentName}-${scenarioName}`;
+}
+function removeStaleRenderError(outputDir, componentName, scenarioName) {
+  const errorPath = resolve11(
+    outputDir,
+    `${renderArtifactBaseName(componentName, scenarioName)}.error.json`
+  );
+  if (existsSync9(errorPath)) {
+    rmSync2(errorPath, { force: true });
+  }
+}
+function writeRenderErrorArtifact(outputDir, failure) {
+  const errPath = resolve11(
+    outputDir,
+    `${renderArtifactBaseName(failure.component, failure.scenario)}.error.json`
+  );
+  writeFileSync6(
+    errPath,
+    JSON.stringify(
+      {
+        component: failure.component,
+        scenario: failure.scenario,
+        errorMessage: failure.errorMessage,
+        heuristicFlags: failure.heuristicFlags,
+        propsAtCrash: failure.propsAtCrash
+      },
+      null,
+      2
+    )
+  );
+  return errPath;
+}
 var _pool3 = null;
 async function getPool3(viewportWidth, viewportHeight) {
   if (_pool3 === null) {
@@ -4211,8 +4249,8 @@ function buildRenderer(filePath, componentName, viewportWidth, viewportHeight, g
         const classes = await page.evaluate(() => {
           const set = /* @__PURE__ */ new Set();
           document.querySelectorAll("[class]").forEach((el) => {
-            for (const c of el.className.split(/\s+/)) {
-              if (c) set.add(c);
+            for (const c of getElementClassNames(el)) {
+              set.add(c);
             }
           });
           return [...set];
@@ -4836,20 +4874,12 @@ function registerRenderAll(renderCmd) {
               success: false,
               errorMessage: outcome.error.message
             });
-            const errPath = resolve11(outputDir, `${name}.error.json`);
-            writeFileSync6(
-              errPath,
-              JSON.stringify(
-                {
-                  component: name,
-                  errorMessage: outcome.error.message,
-                  heuristicFlags: outcome.error.heuristicFlags,
-                  propsAtCrash: outcome.error.propsAtCrash
-                },
-                null,
-                2
-              )
-            );
+            const errPath = writeRenderErrorArtifact(outputDir, {
+              component: name,
+              errorMessage: outcome.error.message,
+              heuristicFlags: outcome.error.heuristicFlags,
+              propsAtCrash: outcome.error.propsAtCrash
+            });
             failures.push({
               component: name,
               stage: "render",
@@ -4862,13 +4892,14 @@ function registerRenderAll(renderCmd) {
           }
           const result = outcome.result;
           results.push({ name, renderTimeMs: result.renderTimeMs, success: true });
+          removeStaleRenderError(outputDir, name);
           if (!isIcon) {
             const pngPath = resolve11(outputDir, `${name}.png`);
             writeFileSync6(pngPath, result.screenshot);
             outputPaths.push(pngPath);
           }
           const jsonPath = resolve11(outputDir, `${name}.json`);
-          const renderJson = formatRenderJson(name, {}, result);
+          const renderJson = formatRenderJson(name, renderProps, result);
           const extResult = result;
           if (isIcon && extResult.svgContent) {
             renderJson.svgContent = extResult.svgContent;
@@ -4929,13 +4960,34 @@ function registerRenderAll(renderCmd) {
                 concurrency: 2
               });
               const matrixResult = await matrix.render();
-              const matrixCells = matrixResult.cells.map((cell) => ({
-                axisValues: [scenarioEntries2[cell.axisIndices[0] ?? 0]?.[0] ?? ""],
-                screenshot: cell.result.screenshot.toString("base64"),
-                width: cell.result.width,
-                height: cell.result.height,
-                renderTimeMs: cell.result.renderTimeMs
-              }));
+              const matrixCells = matrixResult.cells.map((cell) => {
+                const scenarioName = scenarioEntries2[cell.axisIndices[0] ?? 0]?.[0] ?? "";
+                const artifactBaseName = renderArtifactBaseName(name, scenarioName);
+                const scenarioPngPath = resolve11(outputDir, `${artifactBaseName}.png`);
+                const scenarioJsonPath = resolve11(outputDir, `${artifactBaseName}.json`);
+                if (!isIcon) {
+                  writeFileSync6(scenarioPngPath, cell.result.screenshot);
+                  outputPaths.push(scenarioPngPath);
+                }
+                const scenarioJson = formatRenderJson(
+                  `${name}:${scenarioName}`,
+                  scenarioPropsMap[scenarioName] ?? {},
+                  cell.result
+                );
+                writeFileSync6(scenarioJsonPath, JSON.stringify(scenarioJson, null, 2));
+                outputPaths.push(scenarioJsonPath);
+                removeStaleRenderError(outputDir, name, scenarioName);
+                return {
+                  axisValues: [scenarioName],
+                  scenario: scenarioName,
+                  outputPath: scenarioJsonPath,
+                  screenshotPath: isIcon ? void 0 : scenarioPngPath,
+                  screenshot: cell.result.screenshot.toString("base64"),
+                  width: cell.result.width,
+                  height: cell.result.height,
+                  renderTimeMs: cell.result.renderTimeMs
+                };
+              });
               const existingJson = JSON.parse(readFileSync9(jsonPath, "utf-8"));
               existingJson.cells = matrixCells;
               existingJson.axisLabels = [scenarioAxis.values];
@@ -5042,7 +5094,7 @@ function createRenderCommand() {
 }
 
 // src/report/baseline.ts
-import { existsSync as existsSync10, mkdirSync as mkdirSync6, rmSync as rmSync2, writeFileSync as writeFileSync7 } from "fs";
+import { existsSync as existsSync10, mkdirSync as mkdirSync6, rmSync as rmSync3, writeFileSync as writeFileSync7 } from "fs";
 import { resolve as resolve12 } from "path";
 import { generateManifest as generateManifest4 } from "@agent-scope/manifest";
 import { BrowserPool as BrowserPool4, safeRender as safeRender3 } from "@agent-scope/render";
@@ -5099,8 +5151,8 @@ async function renderComponent2(filePath, componentName, props, viewportWidth, v
     const classes = await page.evaluate(() => {
       const set = /* @__PURE__ */ new Set();
       document.querySelectorAll("[class]").forEach((el) => {
-        for (const c of el.className.split(/\s+/)) {
-          if (c) set.add(c);
+        for (const c of getElementClassNames(el)) {
+          set.add(c);
         }
       });
       return [...set];
@@ -5203,7 +5255,7 @@ async function runBaseline(options = {}) {
   const baselineDir = resolve12(rootDir, outputDir);
   const rendersDir = resolve12(baselineDir, "renders");
   if (existsSync10(baselineDir)) {
-    rmSync2(baselineDir, { recursive: true, force: true });
+    rmSync3(baselineDir, { recursive: true, force: true });
   }
   mkdirSync6(rendersDir, { recursive: true });
   let manifest;
@@ -5444,8 +5496,8 @@ async function renderComponent3(filePath, componentName, props, viewportWidth, v
     const classes = await page.evaluate(() => {
       const set = /* @__PURE__ */ new Set();
       document.querySelectorAll("[class]").forEach((el) => {
-        for (const c of el.className.split(/\s+/)) {
-          if (c) set.add(c);
+        for (const c of getElementClassNames(el)) {
+          set.add(c);
         }
       });
       return [...set];