make terminal recorder more robust

jsenv · Aug 13, 2024 · 8bcb11d · 8bcb11d
1 parent dab5701
commit 8bcb11d
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 113 deletions.
diff --git a/packages/independent/snapshot/package.json b/packages/independent/snapshot/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/snapshot",
-  "version": "2.9.10",
+  "version": "2.9.11",
   "description": "Snapshot testing",
   "license": "MIT",
   "author": {
@@ -38,7 +38,7 @@
     "@jsenv/exception": "1.1.2",
     "@jsenv/humanize": "1.2.8",
     "@jsenv/filesystem": "4.10.2",
-    "@jsenv/terminal-recorder": "1.4.5",
+    "@jsenv/terminal-recorder": "1.4.6",
     "@jsenv/urls": "2.5.2",
     "@jsenv/utils": "2.1.2",
     "ansi-regex": "6.0.1",

diff --git a/packages/independent/terminal-recorder/dist/js/terminal_recorder.js b/packages/independent/terminal-recorder/dist/js/terminal_recorder.js
diff --git a/packages/independent/terminal-recorder/package.json b/packages/independent/terminal-recorder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/terminal-recorder",
-  "version": "1.4.5",
+  "version": "1.4.6",
   "description": "Record terminal output as .svg, .gif, .webm, .mp4",
   "license": "MIT",
   "repository": {

diff --git a/packages/independent/terminal-recorder/scripts/build.mjs b/packages/independent/terminal-recorder/scripts/build.mjs
@@ -4,25 +4,17 @@ import { jsenvPluginCommonJs } from "@jsenv/plugin-commonjs";
 await build({
   sourceDirectoryUrl: new URL("../src/", import.meta.url),
   buildDirectoryUrl: new URL("../dist/", import.meta.url),
-  entryPoints: {
-    "./client/xterm.html": "xterm.html",
-  },
-  runtimeCompat: {
-    chrome: "100",
-  },
+  entryPoints: { "./client/xterm.html": "xterm.html" },
+  runtimeCompat: { chrome: "100" },
   minification: false,
   versioning: false,
 });
 
 await build({
   sourceDirectoryUrl: new URL("../src/", import.meta.url),
   buildDirectoryUrl: new URL("../dist/", import.meta.url),
-  entryPoints: {
-    "./main_browser.js": "terminal_recorder_browser.js",
-  },
-  runtimeCompat: {
-    chrome: "100",
-  },
+  entryPoints: { "./main_browser.js": "terminal_recorder_browser.js" },
+  runtimeCompat: { chrome: "100" },
   plugins: [
     jsenvPluginCommonJs({
       include: {

diff --git a/packages/independent/terminal-recorder/src/client/terminal_recorder.js b/packages/independent/terminal-recorder/src/client/terminal_recorder.js
@@ -89,59 +89,77 @@ export const initTerminal = ({
   const terminalElement = document.getElementById("terminal");
   term.open(terminalElement);
 
-  const canvas = document.querySelector("#canvas");
-  const context = canvas.getContext("2d", { willReadFrequently: true });
-  context.imageSmoothingEnabled = true;
-  const xtermCanvas = document.querySelector(
-    "#terminal canvas.xterm-link-layer + canvas",
-  );
-  const headerHeight = 40;
-  canvas.width = paddingLeft + xtermCanvas.width + paddingRight;
-  canvas.height = headerHeight + xtermCanvas.height;
-
-  draw_header: {
-    drawRectangle(context, {
-      x: 0,
-      y: 0,
-      width: canvas.width,
-      height: canvas.height,
-      fill: "#282c34",
-      stroke: "rgba(255,255,255,0.35)",
-      strokeWidth: 10,
-      radius: 8,
-    });
-    drawCircle(context, {
-      x: 20,
-      y: headerHeight / 2,
-      radius: 6,
-      fill: "#ff5f57",
-    });
-    drawCircle(context, {
-      x: 40,
-      y: headerHeight / 2,
-      radius: 6,
-      fill: "#febc2e",
-    });
-    drawCircle(context, {
-      x: 60,
-      y: headerHeight / 2,
-      radius: 6,
-      fill: "#28c840",
-    });
-
-    // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text
-    const text = "Terminal";
-    context.font = `${fontSize}px ${fontFamily}`;
-    context.textBaseline = "middle";
-    context.textAlign = "center";
-    // const textSize = context.measureText(text);
-    context.fillStyle = "#abb2bf";
-    context.fillText(text, canvas.width / 2, headerHeight / 2);
-  }
+  const canvasPromise = (async () => {
+    const canvas = document.querySelector("#canvas");
+    if (!canvas) {
+      throw new Error('Cannot find <canvas id="canvas"> in the document');
+    }
+    let xtermCanvas = document.querySelector(
+      "#terminal canvas.xterm-link-layer + canvas",
+    );
+    if (!xtermCanvas) {
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      xtermCanvas = document.querySelector(
+        "#terminal canvas.xterm-link-layer + canvas",
+      );
+      if (!xtermCanvas) {
+        throw new Error(
+          "Cannot find xterm canvas (canvas.xterm-link-layer + canvas)",
+        );
+      }
+    }
+    return { canvas, xtermCanvas };
+  })();
 
   return {
     term,
     startRecording: async () => {
+      const { canvas, xtermCanvas } = await canvasPromise;
+      const context = canvas.getContext("2d", { willReadFrequently: true });
+      context.imageSmoothingEnabled = true;
+      const headerHeight = 40;
+      canvas.width = paddingLeft + xtermCanvas.width + paddingRight;
+      canvas.height = headerHeight + xtermCanvas.height;
+      draw_header: {
+        drawRectangle(context, {
+          x: 0,
+          y: 0,
+          width: canvas.width,
+          height: canvas.height,
+          fill: "#282c34",
+          stroke: "rgba(255,255,255,0.35)",
+          strokeWidth: 10,
+          radius: 8,
+        });
+        drawCircle(context, {
+          x: 20,
+          y: headerHeight / 2,
+          radius: 6,
+          fill: "#ff5f57",
+        });
+        drawCircle(context, {
+          x: 40,
+          y: headerHeight / 2,
+          radius: 6,
+          fill: "#febc2e",
+        });
+        drawCircle(context, {
+          x: 60,
+          y: headerHeight / 2,
+          radius: 6,
+          fill: "#28c840",
+        });
+
+        // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text
+        const text = "Terminal";
+        context.font = `${fontSize}px ${fontFamily}`;
+        context.textBaseline = "middle";
+        context.textAlign = "center";
+        // const textSize = context.measureText(text);
+        context.fillStyle = "#abb2bf";
+        context.fillText(text, canvas.width / 2, headerHeight / 2);
+      }
+
       const records = {};
       let writePromise = Promise.resolve();
       const frameCallbackSet = new Set();