@jsenv/terminal-recorder 1.1.11 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/terminal-recorder",
-  "version": "1.1.11",
+  "version": "1.2.0",
   "description": "Record terminal output as .svg, .gif, .webm, .mp4",
   "license": "MIT",
   "repository": {
@@ -32,16 +32,18 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
+    "@jsenv/humanize": "1.2.3",
     "@jsenv/server": "15.2.12",
     "@playwright/browser-webkit": "1.45.1",
     "ansi-regex": "6.0.1",
     "he": "1.2.0",
     "playwright": "1.45.1",
-    "strip-ansi": "7.1.0",
     "string-width": "5.1.2",
+    "strip-ansi": "7.1.0",
     "webm-to-mp4": "1.0.0"
   },
   "devDependencies": {
+    "@xterm/addon-serialize": "0.13.0",
     "xterm": "5.3.0",
     "xterm-addon-webgl": "0.16.0"
   }

package/src/client/fixtures/hello_world_2_lines.txt

@@ -0,0 +1,2 @@
+✖ hello
+  world

package/src/client/terminal_recorder.js

@@ -14,10 +14,12 @@ https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts
 
 import "xterm";
 import "xterm-addon-webgl";
+import "@xterm/addon-serialize?as_js_module";
 import { createGifEncoder } from "./gif_encoder.js";
 
 const { Terminal } = window;
 const { WebglAddon } = window.WebglAddon;
