feat(site): extract api reference from components by decepulis · Pull Request #464 · videojs/v10

decepulis · 2026-02-05T20:16:16Z

Closes #259 for basic cases

Note

Does not include support for unimplemented items like component components or css custom properties

how?

Add api-docs-builder script that extracts props, state, and data attributes from TypeScript source files (packages/core and packages/html) and outputs validated JSON to src/content/generated-api-reference/
Add Astro components (ApiRefSection, ApiPropsTable, ApiStateTable, ApiDataAttrsTable, PropRow) that render the generated JSON as interactive, framework-aware reference tables
Replace hand-written reference docs and examples with auto-generated API reference sections

unrelated

Remove old HTML/React examples and manually-maintained reference pages for fullscreen-button, time-slider, and volume-slider (play-button and mute-button updated to use the new system)

Addressing #259 for basic cases Does not include support for unimplemented items like component components or css custom properties also: - remove old examples & reference docs

vercel · 2026-02-05T20:16:22Z

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
vjs-10-demo-react	Ignored	Preview	Feb 5, 2026 10:08pm

netlify · 2026-02-05T20:16:23Z

✅ Deploy Preview for vjs10-site ready!

Name	Link
🔨 Latest commit	`7bf4445`
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10-site/deploys/698514fa92a61200087a0666
😎 Deploy Preview	https://deploy-preview-464--vjs10-site.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot

Pull request overview

This PR extracts API reference documentation from TypeScript source files and generates interactive, framework-aware reference tables in the documentation site.

Changes:

Add api-docs-builder script that extracts props, state, and data attributes from TypeScript source files and outputs validated JSON
Add Astro components (ApiRefSection, ApiPropsTable, ApiStateTable, ApiDataAttrsTable, PropRow, InlineMarkdown) that render the generated JSON as interactive reference tables
Replace hand-written reference docs for play-button and mute-button with auto-generated API reference sections, and remove old examples for fullscreen-button, time-slider, and volume-slider

Reviewed changes

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

Show a summary per file

