Modernize HTML report frontend

Replace the `(window as any)._simplecov*` global stash with a typed
module-level `renderState` cache so the on-demand source-file
materializer reads from a single object rather than four loosely typed
properties.

Add `defer` to both `application.js` and `coverage_data.js` so the
parser does not block on the head script, and assign `content.innerHTML`
once via `join` instead of `+=` in a loop (the latter forced an
O(n^2) re-parse on reports with many groups). With `defer`, the
`init()` fallback for "SIMPLECOV_DATA isn't ready yet" is unreachable
and goes away.

Bump `tsconfig.json` `lib` to ES2023 so the SHA-1 hex conversion in
`hash.ts` can use `padStart` directly and `jumpToMissedLine` can use
the native `Array.prototype.findLast` instead of a hand-rolled helper.
Simplify `getVisibleChild`, `jumpToMissedLine`, and the dark-mode
preflight into more idiomatic shapes, and rebuild the compiled assets
under `public/`.

Author: sferik

html_frontend/src/app.ts

@@ -83,6 +83,17 @@ declare global {
   }
 }
 
+// Module-level state populated by renderPage() and consumed by the
+// on-demand source-file materializer. Holding it here (typed) avoids
+// hanging caches off the global Window object.
+interface RenderState {
+  idToFilename: Record<string, string>;
+  coverage: Record<string, FileCoverage>;
+  branchCoverage: boolean;
+  methodCoverage: boolean;
+}
+let renderState: RenderState | null = null;
+
 // --- Constants ------------------------------------------------
 
 const MAX_BAR_WIDTH = 240;
