Add ShinyResizeObserver

[gadenbuie]

This PR adds a layer of abstraction around our use of ResizeObservers that will unify our approach to both sidebars and cards.

ShinyResizeObserver

It also improves our use of ResizeObservers:

• In particular this PR ensures that contents within a sidebar resize during sidebar transition even when the sidebar appears alone on the page and not within a card.

• We now instantiate a single ResizeObserver in the client and use the same ResizeObserver to observe the main areas of any sidebar instances, rather than creating a new ResizeObserver for each sidebar instance.

• The ShinyResizeObserver class includes a .flush() method that cleans up observers on elements that are no longer present in the document. In practice, this is called whenever new sidebars are added to the page (and not on pageload), and serves as a light-weight way to ensure that we don't leak memory by keeping references to removed elements.

• A new feature of the ShinyResizeObserver temporarily sets width to 100% for plot images during the transition. This allows the image to stretch during the transition; after the transition is complete the image is replaced by the server with a new plot image matching the final container dimensions.

• The ShinyResizeObserver handles contention for the same output by multiple observers.

  In the case of nested sidebars, an output may be observed by both the outer and inner sidebars. The callback automatically keeps track of which elements have already been handled by the same callback during a resize event cycle.

  We also prevent multiple instances of ShinyResizeObserver from updating the same output by assigning ownership of an output to the first observer to arrive at the output. This will allow us to use separate instances of ShinyResizeObserver for cards and sidebars without having to worry about duplicating resize requests.

TODO

• Add 312-bslib-sidebar-resize shinycoreci#166
• Investigate (briefly) the feasibility of only creating the ResizeObserve in a Shiny context. htmlwidgets in static documents already attach their resize method to resize events on window. And our RO doesn't do anything anyway unless we find a .shiny-bound-input, which should only happen in a Shiny context.

Preview

ggplot2 "static" plotOutput()

Kapture.2023-05-05.at.16.48.33.mp4

Plotly "dynamic" htmlwidget

Kapture.2023-05-05.at.16.50.05.mp4

[gadenbuie]

@cpsievert This is ready for another review – I have an open PR to add a test to shinycoreci that I will update tomorrow to be automated rather than manual.