@canyonjs/html-modern

Modern Istanbul HTML coverage report: Preact component library + single-file HTML page.

Install

Peer dependencies must be installed in your app:

pnpm add @canyonjs/html-modern preact \
  @codemirror/view @codemirror/state @codemirror/language @codemirror/lang-javascript \
  @codemirror/theme-one-dark

Usage (Preact library)

import { ReportApp, buildReportFiles } from "@canyonjs/html-modern";
import "@canyonjs/html-modern/style.css";

Istanbul reporter

Install a peer dependency (one of):

pnpm add -D @canyonjs/html-modern istanbul-lib-report
# or with Vitest's istanbul fork:
pnpm add -D @canyonjs/html-modern @vitest/istanbul-lib-report

Vitest (vitest.config.ts):

export default defineConfig({
  test: {
    coverage: {
      provider: "istanbul",
      reporter: [["@canyonjs/html-modern/reporter", { writeReportDataJson: true }]],
    },
  },
});

nyc (.nycrc / package.json):

{
  "reporter": [["@canyonjs/html-modern/reporter", { "writeReportDataJson": true }]]
}

Reporter options: verbose, projectRoot, writeReportDataJson, metricsToShow, skipEmpty, summarizer, fileTags.

File tags (filter in HTML report)

Tag files with glob rules and filter the report UI by tag (Any match when multiple tags are selected):

reporter: [
  [
    "@canyonjs/html-modern/reporter",
    {
      writeReportDataJson: true,
      fileTags: [
        { glob: "src/payments/**", tag: "payments" },
        { glob: "src/auth/**", tag: "auth" },
        { glob: "**/critical/**", tag: "P0" },
      ],
    },
  ],
],

Globs are relative to projectRoot (same paths shown in the report table).

Single-file HTML page

pnpm build also emits dist/page/index.html (JS/CSS inlined via vite-plugin-singlefile). At report generation time, replace __REPORT_DATA__ in that file with the serialized coverage payload.

Scripts

pnpm install
pnpm build      # dist/index.js + dist/style.css + dist/page/index.html
pnpm play       # UI playground (uses coverage/report-data.json)
pnpm dev        # single-file page Vite dev server
pnpm test       # unit tests
pnpm typecheck

Release

Push to main triggers .github/workflows/publish.yml: typecheck → test → build → npm publish.

1. Bump version in package.json
2. Commit and push to main
3. If that version is not on npm yet, the workflow publishes @canyonjs/html-modern

npm setup (one-time)

1. Create an npm Automation token with Publish access for @canyonjs
2. In GitHub repo Settings → Secrets and variables → Actions, add NPM_TOKEN
3. Ensure the @canyonjs org on npm allows publishing this package name

Layout

src/           # Preact component library (tsdown → dist/)
src/reporter/  # istanbul HtmlModernReport (tsdown → dist/reporter.js)
src/page/      # single-file HTML page (vite → dist/page/)
playground/    # local dev playground
coverage/      # sample report-data.json for playground / page dev