@hrnec06/react_utils 1.5.1 → 1.7.0

package/src/components/Debugger/Debugger.tsx

@@ -1,4 +1,4 @@
-import { minmax, Nullable, Vector2 } from "@hrnec06/util";
+import { matchMouseEvent, minmax, MouseButton, Nullable, Vector2 } from "@hrnec06/util";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from 'react-dom';
 import {DebuggerContext} from "./DebuggerContext";
@@ -6,12 +6,49 @@ import clsx from "clsx";
 import ScrollBar from "./DebuggerScrollBar";
 import ParseValue from "./parser/DebugParser";
 import useKeyListener from "../../hooks/useKeyListener";
-import useUpdateEffect from "../../hooks/useUpdateEffect";
-import useUpdatedRef from "../../hooks/useUpdatedRef";
+import useUpdatedRef from "../../hooks/useLatestRef";
 import ResizeableBox from "../ResizeableBox/ResizeableBox";
+import useNamespacedId from "../../hooks/useNamespacedId";
+import useLocalStorage from "../../hooks/useLocalStorage";
+import z from "zod";
+import useDefaultValue from "../../hooks/useDefaultValue";
+
+const DEBUG_NAMESPACE = "debugger";
+
+function useDebuggerID(_customID?: string): string
+{
+	const customID = useDefaultValue(_customID);
+
+	if (customID)
+		return customID;
+
+	return useNamespacedId(DEBUG_NAMESPACE);
+}
+
+interface DebuggerLabelProps {
+	label: string
+}
+function DebuggerLabel({ label }: DebuggerLabelProps)
+{
+	return (
+		<div
+			className={clsx(
+				"px-3 py-1",
+				"text font-semibold text-white bg-[#181818]"
+			)}
+		>
+			{label}
+		</div>
+	)
+}
 
 interface DebugProps {
 	value: unknown,
+	/**
+	 * Assign a persistant ID if saved position breaks because of remounts.
+	 */
+	id?: string,
+	label?: string,
 	openPaths?: string[],
 	excludePaths?: string[],
 	size?: 'normal' | 'big' | 'tiny',
@@ -21,6 +58,8 @@ interface DebugProps {
 }
 function Debug({
 	value,
+	id: customID,
+	label,
 	openPaths,
 	excludePaths,
 	size = 'normal',
@@ -29,24 +68,28 @@ function Debug({
 	openRoot = true
 }: DebugProps) {
 	// Config
-	const LS_POS_KEY = 'debugger_position';
-	const LS_SIZE_KEY = 'debugger_size';
-	const LS_EXPAND_KEY = 'debugger_expanded';
+
+	const id = useDebuggerID(customID);
+
+	const { LS_POS_KEY, LS_SIZE_KEY, LS_EXPAND_KEY } = useMemo(() => ({
+		LS_POS_KEY: id + ".position",
+		LS_SIZE_KEY: id + ".size",
+		LS_EXPAND_KEY: id + ".expanded"
+	}), [id]);
 
 	// Keybinds
 	const f9_pressed = useKeyListener('F9');
 
-	// Position
-	const [position, setPosition] = useState<Vector2>([0, 0]);
+	// Position and resize
+	const [position, setPosition] = useLocalStorage<Vector2>(LS_POS_KEY, [0, 0], z.tuple([z.number(), z.number()]));
+	const [windowSize, setWindowSize] = useLocalStorage<Vector2>(LS_SIZE_KEY, [500, 500], z.tuple([z.number(), z.number()]));
+
 	const [grab, setGrab] = useState<Nullable<{
 		windowOrigin: Vector2,
 		positionOrigin: Vector2
 	}>>(null);
 	const [grabOffset, setGrabOffset] = useState<Nullable<Vector2>>(null);
 
-	// Resize
-	const [windowSize, setWindowSize] = useState<Vector2>([500, 500]);
-
 	// Scroll
 	const [scrollHeight, setScrollHeight] = useState(0);
 	const [containerHeight, setContainerHeight] = useState(0);
@@ -98,64 +141,6 @@ function Debug({
 
 	const isScrollable = useMemo(() => scrollHeight > 0, [scrollHeight]);
 
-	// Load saved position
-	useEffect(() => {
-		try {
-			const saved_position = localStorage.getItem(LS_POS_KEY);
-			if (saved_position) {
-				const [v1, v2] = saved_position.split(',');
-
-				if (v1 === undefined || v2 === undefined)
-					throw new Error('Invalid vector: ' + saved_position);
-
-				const [v1_p, v2_p] = [parseInt(v1), parseInt(v2)];
-
-				if (isNaN(v1_p) || isNaN(v2_p))
-					throw new Error('Invalid vector values: ' + saved_position);
-
-				setPosition([v1_p, v2_p]);
-			}
-		} catch (error) {
-			console.error(`Error loading saved position: `, error);
-
-			localStorage.removeItem(LS_POS_KEY);
-		}
-	}, []);
-
-	// Load saved size
-	useEffect(() => {
-		try {
-			const saved_size = localStorage.getItem(LS_SIZE_KEY);
-			if (saved_size) {
-				const [v1, v2] = saved_size.split(',');
-
-				if (v1 === undefined || v2 === undefined)
-					throw new Error('Invalid vector: ' + saved_size);
-
-				const [v1_p, v2_p] = [parseInt(v1), parseInt(v2)];
-
-				if (isNaN(v1_p) || isNaN(v2_p))
-					throw new Error('Invalid vector values: ' + saved_size);
-
-				setWindowSize([v1_p, v2_p]);
-			}
-		} catch (error) {
-			console.error(`Error loading saved size: `, error);
-
-			localStorage.removeItem(LS_POS_KEY);
-		}
-	}, []);
-
-	// Save saved position
-	useUpdateEffect(() => {
-		localStorage.setItem(LS_POS_KEY, `${position[0]},${position[1]}`);
-	}, [position]);
-
-	// Save saved size
-	useUpdateEffect(() => {
-		localStorage.setItem(LS_SIZE_KEY, `${windowSize[0]},${windowSize[1]}`);
-	}, [windowSize]);
-
 	// Reset position
 	useEffect(() => {
 		if (!f9_pressed)
@@ -196,6 +181,8 @@ function Debug({
 
 	// Handlers
 	const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+		if (!matchMouseEvent(e.nativeEvent, MouseButton.Left)) return;
+
 		e.preventDefault();
 
 		setGrab({
@@ -263,7 +250,7 @@ function Debug({
 					}
 				}}
 			>
-				<div className="fixed pointer-events-none w-full h-full left-0 top-0 overflow-hidden z-999999">
+				<div className="fixed pointer-events-none w-full h-full left-0 top-0 overflow-hidden z-500">
 					<div
 						className={clsx(
 							"absolute font-jetbrains pointer-events-auto",
@@ -285,25 +272,40 @@ function Debug({
 							$onResize={handleResize}
 						>
 							<div
-								onWheel={handleWheel}
-								className="bg-[#1f1f1f] shadow-lg rounded-md border border-[#4b4b4b] w-full h-full overflow-hidden flex"
+								// onMouseDown={handleMouseDown}
+								className={clsx(
+									"flex flex-col w-full h-full",
+									"bg-[#1f1f1f] border border-[#4b4b4b] shadow-lg rounded-md"
+								)}
 							>
+								{label && (
+									<DebuggerLabel
+										label={label}
+									/>
+								)}
+
 								<div
-									ref={containerRef}
-									onMouseDown={handleMouseDown}
-									className=" cursor-grab w-full"
-									style={{
-										transform: `translateY(${-(scrollProgress * scrollHeight)}px)`
-									}}
+									onWheel={handleWheel}
+									className="w-full h-full overflow-hidden flex"
 								>
-									<div className="p-3 pl-5">
-										<ParseValue value={value} />
+									<div
+										ref={containerRef}
+										onMouseDown={handleMouseDown}
+										className="cursor-grab w-full"
+										style={{
+											transform: `translateY(${-(scrollProgress * scrollHeight)}px)`
+										}}
+									>
+										<div className="p-3 pl-5">
+											<ParseValue value={value} />
+										</div>
 									</div>
+									<ScrollBar
+										containerHeight={containerHeight}
+										scrollHeight={scrollHeight}
+									/>
 								</div>
-								<ScrollBar
-									containerHeight={containerHeight}
-									scrollHeight={scrollHeight}
-								/>
+
 							</div>
 						</ResizeableBox>
 					</div>

package/src/components/Debugger/DebuggerTerminal.tsx

@@ -3,6 +3,7 @@ import { assert, Optional, ReactUtils } from "@hrnec06/util";
 import useUpdateEffect from "../../hooks/useUpdateEffect";
 import useNamespacedId from "../../hooks/useNamespacedId";
 import z from "zod";
+import useLocalStorage from "../../hooks/useLocalStorage";
 
 const TERMINAL_NAMESPACE = "terminal";
 
@@ -73,11 +74,6 @@ class Terminal
 		this.history = history;
 	}
 
-	public getLsKey(): string
-	{
-		return "terminal." + this.id;
-	}
-
 	public clear(): Terminal
 	{
 		this.history[1]([]);
@@ -214,37 +210,6 @@ function TerminalContextProvider({
 		</TerminalContext.Provider>
 	)
 }
-
-/**
- * Returns the default history for a terminal
- */
-function getDefaultHistory(terminal: Terminal)
-{
-	try
-	{
-		const savedValue = localStorage.getItem(terminal.getLsKey());
-
-		const savedValueJSON = JSON.parse(savedValue ?? "[]");
-
-		const schema = z.array(z.object({
-			value: z.any(),
-			role: z.enum(LogRole),
-			type: z.enum(LogType)
-		}));
-
-		const parsed = schema.parse(savedValueJSON);
-
-		return parsed;
-	}
-	catch (error)
-	{
-		localStorage.removeItem(terminal.getLsKey());
-		console.error("Terminal data parse failed: ", error);
-
-		return [];
-	}
-}
-
 /**
  * Recursively browses the contexts to find a matching terminal
  */
@@ -304,22 +269,26 @@ function useTerminal(
 {
 	const id = useNamespacedId(TERMINAL_NAMESPACE);
 
-	const history = useState<LogItem[]>([]);
-	const inputHistory = useState<string[]>([]);
-
-	const terminal = useMemo(() => {
-		return new Terminal(id, name, history, inputHistory, onInput);
-	}, [name, history, onInput]);
+	const history = useLocalStorage<LogItem[]>(
+		"terminal." + id,
+		[],
+		z.array(z.object({
+			value: z.any(),
+			role: z.enum(LogRole),
+			type: z.enum(LogType)
+		}))
+	);
 
-	useEffect(() => {
-		const def = getDefaultHistory(terminal);
+	// const history = useState<LogItem[]>(storage);
+	const inputHistory = useState<string[]>([]);
 
-		history[1](def);
-	}, []);
+	const terminal = useMemo(() => 
+		new Terminal(id, name, history, inputHistory, onInput)
+	, [name, history, onInput]);
 
-	useUpdateEffect(() => {
-		localStorage.setItem(terminal.getLsKey(), JSON.stringify(history[0]));
-	}, [history]);
+	// useUpdateEffect(() => {
+	// 	setStorage(history[0]);
+	// }, [history]);
 
 	return terminal;
 }

package/src/components/Debugger/parser/DebugParser.tsx

@@ -1,3 +1,4 @@
+import { forwardRef, RefObject, useDeferredValue, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import useDebugger from "../DebuggerContext";
 import { matchPath } from "../DebuggerLogic";
 import { Terminal } from "../DebuggerTerminal";
@@ -5,46 +6,152 @@ import DebugTerminal from "./DebugTerminal";
 import ValueArray from "./ValueArray";
 import ValueBoolean from "./ValueBoolean";
 import ValueFunction from "./ValueFunction";
-import ValueKeyword from "./ValueKeyword";
 import ValueNumber from "./ValueNumber";
 import ValueObject from "./ValueObject";
 import ValueString from "./ValueString";
 import ValueSymbol from "./ValueSymbol";
+import { Nullable } from "@hrnec06/util";
+import ContextMenu from "../../ContextMenu/ContextMenu";
+import ValueConstant from "./ValueConstant";
+import useSyncRef from "../../../hooks/useSyncRef";
+import CTXM from "../../ContextMenu/ContextMenu.types";
+import clsx from "clsx";
+import useDebounce from "../../../hooks/useDebounce";
+import { useCTXMListener } from "../../ContextMenu/ContextMenuCtx";
 
-interface ParseValueProps {
+export interface ParseValueRef {
+	copyValue: string,
+	name?: string,
+	menu?: CTXM.ContextMenuSection,
+}
+
+interface ClassifyProps {
+	ref: React.Ref<ParseValueRef>,
 	value: unknown,
 	path?: string[]
 }
-export default function ParseValue({
+function Classify({
+	ref,
 	value,
 	path = []
-}: ParseValueProps) {
+}: ClassifyProps) {
 	const debug = useDebugger();
 
 	switch (typeof value) {
-		case 'string': return (<ValueString value={value} />);
+		case 'string': return (<ValueString ref={ref} value={value} />);
 		case 'bigint':
-		case 'number': return (<ValueNumber value={value} />);
-		case 'boolean': return (<ValueBoolean value={value} />);
-		case 'undefined': return (<ValueKeyword value={"undefined"} />);
-		case 'function': return (<ValueFunction value={value} />);
+		case 'number': return (<ValueNumber ref={ref} value={value} />);
+		case 'boolean': return (<ValueBoolean ref={ref} value={value} />);
+		case 'undefined': return (<ValueConstant ref={ref} value="undefined" />)
+		case 'function': return (<ValueFunction ref={ref} value={value} />);
 		case 'symbol': return (<ValueSymbol value={value} />)
 		case 'object': {
 			if (value === null)
-				return (<ValueKeyword value={"null"} />)
+				return (<ValueConstant ref={ref} value={"null"} />)
 
 			const isRootObject = path.length === 0;
 
 			const shouldBeExpanded = (isRootObject && debug.options.openRoot) || (matchPath(path, debug.paths.open) && !matchPath(path, debug.paths.exclude));
 
 			if (value instanceof Terminal)
-				return <DebugTerminal terminal={value} path={path} defaultExpanded={shouldBeExpanded} />
+				return <DebugTerminal ref={ref} terminal={value} path={path} defaultExpanded={shouldBeExpanded} />
 
 			if (Array.isArray(value)) {
-				return <ValueArray value={value} path={path} defaultExpanded={shouldBeExpanded} />
+				return <ValueArray ref={ref} value={value} path={path} defaultExpanded={shouldBeExpanded} />
 			}
 
-			return <ValueObject value={value} path={path} defaultExpanded={shouldBeExpanded} />
+			return <ValueObject ref={ref} value={value} path={path} defaultExpanded={shouldBeExpanded} />
 		}
 	}
-}
+}
+
+interface ParseValueProps {
+	value: unknown,
+	path?: string[],
+	/**
+	 * Children to be put before the parsed value
+	 */
+	children?: React.ReactNode
+}
+function ParseValue({
+	value,
+	path = [],
+	children
+}: ParseValueProps)
+{
+	const valueRef = useRef<ParseValueRef>(null);
+	const [localValue, setLocalValue] = useState<Nullable<ParseValueRef>>(null);
+	const syncedValueRef = useSyncRef(valueRef, setLocalValue);
+
+	return (
+		<DebugCTXMProvider
+			path={path}
+			ref={localValue}
+		>
+			{children}
+
+			<Classify
+				ref={syncedValueRef}
+				value={value}
+				path={path}
+			/>
+		</DebugCTXMProvider>
+	);
+}
+
+interface DebugCTXMProviderProps extends React.PropsWithChildren {
+	path: string[],
+	ref: Nullable<ParseValueRef>
+}
+export function DebugCTXMProvider({
+	path,
+	ref,
+	children
+}: DebugCTXMProviderProps)
+{
+	const ctxmLabel = useMemo(() => {
+		if (!path.length)
+			return "root";
+
+		return path.join('.');
+	}, [path]);
+
+	const handleCopy = ref === null
+		? undefined
+		: () => {
+			if (!ref) return;
+
+			navigator.clipboard.writeText(ref.copyValue);
+		};
+
+	return (
+		<ContextMenu
+			className={clsx(
+				"inline align-middle h-full",
+				"outline-sky-500 outline-offset-2",
+			)}
+
+			$autoGenerateWrapper
+			$id={ctxmLabel}
+			$inherit={(menu) => ({
+				parent: menu.id,
+				children: menu.menu
+			})}
+			$menu={[
+				[
+					{
+						id: 'copy',
+						label: "Copy",
+						description: ref?.name,
+						onClick: handleCopy
+					},
+				],
+				ref?.menu ?? null
+			]}
+		>
+			{children}
+		</ContextMenu>
+	)
+}
+
+export default ParseValue;

package/src/components/Debugger/parser/DebugTerminal.tsx

@@ -1,8 +1,8 @@
-import { createContext, useContext, useLayoutEffect, useRef, useState } from "react";
+import { createContext, forwardRef, useContext, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 import { LogItem, LogRole, LogType, Terminal } from "../DebuggerTerminal"
 import clsx from "clsx";
 import { KeyboardButton, matchBool, matchKeyEvent, matchMouseEvent, MouseButton, Optional } from "@hrnec06/util";
-import ParseValue from "./DebugParser";
+import ParseValue, { ParseValueRef } from "./DebugParser";
 import { ChevronRight, CircleAlert, SendIcon, TerminalIcon, Trash, TriangleAlert } from "lucide-react";
 import ResizeableBox from "../../ResizeableBox/ResizeableBox";
 import { Chevron_Toggle } from "../DebuggerSymbols";
@@ -28,10 +28,25 @@ interface DebugTerminalProps {
 	path: string[],
 	defaultExpanded?: boolean
 }
-export default function DebugTerminal({ terminal, path, defaultExpanded }: DebugTerminalProps)
-{
+const DebugTerminal = forwardRef<ParseValueRef, DebugTerminalProps>(({
+	terminal,
+	path,
+	defaultExpanded
+}, ref) => {
 	const [showing, setShowing] = useState(!!defaultExpanded);
 
+	useImperativeHandle(ref, () => ({
+		name: `Terminal ${terminal.name}`,
+		copyValue: terminal.getLog().reduce((prev, curr) => prev + `${curr.role === LogRole.Input ? '> ' : `${LogType[curr.type]}: `}${JSON.stringify(curr.value)}` + "\n", ""),
+		menu: [
+			{
+				id: "terminal-clear",
+				label: "Clear",
+				onClick: () => terminal.clear(),
+			}
+		]
+	}), [terminal.getLog()]);
+
 	const handleToggle = (value: boolean) => {
 		setShowing(value);
 	}
@@ -60,8 +75,8 @@ export default function DebugTerminal({ terminal, path, defaultExpanded }: Debug
 
 			<TerminalMain show={showing} />
 		</LocalTerminalContext.Provider>
-	)
-}
+	);
+});
 
 interface TerminalMainProps {
 	show: boolean
@@ -338,4 +353,6 @@ function TerminalInput()
 			</button>
 		</div>
 	)
-}
+}
+
+export default DebugTerminal;

package/src/components/Debugger/parser/ValueArray.tsx

@@ -1,23 +1,37 @@
-import React, { useLayoutEffect, useMemo, useState } from "react";
+import React, { forwardRef, useImperativeHandle, useLayoutEffect, useMemo, useState } from "react";
 import useDebugger from "../DebuggerContext";
 import { Char_Bracket, Char_Comma, Chevron_Toggle } from "../DebuggerSymbols";
 import ParseValueSimple from "./DebugParserSimple";
-import ParseValue from "./DebugParser";
+import ParseValue, { ParseValueRef } from "./DebugParser";
 
 interface ValueArrayProps {
 	value: unknown[],
 	path: string[],
 	defaultExpanded?: boolean
 }
-export default function ValueArray({
+const ValueArray = forwardRef<ParseValueRef, ValueArrayProps>(({
 	value,
 	path,
 	defaultExpanded = false
-}: ValueArrayProps) {
+}, ref) => {
 	const debug = useDebugger();
 
 	const [expanded, setExpanded] = useState(defaultExpanded);
 
+	useImperativeHandle(ref, () => ({
+		name: `Array (${value.length})`,
+		copyValue: JSON.stringify(value),
+		menu: [
+			{
+				id: "open-toggle",
+				label: expanded ? "Collapse" : "Expand",
+				onClick: () => {
+					setExpanded(!expanded);
+				}
+			}
+		]
+	}), [value, expanded]);
+
 	const children = useMemo(() => {
 		const children: React.ReactNode[] = [];
 		
@@ -106,7 +120,6 @@ export default function ValueArray({
 						onClick={() => setExpanded(true)}
 					>
 						<Char_Bracket text="[" />
-						{/* <span className="text-zinc-500">...</span> */}
 						{collapsedPreview}
 						<Char_Bracket text="]" />
 					</div>
@@ -114,7 +127,7 @@ export default function ValueArray({
 			}
 		</>
 	);
-}
+});
 
 interface CompactArrayItemProps {
 	value: unknown,
@@ -140,4 +153,6 @@ function CompactArrayItem({
 			{isLast && (<Char_Comma />)}
 		</>
 	)
-}
+}
+
+export default ValueArray;

package/src/components/Debugger/parser/ValueBoolean.tsx

@@ -1,10 +1,21 @@
+import { forwardRef, useImperativeHandle } from "react"
 import ValueKeyword from "./ValueKeyword"
+import { ParseValueRef } from "./DebugParser";
 
 interface ValueBooleanProps {
 	value: boolean
 }
-export default function ValueBoolean({
+const ValueBoolean = forwardRef<ParseValueRef, ValueBooleanProps>(({
 	value
-}: ValueBooleanProps) {
-	return <ValueKeyword value={value ? 'true' : 'false'} />
-}
+}, ref) => {
+	useImperativeHandle(ref, () => ({
+		name: "Boolean",
+		copyValue: value ? "true" : "false"
+	}), [value]);
+
+	return (
+		<ValueKeyword value={value ? 'true' : 'false'} />
+	)
+});
+
+export default ValueBoolean;

package/src/components/Debugger/parser/ValueConstant.tsx

@@ -0,0 +1,21 @@
+import { forwardRef, useImperativeHandle } from "react";
+import ValueKeyword from "./ValueKeyword";
+import { ParseValueRef } from "./DebugParser";
+
+interface ValueConstantProps {
+	value: string
+}
+const ValueConstant = forwardRef<ParseValueRef, ValueConstantProps>(({
+	value
+}, ref) => {
+	useImperativeHandle(ref, () => ({
+		name: value,
+		copyValue: value
+	}), [value]);
+
+	return (
+		<ValueKeyword value={value} />
+	)
+});
+
+export default ValueConstant;