@hrnec06/react_utils 1.7.0 → 1.7.2

package/README.md

@@ -0,0 +1 @@
+A source only React Library for private use.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hrnec06/react_utils",
-  "version": "1.7.0",
-  "description": "A debugger component for react.",
+  "version": "1.7.2",
+  "description": "React utilities",
   "exports": {
     ".": "./src/index.ts"
   },

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

@@ -20,7 +20,7 @@ import useDebounce from "../../../hooks/useDebounce";
 import { useCTXMListener } from "../../ContextMenu/ContextMenuCtx";
 
 export interface ParseValueRef {
-	copyValue: string,
+	copyValue?: string,
 	name?: string,
 	menu?: CTXM.ContextMenuSection,
 }
@@ -116,13 +116,9 @@ export function DebugCTXMProvider({
 		return path.join('.');
 	}, [path]);
 
-	const handleCopy = ref === null
+	const handleCopy = (ref === null || ref.copyValue === undefined)
 		? undefined
-		: () => {
-			if (!ref) return;
-
-			navigator.clipboard.writeText(ref.copyValue);
-		};
+		: () => navigator.clipboard.writeText(ref.copyValue!);
 
 	return (
 		<ContextMenu

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

@@ -35,17 +35,34 @@ const DebugTerminal = forwardRef<ParseValueRef, DebugTerminalProps>(({
 }, 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: [
+	useImperativeHandle(ref, () => {
+		const logToString = (log: LogItem) => {
+			let value: string;
+
+			try
+			{
+				value = JSON.stringify(log.value);
+			}
+			catch (error)
 			{
-				id: "terminal-clear",
-				label: "Clear",
-				onClick: () => terminal.clear(),
+				value = `Error parsing value (${typeof log.value})`;
 			}
-		]
-	}), [terminal.getLog()]);
+
+			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);

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

@@ -3,6 +3,7 @@ import useDebugger from "../DebuggerContext";
 import { Char_Bracket, Char_Comma, Chevron_Toggle } from "../DebuggerSymbols";
 import ParseValueSimple from "./DebugParserSimple";
 import ParseValue, { ParseValueRef } from "./DebugParser";
+import { Optional } from "@hrnec06/util";
 
 interface ValueArrayProps {
 	value: unknown[],
@@ -18,19 +19,27 @@ const ValueArray = forwardRef<ParseValueRef, ValueArrayProps>(({
 
 	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);
+	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]);
+			]
+		};
+	}, [value, expanded]);
 
 	const children = useMemo(() => {
 		const children: React.ReactNode[] = [];

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

@@ -1,6 +1,6 @@
 import React, { forwardRef, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import useDebugger from "../DebuggerContext";
-import { entries, keys, Nullable } from "@hrnec06/util";
+import { entries, keys, Nullable, Optional } from "@hrnec06/util";
 import { Char_Bracket, Char_Colon, Char_Comma, Chevron_Toggle } from "../DebuggerSymbols";
 import ParseValue, { DebugCTXMProvider, ParseValueRef } from "./DebugParser";
 import useSyncRef from "../../../hooks/useSyncRef";
@@ -22,19 +22,27 @@ const ValueObject = forwardRef<ParseValueRef, ValueObjectProps>(({
 
 	const objectEntries = entries(value);
 
-	useImperativeHandle(ref, () => ({
-		name: `Object {${objectEntries.length}}`,
-		copyValue: JSON.stringify(value),
-		menu: [
-			{
-				id: "open-toggle",
-				label: expanded ? "Collapse" : "Expand",
-				onClick: () => {
-					setExpanded(!expanded);
+	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]);
+			]
+		};
+	}, [value, expanded]);
 
 	const collapsedPreview = useMemo(() => {
 		const children: React.ReactNode[] = [];

package/src/components/Dialog/DialogBackdrop.tsx

@@ -2,6 +2,8 @@ import clsx from "clsx";
 import useDialog from "./DialogContext";
 import useTransition, { transitionDataAttributes } from "../../hooks/useTransition";
 import { useRef } from "react";
+import { useSyncRefAuto } from "../../hooks/useSyncRef";
+import { Nullable } from "@hrnec06/util";
 
 interface DialogBackdropProps extends Omit<React.HTMLProps<HTMLDivElement>, 'children'>
 {
@@ -15,9 +17,9 @@ export default function DialogBackdrop({
 {
 	const dialog = useDialog();
 
-	const divRef = useRef<HTMLDivElement>(null);
+	const { ref, value } = useSyncRefAuto<Nullable<HTMLDivElement>>(null);
 
-	const [visible, transitionData] = useTransition($transition, divRef.current, dialog.open);
+	const [visible, transitionData] = useTransition($transition, value, dialog.open);
 	
 	if (!visible)
 		return undefined;
@@ -33,7 +35,7 @@ export default function DialogBackdrop({
 			{...props}
 			{...transitionDataAttributes(transitionData)}
 
-			ref={divRef}
+			ref={ref}
 			
 			onClick={handleClick}
 

package/src/components/Dialog/DialogPanel.tsx

@@ -1,7 +1,9 @@
 import clsx from "clsx";
 import useDialog from "./DialogContext";
 import useTransition, { transitionDataAttributes } from "../../hooks/useTransition";
-import { useRef } from "react";
+import { useRef, useState } from "react";
+import { Nullable } from "@hrnec06/util";
+import useSyncRef, { useSyncRefAuto } from "../../hooks/useSyncRef";
 
 interface DialogPanelProps extends React.HTMLProps<HTMLDivElement> {
 	$transition?: boolean
@@ -13,9 +15,9 @@ export default function DialogPanel({
 {
 	const dialog = useDialog();
 
-	const divRef = useRef<HTMLDivElement>(null);
+	const { value, ref } = useSyncRefAuto<Nullable<HTMLDivElement>>(null);
 
-	const [visible, transitionData] = useTransition($transition, divRef.current, dialog.open);
+	const [visible, transitionData] = useTransition($transition, value, dialog.open);
 
 	if (!visible)
 		return undefined;
@@ -25,7 +27,7 @@ export default function DialogPanel({
 			{...props}
 			{...transitionDataAttributes(transitionData)}
 			
-			ref={divRef}
+			ref={ref}
 
 			className={props.className}
 		>

package/src/hooks/useSyncRef.ts

@@ -14,4 +14,13 @@ export default function useSyncRef<T>(
 	});
 
 	return syncRefs;
+}
+
+export function useSyncRefAuto<T>(value: T)
+{
+	const ref = useRef(value);
+	const [localValue, setLocalValue] = useState(value);
+	const syncRef = useSyncRef(ref, setLocalValue);
+
+	return { value: localValue, ref: syncRef };
 }

package/src/index.ts

@@ -10,6 +10,10 @@ import useFlags from "./hooks/useFlags";
 import useNamespacedId from "./hooks/useNamespacedId";
 import useTransition from "./hooks/useTransition";
 import useLocalStorage from "./hooks/useLocalStorage";
+import useDebounce from "./hooks/useDebounce";
+import useEvent from "./hooks/useEvent";
+import useLatestRef from "./hooks/useLatestRef";
+import useSyncRef, { useSyncRefAuto } from "./hooks/useSyncRef";
 
 import useSignal, { Signal } from "./hooks/useSignal";
 import useLazySignal, { LazySignal } from "./hooks/useLazySignal";
@@ -22,10 +26,6 @@ import Dialog from "./components/Dialog/Dialog";
 import ContextMenu from "./components/ContextMenu/ContextMenu";
 
 import * as util from './lib/utils';
-import useDebounce from "./hooks/useDebounce";
-import useEvent from "./hooks/useEvent";
-import useLatestRef from "./hooks/useLatestRef";
-import useSyncRef from "./hooks/useSyncRef";
 
 
 export {
@@ -42,6 +42,7 @@ export {
 	useLocalStorage,
 	useNamespacedId,
 	useSyncRef,
+	useSyncRefAuto,
 	useTransition,
 	useUpdateEffect,
 	useUUID,