Skip to content

Load frontend web components only when hosts are present#3691

Merged
reakaleek merged 4 commits into
mainfrom
skinny-fire
Jul 22, 2026
Merged

Load frontend web components only when hosts are present#3691
reakaleek merged 4 commits into
mainfrom
skinny-fire

Conversation

@reakaleek

Copy link
Copy Markdown
Member

Why

Ordinary documentation pages were still requesting web-component chunks whose host elements are absent, which wasted first-party transfer and left large amounts of unused JavaScript on the critical path (see #3686).

What

Introduces a host-aware loader that imports each custom-element module only when its tag exists in the document, with deduplicated in-flight/completed loads and retries after failures. The loader runs on initial DOM readiness and again after htmx body swaps so components introduced by same-tab navigation still register.

Verified with unit tests for absent/present/swapped hosts, concurrent dedup, already-registered skips, and retry-after-failure; production build still emits separate component chunks; a host-free page fetched only main.js, and inserting <version-dropdown> then dispatching htmx:load registered the element and fetched its chunk.

Closes #3686

Made with Cursor

Avoid fetching unused component chunks on every page by scanning for host
elements on initial load and after htmx swaps.

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
@reakaleek
reakaleek requested a review from a team as a code owner July 21, 2026 15:28
@reakaleek
reakaleek requested a review from technige July 21, 2026 15:28
reakaleek and others added 2 commits July 21, 2026 23:57
Assembler no longer serves that host, so the loader entry only kept a
dead import path alive.

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Use a linear scan with early continues, drop dead assembler-only registry
entries, and avoid an extra promise hop for typing.

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
@reakaleek

Copy link
Copy Markdown
Member Author

@copilot resolve the merge conflicts in this pull request

Copilot AI commented Jul 22, 2026

Copy link
Copy Markdown
Contributor

@copilot resolve the merge conflicts in this pull request

Addressed in 3857cab by merging origin/main and resolving the src/Elastic.Documentation.Site/Assets/main.ts conflict.

@reakaleek
reakaleek enabled auto-merge (squash) July 22, 2026 10:29
@reakaleek
reakaleek merged commit 84a7988 into main Jul 22, 2026
24 checks passed
@reakaleek
reakaleek deleted the skinny-fire branch July 22, 2026 10:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Load frontend web components only when their hosts are present

3 participants