npm - @agent-scope/cli - Versions diffs - 1.17.2 → 1.18.0 - Mend

@agent-scope/cli 1.17.2 → 1.18.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

@@ -6,14 +6,16 @@ var manifest = require('@agent-scope/manifest');
 var render = require('@agent-scope/render');
 var tokens = require('@agent-scope/tokens');
 var commander = require('commander');
-var esbuild = require('esbuild');
+var esbuild2 = require('esbuild');
 var module$1 = require('module');
 var readline = require('readline');
 var playwright = require('@agent-scope/playwright');
 var playwright$1 = require('playwright');
+var os = require('os');
 var http = require('http');
 var site = require('@agent-scope/site');
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -32,13 +34,13 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
-var esbuild__namespace = /*#__PURE__*/_interopNamespace(esbuild);
+var esbuild2__namespace = /*#__PURE__*/_interopNamespace(esbuild2);
 var readline__namespace = /*#__PURE__*/_interopNamespace(readline);
 // src/ci/commands.ts
-async function buildComponentHarness(filePath, componentName, props, viewportWidth, projectCss) {
+async function buildComponentHarness(filePath, componentName, props, viewportWidth, projectCss, wrapperScript) {
   const bundledScript = await bundleComponentToIIFE(filePath, componentName, props);
-  return wrapInHtml(bundledScript, viewportWidth, projectCss);
+  return wrapInHtml(bundledScript, viewportWidth, projectCss, wrapperScript);
 }
 async function bundleComponentToIIFE(filePath, componentName, props) {
   const propsJson = JSON.stringify(props).replace(/<\/script>/gi, "<\\/script>");
@@ -74,7 +76,12 @@ import { createElement } from "react";
       window.__SCOPE_RENDER_COMPLETE__ = true;
       return;
     }
-    createRoot(rootEl).render(createElement(Component, props));
+    // If a scope file wrapper was injected, use it to wrap the component
+    var Wrapper = (window).__SCOPE_WRAPPER__;
+    var element = Wrapper
+      ? createElement(Wrapper, null, createElement(Component, props))
+      : createElement(Component, props);
+    createRoot(rootEl).render(element);
     // Use requestAnimationFrame to let React flush the render
     requestAnimationFrame(function() {
       window.__SCOPE_RENDER_COMPLETE__ = true;
@@ -86,7 +93,7 @@ import { createElement } from "react";
 })();
 `
   );
-  const result = await esbuild__namespace.build({
+  const result = await esbuild2__namespace.build({
     stdin: {
       contents: wrapperCode,
       // Resolve relative imports (within the component's dir)
@@ -124,10 +131,11 @@ ${msg}`);
   }
   return outputFile.text;
 }
