StaticcreateCreates a new instance of SizeWatcher with the given SizeWatcherConfig. It does not save it for future reuse.
StaticreuseReturns an existing instance of SizeWatcher with the given SizeWatcherConfig, or creates a new one.
NOTE: It saves it for future reuse, so don't use this for temporary short-lived watchers.
ReadonlyfetchGet the size of the given target. It will get the size from a ResizeObserverEntry and so it's always delayed by one frame at least.
LisnUsageError If the target is invalid.
ReadonlynoRemoves a previously added handler for trackSize.
LisnUsageError If the target is invalid.
ReadonlyoffRemoves a previously added handler.
LisnUsageError If the target is invalid.
ReadonlyonCall the given handler whenever the target's size changes.
Unless OnResizeOptions.skipInitial is true, the handler is also called (almost) immediately with the latest size data.
IMPORTANT: The same handler can not be added multiple times for the same target, even if the options differ. If the handler has already been added for this target, either using onResize or trackSize, then it will be removed and re-added with the current options.
LisnUsageError If the target or options are invalid.
ReadonlytrackThis is the same as onResize except that if handler is not given,
then it defaults to an handler that updates a set of CSS variables on the
target's style:
If options.target is not given, or is
window, the following CSS variables are set on the root (html)
element and represent the viewport size:
--lisn-js--window-border-width--lisn-js--window-border-height--lisn-js--window-content-width--lisn-js--window-content-heightOtherwise, the following variables are set on the target itself and represent its visible size:
--lisn-js--border-width--lisn-js--border-height--lisn-js--content-width--lisn-js--content-heightIf target is document, then it will use document.documentElement.
IMPORTANT: The same handler can not be added multiple times for the same target, even if the options differ. If the handler has already been added for this target, either using onResize or trackSize, then it will be removed and re-added with the current options.
LisnUsageError If the target or options are invalid.
SizeWatcher monitors the size of a given target. It's built on top of ResizeObserver.
It manages registered callbacks globally and reuses ResizeObservers.
Each instance of SizeWatcher manages up to two ResizeObservers: one for content-box size changes and one for border-box size changes.