Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 | 184x 88x 50x 50x 50x 4x 3x 3x 1x 1x 4x 1x 1x 1x 1x 45x 44x 44x 1x 1x 45x 50x 83x 74x 9x 83x 83x 83x 83x 83x 3x 3x 1x 2x 2x 2x 2x 2x 2x 1x 184x 1x 1x 14x | import type { ResizeEntry, ResizeObserverBoxOptions } from "./types";
/**
* Check if ResizeObserver API is supported in the current environment
*/
export function isResizeObserverSupported(): boolean {
return typeof window !== "undefined" && "ResizeObserver" in window;
}
/**
* Convert native ResizeObserverEntry to ResizeEntry
*/
export function toResizeEntry(nativeEntry: ResizeObserverEntry): ResizeEntry {
return {
entry: nativeEntry,
target: nativeEntry.target,
contentRect: nativeEntry.contentRect,
borderBoxSize: nativeEntry.borderBoxSize || [],
contentBoxSize: nativeEntry.contentBoxSize || [],
devicePixelContentBoxSize: nativeEntry.devicePixelContentBoxSize,
};
}
/**
* Extract width and height based on box option
*/
export function extractSize(
entry: ResizeObserverEntry,
box: ResizeObserverBoxOptions,
round: (value: number) => number = Math.round
): { width: number; height: number } {
let width = 0;
let height = 0;
switch (box) {
case "border-box":
if (entry.borderBoxSize?.[0]) {
width = entry.borderBoxSize[0].inlineSize;
height = entry.borderBoxSize[0].blockSize;
} else {
// Fallback to contentRect + estimate
width = entry.contentRect.width;
height = entry.contentRect.height;
}
break;
case "device-pixel-content-box":
if (entry.devicePixelContentBoxSize?.[0]) {
width = entry.devicePixelContentBoxSize[0].inlineSize;
height = entry.devicePixelContentBoxSize[0].blockSize;
} else E{
// Fallback to content-box with device pixel ratio
const dpr = typeof window !== "undefined" ? window.devicePixelRatio : 1;
if (entry.contentBoxSize?.[0]) {
width = entry.contentBoxSize[0].inlineSize * dpr;
height = entry.contentBoxSize[0].blockSize * dpr;
} else {
width = entry.contentRect.width * dpr;
height = entry.contentRect.height * dpr;
}
}
break;
case "content-box":
default:
if (entry.contentBoxSize?.[0]) {
width = entry.contentBoxSize[0].inlineSize;
height = entry.contentBoxSize[0].blockSize;
} else {
// Fallback to contentRect
width = entry.contentRect.width;
height = entry.contentRect.height;
}
break;
}
return {
width: round(width),
height: round(height),
};
}
/**
* Create initial ResizeEntry for SSR or initial state
*/
export function createInitialResizeEntry(
width?: number,
height?: number
): ResizeEntry | undefined {
if (width === undefined && height === undefined) {
return undefined;
}
const w = width ?? 0;
const h = height ?? 0;
const emptyRect: DOMRectReadOnly = {
x: 0,
y: 0,
width: w,
height: h,
top: 0,
right: w,
bottom: h,
left: 0,
toJSON: () => ({
x: 0,
y: 0,
width: w,
height: h,
top: 0,
right: w,
bottom: h,
left: 0,
}),
};
const emptySize: ResizeObserverSize = {
inlineSize: w,
blockSize: h,
};
// Create a mock entry for SSR
const mockNativeEntry = {
target: null as unknown as Element,
contentRect: emptyRect,
borderBoxSize: [emptySize],
contentBoxSize: [emptySize],
devicePixelContentBoxSize: [] as ResizeObserverSize[],
} as unknown as ResizeObserverEntry;
return {
entry: mockNativeEntry,
target: null as unknown as Element,
contentRect: emptyRect,
borderBoxSize: [emptySize],
contentBoxSize: [emptySize],
devicePixelContentBoxSize: undefined,
};
}
/**
* Create a no-op ref callback for SSR
*/
export function createNoopRef<T extends Element>(): (element: T | null) => void {
return () => {
// No-op for SSR
};
}
/**
* Check if the `device-pixel-content-box` observation mode is supported.
*
* Browsers that don't implement this box mode throw synchronously when it's
* passed to `observe()`, so a non-throwing `observe` is the accepted synchronous
* capability probe. (The old approach read a flag set inside the observer
* callback, which fires asynchronously — so it could never return `true`.)
*/
export function isDevicePixelContentBoxSupported(): boolean {
if (!isResizeObserverSupported()) {
return false;
}
try {
const observer = new ResizeObserver(() => {});
const testDiv = document.createElement("div");
observer.observe(testDiv, { box: "device-pixel-content-box" });
observer.disconnect();
return true;
} catch {
return false;
}
}
/**
* Validate options - warn if both debounce and throttle are set
*/
export function validateOptions(
debounce?: number,
throttle?: number
): void {
if (
debounce !== undefined &&
debounce > 0 &&
throttle !== undefined &&
throttle > 0
) {
Eif (typeof window !== "undefined") {
console.warn(
"[useResizeObserver] debounce and throttle cannot be used together. Using debounce."
);
}
}
}
/**
* Check if size has changed
*/
export function hasSizeChanged(
prevWidth: number | undefined,
prevHeight: number | undefined,
newWidth: number,
newHeight: number
): boolean {
return prevWidth !== newWidth || prevHeight !== newHeight;
}
|