-function wrapInHtml(bundledScript, viewportWidth, projectCss) {
+function wrapInHtml(bundledScript, viewportWidth, projectCss, wrapperScript) {
   const projectStyleBlock = projectCss != null && projectCss.length > 0 ? `<style id="scope-project-css">
 ${projectCss.replace(/<\/style>/gi, "<\\/style>")}
 </style>` : "";
+  const wrapperScriptBlock = wrapperScript != null && wrapperScript.length > 0 ? `<script id="scope-wrapper-script">${wrapperScript}</script>` : "";
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -142,6 +150,7 @@ ${projectCss.replace(/<\/style>/gi, "<\\/style>")}
 </head>
 <body>
   <div id="scope-root" data-reactscope-root></div>
+  ${wrapperScriptBlock}
   <script>${bundledScript}</script>
 </body>
 </html>`;
@@ -505,16 +514,16 @@ async function getTailwindCompiler(cwd) {
     from: entryPath,
     loadStylesheet
   });
-  const build2 = result.build.bind(result);
-  compilerCache = { cwd, build: build2 };
-  return build2;
+  const build3 = result.build.bind(result);
+  compilerCache = { cwd, build: build3 };
+  return build3;
 }
 async function getCompiledCssForClasses(cwd, classes) {
-  const build2 = await getTailwindCompiler(cwd);
-  if (build2 === null) return null;
+  const build3 = await getTailwindCompiler(cwd);
+  if (build3 === null) return null;
   const deduped = [...new Set(classes)].filter(Boolean);
   if (deduped.length === 0) return null;
-  return build2(deduped);
+  return build3(deduped);
 }
 // src/ci/commands.ts
@@ -1132,9 +1141,9 @@ function createRL() {
   });
 }
 async function ask(rl, question) {
-  return new Promise((resolve17) => {
+  return new Promise((resolve18) => {
     rl.question(question, (answer) => {
-      resolve17(answer.trim());
+      resolve18(answer.trim());
     });
   });
 }
@@ -1706,8 +1715,15 @@ async function runHooksProfiling(componentName, filePath, props) {
   try {
     const context = await browser.newContext();
     const page = await context.newPage();
-    await page.addInitScript({ content: playwright.getBrowserEntryScript() });
-    const htmlHarness = await buildComponentHarness(filePath, componentName, props, 1280);
+    const scopeRuntime = playwright.getBrowserEntryScript();
+    const htmlHarness = await buildComponentHarness(
+      filePath,
+      componentName,
+      props,
+      1280,
+      void 0,
+      scopeRuntime
+    );
     await page.setContent(htmlHarness, { waitUntil: "load" });
     await page.waitForFunction(
       () => {
@@ -1966,7 +1982,15 @@ async function runInteractionProfile(componentName, filePath, props, interaction
   try {
     const context = await browser.newContext();
     const page = await context.newPage();
-    const htmlHarness = await buildComponentHarness(filePath, componentName, props, 1280);
+    const scopeRuntime = playwright.getBrowserEntryScript();
+    const htmlHarness = await buildComponentHarness(
+      filePath,
+      componentName,
+      props,
+      1280,
+      void 0,
+      scopeRuntime
+    );
     await page.setContent(htmlHarness, { waitUntil: "load" });
     await page.waitForFunction(
       () => {
@@ -2305,12 +2329,14 @@ async function runInstrumentTree(options) {
       viewport: { width: DEFAULT_VIEWPORT_WIDTH, height: DEFAULT_VIEWPORT_HEIGHT }
     });
     const page = await context.newPage();
-    await page.addInitScript({ content: playwright.getBrowserEntryScript() });
+    const scopeRuntime = playwright.getBrowserEntryScript();
     const htmlHarness = await buildComponentHarness(
       filePath,
       componentName,
       {},
-      DEFAULT_VIEWPORT_WIDTH
+      DEFAULT_VIEWPORT_WIDTH,
+      void 0,
+      scopeRuntime
     );
     await page.setContent(htmlHarness, { waitUntil: "load" });
     await page.waitForFunction(
@@ -2756,13 +2782,20 @@ Available: ${available}`
   }
   const rootDir = process.cwd();
   const filePath = path.resolve(rootDir, descriptor.filePath);
-  const htmlHarness = await buildComponentHarness(filePath, options.componentName, {}, 1280);
+  const preScript = playwright.getBrowserEntryScript() + "\n" + buildInstrumentationScript();
+  const htmlHarness = await buildComponentHarness(
+    filePath,
+    options.componentName,
+    {},
+    1280,
+    void 0,
+    preScript
+  );
   const pool = await getPool2();
   const slot = await pool.acquire();
   const { page } = slot;
   const startMs = performance.now();
   try {
-    await page.addInitScript(buildInstrumentationScript());
     await page.setContent(htmlHarness, { waitUntil: "load" });
     await page.waitForFunction(
       () => window.__SCOPE_RENDER_COMPLETE__ === true,
@@ -2932,6 +2965,122 @@ function writeReportToFile(report, outputPath, pretty) {
   const json = pretty ? JSON.stringify(report, null, 2) : JSON.stringify(report);
   fs.writeFileSync(outputPath, json, "utf-8");
 }
+var SCOPE_EXTENSIONS = [".scope.tsx", ".scope.ts", ".scope.jsx", ".scope.js"];
+function findScopeFile(componentFilePath) {
+  const dir = path.dirname(componentFilePath);
+  const stem = componentFilePath.replace(/\.(tsx?|jsx?)$/, "");
+  const baseName = stem.slice(dir.length + 1);
+  for (const ext of SCOPE_EXTENSIONS) {
+    const candidate = path.join(dir, `${baseName}${ext}`);
+    if (fs.existsSync(candidate)) return candidate;
+  }
+  return null;
+}
+async function loadScopeFile(scopeFilePath) {
+  const tmpDir = path.join(os.tmpdir(), `scope-file-${Date.now()}-${Math.random().toString(36).slice(2)}`);
+  fs.mkdirSync(tmpDir, { recursive: true });
+  const outFile = path.join(tmpDir, "scope-file.cjs");
+  try {
+    const result = await esbuild2__namespace.build({
+      entryPoints: [scopeFilePath],
+      bundle: true,
+      format: "cjs",
+      platform: "node",
+      target: "node18",
+      outfile: outFile,
+      write: true,
+      jsx: "automatic",
+      jsxImportSource: "react",
+      // Externalize React — we don't need to execute JSX, just extract plain data
+      external: ["react", "react-dom", "react/jsx-runtime"],
+      define: {
+        "process.env.NODE_ENV": '"development"'
+      },
+      logLevel: "silent"
+    });
+    if (result.errors.length > 0) {
+      const msg = result.errors.map((e) => `${e.text}${e.location ? ` (${e.location.file}:${e.location.line})` : ""}`).join("\n");
+      throw new Error(`Failed to bundle scope file ${scopeFilePath}:
+${msg}`);
+    }
+    const req = module$1.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href)));
+    delete req.cache[path.resolve(outFile)];
+    const mod = req(outFile);
+    const scenarios = extractScenarios(mod, scopeFilePath);
+    const hasWrapper = typeof mod.wrapper === "function" || typeof mod.default?.wrapper === "function";
+    return { filePath: scopeFilePath, scenarios, hasWrapper };
+  } finally {
+    try {
+      fs.rmSync(tmpDir, { recursive: true, force: true });
+    } catch {
+    }
+  }
+}
+async function loadScopeFileForComponent(componentFilePath) {
+  const scopeFilePath = findScopeFile(componentFilePath);
+  if (scopeFilePath === null) return null;
+  return loadScopeFile(scopeFilePath);
+}
+function extractScenarios(mod, filePath) {
+  const raw = mod.scenarios ?? mod.default?.scenarios;
+  if (raw === void 0) return {};
+  if (typeof raw !== "object" || raw === null || Array.isArray(raw)) {
+    console.warn(`[scope] ${filePath}: "scenarios" export is not a plain object \u2014 ignoring.`);
+    return {};
+  }
+  const result = {};
+  for (const [name, props] of Object.entries(raw)) {
+    if (typeof props !== "object" || props === null || Array.isArray(props)) {
+      console.warn(`[scope] ${filePath}: scenario "${name}" is not a plain object \u2014 skipping.`);
+      continue;
+    }
+    result[name] = props;
+  }
+  return result;
+}
+async function buildWrapperScript(scopeFilePath) {
+  const wrapperEntry = (
+    /* ts */
+    `
+import * as __scopeMod from ${JSON.stringify(scopeFilePath)};
+// Expose the wrapper on window so the harness can access it
+var wrapper =
+  __scopeMod.wrapper ??
+  (__scopeMod.default && __scopeMod.default.wrapper) ??
+  null;
+window.__SCOPE_WRAPPER__ = wrapper;
+`
+  );
+  const result = await esbuild2__namespace.build({
+    stdin: {
+      contents: wrapperEntry,
+      resolveDir: path.dirname(scopeFilePath),
+      loader: "tsx",
+      sourcefile: "__scope_wrapper_entry__.tsx"
+    },
+    bundle: true,
+    format: "iife",
+    platform: "browser",
+    target: "es2020",
+    write: false,
+    jsx: "automatic",
+    jsxImportSource: "react",
+    external: [],
+    define: {
+      "process.env.NODE_ENV": '"development"',
+      global: "globalThis"
+    },
+    logLevel: "silent"
+  });
+  if (result.errors.length > 0) {
+    const msg = result.errors.map((e) => `${e.text}${e.location ? ` (${e.location.file}:${e.location.line})` : ""}`).join("\n");
+    throw new Error(`Failed to build wrapper script from ${scopeFilePath}:
+${msg}`);
+  }
+  return result.outputFiles?.[0]?.text ?? "";
+}
+// src/render-commands.ts
 var MANIFEST_PATH6 = ".reactscope/manifest.json";
 var DEFAULT_OUTPUT_DIR = ".reactscope/renders";
 var _pool3 = null;
