@hrnec06/react_utils 1.1.0 → 1.2.1

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 className;
+		}
+		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>({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/hooks/useKeyListener.ts

@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+
+interface KeyListenerOptions {
+	ctrl?: boolean,
+	shift?: boolean,
+	alt?: boolean
+}
+export default function useKeyListener(key: string, options?: KeyListenerOptions) {
+	const [pressing, setPressing] = useState(false);
+
+	const keyMatching = (e: KeyboardEvent, strict: boolean): boolean => {
+		if (strict && options?.ctrl && !e.ctrlKey)
+			return false;
+
+		if (strict && options?.shift && !e.shiftKey)
+			return false;
+
+		if (strict && options?.alt && !e.altKey)
+			return false;
+
+		return e.code == key;
+	}
+
+	useEffect(() => {
+		const downListener = (e: KeyboardEvent) => {
+			if (!keyMatching(e, true)) return;
+
+			setPressing(true);
+		}
+
+		const upListener = (e: KeyboardEvent) => {
+			if (!keyMatching(e, false)) return;
+
+			setPressing(false);
+		}
+
+		window.addEventListener('keydown', downListener);
+		window.addEventListener('keyup', upListener);
+
+		return () => {
+			window.removeEventListener('keydown', downListener);
+			window.removeEventListener('keyup', upListener);
+		}
+	}, []);
+
+	return pressing;
+}

package/src/hooks/useListener.ts

@@ -0,0 +1,11 @@
+import { DependencyList, useEffect } from "react"
+
+export default function useListener<E extends keyof GlobalEventHandlersEventMap>(element: Node, event: E, listener: (event: GlobalEventHandlersEventMap[E]) => void, deps?: DependencyList) {
+	useEffect(() => {
+		element.addEventListener(event, listener as EventListenerOrEventListenerObject);
+
+		return () => {
+			element.removeEventListener(event, listener as EventListenerOrEventListenerObject);
+		}
+	}, deps);
+}

package/src/hooks/useSignal.ts

@@ -0,0 +1,31 @@
+import { ReactUtils } from "@hrnec06/util";
+import { useState } from "react";
+
+export default function useSignal<T>(value: T): Signal<T>
+{
+	const [_value, _setValue] = useState(value);
+
+	const signal = new Signal(_value, _setValue);
+
+	return signal;
+}
+
+export class Signal<T>
+{
+	constructor(
+		private _value: T,
+		private setState: ReactUtils.SetState<T>
+	)
+	{
+	}
+
+	public set value(value: T)
+	{
+		this.setState(value);
+	}
+
+	public get value(): T
+	{
+		return this._value;
+	}
+}

package/src/hooks/useUpdateEffect.ts

@@ -0,0 +1,14 @@
+import { useEffect, useRef, useState } from "react";
+
+export default function useUpdateEffect(callback: React.EffectCallback, value: unknown[]) {
+	const isFirstRun = useRef(true);
+
+	useEffect(() => {
+		if (isFirstRun.current) {
+			isFirstRun.current = false;
+			return;
+		}
+
+		return callback();
+	}, value);
+}

package/src/hooks/useUpdatedRef.ts

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

package/src/hooks/useWindowSize.ts

@@ -0,0 +1,22 @@
+import { Vector2 } from "@hrnec06/util";
+import { useEffect, useState } from "react";
+
+export default function useWindowSize(): Vector2 {
+	const [dimensions, setDimensions] = useState<Vector2>([1920, 1080]);
+
+	useEffect(() => {
+		setDimensions([window.innerWidth, window.innerHeight]);
+
+		const listener = () => {
+			setDimensions([window.innerWidth, window.innerHeight]);
+		}
+
+		window.addEventListener('resize', listener);
+
+		return () => {
+			window.removeEventListener('resize', listener);
+		}
+	}, []);
+
+	return dimensions;
+}

package/src/index.tsx

@@ -0,0 +1,17 @@
+import useKeyListener from "./hooks/useKeyListener";
+import useListener from "./hooks/useListener";
+import useUpdatedRef from "./hooks/useUpdatedRef";
+import useUpdateEffect from "./hooks/useUpdateEffect";
+import useWindowSize from "./hooks/useWindowSize";
+import useSignal from "./hooks/useSignal";
+import Debugger from './debugger/Debugger';
+
+export {
+	useKeyListener,
+	useListener,
+	useUpdatedRef,
+	useUpdateEffect,
+	useWindowSize,
+	useSignal,
+	Debugger
+};

package/dist/index.d.mts

@@ -1,40 +0,0 @@
-import { DependencyList } from 'react';
-import { Vector2, ReactUtils } from '@hrnec06/util';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-interface KeyListenerOptions {
-    ctrl?: boolean;
-    shift?: boolean;
-    alt?: boolean;
-}
-declare function useKeyListener(key: string, options?: KeyListenerOptions): boolean;
-
-declare function useListener<E extends keyof GlobalEventHandlersEventMap>(element: Node, event: E, listener: (event: GlobalEventHandlersEventMap[E]) => void, deps?: DependencyList): void;
-
-declare function useUpdatedRef<V>(value: V): React.RefObject<V>;
-
-declare function useUpdateEffect(callback: React.EffectCallback, value: unknown[]): void;
-
-declare function useWindowSize(): Vector2;
-
-declare function useSignal<T>(value: T): Signal<T>;
-declare class Signal<T> {
-    private _value;
-    private setState;
-    constructor(_value: T, setState: ReactUtils.SetState<T>);
-    set value(value: T);
-    get value(): T;
-}
-
-interface DebugProps {
-    value: unknown;
-    openPaths?: string[];
-    excludePaths?: string[];
-    size?: 'normal' | 'big' | 'tiny';
-    compactArrays?: number;
-    autoHeight?: boolean;
-    openRoot?: boolean;
-}
-declare function Debug({ value, openPaths, excludePaths, size, compactArrays, autoHeight, openRoot }: DebugProps): react_jsx_runtime.JSX.Element;
-
-export { Debug as Debugger, useKeyListener, useListener, useSignal, useUpdateEffect, useUpdatedRef, useWindowSize };