executable-stories-formatters 0.11.3 → 0.12.0

package/dist/adapters.d.cts

@@ -1 +1 @@
-export { J as JestAdapterOptions, n as JestAggregatedResult, o as JestFileResult, p as JestTestResult, P as PlaywrightAdapterOptions, r as PlaywrightAnnotation, s as PlaywrightAttachment, t as PlaywrightError, u as PlaywrightLocation, v as PlaywrightStatus, w as PlaywrightTestCase, x as PlaywrightTestResult, G as StoryFileReport, V as VitestAdapterOptions, L as VitestSerializedError, M as VitestState, Q as VitestTestCase, U as VitestTestModule, W as VitestTestResult, i as adaptJestRun, j as adaptPlaywrightRun, k as adaptVitestRun } from './index-DF16Xl5i.cjs';
+export { J as JestAdapterOptions, n as JestAggregatedResult, o as JestFileResult, p as JestTestResult, P as PlaywrightAdapterOptions, r as PlaywrightAnnotation, s as PlaywrightAttachment, t as PlaywrightError, u as PlaywrightLocation, v as PlaywrightStatus, w as PlaywrightTestCase, x as PlaywrightTestResult, G as StoryFileReport, V as VitestAdapterOptions, L as VitestSerializedError, M as VitestState, Q as VitestTestCase, U as VitestTestModule, W as VitestTestResult, i as adaptJestRun, j as adaptPlaywrightRun, k as adaptVitestRun } from './index-mrT6-JSt.cjs';

package/dist/adapters.d.ts

@@ -1 +1 @@
-export { J as JestAdapterOptions, n as JestAggregatedResult, o as JestFileResult, p as JestTestResult, P as PlaywrightAdapterOptions, r as PlaywrightAnnotation, s as PlaywrightAttachment, t as PlaywrightError, u as PlaywrightLocation, v as PlaywrightStatus, w as PlaywrightTestCase, x as PlaywrightTestResult, G as StoryFileReport, V as VitestAdapterOptions, L as VitestSerializedError, M as VitestState, Q as VitestTestCase, U as VitestTestModule, W as VitestTestResult, i as adaptJestRun, j as adaptPlaywrightRun, k as adaptVitestRun } from './index-DF16Xl5i.js';
+export { J as JestAdapterOptions, n as JestAggregatedResult, o as JestFileResult, p as JestTestResult, P as PlaywrightAdapterOptions, r as PlaywrightAnnotation, s as PlaywrightAttachment, t as PlaywrightError, u as PlaywrightLocation, v as PlaywrightStatus, w as PlaywrightTestCase, x as PlaywrightTestResult, G as StoryFileReport, V as VitestAdapterOptions, L as VitestSerializedError, M as VitestState, Q as VitestTestCase, U as VitestTestModule, W as VitestTestResult, i as adaptJestRun, j as adaptPlaywrightRun, k as adaptVitestRun } from './index-mrT6-JSt.js';

package/dist/cli.js

@@ -416,6 +416,27 @@ var raw_run_schema_default = {
           required: ["kind", "path", "phase"],
           additionalProperties: false
         },
