cleanup

Author: huntabyte

packages/paneforge/src/lib/components/pane-group.svelte

@@ -22,6 +22,7 @@
 	const {
 		states: { paneGroupStyle, paneGroupSelectors, groupId },
 		methods: { setLayout, getLayout },
+		updateOption,
 	} = setCtx({
 		autoSaveId,
 		direction,
@@ -31,6 +32,13 @@
 		storage,
 	});
 
+	$: updateOption("autoSaveId", autoSaveId);
+	$: updateOption("direction", direction);
+	$: updateOption("id", id);
+	$: updateOption("keyboardResizeBy", keyboardResizeBy);
+	$: updateOption("onLayout", onLayoutChange);
+	$: updateOption("storage", storage);
+
 	api = {
 		getLayout,
 		setLayout,

packages/paneforge/src/lib/components/pane-resize-handle.svelte packages/paneforge/src/lib/components/pane-resizer.svelte

@@ -7,7 +7,7 @@
 	import { getCursorStyle, generateId, styleToString } from "$lib/internal/utils/index.js";
 	import { onMount } from "svelte";
 	import { getCtx } from "./ctx.js";
-	import { resizeHandleAction } from "./pane-resize-handle.js";
+	import { resizeHandleAction } from "./pane-resizer.js";
 	import type { PaneResizeHandleProps, PaneResizeHandleAttributes } from "./types.js";
 
 	type $$Props = PaneResizeHandleProps;
@@ -25,7 +25,7 @@
 	const {
 		methods: { registerResizeHandle, startDragging, stopDragging },
 		states: { direction, dragState, groupId },
-	} = getCtx("PaneResizeHandle");
+	} = getCtx("PaneResizer");
 
 	const resizeHandleId = generateId(idFromProps);
 	$: isDragging = $dragState?.dragHandleId === resizeHandleId;
@@ -102,7 +102,7 @@
 		"data-pane-group-id": $groupId,
 		"data-active": isDragging ? "pointer" : isFocused ? "keyboard" : undefined,
 		"data-enabled": !disabled,
-		"data-pane-resize-handle-id": resizeHandleId,
+		"data-pane-resizer-id": resizeHandleId,
 	} satisfies PaneResizeHandleAttributes;
 </script>
 

packages/paneforge/src/lib/components/pane-resize-handle.ts packages/paneforge/src/lib/components/pane-resizer.ts

@@ -6,7 +6,7 @@ import type {
 import { chain } from "$lib/internal/utils/chain.js";
 import { addEventListener } from "$lib/internal/utils/event.js";
 
-type ResizeHandleActionParams = {
+type ResizerActionParams = {
 	disabled?: boolean;
 	resizeHandler: ResizeHandler | null;
 	isDragging?: boolean;
@@ -18,9 +18,9 @@ type ResizeHandleActionParams = {
  * A Svelte action that adds resize handle functionality to an element.
  * This action is used to handle the dragging of a resize handle.
  */
-export function resizeHandleAction(node: HTMLElement, params: ResizeHandleActionParams) {
+export function resizeHandleAction(node: HTMLElement, params: ResizerActionParams) {
 	let unsub = () => {};
-	function update(params: ResizeHandleActionParams) {
+	function update(params: ResizerActionParams) {
 		unsub();
 		const { disabled, resizeHandler, isDragging, stopDragging, onDragging = undefined } = params;
 		if (disabled || resizeHandler === null || !isDragging) return;

packages/paneforge/src/lib/components/types.ts

@@ -216,5 +216,5 @@ export type PaneResizeHandleAttributes = {
 	/** Whether the resize handle is enabled or not. */
 	"data-enabled"?: boolean;
 	/** The ID of the resize handle. */
-	"data-pane-resize-handle-id": string;
+	"data-pane-resizer-id": string;
 };

packages/paneforge/src/lib/internal/paneforge.ts

@@ -508,7 +508,7 @@ export function createPaneForge(props: CreatePaneForgeProps) {
 		const handles = getResizeHandleElementsForGroup($groupId);
 
 		const unsubHandlers = handles.map((handle) => {
-			const handleId = handle.getAttribute("data-pane-resize-handle-id");
+			const handleId = handle.getAttribute("data-pane-resizer-id");
 			if (!handleId) return noop;
 
 			const [idBefore, idAfter] = getResizeHandlePaneIds($groupId, handleId, get(paneDataArray));
@@ -643,7 +643,7 @@ function updateResizeHandleAriaValues({
 export function getResizeHandleElementsForGroup(groupId: string): HTMLElement[] {
 	if (!isBrowser) return [];
 	return Array.from(
-		document.querySelectorAll(`[data-pane-resize-handle-id][data-pane-group-id="${groupId}"]`)
+		document.querySelectorAll(`[data-pane-resizer-id][data-pane-group-id="${groupId}"]`)
 	);
 }
 
@@ -677,7 +677,7 @@ export function getResizeHandlePaneIds(
 
 export function getResizeHandleElement(id: string): HTMLElement | null {
 	if (!isBrowser) return null;
-	const element = document.querySelector(`[data-pane-resize-handle-id="${id}"]`);
+	const element = document.querySelector(`[data-pane-resizer-id="${id}"]`);
 	if (element) {
 		return element as HTMLElement;
 	}
@@ -687,9 +687,7 @@ export function getResizeHandleElement(id: string): HTMLElement | null {
 export function getResizeHandleElementIndex(groupId: string, id: string): number | null {
 	if (!isBrowser) return null;
 	const handles = getResizeHandleElementsForGroup(groupId);
-	const index = handles.findIndex(
-		(handle) => handle.getAttribute("data-pane-resize-handle-id") === id
-	);
+	const index = handles.findIndex((handle) => handle.getAttribute("data-pane-resizer-id") === id);
 	return index ?? null;
 }
 

packages/paneforge/src/lib/internal/utils/lifecycle.ts

@@ -1,15 +1,4 @@
-import { onDestroy, onMount } from "svelte";
-
-/**
- * Safely calls `onMount` and catches any errors that occur.
- */
-export function safeOnMount(fn: (...args: unknown[]) => unknown) {
-	try {
-		onMount(fn);
-	} catch {
-		return fn();
-	}
-}
+import { onDestroy } from "svelte";
 
 /**
  * Safely calls `onDestroy` and catches any errors that occur.

packages/paneforge/src/lib/internal/utils/storage.ts

@@ -100,7 +100,6 @@ export function loadPaneGroupState(
 
 /**
  * Saves the pane group state to local storage.
- * If the state is not found, returns null.
  */
 export function savePaneGroupState(
 	autoSaveId: string,
@@ -133,7 +132,7 @@ const debounceMap: {
  * Returns a debounced version of the given function.
  */
 // eslint-disable-next-line @typescript-eslint/ban-types
-export default function debounce<T extends Function>(callback: T, durationMs: number = 10) {
+function debounce<T extends Function>(callback: T, durationMs: number = 10) {
 	let timeoutId: NodeJS.Timeout | null = null;
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any

sites/docs/content/components/pane-resize-handle.md

@@ -66,6 +66,6 @@ export type PaneResizeHandleAttributes = {
 	/** Whether the resize handle is enabled or not. */
 	"data-enabled"?: boolean;
 	/** The ID of the resize handle. */
-	"data-pane-resize-handle-id": string;
+	"data-pane-resizer-id": string;
 };
 ```