[✨] onResize$

[gederer]

Is your feature request related to a problem?

Often, components can be made responsive using pure CSS with media queries and container queries; however, some components have to manage their own display when dynamically resized. Currently, this is handled by creating a ResizeObserver by hand. It would be convenient if the framework provided a simple API for setting up resize behavior, and created the ResizeObserver under the hood.

Describe the solution you'd like

This feature could be implemented as an onResize$ attribute that could be added to any Qwik component.

Example:

<MyComponent onResize$={(entry: ResizeObserverEntry) => {
  // My display management logic
}} />

Describe alternatives you've considered

Setting up a ResizeObserver by hand.

Additional context

No response

[thejackshelton]

Ok after doing a decent bit of research it looks like we do need some sort event such as qresize or onResize$, the daisy UI implementation does not allow us to do more complex carousels.

I think it's a pretty common use case to want to track an element's dimensions. Currently, we cannot do that without a resize observer, which will not execute unless we do it on page load.

Such as useOnWindow('DOMContentLoaded').

If we wanted to keep with the principles of delaying the execution of code as much as possible, I think this would be a needed event in the framework

https://discord.com/channels/842438759945601056/1041016608946135161/1182393506019418193

[thejackshelton]

Closed a duplicate issue, but I think it has further context

Is your feature request related to a problem?
Yes, let's say we have a carousel component. That carousel component has three elements.

Parent
Child
Grandchild
We want the grandchild to always have the element's width of our parent. In the case of our carousel component, we want the slide widths to change based on the parent's size.

Unfortunately, the current solution is to use a resize observer, and we need some sort of javascript on page load.

Describe the solution you'd like
A qresize event that allows us to see when a containers width is resized.

This is intuitive and similar to container queries in css, but we can programmatically change UI based on the container size.

Describe alternatives you've considered
Vanilla CSS alternatives

Trying to create the html element as a store to see track its nested properties

Additional context
No response

[mhevery]

I ❤️ this idea. Here are my thoughts.

I think we should create a custom event similar to qvisible. Let's say qresize. If the event is present in the output, then the QwikLoader should set up ResizeObserver and fire an event on resize. The nice thing is that this would work great with syncQRL so that we would not even have to bring the framework in.

Implementation detail:

• Update qwikeloader to understand how to set up ResizeObserver
• update the Rendering pipeline to notify qwikloader that new qresize event has occurred.
• Have a way to clean up events when they are removed.

NOTE: We could also use this code to make the qvisible behavior less surprising.

Would anyone be up for this? Happy to provide support along the way.

[thejackshelton]

@mhevery sure! Not as acquainted with core as I'd like to be, but I think this is an important piece for anyone wanting to do more complex UI.

Do we need to try out $sync first?