Add infObserveResize directive #60
Conversation
Nx Cloud ReportCI is running for commit 90d0b12. 📂 Click to track the progress, see the status, the terminal output, and the build insights. Sent with 💌 from NxCloud. |
|
TODO myself: add directive to exports |
| }); | ||
| ``` | ||
|
|
||
| Unfortunately above won't as well as when we run the tests, we will see it complaining that expected `heightOutputDebugEl` innerText doesn't match `newHeight`. Why is that? |
There was a problem hiding this comment.
Are you maybe missing a word in this sentence ?
|
|
||
| Unfortunately above won't as well as when we run the tests, we will see it complaining that expected `heightOutputDebugEl` innerText doesn't match `newHeight`. Why is that? | ||
|
|
||
| Clearly the browser doesn't fire ResizeObserver notifications the instant one of the elements gets resized or to make it clearer, it doesn't trigger the moment anything which could cause a resize happens. Instead, it runs as described in [spec](https://www.w3.org/TR/resize-observer/#html-event-loop), TL;DR after layout gets updated, but before repaint. Closest the end of that would be using `requestAnimationFrame` with `setTimeout`, where `requestAnimationFrame` runs its callback just before the repaint happens, we can defer it to next macrotask with `setTimeout` (which is bound to happen after repaint). We could use artificial delay as well, but that wouldn't guarantee the execution after the next repaint. |
There was a problem hiding this comment.
TL;DR sentence isn't clear to me as well, Should it maybe be smth like "after layout gets updated, but before repaint ResizeObserver notification is fired?
There was a problem hiding this comment.
I tried to reword the paragraph a little bit.
| template: ` | ||
| <h2>Content rect:</h2> | ||
| <pre>{{ measurements$ | async | json }}</pre> | ||
| <button (click)="appendText()">Append text</button> |
There was a problem hiding this comment.
click handler naming -> onAppendTextClick(),
| <h2>Content rect:</h2> | ||
| <pre>{{ measurements$ | async | json }}</pre> | ||
| <button (click)="appendText()">Append text</button> | ||
| <button (click)="toggleContent()">Toggle content</button> |
There was a problem hiding this comment.
click handler naming -> onToggleContentClick(),
|
Thanks for review so far. |
|
Abandoning in favour of https://taiga-family.github.io/ng-web-apis/resize-observer |
Description
Abstracts ResizeObserver into primitive directive.
Tests simple interaction that replaces underlying ResizeObserver with mocks as Jest does not support ResizeObserver and testing a polyfill would negate the point of it anyway.
Documentation includes notes on how to test events fired from the directive if need be.
Type of change
Checklist: