@hrnec06/react_utils 1.6.0 → 1.7.1

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,148 @@ 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 || ref.copyValue === undefined)
+		? undefined
+		: () => 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,42 @@ 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, () => {
+		const logToString = (log: LogItem) => {
+			let value: string;
+
+			try
+			{
+				value = JSON.stringify(log.value);
+			}
+			catch (error)
+			{
+				value = `Error parsing value (${typeof log.value})`;
+			}
+
+			return `${log.role === LogRole.Input ? '> ' : `${LogType[log.type]}: `}${value}`;
+		}
+
+		return {
+			name: `Terminal ${terminal.name}`,
+			copyValue: terminal.getLog().reduce((prev, curr) => prev + logToString(curr) + "\n", ""),
+			menu: [
+				{
+					id: "terminal-clear",
+					label: "Clear",
+					onClick: () => terminal.clear(),
+				}
+			]
+		};
+	}, [terminal.getLog()]);
+
 	const handleToggle = (value: boolean) => {
 		setShowing(value);
 	}
@@ -60,8 +92,8 @@ export default function DebugTerminal({ terminal, path, defaultExpanded }: Debug
 
 			<TerminalMain show={showing} />
 		</LocalTerminalContext.Provider>
-	)
-}
+	);
+});
 
 interface TerminalMainProps {
 	show: boolean
@@ -338,4 +370,6 @@ function TerminalInput()
 			</button>
 		</div>
 	)
-}
+}
+
+export default DebugTerminal;

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

