@hrnec06/react_utils 1.1.0 → 1.2.0

package/package.json

@@ -1,16 +1,9 @@
 {
   "name": "@hrnec06/react_utils",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A debugger component for react.",
   "exports": {
-    ".": {
-      "types": {
-        "require": "./dist/index.d.ts",
-        "import": "./dist/index.d.mts"
-      },
-      "require": "./dist/index.js",
-      "import": "./dist/index.mjs"
-    }
+    ".": "./src/index.tsx"
   },
   "keywords": [],
   "author": {
@@ -20,7 +13,7 @@
   },
   "license": "ISC",
   "files": [
-    "dist"
+    "src"
   ],
   "publishConfig": {
     "access": "public",
@@ -38,7 +31,6 @@
     "react": "^19.1.0"
   },
   "scripts": {
-    "build": "tsup src/index.tsx --format cjs,esm --dts",
     "dev": "tsup src/index.tsx --format cjs,esm --dts --watch"
   }
 }

package/src/debugger/DebugParser.tsx

@@ -0,0 +1,401 @@
+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" />
+	}
+}