Try to replace the withResizeObserver with lit labs' observer

[hsablonniere]

https://github.com/lit/lit/tree/main/packages/labs/observers

[florian-sanders-cc]

Tested it very quickly to see if it also triggered the ResizeObserver loop limit exceeded like our ResizeObserver in the the cc-invoice-table component.

It does trigger the same error.

The API feels easy to use so I still think it's interesting :+1:

[hsablonniere]

It does trigger the same error.

@florian-sanders-cc Yes, it does not. I wrote about the loop errors in issue #808.

[pdesoyres-cc]

This is what we use today:

• resize observer mixin is used in 10 components (cc-invoice-list, cc-invoice-table, cc-map, cc-orga-member-card, cc-overview, cc-pricing-product, cc-pricing-product-consumption, cc-tile-metrics, cc-tile-requests, cc-zone-input)
• breakpoints feature is used in 4 components (cc-invoice-list, cc-orga-member-card, cc-overview, cc-zone-input)

[florian-sanders-cc]

@hsablonniere I've started working on this issue and I got a reactive controller working but I checked the Lit implementation to see if my controller was missing stuff implemented in their version.

Checking their code made me realize that we can actually use the lit-labs version: the controller accepts a callback.

The callback is called with two arguments: entries and observer.

Inside entries, you have a target (you can decide if you want to observe the host or an element inside it but in our use cases, the target will always be the host).

Since we have access to target, we can:

• use getBoundingClientRect like we currently do,
• get its publicly declared breakpoints,
• set attributes.

TLDR; I think I'll submit two PRs so we can decide if we go with our own controller or the lit-labs implementation.