vnphanquang / svelte-put

Useful svelte stuff to put in your projects
https://svelte-put.vnphanquang.com
MIT License
836 stars 25 forks source link

Make `resize` action support `Element`, not just `HTMLElement` #314

Closed regexident closed 4 months ago

regexident commented 4 months ago

The ResizeObserver Web API supports Element, not just HTMLElement.

interface ResizeObserver {
    disconnect(): void;
    observe(target: Element, options?: ResizeObserverOptions): void;
    unobserve(target: Element): void;
}

The current restriction of use:resize to just HTMLElement is very unfortunate, since for SVG elements Svelte doesn't even provide an equivalent to bind:clientWidth/bind:clientHeight), so use:resize would be even more useful here.


Additional sources:

MDN Web Docs

The ResizeObserver constructor creates a new ResizeObserver object, which can be used to report changes to the content or border box of an Element or the bounding box of an SVGElement.

W3C "Resize Observer" Spec

Web content can also contain SVG elements. SVG Elements define bounding box instead of a content box. Content rect for SVGGraphicsElements is a rect whose:

vnphanquang commented 4 months ago

Now available in @svelte-put/resize@3.1.0