File	Description
site/vitest.config.ts	Added scripts/api-docs-builder/src to test coverage
site/src/utils/docs/renderInlineMarkdown.ts	Added markdown renderer for API documentation descriptions
site/src/utils/docs/tests/renderInlineMarkdown.test.ts	Added tests for markdown renderer
site/src/types/api-reference.ts	Added Zod schemas for API reference JSON structure
site/src/examples/react/VolumeSlider/*	Removed old example files
site/src/examples/react/TimeSlider/*	Removed old example files
site/src/examples/react/PlayButton/*	Removed old example files
site/src/examples/react/MuteButton/*	Removed old example files
site/src/examples/react/FullscreenButton/*	Removed old example files
site/src/examples/html/volume-slider/*	Removed old HTML examples
site/src/examples/html/time-slider/*	Removed old HTML examples
site/src/examples/html/play-button/*	Removed old HTML examples
site/src/examples/html/mute-button/*	Removed old HTML examples
site/src/examples/html/fullscreen-button/*	Removed old HTML examples
site/src/docs.config.ts	Removed references to deleted component pages
site/src/content/docs/reference/volume-slider.mdx	Removed hand-written reference page
site/src/content/docs/reference/time-slider.mdx	Removed hand-written reference page
site/src/content/docs/reference/play-button.mdx	Replaced with auto-generated API reference
site/src/content/docs/reference/mute-button.mdx	Replaced with auto-generated API reference
site/src/content/docs/reference/fullscreen-button.mdx	Removed hand-written reference page
site/src/content/docs/concepts/ui-components.mdx	Updated to reflect removed component pages
site/src/content.config.ts	Added apiReference collection
site/src/components/typography/Table.astro	Added outerClass prop for custom styling
site/src/components/docs/api-reference/PropRow.astro	Added expandable prop row component
site/src/components/docs/api-reference/InlineMarkdown.astro	Added inline markdown renderer component
site/src/components/docs/api-reference/ApiStateTable.astro	Added state table component
site/src/components/docs/api-reference/ApiRefSection.astro	Added main API reference section component
site/src/components/docs/api-reference/ApiPropsTable.astro	Added props table component
site/src/components/docs/api-reference/ApiDataAttrsTable.astro	Added data attributes table component
site/scripts/api-docs-builder/src/types.ts	Added type definitions for builder
site/scripts/api-docs-builder/src/tests/html-handler.test.ts	Added tests for HTML extraction
site/scripts/api-docs-builder/src/tests/formatter.test.ts	Added tests for type formatting
site/scripts/api-docs-builder/src/tests/data-attrs-handler.test.ts	Added tests for data attributes extraction
site/scripts/api-docs-builder/src/tests/core-handler.test.ts	Added tests for core extraction
site/scripts/api-docs-builder/src/index.ts	Added main builder orchestration logic
site/scripts/api-docs-builder/src/html-handler.ts	Added HTML element extraction logic
site/scripts/api-docs-builder/src/formatter.ts	Added type formatting utilities
site/scripts/api-docs-builder/src/data-attrs-handler.ts	Added data attributes extraction logic
site/scripts/api-docs-builder/src/core-handler.ts	Added props/state extraction logic
site/scripts/api-docs-builder/README.md	Added documentation for the builder
site/package.json	Added dependencies and scripts for API docs generation
site/CLAUDE.md	Added documentation about API reference generation

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

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

Copilot · 2026-02-05T20:17:20Z

+                const detail = document.getElementById(
+                    button.getAttribute("aria-controls")!,
+                );


Potential null dereference if button.getAttribute('aria-controls') returns null. Add a null check before calling getElementById.

Suggested change

const detail = document.getElementById(

button.getAttribute("aria-controls")!,

);

const controlsId = button.getAttribute("aria-controls");

if (!controlsId) return;

const detail = document.getElementById(controlsId);

mihar-22

This is looking really good! Incredible foundation for us to layer on CSS Vars and Compound Components. I'm more concerned with how this will evolve to support the latter, might require significant changes. Either way, awesome start :)

mihar-22 · 2026-02-06T01:26:49Z

+  description: z.string(),
+});
+
+export const ComponentApiReferenceSchema = z.object({


Will this need to change or will it hold up when we add support for Compounds? Either we have a new schema that contains Component API Schems, or we extend this with parts.

We'll also need to discuss and establish a pattern in core for how Compound Parts will be discovered.

Definitely needs to change for compound.

feat(site): extract api reference from components

ea46a51

Addressing #259 for basic cases Does not include support for unimplemented items like component components or css custom properties also: - remove old examples & reference docs

decepulis requested a review from Copilot February 5, 2026 20:16

Copilot AI reviewed Feb 5, 2026

View reviewed changes

decepulis added 9 commits February 5, 2026 15:09

wip: share typography strings

eaebb8c

Merge branch 'main' into feat/generated-api-ref

4f9a16f

Merge branch 'main' into feat/generated-api-ref

b70c563

chore: run biome

a29c2b9

wip: improve documentation

b6418c0

fix: linter linted too hard

abaae5b

fix: table dark mode border colors

e648ed0

wip: more style tweaks

8849a5f

wip: shape up tests

7bf4445

mihar-22 approved these changes Feb 6, 2026

View reviewed changes

decepulis merged commit 0991a89 into main Feb 6, 2026
9 checks passed

decepulis deleted the feat/generated-api-ref branch February 6, 2026 01:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(site): extract api reference from components#464

feat(site): extract api reference from components#464
decepulis merged 10 commits intomainfrom
feat/generated-api-ref

decepulis commented Feb 5, 2026 •

edited

Loading

Uh oh!

vercel bot commented Feb 5, 2026 •

edited

Loading

Uh oh!

netlify bot commented Feb 5, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 5, 2026

Uh oh!

Uh oh!

mihar-22 left a comment

Uh oh!

mihar-22 Feb 6, 2026 •

edited

Loading

Uh oh!

decepulis Feb 6, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

-                const detail = document.getElementById(
-                    button.getAttribute("aria-controls")!,
-                );
+                const controlsId = button.getAttribute("aria-controls");
+                if (!controlsId) return;
+                const detail = document.getElementById(controlsId);

Conversation

decepulis commented Feb 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

how?

unrelated

Uh oh!

vercel bot commented Feb 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify bot commented Feb 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for vjs10-site ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mihar-22 left a comment

Choose a reason for hiding this comment

Uh oh!

mihar-22 Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

decepulis Feb 6, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

decepulis commented Feb 5, 2026 •

edited

Loading

vercel bot commented Feb 5, 2026 •

edited

Loading

netlify bot commented Feb 5, 2026 •

edited

Loading

mihar-22 Feb 6, 2026 •

edited

Loading