@@ -483,25 +494,26 @@ function renderPage(data: CoverageData): void {
 
   if (branchCoverage) document.body.setAttribute('data-branch-coverage', 'true');
 
-  // Content: file lists
+  // Content: file lists. Building the full markup in memory and assigning
+  // innerHTML once avoids the O(n^2) re-parse that `innerHTML += ...` in a
+  // loop would trigger on reports with many groups.
   const content = document.getElementById('content')!;
-  content.innerHTML = renderFileList('All Files', allFiles, data.total, data.coverage, branchCoverage, methodCoverage);
-
+  const fileListSections = [
+    renderFileList('All Files', allFiles, data.total, data.coverage, branchCoverage, methodCoverage),
+  ];
   for (const groupName of Object.keys(data.groups)) {
     const group = data.groups[groupName];
-    const groupFiles = group.files || [];
-    content.innerHTML += renderFileList(groupName, groupFiles, group, data.coverage, branchCoverage, methodCoverage);
+    fileListSections.push(
+      renderFileList(groupName, group.files || [], group, data.coverage, branchCoverage, methodCoverage)
+    );
   }
+  content.innerHTML = fileListSections.join('');
 
-  // Build id → filename lookup map for O(1) source file materialization
+  // Cache the lookup map and coverage data so the on-demand source file
+  // materializer can resolve an id back to its FileCoverage in O(1).
   const idToFilename: Record<string, string> = {};
-  for (const fn of allFiles) {
-    idToFilename[fileId(fn)] = fn;
-  }
-  (window as any)._simplecovIdMap = idToFilename;
-  (window as any)._simplecovFiles = data.coverage;
-  (window as any)._simplecovBranchCoverage = branchCoverage;
-  (window as any)._simplecovMethodCoverage = methodCoverage;
+  for (const fn of allFiles) idToFilename[fileId(fn)] = fn;
+  renderState = { idToFilename, coverage: data.coverage, branchCoverage, methodCoverage };
 
   // Footer
   const timestamp = new Date(meta.timestamp);
@@ -535,13 +547,8 @@ interface SortEntry {
 const sortState: Record<string, SortEntry> = {};
 
 function getVisibleChild(row: Element, index: number): Element | null {
-  let count = 0;
-  for (let i = 0; i < row.children.length; i++) {
-    if ((row.children[i] as HTMLElement).style.display === 'none') continue;
-    if (count === index) return row.children[i];
-    count++;
-  }
-  return null;
+  const visible = Array.from(row.children).filter((c) => (c as HTMLElement).style.display !== 'none');
+  return visible[index] ?? null;
 }
 
 function getSortValue(td: Element | null): number | string {
@@ -746,23 +753,24 @@ function updateCoverageCells(
 function materializeSourceFile(sourceFileId: string): HTMLElement | null {
   const existing = document.getElementById(sourceFileId);
   if (existing) return existing;
+  if (!renderState) return null;
 
-  const idMap = (window as any)._simplecovIdMap as Record<string, string>;
-  const coverage = (window as any)._simplecovFiles as Record<string, FileCoverage>;
-  const branchCov = (window as any)._simplecovBranchCoverage as boolean;
-  const methodCov = (window as any)._simplecovMethodCoverage as boolean;
-
-  const targetFilename = idMap[sourceFileId];
+  const targetFilename = renderState.idToFilename[sourceFileId];
   if (!targetFilename) return null;
 
-  const html = renderSourceFile(targetFilename, coverage[targetFilename], branchCov, methodCov);
+  const html = renderSourceFile(
+    targetFilename,
+    renderState.coverage[targetFilename],
+    renderState.branchCoverage,
+    renderState.methodCoverage,
+  );
   const container = document.querySelector('.source_files')!;
   const wrapper = document.createElement('div');
   wrapper.innerHTML = html;
   const el = wrapper.firstElementChild as HTMLElement;
   container.appendChild(el);
 
-  $$('pre code', el).forEach(e => { hljs.highlightElement(e as HTMLElement); });
+  $$('pre code', el).forEach((e) => hljs.highlightElement(e as HTMLElement));
   return el;
 }
 
@@ -866,21 +874,14 @@ function jumpToMissedLine(direction: 1 | -1): void {
   const lines = getMissedLines();
   if (!lines.length) return;
 
-  const scrollTop = dialogBody.scrollTop;
-  const midpoint = scrollTop + dialogBody.clientHeight / 2;
+  const midpoint = dialogBody.scrollTop + dialogBody.clientHeight / 2;
+  // The -10 bias on the backward search keeps the currently-centered line
+  // from counting as its own "previous" hit when we're sitting on it.
+  const target = direction === 1
+    ? lines.find((li) => li.offsetTop > midpoint) || lines[0]
+    : lines.findLast((li) => li.offsetTop < midpoint - 10) || lines[lines.length - 1];
 
-  if (direction === 1) {
-    const next = lines.find(li => li.offsetTop > midpoint);
-    const target = next || lines[0];
-    dialogBody.scrollTop = target.offsetTop - dialogBody.clientHeight / 3;
-  } else {
-    let prev: HTMLElement | null = null;
-    for (let i = lines.length - 1; i >= 0; i--) {
-      if (lines[i].offsetTop < midpoint - 10) { prev = lines[i]; break; }
-    }
-    const target = prev || lines[lines.length - 1];
-    dialogBody.scrollTop = target.offsetTop - dialogBody.clientHeight / 3;
-  }
+  dialogBody.scrollTop = target.offsetTop - dialogBody.clientHeight / 3;
 }
 
 // --- Source file dialog ----------------------------------------
@@ -1019,15 +1020,10 @@ function initDarkMode(): void {
 
 // --- Initialization -------------------------------------------
 
-// Wait for coverage data to be available, then render
+// Render the coverage page. Both `application.js` and `coverage_data.js`
+// use `defer`, so `coverage_data.js` is guaranteed to have populated
+// `window.SIMPLECOV_DATA` by the time `DOMContentLoaded` fires.
 async function init(): Promise<void> {
-  if (!window.SIMPLECOV_DATA) {
-    // Data not loaded yet - the coverage_data.js script tag is at the end of body,
-    // so if DOMContentLoaded fires first, wait for it
-    window.addEventListener('load', init);
-    return;
-  }
-
   const data = window.SIMPLECOV_DATA;
 
   // Show loading indicator

html_frontend/src/hash.ts

@@ -11,10 +11,6 @@
 // upfront so the synchronous render path can look them up freely.
 export async function hash(str: string): Promise<string> {
   const bytes = new TextEncoder().encode(str);
-  const buf = await crypto.subtle.digest('SHA-1', bytes);
-  let out = '';
-  for (const b of new Uint8Array(buf, 0, 4)) {
-    out += ('0' + b.toString(16)).slice(-2);
-  }
-  return out;
+  const digest = await crypto.subtle.digest('SHA-1', bytes);
+  return Array.from(new Uint8Array(digest, 0, 4), (b) => b.toString(16).padStart(2, '0')).join('');
 }

html_frontend/src/index.html

@@ -1,20 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Code Coverage</title>
-    <script src="application.js" type="text/javascript"></script>
-    <link href="application.css" media="screen, projection, print" rel="stylesheet" type="text/css" />
-    <script type="text/javascript">
-      (function() {
-        var pref = localStorage.getItem('simplecov-dark-mode');
-        if (pref === 'dark') {
-          document.documentElement.classList.add('dark-mode');
-        } else if (pref === 'light') {
-          document.documentElement.classList.add('light-mode');
-        }
-      })();
+    <script src="application.js" defer></script>
+    <link href="application.css" rel="stylesheet">
+    <script>
+      // Apply the saved dark/light preference before paint to avoid a flash.
+      const pref = localStorage.getItem('simplecov-dark-mode');
+      if (pref === 'dark' || pref === 'light') {
+        document.documentElement.classList.add(`${pref}-mode`);
+      }
     </script>
   </head>
 
@@ -50,6 +47,6 @@
       <div class="source-dialog__body" id="source-dialog-body" tabindex="0"></div>
     </dialog>
 
-    <script src="coverage_data.js" type="text/javascript"></script>
+    <script src="coverage_data.js" defer></script>
   </body>
 </html>

html_frontend/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "ES2015",
-    "lib": ["ES2015", "DOM"],
+    "lib": ["ES2023", "DOM"],
     "strict": true,
     "noEmit": true
   },