From 309f269e91185543381935984e6491bd48fa116b Mon Sep 17 00:00:00 2001 From: Jessica Janiuk Date: Tue, 25 Mar 2025 14:07:08 -0400 Subject: [PATCH] docs: add more details about event replay (#60554) PR Close #60554 --- adev/src/content/guide/hydration.md | 10 ++++++---- adev/src/content/guide/incremental-hydration.md | 2 +- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/adev/src/content/guide/hydration.md b/adev/src/content/guide/hydration.md index 60d3037bb60..d61affe0b07 100644 --- a/adev/src/content/guide/hydration.md +++ b/adev/src/content/guide/hydration.md @@ -75,8 +75,8 @@ bootstrapApplication(App, { }); ``` -### Event Replay -Event Replay is a feature that improves user experience by capturing user events triggered before hydration finishes and replaying them afterward. +### How event replay works +Event Replay is a feature that improves user experience by capturing user events that were triggered before the hydration process is complete. Then those events are replayed, ensuring none of that interaction was lost. The Event Replay is divided into three main phases: @@ -87,11 +87,13 @@ Prior to **Hydration**, Event Replay captures and stores all interactions that t The **Event Contract** keeps in memory all the interactions recorded in the previous step, ensuring that they are not lost for later replay. - **Relaunch of events**
-Once **Hydration** is complete, Angular re-invokes the captured events, ensuring none of those user actions were lost. +Once **Hydration** is complete, Angular re-invokes the captured events. + +Event replay supports _native browser events_, for example `click`, `mouseover`, and `focusin`. If you'd like to learn more about JSAction, the library that powers event replay, you can read more [on the readme](https://github.com/angular/angular/tree/main/packages/core/primitives/event-dispatch#readme). --- -This feature ensures a consistent user experience, preventing user actions performed before Hydration from being ignored. +This feature ensures a consistent user experience, preventing user actions performed before Hydration from being ignored. Note: if you have [incremental hydration](guide/incremental-hydration) enabled, event replay is automatically enabled under the hood. ## Constraints diff --git a/adev/src/content/guide/incremental-hydration.md b/adev/src/content/guide/incremental-hydration.md index 952e7d7fb3b..b439b0b33eb 100644 --- a/adev/src/content/guide/incremental-hydration.md +++ b/adev/src/content/guide/incremental-hydration.md @@ -29,7 +29,7 @@ bootstrapApplication(AppComponent, { }); ``` -Incremental Hydration depends on and enables event replay automatically. If you already have `withEventReplay()` in your list, you can safely remove it after enabling incremental hydration. +Incremental Hydration depends on and enables [event replay](guide/hydration#capturing-and-replaying-events) automatically. If you already have `withEventReplay()` in your list, you can safely remove it after enabling incremental hydration. ## How does incremental hydration work?