@jsenv/terminal-recorder 1.5.15 → 1.5.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/terminal-recorder",
-  "version": "1.5.15",
+  "version": "1.5.17",
   "description": "Record terminal output as .svg, .gif, .webm, .mp4",
   "license": "MIT",
   "repository": {
@@ -20,7 +20,7 @@
     ".": {
       "node": "./src/main.js",
       "browser": {
-        "development": "./src/main_browser.js",
+        "dev:jsenv": "./src/main_browser.js",
         "default": "./dist/terminal_recorder_browser.js"
       }
     },
@@ -37,8 +37,8 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@jsenv/humanize": "1.5.0",
-    "@jsenv/server": "16.0.8",
+    "@jsenv/humanize": "1.5.2",
+    "@jsenv/server": "16.1.2",
     "@playwright/browser-chromium": "1.51.1",
     "@jsenv/terminal-text-size": "0.0.1",
     "ansi-regex": "6.1.0",

package/src/.jsenv/chrome@134.00/@fs/Users/dmail/Documents/dev/core/packages/independent/backend/server/src/services/autoreload_on_server_restart/client/autoreload_on_server_restart.js

@@ -0,0 +1,132 @@
+const css = /* css */ `
+dialog {
+  opacity: 0;
+  transition: all 0.3s allow-discrete;
+}
+dialog::backdrop {
+   background-image: linear-gradient(
+    45deg,
+    magenta,
+    rebeccapurple,
+    dodgerblue,
+    green
+  );
+  opacity: 0;
+  transition: all 0.3s allow-discrete;
+}
+dialog:open {
+  opacity: 1;
+}
+dialog:open::backdrop {
+  opacity: 0.75;
+}`;
+
+const html = /* html */ `<style>
+    ${css}
+</style>
+<dialog>
+    <p>Connection with server is lost</p>
+    <button autofocus name="reconnect">Retry</button>
+</dialog>`;
+
+class JsenvAutoreloadOnServerRestart extends HTMLElement {
+  constructor({ url } = {}) {
+    super();
+    const root = this.attachShadow({ mode: "open" });
+    root.innerHTML = html;
+
+    const dialog = root.querySelector("dialog");
+    const reconnectButton = dialog.querySelector('button[name="reconnect"]');
+
+    (async () => {
+      const connect = () => {
+        const websocket = new WebSocket(url);
+        const connectedPromise = new Promise((resolve) => {
+          websocket.onerror = () => {
+            resolve(null);
+          };
+          websocket.onopen = () => {
+            resolve(websocket);
+          };
+        });
+        return connectedPromise;
+      };
+
+      const initialWebSocket = await connect();
+      if (!initialWebSocket) {
+        return;
+      }
+      initialWebSocket.onclose = async () => {
+        console.info("connection to server lost, trying to reconnect");
+        const retry = async () => {
+          let attemptCount = 0;
+          let timeToWait = 100;
+          const tryToReconnect = async () => {
+            const newWebsocket = await connect();
+            if (newWebsocket) {
+              dialog.close();
+              console.info("reconnected to server, reloading the page...");
+              window.location.reload(true);
+              return;
+            }
+            attemptCount++;
+            if (attemptCount === 10) {
+              dialog.showModal();
+              reconnectButton.onclick = async () => {
+                reconnectButton.disabled = true;
+                const previousContext = reconnectButton.textContent;
+                reconnectButton.textContent = "Retrying...";
+                await retry();
+                reconnectButton.textContent = previousContext;
+                reconnectButton.disabled = false;
+              };
+              return;
+            }
+            timeToWait += 100;
+            await new Promise((resolve) => setTimeout(resolve, timeToWait));
+            await tryToReconnect();
+          };
+          await tryToReconnect();
+        };
+        retry();
+      };
+    })();
+  }
+}
+if (!customElements.get("jsenv-autoreload-on-server-restart")) {
+  customElements.define(
+    "jsenv-autoreload-on-server-restart",
+    JsenvAutoreloadOnServerRestart,
+  );
+}
+
+const websocketEndpoint =
+  document.currentScript.getAttribute("data-ws-endpoint") ||
+  "/.internal/alive.websocket";
+
+const jsenvAutoreloadOnServerRestartElement =
+  new JsenvAutoreloadOnServerRestart({
+    url: (() => {
+      const websocketScheme =
+        self.location.protocol === "https:" ? "wss" : "ws";
+      const websocketUrl = `${websocketScheme}://${self.location.host}${websocketEndpoint}`;
+      return websocketUrl;
+    })(),
+  });
+
+// script is injected into document.body
+if (document.body) {
+  document.currentScript.parentNode.replaceChild(
+    jsenvAutoreloadOnServerRestartElement,
+    document.currentScript,
+  );
+}
+// script injected outisde document.body (likely in head)
+else {
+  document.currentScript.parentNode.removeChild(document.currentScript);
+  document.onreadystatechange = () => {
+    if (document.readyState === "interactive") {
+      document.body.appendChild(jsenvAutoreloadOnServerRestartElement);
+    }
+  };
+}

package/src/.jsenv/chrome@134.00/xterm.html

@@ -28,7 +28,8 @@
           ]
         });
       </script>
-    </jsenv-scripts>
+      <script src="/@fs/Users/dmail/Documents/dev/core/packages/independent/backend/server/src/services/autoreload_on_server_restart/client/autoreload_on_server_restart.js" jsenv-injected-by="jsenv:autoreload_on_server_restart" data-ws-endpoint="/.internal/events.websocket"></script>
+</jsenv-scripts>
   
 
   

package/src/command_recording.js

@@ -1,6 +1,5 @@
 import { ANSI, UNICODE } from "@jsenv/humanize";
 import { spawn } from "node:child_process";
-
 import { startTerminalRecording } from "./terminal_recording.js";
 
 export const recordCommandToSvg = async (

package/src/terminal_recording.js

@@ -12,11 +12,15 @@
 // import prettier from "prettier";
 import { renderTerminalSvg } from "./svg/render_terminal_svg.js";
 
-const isDev = process.execArgv.includes("--conditions=development");
+const isDev = process.execArgv.some(
+  (arg) =>
+    arg.includes("--conditions=development") ||
+    arg.includes("--conditions=dev:"),
+);
 
 const startLocalServer = async () => {
   if (isDev) {
-    const serverDirectoryUrl = new URL("./client/", import.meta.url);
+    const serverDirectoryUrl = import.meta.resolve("./client/");
     const { startDevServer } = await import("@jsenv/core");
     const devServer = await startDevServer({
       logLevel: "warn",
@@ -30,7 +34,7 @@ const startLocalServer = async () => {
     return devServer;
   }
 
-  const serverDirectoryUrl = new URL("../dist/", import.meta.url);
+  const serverDirectoryUrl = import.meta.resolve("../dist/");
   const { startServer, createFileSystemFetch } = await import("@jsenv/server");
   const server = await startServer({
     logLevel: "warn",
@@ -87,9 +91,13 @@ export const startTerminalRecording = async ({
   page.on("pageerror", (error) => {
     throw error;
   });
-  page.on("console", (consoleMessage) => {
+  const onConsole = (consoleMessage) => {
     console.log(`browser> ${consoleMessage.text()}`);
+  };
+  stopCallbackSet.add(() => {
+    page.off("console", onConsole);
   });
+  page.on("console", onConsole);
   await page.goto(`${server.origin}/xterm.html`);
   await page.evaluate(
     /* eslint-disable no-undef */