@solid-primitives/resize-observer: Implement new strategies for determining element size and revert changes in 2.0.22

[vveisard]

Describe The Problem To Be Solved

The new strategy for createElementSize introduced in 2.0.22 (which to be fair, is more reasonable) is not backwards compatible. Instead, additional strategies for calculating element size should be added which respect semantic versioning.

In my case, I was using createElementSize for proportional scaling to change the transform: scale style of the observed element. Using bounding client rect breaks this behavior.

Suggest A Solution

I have two suggestions, both of which are minor revisions (2.1.0) that respect semantic versioning:

1. Deprecate createElementSize and create new primitives for each strategy:

• createElementBorderBoxSize
• createElementContentBoxSize
• createElementContentRectSize
• createElementBoundingClientRectSize

2. Like the suggestion in Use contentBoxSize and borderBoxSize instead of contentRect in createElementSize #469, add a strategy parameter to createElementSize for how to calculate the size; 'borderBoxSize' | 'contentBoxSize' | 'contentRect' | 'getBoundingClientRect'. The default value of this parameter is contentRect, which match the behavior prior to 2.0.22.

[thetarnav]

Before the change, createElementSize used both contentRect and getBoundingClientRect. getBoundingClientRect for initial value and contentRect in the resize callback.
In my mind using contentRect was a bug, which was fixed to keep the primitive consistent, even if you depended on it.
So unless the initial value is always zero/null, nothing besides getBoundingClientRect can't be used, because you cannot get the ResizeObserverEntry initially.
Also borderBoxSize and contentBoxSize properties do not return a simple Rect/Size object, but dimensions that depend on text direction, so I'm not sure if it's good to even provide options to choose those.
I think that another primitive could be added, that is much simpler so it could be easily composed and adapted to what needs to be read.

const resizeEntry = createElementResizeObserverEntry(element)
const elementSize = createMemo(() => {
	const e = resizeEntry()
	return e ? {width: e.contentRect.width, height: e.contentRect.height} : {width: 0, height: 0}
})

If the initial value for createElementSize were to always be zero/null, the api that allows changing the strategy could look like this:

type GetEntrySize = (e: ResizeObserverEntry) => Size

const getEntrySizeBoundingClientRect: GetEntrySize
const getEntrySizeBorderBox: GetEntrySize
const getEntrySizeContentBox: GetEntrySize
const getEntrySizeContentRect: GetEntrySize
const getEntrySizeDevicePixelContentBox: GetEntrySize

function createElementSize(
  target: Element | Accessor<Element | false | undefined | null>,
  getEntrySize?: GetEntrySize,
): Readonly<NullableSize>