@jsenv/terminal-recorder 1.0.0

package/src/svg/xml_generator.js

@@ -0,0 +1,149 @@
+import he from "he";
+
+export const createXmlGenerator = ({
+  rootNodeName,
+  canSelfCloseNames = [],
+  canReceiveChildNames = [],
+  canReceiveContentNames = [],
+}) => {
+  const createNode = (name, attributes = {}) => {
+    const canSelfClose = canSelfCloseNames.includes(name);
+    const canReceiveChild = canReceiveChildNames.includes(name);
+    const canReceiveContent = canReceiveContentNames.includes(name);
+
+    const children = [];
+
+    const node = {
+      name,
+      content: "",
+      children,
+      attributes,
+      canSelfClose,
+      createNode,
+      appendChild: (childNode) => {
+        if (!canReceiveChild) {
+          throw new Error(`cannot appendChild into ${name}`);
+        }
+        children.push(childNode);
+        return childNode;
+      },
+      setContent: (value) => {
+        if (!canReceiveContent) {
+          throw new Error(`cannot setContent on ${name}`);
+        }
+        node.content = value;
+      },
+      renderAsString: () => {
+        const renderNode = (node, { depth }) => {
+          let nodeString = "";
+          nodeString += `<${node.name}`;
+
+          write_attributes: {
+            const attributeNames = Object.keys(node.attributes);
+            if (attributeNames.length) {
+              let attributesSingleLine = "";
+              let attributesMultiLine = "";
+
+              for (const attributeName of attributeNames) {
+                let attributeValue = node.attributes[attributeName];
+                if (typeof attributeValue === "number") {
+                  attributeValue = round(attributeValue);
+                }
+                if (attributeName === "viewBox") {
+                  attributeValue = attributeValue
+                    .split(",")
+                    .map((v) => round(parseFloat(v.trim())))
+                    .join(", ");
+                }
+                attributesSingleLine += ` ${attributeName}="${attributeValue}"`;
+                attributesMultiLine += `\n  `;
+                attributesMultiLine += "  ".repeat(depth);
+                attributesMultiLine += `${attributeName}="${attributeValue}"`;
+              }
+              attributesMultiLine += "\n";
+              attributesMultiLine += "  ".repeat(depth);
+
+              if (attributesSingleLine.length < 100) {
+                nodeString += attributesSingleLine;
+              } else {
+                nodeString += attributesMultiLine;
+              }
+            }
+          }
+
+          let innerHTML = "";
+          if (node.content) {
+            if (node.name !== "text") {
+              innerHTML += "\n  ";
+              innerHTML += "  ".repeat(depth);
+            }
+            const contentEncoded = he.encode(node.content, { decimal: false });
+            innerHTML += contentEncoded;
+            if (node.name !== "text") {
+              innerHTML += "\n";
+              innerHTML += "  ".repeat(depth);
+            }
+          }
+          write_children: {
+            if (node.children.length > 0) {
+              for (const child of node.children) {
+                innerHTML += "\n  ";
+                innerHTML += "  ".repeat(depth);
+                innerHTML += renderNode(child, {
+                  depth: depth + 1,
+                });
+              }
+              innerHTML += "\n";
+              innerHTML += "  ".repeat(depth);
+            }
+          }
+          if (innerHTML === "") {
+            if (node.canSelfClose) {
+              nodeString += `/>`;
+            } else {
+              nodeString += `></${node.name}>`;
+            }
+          } else {
+            nodeString += `>`;
+            nodeString += innerHTML;
+            nodeString += `</${node.name}>`;
+          }
+          return nodeString;
+        };
+
+        return renderNode(node, {
+          depth: 0,
+        });
+      },
+    };
+
+    return node;
+  };
+
+  return (rootNodeAttributes) => createNode(rootNodeName, rootNodeAttributes);
+};
+
+export const createSvgRootNode = createXmlGenerator({
+  rootNodeName: "svg",
+  canSelfCloseNames: ["path", "rect", "circle"],
+  canReceiveChildNames: ["svg", "foreignObject", "g"],
+  canReceiveContentNames: ["text", "style"],
+});
+
+// not used for now and needs to configure canReceiveChildNames and so on...
+export const createXmlRootNode = createXmlGenerator({
+  rootNodeName: "xml",
+});
+
+// not used for now and needs to configure canReceiveChildNames and so on...
+export const createHtmlRootNode = createXmlGenerator({
+  rootNodeName: "html",
+});
+
+// Round: Make number values smaller in output
+// Eg: 14.23734 becomes 14.24
+// Credit @Chris Martin: https://stackoverflow.com/a/43012696/2816869
+const round = (x) => {
+  const rounded = Number(`${Math.round(`${x}e2`)}e-2`);
+  return rounded;
+};

