-
Notifications
You must be signed in to change notification settings - Fork 27k
feat(core): Redesign the afterRender & afterNextRender phases API #55648
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
JoostK
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I love this API 🥳
devknoll
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Love this change. Thanks for putting it together!
b8d5fb7 to
5cbf2f0
Compare
55744ab to
2e05663
Compare
b258ee6 to
0c47d6b
Compare
atscott
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Reviewed-for: public-api
|
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
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
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
reviewed-for: public-api
|
This PR was merged into the repository by commit ea3c802. |
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
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. |
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.