INIT
CI / build (push) Has been skipped
CI / deploy (push) Successful in 1m11s

This commit is contained in:
eewing
2026-02-18 15:17:47 -06:00
parent e74c106f85
commit ec317eb17c
11532 changed files with 1631690 additions and 1 deletions
+1
View File
@@ -0,0 +1 @@
export { useResizeObserver } from "./use-resize-observer.svelte.js";
+1
View File
@@ -0,0 +1 @@
export { useResizeObserver } from "./use-resize-observer.svelte.js";
@@ -0,0 +1,39 @@
import type { MaybeGetter } from "../../internal/types.js";
import { type ConfigurableWindow } from "../../internal/configurable-globals.js";
export interface ResizeObserverSize {
readonly inlineSize: number;
readonly blockSize: number;
}
export interface ResizeObserverEntry {
readonly target: Element;
readonly contentRect: DOMRectReadOnly;
readonly borderBoxSize?: ReadonlyArray<ResizeObserverSize>;
readonly contentBoxSize?: ReadonlyArray<ResizeObserverSize>;
readonly devicePixelContentBoxSize?: ReadonlyArray<ResizeObserverSize>;
}
export type ResizeObserverCallback = (entries: ReadonlyArray<ResizeObserverEntry>, observer: ResizeObserver) => void;
export interface UseResizeObserverOptions extends ConfigurableWindow {
/**
* Sets which box model the observer will observe changes to. Possible values
* are `content-box` (the default), `border-box` and `device-pixel-content-box`.
*
* @default 'content-box'
*/
box?: ResizeObserverBoxOptions;
}
declare class ResizeObserver {
constructor(callback: ResizeObserverCallback);
disconnect(): void;
observe(target: Element, options?: UseResizeObserverOptions): void;
unobserve(target: Element): void;
}
/**
* Reports changes to the dimensions of an Element's content or the border-box
*
* @see https://runed.dev/docs/utilities/useResizeObserver
*/
export declare function useResizeObserver(target: MaybeGetter<HTMLElement | HTMLElement[] | null | undefined>, callback: ResizeObserverCallback, options?: UseResizeObserverOptions): {
stop: () => void;
};
export type UseResizeObserverReturn = ReturnType<typeof useResizeObserver>;
export {};
@@ -0,0 +1,34 @@
import { extract } from "../extract/extract.svelte.js";
import { defaultWindow } from "../../internal/configurable-globals.js";
/**
* Reports changes to the dimensions of an Element's content or the border-box
*
* @see https://runed.dev/docs/utilities/useResizeObserver
*/
export function useResizeObserver(target, callback, options = {}) {
const { window = defaultWindow } = options;
let observer;
const targets = $derived.by(() => {
const value = extract(target);
return new Set(value ? (Array.isArray(value) ? value : [value]) : []);
});
const stop = $effect.root(() => {
$effect(() => {
if (!targets.size || !window)
return;
observer = new window.ResizeObserver(callback);
for (const el of targets)
observer.observe(el, options);
return () => {
observer?.disconnect();
observer = undefined;
};
});
});
$effect(() => {
return stop;
});
return {
stop,
};
}