@specific.dev/spectest 0.36.0 → 0.36.1

package/dist/browser.js

@@ -305,15 +305,29 @@ const RRWEB_BOOTSTRAP = `
   // src points at a same-origin URL (e.g. next/font's
   // /_next/static/media/*.woff2) is unreachable at replay time and the
   // page silently falls back to a system font. collectFonts above won't
-  // help (FontFace-API fonts only), so inline the bytes ourselves: once
-  // fonts have loaded, fetch each url() (same-origin -> allowed, and the
-  // page already trusts the in-VM CA), rewrite the rule's src to a data:
+  // help (FontFace-API fonts only), so inline the bytes ourselves: fetch
+  // each url() (same-origin -> allowed, and the page already trusts the
+  // in-VM CA), rewrite the rule's src to a data:
   // URI, then take a fresh full snapshot so the now-self-contained CSS
   // is captured. Plain string ops, no regex — this whole script ships
   // inside a TS template literal where regex backslashes get mangled.
+  //
+  // Do NOT start this scan from document.fonts.ready. This script runs at
+  // document-start. At that moment the font set is idle, so Chrome settles
+  // that first ready promise immediately, before the parser has registered
+  // one stylesheet. The scan then saw 0 @font-face rules, and a one-shot
+  // latch stopped it from looking again, so no font was ever inlined.
+  // (Found on run_03j0mxtvp6x0p16d9y83e: every next/font face fell back.
+  // The diagnostics were invisible too, because rrweb's console plugin
+  // only patches console at the load event.)
+  //
+  // Two triggers instead: the load event, by which all render-blocking CSS
+  // is parsed, and each \`loadingdone\` on document.fonts, which catches CSS
+  // added later by an HMR update or a client-side route change. The scan
+  // skips a rule it already inlined, so repeated triggers are cheap.
   (function () {
-    if (window.__spectestFontsInlined) return;
-    window.__spectestFontsInlined = true;
+    if (window.__spectestFontInliner) return;
+    window.__spectestFontInliner = true;
     // Diagnostics ride the console-record plugin, so they land in the
     // recording (and state.db) — our only debugging window into the
     // headless page. Prefix is grep-able; keep them terse.
@@ -370,7 +384,12 @@ const RRWEB_BOOTSTRAP = `
         }
       }
     }
-    function run() {
+    // Every @font-face cssText this run already rewrote. A rule stays out
+    // of later scans, so an HMR update that adds one stylesheet costs one
+    // fetch, not a re-inline of the whole page.
+    var inlined = {};
+    var scans = 0, busy = false, rescan = false;
+    function collect() {
       // Collect each @font-face's *cssText* (reliable for any CSSRule —
       // unlike .style.setProperty('src',…), which silently no-ops on
       // CSSFontFaceRule in Chrome) plus the http url()s inside it.
@@ -384,13 +403,26 @@ const RRWEB_BOOTSTRAP = `
         eachFontFace(rules, function (rule) {
           faceCount++;
           var cssText = rule.cssText || "";
+          if (inlined[cssText]) return;
           var urls = urlsIn(cssText, base);
           if (urls.length) faces.push({ cssText: cssText, urls: urls });
         });
       }
-      log("sheets=" + sheets.length + " readable=" + readable +
-          " fontFaces=" + faceCount + " withUrl=" + faces.length);
+      // Log the first scan (so a page with no web fonts still says so) and
+      // every scan with work to do. A quiet re-trigger stays silent.
+      if (!scans++ || faces.length) {
+        log("sheets=" + sheets.length + " readable=" + readable +
+            " fontFaces=" + faceCount + " new=" + faces.length);
+      }
+      return faces;
+    }
+    function run() {
+      // One pass at a time. A trigger during a pass queues exactly one
+      // more, which then sees the marks the pass just wrote.
+      if (busy) { rescan = true; return; }
+      var faces = collect();
       if (!faces.length) return;
+      busy = true;
       var jobs = faces.map(function (face) {
         return Promise.all(face.urls.map(function (u) {
           return fetchDataUri(u.abs)
@@ -403,7 +435,9 @@ const RRWEB_BOOTSTRAP = `
             text = text.split(pairs[k].token).join(pairs[k].dataUri);
             changed = true;
           }
-          return changed ? text : null;
+          if (!changed) return null;
+          inlined[face.cssText] = true;
+          return text;
         });
       });
       Promise.all(jobs).then(function (texts) {
@@ -426,15 +460,21 @@ const RRWEB_BOOTSTRAP = `
             log("took full snapshot");
           }
         } catch (e) { log("snapshot FAIL " + (e && e.message)); }
+      }).catch(function (e) {
+        log("run FAIL " + (e && e.message));
+      }).then(function () {
+        busy = false;
+        if (rescan) { rescan = false; setTimeout(run, 0); }
       });
     }
+    function schedule() { setTimeout(run, 0); }
     try {
-      if (document.fonts && document.fonts.ready && document.fonts.ready.then) {
-        document.fonts.ready.then(function () { setTimeout(run, 0); });
-      } else if (document.readyState === "complete") {
-        run();
-      } else {
-        window.addEventListener("load", run);
+      if (document.readyState === "complete") schedule();
+      else window.addEventListener("load", schedule);
+      // Fires each time a batch of fonts finishes loading, including fonts
+      // pulled in by CSS that arrives after the load event.
+      if (document.fonts && document.fonts.addEventListener) {
+        document.fonts.addEventListener("loadingdone", schedule);
       }
     } catch (e) { log("init FAIL " + (e && e.message)); }
   })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@specific.dev/spectest",
-  "version": "0.36.0",
+  "version": "0.36.1",
   "description": "Spectest SDK for defining test environments in TypeScript.",
   "type": "module",
   "main": "./dist/index.js",