+const { SerializeAddon } = window.SerializeAddon;
 
 export const initTerminal = ({
   cols = 80,
@@ -27,14 +29,16 @@ export const initTerminal = ({
   fontFamily = "SauceCodePro Nerd Font, Source Code Pro, Courier",
   fontSize = 12,
   convertEol = true,
+  textInViewport,
   gif,
   video,
   logs,
 }) => {
-  if (video === true) video = {};
+  if (textInViewport === true) textInViewport = {};
   if (gif === true) gif = {};
-  if (!video && !gif) {
-    throw new Error("video or gif must be enabled");
+  if (video === true) video = {};
+  if (!textInViewport && !video && !gif) {
+    throw new Error("ansi, video or gif must be enabled");
   }
 
   const log = (...args) => {
@@ -79,6 +83,9 @@ export const initTerminal = ({
       true,
     ),
   );
+  const serializeAddon = new SerializeAddon();
+  term.loadAddon(serializeAddon);
+
   const terminalElement = document.getElementById("terminal");
   term.open(terminalElement);
 
@@ -133,10 +140,36 @@ export const initTerminal = ({
   }
 
   return {
+    term,
     startRecording: async () => {
       const records = {};
+      let writePromise = Promise.resolve();
       const frameCallbackSet = new Set();
       const stopCallbackSet = new Set();
+      if (textInViewport) {
+        log("start recording text in viewport");
+        // https://github.com/xtermjs/xterm.js/issues/3681
+        // https://github.com/xtermjs/xterm.js/issues/3681
+        // get the first line
+        // term.buffer.active.getLine(term.buffer.active.viewportY).translateToString()
+        // get the last line
+        // term.buffer.active.getLine(term.buffer.active.length -1).translateToString()
+        // https://github.com/xtermjs/xterm.js/blob/a7952ff36c60ee6dce9141744b1355a5d582ee39/addons/addon-serialize/src/SerializeAddon.ts
+        stopCallbackSet.add(() => {
+          const startY = term.buffer.active.viewportY;
+          const endY = term.buffer.active.length - 1;
+          const range = {
+            start: startY,
+            end: endY,
+          };
+          log(`lines in viewport: ${startY}:${endY}`);
+          const output = serializeAddon.serialize({
+            range,
+          });
+          log(`text in viewport: ${output}`);
+          records.textInViewport = output;
+        });
+      }
       if (video) {
         log("start recording video");
         const { mimeType = "video/webm;codecs=h264", msAddedAtTheEnd } = video;
@@ -277,8 +310,8 @@ export const initTerminal = ({
 
       return {
         writeIntoTerminal: async (data) => {
-          await new Promise((resolve) => {
-            log(`write data: "${data}"`);
+          writePromise = new Promise((resolve) => {
+            log(`write data:`, data);
             term.write(data, () => {
               term._core._renderService._renderDebouncer._innerRefresh();
               replicateXterm();
@@ -286,8 +319,10 @@ export const initTerminal = ({
               resolve();
             });
           });
+          await writePromise;
         },
         stopRecording: async () => {
+          await writePromise;
           const promises = [];
           for (const stopCallback of stopCallbackSet) {
             promises.push(stopCallback());

package/src/client/xterm_dev.html

@@ -14,40 +14,82 @@
     <script type="module">
       import { initTerminal } from "./terminal_recorder.js";
 
+      const delayBetweenLines = 200;
       const { startRecording } = initTerminal({
+        textInViewport: true,
         gif: {
           repeat: true,
           msAddedAtTheEnd: 3_000,
         },
-        logs: true,
+        // logs: true,
         // video: true,
       });
       const { writeIntoTerminal, stopRecording } = await startRecording();
-      const sourceResponse = await fetch("./source.txt");
-      const source = await sourceResponse.text();
-      const lines = source.split("\n");
-      for (const line of lines) {
-        writeIntoTerminal(`${line}\n`);
-        await new Promise((resolve) => setTimeout(resolve, 200));
-      }
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-      const terminalRecords = await stopRecording();
-      const video = terminalRecords.video;
-      const gif = terminalRecords.gif;
 
-      const webmDataUrl = `data:video/webm;codecs=h264;base64,${window.btoa(
-        video,
-      )}`;
-      const gifDataUrl = `data:image/gif;base64,${window.btoa(gif)}`;
+      window.renderFromSource = async (sourceUrl) => {
+        document.querySelector("#text_in_viewport").innerHTML = "...";
+        document.querySelector("#video").src = "";
+        document.querySelector("#gif").src = "";
 
-      document.querySelector("#video").src = webmDataUrl;
-      document.querySelector("#gif").src = gifDataUrl;
+        const sourceResponse = await fetch(sourceUrl);
+        const source = await sourceResponse.text();
+        let lines = source.split("\n");
+        // lines = lines.slice(0, 12);
+        for (const line of lines) {
+          writeIntoTerminal(`${line}\n`);
+          await new Promise((resolve) =>
+            setTimeout(resolve, delayBetweenLines),
+          );
+        }
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+        const terminalRecords = await stopRecording();
+        const textInViewport = terminalRecords.textInViewport;
+        const video = terminalRecords.video;
+        const gif = terminalRecords.gif;
+
+        const webmDataUrl = `data:video/webm;codecs=h264;base64,${window.btoa(
+          video,
+        )}`;
+        const gifDataUrl = `data:image/gif;base64,${window.btoa(gif)}`;
+
+        document.querySelector("#text_in_viewport").innerHTML = textInViewport;
+        document.querySelector("#video").src = webmDataUrl;
+        document.querySelector("#gif").src = gifDataUrl;
+      };
+    </script>
+    <form>
+      <select name="source">
+        <option value="./fixtures/hello_world_2_lines.txt">
+          ./fixtures/hello_world_2_lines.txt
+        </option>
+        <option value="./fixtures/source.txt">./fixtures/source.txt</option>
+      </select>
+      <button name="submit" type="submit">Go</button>
+    </form>
+    <script>
+      const form = document.querySelector("form");
+      form.onsubmit = async (e) => {
+        e.preventDefault();
+        const source = form.elements.source.value;
+        const submit = form.elements.submit;
+        submit.disabled = true;
+        await window.renderFromSource(source);
+        submit.disabled = false;
+      };
     </script>
-    <div id="records">
-      Video:
-      <video id="video" src="data:," controls></video>
-      GIF:
-      <img id="gif" src="data:," />
+    <div id="records" style="display: flex">
+      <div style="flex-grow: 1">
+        <h3>Text in viewport</h3>
+        <pre id="text_in_viewport"></pre>
+      </div>
+      <div style="flex-grow: 1">
+        <h3>GIF</h3>
+        <img id="gif" src="data:," />
+      </div>
+      <div style="flex-grow: 1">
+        <h3>Video</h3>
+        <video id="video" src="data:," controls></video>
+      </div>
     </div>
   </body>
 </html>

package/src/command_recording.js

@@ -0,0 +1,107 @@
+import { spawn } from "node:child_process";
+import { UNICODE, ANSI } from "@jsenv/humanize";
+
+import { startTerminalRecording } from "./terminal_recording.js";
+
+export const recordCommandToSvg = async (
+  command,
+  options,
+  svgOptions,
+  terminalOptions = {},
+) => {
+  const terminalRecorder = await startTerminalRecording({
+    svg: {
+      title: "Terminal",
+      ...svgOptions,
+    },
+    ...terminalOptions,
+  });
+  await executeCommand(command, {
+    ...options,
+    onStdout: (data) => {
+      terminalRecorder.write(String(data));
+    },
+  });
+  const terminalRecords = await terminalRecorder.stop();
+  const terminalSvg = await terminalRecords.svg();
+  return terminalSvg;
+};
+
+const executeCommand = (
+  command,
+  {
+    signal = new AbortController().signal,
+    onStdout = () => {},
+    onStderr = () => {},
+    cwd,
+    env,
+    timeout,
+  } = {},
+) => {
+  return new Promise((resolve, reject) => {
+    let args = [];
+    let commandWithoutArgs = "";
+    const firstSpaceIndex = command.indexOf(" ");
+    if (firstSpaceIndex === -1) {
+      commandWithoutArgs = command;
+    } else {
+      commandWithoutArgs = command.slice(0, firstSpaceIndex);
+      const argsRaw = command.slice(firstSpaceIndex + 1).trim();
+      args = argsRaw.split(" ");
+    }
+    const commandProcess = spawn(commandWithoutArgs, args, {
+      signal,
+      cwd:
+        cwd && typeof cwd === "string" && cwd.startsWith("file:")
+          ? new URL(cwd)
+          : cwd,
+      env: {
+        ...process.env,
+        ...(ANSI.supported ? { FORCE_COLOR: "1" } : {}),
+        ...(UNICODE.supported ? { FORCE_UNICODE: "1" } : {}),
+        ...env,
+      },
+      timeout,
+      // silent: true,
+    });
+    commandProcess.on("error", (error) => {
+      if (error && error.code === "ETIMEDOUT") {
+        console.error(`timeout after ${timeout} ms`);
+        reject(error);
+      } else {
+        reject(error);
+      }
+    });
+    const stdoutDatas = [];
+    commandProcess.stdout.on("data", (data) => {
+      stdoutDatas.push(data);
+      onStdout(data);
+    });
+    let stderrDatas = [];
+    commandProcess.stderr.on("data", (data) => {
+      stderrDatas.push(data);
+      onStderr(data);
+    });
+    if (commandProcess.stdin) {
+      commandProcess.stdin.on("error", (error) => {
+        reject(error);
+      });
+    }
+    commandProcess.on("exit", (exitCode, signal) => {
+      if (signal) {
+        reject(new Error(`killed with ${signal}`));
+      }
+      if (exitCode) {
+        reject(
+          new Error(
+            `failed with exit code ${exitCode}
+            --- command stderr ---
+            ${stderrDatas.join("")}`,
+          ),
+        );
+        return;
+      }
+      resolve({ exitCode, signal });
+    });
+  });
+};

package/src/main.js

@@ -2,3 +2,4 @@
 // export { renderTerminalHtml } from "./render_terminal_html.js";
 
 export { startTerminalRecording } from "./terminal_recording.js";
+export { recordCommandToSvg } from "./command_recording.js";

package/src/terminal_recording.js

@@ -75,116 +75,111 @@ export const startTerminalRecording = async ({
       throw new Error("video not recorded");
     },
   };
-
-  if (svg) {
-    let ansi = "";
-    writeCallbackSet.add((data) => {
-      ansi += data;
-    });
-    stopCallbackSet.add(() => {
-      terminalRecords.svg = async () => {
-        const terminalSvg = await renderTerminalSvg(ansi, svg);
-        ansi = "";
-        return terminalSvg;
-      };
-    });
+  if (!svg && !gif && !video) {
+    throw new Error("svg, video or gif must be enabled ");
   }
-  if (gif || video) {
-    const { webkit } = await import("playwright");
-    const server = await startLocalServer();
-    const browser = await webkit.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)
-      args: ["--ignore-certificate-errors"],
-    });
-    const page = await browser.newPage({
-      ignoreHTTPSErrors: true,
-    });
-    page.on("pageerror", (error) => {
-      throw error;
-    });
-    page.on("console", (consoleMessage) => {
-      console.log(`chrome> ${consoleMessage.text()}`);
-    });
-    await page.goto(`${server.origin}/xterm.html`);
-    await page.evaluate(
-      /* eslint-env browser */
-      async ({ cols, rows, convertEol, gif, video, logs }) => {
-        await window.xtreamReadyPromise;
-        const __term__ = await window.initTerminal({
-          cols,
-          rows,
-          convertEol,
-          gif,
-          video,
-          logs,
-        });
-        window.__term__ = __term__;
-      },
-      {
+  const { webkit } = await import("playwright");
+  const server = await startLocalServer();
+  const browser = await webkit.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)
+    args: ["--ignore-certificate-errors"],
+  });
+  const page = await browser.newPage({
+    ignoreHTTPSErrors: true,
+  });
+  page.on("pageerror", (error) => {
+    throw error;
+  });
+  page.on("console", (consoleMessage) => {
+    console.log(`browser> ${consoleMessage.text()}`);
+  });
+  await page.goto(`${server.origin}/xterm.html`);
+  await page.evaluate(
+    /* eslint-env browser */
+    async ({ cols, rows, convertEol, textInViewport, gif, video, logs }) => {
+      await window.xtreamReadyPromise;
+      const __term__ = await window.initTerminal({
         cols,
         rows,
-        convertEol: process.platform !== "win32",
+        convertEol,
+        textInViewport,
         gif,
         video,
         logs,
+      });
+      window.__term__ = __term__;
+    },
+    {
+      cols,
+      rows,
+      convertEol: process.platform !== "win32",
+      textInViewport: Boolean(svg),
+      gif,
+      video,
+      logs,
+    },
+    /* eslint-env node */
+  );
+  await page.evaluate(
+    /* eslint-env browser */
+    async () => {
+      const { writeIntoTerminal, stopRecording } =
+        await window.__term__.startRecording();
+      window.terminalRecording = { writeIntoTerminal, stopRecording };
+    },
+    /* eslint-env node */
+  );
+  writeCallbackSet.add(async (data) => {
+    await page.evaluate(
+      /* eslint-env browser */
+      async (data) => {
+        await window.terminalRecording.writeIntoTerminal(data);
       },
+      data,
       /* eslint-env node */
     );
-    await page.evaluate(
+  });
+  stopCallbackSet.add(async () => {
+    const recordedFormats = await page.evaluate(
       /* eslint-env browser */
-      async () => {
-        const { writeIntoTerminal, stopRecording } =
-          await window.__term__.startRecording();
-        window.terminalRecording = { writeIntoTerminal, stopRecording };
+      () => {
+        return window.terminalRecording.stopRecording();
       },
       /* eslint-env node */
     );
-
-    writeCallbackSet.add(async (data) => {
-      await page.evaluate(
-        /* eslint-env browser */
-        async (data) => {
-          await window.terminalRecording.writeIntoTerminal(data);
-        },
-        data,
-        /* eslint-env node */
-      );
-    });
-
-    stopCallbackSet.add(async () => {
-      const recordedFormats = await page.evaluate(
-        /* eslint-env browser */
-        () => {
-          return window.terminalRecording.stopRecording();
-        },
-        /* eslint-env node */
-      );
-      if (!debug) {
-        server.stop();
-        browser.close();
-      }
-
-      terminalRecords.gif = () => {
-        const terminalGifBuffer = Buffer.from(recordedFormats.gif, "binary");
-        return terminalGifBuffer;
-      };
-      terminalRecords.webm = () => {
-        const terminalWebmBuffer = Buffer.from(recordedFormats.video, "binary");
-        return terminalWebmBuffer;
-      };
-      terminalRecords.mp4 = async () => {
-        const terminalWebmBuffer = Buffer.from(terminalRecords.video, "binary");
-        const webmToMp4Namespace = await import("webm-to-mp4");
-        const webmToMp4 = webmToMp4Namespace.default;
-        const terminalMp4Buffer = Buffer.from(webmToMp4(terminalWebmBuffer));
-        return terminalMp4Buffer;
-      };
-    });
-  }
+    if (!debug) {
+      server.stop();
+      browser.close();
+    }
+    terminalRecords.svg = async () => {
+      const ansi = recordedFormats.textInViewport;
+      const terminalSvg = await renderTerminalSvg(ansi, svg);
+      return terminalSvg;
+    };
+    terminalRecords.gif = () => {
+      const terminalGifBuffer = Buffer.from(recordedFormats.gif, "binary");
+      return terminalGifBuffer;
+    };
+    terminalRecords.webm = () => {
+      const terminalWebmBuffer = Buffer.from(recordedFormats.video, "binary");
+      return terminalWebmBuffer;
+    };
+    terminalRecords.mp4 = async () => {
+      const terminalWebmBuffer = Buffer.from(terminalRecords.video, "binary");
+      const webmToMp4Namespace = await import("webm-to-mp4");
+      const webmToMp4 = webmToMp4Namespace.default;
+      const terminalMp4Buffer = Buffer.from(webmToMp4(terminalWebmBuffer));
+      return terminalMp4Buffer;
+    };
+  });
+  let stopped = false;
   return {
     write: async (data) => {
+      if (stopped) {
+        throw new Error("write after stop()");
+      }
       const promises = [];
       for (const writeCallback of writeCallbackSet) {
         promises.push(writeCallback(data));