docs: add code sample for event usage#5026
Open
iamhabbeboy wants to merge 5 commits intowailsapp:masterfrom
Open
docs: add code sample for event usage#5026iamhabbeboy wants to merge 5 commits intowailsapp:masterfrom
iamhabbeboy wants to merge 5 commits intowailsapp:masterfrom
Conversation
Contributor
📝 WalkthroughWalkthroughAdds documentation code samples to the EventsEmit reference: a TypeScript frontend example showing event subscription/unsubscription and UI trigger, and a Go example showing runtime.EventsEmit usage. Also adds a changelog entry noting the new example. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~5 minutes Possibly related PRsSuggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (2 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}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
website/versioned_docs/version-v2.11.0/reference/runtime/events.mdx (1)
58-68: PreferEventsOn's returned unsubscribe in React cleanup.The current code at line 64 registers with
EventsOnand cleans up viaEventsOff("auth:success"), which removes all listeners for that event. Use the unsubscribe function returned byEventsOninstead for component-local cleanup that removes only this specific listener.♻️ Safer cleanup pattern
useEffect(() => { const handler = (event: any) => { // Handle event console.log(event); }; - - EventsOn("auth:success", handler); + const cancel = EventsOn("auth:success", handler); return () => { - EventsOff("auth:success"); + cancel(); }; },[])🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/versioned_docs/version-v2.11.0/reference/runtime/events.mdx` around lines 58 - 68, The effect registers a listener with EventsOn but calls EventsOff("auth:success") in cleanup which removes all listeners; instead capture the unsubscribe function returned by EventsOn (e.g., const unsubscribe = EventsOn("auth:success", handler)) and call unsubscribe() inside the cleanup to only remove this component's handler; update the useEffect to use EventsOn's returned unsubscribe rather than calling EventsOff("auth:success").
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@website/versioned_docs/version-v2.11.0/reference/runtime/events.mdx`:
- Around line 55-67: The sample imports the runtime incorrectly and misses the
EventsOff symbol; update the import to pull EventsOn and EventsOff from
"wailsjs/runtime/runtime" (replace the current import of EventsOn from
"../wailsjs/runtime") and ensure both EventsOn and EventsOff are imported
together (so the useEffect can call EventsOn("auth:success", handler) and return
EventsOff("auth:success")).
---
Nitpick comments:
In `@website/versioned_docs/version-v2.11.0/reference/runtime/events.mdx`:
- Around line 58-68: The effect registers a listener with EventsOn but calls
EventsOff("auth:success") in cleanup which removes all listeners; instead
capture the unsubscribe function returned by EventsOn (e.g., const unsubscribe =
EventsOn("auth:success", handler)) and call unsubscribe() inside the cleanup to
only remove this component's handler; update the useEffect to use EventsOn's
returned unsubscribe rather than calling EventsOff("auth:success").
website/versioned_docs/version-v2.11.0/reference/runtime/events.mdx
Outdated
Show resolved
Hide resolved
Member
|
Thanks for this. You've added it to a locked version which may get regenerated. Could you please add it to the main "latest" docs so it's preserved. Please could you also add an entry to the changelog located at |
iamhabbeboy
force-pushed
the
docs/add-event-code-sample
branch
from
9032c5f to
cf988a3
Compare
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (2)
website/docs/reference/runtime/events.mdx (2)
83-91: Minor formatting issues in Go code sample.
- Line 83: "GO" → "Go" for proper language naming.
- Line 85: Add space after
//per Go conventions →// app.go- Indentation within the function body appears inconsistent.
Suggested fix
-GO +Go ```go - //app.go - import "github.com/wailsapp/wails/v2/pkg/runtime" +// app.go +import "github.com/wailsapp/wails/v2/pkg/runtime" - func (a *App) Auth() { - runtime.EventsEmit(a.ctx, "auth:success", "user-123") - } +func (a *App) Auth() { + runtime.EventsEmit(a.ctx, "auth:success", "user-123") +}</details> <details> <summary>🤖 Prompt for AI Agents</summary>Verify each finding against the current code and only fix it if needed.
In
@website/docs/reference/runtime/events.mdxaround lines 83 - 91, The Go code
sample has formatting issues: change the language label "GO" to "Go", update the
comment to "// app.go", fix import indentation, and normalize the function
formatting for func (a *App) Auth() { ... } so the body uses consistent 4-space
or tab indentation and the closing brace aligns with the func declaration;
specifically update the snippet around the Auth method and the
runtime.EventsEmit call so it matches Go style and the rest of the docs.</details> --- `55-81`: **Consider using the cancel function returned by `EventsOn`.** Per the documentation above (line 14), `EventsOn` returns a cancel function. Using this is more idiomatic and safer than calling `EventsOff` by event name, which could inadvertently unregister other listeners on the same event. Also, a few minor formatting nits: - Line 76: Add space before `[]` → `}, [])` - The button JSX on line 79 appears orphaned; consider wrapping it in a comment or showing a minimal component structure for clarity. <details> <summary>Suggested improvement</summary> ```diff useEffect(() => { const handler = (event: any) => { // Handle event console.log(event); }; - EventsOn("auth:success", handler); + const cancelListener = EventsOn("auth:success", handler); return () => { - EventsOff("auth:success"); + cancelListener(); }; - },[]) + }, []);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/docs/reference/runtime/events.mdx` around lines 55 - 81, Update the example to use the cancel function returned by EventsOn instead of calling EventsOff by name: call const cancel = EventsOn("auth:success", handler) and invoke cancel() in the useEffect cleanup; update the example to reference EventsOn, EventsOff, Auth and useEffect so readers know where the cancel comes from, remove the EventsOff call, and ensure the useEffect cleanup is formatted with a space "}, [])"; also move or wrap the button JSX (the Auth button) inside a minimal component structure or comment so it isn't rendered as an orphan outside the component.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@website/docs/reference/runtime/events.mdx`:
- Around line 83-91: The Go code sample has formatting issues: change the
language label "GO" to "Go", update the comment to "// app.go", fix import
indentation, and normalize the function formatting for func (a *App) Auth() {
... } so the body uses consistent 4-space or tab indentation and the closing
brace aligns with the func declaration; specifically update the snippet around
the Auth method and the runtime.EventsEmit call so it matches Go style and the
rest of the docs.
- Around line 55-81: Update the example to use the cancel function returned by
EventsOn instead of calling EventsOff by name: call const cancel =
EventsOn("auth:success", handler) and invoke cancel() in the useEffect cleanup;
update the example to reference EventsOn, EventsOff, Auth and useEffect so
readers know where the cancel comes from, remove the EventsOff call, and ensure
the useEffect cleanup is formatted with a space "}, [])"; also move or wrap the
button JSX (the Auth button) inside a minimal component structure or comment so
it isn't rendered as an orphan outside the component.
ℹ️ Review info
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
website/docs/reference/runtime/events.mdxwebsite/src/pages/changelog.mdx
🚧 Files skipped from review as they are similar to previous changes (1)
- website/src/pages/changelog.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Summary of the Change
Added a sample code example demonstrating how to use runtime events for triggering and listening to events in the frontend.
Issue Fixed
There was no clear example explaining how to use runtime events between the Go backend and the frontend. This change improves documentation clarity by providing a practical starting point for new users.
Motivation and Context
As a new user to Wails, it took time figuring out the right path to the runtime package on the frontend.
To reduce confusion for beginners and provide a practical reference, a simple event usage example was added to demonstrate:
How to emit events from the Go backend
How to listen to events in the frontend
How both sides communicate using runtime events
Summary by CodeRabbit