@jsenv/core 41.4.12 → 41.4.14

package/dist/start_dev_server/start_dev_server.js

@@ -906,6 +906,13 @@ const osFromUserAgent = (userAgent) => {
   return { name: "unknown", version: "" };
 };
 
+// A browser driven by a program rather than by someone looking at it: a test
+// run, a screenshot script. Chromium says so in its user-agent ("HeadlessChrome"
+// / "Headless"), the others do not — so the reporter also sends
+// navigator.webdriver, which every automated browser sets, and either one is
+// enough to classify the client (see the headless flag on the record).
+const isHeadlessUserAgent = (userAgent) => /Headless/i.test(userAgent);
+
 // The machine the dev server runs on, talking to itself: the main client. A
 // phone (or any other device) reaching the server over the network reports
 // with the machine's LAN address instead — which is why the ip is kept on
@@ -939,6 +946,10 @@ const jsenvPluginClientMonitoring = () => {
         userAgent,
         runtime: runtimeFromRequest(request),
         os: osFromUserAgent(userAgent),
+        // Automated browser (test run, script) rather than someone browsing;
+        // set from the user-agent here, and again from navigator.webdriver when
+        // a report brings it (the only signal for headless firefox/webkit).
+        headless: isHeadlessUserAgent(userAgent),
         // The address the reports come from; request.ipForwarded when a proxy
         // sits in between, so the client's own address is kept, not the proxy's.
         ip: request.ipForwarded || request.ip,
@@ -958,6 +969,7 @@ const jsenvPluginClientMonitoring = () => {
         client.userAgent = userAgent;
         client.runtime = runtimeFromRequest(request);
         client.os = osFromUserAgent(userAgent);
+        client.headless = client.headless || isHeadlessUserAgent(userAgent);
       }
       // A device changes address (wifi drop, DHCP): the record follows it.
       const ip = request.ipForwarded || request.ip;
@@ -1076,6 +1088,7 @@ const jsenvPluginClientMonitoring = () => {
       // parsed { name, version } so pages can show a friendly browser/OS
       runtime: client.runtime,
       os: client.os,
+      headless: client.headless,
       ip: client.ip,
       // The main client — the machine the dev server runs on, talking to
       // itself over localhost.
@@ -1133,6 +1146,11 @@ const jsenvPluginClientMonitoring = () => {
     const wasOnline = !firstEver && isOnline(client);
     client.everSeen = true;
     client.lastSeen = now();
+    // navigator.webdriver, reported once per batch: true for any browser under
+    // automation, including the headless firefox/webkit the user-agent hides.
+    if (body.webdriver === true) {
+      client.headless = true;
+    }
 
     updateTab(client, body.tab);
     pruneTabs(client);
@@ -1391,6 +1409,9 @@ const jsenvPluginPageSwitcher = () => {
       html: (urlInfo) => {
         const htmlAst = parseHtml({ html: urlInfo.content, url: urlInfo.url });
         injectJsenvScript(htmlAst, {
+          // A module: the tree it opens is the shared page picker
+          // (protocol_file/client/page_picker.js), which it imports.
+          type: "module",
           src: clientFileUrl$1,
           pluginName: "jsenv:page_switcher",
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "41.4.12",
+  "version": "41.4.14",
   "type": "module",
   "description": "Tool to develop, test and build js projects",
   "repository": {
@@ -72,21 +72,21 @@
     "test:snapshot_clear": "npx @jsenv/filesystem clear **/tests/**/side_effects/"
   },
   "dependencies": {
-    "@jsenv/ast": "6.9.0",
-    "@jsenv/js-module-fallback": "1.4.39",
+    "@jsenv/ast": "6.9.1",
+    "@jsenv/js-module-fallback": "1.5.0",
     "@jsenv/plugin-bundling": "2.10.16",
-    "@jsenv/plugin-minification": "1.7.7",
-    "@jsenv/plugin-supervisor": "1.8.10",
-    "@jsenv/plugin-transpilation": "1.5.80",
-    "@jsenv/server": "17.6.0",
+    "@jsenv/plugin-minification": "1.7.8",
+    "@jsenv/plugin-supervisor": "1.8.11",
+    "@jsenv/plugin-transpilation": "1.6.0",
+    "@jsenv/server": "17.6.1",
     "@jsenv/sourcemap": "1.4.2",
     "react-table": "7.8.0"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "7.28.6",
-    "@babel/plugin-syntax-decorators": "7.28.6",
+    "@babel/eslint-parser": "7.29.7",
+    "@babel/plugin-syntax-decorators": "7.29.7",
     "@babel/plugin-syntax-import-attributes": "7.29.7",
-    "@babel/plugin-syntax-optional-chaining-assign": "7.28.6",
+    "@babel/plugin-syntax-optional-chaining-assign": "7.29.7",
     "@jsenv/abort": "workspace:*",
     "@jsenv/assert": "workspace:*",
     "@jsenv/cli": "workspace:*",
@@ -114,17 +114,17 @@
     "@jsenv/url-meta": "workspace:*",
     "@jsenv/urls": "workspace:*",
     "@jsenv/utils": "workspace:*",
-    "@playwright/browser-chromium": "1.61.1",
-    "@playwright/browser-firefox": "1.61.1",
-    "@playwright/browser-webkit": "1.61.1",
+    "@playwright/browser-chromium": "1.62.1",
+    "@playwright/browser-firefox": "1.62.1",
+    "@playwright/browser-webkit": "1.62.1",
     "babel-plugin-transform-async-to-promises": "0.8.18",
     "eslint": "9.39.2",
     "eslint-plugin-import-x": "4.17.1",
     "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-regexp": "3.1.1",
-    "globals": "17.7.0",
-    "open": "11.0.0",
-    "playwright": "1.61.1",
+    "eslint-plugin-regexp": "3.2.0",
+    "globals": "17.11.0",
+    "open": "11.0.1",
+    "playwright": "1.62.1",
     "preact": "11.0.0-beta.2",
     "prettier": "3.9.6",
     "prettier-plugin-css-order": "git+https://github.com/dmail-fork/prettier-plugin-css-order.git",

package/src/plugins/autoreload/client/autoreload.js

@@ -12,6 +12,7 @@ import {
 
 export const initAutoreload = ({ mainFilePath }) => {
   let debug = false;
+  let fullReloadRequested = false;
   const reloader = {
     urlHotMetas,
     status: {
@@ -64,6 +65,14 @@ export const initAutoreload = ({ mainFilePath }) => {
     },
     currentExecution: null,
     reload: () => {
+      if (fullReloadRequested) {
+        // The document is already being replaced; anything we would do here
+        // dies with the current page. Calling window.location.reload() again
+        // would abort the navigation already in flight (net::ERR_ABORTED).
+        // This happens for a single file edit: the change is sent first, then
+        // the prune of the urls it no longer references arrives a few ms later.
+        return;
+      }
       const someEffectIsFullReload = reloader.changes.value.some(
         (reloadMessage) => {
           if (reloadMessage.type === "full") {
@@ -90,6 +99,7 @@ export const initAutoreload = ({ mainFilePath }) => {
         },
       );
       if (someEffectIsFullReload) {
+        fullReloadRequested = true;
         dispatchBeforeFullReload();
         reloadHtmlPage();
         return;

package/src/plugins/client_monitoring/client/client_reporter.js

@@ -185,6 +185,10 @@ const setup = () => {
     pendingActivities = [];
     const payload = JSON.stringify({
       clientId,
+      // The server reads browser/OS from the request headers, but a headless
+      // firefox/webkit looks exactly like a windowed one there; this flag is
+      // what tells them apart (chromium also says "Headless" in its user-agent).
+      webdriver: window.navigator.webdriver === true,
       tab: tabInfo({ closing }),
       activities,
       logs,

package/src/plugins/client_monitoring/client/clients_page.html

@@ -125,21 +125,6 @@
       .btn.primary:hover {
         background: #1d4ed8;
       }
-      .picker-filter {
-        box-sizing: border-box;
-        width: 100%;
-        margin-bottom: 10px;
-        padding: 8px 10px;
-        font: inherit;
-        border: 1px solid #d1d5db;
-        border-radius: 6px;
-      }
-      .pagepick {
-        width: 100%;
-        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-        text-align: left;
-        word-break: break-all;
-      }
       .monitor {
         margin-left: 4px;
         padding: 2px 4px;
@@ -227,6 +212,16 @@
       <tbody id="other-rows"></tbody>
     </table>
 
+    <h2>Headless browsers</h2>
+    <p class="intro">
+      Browsers driven by a program — a test run, a screenshot script — rather
+      than by someone looking at them.
+    </p>
+    <table>
+      <thead id="head3"></thead>
+      <tbody id="headless-rows"></tbody>
+    </table>
+
     <dialog id="dlg">
       <div class="dlg-head">
         <strong id="dlg-title"></strong>
@@ -238,8 +233,11 @@
     </dialog>
 
     <script type="module">
+      import { openPagePicker } from "../../protocol_file/client/page_picker.js";
+
       const selfRows = document.getElementById("self-rows");
       const otherRows = document.getElementById("other-rows");
+      const headlessRows = document.getElementById("headless-rows");
       // The monitoring script (injected into this page too) stores our own id.
       let selfId = null;
       try {
@@ -254,6 +252,7 @@
       </tr>`;
       document.getElementById("head").innerHTML = headHtml;
       document.getElementById("head2").innerHTML = headHtml;
+      document.getElementById("head3").innerHTML = headHtml;
       const COLSPAN = 8;
 
       const ago = (ts) => {
@@ -420,16 +419,26 @@
       const render = (clients) => {
         lastClients = clients;
         const self = selfId ? clients.find((d) => d.id === selfId) : null;
-        // Others ordered by when they first connected, so rows don't reshuffle.
+        // Ordered by when they first connected, so rows don't reshuffle.
+        const byFirstSeen = (a, b) => a.firstSeen - b.firstSeen;
+        // A headless browser is a program's, not a person's: it comes and goes
+        // with a test run, so it gets its own table instead of pushing the
+        // clients someone is actually browsing with out of sight.
         const others = clients
-          .filter((d) => d !== self)
-          .sort((a, b) => a.firstSeen - b.firstSeen);
+          .filter((d) => d !== self && !d.headless)
+          .sort(byFirstSeen);
+        const headless = clients
+          .filter((d) => d !== self && d.headless)
+          .sort(byFirstSeen);
         selfRows.innerHTML = self
           ? rowHtml(self)
           : `<tr><td class="empty" colspan="${COLSPAN}">This browser isn't registered yet — it will appear shortly.</td></tr>`;
         otherRows.innerHTML = others.length
           ? others.map(rowHtml).join("")
           : `<tr><td class="empty" colspan="${COLSPAN}">No other client has connected.</td></tr>`;
+        headlessRows.innerHTML = headless.length
+          ? headless.map(rowHtml).join("")
+          : `<tr><td class="empty" colspan="${COLSPAN}">No headless browser has connected.</td></tr>`;
       };
 
       // Dialogs (all tabs / recent activity / user agent).
@@ -514,68 +523,33 @@
           // dev server gone — ignore
         }
       };
-      // The .html pages available to navigate to (fetched once, lazily).
-      let navigablePages = null;
-      const loadPages = async () => {
-        if (navigablePages) {
-          return navigablePages;
-        }
-        try {
-          navigablePages = await (await fetch("/.internal/pages.json")).json();
-        } catch {
-          navigablePages = [];
-        }
-        return navigablePages;
-      };
       const shortLabel = (d) => {
         const parts = [d.os && d.os.name, d.runtime && d.runtime.name].filter(
           Boolean,
         );
         return parts.length ? parts.join(" ") : d.id.slice(0, 8);
       };
-      // A searchable list of pages; picking one navigates the client's active
-      // tab there (tabId from activeTab so only that tab moves).
-      const openNavigateDialog = async (client) => {
-        dlgTitle.textContent = `Navigate ${shortLabel(client)} to…`;
-        dlgCopy.style.display = "none";
-        dlgBody.innerHTML = `
-          <input class="picker-filter" id="page-filter" type="search" placeholder="Filter pages…" />
-          <ul class="list" id="page-list"></ul>`;
-        dlg.showModal();
-        const pages = await loadPages();
-        const listEl = document.getElementById("page-list");
-        const filterEl = document.getElementById("page-filter");
-        const renderPages = (query) => {
-          const needle = query.trim().toLowerCase();
-          const matches = needle
-            ? pages.filter((p) => p.toLowerCase().includes(needle))
-            : pages;
-          listEl.innerHTML = matches.length
-            ? matches
-                .slice(0, 300)
-                .map(
-                  (p) =>
-                    `<li><button class="btn pagepick" data-url="${escapeHtml(p)}">${escapeHtml(p)}</button></li>`,
-                )
-                .join("")
-            : '<li class="muted">No page matches.</li>';
-        };
-        renderPages("");
-        filterEl.oninput = () => renderPages(filterEl.value);
-        filterEl.focus();
-        listEl.onclick = (event) => {
-          const button = event.target.closest("button.pagepick");
-          if (!button) {
-            return;
-          }
-          sendCommand({
-            clientId: client.id,
-            tabId: client.activeTab ? client.activeTab.id : null,
-            type: "navigate",
-            url: button.getAttribute("data-url"),
-          });
-          dlg.close();
-        };
+      // Which page to send a client to is the same question cmd+K asks on any
+      // dev-served page, so it is the same tree that answers it (see
+      // protocol_file/client/page_picker.js) — filters, folding and all. Only
+      // the ending differs: the url goes to the client's active tab (tabId from
+      // activeTab, so no other tab moves) instead of to this window. No href on
+      // the rows for that very reason: a click here must not take THIS browser
+      // to a page meant for another one.
+      const openNavigateDialog = (client) => {
+        openPagePicker({
+          title: `Navigate ${shortLabel(client)} to…`,
+          placeholder: "Go to page…",
+          hereUrl: client.activeTab ? client.activeTab.url : null,
+          onPick: (page) => {
+            sendCommand({
+              clientId: client.id,
+              tabId: client.activeTab ? client.activeTab.id : null,
+              type: "navigate",
+              url: page.url,
+            });
+          },
+        });
       };
 
       document.addEventListener("click", async (event) => {

package/src/plugins/client_monitoring/jsenv_plugin_client_monitoring.js

@@ -140,6 +140,13 @@ const osFromUserAgent = (userAgent) => {
   return { name: "unknown", version: "" };
 };
 
+// A browser driven by a program rather than by someone looking at it: a test
+// run, a screenshot script. Chromium says so in its user-agent ("HeadlessChrome"
+// / "Headless"), the others do not — so the reporter also sends
+// navigator.webdriver, which every automated browser sets, and either one is
+// enough to classify the client (see the headless flag on the record).
+const isHeadlessUserAgent = (userAgent) => /Headless/i.test(userAgent);
+
 // The machine the dev server runs on, talking to itself: the main client. A
 // phone (or any other device) reaching the server over the network reports
 // with the machine's LAN address instead — which is why the ip is kept on
@@ -173,6 +180,10 @@ export const jsenvPluginClientMonitoring = () => {
         userAgent,
         runtime: runtimeFromRequest(request),
         os: osFromUserAgent(userAgent),
+        // Automated browser (test run, script) rather than someone browsing;
+        // set from the user-agent here, and again from navigator.webdriver when
+        // a report brings it (the only signal for headless firefox/webkit).
+        headless: isHeadlessUserAgent(userAgent),
         // The address the reports come from; request.ipForwarded when a proxy
         // sits in between, so the client's own address is kept, not the proxy's.
         ip: request.ipForwarded || request.ip,
@@ -192,6 +203,7 @@ export const jsenvPluginClientMonitoring = () => {
         client.userAgent = userAgent;
         client.runtime = runtimeFromRequest(request);
         client.os = osFromUserAgent(userAgent);
+        client.headless = client.headless || isHeadlessUserAgent(userAgent);
       }
       // A device changes address (wifi drop, DHCP): the record follows it.
       const ip = request.ipForwarded || request.ip;
@@ -310,6 +322,7 @@ export const jsenvPluginClientMonitoring = () => {
       // parsed { name, version } so pages can show a friendly browser/OS
       runtime: client.runtime,
       os: client.os,
+      headless: client.headless,
       ip: client.ip,
       // The main client — the machine the dev server runs on, talking to
       // itself over localhost.
@@ -367,6 +380,11 @@ export const jsenvPluginClientMonitoring = () => {
     const wasOnline = !firstEver && isOnline(client);
     client.everSeen = true;
     client.lastSeen = now();
+    // navigator.webdriver, reported once per batch: true for any browser under
+    // automation, including the headless firefox/webkit the user-agent hides.
+    if (body.webdriver === true) {
+      client.headless = true;
+    }
 
     updateTab(client, body.tab);
     pruneTabs(client);