@opul/cli 0.1.0 → 0.1.2

package/dist/index.js

@@ -280,7 +280,11 @@ function overlayInitSource() {
       lower.style.cssText = "position:absolute;left:24px;bottom:24px;max-width:60%;background:" + INK2 + ";color:" + PAPER + ";font-size:16px;font-weight:600;line-height:1.2;letter-spacing:-0.025em;padding:8px 12px;border-radius:6px;opacity:0;transition:opacity 150ms ease;white-space:nowrap;";
       root.appendChild(lower);
       root.appendChild(cursor);
-      (document.body || document.documentElement).appendChild(root);
+      document.documentElement.appendChild(root);
+    }
+    function ensure() {
+      if (!root || !document.documentElement.contains(root))
+        build();
     }
     function ready() {
       return new Promise((res) => {
@@ -298,6 +302,7 @@ function overlayInitSource() {
     const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
     function move2(x, y, dur) {
       return new Promise((res) => {
+        ensure();
         const sx = pos.x;
         const sy = pos.y;
         const dx = x - sx;
@@ -321,6 +326,7 @@ function overlayInitSource() {
     }
     function click() {
       return new Promise((res) => {
+        ensure();
         cursor.animate([
           { transform: "translate(" + pos.x + "px," + pos.y + "px) scale(1)" },
           {
@@ -340,6 +346,7 @@ function overlayInitSource() {
     }
     function showLower(text) {
       return new Promise((res) => {
+        ensure();
         lower.textContent = text;
         void lower.offsetWidth;
         lower.style.opacity = "1";
@@ -348,6 +355,7 @@ function overlayInitSource() {
     }
     function hideLower2() {
       return new Promise((res) => {
+        ensure();
         lower.style.opacity = "0";
         setTimeout(res, 150);
       });
@@ -487,6 +495,7 @@ async function runStep(page, cast, step) {
     }
     case "hover": {
       const c2 = await centerOf(page, step.selector, timeout);
+      await ensureReady(page);
       if (step.name)
         await moveOverlay(page, c2.x, c2.y, MOVE_MS, step.name);
       else
@@ -497,6 +506,7 @@ async function runStep(page, cast, step) {
     }
     case "click": {
       const c2 = await centerOf(page, step.selector, timeout);
+      await ensureReady(page);
       await moveOverlay(page, c2.x, c2.y, MOVE_MS, step.name);
       await sleep(PRE_CLICK_MS);
       await overlayClick(page);
@@ -508,6 +518,7 @@ async function runStep(page, cast, step) {
     }
     case "type": {
       const c2 = await centerOf(page, step.selector, timeout);
+      await ensureReady(page);
       await moveOverlay(page, c2.x, c2.y, MOVE_MS, step.name);
       await sleep(PRE_CLICK_MS);
       await overlayClick(page);
@@ -889,29 +900,48 @@ function captureSource() {
     if (w.__opulCap || !w.__opulEmit)
       return;
     w.__opulCap = true;
+    const uniq = (s) => {
+      try {
+        return document.querySelectorAll(s).length === 1;
+      } catch {
+        return false;
+      }
+    };
+    const q = (s) => s.replace(/'/g, "\\'");
     const sel = (el) => {
       if (!el || el.nodeType !== 1)
         return null;
       const dd = el.closest("[data-demo]");
       if (dd)
         return `[data-demo='${dd.getAttribute("data-demo")}']`;
-      if (el.id && document.querySelectorAll(`#${CSS.escape(el.id)}`).length === 1)
+      if (el.id && uniq(`#${CSS.escape(el.id)}`))
         return `#${CSS.escape(el.id)}`;
+      const al = el.getAttribute("aria-label");
+      if (al && uniq(`[aria-label='${q(al)}']`))
+        return `[aria-label='${q(al)}']`;
+      if (el.tagName === "A") {
+        const href = el.getAttribute("href");
+        if (href && href !== "#" && uniq(`a[href='${q(href)}']`))
+          return `a[href='${q(href)}']`;
+      }
       const parts = [];
       let node = el;
-      while (node && node.nodeType === 1 && parts.length < 4) {
+      while (node && node.nodeType === 1 && node.tagName !== "HTML") {
         if (node.id) {
           parts.unshift(`#${CSS.escape(node.id)}`);
-          break;
-        }
-        let part = node.tagName.toLowerCase();
-        const parent = node.parentElement;
-        if (parent) {
-          const same = Array.from(parent.children).filter((c2) => c2.tagName === node.tagName);
-          if (same.length > 1)
-            part += `:nth-of-type(${same.indexOf(node) + 1})`;
+          if (uniq(parts.join(" > ")))
+            return parts.join(" > ");
+        } else {
+          const parent = node.parentElement;
+          let part = node.tagName.toLowerCase();
+          if (parent) {
+            const idx = Array.from(parent.children).indexOf(node) + 1;
+            part += `:nth-child(${idx})`;
+          }
+          parts.unshift(part);
+          if (uniq(parts.join(" > ")))
+            return parts.join(" > ");
         }
-        parts.unshift(part);
         node = node.parentElement;
       }
       return parts.join(" > ");
@@ -1091,23 +1121,52 @@ import { join as join5, resolve as resolve2, relative as relative2 } from "path"
 async function demoCommand(opts) {
   const stepsPath = resolve2(process.cwd(), opts.steps);
   const outDir = resolve2(process.cwd(), opts.out);
-  let raw;
+  let raw = null;
   try {
     raw = await readFile(stepsPath, "utf8");
   } catch {
-    fail(
-      `no steps file at ${ink.bold(opts.steps)}
-  run ${ink.bold("opul init")} to create one.`
-    );
-    return;
+    raw = null;
   }
   let steps;
-  try {
-    steps = parseSteps(JSON.parse(raw));
-  } catch (e) {
-    if (e instanceof StepsValidationError) fail(`invalid steps: ${e.message}`);
-    else fail(`steps file is not valid JSON: ${e.message}`);
-    return;
+  if (raw === null) {
+    if (!opts.url) {
+      fail(
+        `no steps file at ${ink.bold(opts.steps)} and no ${ink.bold("--url")}.
+  run ${ink.bold("opul record --url <url>")} first, or ${ink.bold("opul init")}.`
+      );
+      return;
+    }
+    console.error(
+      `${ink.dim("no steps file \u2014 let's capture your click-through first.")}
+`
+    );
+    try {
+      steps = await recordSteps({
+        url: opts.url,
+        outPath: stepsPath,
+        chromePath: opts.chrome
+      });
+    } catch (e) {
+      if (e instanceof ChromeNotFoundError) fail(e.message);
+      else fail(e.message);
+      return;
+    }
+    if (steps.steps.length === 0) {
+      fail("no steps captured \u2014 click or type in the window before saving, then re-run.");
+      return;
+    }
+    console.error(
+      `${ink.green("\u2713")} captured ${steps.steps.length} step${steps.steps.length === 1 ? "" : "s"} \u2192 ${ink.bold(opts.steps)}. rendering the video\u2026
+`
+    );
+  } else {
+    try {
+      steps = parseSteps(JSON.parse(raw));
+    } catch (e) {
+      if (e instanceof StepsValidationError) fail(`invalid steps: ${e.message}`);
+      else fail(`steps file is not valid JSON: ${e.message}`);
+      return;
+    }
   }
   if (opts.url) steps.startUrl = opts.url;
   if (opts.profile) {
@@ -1374,11 +1433,11 @@ function fail4(msg) {
 
 // src/index.ts
 var program = new Command();
-program.name("opul").description("Record a product demo from your running web app.").version("0.1.0");
+program.name("opul").description("Record a product demo from your running web app.").version("0.1.2");
 program.command("init").description("Create an opul.steps.json stub").option("--out <file>", "output path", "opul.steps.json").action(initCommand);
 program.command("doctor").description("Check that Chrome and ffmpeg are installed").action(doctorCommand);
 program.command("record").description("Click through your app to generate a steps file").option("--url <url>", "app URL to open").option("--out <file>", "steps file to write", "opul.steps.json").option("--name <name>", "product/demo name").option("--chrome <path>", "path to Chrome executable").action(recordCommand);
-program.command("demo").description("Record a demo MP4 from your app").option("--url <url>", "app URL to open first (overrides startUrl)").option("--steps <file>", "steps file", "opul.steps.json").option("--out <dir>", "output directory", "opul-out").option("--headed", "run Chrome headed with a 3s pre-roll").option("--height <px>", "output height (width derived to 16:9)").option("--profile <dir>", "use an existing Chrome profile (prints a warning)").option("--chrome <path>", "path to Chrome executable").action(demoCommand);
+program.command("demo").description("Record a demo MP4 (captures a click-through first if no steps file)").option("--url <url>", "app URL to open first (overrides startUrl)").option("--steps <file>", "steps file", "opul.steps.json").option("--out <dir>", "output directory", "opul-out").option("--headed", "run Chrome headed with a 3s pre-roll").option("--height <px>", "output height (width derived to 16:9)").option("--profile <dir>", "use an existing Chrome profile (prints a warning)").option("--chrome <path>", "path to Chrome executable").action(demoCommand);
 program.command("publish <file>").description("Publish an MP4 and get a shareable link").option("--title <title>", "demo title").option("--replace <slug>", "replace an existing demo, keeping its URL").option("--poster <file>", "poster image (defaults to ./poster.jpg)").action(publishCommand);
 program.command("ls").description("List your published demos").action(lsCommand);
 program.command("rm <slug>").description("Delete a published demo").action(rmCommand);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opul/cli",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Record a polished product-demo video from your running web app — from the terminal.",
   "type": "module",
   "bin": {