@hrnec06/react_utils 1.7.0 → 1.7.1

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.1",
+  "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[] = [];