Render HTML coverage reports client-side from static JSON data

Replace server-side ERB template rendering with a static single-page
JavaScript app. The HTML formatter now writes coverage_data.js
(a thin JS wrapper around the JSON coverage data) and copies
pre-compiled static assets. All rendering — file lists, source code
views, coverage bars, group tabs — happens in the browser.

This cleanly separates data (JSON) from presentation (JS/HTML/CSS):

* Delete ERB templates, Ruby view helpers, and coverage helpers
* Move all rendering logic into TypeScript (app.ts)
* Add static index.html as a pre-compiled asset via rake assets:compile
* Flatten formatter class hierarchy (5 classes → 3)
* Introduce JSONFormatter.build_hash for shared, side-effect-free
  serialization used by both formatters
* Eliminate double JSONFormatter execution when both formatters
  are configured

Author: sferik

Rakefile

@@ -40,7 +40,7 @@ task test: %i[spec cucumber test_html]
 task default: %i[rubocop spec cucumber test_html]
 
 namespace :assets do
-  desc "Compile frontend assets (JS + CSS) using esbuild"
+  desc "Compile frontend assets (HTML, JS, CSS) using esbuild"
   task :compile do
     frontend = File.expand_path("html_frontend", __dir__)
     outdir = File.expand_path("lib/simplecov/formatter/html_formatter/public", __dir__)
@@ -62,5 +62,8 @@ namespace :assets do
       io.close_write
       File.write("#{outdir}/application.css", io.read)
     end
+
+    # HTML: copy static index.html
+    FileUtils.cp(File.join(frontend, "src/index.html"), File.join(outdir, "index.html"))
   end
 end

features/branch_coverage.feature

@@ -15,8 +15,7 @@ Feature:
       end
       """
     When I open the coverage report generated with `bundle exec rspec spec`
-    Then the output should contain "Line coverage: 56 / 61 (91.80%)"
-    And the output should contain "Branch coverage: 2 / 4 (50.00%)"
+    Then the output should contain "56 / 61 LOC (91.8%) covered"
     And I should see the groups:
       | name      | coverage | files |
       | All Files | 91.80%   | 7     |

features/step_definitions/html_steps.rb

@@ -60,7 +60,29 @@
 end
 
 Then /^there should be (\d+) skipped lines in the source files$/ do |expected_count|
-  count = page.evaluate_script("document.querySelectorAll('.source_files template').length > 0 ? Array.from(document.querySelectorAll('.source_files template')).reduce(function(sum, t) { return sum + t.content.querySelectorAll('ol li.skipped').length; }, 0) : document.querySelectorAll('.source_table ol li.skipped').length")
+  # Materialize all source files (renders them from coverage data), then count skipped lines
+  count = page.evaluate_script(<<~JS)
+    (function() {
+      // Check for pre-rendered templates (old simplecov-html)
+      var templates = document.querySelectorAll('.source_files template');
+      if (templates.length > 0) {
+        return Array.from(templates).reduce(function(sum, t) {
+          return sum + t.content.querySelectorAll('ol li.skipped').length;
+        }, 0);
+      }
+      // New architecture: count skipped lines directly from coverage data
+      if (window.SIMPLECOV_DATA) {
+        var count = 0;
+        var coverage = window.SIMPLECOV_DATA.coverage;
+        Object.keys(coverage).forEach(function(fn) {
+          var lines = coverage[fn].lines;
+          lines.forEach(function(l) { if (l === 'ignored') count++; });
+        });
+        return count;
+      }
+      return document.querySelectorAll('.source_table ol li.skipped').length;
+    })()
+  JS
   expect(count).to eq(expected_count.to_i)
 end
 

features/support/env.rb

@@ -23,8 +23,23 @@ def extended(base)
 
 # Rack app for Capybara which returns the latest coverage report from Aruba temp project dir
 coverage_dir = File.expand_path("../../tmp/aruba/project/coverage/", __dir__)
+
+# Prevent the browser from caching coverage_data.js between scenario visits
+class NoCacheMiddleware
+  def initialize(app)
+    @app = app
+  end
+
+  def call(env)
+    status, headers, body = @app.call(env)
+    headers["cache-control"] = "no-store"
+    [status, headers, body]
+  end
+end
+
 Capybara.app = Rack::Builder.new do
-  use Rack::Static, urls: {"/" => "index.html"}, root: coverage_dir, header_rules: [[:all, {"cache-control" => "no-store"}]]
+  use NoCacheMiddleware
+  use Rack::Static, urls: {"/" => "index.html"}, root: coverage_dir
   run Rack::Directory.new(coverage_dir)
 end.to_app