@hrnec06/react_utils 1.2.0 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hrnec06/react_utils",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "A debugger component for react.",
   "exports": {
     ".": "./src/index.tsx"

package/src/debugger/Debugger.tsx

@@ -3,11 +3,11 @@ import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import {DebuggerContext} from "./DebuggerContext";
 import clsx from "clsx";
 import ResizeBorder from "./DebuggerWindowResize";
-import ParseValue from "./DebugParser";
 import ScrollBar from "./DebuggerScrollBar";
 import useKeyListener from "../hooks/useKeyListener";
 import useUpdateEffect from "../hooks/useUpdateEffect";
 import useUpdatedRef from "../hooks/useUpdatedRef";
+import ParseValue from "./parser/DebugParser";
 
 interface DebugProps {
 	value: unknown,
@@ -182,7 +182,7 @@ export default function Debug({
 
 	const calculateScrollHeight = () => {
 		if (!containerRef.current) return 0;
-	
+
 		return containerRef.current.scrollHeight - calculateContainerHeight();
 	}
 
@@ -206,7 +206,11 @@ export default function Debug({
 	const handleExpandChange = (path: string[], state: boolean) => {
 		if (!containerRef.current) return;
 
-		setScrollProgress(minmax((scrollProgress * scrollHeight) / calculateScrollHeight(), 0, 1));
+		let newScrollProgress = minmax((scrollProgress * scrollHeight) / calculateScrollHeight(), 0, 1);
+		if (isNaN(newScrollProgress))
+			newScrollProgress = 0;
+
+		setScrollProgress(newScrollProgress);
 
 		updateScrollHeight();
 	}
@@ -271,7 +275,7 @@ export default function Debug({
 
 					<div
 						onWheel={handleWheel}
-						className="bg-[#1f1f1f] shadow-lg rounded-md border border-primary-400 w-full h-full overflow-hidden flex"
+						className="bg-[#1f1f1f] shadow-lg rounded-md border border-[#4b4b4b] w-full h-full overflow-hidden flex"
 					>
 						<div
 							ref={containerRef}

package/src/debugger/DebuggerScrollBar.tsx

@@ -85,17 +85,17 @@ export default function ScrollBar({
 	}
 
 	return (
-		<div className="p-1 border-l border-l-primary-600">
+		<div className="p-1 border-l border-l-[#2b2b2b]">
 			<div
 				onMouseDown={handleWraperMouseDown}
 				ref={wrapperRef}
-				className="h-full flex-shrink-0"
+				className="h-full shrink-0"
 			>
 				{debug.scroll.isScrollable && wrapperHeight > 0 && (
 					<div
 						onMouseDown={handleMouseDown}
 
-						className="bg-primary-500 hover:bg-primary-400 w-2 rounded-lg"
+						className="bg-[#3b3b3b] hover:bg-[#4b4b4b] w-2 rounded-lg"
 						style={{
 							transform: `translateY(${barTop}px)`,
 							height: `${barHeight}px`

package/src/debugger/DebuggerSymbols.tsx

@@ -53,7 +53,7 @@ export function Chevron_Toggle({
 			{
 				<ChevronDown
 					className={clsx(
-						"size-4 text-primary-400 hover:text-zinc-500",
+						"size-4 text-[#4b4b4b] hover:text-zinc-500",
 						!expanded && '-rotate-90'
 					)}
 				/>

package/src/debugger/parser/DebugParser.tsx

@@ -0,0 +1,45 @@
+import useDebugger from "../DebuggerContext";
+import { matchPath } from "../DebuggerLogic";
+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";
+
+interface ParseValueProps {
+	value: unknown,
+	path?: string[]
+}
+export default function ParseValue({
+	value,
+	path = []
+}: ParseValueProps) {
+	const debug = useDebugger();
+
+	switch (typeof value) {
+		case 'string': return (<ValueString 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 'symbol': return (<ValueSymbol value={value} />)
+		case 'object': {
+			if (value === null)
+				return (<ValueKeyword value={"null"} />)
+
+			const isRootObject = path.length === 0;
+
+			const shouldBeExpanded = (isRootObject && debug.options.openRoot) || (matchPath(path, debug.paths.open) && !matchPath(path, debug.paths.exclude));
+
+			if (Array.isArray(value)) {
+				return <ValueArray value={value} path={path} defaultExpanded={shouldBeExpanded} />
+			}
+
+			return <ValueObject value={value} path={path} defaultExpanded={shouldBeExpanded} />
+		}
+	}
+}

package/src/debugger/parser/DebugParserSimple.tsx

@@ -0,0 +1,53 @@
+import ValueBoolean from "./ValueBoolean";
+import ValueFunction from "./ValueFunction";
+import ValueKeyword from "./ValueKeyword";
+import ValueNumber from "./ValueNumber";
+import ValueString from "./ValueString";
+import ValueSymbol from "./ValueSymbol";
+
+interface ParseValueSimpleProps {
+	value: unknown
+}
+export default function ParseValueSimple({
+	value
+}: ParseValueSimpleProps): React.ReactNode {
+	const MAX_LENGTH = 16;
+
+	switch (typeof value) {
+		case 'bigint':
+		case 'number': {
+			const numStr = value.toString();
+
+			if (numStr.length > MAX_LENGTH)
+				return <ValueKeyword value={typeof value} />;
+
+			return <ValueNumber value={value} />
+		}
+		case 'boolean': return <ValueBoolean value={value} />
+		case 'function': return <ValueFunction value={value} />
+		case 'object': {
+			if (value === null)
+				return <ValueKeyword value="null" />
+
+			const className = Object.getPrototypeOf(value) !== Object.prototype ? value.constructor.name : null;
+
+			if (className === null || className.length > MAX_LENGTH)
+				return <ValueKeyword value="object" />
+
+			return (<span className="text-white">{className}</span>);
+		}
+		case 'string': {
+			if (value.length > MAX_LENGTH)
+				return <ValueString value="string" noEncase />
+
+			return <ValueString value={value} />;
+		}
+		case 'symbol': {
+			if (!value.description || value.description.length > MAX_LENGTH)
+				return <ValueKeyword value="Symbol" />
+
+			return <ValueSymbol value={value} />
+		}
+		case 'undefined': return <ValueKeyword value="undefined" />
+	}
+}

package/src/debugger/parser/ValueArray.tsx

@@ -0,0 +1,143 @@
+import React, { 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";
+
+interface ValueArrayProps {
+	value: unknown[],
+	path: string[],
+	defaultExpanded?: boolean
+}
+export default function ValueArray({
+	value,
+	path,
+	defaultExpanded = false
+}: ValueArrayProps) {
+	const debug = useDebugger();
+
+	const [expanded, setExpanded] = useState(defaultExpanded);
+
+	const children = useMemo(() => {
+		const children: React.ReactNode[] = [];
+		
+		let ix = 0;
+
+		while (ix < value.length) {
+			const nextTarget = Math.min(ix + debug.options.compactArrays, value.length);
+
+			children.push(
+				<li key={ix}>
+					{
+						(() => {
+							const children: React.ReactNode[] = [];
+
+							for (;ix < nextTarget; ix++) {
+								children.push(
+									<CompactArrayItem
+										key={ix}
+										value={value[ix]}
+										path={[...path, `${ix}`]}
+										isLast={ix < value.length - 1}
+									/>
+								);
+							}
+
+							return children;
+						})()
+					}
+				</li>
+			);
+
+			ix = nextTarget;
+		}
+
+		return children;
+	}, [debug.options.compactArrays, value]);
+
+	const collapsedPreview = useMemo(() => {
+		const children: React.ReactNode[] = [];
+
+		for (let i = 0; i < Math.min(value.length, 6); i++) {
+			children.push(
+				<CompactArrayItem
+					key={i}
+					value={value[i]}
+					path={path}
+					isLast={i < value.length - 1}
+					simple
+				/>
+			);
+		}
+
+		if (value.length > 6)
+			children.push(<span key={'rest'} className="text-zinc-500">...</span>);
+
+		return children;
+	}, [value]);
+
+	useLayoutEffect(() => {
+		debug.event.expand(path, expanded);
+	}, [expanded]);
+
+	const handleExpand = (state: boolean) => {
+		setExpanded(state);
+	}
+
+	return (
+		<>
+			<Chevron_Toggle expanded={expanded} onToggle={handleExpand} />
+
+			<span className="text-white" >{`(${value.length}) `}</span>
+			{
+				expanded ? (
+					<>
+						<Char_Bracket text="[" />
+
+						<ul className="pl-4 ml-1 border-l border-l-[#4b4b4b]">
+							{children}
+						</ul>
+
+						<Char_Bracket text="]" />
+					</>
+				) : (
+					<div
+						className="inline-block cursor-pointer"
+						onClick={() => setExpanded(true)}
+					>
+						<Char_Bracket text="[" />
+						{/* <span className="text-zinc-500">...</span> */}
+						{collapsedPreview}
+						<Char_Bracket text="]" />
+					</div>
+				)
+			}
+		</>
+	);
+}
+
+interface CompactArrayItemProps {
+	value: unknown,
+	isLast: boolean,
+	path: string[],
+	simple?: boolean
+}
+function CompactArrayItem({
+	value,
+	isLast,
+	path,
+	simple
+}: CompactArrayItemProps)
+{
+	return (
+		<>
+			{
+				!simple
+					? <ParseValue value={value} path={path} />
+					: <ParseValueSimple value={value} />
+			}
+
+			{isLast && (<Char_Comma />)}
+		</>
+	)
+}

package/src/debugger/parser/ValueBoolean.tsx

@@ -0,0 +1,10 @@
+import ValueKeyword from "./ValueKeyword"
+
+interface ValueBooleanProps {
+	value: boolean
+}
+export default function ValueBoolean({
+	value
+}: ValueBooleanProps) {
+	return <ValueKeyword value={value ? 'true' : 'false'} />
+}

package/src/debugger/parser/ValueFunction.tsx

@@ -0,0 +1,25 @@
+interface ValueFunctionProps {
+	// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+	value: Function
+}
+export default function ValueFunction({
+	value
+}: ValueFunctionProps) {
+	const argsMatch = value.toString().match(/^[^(]*\(\s*([^)]*)\)/);
+	let args: string = '';
+
+	if (argsMatch && argsMatch.length > 1) {
+		args = argsMatch[1]!;
+	}
+
+	return (
+		<>
+			<span className="text-[#f2824a]">
+				{'ƒ '}
+			</span>
+			<span>
+				{`${value.name}(${args})`}
+			</span>
+		</>
+	)
+}

package/src/debugger/parser/ValueKeyword.tsx

@@ -0,0 +1,12 @@
+interface ValueKeywordProps {
+	value: string
+}
+export default function ValueKeyword({
+	value
+}: ValueKeywordProps) {
+	return (
+		<span className="text-[#439ccb]">
+			{value}
+		</span>
+	)
+}

package/src/debugger/parser/ValueNumber.tsx

@@ -0,0 +1,12 @@
+interface ValueNumberProps {
+	value: number | bigint
+}
+export default function ValueNumber({
+	value
+}: ValueNumberProps) {
+	return (
+		<span className="text-[#a7ce9b]">
+			{value}
+		</span>
+	)
+}

package/src/debugger/parser/ValueObject.tsx

@@ -0,0 +1,113 @@
+import React, { useLayoutEffect, useMemo, useState } from "react";
+import useDebugger from "../DebuggerContext";
+import { entries, keys } from "@hrnec06/util";
+import { Char_Bracket, Char_Colon, Char_Comma, Chevron_Toggle } from "../DebuggerSymbols";
+import ParseValue from "./DebugParser";
+
+interface ValueObjectProps {
+	value: object,
+	path: string[],
+	defaultExpanded?: boolean
+}
+export default function ValueObject({
+	value,
+	path,
+	defaultExpanded = false
+}: ValueObjectProps) {
+	const debug = useDebugger();
+
+	const [expanded, setExpanded] = useState(defaultExpanded);
+
+	const objectEntries = entries(value);
+
+	const collapsedPreview = useMemo(() => {
+		const children: React.ReactNode[] = [];
+		const keyList = keys(value);
+
+		for (let i = 0; i < Math.min(keyList.length, 6); i++) {
+			children.push(
+				<React.Fragment key={i}>
+					<ValueObjectKey text={keyList[i]!} />
+					{i < keyList.length - 1 && <Char_Comma />}
+				</React.Fragment>
+			);
+		}
+
+		if (keyList.length > 6)
+			children.push(<span key={'rest'} className="text-zinc-500">...</span>);
+
+		return children;
+	}, [value]);
+
+	useLayoutEffect(() => {
+		debug.event.expand(path, expanded);
+	}, [expanded]);
+
+	
+	const handleExpand = (state: boolean) => {
+		setExpanded(state);
+	}
+
+	return (
+		<>
+			<Chevron_Toggle expanded={expanded} onToggle={handleExpand} />
+
+			{
+				Object.getPrototypeOf(value) !== Object.prototype && <span className="text-white">({value.constructor.name}) </span>
+			}
+
+			{
+				expanded ? (
+					<>
+						<Char_Bracket text="{" />
+
+						<ul className="pl-4 ml-1 border-l border-l-[#4b4b4b]">
+							{
+								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>
+									);
+								})
+							}
+						</ul>
+
+						<Char_Bracket text="}" />
+					</>
+				) : (
+					<div
+						className="inline-block cursor-pointer"
+						onClick={() => setExpanded(true)}
+					>
+						<Char_Bracket text="{" />
+						{' '}
+						{collapsedPreview}
+						{' '}
+						<Char_Bracket text="}" />
+					</div>
+				)
+			}
+		</>
+	);
+}
+
+interface ValueObjectKeyProps {
+	text: string,
+}
+function ValueObjectKey({
+	text
+}: ValueObjectKeyProps) {
+	return (
+		<span className="text-[#9CDCF0]">
+			{text}
+		</span>
+	)
+}

package/src/debugger/parser/ValueString.tsx

@@ -0,0 +1,16 @@
+import { padString } from "@hrnec06/util"
+
+interface ValueStringProps {
+	value: string,
+	noEncase?: boolean
+}
+export default function ValueString({
+	value,
+	noEncase = false
+}: ValueStringProps) {
+	return (
+		<span className="text-[#ce9178]">
+			{padString(value, noEncase ? 0 : 1, '"')}
+		</span>
+	)
+}

package/src/debugger/parser/ValueSymbol.tsx

@@ -0,0 +1,20 @@
+import { Char_Bracket } from "../DebuggerSymbols"
+import ValueKeyword from "./ValueKeyword"
+
+interface ValueSymbolProps {
+	value: symbol
+}
+export default function ValueSymbol({
+	value
+}: ValueSymbolProps) {
+	return (
+		<>
+			<ValueKeyword value="Symbol" />
+			<Char_Bracket text="(" />
+			<span>
+				{value.description}
+			</span>
+			<Char_Bracket text=")" />
+		</>
+	)
+}

package/src/debugger/DebugParser.tsx

@@ -1,401 +0,0 @@
-import { useLayoutEffect, useMemo, useState } from "react";
-import useDebugger from "./DebuggerContext";
-import { matchPath } from "./DebuggerLogic";
-import { entries, keys, padString } from "@hrnec06/util";
-import React from "react";
-import { Char_Bracket, Char_Colon, Char_Comma, Chevron_Toggle } from "./DebuggerSymbols";
-
-interface ParseValueProps {
-	value: unknown,
-	path?: string[]
-}
-export default function ParseValue({
-	value,
-	path = []
-}: ParseValueProps) {
-	const debug = useDebugger();
-
-	switch (typeof value) {
-		case 'string': return (<Value_String value={value} />);
-		case 'bigint':
-		case 'number': return (<Value_Number value={value} />);
-		case 'boolean': return (<Value_Boolean value={value} />);
-		case 'undefined': return (<Value_Keyword value={"undefined"} />);
-		case 'function': return (<Value_Function value={value} />);
-		case 'symbol': return (<Value_Symbol value={value} />)
-		case 'object': {
-			if (value === null)
-				return (<Value_Keyword value={"null"} />)
-
-			const isRootObject = path.length === 0;
-
-			const shouldBeExpanded = (isRootObject && debug.options.openRoot) || (matchPath(path, debug.paths.open) && !matchPath(path, debug.paths.exclude));
-
-			if (Array.isArray(value)) {
-				return <Value_Array value={value} path={path} defaultExpanded={shouldBeExpanded} />
-			}
-
-			return <Value_Object value={value} path={path} defaultExpanded={shouldBeExpanded} />
-		}
-	}
-}
-
-interface Value_String_Props {
-	value: string,
-	noEncase?: boolean
-}
-function Value_String({
-	value,
-	noEncase = false
-}: Value_String_Props) {
-	return (
-		<span className="text-[#ce9178]">
-			{padString(value, noEncase ? 0 : 1, '"')}
-		</span>
-	)
-}
-
-interface Value_Number_Props {
-	value: number | bigint
-}
-function Value_Number({
-	value
-}: Value_Number_Props) {
-	return (
-		<span className="text-[#a7ce9b]">
-			{value}
-		</span>
-	)
-}
-
-interface Value_Boolean_Props {
-	value: boolean
-}
-function Value_Boolean({
-	value
-}: Value_Boolean_Props) {
-	return <Value_Keyword value={value ? 'true' : 'false'} />
-}
-
-interface Value_Function_Props {
-	// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
-	value: Function
-}
-function Value_Function({
-	value
-}: Value_Function_Props) {
-	const argsMatch = value.toString().match(/^[^(]*\(\s*([^)]*)\)/);
-	let args: string = '';
-
-	if (argsMatch && argsMatch.length > 1) {
-		args = argsMatch[1]!;
-	}
-
-	return (
-		<>
-			<span className="text-[#f2824a]">
-				{'ƒ '}
-			</span>
-			<span>
-				{`${value.name}(${args})`}
-			</span>
-		</>
-	)
-}
-
-interface Value_Keyword_Props {
-	value: string
-}
-function Value_Keyword({
-	value
-}: Value_Keyword_Props) {
-	return (
-		<span className="text-[#439ccb]">
-			{value}
-		</span>
-	)
-}
-
-interface Value_Object_Props {
-	value: object,
-	path: string[],
-	defaultExpanded?: boolean
-}
-function Value_Object({
-	value,
-	path,
-	defaultExpanded = false
-}: Value_Object_Props) {
-	const debug = useDebugger();
-
-	const [expanded, setExpanded] = useState(defaultExpanded);
-
-	const objectEntries = entries(value);
-
-	const collapsedPreview = useMemo(() => {
-		const children: React.ReactNode[] = [];
-		const keyList = keys(value);
-
-		for (let i = 0; i < Math.min(keyList.length, 6); i++) {
-			children.push(
-				<React.Fragment key={i}>
-					<Value_Object_Key text={keyList[i]!} />
-					{i < keyList.length - 1 && <Char_Comma />}
-				</React.Fragment>
-			);
-		}
-
-		if (keyList.length > 6)
-			children.push(<span key={'rest'} className="text-zinc-500">...</span>);
-
-		return children;
-	}, [value]);
-
-	useLayoutEffect(() => {
-		debug.event.expand(path, expanded);
-	}, [expanded]);
-
-	
-	const handleExpand = (state: boolean) => {
-		setExpanded(state);
-	}
-
-	return (
-		<>
-			<Chevron_Toggle expanded={expanded} onToggle={handleExpand} />
-
-			{
-				Object.getPrototypeOf(value) !== Object.prototype && <span>({value.constructor.name}) </span>
-			}
-
-			{
-				expanded ? (
-					<>
-						<Char_Bracket text="{" />
-
-						<ul className="pl-4 ml-1 border-l border-l-primary-400">
-							{
-								objectEntries.map(([key, value], ix) => {
-									return (
-										<li key={ix}>
-											<Value_Object_Key text={key} />
-											<Char_Colon />
-
-											<ParseValue value={value} path={[...path, `${key}`]} />
-
-											{ix < objectEntries.length - 1 && (
-												<Char_Comma />
-											)}
-										</li>
-									);
-								})
-							}
-						</ul>
-
-						<Char_Bracket text="}" />
-					</>
-				) : (
-					<div
-						className="inline-block cursor-pointer"
-						onClick={() => setExpanded(true)}
-					>
-						<Char_Bracket text="{" />
-						{' '}
-						{collapsedPreview}
-						{' '}
-						<Char_Bracket text="}" />
-					</div>
-				)
-			}
-		</>
-	);
-}
-
-interface Value_Array_Props {
-	value: unknown[],
-	path: string[],
-	defaultExpanded?: boolean
-}
-function Value_Array({
-	value,
-	path,
-	defaultExpanded = false
-}: Value_Array_Props) {
-	const debug = useDebugger();
-
-	const [expanded, setExpanded] = useState(defaultExpanded);
-
-	const children = useMemo(() => {
-		const children: React.ReactNode[] = [];
-		
-		let ix = 0;
-
-		while (ix < value.length) {
-			const nextTarget = Math.min(ix + debug.options.compactArrays, value.length);
-
-			children.push(
-				<li key={ix}>
-					{
-						(() => {
-							const children: React.ReactNode[] = [];
-
-							for (;ix < nextTarget; ix++) {
-								children.push(
-									<React.Fragment key={ix}>
-										<ParseValue value={value[ix]} path={[...path, `${ix}`]} />
-										{ix < value.length - 1 && (
-											<Char_Comma />
-										)}
-									</React.Fragment>
-								)
-							}
-
-							return children;
-						})()
-					}
-				</li>
-			);
-
-			ix = nextTarget;
-		}
-
-		return children;
-	}, [debug.options.compactArrays, value]);
-
-	const collapsedPreview = useMemo(() => {
-		const children: React.ReactNode[] = [];
-
-		for (let i = 0; i < Math.min(value.length, 6); i++) {
-			children.push(
-				<React.Fragment key={i}>
-					<ParseValue_ToSimple value={value[i]} />
-
-					{i < value.length - 1 && <Char_Comma />}
-				</React.Fragment>
-			);
-		}
-
-		if (value.length > 6)
-			children.push(<span key={'rest'} className="text-zinc-500">...</span>);
-
-		return children;
-	}, [value]);
-
-	useLayoutEffect(() => {
-		debug.event.expand(path, expanded);
-	}, [expanded]);
-
-	const handleExpand = (state: boolean) => {
-		setExpanded(state);
-	}
-
-	return (
-		<>
-			<Chevron_Toggle expanded={expanded} onToggle={handleExpand} />
-
-			<span>{`(${value.length}) `}</span>
-			{
-				expanded ? (
-					<>
-						<Char_Bracket text="[" />
-
-						<ul className="pl-4 ml-1 border-l border-l-primary-400">
-							{children}
-						</ul>
-
-						<Char_Bracket text="]" />
-					</>
-				) : (
-					<div
-						className="inline-block cursor-pointer"
-						onClick={() => setExpanded(true)}
-					>
-						<Char_Bracket text="[" />
-						{/* <span className="text-zinc-500">...</span> */}
-						{collapsedPreview}
-						<Char_Bracket text="]" />
-					</div>
-				)
-			}
-		</>
-	);
-}
-
-
-interface Value_Object_Key_Props {
-	text: string,
-}
-function Value_Object_Key({
-	text
-}: Value_Object_Key_Props) {
-	return (
-		<span className="text-[#9CDCF0]">
-			{text}
-		</span>
-	)
-}
-
-interface Value_SymbolProps {
-	value: symbol
-}
-function Value_Symbol({
-	value
-}: Value_SymbolProps) {
-	return (
-		<>
-			<Value_Keyword value="Symbol" />
-			<Char_Bracket text="(" />
-			<span>
-				{value.description}
-			</span>
-			<Char_Bracket text=")" />
-		</>
-	)
-}
-
-interface ParseValue_ToSimpleProps {
-	value: unknown
-}
-function ParseValue_ToSimple({
-	value
-}: ParseValue_ToSimpleProps): React.ReactNode {
-	const MAX_LENGTH = 16;
-
-	switch (typeof value) {
-		case 'bigint':
-		case 'number': {
-			const numStr = value.toString();
-
-			if (numStr.length > MAX_LENGTH)
-				return <Value_Keyword value={typeof value} />;
-
-			return <Value_Number value={value} />
-		}
-		case 'boolean': return <Value_Boolean value={value} />
-		case 'function': return <Value_Function value={value} />
-		case 'object': {
-			if (value === null)
-				return <Value_Keyword value="null" />
-
-			const className = Object.getPrototypeOf(value) !== Object.prototype ? value.constructor.name : null;
-
-			if (className === null || className.length > MAX_LENGTH)
-				return <Value_Keyword value="object" />
-
-			return className;
-		}
-		case 'string': {
-			if (value.length > MAX_LENGTH)
-				return <Value_String value="string" noEncase />
-
-			return <Value_String value={value} />;
-		}
-		case 'symbol': {
-			if (!value.description || value.description.length > MAX_LENGTH)
-				return <Value_Keyword value="Symbol" />
-
-			return <Value_Symbol value={value} />
-		}
-		case 'undefined': return <Value_Keyword value="undefined" />
-	}
-}