+        {
+          type: "object",
+          description: "Embedded HTML rendered in a sandboxed iframe. Exactly one of path/url/content.",
+          properties: {
+            kind: { const: "html" },
+            path: { type: "string", description: "Local HTML file path (inlined into the report by default)." },
+            url: { type: "string", description: "Remote URL rendered via iframe src." },
+            content: { type: "string", description: "Inline HTML content rendered via iframe srcdoc." },
+            title: { type: "string" },
+            height: { oneOf: [{ type: "number" }, { type: "string" }], description: "Iframe height: number \u2192 px, string passed through (e.g. '60vh'). Default 400px." },
+            phase: { $ref: "#/$defs/DocPhase" },
+            children: { type: "array", items: { $ref: "#/$defs/DocEntry" }, description: "Nested child doc entries for grouping." }
+          },
+          required: ["kind", "phase"],
+          oneOf: [
+            { required: ["path"] },
+            { required: ["url"] },
+            { required: ["content"] }
+          ],
+          additionalProperties: false
+        },
         {
           type: "object",
           description: "Custom documentation entry with arbitrary data.",
@@ -1237,6 +1258,14 @@ var CucumberJsonFormatter = class {
     }
     const embeddings = [];
     for (const doc of step.docs) {
+      if (doc.kind === "html" && doc.content !== void 0) {
+        embeddings.push({
+          data: Buffer.from(doc.content, "utf8").toString("base64"),
+          mime_type: "text/html",
+          name: doc.title
+        });
+        continue;
+      }
       if (doc.kind !== "screenshot" || !doc.path.startsWith("data:")) {
         continue;
       }
@@ -1416,6 +1445,17 @@ ${doc.markdown}`,
         };
       case "screenshot":
         return null;
+      case "html":
+        if (doc.url !== void 0 || doc.path !== void 0) {
+          return {
+            doc_string: {
+              content: `[${doc.title ?? "Embedded HTML"}](${doc.url ?? doc.path})`,
+              content_type: "text/markdown",
+              line: 0
+            }
+          };
+        }
+        return null;
       default:
         return null;
     }
@@ -1514,6 +1554,17 @@ function copyDocEntry(entry) {
         phase: entry.phase,
         ...children
       };
+    case "html":
+      return {
+        kind: "html",
+        ...entry.path !== void 0 ? { path: entry.path } : {},
+        ...entry.url !== void 0 ? { url: entry.url } : {},
+        ...entry.content !== void 0 ? { content: entry.content } : {},
+        ...entry.title !== void 0 ? { title: entry.title } : {},
+        ...entry.height !== void 0 ? { height: entry.height } : {},
+        phase: entry.phase,
+        ...children
+      };
     case "custom":
       return {
         kind: "custom",
@@ -1902,7 +1953,7 @@ function scenarioHasDocs(scenario) {
 import * as fs2 from "fs";
 import * as path3 from "path";
 
-// src/formatters/html/template.ts
+// src/formatters/html/template-scripts.ts
 var JS_THEME = `
 // Theme management
 function getSystemTheme() {
@@ -2704,6 +2755,23 @@ function parseMarkdownSections(marked) {
   });
 }
 `;
+var JS_HTML_EMBED = `
+// Open srcdoc-embedded HTML (doc-html iframes) in a new tab via a blob URL
+function initHtmlEmbeds() {
+  document.querySelectorAll('.doc-html-open-srcdoc').forEach((btn) => {
+    btn.addEventListener('click', function() {
+      const container = btn.closest('.doc-html');
+      const iframe = container ? container.querySelector('iframe.doc-html-frame') : null;
+      const html = iframe ? iframe.getAttribute('srcdoc') : null;
+      if (!html) return;
+      const url = URL.createObjectURL(new Blob([html], { type: 'text/html' }));
+      window.open(url, '_blank', 'noopener');
+    });
+  });
+}
+`;
+
+// src/formatters/html/template.ts
 function generateScript(options) {
   const initCalls = [];
   if (options.includeDarkMode) {
@@ -2721,6 +2789,7 @@ function generateScript(options) {
   initCalls.push("initHashScroll();");
   initCalls.push("initToc();");
   initCalls.push("initThemePicker();");
+  initCalls.push("initHtmlEmbeds();");
   const initScript = `
 // Initialize on load
 document.addEventListener('DOMContentLoaded', () => {
@@ -2729,6 +2798,7 @@ document.addEventListener('DOMContentLoaded', () => {
 `;
   let script = options.includeDarkMode ? JS_THEME : "";
   script += JS_CORE;
+  script += JS_HTML_EMBED;
   if (options.additionalJs) {
     script += options.additionalJs;
   }
@@ -4368,6 +4438,82 @@ body {
   opacity: 0.8;
 }
 
+/* ============================================================================
+   Documentation Entries - Embedded HTML
+   ============================================================================ */
+.doc-html {
+  margin-bottom: 0.5rem;
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) - 2px);
+  overflow: hidden;
+}
+
+.doc-html:last-child {
+  margin-bottom: 0;
+}
+
+.doc-html-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.375rem 0.75rem;
+  background: var(--muted, transparent);
+  border-bottom: 1px solid var(--border);
+}
+
+.doc-html-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--muted-foreground);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.doc-html-open {
+  font-size: 0.875rem;
+  line-height: 1;
+  padding: 0.125rem 0.375rem;
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) - 4px);
+  background: transparent;
+  color: var(--muted-foreground);
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.doc-html-open:hover {
+  color: var(--foreground);
+  border-color: var(--foreground);
+}
+
+.doc-html-frame {
+  display: block;
+  width: 100%;
+  border: 0;
+  background: #fff;
+}
+
+.doc-html-missing {
+  padding: 0.75rem 1rem;
+  border: 1px dashed var(--border);
+  background: var(--muted, transparent);
+  color: var(--muted-foreground);
+  font-size: 0.8125rem;
+}
+
+.doc-html-missing-label {
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+}
+
+.doc-html-missing-path {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 0.75rem;
+  word-break: break-all;
+  opacity: 0.8;
+}
+
 /* ============================================================================
    Documentation Entries - Visual Check
    ============================================================================ */
@@ -14663,6 +14809,36 @@ function renderDocVideo(entry, deps) {
   ${captionHtml}
 </div>`;
 }
+function resolveHtmlSource(entry, deps) {
+  if (entry.url !== void 0) return { mode: "src", value: entry.url };
+  if (entry.content !== void 0) return { mode: "srcdoc", value: entry.content };
+  const filePath = entry.path ?? "";
+  if (/^https?:/i.test(filePath)) return { mode: "src", value: filePath };
+  const inlined = deps.readHtmlFile?.(filePath);
+  if (inlined !== void 0) return { mode: "srcdoc", value: inlined };
+  const isAbsoluteFsPath = /^(?:[/\\]|[A-Za-z]:[/\\])/.test(filePath);
+  if (deps.readHtmlFile && isAbsoluteFsPath) return { mode: "missing", value: filePath };
+  return { mode: "src", value: filePath };
+}
+function renderDocHtml(entry, deps) {
+  const source = resolveHtmlSource(entry, deps);
+  if (source.mode === "missing") {
+    return `<div class="doc-html doc-html-missing">
+  <div class="doc-html-missing-label">HTML unavailable</div>
+  <div class="doc-html-missing-path">${deps.escapeHtml(source.value)}</div>
+</div>`;
+  }
+  const heightCss = typeof entry.height === "number" ? `${entry.height}px` : entry.height ?? "400px";
+  const frame = `<iframe class="doc-html-frame" sandbox="allow-scripts" loading="lazy" style="height: ${deps.escapeHtml(heightCss)};" title="${deps.escapeHtml(entry.title ?? "Embedded HTML")}" ${source.mode}="${deps.escapeHtml(source.value)}"></iframe>`;
+  const openBtn = source.mode === "src" ? `<a class="doc-html-open" href="${deps.escapeHtml(source.value)}" target="_blank" rel="noopener noreferrer" title="Open in new tab" aria-label="Open in new tab">&#x2197;</a>` : `<button type="button" class="doc-html-open doc-html-open-srcdoc" title="Open in new tab" aria-label="Open in new tab">&#x2197;</button>`;
+  return `<div class="doc-html">
+  <div class="doc-html-header">
+    <span class="doc-html-title">${deps.escapeHtml(entry.title ?? "HTML")}</span>
+    ${openBtn}
+  </div>
+  ${frame}
+</div>`;
+}
 function renderDocCustom(entry, deps) {
   if (entry.type === "visual" && entry.data && typeof entry.data === "object") {
     const data = entry.data;
@@ -14719,6 +14895,9 @@ function renderDocEntry(entry, deps) {
     case "video":
       html = renderDocVideo(entry, deps);
       break;
+    case "html":
+      html = renderDocHtml(entry, deps);
+      break;
     case "custom":
       html = renderDocCustom(entry, deps);
       break;
@@ -15285,6 +15464,21 @@ function readScreenshotAsDataUri(filePath) {
     return void 0;
   }
 }
+var HTML_INLINE_WARN_BYTES = 1024 * 1024;
+function readHtmlFileContent(filePath) {
+  try {
+    if (!fs2.existsSync(filePath)) return void 0;
+    const buf = fs2.readFileSync(filePath);
+    if (buf.byteLength > HTML_INLINE_WARN_BYTES) {
+      console.warn(
+        `[executable-stories] Inlining large HTML file (${Math.round(buf.byteLength / 1024)} KiB) into the report: ${filePath}. Consider --asset-mode copy.`
+      );
+    }
+    return buf.toString("utf8");
+  } catch {
+    return void 0;
+  }
+}
 function normalizeOptions(options = {}) {
   return {
     title: options.title ?? "Test Results",
@@ -15292,6 +15486,7 @@ function normalizeOptions(options = {}) {
     searchable: options.searchable ?? true,
     startCollapsed: options.startCollapsed ?? false,
     embedScreenshots: options.embedScreenshots ?? true,
+    embedHtmlFiles: options.embedHtmlFiles ?? true,
     syntaxHighlighting: options.syntaxHighlighting ?? true,
     mermaidEnabled: options.mermaidEnabled ?? true,
     markdownEnabled: options.markdownEnabled ?? true,
@@ -15310,7 +15505,10 @@ function createHtmlFormatter(options = {}) {
     markdownEnabled: opts.markdownEnabled,
     mermaidEnabled: opts.mermaidEnabled,
     embedScreenshots: opts.embedScreenshots,
-    readScreenshot: (filePath) => readScreenshotAsDataUri(filePath)
+    readScreenshot: (filePath) => readScreenshotAsDataUri(filePath),
+    // When html-file inlining is off (e.g. --asset-mode copy), omit the read
+    // hook so doc-html iframes keep their src path for the asset bundler.
+    ...opts.embedHtmlFiles ? { readHtmlFile: (filePath) => readHtmlFileContent(filePath) } : {}
   };
   const renderDocs = (docs, containerClass) => {
     if (!docs || docs.length === 0) return "";
@@ -15602,6 +15800,8 @@ var JUnitFormatter = class {
       }
       case "screenshot":
         return `${indent}Screenshot: ${entry.alt ?? entry.path}`;
+      case "html":
+        return `${indent}HTML: ${entry.title ?? "Embedded HTML"} (${entry.url ?? entry.path ?? "inline"})`;
       case "custom": {
         const dataStr = JSON.stringify(entry.data, null, 2);
         const lines = [];
@@ -16053,6 +16253,25 @@ var MarkdownFormatter = class {
         lines.push(`${indent}`);
         break;
       }
+      case "html": {
+        const htmlLabel = entry.title ?? "Embedded HTML";
+        if (entry.url !== void 0 || entry.path !== void 0) {
+          lines.push(`${indent}[${htmlLabel}](${entry.url ?? entry.path})`);
+          break;
+        }
+        lines.push(`${indent}<details>`);
+        lines.push(`${indent}<summary>${htmlLabel}</summary>`);
+        lines.push(`${indent}`);
+        lines.push(`${indent}\`\`\`html`);
+        for (const line of (entry.content ?? "").split("\n")) {
+          lines.push(`${indent}${line}`);
+        }
+        lines.push(`${indent}\`\`\``);
+        lines.push(`${indent}`);
+        lines.push(`${indent}</details>`);
+        lines.push(`${indent}`);
+        break;
+      }
       case "custom":
         if (entry.type === "visual" && entry.data && typeof entry.data === "object") {
           const data = entry.data;
@@ -17326,6 +17545,8 @@ function formatDocEntry(doc) {
       return `${doc.alt ? `${escapeHtml2(doc.alt)}: ` : ""}${escapeHtml2(doc.path)}`;
     case "video":
       return `${doc.caption ? `${escapeHtml2(doc.caption)}: ` : ""}${escapeHtml2(doc.path)}`;
+    case "html":
+      return `${doc.title ? `${escapeHtml2(doc.title)}: ` : ""}${escapeHtml2(doc.url ?? doc.path ?? "(inline html)")}`;
     case "custom":
       return `${escapeHtml2(doc.type)}: ${escapeHtml2(JSON.stringify(doc.data))}`;
   }
@@ -17784,6 +18005,8 @@ function formatDocEntry2(doc) {
       return `${doc.alt ? `${doc.alt}: ` : ""}${doc.path}`;
     case "video":
       return `${doc.caption ? `${doc.caption}: ` : ""}${doc.path}`;
+    case "html":
+      return `${doc.title ? `${doc.title}: ` : ""}${doc.url ?? doc.path ?? "(inline html)"}`;
     case "custom":
       return `${doc.type}: ${JSON.stringify(doc.data)}`;
   }
@@ -17933,7 +18156,7 @@ import * as path5 from "path";
 function scanHtmlAssets(html) {
   const seen = /* @__PURE__ */ new Set();
   const patterns = [
-    /<(?:img|video)\b[^>]*?\bsrc=["']([^"']+)["']/g,
+    /<(?:img|video|iframe)\b[^>]*?\bsrc=["']([^"']+)["']/g,
     /<a\b[^>]*?\bclass=["']attachment["'][^>]*?\bhref=["']([^"']+)["']/g,
     /<a\b[^>]*?\bhref=["']([^"']+)["'][^>]*?\bclass=["']attachment["']/g
   ];
@@ -18012,7 +18235,7 @@ function bundleAssets(htmlPath, options = {}) {
 function replaceAssetRef(html, original, replacement) {
   const escaped = original.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
   const srcPattern = new RegExp(
-    `(<(?:img|video)\\b[^>]*?\\bsrc=["'])${escaped}(["'])`,
+    `(<(?:img|video|iframe)\\b[^>]*?\\bsrc=["'])${escaped}(["'])`,
     "g"
   );
   html = html.replace(srcPattern, `$1${replacement}$2`);
@@ -18400,6 +18623,21 @@ ${tc.errorStack}` : "");
           ])
         );
         break;
+      case "html":
+        if (entry.url !== void 0 || entry.path !== void 0) {
+          const target = entry.url ?? entry.path ?? "";
+          content.push(
+            paragraph([
+              text(entry.title ?? "Embedded HTML", strong()),
+              text(": "),
+              link(target, target)
+            ])
+          );
+          break;
+        }
+        content.push(paragraph([text(entry.title ?? "Embedded HTML", strong())]));
+        content.push(codeBlock(entry.content ?? "", "html"));
+        break;
       case "custom":
         content.push(paragraph([text(`[${entry.type}]`, strong())]));
         content.push(codeBlock(JSON.stringify(entry.data ?? null, null, 2), "json"));
@@ -20985,6 +21223,9 @@ var ReportGenerator = class {
         searchable: options.html?.searchable ?? true,
         startCollapsed: options.html?.startCollapsed ?? false,
         embedScreenshots: options.html?.embedScreenshots ?? true,
+        // Under "copy" asset mode local html files become hashed assets with
+        // an iframe src instead of being inlined into the report.
+        embedHtmlFiles: options.html?.embedHtmlFiles ?? (options.assetMode ?? "none") !== "copy",
         syntaxHighlighting: options.html?.syntaxHighlighting ?? true,
         mermaidEnabled: options.html?.mermaidEnabled ?? true,
         markdownEnabled: options.html?.markdownEnabled ?? true,
@@ -21160,6 +21401,7 @@ var ReportGenerator = class {
           searchable: this.options.html.searchable,
           startCollapsed: this.options.html.startCollapsed,
           embedScreenshots: this.options.html.embedScreenshots,
+          embedHtmlFiles: this.options.html.embedHtmlFiles,
           syntaxHighlighting: this.options.html.syntaxHighlighting,
           mermaidEnabled: this.options.html.mermaidEnabled,
           markdownEnabled: this.options.html.markdownEnabled,
@@ -21922,7 +22164,7 @@ function bundleExplorerAssets(reportPath, assetsDir, baseUrl = "/stories/assets"
   const visit = (entries) => {
     for (const entry of entries ?? []) {
       const e = entry;
-      if (e.kind === "screenshot" || e.kind === "video") {
+      if (e.kind === "screenshot" || e.kind === "video" || e.kind === "html") {
         if (typeof e.path === "string" && !isRemote(e.path) && fs13.existsSync(e.path)) {
           e.path = bundle(e.path);
         }