export function observe()

in src/lib/attachments/observe.svelte.ts [77:132]
21 lines of code
2 McCabe index (conditional complexity)

export function observe(args: ObserveArgs): Attachment<HTMLElement> {
	return node => {
		function setVars(name: ObservedElements) {
			// 1. Standard rect (includes transforms)
			const rect = node.getBoundingClientRect();
			document.documentElement.style.setProperty(`--${name}-width`, `${rect.width}px`);
			document.documentElement.style.setProperty(`--${name}-height`, `${rect.height}px`);
			document.documentElement.style.setProperty(`--${name}-top`, `${rect.top}px`);
			document.documentElement.style.setProperty(`--${name}-left`, `${rect.left}px`);
			document.documentElement.style.setProperty(`--${name}-right`, `${rect.right}px`);
			document.documentElement.style.setProperty(`--${name}-bottom`, `${rect.bottom}px`);

			// 2. Offset position (ignores transforms)
			const offset = getOffsetPosition(node);
			document.documentElement.style.setProperty(`--${name}-width-offset`, `${offset.width}px`);
			document.documentElement.style.setProperty(`--${name}-height-offset`, `${offset.height}px`);
			document.documentElement.style.setProperty(`--${name}-top-offset`, `${offset.top}px`);
			document.documentElement.style.setProperty(`--${name}-left-offset`, `${offset.left}px`);
			document.documentElement.style.setProperty(`--${name}-right-offset`, `${offset.right}px`);
			document.documentElement.style.setProperty(`--${name}-bottom-offset`, `${offset.bottom}px`);

			observed[name] = {
				rect,
				offset,
			};
		}

		function onWindowChange() {
			setVars(args.name);
		}

		/** Initialize */
		const resizeObserver = new ResizeObserver(() => {
			setVars(args.name);
		});

		resizeObserver.observe(node);

		// Listen for scroll and resize events
		window.addEventListener("scroll", onWindowChange, true);
		window.addEventListener("resize", onWindowChange, true);

		setVars(args.name); // Initial set after observing
		if (args.useRaf) {
			new AnimationFrames(() => {
				setVars(args.name);
			});
		}

		return function destroy() {
			resizeObserver.disconnect();
			window.removeEventListener("scroll", onWindowChange, true);
			window.removeEventListener("resize", onWindowChange, true);
		};
	};
}