Emit host-facing events for stop, save, download and sidebar - #1635
Conversation
In order to measure interactions with the sidebar, instructions etc, more events are required.
There was a problem hiding this comment.
🟡 Changes recommended
Several tests add global document event listeners without removal (risking cross-test pollution/flakes), and there’s an open question about retaining direct window.plausible calls given the PR’s stated intent.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR adds new host-facing custom events for key user interactions (stop run, save click, project download, and sidebar panel changes) so host pages can handle analytics and context outside the Shadow DOM.
Changes:
- Added custom event factories for
editor-runStopped,editor-saveTriggered,editor-projectDownloaded, andeditor-sidebarToggled. - Emitted these events from
StopButton,SaveButton,DownloadButton, andSidebarrespectively. - Extended unit tests and README documentation to cover the new events and payload shapes.
File summaries
| File | Description |
|---|---|
| src/events/WebComponentCustomEvents.js | Adds event creator helpers for new host-facing events. |
| src/components/SaveButton/SaveButton.jsx | Dispatches editor-saveTriggered when save is clicked. |
| src/components/SaveButton/SaveButton.test.jsx | Adds assertions for editor-saveTriggered payload. |
| src/components/RunButton/StopButton.jsx | Dispatches editor-runStopped when stop is clicked. |
| src/components/RunButton/StopButton.test.jsx | Adds assertions for editor-runStopped payload. |
| src/components/Menus/Sidebar/Sidebar.jsx | Dispatches editor-sidebarToggled when the selected sidebar option changes. |
| src/components/Menus/Sidebar/Sidebar.test.jsx | Adds assertions for editor-sidebarToggled payload. |
| src/components/DownloadButton/DownloadButton.jsx | Dispatches editor-projectDownloaded when download is clicked. |
| src/components/DownloadButton/DownloadButton.test.jsx | Adds assertions for editor-projectDownloaded payload. |
| README.md | Documents the newly emitted custom events and their detail payloads. |
Review details
- Files reviewed: 10/10 changed files
- Comments generated: 5
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
adrian-rpf
left a comment
There was a problem hiding this comment.
A few comments but I think you can merge when ready.
* Tidies the tests a little * Clarifies readme * Defends against a missing `project_type` when downloading
These interactions were tracked by calling
window.plausibledirectly from components. Custom events are the documented channel out of the shadow DOM, and the host owns both the vendor choice and the context the payload needs (projectSlug, locale, consent), so emit events rather than pushing to window.dataLayer from here.