feat: add implementationStatus badge (Baseline browser availability) by marcoscaceres · Pull Request #5174 · speced/respec

marcoscaceres · 2026-04-12T13:33:34Z

Summary

Adds a new implementationStatus config option that shows a Baseline browser availability badge in the spec front matter, driven by web-features data.

This addresses the W3C TAG's request that specs signal their implementation status to developers "at a glance" (w3ctag/design-reviews#1187). By building this into ReSpec, every spec gets data-driven implementation status automatically, rather than requiring manual editorial text per spec.

Configuration

// Auto-detect from edDraftURI / shortName
respecConfig.implementationStatus = true;

// Explicit web-features ID
respecConfig.implementationStatus = "grid";

// Full options
respecConfig.implementationStatus = {
  feature: "grid",
  removeOnSave: true,
  apiURL: "https://custom-endpoint/data.json",
};

What it renders

A <dt>/<dd> pair in the front matter showing:

Status text + official Baseline icon ("Widely available", "Newly available", or "Limited availability")
Browser icons grouped by engine (Chromium, Gecko, WebKit) with official support indicator SVGs
"More info" link to webstatus.dev

Features

Auto-detects features by matching spec URLs against web-features data
Groups browsers by engine in coloured pills (green = supported, orange = unsupported)
Aggregates multi-feature specs using worst-of semantics
removeOnSave collapses to a static link
Dark mode and print support
Uses official SVG icons from web-platform-dx/baseline-status

Files

src/core/implementation-status.js — new module
src/styles/implementation-status.css.js — styling
profiles/w3c.js — registered in pipeline
examples/baseline.html — demo (try different feature IDs)
tests/spec/core/implementation-status-spec.js — 9 tests
tests/data/baseline/data.json — test fixtures

Future work

May deprecate caniuse module (this subsumes its purpose)
Could add a respec-web-services endpoint for faster lookups
Bikeshed equivalent

Test plan

9 unit tests passing (Chrome Headless)
Full test suite (Chrome + Firefox)
Visual review of all three statuses (limited, newly, widely)

Copilot

Pull request overview

Adds a new implementationStatus feature to ReSpec’s W3C profile that fetches Baseline availability data from web-features and renders an “implementation status” badge + browser support indicators in the document front matter.

Changes:

Introduces core/implementation-status module to fetch web-features data, auto-detect relevant features, aggregate status, and render a badge in the .head dl.
Adds dedicated styling for the badge/UI elements.
Adds unit tests + local fixtures and an example document to demonstrate configuration.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
`src/core/implementation-status.js`	New core module that fetches Baseline data, resolves features, aggregates status/support, renders badge, and supports `removeOnSave`.
`src/styles/implementation-status.css.js`	New CSS for badge layout, dark mode, and print behavior.
`profiles/w3c.js`	Registers the new module in the W3C processing pipeline.
`tests/spec/core/implementation-status-spec.js`	Adds unit tests for rendering, auto-detection, aggregation, and config normalization.
`tests/data/baseline/data.json`	Adds test fixtures for Baseline/web-features-like data.
`examples/baseline.html`	Adds a runnable example demonstrating the new configuration.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

examples/baseline.html

src/core/implementation-status.js

tests/spec/core/implementation-status-spec.js

src/core/implementation-status.js

Copilot

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

tests/spec/core/implementation-status-spec.js

src/core/implementation-status.js

Copilot

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-13T01:31:32Z

src/core/implementation-status.js

+const ENGINES = new Map([
+  ["chrome", "Chrome"],
+  ["edge", "Edge"],
+  ["firefox", "Firefox"],
+  ["safari", "Safari"],
+]);


ENGINES is keyed by browser IDs (chrome/edge/firefox/safari) and maps to browser names, not engine names. Renaming this (e.g., to BROWSERS/BROWSER_NAMES) and updating related identifiers (like ENGINE_GROUPS.engines) would make the intent clearer and reduce confusion for future maintainers.

agree... this should be BROWSERS

Copilot

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-13T01:48:49Z

tests/spec/core/implementation-status-spec.js

+      implementationStatus: {
+        feature: null,
+        apiURL,
+      },


Test name says it "accepts boolean true config for auto-detect", but the config passed is an object (implementationStatus: { feature: null, ... }). This doesn't exercise the boolean normalization path in normalizeConf(), and makes the test misleading. Either pass implementationStatus: true here (and keep assertions), or rename the test to reflect the object-with-null-feature case.

Suggested change

implementationStatus: {

feature: null,

apiURL,

},

implementationStatus: true,

src/core/implementation-status.js

New module that shows a Baseline browser availability badge in the spec front matter (e.g. "Limited availability [icon]:"), driven by web-features data from web-platform-dx. Config: `respecConfig.implementationStatus` accepts `true` (auto-detect from spec URLs), a feature ID string, or an options object. Features: - Auto-detects features by matching spec URLs against web-features data - Shows browser icons grouped by engine in rounded pills - Uses official Baseline SVG icons from web-platform-dx/baseline-status - Uses official support indicator SVGs (check/x with arc) - Aggregates multi-feature specs using worst-of semantics - removeOnSave collapses to a static link - Dark mode and print support

Copilot

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-13T02:00:39Z

tests/spec/core/implementation-status-spec.js

+  it("renders badge for an explicit feature ID", async () => {
+    const ops = makeStandardOps({
+      implementationStatus: {
+        feature: "test-feature",
+        apiURL,
+      },
+    });


Tests cover object-form configuration, but there are no assertions for the two shorthand forms advertised in the PR description (implementationStatus: true auto-detect and implementationStatus: "feature-id"). Adding dedicated tests for these inputs would help ensure normalizeConf() keeps supporting them and prevents regressions in the public config API.

@copilot can you fix this? Add a test if possible

…nd config

src/core/implementation-status.js

marcoscaceres · 2026-04-13T10:36:02Z

src/core/implementation-status.js

+  if (!specUrls.length) return [];
+
+  const matched = [];
+  for (const [id, feature] of Object.entries(features)) {


Nit: this looks like very much like a foreach map filter reduce?

src/core/implementation-status.js

marcoscaceres · 2026-04-15T05:40:29Z

@copilot can you fix any outstanding comments? Add tests if possible and verify lint and prettier are applied. Make sure ci is happy

marcoscaceres force-pushed the baseline-badge branch 6 times, most recently from 6492196 to 449ed44 Compare April 13, 2026 00:37

marcoscaceres marked this pull request as ready for review April 13, 2026 00:53

marcoscaceres requested a review from Copilot April 13, 2026 00:53

Copilot started reviewing on behalf of marcoscaceres April 13, 2026 00:54 View session

marcoscaceres force-pushed the baseline-badge branch from 449ed44 to c0b7c44 Compare April 13, 2026 00:57

Copilot AI reviewed Apr 13, 2026

View reviewed changes

marcoscaceres force-pushed the baseline-badge branch 2 times, most recently from 2bfcfe5 to cbcf529 Compare April 13, 2026 01:15

marcoscaceres requested a review from Copilot April 13, 2026 01:16

Copilot started reviewing on behalf of marcoscaceres April 13, 2026 01:16 View session

Copilot AI reviewed Apr 13, 2026

View reviewed changes

tests/spec/core/implementation-status-spec.js Outdated Show resolved Hide resolved

src/core/implementation-status.js Outdated Show resolved Hide resolved

marcoscaceres force-pushed the baseline-badge branch from cbcf529 to a282850 Compare April 13, 2026 01:26

marcoscaceres requested a review from Copilot April 13, 2026 01:27

Copilot started reviewing on behalf of marcoscaceres April 13, 2026 01:27 View session

Copilot AI reviewed Apr 13, 2026

View reviewed changes

marcoscaceres force-pushed the baseline-badge branch from a282850 to e29e742 Compare April 13, 2026 01:31

marcoscaceres requested a review from Copilot April 13, 2026 01:44

Copilot started reviewing on behalf of marcoscaceres April 13, 2026 01:44 View session

Copilot AI reviewed Apr 13, 2026

View reviewed changes

marcoscaceres force-pushed the baseline-badge branch from e29e742 to 5b8408d Compare April 13, 2026 01:54

marcoscaceres requested a review from Copilot April 13, 2026 01:55

Copilot started reviewing on behalf of marcoscaceres April 13, 2026 01:56 View session

Copilot AI reviewed Apr 13, 2026

View reviewed changes

test(implementation-status): add tests for boolean and string shortha…

927bbd7

…nd config

marcoscaceres commented Apr 13, 2026

View reviewed changes

src/core/implementation-status.js Show resolved Hide resolved

marcoscaceres commented Apr 13, 2026

View reviewed changes

src/core/implementation-status.js Show resolved Hide resolved

Merge branch 'main' into baseline-badge

7b9d190

marcoscaceres requested a review from sidvishnoi April 15, 2026 04:06

Copilot started work on behalf of marcoscaceres April 15, 2026 05:36 View session

Uh oh!

Conversation

marcoscaceres commented Apr 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Configuration

What it renders

Features

Files

Future work

Test plan

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

marcoscaceres Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

marcoscaceres Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

marcoscaceres Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

marcoscaceres commented Apr 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

marcoscaceres commented Apr 12, 2026 •

edited

Loading