@jsenv/terminal-recorder 1.2.1 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/terminal-recorder",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Record terminal output as .svg, .gif, .webm, .mp4",
   "license": "MIT",
   "repository": {
@@ -10,8 +10,7 @@
   },
   "author": {
     "name": "dmail",
-    "email": "dmaillard06@gmail.com",
-    "url": "https://twitter.com/damienmaillard"
+    "email": "dmaillard06@gmail.com"
   },
   "publishConfig": {
     "access": "public"
@@ -32,9 +31,9 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@jsenv/humanize": "1.2.3",
-    "@jsenv/server": "15.2.12",
-    "@playwright/browser-webkit": "1.45.1",
+    "@jsenv/humanize": "1.2.4",
+    "@jsenv/server": "15.2.13",
+    "@playwright/browser-chromium": "1.45.1",
     "ansi-regex": "6.0.1",
     "he": "1.2.0",
     "playwright": "1.45.1",

package/src/main.js

@@ -1,5 +1,6 @@
-// not yet available
-// export { renderTerminalHtml } from "./render_terminal_html.js";
-
 export { startTerminalRecording } from "./terminal_recording.js";
 export { recordCommandToSvg } from "./command_recording.js";
+
+export { renderTerminalSvg } from "./svg/render_terminal_svg.js";
+// not yet available
+// export { renderTerminalHtml } from "./render_terminal_html.js";

package/src/svg/render_terminal_svg.js

@@ -1,4 +1,3 @@
-import prettier from "prettier";
 import { parseAnsi } from "./parse_ansi.js";
 import { createSvgRootNode } from "./xml_generator.js";
 
@@ -36,8 +35,11 @@ const colorsDefault = {
   bgCyanBright: "#00FFFF",
   bgWhiteBright: "#FFFFFF",
 };
+const headDefault = {
+  height: 40,
+};
 
-export const renderTerminalSvg = async (
+export const renderTerminalSvg = (
   ansi,
   {
     title = "ansi to terminal",
@@ -61,9 +63,10 @@ export const renderTerminalSvg = async (
     height,
     maxWidth,
     maxHeight,
+
+    head = true,
   } = {},
 ) => {
-  const { rows, columns, chunks } = parseAnsi(ansi);
   const font = {
     size: fontSize,
     width: 8.4013671875,
@@ -75,13 +78,20 @@ export const renderTerminalSvg = async (
     emHeightDescent: 3.4453125,
   };
 
-  const headerHeight = 40;
-  const textWidth = columns * font.width;
-  const textHeight = rows * (font.lineHeight + 1) + font.emHeightDescent;
-  const bodyContentWidth = paddingLeft + textWidth + paddingRight;
-  const bodyContentHeight = paddingTop + textHeight + paddingBottom;
-  const contentWidth = bodyContentWidth;
-  const contentHeight = headerHeight + bodyContentHeight;
+  let headerHeight = 0;
+  if (head) {
+    if (head === true) head = {};
+    const headOptions = { ...headDefault, ...head };
+    headerHeight = headOptions.height;
+  }
+
+  const { rows, columns, chunks } = parseAnsi(ansi);
+  const bodyTextWidth = columns * font.width;
+  const bodyTextHeight = rows * (font.lineHeight + 1) + font.emHeightDescent;
+  const bodyContentWidth = paddingLeft + bodyTextWidth + paddingRight;
+  const bodyContentHeight = paddingTop + bodyTextHeight + paddingBottom;
+  let contentWidth = bodyContentWidth;
+  let contentHeight = headerHeight + bodyContentHeight;
 
   let computedWidth;
   if (typeof width === "number") {
@@ -111,7 +121,7 @@ export const renderTerminalSvg = async (
     backgroundColor,
   });
 
-  background: {
+  render_background: {
     const backgroundGroup = svg.createNode("g", {
       id: "background",
     });
@@ -129,48 +139,50 @@ export const renderTerminalSvg = async (
     svg.appendChild(backgroundGroup);
   }
 
-  header: {
-    const headerGroup = svg.createNode("g", {
-      id: "header",
-    });
-    const iconsGroup = svg.createNode("g", {
-      transform: `translate(20,${headerHeight / 2})`,
-    });
-    const circleA = svg.createNode("circle", {
-      cx: 0,
-      cy: 0,
-      r: 6,
-      fill: "#ff5f57",
-    });
-    iconsGroup.appendChild(circleA);
-    const circleB = svg.createNode("circle", {
-      cx: 20,
-      cy: 0,
-      r: 6,
-      fill: "#febc2e",
-    });
-    iconsGroup.appendChild(circleB);
-    const circleC = svg.createNode("circle", {
-      cx: 40,
-      cy: 0,
-      r: 6,
-      fill: "#28c840",
-    });
-    iconsGroup.appendChild(circleC);
-    headerGroup.appendChild(iconsGroup);
+  if (head) {
+    render_head: {
+      const headerGroup = svg.createNode("g", {
+        id: "header",
+      });
+      const iconsGroup = svg.createNode("g", {
+        transform: `translate(20,${headerHeight / 2})`,
+      });
+      const circleA = svg.createNode("circle", {
+        cx: 0,
+        cy: 0,
+        r: 6,
+        fill: "#ff5f57",
+      });
+      iconsGroup.appendChild(circleA);
+      const circleB = svg.createNode("circle", {
+        cx: 20,
+        cy: 0,
+        r: 6,
+        fill: "#febc2e",
+      });
+      iconsGroup.appendChild(circleB);
+      const circleC = svg.createNode("circle", {
+        cx: 40,
+        cy: 0,
+        r: 6,
+        fill: "#28c840",
+      });
+      iconsGroup.appendChild(circleC);
+      headerGroup.appendChild(iconsGroup);
 
-    const text = svg.createNode("text", {
-      "fill": "#abb2bf",
-      "text-anchor": "middle",
-      "x": computedWidth / 2,
-      "y": headerHeight / 2,
-    });
-    text.setContent(title);
-    headerGroup.appendChild(text);
-    svg.appendChild(headerGroup);
+      const text = svg.createNode("text", {
+        "fill": "#abb2bf",
+        "text-anchor": "middle",
+        "x": computedWidth / 2,
+        "y": headerHeight / 2,
+      });
+      text.setContent(title);
+      headerGroup.appendChild(text);
+      svg.appendChild(headerGroup);
+    }
   }
 
-  body: {
+  render_body: {
     const bodyComputedHeight = computedHeight - headerHeight + paddingBottom;
     const foreignObject = svg.createNode("foreignObject", {
       id: "body",
@@ -281,10 +293,7 @@ export const renderTerminalSvg = async (
   }
 
   const svgString = svg.renderAsString();
-  const formatted = await prettier.format(svgString, {
-    parser: "html",
-  });
-  return formatted;
+  return svgString;
 };
 
 // Some SVG Implementations drop whitespaces

package/src/terminal_recording.js

@@ -9,6 +9,8 @@
  - we should have a webm video
 */
 
+import prettier from "prettier";
+
 import { renderTerminalSvg } from "./svg/render_terminal_svg.js";
 
 const isDev = process.execArgv.includes("--conditions=development");
@@ -78,9 +80,9 @@ export const startTerminalRecording = async ({
   if (!svg && !gif && !video) {
     throw new Error("svg, video or gif must be enabled ");
   }
-  const { webkit } = await import("playwright");
+  const { chromium } = await import("playwright");
   const server = await startLocalServer();
-  const browser = await webkit.launch({
+  const browser = await chromium.launch({
     // channel: "chrome", // https://github.com/microsoft/playwright/issues/7716#issuecomment-882634893
     headless: !debug,
     // needed because https-localhost fails to trust cert on chrome + linux (ubuntu 20.04)
@@ -155,8 +157,11 @@ export const startTerminalRecording = async ({
     }
     terminalRecords.svg = async () => {
       const ansi = recordedFormats.textInViewport;
-      const terminalSvg = await renderTerminalSvg(ansi, svg);
-      return terminalSvg;
+      const terminalSvg = renderTerminalSvg(ansi, svg);
+      const terminalSvgFormatted = await prettier.format(terminalSvg, {
+        parser: "html",
+      });
+      return terminalSvgFormatted;
     };
     terminalRecords.gif = () => {
       const terminalGifBuffer = Buffer.from(recordedFormats.gif, "binary");