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 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 | 166x 82x 47x 47x 47x 4x 3x 3x 1x 1x 4x 1x 1x 1x 1x 42x 41x 41x 1x 1x 42x 47x 71x 64x 7x 71x 71x 71x 71x 71x 3x 169x 1x 1x 13x 4x 4x 8x 4x 8x 3x 3x 4x 1x 1x 1x 4x 5x 5x 5x 5x 11x 11x 11x 6x 6x 5x 5x 3x 2x 2x 2x 2x 2x 5x 1x 1x 1x 1x 5x | 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 device-pixel-content-box is supported
*/
export function isDevicePixelContentBoxSupported(): boolean {
if (!isResizeObserverSupported()) {
return false;
}
// This is a simplified check - actual support detection would require
// creating an observer and checking the entry
try {
// Check if the option is accepted without throwing
const testDiv = document.createElement("div");
let supported = false;
const observer = new ResizeObserver((entries) => {
if (entries[0]?.devicePixelContentBoxSize) {
supported = true;
}
});
observer.observe(testDiv, { box: "device-pixel-content-box" });
observer.disconnect();
return supported;
} 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;
}
/**
* Create a debounced function
*/
export function debounceFunction<T extends (...args: unknown[]) => void>(
fn: T,
delay: number
): { debouncedFn: T; cancel: () => void } {
let timeoutId: ReturnType<typeof setTimeout> | null = null;
const debouncedFn = ((...args: unknown[]) => {
if (timeoutId) {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(() => {
fn(...args);
timeoutId = null;
}, delay);
}) as T;
const cancel = () => {
Eif (timeoutId) {
clearTimeout(timeoutId);
timeoutId = null;
}
};
return { debouncedFn, cancel };
}
/**
* Create a throttled function
*/
export function throttleFunction<T extends (...args: unknown[]) => void>(
fn: T,
interval: number
): { throttledFn: T; cancel: () => void } {
let lastCallTime = 0;
let timeoutId: ReturnType<typeof setTimeout> | null = null;
let lastArgs: unknown[] | null = null;
const throttledFn = ((...args: unknown[]) => {
const now = Date.now();
const timeSinceLastCall = now - lastCallTime;
if (timeSinceLastCall >= interval) {
lastCallTime = now;
fn(...args);
} else {
// Schedule trailing call
lastArgs = args;
if (!timeoutId) {
timeoutId = setTimeout(() => {
lastCallTime = Date.now();
Eif (lastArgs) {
fn(...lastArgs);
}
timeoutId = null;
lastArgs = null;
}, interval - timeSinceLastCall);
}
}
}) as T;
const cancel = () => {
Eif (timeoutId) {
clearTimeout(timeoutId);
timeoutId = null;
}
lastArgs = null;
};
return { throttledFn, cancel };
}
|