Drop Boxing

src/lib/hooks/use-floating.svelte.ts

@@ -1,4 +1,3 @@
-import { box } from '$lib/box.svelte.js';
 import type { UseFloatingOptions, UseFloatingReturn } from '$lib/types.js';
 import { getDPR, noop, roundByDPR, styleObjectToString } from '$lib/utils.js';
 import type { MiddlewareData, ReferenceElement } from '@floating-ui/dom';
@@ -11,129 +10,125 @@ import { computePosition } from '@floating-ui/dom';
  */
 export function useFloating<T extends ReferenceElement = ReferenceElement>(
 	options: UseFloatingOptions<T> = {}
-): UseFloatingReturn {
-	const openOption = box.derived(() => options.open ?? true);
+): UseFloatingReturn<T> {
+	const openOption = $derived(options.open ?? true);
 	const onOpenChangeOption = options.onOpenChange ?? noop;
-	const placementOption = box.derived(() => options.placement ?? 'bottom');
-	const strategyOption = box.derived(() => options.strategy ?? 'absolute');
-	const middlewareOption = box.derived(() => options.middleware);
-	const transformOption = box.derived(() => options.transform ?? true);
-	const referenceElement = box.derived(() => options.elements?.reference);
-	const floatingElement = box.derived(() => options.elements?.floating);
+	const placementOption = $derived(options.placement ?? 'bottom');
+	const strategyOption = $derived(options.strategy ?? 'absolute');
+	const middlewareOption = $derived(options.middleware);
+	const transformOption = $derived(options.transform ?? true);
+	const elements = $derived(options.elements ?? {});
 	const whileElementsMountedOption = options.whileElementsMounted;
 
-	const x = box(0);
-	const y = box(0);
-	const strategy = box(strategyOption.value);
-	const placement = box(placementOption.value);
-	const middlewareData = box<MiddlewareData>({});
-	const isPositioned = box(false);
-	const floatingStyles = box.derived(() => {
+	let x = $state(0);
+	let y = $state(0);
+	let strategy = $state(strategyOption);
+	let placement = $state(placementOption);
+	let middlewareData = $state<MiddlewareData>({});
+	let isPositioned = $state(false);
+
+	const floatingStyles = $derived.by(() => {
 		const initialStyles = {
-			position: strategy.value,
+			position: strategy,
 			left: '0',
 			top: '0'
 		};
 
-		if (!floatingElement.value) {
+		const { floating } = elements;
+		if (floating == null) {
 			return styleObjectToString(initialStyles);
 		}
 
-		const xVal = roundByDPR(floatingElement.value, x.value);
-		const yVal = roundByDPR(floatingElement.value, y.value);
+		const xVal = roundByDPR(floating, x);
+		const yVal = roundByDPR(floating, y);
 
-		if (transformOption.value) {
+		if (transformOption) {
 			return styleObjectToString({
 				...initialStyles,
 				transform: `translate(${xVal}px, ${yVal}px)`,
-				...(getDPR(floatingElement.value) >= 1.5 && { willChange: 'transform' })
+				...(getDPR(floating) >= 1.5 && { willChange: 'transform' })
 			});
 		}
 
 		return styleObjectToString({
-			position: strategy.value,
+			position: strategy,
 			left: `${xVal}px`,
 			top: `${yVal}px`
 		});
 	});
 
-	let whileElementsMountedCleanup: (() => void) | undefined;
-
 	function update() {
-		if (
-			referenceElement.value === null ||
-			referenceElement.value === undefined ||
-			floatingElement.value === null ||
-			floatingElement.value === undefined
-		) {
+		const { reference, floating } = elements;
+		if (reference == null || floating == null) {
 			return;
 		}
 
-		computePosition(referenceElement.value, floatingElement.value, {
-			middleware: middlewareOption.value,
-			placement: placementOption.value,
-			strategy: strategyOption.value
+		computePosition(reference, floating, {
+			middleware: middlewareOption,
+			placement: placementOption,
+			strategy: strategyOption
 		}).then((position) => {
-			x.value = position.x;
-			y.value = position.y;
-			strategy.value = position.strategy;
-			placement.value = position.placement;
-			middlewareData.value = position.middlewareData;
-			isPositioned.value = true;
+			x = position.x;
+			y = position.y;
+			strategy = position.strategy;
+			placement = position.placement;
+			middlewareData = position.middlewareData;
+			isPositioned = true;
 		});
 	}
 
 	function attach() {
-		cleanup();
-
 		if (whileElementsMountedOption === undefined) {
 			update();
 			return;
 		}
 
-		if (referenceElement.value != null && floatingElement.value != null) {
-			whileElementsMountedCleanup = whileElementsMountedOption(
-				referenceElement.value,
-				floatingElement.value,
-				update
-			);
-			return;
+		const { floating, reference } = elements;
+		if (reference != null && floating != null) {
+			return whileElementsMountedOption(reference, floating, update);
 		}
 	}
 
 	function reset() {
-		if (!openOption.value) {
-			isPositioned.value = false;
-		}
-	}
-
-	function cleanup() {
-		if (typeof whileElementsMountedCleanup === 'function') {
-			whileElementsMountedCleanup();
-			whileElementsMountedCleanup = undefined;
+		if (!openOption) {
+			isPositioned = false;
 		}
 	}
 
 	$effect.pre(update);
 	$effect.pre(attach);
 	$effect.pre(reset);
-	$effect(() => cleanup);
 
 	return {
-		x: box.readonly(x),
-		y: box.readonly(y),
-		strategy: box.readonly(strategy),
-		placement: box.readonly(placement),
-		middlewareData: box.readonly(middlewareData),
-		isPositioned: box.readonly(isPositioned),
-		floatingStyles,
+		get x() {
+			return x;
+		},
+		get y() {
+			return y;
+		},
+		get strategy() {
+			return strategy;
+		},
+		get placement() {
+			return placement;
+		},
+		get middlewareData() {
+			return middlewareData;
+		},
+		get isPositioned() {
+			return isPositioned;
+		},
+		get floatingStyles() {
+			return floatingStyles;
+		},
 		update,
 		context: {
-			open: openOption,
+			get open() {
+				return openOption;
+			},
 			onOpenChange: onOpenChangeOption,
-			elements: {
-				reference: box.readonly(referenceElement),
-				floating: box.readonly(floatingElement)
+			get elements() {
+				return elements;
 			}
 		}
 	};