package/src/terminal_recording.js

@@ -0,0 +1,205 @@
+/* 
+ - start dev server (must be able to find xterm.html)
+ - start chrome
+ - visit xterm.html
+ - call page.evaluate of initTerminal()
+ - call page.evaluate startRecording
+ - do some page.evaluate window.writeIntoTerminal()
+ - call page.evaluate stopRecording
+ - we should have a webm video
+*/
+
+import { renderTerminalSvg } from "./svg/render_terminal_svg.js";
+
+const isDev = process.execArgv.includes("--conditions=development");
+
+const startLocalServer = async () => {
+  if (isDev) {
+    const serverDirectoryUrl = new URL("./client/", import.meta.url);
+    const { startDevServer } = await import("@jsenv/core");
+    const devServer = await startDevServer({
+      logLevel: "warn",
+      port: 0,
+      sourceDirectoryUrl: serverDirectoryUrl,
+      keepProcessAlive: false,
+      clientAutoreload: false,
+      ribbon: false,
+      handleSIGINT: false,
+    });
+    return devServer;
+  }
+
+  const serverDirectoryUrl = new URL("../../dist/", import.meta.url);
+  const { startServer, fetchFileSystem } = await import("@jsenv/server");
+  const server = await startServer({
+    logLevel: "warn",
+    port: 0,
+    services: [
+      {
+        handleRequest: async (request) => {
+          const fileUrl = new URL(
+            request.resource.slice(1),
+            serverDirectoryUrl,
+          );
+          const response = await fetchFileSystem(fileUrl, request);
+          return response;
+        },
+      },
+    ],
+  });
+  return server;
+};
+
+export const startTerminalRecording = async ({
+  logs,
+  cols,
+  rows,
+  svg,
+  gif,
+  video,
+  debug,
+} = {}) => {
+  const writeCallbackSet = new Set();
+  const stopCallbackSet = new Set();
+  const terminalRecords = {
+    svg: () => {
+      throw new Error("svg not recorded");
+    },
+    gif: () => {
+      throw new Error("gif not recorded");
+    },
+    webm: () => {
+      throw new Error("video not recorded");
+    },
+    mp4: () => {
+      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 (gif || video) {
+    const { chromium } = await import("playwright");
+    const server = await startLocalServer();
+    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)
+      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__;
+      },
+      {
+        cols,
+        rows,
+        convertEol: process.platform !== "win32",
+        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 */
+      );
+    });
+
+    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;
+      };
+    });
+  }
+  return {
+    write: async (data) => {
+      const promises = [];
+      for (const writeCallback of writeCallbackSet) {
+        promises.push(writeCallback(data));
+      }
+      await Promise.all(promises);
+    },
+    stop: async () => {
+      const promises = [];
+      for (const stopCallback of stopCallbackSet) {
+        promises.push(stopCallback());
+      }
+      writeCallbackSet.clear();
+      stopCallbackSet.clear();
+      await Promise.all(promises);
+      return terminalRecords;
+    },
+  };
+};