npm - @agent-scope/cli - Versions diffs - 1.0.1 → 1.1.0 - Mend

@agent-scope/cli 1.0.1 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/cli.js CHANGED Viewed

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 // src/program.ts
-import { readFileSync as readFileSync2 } from "fs";
+import { readFileSync as readFileSync3 } from "fs";
 import { generateTest, loadTrace } from "@agent-scope/playwright";
 import { Command as Command3 } from "commander";
@@ -325,7 +325,7 @@ function createManifestCommand() {
 // src/render-commands.ts
 import { mkdirSync as mkdirSync2, writeFileSync as writeFileSync3 } from "fs";
-import { resolve as resolve2 } from "path";
+import { resolve as resolve3 } from "path";
 import {
   ALL_CONTEXT_IDS,
   ALL_STRESS_IDS,
@@ -341,9 +341,9 @@ import { Command as Command2 } from "commander";
 // src/component-bundler.ts
 import { dirname } from "path";
 import * as esbuild from "esbuild";
-async function buildComponentHarness(filePath, componentName, props, viewportWidth) {
+async function buildComponentHarness(filePath, componentName, props, viewportWidth, projectCss) {
   const bundledScript = await bundleComponentToIIFE(filePath, componentName, props);
-  return wrapInHtml(bundledScript, viewportWidth);
+  return wrapInHtml(bundledScript, viewportWidth, projectCss);
 }
 async function bundleComponentToIIFE(filePath, componentName, props) {
   const propsJson = JSON.stringify(props).replace(/<\/script>/gi, "<\\/script>");
@@ -429,7 +429,10 @@ ${msg}`);
   }
   return outputFile.text;
 }
-function wrapInHtml(bundledScript, viewportWidth) {
+function wrapInHtml(bundledScript, viewportWidth, projectCss) {
+  const projectStyleBlock = projectCss != null && projectCss.length > 0 ? `<style id="scope-project-css">
+${projectCss.replace(/<\/style>/gi, "<\\/style>")}
+</style>` : "";
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -440,6 +443,7 @@ function wrapInHtml(bundledScript, viewportWidth) {
     html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
     #scope-root { display: inline-block; min-width: 1px; min-height: 1px; }
   </style>
+  ${projectStyleBlock}
 </head>
 <body>
   <div id="scope-root" data-reactscope-root></div>
@@ -608,6 +612,126 @@ function csvEscape(value) {
   return value;
 }
+// src/tailwind-css.ts
+import { existsSync as existsSync2, readFileSync as readFileSync2 } from "fs";
+import { createRequire } from "module";
+import { resolve as resolve2 } from "path";
+var CONFIG_FILENAMES = [
+  ".reactscope/config.json",
+  ".reactscope/config.js",
+  ".reactscope/config.mjs"
+];
+var STYLE_ENTRY_CANDIDATES = [
+  "src/index.css",
+  "src/globals.css",
+  "app/globals.css",
+  "app/index.css",
+  "styles/index.css",
+  "index.css"
+];
+var TAILWIND_IMPORT = /@import\s+["']tailwindcss["']\s*;?/;
+var compilerCache = null;
+function getCachedBuild(cwd) {
+  if (compilerCache !== null && resolve2(compilerCache.cwd) === resolve2(cwd)) {
+    return compilerCache.build;
+  }
+  return null;
+}
+function findStylesEntry(cwd) {
+  for (const name of CONFIG_FILENAMES) {
+    const p = resolve2(cwd, name);
+    if (!existsSync2(p)) continue;
+    try {
+      if (name.endsWith(".json")) {
+        const raw = readFileSync2(p, "utf-8");
+        const data = JSON.parse(raw);
+        const scope = data.scope;
+        const entry = scope?.stylesEntry ?? data.stylesEntry;
+        if (typeof entry === "string") {
+          const full = resolve2(cwd, entry);
+          if (existsSync2(full)) return full;
+        }
+      }
+    } catch {
+    }
+  }
+  const pkgPath = resolve2(cwd, "package.json");
+  if (existsSync2(pkgPath)) {
+    try {
+      const raw = readFileSync2(pkgPath, "utf-8");
+      const pkg = JSON.parse(raw);
+      const entry = pkg.scope?.stylesEntry;
+      if (typeof entry === "string") {
+        const full = resolve2(cwd, entry);
+        if (existsSync2(full)) return full;
+      }
+    } catch {
+    }
+  }
+  for (const candidate of STYLE_ENTRY_CANDIDATES) {
+    const full = resolve2(cwd, candidate);
+    if (existsSync2(full)) {
+      try {
+        const content = readFileSync2(full, "utf-8");
+        if (TAILWIND_IMPORT.test(content)) return full;
+      } catch {
+      }
+    }
+  }
+  return null;
+}
+async function getTailwindCompiler(cwd) {
+  const cached = getCachedBuild(cwd);
+  if (cached !== null) return cached;
+  const entryPath = findStylesEntry(cwd);
+  if (entryPath === null) return null;
+  let compile;
+  try {
+    const require2 = createRequire(resolve2(cwd, "package.json"));
+    const tailwind = require2("tailwindcss");
+    const fn = tailwind.compile;
+    if (typeof fn !== "function") return null;
+    compile = fn;
+  } catch {
+    return null;
+  }
+  const entryContent = readFileSync2(entryPath, "utf-8");
+  const loadStylesheet = async (id, base) => {
+    if (id === "tailwindcss") {
+      const nodeModules = resolve2(cwd, "node_modules");
+      const tailwindCssPath = resolve2(nodeModules, "tailwindcss", "index.css");
+      if (!existsSync2(tailwindCssPath)) {
+        throw new Error(
+          `Tailwind v4: tailwindcss package not found at ${tailwindCssPath}. Install with: npm install tailwindcss`
+        );
+      }
+      const content = readFileSync2(tailwindCssPath, "utf-8");
+      return { path: "virtual:tailwindcss/index.css", base, content };
+    }
+    const full = resolve2(base, id);
+    if (existsSync2(full)) {
+      const content = readFileSync2(full, "utf-8");
+      return { path: full, base: resolve2(full, ".."), content };
+    }
+    throw new Error(`Tailwind v4: could not load stylesheet: ${id} (base: ${base})`);
+  };
+  const result = await compile(entryContent, {
+    base: cwd,
+    from: entryPath,
+    loadStylesheet
+  });
+  const build2 = result.build.bind(result);
+  compilerCache = { cwd, build: build2 };
+  return build2;
+}
+async function getCompiledCssForClasses(cwd, classes) {
+  const build2 = await getTailwindCompiler(cwd);
+  if (build2 === null) return null;
+  const deduped = [...new Set(classes)].filter(Boolean);
+  if (deduped.length === 0) return null;
+  return build2(deduped);
+}
 // src/render-commands.ts
 var MANIFEST_PATH2 = ".reactscope/manifest.json";
 var DEFAULT_OUTPUT_DIR = ".reactscope/renders";
@@ -661,6 +785,20 @@ function buildRenderer(filePath, componentName, viewportWidth, viewportHeight) {
         if (renderError !== null) {
           throw new Error(`Component render error: ${renderError}`);
         }
+        const rootDir = process.cwd();
+        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);
+            }
+          });
+          return [...set];
+        });
+        const projectCss = await getCompiledCssForClasses(rootDir, classes);
+        if (projectCss != null && projectCss.length > 0) {
+          await page.addStyleTag({ content: projectCss });
+        }
         const renderTimeMs = performance.now() - startMs;
         const rootLocator = page.locator("[data-reactscope-root]");
         const boundingBox = await rootLocator.boundingBox();
@@ -669,13 +807,19 @@ function buildRenderer(filePath, componentName, viewportWidth, viewportHeight) {
             `Component "${componentName}" rendered with zero bounding box \u2014 it may be invisible or not mounted`
           );
         }
+        const PAD = 24;
+        const MIN_W = 320;
+        const MIN_H = 200;
+        const clipX = Math.max(0, boundingBox.x - PAD);
+        const clipY = Math.max(0, boundingBox.y - PAD);
+        const rawW = boundingBox.width + PAD * 2;
+        const rawH = boundingBox.height + PAD * 2;
+        const clipW = Math.max(rawW, MIN_W);
+        const clipH = Math.max(rawH, MIN_H);
+        const safeW = Math.min(clipW, viewportWidth - clipX);
+        const safeH = Math.min(clipH, viewportHeight - clipY);
         const screenshot = await page.screenshot({
-          clip: {
-            x: boundingBox.x,
-            y: boundingBox.y,
-            width: boundingBox.width,
-            height: boundingBox.height
-          },
+          clip: { x: clipX, y: clipY, width: safeW, height: safeH },
           type: "png"
         });
         const computedStyles = {};
@@ -702,8 +846,8 @@ function buildRenderer(filePath, componentName, viewportWidth, viewportHeight) {
         computedStyles["[data-reactscope-root] > *"] = styles;
         return {
           screenshot,
-          width: Math.round(boundingBox.width),
-          height: Math.round(boundingBox.height),
+          width: Math.round(safeW),
+          height: Math.round(safeH),
           renderTimeMs,
           computedStyles
         };
@@ -736,7 +880,7 @@ Available: ${available}`
         }
         const { width, height } = parseViewport(opts.viewport);
         const rootDir = process.cwd();
-        const filePath = resolve2(rootDir, descriptor.filePath);
+        const filePath = resolve3(rootDir, descriptor.filePath);
         const renderer = buildRenderer(filePath, componentName, width, height);
         process.stderr.write(
           `Rendering ${componentName} [${descriptor.complexityClass}] at ${width}\xD7${height}\u2026
@@ -766,7 +910,7 @@ Available: ${available}`
         }
         const result = outcome.result;
         if (opts.output !== void 0) {
-          const outPath = resolve2(process.cwd(), opts.output);
+          const outPath = resolve3(process.cwd(), opts.output);
           writeFileSync3(outPath, result.screenshot);
           process.stdout.write(
             `\u2713 ${componentName} \u2192 ${opts.output} (${result.width}\xD7${result.height}, ${result.renderTimeMs.toFixed(0)}ms)
@@ -780,9 +924,9 @@ Available: ${available}`
           process.stdout.write(`${JSON.stringify(json, null, 2)}
 `);
         } else if (fmt === "file") {
-          const dir = resolve2(process.cwd(), DEFAULT_OUTPUT_DIR);
+          const dir = resolve3(process.cwd(), DEFAULT_OUTPUT_DIR);
           mkdirSync2(dir, { recursive: true });
-          const outPath = resolve2(dir, `${componentName}.png`);
+          const outPath = resolve3(dir, `${componentName}.png`);
           writeFileSync3(outPath, result.screenshot);
           const relPath = `${DEFAULT_OUTPUT_DIR}/${componentName}.png`;
           process.stdout.write(
@@ -790,9 +934,9 @@ Available: ${available}`
 `
           );
         } else {
-          const dir = resolve2(process.cwd(), DEFAULT_OUTPUT_DIR);
+          const dir = resolve3(process.cwd(), DEFAULT_OUTPUT_DIR);
           mkdirSync2(dir, { recursive: true });
-          const outPath = resolve2(dir, `${componentName}.png`);
+          const outPath = resolve3(dir, `${componentName}.png`);
           writeFileSync3(outPath, result.screenshot);
           const relPath = `${DEFAULT_OUTPUT_DIR}/${componentName}.png`;
           process.stdout.write(
@@ -828,7 +972,7 @@ Available: ${available}`
         const concurrency = Math.max(1, parseInt(opts.concurrency, 10) || 8);
         const { width, height } = { width: 375, height: 812 };
         const rootDir = process.cwd();
-        const filePath = resolve2(rootDir, descriptor.filePath);
+        const filePath = resolve3(rootDir, descriptor.filePath);
         const renderer = buildRenderer(filePath, componentName, width, height);
         const axes = [];
         if (opts.axes !== void 0) {
@@ -895,7 +1039,7 @@ Available: ${available}`
           const { SpriteSheetGenerator } = await import("@agent-scope/render");
           const gen = new SpriteSheetGenerator();
           const sheet = await gen.generate(result);
-          const spritePath = resolve2(process.cwd(), opts.sprite);
+          const spritePath = resolve3(process.cwd(), opts.sprite);
           writeFileSync3(spritePath, sheet.png);
           process.stderr.write(`Sprite sheet saved to ${spritePath}
 `);
@@ -905,9 +1049,9 @@ Available: ${available}`
           const { SpriteSheetGenerator } = await import("@agent-scope/render");
           const gen = new SpriteSheetGenerator();
           const sheet = await gen.generate(result);
-          const dir = resolve2(process.cwd(), DEFAULT_OUTPUT_DIR);
+          const dir = resolve3(process.cwd(), DEFAULT_OUTPUT_DIR);
           mkdirSync2(dir, { recursive: true });
-          const outPath = resolve2(dir, `${componentName}-matrix.png`);
+          const outPath = resolve3(dir, `${componentName}-matrix.png`);
           writeFileSync3(outPath, sheet.png);
           const relPath = `${DEFAULT_OUTPUT_DIR}/${componentName}-matrix.png`;
           process.stdout.write(
@@ -951,7 +1095,7 @@ function registerRenderAll(renderCmd) {
           return;
         }
         const concurrency = Math.max(1, parseInt(opts.concurrency, 10) || 4);
-        const outputDir = resolve2(process.cwd(), opts.outputDir);
+        const outputDir = resolve3(process.cwd(), opts.outputDir);
         mkdirSync2(outputDir, { recursive: true });
         const rootDir = process.cwd();
         process.stderr.write(`Rendering ${total} components (concurrency: ${concurrency})\u2026
@@ -961,7 +1105,7 @@ function registerRenderAll(renderCmd) {
         const renderOne = async (name) => {
           const descriptor = manifest.components[name];
           if (descriptor === void 0) return;
-          const filePath = resolve2(rootDir, descriptor.filePath);
+          const filePath = resolve3(rootDir, descriptor.filePath);
           const renderer = buildRenderer(filePath, name, 375, 812);
           const outcome = await safeRender(
             () => renderer.renderCell({}, descriptor.complexityClass),
@@ -984,7 +1128,7 @@ function registerRenderAll(renderCmd) {
               success: false,
               errorMessage: outcome.error.message
             });
-            const errPath = resolve2(outputDir, `${name}.error.json`);
+            const errPath = resolve3(outputDir, `${name}.error.json`);
             writeFileSync3(
               errPath,
               JSON.stringify(
@@ -1002,9 +1146,9 @@ function registerRenderAll(renderCmd) {
           }
           const result = outcome.result;
           results.push({ name, renderTimeMs: result.renderTimeMs, success: true });
-          const pngPath = resolve2(outputDir, `${name}.png`);
+          const pngPath = resolve3(outputDir, `${name}.png`);
           writeFileSync3(pngPath, result.screenshot);
-          const jsonPath = resolve2(outputDir, `${name}.json`);
+          const jsonPath = resolve3(outputDir, `${name}.json`);
           writeFileSync3(jsonPath, JSON.stringify(formatRenderJson(name, {}, result), null, 2));
           if (isTTY()) {
             process.stdout.write(
@@ -1430,7 +1574,7 @@ function createProgram(options = {}) {
     }
   );
   program2.command("generate").description("Generate a Playwright test from a Scope trace file").argument("<trace>", "Path to a serialized Scope trace (.json)").option("-o, --output <path>", "Output file path", "scope.spec.ts").option("-d, --description <text>", "Test description").action((tracePath, opts) => {
-    const raw = readFileSync2(tracePath, "utf-8");
+    const raw = readFileSync3(tracePath, "utf-8");
     const trace = loadTrace(raw);
     const source = generateTest(trace, {
       description: opts.description,