@@ -1,23 +1,46 @@
-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";
+import { Optional } from "@hrnec06/util";
 
 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, () => {
+		let copyValue: Optional<string> = undefined;
+		try
+		{
+			copyValue = JSON.stringify(value);
+		} catch {}
+
+		return {
+			name: `Array (${value.length})`,
+			copyValue: copyValue,
+			menu: [
+				{
+					id: "open-toggle",
+					label: expanded ? "Collapse" : "Expand",
+					onClick: () => {
+						setExpanded(!expanded);
+					}
+				}
+			]
+		};
+	}, [value, expanded]);
+
 	const children = useMemo(() => {
 		const children: React.ReactNode[] = [];
 		
@@ -106,7 +129,6 @@ export default function ValueArray({
 						onClick={() => setExpanded(true)}
 					>
 						<Char_Bracket text="[" />
-						{/* <span className="text-zinc-500">...</span> */}
 						{collapsedPreview}
 						<Char_Bracket text="]" />
 					</div>
@@ -114,7 +136,7 @@ export default function ValueArray({
 			}
 		</>
 	);
-}
+});
 
 interface CompactArrayItemProps {
 	value: unknown,
@@ -140,4 +162,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;

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

@@ -1,10 +1,18 @@
+import { forwardRef, useImperativeHandle } from "react";
+import { ParseValueRef } from "./DebugParser";
+
 interface ValueFunctionProps {
 	// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 	value: Function
 }
-export default function ValueFunction({
+const ValueFunction = forwardRef<ParseValueRef, ValueFunctionProps>(({
 	value
-}: ValueFunctionProps) {
+}, ref) => {
+	useImperativeHandle(ref, () => ({
+		name: "Function",
+		copyValue: value.toString()
+	}), [value]);
+
 	const argsMatch = value.toString().match(/^[^(]*\(\s*([^)]*)\)/);
 	let args: string = '';
 
@@ -12,14 +20,18 @@ export default function ValueFunction({
 		args = argsMatch[1]!;
 	}
 
+	const displayValue = `${value.name}(${args})`;
+
 	return (
 		<>
 			<span className="text-[#f2824a]">
 				{'ƒ '}
 			</span>
 			<span className="text-white">
-				{`${value.name}(${args})`}
+				{displayValue}
 			</span>
 		</>
-	)
-}
+	);
+});
+
+export default ValueFunction;

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

@@ -1,12 +1,22 @@
+import { forwardRef, useImperativeHandle } from "react"
+import { ParseValueRef } from "./DebugParser";
+
 interface ValueNumberProps {
 	value: number | bigint | string
 }
-export default function ValueNumber({
+const ValueNumber = forwardRef<ParseValueRef, ValueNumberProps>(({
 	value
-}: ValueNumberProps) {
+}, ref) => {
+	useImperativeHandle(ref, () => ({
+		name: "Number",
+		copyValue: value.toString()
+	}), [value]);
+
 	return (
 		<span className="text-[#a7ce9b]">
 			{value}
 		</span>
-	)
-}
+	);
+});
+
+export default ValueNumber;

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

@@ -1,25 +1,49 @@
-import React, { useLayoutEffect, useMemo, useState } from "react";
+import React, { forwardRef, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import useDebugger from "../DebuggerContext";
-import { entries, keys } from "@hrnec06/util";
+import { entries, keys, Nullable, Optional } from "@hrnec06/util";
 import { Char_Bracket, Char_Colon, Char_Comma, Chevron_Toggle } from "../DebuggerSymbols";
-import ParseValue from "./DebugParser";
+import ParseValue, { DebugCTXMProvider, ParseValueRef } from "./DebugParser";
+import useSyncRef from "../../../hooks/useSyncRef";
+import { useCTXMListener } from "../../ContextMenu/ContextMenuCtx";
 
 interface ValueObjectProps {
 	value: object,
 	path: string[],
 	defaultExpanded?: boolean
 }
-export default function ValueObject({
+const ValueObject = forwardRef<ParseValueRef, ValueObjectProps>(({
 	value,
 	path,
 	defaultExpanded = false
-}: ValueObjectProps) {
+}, ref) => {
 	const debug = useDebugger();
 
 	const [expanded, setExpanded] = useState(defaultExpanded);
 
 	const objectEntries = entries(value);
 
+	useImperativeHandle(ref, () => {
+		let copyValue: Optional<string> = undefined;
+		try
+		{
+			copyValue = JSON.stringify(value);
+		} catch {}
+
+		return {
+			name: `Object {${objectEntries.length}}`,
+			copyValue: copyValue,
+			menu: [
+				{
+					id: "open-toggle",
+					label: expanded ? "Collapse" : "Expand",
+					onClick: () => {
+						setExpanded(!expanded);
+					}
+				}
+			]
+		};
+	}, [value, expanded]);
+
 	const collapsedPreview = useMemo(() => {
 		const children: React.ReactNode[] = [];
 		const keyList = keys(value);
@@ -48,6 +72,8 @@ export default function ValueObject({
 		setExpanded(state);
 	}
 
+	const ctxmListener = useCTXMListener();
+
 	return (
 		<>
 			<Chevron_Toggle expanded={expanded} onToggle={handleExpand} />
@@ -65,16 +91,13 @@ export default function ValueObject({
 							{
 								objectEntries.map(([key, value], ix) => {
 									return (
-										<li key={ix}>
-											<ValueObjectKey text={key} />
-											<Char_Colon />
-
-											<ParseValue value={value} path={[...path, `${key}`]} />
-
-											{ix < objectEntries.length - 1 && (
-												<Char_Comma />
-											)}
-										</li>
+										<ValueObjectEntry
+											key={ix}
+											entryKey={key}
+											value={value}
+											path={path}
+											isLast={ix === objectEntries.length - 1}
+										/>
 									);
 								})
 							}
@@ -97,7 +120,7 @@ export default function ValueObject({
 			}
 		</>
 	);
-}
+});
 
 interface ValueObjectKeyProps {
 	text: string,
@@ -110,4 +133,33 @@ function ValueObjectKey({
 			{text}
 		</span>
 	)
-}
+}
+
+interface ValueObjectEntryProps {
+	entryKey: string,
+	value: unknown,
+	path: string[],
+	isLast: boolean
+}
+function ValueObjectEntry({
+	entryKey: key,
+	value,
+	path,
+	isLast
+}: ValueObjectEntryProps)
+{
+	return (
+		<li>
+			<ParseValue value={value} path={[...path, `${key}`]}>
+				<ValueObjectKey text={key} />
+				<Char_Colon />
+			</ParseValue>
+
+			{!isLast && (
+				<Char_Comma />
+			)}
+		</li>
+	)
+}
+
+export default ValueObject;

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

@@ -1,16 +1,25 @@
 import { padString } from "@hrnec06/util"
+import { forwardRef, useImperativeHandle } from "react"
+import { ParseValueRef } from "./DebugParser";
 
 interface ValueStringProps {
 	value: string,
 	noEncase?: boolean
 }
-export default function ValueString({
+const ValueString = forwardRef<ParseValueRef, ValueStringProps>(({
 	value,
 	noEncase = false
-}: ValueStringProps) {
+}, ref) => {
+	useImperativeHandle(ref, () => ({
+		name: "String",
+		copyValue: value
+	}), [value]);
+
 	return (
 		<span className="text-[#ce9178]">
 			{padString(value, noEncase ? 0 : 1, '"')}
 		</span>
-	)
-}
+	);
+});
+
+export default ValueString;

package/src/components/ResizeableBox/ResizeableBox.tsx

@@ -3,7 +3,7 @@ import clsx from "clsx";
 import { useEffect } from "react";
 import DragAreas from "./DragAreas";
 import useSignal from "../../hooks/useSignal";
-import useUpdatedRef from "../../hooks/useUpdatedRef";
+import useUpdatedRef from "../../hooks/useLatestRef";
 import useListener from "../../hooks/useListener";
 import { ResizeableBoxContext } from "./ResizeableBoxContext";
 import RB from "./ResizeableBox.types";

package/src/hooks/useDebounce.ts

@@ -0,0 +1,26 @@
+import { useCallback, useLayoutEffect, useState } from "react";
+
+export default function useDebounce<T>(value: T, delay: number, updateOnUnmount: boolean = false): T
+{
+	const [debounced, setValue] = useState(value);
+
+	const update = useCallback((value: T) => setValue(value), []);
+
+	useLayoutEffect(() => {
+		let updated = false;
+
+		const t = setTimeout(() => {
+			update(value);
+			updated = true;
+		}, delay);
+
+		return () => {
+			clearTimeout(t);
+
+			if (!updated && updateOnUnmount)
+				update(value);
+		}
+	}, [value]);
+
+	return debounced;
+}

package/src/hooks/useEvent.ts

@@ -0,0 +1,15 @@
+import { useCallback } from "react";
+import useLatestRef from "./useLatestRef";
+
+export default function useEvent<
+	F extends (...args: any[]) => any,
+	P extends any[] = Parameters<F>,
+	R = ReturnType<F>,
+> (
+	cb: (...args: P) => R
+)
+{
+	const cache = useLatestRef(cb);
+
+	return useCallback((...args: P) => cache.current(...args), [cache]);
+}

package/src/hooks/useLatestRef.ts

@@ -0,0 +1,12 @@
+import { useLayoutEffect, useRef } from "react";
+import useUpdateEffect from "./useUpdateEffect";
+
+export default function useLatestRef<V>(value: V): React.RefObject<V> {
+	const ref = useRef(value);
+
+	useLayoutEffect(() => {
+		ref.current = value;
+	});
+
+	return ref;
+}

package/src/hooks/useSyncRef.ts

@@ -0,0 +1,17 @@
+import { Nullable } from '@hrnec06/util'
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import useEvent from './useEvent';
+
+export default function useSyncRef<T>(
+	ref: React.RefObject<T>,
+	state: (value: T) => void
+)
+{
+	const syncRefs = useEvent((value: T) => {
+		ref.current = value;
+		
+		state(value);
+	});
+
+	return syncRefs;
+}