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/index.cjs CHANGED Viewed

@@ -8,6 +8,7 @@ var playwright = require('@agent-scope/playwright');
 var playwright$1 = require('playwright');
 var render = require('@agent-scope/render');
 var esbuild = require('esbuild');
+var module$1 = require('module');
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -337,7 +338,7 @@ function writeReportToFile(report, outputPath, pretty) {
   const json = pretty ? JSON.stringify(report, null, 2) : JSON.stringify(report);
   fs.writeFileSync(outputPath, json, "utf-8");
 }
-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);
 }
@@ -425,7 +426,8 @@ ${msg}`);
   }
   return outputFile.text;
 }
-function wrapInHtml(bundledScript, viewportWidth) {
+function wrapInHtml(bundledScript, viewportWidth, projectCss) {
+  const projectStyleBlock = "";
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -436,6 +438,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>
@@ -603,6 +606,121 @@ function csvEscape(value) {
   }
   return value;
 }
+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 && path.resolve(compilerCache.cwd) === path.resolve(cwd)) {
+    return compilerCache.build;
+  }
+  return null;
+}
+function findStylesEntry(cwd) {
+  for (const name of CONFIG_FILENAMES) {
+    const p = path.resolve(cwd, name);
+    if (!fs.existsSync(p)) continue;
+    try {
+      if (name.endsWith(".json")) {
+        const raw = fs.readFileSync(p, "utf-8");
+        const data = JSON.parse(raw);
+        const scope = data.scope;
+        const entry = scope?.stylesEntry ?? data.stylesEntry;
+        if (typeof entry === "string") {
+          const full = path.resolve(cwd, entry);
+          if (fs.existsSync(full)) return full;
+        }
+      }
+    } catch {
+    }
+  }
+  const pkgPath = path.resolve(cwd, "package.json");
+  if (fs.existsSync(pkgPath)) {
+    try {
+      const raw = fs.readFileSync(pkgPath, "utf-8");
+      const pkg = JSON.parse(raw);
+      const entry = pkg.scope?.stylesEntry;
+      if (typeof entry === "string") {
+        const full = path.resolve(cwd, entry);
+        if (fs.existsSync(full)) return full;
+      }
+    } catch {
+    }
+  }
+  for (const candidate of STYLE_ENTRY_CANDIDATES) {
+    const full = path.resolve(cwd, candidate);
+    if (fs.existsSync(full)) {
+      try {
+        const content = fs.readFileSync(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 = module$1.createRequire(path.resolve(cwd, "package.json"));
+    const tailwind = require2("tailwindcss");
+    const fn = tailwind.compile;
+    if (typeof fn !== "function") return null;
+    compile = fn;
+  } catch {
+    return null;
+  }
+  const entryContent = fs.readFileSync(entryPath, "utf-8");
+  const loadStylesheet = async (id, base) => {
+    if (id === "tailwindcss") {
+      const nodeModules = path.resolve(cwd, "node_modules");
+      const tailwindCssPath = path.resolve(nodeModules, "tailwindcss", "index.css");
+      if (!fs.existsSync(tailwindCssPath)) {
+        throw new Error(
+          `Tailwind v4: tailwindcss package not found at ${tailwindCssPath}. Install with: npm install tailwindcss`
+        );
+      }
+      const content = fs.readFileSync(tailwindCssPath, "utf-8");
+      return { path: "virtual:tailwindcss/index.css", base, content };
+    }
+    const full = path.resolve(base, id);
+    if (fs.existsSync(full)) {
+      const content = fs.readFileSync(full, "utf-8");
+      return { path: full, base: path.resolve(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";
@@ -657,6 +775,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();
@@ -665,13 +797,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 = {};
@@ -698,8 +836,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
         };