@jsenv/terminal-recorder 1.4.0 → 1.4.2

package/dist/js/terminal_recorder.js

@@ -2156,24 +2156,19 @@ const initTerminal = ({
           repeat: repeat === true ? 0 : repeat === false ? -1 : repeat,
           quality,
         });
-
-        const startTime = Date.now();
-        let previousTime = startTime;
-
-        frameCallbackSet.add(() => {
-          const now = Date.now();
-          const msSincePreviousFrame = now - previousTime;
-          previousTime = now;
-          log(`add frame to gif with delay of ${msSincePreviousFrame}ms`);
-          gifEncoder.addFrame(context, { delay: msSincePreviousFrame });
+        frameCallbackSet.add(({ delay }) => {
+          log(`add frame to gif with delay of ${delay}ms`);
+          gifEncoder.addFrame(context, { delay });
         });
         stopCallbackSet.add(async () => {
+          const now = Date.now();
+          drawFrame({
+            delay: now - previousTime,
+          });
           if (msAddedAtTheEnd) {
-            drawFrame();
-            previousTime = Date.now() - msAddedAtTheEnd;
-            drawFrame();
-          } else {
-            drawFrame();
+            drawFrame({
+              delay: now - msAddedAtTheEnd,
+            });
           }
           gifEncoder.finish();
           log("gif recording stopped");
@@ -2183,9 +2178,12 @@ const initTerminal = ({
         log("gif recorder started");
       }
 
-      const drawFrame = () => {
+      const startTime = Date.now();
+      let previousTime = startTime;
+      let isFirstDraw = true;
+      const drawFrame = (options) => {
         for (const frameCallback of frameCallbackSet) {
-          frameCallback();
+          frameCallback(options);
         }
       };
 
@@ -2204,16 +2202,24 @@ const initTerminal = ({
       };
 
       replicateXterm();
-      drawFrame();
 
       return {
-        writeIntoTerminal: async (data) => {
+        writeIntoTerminal: async (data, options = {}) => {
+          if (isFirstDraw) {
+            isFirstDraw = false;
+            drawFrame({ delay: 0 });
+          }
+          let { delay } = options;
+          if (delay === undefined) {
+            const now = Date.now();
+            delay = now - previousTime;
+          }
           writePromise = new Promise((resolve) => {
             log(`write data:`, data);
             term.write(data, () => {
               term._core._renderService._renderDebouncer._innerRefresh();
               replicateXterm();
-              drawFrame();
+              drawFrame({ delay });
               resolve();
             });
           });

package/dist/terminal_recorder_browser.js

@@ -1612,4 +1612,4 @@ const leadingWhitespaceWidth = (text) => {
   return leadingSpace[0].length;
 };
 
-export { renderTerminalSvg };
+export { parseAnsi, renderTerminalSvg };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/terminal-recorder",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "Record terminal output as .svg, .gif, .webm, .mp4",
   "license": "MIT",
   "repository": {
@@ -38,8 +38,8 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@jsenv/humanize": "1.2.6",
-    "@jsenv/server": "15.2.16",
+    "@jsenv/humanize": "1.2.7",
+    "@jsenv/server": "15.2.17",
     "@playwright/browser-chromium": "1.45.3",
     "ansi-regex": "6.0.1",
     "he": "1.2.0",

package/src/client/terminal_recorder.js

@@ -258,24 +258,19 @@ export const initTerminal = ({
           repeat: repeat === true ? 0 : repeat === false ? -1 : repeat,
           quality,
         });
-
-        const startTime = Date.now();
-        let previousTime = startTime;
-
-        frameCallbackSet.add(() => {
-          const now = Date.now();
-          const msSincePreviousFrame = now - previousTime;
-          previousTime = now;
-          log(`add frame to gif with delay of ${msSincePreviousFrame}ms`);
-          gifEncoder.addFrame(context, { delay: msSincePreviousFrame });
+        frameCallbackSet.add(({ delay }) => {
+          log(`add frame to gif with delay of ${delay}ms`);
+          gifEncoder.addFrame(context, { delay });
         });
         stopCallbackSet.add(async () => {
+          const now = Date.now();
+          drawFrame({
+            delay: now - previousTime,
+          });
           if (msAddedAtTheEnd) {
-            drawFrame();
-            previousTime = Date.now() - msAddedAtTheEnd;
-            drawFrame();
-          } else {
-            drawFrame();
+            drawFrame({
+              delay: now - msAddedAtTheEnd,
+            });
           }
           gifEncoder.finish();
           log("gif recording stopped");
@@ -285,9 +280,12 @@ export const initTerminal = ({
         log("gif recorder started");
       }
 
-      const drawFrame = () => {
+      const startTime = Date.now();
+      let previousTime = startTime;
+      let isFirstDraw = true;
+      const drawFrame = (options) => {
         for (const frameCallback of frameCallbackSet) {
-          frameCallback();
+          frameCallback(options);
         }
       };
 
@@ -306,16 +304,24 @@ export const initTerminal = ({
       };
 
       replicateXterm();
-      drawFrame();
 
       return {
-        writeIntoTerminal: async (data) => {
+        writeIntoTerminal: async (data, options = {}) => {
+          if (isFirstDraw) {
+            isFirstDraw = false;
+            drawFrame({ delay: 0 });
+          }
+          let { delay } = options;
+          if (delay === undefined) {
+            const now = Date.now();
+            delay = now - previousTime;
+          }
           writePromise = new Promise((resolve) => {
             log(`write data:`, data);
             term.write(data, () => {
               term._core._renderService._renderDebouncer._innerRefresh();
               replicateXterm();
-              drawFrame();
+              drawFrame({ delay });
               resolve();
             });
           });

package/src/main_browser.js

@@ -1 +1,2 @@
+export { parseAnsi } from "./svg/parse_ansi.js";
 export { renderTerminalSvg } from "./svg/render_terminal_svg.js";

package/src/terminal_recording.js

@@ -133,13 +133,13 @@ export const startTerminalRecording = async ({
     },
     /* eslint-env node */
   );
-  writeCallbackSet.add(async (data) => {
+  writeCallbackSet.add(async (data, options) => {
     await page.evaluate(
       /* eslint-env browser */
-      async (data) => {
-        await window.terminalRecording.writeIntoTerminal(data);
+      async ({ data, options }) => {
+        await window.terminalRecording.writeIntoTerminal(data, options);
       },
-      data,
+      { data, options },
       /* eslint-env node */
     );
   });
@@ -181,13 +181,13 @@ export const startTerminalRecording = async ({
   });
   let stopped = false;
   return {
-    write: async (data) => {
+    write: async (data, options) => {
       if (stopped) {
         throw new Error("write after stop()");
       }
       const promises = [];
       for (const writeCallback of writeCallbackSet) {
-        promises.push(writeCallback(data));
+        promises.push(writeCallback(data, options));
       }
       await Promise.all(promises);
     },