feat(core): Redesign the afterRender & afterNextRender phases API #55648
Closed
mmalerba wants to merge 3 commits intoangular:mainfrom
Closed
feat(core): Redesign the afterRender & afterNextRender phases API #55648mmalerba wants to merge 3 commits intoangular:mainfrom
mmalerba wants to merge 3 commits intoangular:mainfrom
Conversation
atscott
reviewed
May 3, 2024
devknoll
reviewed
May 6, 2024
Contributor
There was a problem hiding this comment.
Love this change. Thanks for putting it together!
b8d5fb7 to
5cbf2f0
Compare
mmalerba
commented
May 8, 2024
atscott
reviewed
May 9, 2024
55744ab to
2e05663
Compare
b258ee6 to
0c47d6b
Compare
atscott
approved these changes
Jun 4, 2024
Contributor
There was a problem hiding this comment.
Reviewed-for: public-api
Contributor
|
Only question I might have would be whether we want to have a migration, which I think should be relatively straightforward. |
17c7225 to
f245f7d
Compare
alxhub
approved these changes
Jun 7, 2024
Previously `afterRender` and `afterNextRender` allowed the user to pass
a phase to run the callback in as part of the `AfterRenderOptions`. This
worked, but made it cumbersome to coordinate work between phases.
```ts
let size: DOMRect|null = null;
afterRender(() => {
size = nativeEl.getBoundingClientRect();
}, {phase: AfterRenderPhase.EarlyRead});
afterRender(() => {
otherNativeEl.style.width = size!.width + 'px';
}, {phase: AfterRenderPhase.Write});
```
This PR replaces the old phases API with a new one that allows passing a
callback per phase in a single `afterRender` / `afterNextRender` call.
The return value of each phase's callback is passed to the subsequent
callbacks that were part of that `afterRender` call.
```ts
afterRender({
earlyRead: () => nativeEl.getBoundingClientRect(),
write: (rect) => {
otherNativeEl.style.width = rect.width + 'px';
}
});
```
This API also retains the ability to pass a single callback, which will
be run in the `mixedReadWrite` phase.
```ts
afterRender(() => {
// read some stuff ...
// write some stuff ...
});
```
Adds back the ability to set the phase of an `afterRender` / `afterNextRender` callback using the `phase` option. However, this API is now deprecated, and the phase should instead be specified by passing a spec object rather than a callback function.
Adds an `ng update` migration to move users from using the phase flag with `afterRender` / `afterNextRender` to passing a spec object instead.
thePunderWoman
approved these changes
Jun 10, 2024
Contributor
There was a problem hiding this comment.
reviewed-for: public-api
Member
|
This PR was merged into the repository by commit ea3c802. |
alxhub
pushed a commit
that referenced
this pull request
Jun 10, 2024
Adds back the ability to set the phase of an `afterRender` / `afterNextRender` callback using the `phase` option. However, this API is now deprecated, and the phase should instead be specified by passing a spec object rather than a callback function. PR Close #55648
alxhub
pushed a commit
that referenced
this pull request
Jun 10, 2024
Adds an `ng update` migration to move users from using the phase flag with `afterRender` / `afterNextRender` to passing a spec object instead. PR Close #55648
|
Thank you guys, this is a much much more elegant API. |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
8 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.
Previously
afterRenderandafterNextRenderallowed the user to passa phase to run the callback in as part of the
AfterRenderOptions. Thisworked, but made it cumbersome to coordinate work between phases.
This PR replaces the old phases API with a new one that allows passing a
callback per phase in a single
afterRender/afterNextRendercall.The return value of each phase's callback is passed to the next phase
callback that was part of the same
afterRendercall.This API also retains the ability to pass a single callback, which will
be run in the
mixedReadWritephase.