@@ -2952,7 +3101,7 @@ async function shutdownPool3() {
     _pool3 = null;
   }
 }
-function buildRenderer(filePath, componentName, viewportWidth, viewportHeight) {
+function buildRenderer(filePath, componentName, viewportWidth, viewportHeight, wrapperScript) {
   const satori = new render.SatoriRenderer({
     defaultViewport: { width: viewportWidth, height: viewportHeight }
   });
@@ -2965,7 +3114,10 @@ function buildRenderer(filePath, componentName, viewportWidth, viewportHeight) {
         filePath,
         componentName,
         props,
-        viewportWidth
+        viewportWidth,
+        void 0,
+        // projectCss (handled separately)
+        wrapperScript
       );
       const slot = await pool.acquire();
       const { page } = slot;
@@ -3056,8 +3208,37 @@ function buildRenderer(filePath, componentName, viewportWidth, viewportHeight) {
     }
   };
 }
+function buildScenarioMap(opts, scopeData) {
+  if (opts.scenario !== void 0) {
+    if (scopeData === null) {
+      throw new Error(`--scenario "${opts.scenario}" requires a .scope file next to the component`);
+    }
+    const props = scopeData.scenarios[opts.scenario];
+    if (props === void 0) {
+      const available = Object.keys(scopeData.scenarios).join(", ") || "(none)";
+      throw new Error(
+        `Scenario "${opts.scenario}" not found in scope file.
+Available: ${available}`
+      );
+    }
+    return { [opts.scenario]: props };
+  }
+  if (opts.props !== void 0) {
+    let parsed;
+    try {
+      parsed = JSON.parse(opts.props);
+    } catch {
+      throw new Error(`Invalid props JSON: ${opts.props}`);
+    }
+    return { __default__: parsed };
+  }
+  if (scopeData !== null && Object.keys(scopeData.scenarios).length > 0) {
+    return scopeData.scenarios;
+  }
+  return { __default__: {} };
+}
 function registerRenderSingle(renderCmd) {
-  renderCmd.command("component <component>", { isDefault: true }).description("Render a single component to PNG or JSON").option("--props <json>", `Inline props JSON, e.g. '{"variant":"primary"}'`).option("--viewport <WxH>", "Viewport size e.g. 1280x720", "375x812").option("--theme <name>", "Theme name from the token system").option("-o, --output <path>", "Write PNG to file instead of stdout").option("--format <fmt>", "Output format: png or json (default: auto)").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH6).action(
+  renderCmd.command("component <component>", { isDefault: true }).description("Render a single component to PNG or JSON").option("--props <json>", `Inline props JSON, e.g. '{"variant":"primary"}'`).option("--scenario <name>", "Run a named scenario from the component's .scope file").option("--viewport <WxH>", "Viewport size e.g. 1280x720", "375x812").option("--theme <name>", "Theme name from the token system").option("-o, --output <path>", "Write PNG to file instead of stdout").option("--format <fmt>", "Output format: png or json (default: auto)").option("--manifest <path>", "Path to manifest.json", MANIFEST_PATH6).action(
     async (componentName, opts) => {
       try {
         const manifest = loadManifest(opts.manifest);
@@ -3069,80 +3250,71 @@ function registerRenderSingle(renderCmd) {
 Available: ${available}`
           );
         }
-        let props = {};
-        if (opts.props !== void 0) {
-          try {
-            props = JSON.parse(opts.props);
-          } catch {
-            throw new Error(`Invalid props JSON: ${opts.props}`);
-          }
-        }
         const { width, height } = parseViewport(opts.viewport);
         const rootDir = process.cwd();
         const filePath = path.resolve(rootDir, descriptor.filePath);
-        const renderer = buildRenderer(filePath, componentName, width, height);
+        const scopeData = await loadScopeFileForComponent(filePath);
+        const wrapperScript = scopeData?.hasWrapper === true ? await buildWrapperScript(scopeData.filePath) : void 0;
+        const scenarios = buildScenarioMap(opts, scopeData);
+        const renderer = buildRenderer(filePath, componentName, width, height, wrapperScript);
         process.stderr.write(
           `Rendering ${componentName} [${descriptor.complexityClass}] at ${width}\xD7${height}\u2026
 `
         );
-        const outcome = await render.safeRender(
-          () => renderer.renderCell(props, descriptor.complexityClass),
-          {
-            props,
-            sourceLocation: {
-              file: descriptor.filePath,
-              line: descriptor.loc.start,
-              column: 0
+        const fmt2 = resolveSingleFormat(opts.format);
+        let anyFailed = false;
+        for (const [scenarioName, props] of Object.entries(scenarios)) {
+          const isNamed = scenarioName !== "__default__";
+          const label = isNamed ? `${componentName}:${scenarioName}` : componentName;
+          const outcome = await render.safeRender(
+            () => renderer.renderCell(props, descriptor.complexityClass),
+            {
+              props,
+              sourceLocation: {
+                file: descriptor.filePath,
+                line: descriptor.loc.start,
+                column: 0
+              }
             }
-          }
-        );
-        await shutdownPool3();
-        if (outcome.crashed) {
-          process.stderr.write(`\u2717 Render failed: ${outcome.error.message}
+          );
+          if (outcome.crashed) {
+            process.stderr.write(`\u2717 ${label} render failed: ${outcome.error.message}
 `);
-          const hintList = outcome.error.heuristicFlags.join(", ");
-          if (hintList.length > 0) {
-            process.stderr.write(`  Hints: ${hintList}
+            const hintList = outcome.error.heuristicFlags.join(", ");
+            if (hintList.length > 0) {
+              process.stderr.write(`  Hints: ${hintList}
 `);
+            }
+            anyFailed = true;
+            continue;
           }
-          process.exit(1);
-        }
-        const result = outcome.result;
-        if (opts.output !== void 0) {
-          const outPath = path.resolve(process.cwd(), opts.output);
-          fs.writeFileSync(outPath, result.screenshot);
-          process.stdout.write(
-            `\u2713 ${componentName} \u2192 ${opts.output} (${result.width}\xD7${result.height}, ${result.renderTimeMs.toFixed(0)}ms)
+          const result = outcome.result;
+          const outFileName = isNamed ? `${componentName}-${scenarioName}.png` : `${componentName}.png`;
+          if (opts.output !== void 0 && !isNamed) {
+            const outPath = path.resolve(process.cwd(), opts.output);
+            fs.writeFileSync(outPath, result.screenshot);
+            process.stdout.write(
+              `\u2713 ${label} \u2192 ${opts.output} (${result.width}\xD7${result.height}, ${result.renderTimeMs.toFixed(0)}ms)
 `
-          );
-          return;
-        }
-        const fmt2 = resolveSingleFormat(opts.format);
-        if (fmt2 === "json") {
-          const json = formatRenderJson(componentName, props, result);
-          process.stdout.write(`${JSON.stringify(json, null, 2)}
+            );
+          } else if (fmt2 === "json") {
+            const json = formatRenderJson(label, props, result);
+            process.stdout.write(`${JSON.stringify(json, null, 2)}
 `);
-        } else if (fmt2 === "file") {
-          const dir = path.resolve(process.cwd(), DEFAULT_OUTPUT_DIR);
-          fs.mkdirSync(dir, { recursive: true });
-          const outPath = path.resolve(dir, `${componentName}.png`);
-          fs.writeFileSync(outPath, result.screenshot);
-          const relPath = `${DEFAULT_OUTPUT_DIR}/${componentName}.png`;
-          process.stdout.write(
-            `\u2713 ${componentName} \u2192 ${relPath} (${result.width}\xD7${result.height}, ${result.renderTimeMs.toFixed(0)}ms)
-`
-          );
-        } else {
-          const dir = path.resolve(process.cwd(), DEFAULT_OUTPUT_DIR);
-          fs.mkdirSync(dir, { recursive: true });
-          const outPath = path.resolve(dir, `${componentName}.png`);
-          fs.writeFileSync(outPath, result.screenshot);
-          const relPath = `${DEFAULT_OUTPUT_DIR}/${componentName}.png`;
-          process.stdout.write(
-            `\u2713 ${componentName} \u2192 ${relPath} (${result.width}\xD7${result.height}, ${result.renderTimeMs.toFixed(0)}ms)
+          } else {
+            const dir = path.resolve(process.cwd(), DEFAULT_OUTPUT_DIR);
+            fs.mkdirSync(dir, { recursive: true });
+            const outPath = path.resolve(dir, outFileName);
+            fs.writeFileSync(outPath, result.screenshot);
+            const relPath = `${DEFAULT_OUTPUT_DIR}/${outFileName}`;
+            process.stdout.write(
+              `\u2713 ${label} \u2192 ${relPath} (${result.width}\xD7${result.height}, ${result.renderTimeMs.toFixed(0)}ms)
 `
-          );
+            );
+          }
         }
+        await shutdownPool3();
+        if (anyFailed) process.exit(1);
       } catch (err) {
         await shutdownPool3();
         process.stderr.write(`Error: ${err instanceof Error ? err.message : String(err)}