Skip to content

[LiveComponent] Re-emit render hooks as live:render:* DOM events#3504

Open
haraldpdl wants to merge 1 commit intosymfony:3.xfrom
haraldpdl:feat/live-component-render-events
Open

[LiveComponent] Re-emit render hooks as live:render:* DOM events#3504
haraldpdl wants to merge 1 commit intosymfony:3.xfrom
haraldpdl:feat/live-component-render-events

Conversation

@haraldpdl
Copy link
Copy Markdown

Q A
Bug fix? no
New feature? yes
Deprecations? no
Documentation? yes
Issues Related to #1038, #1676
License MIT

Re-emits the existing render:started and render:finished JS hooks as bubbling DOM events on the component's root element, alongside the already-public live:connect / live:disconnect. Purely additive, no BC concern.

element.addEventListener('live:render:finished', (event) => {
    // event.detail.component, event.detail.controller
});

element.addEventListener('live:render:started', (event) => {
    // event.detail.html, event.detail.backendResponse, event.detail.controls
});

The motivation is the longstanding pain in #1038 / #1676 (both closed by stale-bot, neither resolved): third-party Stimulus controllers that need to react to a render have to import getComponent, await it inside initialize(), and register against the JS hook API, which is racey on first mount and only fires for re-renders. Falling back to a MutationObserver works but observes every DOM change rather than render boundaries. A bubbling DOM event lets any code subscribe with a single addEventListener, no async setup, no race.

Implementation re-uses the existing dispatchEvent helper that already powers live:connect / live:disconnect. Test in test/unit/controller/render.test.ts, doc section under "JavaScript Component Hooks > DOM Events", CHANGELOG entry under 3.1.

@carsonbot carsonbot added Documentation Improvements or additions to documentation Feature New Feature LiveComponent Status: Needs Review Needs to be reviewed labels Apr 26, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 26, 2026

📊 Packages dist files size difference

Thanks for the PR! Here is the difference in size of the packages dist files between the base branch and the PR.
Please review the changes and make sure they are expected.

FileBefore (Size / Gzip)After (Size / Gzip)
LiveComponent
live_controller.js 82.61 kB / 18.38 kB 82.88 kB0% / 18.42 kB0%

@haraldpdl haraldpdl force-pushed the feat/live-component-render-events branch from ce23580 to f79ab7e Compare April 27, 2026 04:48
@haraldpdl haraldpdl force-pushed the feat/live-component-render-events branch from f79ab7e to 5503ac2 Compare April 27, 2026 04:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Documentation Improvements or additions to documentation Feature New Feature LiveComponent Status: Needs Review Needs to be reviewed

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants