Skip to content

feat(html): add CDN bundles and inline template minification#827

Merged
mihar-22 merged 4 commits intomainfrom
feat/cdn-package
Mar 10, 2026
Merged

feat(html): add CDN bundles and inline template minification#827
mihar-22 merged 4 commits intomainfrom
feat/cdn-package

Conversation

@mihar-22
Copy link
Copy Markdown
Member

@mihar-22 mihar-22 commented Mar 10, 2026

Summary

Add self-contained ESM bundles for CDN delivery inside @videojs/html. Each entry (video, audio, background, media/*) builds as a single file with zero external imports. Build plugins minify inline CSS and tagged template literals in production builds.

Changes

  • CDN bundles live in @videojs/html/cdn/ — no separate package
  • 7 entry points × 2 modes (dev/prod) = 14 fully self-contained ESM bundles
  • Per-entry tsdown configs prevent code-splitting into shared chunks
  • inlineTemplatePlugin minifies /*html*/ and /* css */ tagged template literals via lightningcss
  • inlineCssPlugin gains minify option (default: true) for ?inline CSS imports
  • CSS files copied and minified with lightningcss for CDN consumption
  • build:cdn wired into CI (build job) and CD (release job)
  • Site CDN URLs updated to @videojs/html/cdn/
Implementation details
  • Each CDN entry is built as a separate tsdown config because rolldown code-splits shared modules when given multiple entries in one config
  • CDN entries use relative imports to source modules; the CDN config includes inlineCssPlugin and inlineTemplatePlugin to handle ?inline CSS and tagged template minification
  • __DEV__ is replaced via define — CDN dev sets true, prod sets false
  • Template literal parser handles ${...} expressions with proper brace/string/nested-template tracking; CSS expressions are replaced with placeholder tokens before lightningcss runs, then restored

Testing

pnpm build:cdn
# Verify all 14 bundles + 5 CSS files in packages/html/cdn/
# Verify zero import statements in output files

Bundle sizes

Bundle Size Gzip
video.js 97.3 KB 24.4 KB
video-minimal.js 96.4 KB 24.2 KB
audio.js 86.7 KB 22.5 KB
audio-minimal.js 87.2 KB 23.2 KB
background.js 22.3 KB 6.8 KB
media/hls-video.js 516.6 KB 158.2 KB
media/simple-hls-video.js 40.1 KB 12.4 KB

@vercel
Copy link
Copy Markdown

vercel bot commented Mar 10, 2026

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

Project Deployment Actions Updated (UTC)
v10-sandbox Ready Ready Preview, Comment Mar 10, 2026 5:50pm

Request Review

@netlify
Copy link
Copy Markdown

netlify bot commented Mar 10, 2026

Deploy Preview for vjs10-site ready!

Name Link
🔨 Latest commit c0e6837
🔍 Latest deploy log https://app.netlify.com/projects/vjs10-site/deploys/69b059ec3a456b000824f59d
😎 Deploy Preview https://deploy-preview-827--vjs10-site.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 10, 2026

📦 Bundle Size Report

🎨 @videojs/html

Path Base PR Diff %
/video/minimal-skin 22.23 kB 21.05 kB -1.19 kB -5.3% 🔽
/video/skin 22.40 kB 21.21 kB -1.19 kB -5.3% 🔽
/audio/minimal-skin 20.58 kB 19.80 kB -805 B -3.8% 🔽
/audio/skin 20.62 kB 19.82 kB -820 B -3.9% 🔽
/video (default) 22.95 kB 21.82 kB -1.13 kB -4.9% 🔽
/video (default + hls) 153.33 kB 152.17 kB -1.17 kB -0.8% 🔽
/video (minimal) 22.81 kB 21.60 kB -1.21 kB -5.3% 🔽
/video (minimal + hls) 153.26 kB 151.88 kB -1.39 kB -0.9% 🔽
/audio (default) 21.17 kB 20.36 kB -823 B -3.8% 🔽
/audio (minimal) 21.15 kB 20.37 kB -797 B -3.7% 🔽
Presets (7)
Entry Size
/video (default) 21.82 kB
/video (default + hls) 152.17 kB
/video (minimal) 21.60 kB
/video (minimal + hls) 151.88 kB
/audio (default) 20.36 kB
/audio (minimal) 20.37 kB
/background 6.35 kB
Media (4)
Entry Size
/media/background-video 617 B
/media/container 1.86 kB
/media/hls-video 131.32 kB
/media/simple-hls-video 11.54 kB
Players (3)
Entry Size
/video/player 6.22 kB
/audio/player 6.21 kB
/background/player 6.21 kB
Skins (14)
Entry Type Size
/video/minimal-skin.css css 2.74 kB
/video/skin.css css 2.79 kB
/video/minimal-skin js 21.05 kB
/video/minimal-skin.tailwind js 21.36 kB
/video/skin js 21.21 kB
/video/skin.tailwind js 21.42 kB
/audio/minimal-skin.css css 2.17 kB
/audio/skin.css css 2.19 kB
/audio/minimal-skin js 19.80 kB
/audio/minimal-skin.tailwind js 19.63 kB
/audio/skin js 19.82 kB
/audio/skin.tailwind js 19.85 kB
/background/skin.css css 124 B
/background/skin js 999 B
UI Components (21)
Entry Size
/ui/alert-dialog 2.05 kB
/ui/alert-dialog-close 1.22 kB
/ui/alert-dialog-description 1.16 kB
/ui/alert-dialog-title 1.17 kB
/ui/buffering-indicator 1.71 kB
/ui/captions-button 1.82 kB
/ui/controls 1.79 kB
/ui/fullscreen-button 1.77 kB
/ui/mute-button 1.79 kB
/ui/pip-button 1.77 kB
/ui/play-button 1.77 kB
/ui/playback-rate-button 1.80 kB
/ui/popover 3.06 kB
/ui/poster 1.66 kB
/ui/seek-button 1.81 kB
/ui/slider 2.22 kB
/ui/thumbnail 2.08 kB
/ui/time 1.85 kB
/ui/time-slider 2.92 kB
/ui/tooltip 2.42 kB
/ui/volume-slider 2.19 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react

(no changes)

Presets (7)
Entry Size
/video (default) 16.67 kB
/video (default + hls) 147.47 kB
/video (minimal) 16.72 kB
/video (minimal + hls) 147.54 kB
/audio (default) 14.39 kB
/audio (minimal) 14.41 kB
/background 3.14 kB
Media (3)
Entry Size
/media/background-video 539 B
/media/hls-video 131.60 kB
/media/simple-hls-video 11.92 kB
Skins (14)
Entry Type Size
/video/minimal-skin.css css 2.74 kB
/video/skin.css css 2.79 kB
/video/minimal-skin js 16.61 kB
/video/minimal-skin.tailwind js 19.17 kB
/video/skin js 16.61 kB
/video/skin.tailwind js 19.23 kB
/audio/minimal-skin.css css 2.17 kB
/audio/skin.css css 2.19 kB
/audio/minimal-skin js 14.34 kB
/audio/minimal-skin.tailwind js 16.13 kB
/audio/skin js 14.27 kB
/audio/skin.tailwind js 16.31 kB
/background/skin.css css 90 B
/background/skin js 272 B
UI Components (17)
Entry Size
/ui/alert-dialog 2.70 kB
/ui/buffering-indicator 2.20 kB
/ui/captions-button 2.26 kB
/ui/controls 2.19 kB
/ui/fullscreen-button 2.28 kB
/ui/mute-button 2.23 kB
/ui/pip-button 2.26 kB
/ui/play-button 2.25 kB
/ui/playback-rate-button 2.24 kB
/ui/popover 3.10 kB
/ui/poster 2.05 kB
/ui/seek-button 2.25 kB
/ui/slider 3.09 kB
/ui/time 2.36 kB
/ui/time-slider 3.24 kB
/ui/tooltip 3.20 kB
/ui/volume-slider 3.08 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core

(no changes)

Entries (5)
Entry Size
. 4.78 kB
/dom 8.02 kB
/dom/media/custom-media-element 1.77 kB
/dom/media/hls 131.18 kB
/dom/media/simple-hls 11.43 kB

🏷️ @videojs/element

(no changes)

Entries (2)
Entry Size
. 999 B
/context 936 B

📦 @videojs/store

(no changes)

Entries (3)
Entry Size
. 1.32 kB
/html 700 B
/react 360 B

🔧 @videojs/utils

(no changes)

Entries (10)
Entry Size
/array 104 B
/dom 1003 B
/events 227 B
/function 261 B
/object 119 B
/predicate 265 B
/string 148 B
/style 190 B
/time 478 B
/number 158 B

📦 @videojs/spf

(no changes)

Entries (3)
Entry Size
. 40 B
/dom 9.67 kB
/playback-engine 9.60 kB

ℹ️ How to interpret

All sizes are standalone totals (minified + brotli).

Icon Meaning
No change
🔺 Increased ≤ 10%
🔴 Increased > 10%
🔽 Decreased
🆕 New (no baseline)

Run pnpm size locally to check current sizes.

@mihar-22 mihar-22 marked this pull request as ready for review March 10, 2026 11:08
s = s.replace(/<!--[\s\S]*?-->/g, '');

// 2. Collapse runs of whitespace to a single space.
s = s.replace(/\s{2,}/g, ' ');
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question(non-blocking): since whitespace can affect actual sizing/layout (text under some cases, but also parent/child/sibling DOM element layout behaviors), do we need to worry about this?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good question! That line is collapsing multiple whitespaces into a single which browsers normally do. I think for our library this is safe. Happy to review later if something funky comes up.

Copy link
Copy Markdown
Collaborator

@luwes luwes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really cool stuff in here. I'm hesitant to add a new package for all this.
Can we discuss this first?
My S1 is to keep this all in the html package if possible.

Add self-contained ESM bundles for CDN delivery inside @videojs/html.
Each entry (video, audio, background, media/*) builds as a single file
with zero external imports via per-entry tsdown configs.

Build plugins minify inline CSS (?inline imports via lightningcss) and
tagged template literals (/*html*/ and /* css */ markers) in production
builds. Dev builds preserve readability with .dev.js suffix.
@mihar-22 mihar-22 changed the title feat(html): add CDN package and inline template minification feat(html): add CDN bundles and inline template minification Mar 10, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 10, 2026

CI Failure Diagnosis

File Type What failed
packages/html (build:cdn) build CDN bundle fails because hls.js is detected as a bundled dependency; needs inlineOnly config or inlineOnly: false to suppress the error.

CDN entry files use self-referencing imports that resolve to built .d.ts
files, causing duplicate HTMLElementTagNameMap declarations. Exclude
src/cdn from tsconfig since tsdown handles these separately.

Also wire build:cdn into both CI (build job) and CD (release job) so CDN
bundles are validated in PRs and included in published packages.
Replace self-referencing package imports with relative paths so cdn
entry files resolve to source modules. This avoids duplicate
HTMLElementTagNameMap declarations that caused TS2717 and removes the
tsconfig exclude workaround.

Add inlineCssPlugin and inlineTemplatePlugin to the cdn build config
since relative imports resolve source files that contain ?inline CSS
imports and tagged template literals.
Copy link
Copy Markdown
Collaborator

@luwes luwes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM thank you!

@mihar-22 mihar-22 merged commit 40807b2 into main Mar 10, 2026
20 checks passed
@mihar-22 mihar-22 deleted the feat/cdn-package branch March 10, 2026 18:11
@luwes luwes mentioned this pull request Apr 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants