Custom Run Event for Watch API#989
Conversation
…un inside embedded playground
✅ Deploy Preview for livecodes ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughA new ChangesRun Event Feature
Sequence DiagramsequenceDiagram
participant Playground as run()
participant SDKWatchers as sdkWatchers.run
participant Document as document
participant Embed as iframe (embed)
participant Parent as parent window
Playground->>SDKWatchers: check subscribers
alt has subscribers
Playground->>Document: dispatchEvent(livecodes-run { code, config })
Document->>Embed: embed listener forwards via postMessage (livecodes-run)
Embed->>Parent: postMessage mapped to SDK `run` event
end
Parent->>Parent: SDK invokes watcher callbacks with { code, config }
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/sdk/models.ts (1)
1317-1324:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winUpdate the public
watch()doc block to includerun.
WatchFnsnow exposes'run', but theAPI.watchJSDoc later in this file still lists only the previous six events. That leaves the generated API docs out of sync with the shipped type surface.Also applies to: 1382-1385
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/sdk/models.ts` around lines 1317 - 1324, Update the public JSDoc for API.watch to reflect the current WatchFns type by adding the 'run' event to the listed events (in addition to load, ready, code, console, tests, destroy); locate the JSDoc block that documents API.watch (references: WatchFns and API.watch) and amend its example/description to include 'run' so the generated docs match the exported type (also update the other occurrence noted around the second JSDoc at the later location).
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/docs/sdk/js-ts.mdx`:
- Line 544: Fix the malformed inline-code formatting for the playground event
label by closing the missing backtick around the run label: find the bullet that
starts with `"run": Called when the playground is run.` and change it to use
proper inline code formatting (e.g., `run`: Called when the playground is run.)
so the `run` event renders correctly in the docs.
In `@src/livecodes/core.ts`:
- Around line 1255-1259: The run event is being dispatched before the new result
is committed; move the dispatch of customEvents.run (the block checking
sdkWatchers.run.hasSubscribers() and calling
document.dispatchEvent(parent.dispatchEvent)) so it only fires after
getResultPage() and the awaited createIframe(...) complete successfully — i.e.,
after the result page is created and the iframe is created/attached and the new
output is committed; reference sdkWatchers.run, customEvents.run,
getResultPage(), and createIframe() when updating the code.
---
Outside diff comments:
In `@src/sdk/models.ts`:
- Around line 1317-1324: Update the public JSDoc for API.watch to reflect the
current WatchFns type by adding the 'run' event to the listed events (in
addition to load, ready, code, console, tests, destroy); locate the JSDoc block
that documents API.watch (references: WatchFns and API.watch) and amend its
example/description to include 'run' so the generated docs match the exported
type (also update the other occurrence noted around the second JSDoc at the
later location).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: d295e4ee-1d8b-4bec-890a-94cb6e5e4bf8
📒 Files selected for processing (8)
docs/docs/sdk/js-ts.mdxsrc/livecodes/core.tssrc/livecodes/events/custom-events.tssrc/livecodes/main.tssrc/sdk/__tests__/createPlayground.spec.tssrc/sdk/index.tssrc/sdk/internal.tssrc/sdk/models.ts
|
Thank you @Jtsoco I have a few suggestions:
export type WatchRun = (
event: 'run',
fn: (data: { code: Code; config: Config }) => void,
) => { remove: () => void };Also considering the timing issue as mentioned by @coderabbitai, this would be my suggestion for the updated const run = async (editorId?: EditorId, runTests?: boolean) => {
setLoading(true);
if (editorId !== 'style') {
toolsPane?.console?.clear(/* silent= */ true);
}
const config = getConfig();
const shouldRunTests = (runTests ?? config.autotest) && Boolean(config.tests?.content?.trim());
const result = await getResultPage({ sourceEditor: editorId, runTests: shouldRunTests });
await createIframe(UI.getResultElement(), result);
updateCompiledCode();
if (sdkWatchers.run.hasSubscribers()) {
const runEvent = new CustomEvent(customEvents.run, {
detail: { code: getCachedCode(), config },
});
document.dispatchEvent(runEvent);
parent.dispatchEvent(runEvent);
}
};
- const sdkEvents: SDKEvent[] = ['load', 'ready', 'code', 'console', 'tests', 'destroy', 'run'];
+ const sdkEvents: SDKEvent[] = ['load', 'ready', 'code', 'run', 'console', 'tests', 'destroy'];
- - `"run": Called when the playground is run.
+ - `"run"`: Called when the playground is run.
Thank you very much. |
|
Tip For best results, initiate chat on the files or code changes.
Here is a consolidated checklist for
Also worth noting: the new test in |
…rder events, change timing of event dispatch
|
|
@hatemhosny Thank you very much for your feedback!
|
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.agents/skills/livecodes/sdk-methods/SKILL.md:
- Around line 91-94: The example adds a runWatcher via playground.watch('run',
...) but the cleanup section doesn't remove it (and omits removing
testsWatcher); update the "Remove watchers when done" section to
dispose/unregister all watchers created by playground.watch — specifically call
the appropriate removal on runWatcher and testsWatcher (in the same style used
for other watchers created from playground.watch) so every watcher created is
cleaned up.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: d13f39be-b11f-4430-8ab8-aea0aa48cbb2
📒 Files selected for processing (9)
.agents/skills/livecodes/sdk-methods/SKILL.mddocs/docs/sdk/js-ts.mdxsrc/livecodes/core.tssrc/livecodes/events/custom-events.tssrc/livecodes/main.tssrc/sdk/__tests__/createPlayground.spec.tssrc/sdk/index.tssrc/sdk/internal.tssrc/sdk/models.ts
🚧 Files skipped from review as they are similar to previous changes (6)
- src/livecodes/main.ts
- src/sdk/tests/createPlayground.spec.ts
- src/sdk/internal.ts
- src/sdk/index.ts
- src/livecodes/events/custom-events.ts
- docs/docs/sdk/js-ts.mdx
| // Watch for code execution | ||
| const runWatcher = playground.watch('run', ({ code, config }) => { | ||
| console.log('Playground ran. Result HTML:', code.result); | ||
| }); |
There was a problem hiding this comment.
Update cleanup example to remove all created watchers.
This snippet introduces runWatcher, but the "Remove watchers when done" section does not remove it (and also omits testsWatcher). Please include all watcher removals to keep the example internally consistent.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.agents/skills/livecodes/sdk-methods/SKILL.md around lines 91 - 94, The
example adds a runWatcher via playground.watch('run', ...) but the cleanup
section doesn't remove it (and omits removing testsWatcher); update the "Remove
watchers when done" section to dispose/unregister all watchers created by
playground.watch — specifically call the appropriate removal on runWatcher and
testsWatcher (in the same style used for other watchers created from
playground.watch) so every watcher created is cleaned up.
2 participants
feat: create a custom run event to enable watching for when code is run inside embedded playground
What type of PR is this? (check all applicable)
Description
This PR adds a new run custom event so embedded playground consumers can watch for code execution through the SDK watch API.
LiveCodes currently supports watchable events such as code, console, and tests, but does not expose a dedicated run event. This is especially useful when autoupdate is false and consumers need to react when execution happens.
Implementation follows existing event flow patterns:
dispatch run from the app when run is triggered
forward the event through the embed message channel
map it to SDK watch(run)
add SDK tests for the new watch path
Validation:
tests pass locally
manually verified with watch(run) in Storybook during development
Related Tickets & Documents
Fixes Issue #988
Added tests?
Added to documentations?
Thank you for taking the time to look at my PR. I'm excited to contribute to a project as great as live-codes.
Summary by CodeRabbit
New Features
Documentation
Tests