use .raw over ``

Author: ryanatkn

.changeset/eight-moles-repair.md

@@ -0,0 +1,5 @@
+---
+'@fuzdev/fuz_ui': minor
+---
+
+use `$state.raw` over `$state`

src/lib/ContextmenuLinkEntry.svelte

@@ -23,7 +23,7 @@
 	const get_contextmenu = contextmenu_context.get();
 	const contextmenu = $derived(get_contextmenu());
 
-	let anchor_el: HTMLAnchorElement | undefined = $state();
+	let anchor_el: HTMLAnchorElement | undefined = $state.raw();
 
 	// Register with state management for keyboard navigation
 	// When activated via keyboard, programmatically click the anchor to trigger navigation

src/lib/ContextmenuRoot.svelte

@@ -113,7 +113,7 @@
 
 	if (DEV) contextmenu_check_global_root(() => scoped); // TODO @many is this import tree-shaken?
 
-	let el: HTMLElement | undefined = $state();
+	let el: HTMLElement | undefined = $state.raw();
 
 	const {layout} = $derived(contextmenu);
 
@@ -128,11 +128,11 @@
 
 	// State for tap-then-longpress bypass detection.
 	// These values are `undefined` when unused, and `null` after being reset.
-	let touch_x: number | undefined | null = $state();
-	let touch_y: number | undefined | null = $state();
-	let first_tap_time: number | undefined | null = $state();
-	let longpress_bypass: boolean | undefined = $state();
-	let tap_tracking_timeout: NodeJS.Timeout | undefined | null = $state();
+	let touch_x: number | undefined | null = $state.raw();
+	let touch_y: number | undefined | null = $state.raw();
+	let first_tap_time: number | undefined | null = $state.raw();
+	let longpress_bypass: boolean | undefined = $state.raw();
+	let tap_tracking_timeout: NodeJS.Timeout | undefined | null = $state.raw();
 
 	const on_window_contextmenu = (e: MouseEvent) => {
 		// Handle the tap-then-longpress bypass gesture

src/lib/ContextmenuRootForSafariCompatibility.svelte

@@ -127,7 +127,7 @@
 
 	if (DEV) contextmenu_check_global_root(() => scoped); // TODO @many is this import tree-shaken?
 
-	let el: HTMLElement | undefined = $state();
+	let el: HTMLElement | undefined = $state.raw();
 
 	const {layout} = $derived(contextmenu);
 
@@ -144,19 +144,19 @@
 
 	// State for tap-then-longpress bypass detection.
 	// These values are `undefined` when unused, and `null` after being reset.
-	let touch_x: number | undefined | null = $state();
-	let touch_y: number | undefined | null = $state();
-	let first_tap_time: number | undefined | null = $state();
-	let longpress_timeout: NodeJS.Timeout | undefined | null = $state();
-	let longpress_opened: boolean | undefined = $state();
-	let longpress_bypass: boolean | undefined = $state();
-	let tap_tracking_timeout: NodeJS.Timeout | undefined | null = $state();
+	let touch_x: number | undefined | null = $state.raw();
+	let touch_y: number | undefined | null = $state.raw();
+	let first_tap_time: number | undefined | null = $state.raw();
+	let longpress_timeout: NodeJS.Timeout | undefined | null = $state.raw();
+	let longpress_opened: boolean | undefined = $state.raw();
+	let longpress_bypass: boolean | undefined = $state.raw();
+	let tap_tracking_timeout: NodeJS.Timeout | undefined | null = $state.raw();
 
 	/**
 	 * Blocks the next click event. Set to true when a longpress completes to prevent
 	 * iOS's synthesized click from activating the first menu item.
 	 */
-	let block_next_click = $state(false);
+	let block_next_click = $state.raw(false);
 
 	/**
 	 * Adds contextmenu_pending class to body during longpress tracking.

src/lib/ContextmenuSubmenu.svelte

@@ -25,13 +25,13 @@
 
 	const {selected} = $derived(submenu);
 
-	let el: HTMLElement | undefined = $state();
+	let el: HTMLElement | undefined = $state.raw();
 
 	const parent_dimensions = contextmenu_dimensions_context.get();
 	const dimensions = contextmenu_dimensions_context.set();
 
-	let translate_x = $state(0);
-	let translate_y = $state(0);
+	let translate_x = $state.raw(0);
+	let translate_y = $state.raw(0);
 	$effect(() => {
 		if (el) update_position(el, layout, parent_dimensions);
 	});

src/lib/CopyToClipboard.svelte

@@ -30,8 +30,8 @@
 	} = $props();
 
 	// These are for visual feedback
-	let copied = $state(false);
-	let failed = $state(false);
+	let copied = $state.raw(false);
+	let failed = $state.raw(false);
 	let copy_timeout: NodeJS.Timeout | undefined;
 
 	const copy = async (e: MouseEvent) => {

src/lib/Dialog.svelte

@@ -58,7 +58,7 @@
 	const ROOT_SELECTOR = 'body'; // TODO make configurable
 	const CONTAINER_ID = 'fuz_dialog';
 
-	let container_el: HTMLElement | undefined = $state();
+	let container_el: HTMLElement | undefined = $state.raw();
 	$effect(() => {
 		update_container_el(container);
 	});
@@ -83,8 +83,8 @@
 		}
 	};
 
-	let dialog_el: HTMLElement | undefined = $state();
-	let content_el: HTMLElement | undefined = $state();
+	let dialog_el: HTMLElement | undefined = $state.raw();
+	let content_el: HTMLElement | undefined = $state.raw();
 
 	const close = (e?: Event) => {
 		if (e) swallow(e);
@@ -106,7 +106,7 @@
 
 	// The dialog isn't "ready" until the teleport moves it.
 	// Rendering the the dialog's children only once it's ready fixes things like `autofocus`.
-	let ready = $state(false);
+	let ready = $state.raw(false);
 </script>
 
 <svelte:window onkeydown={active ? on_window_keydown : undefined} />

src/lib/Docs.svelte

@@ -36,7 +36,7 @@
 
 	const docs_menu_width = '180px';
 
-	let show_secondary_nav_dialog = $state(false);
+	let show_secondary_nav_dialog = $state.raw(false);
 	const toggle_secondary_nav_dialog = (show?: boolean): void => {
 		show_secondary_nav_dialog = show ?? !show_secondary_nav_dialog;
 	};

src/lib/HueInput.svelte

@@ -32,7 +32,7 @@
 		update_hue(parsed);
 	};
 
-	let el: HTMLInputElement | undefined = $state();
+	let el: HTMLInputElement | undefined = $state.raw();
 
 	const set_hue_from_minimap = (e: MouseEvent & {currentTarget: EventTarget & HTMLElement}) => {
 		const rect = e.currentTarget.getBoundingClientRect();

src/lib/PendingButton.svelte

@@ -20,7 +20,7 @@
 		children: Snippet;
 	} = $props();
 
-	let el: HTMLButtonElement | undefined = $state();
+	let el: HTMLButtonElement | undefined = $state.raw();
 
 	export const focus = (options?: FocusOptions): void => el?.focus(options);